[chore] 파일 구조 수정

components 파일 구조 수정 전

components 파일 구조 수정 후

component 각 이름에 맞는 파일을 만들어주고 index.js와 styles.js로 분리해주었다.

pages 파일 구조 수정 전

pages 파일 구조 수정 후

세부적인 파일 구조

mainPage - index.js

import React from 'react';
import { Link } from 'react-router-dom';
import SelectBar from '../../components/selectBar';
import * as s from './styles';

const MainPage = () => {

    return(
        <>
            <s.Wrapper>
                <s.BtnWrapper>
                    <Link to={'/'}>
                        <s.Btn value='account'>
                            <i className="fas fa-coins"></i>
                        </s.Btn>
                    </Link>
                    <s.Stick></s.Stick>
                    <Link to={'/calendar'}>
                        <s.Btn value='calendar'>
                            <i className="fas fa-calendar-alt"></i>
                        </s.Btn>
                    </Link>
                </s.BtnWrapper>
            </s.Wrapper>
            <SelectBar/>
        </>
    );
}

export default MainPage;

mainPage - styles.js

import styled from 'styled-components';

export const Wrapper = styled.div`
    width:100%;
    display:flex;
    height:60px;
    align-items:center;
    justify-content:center;
`;

export const BtnWrapper = styled.nav`
    width:150px;
    margin-top:25px;
    display:flex;
    justify-content:space-between;
`;

export const Btn = styled.button`
    width:30px;
    padding:0px;
    font-size:30px;
    border:none;
    outline:none;
    background:none;
    &:hover{
        cursor:pointer;
        transform:scale(1.3);
        transition:transform 0.5s linear;
    }
`;

export const Stick = styled.div`
    width:2px;
    height:32px;
    background:black;
`;

redux 파일 구조 수정 전

redux 파일 구조 수정 후

폴더를 사용하여 정리를하니 좀 더 깔끔해지고, 직관적인 것 같다.