스타일 분리 (Meju_Refac)

기존에 styled-components를 사용하여 한 파일에 코드의 길이가 상당히 길었음이 맘에 들지 않아서,
스타일을 따로 분리하였다.
폴더안에 styles 로 폴더를 만들고

import styled from "styled-components";

export type TypeProps = {
  type: string;
};

export type TitleProps = {
  fontSize: string;
  fontWeight: string;
};

export const FormContainer = styled.div`
  height: 100vh;
  ${({ theme }) => theme.common.flexCenterCol};
`;
export const FormContentsContainer = styled.div`
  max-width: 600px;
  width: 100%;
  position: absolute;
  top: 15%;
  margin-bottom: 30px;
  @media screen and (max-width: 768px) {
    padding-bottom: 50px;
    padding: 0 25px;
    .top-title {
      display: none;
    }
  }
`;
export const FormContour = styled.hr`
  width: 100%;
  border-color: #eee;
`;

...

이런 식으로 export로 스타일 변수를 선언하고,
index.ts 파일로

export * from "@pages/login/styles/loginFormStyle";
export * from "@pages/login/styles/FindEmailStyle";

이렇게 내보내 주었다.
기존에 있던 폴더에서는

import * as styled from "./styles";

이 코드 한 줄이면 스타일을 다 받아 올 수 있고,

<FormContainer></FormContainer>

이렇게 사용하던 컴포넌트를

 <styled.FormContainer><styled.FormContainer>

이렇게 바꿔주기만 하면 된다.
나는 임의로 styled. 으로 알아보기 쉽게 하려 했는데 다른걸 사용해도 무방하다.
바꾸려면

import * as styled from "./styles";

이부분에 styled 대신 다른 명칭을 사용하면 된다.

코드량이 매우 많은게 불편했는데 조금 해소가 됐다.

여기서 중복되어 사용되는 type들은 나중에 util의 type으로 빼서
통합할 예정이다.