컴포넌트 분리

Header라는 Organism을 만들기 위해서는 Organism에서 Header 폴더를 생성하고

Header 폴더 아래에 Header 컴포넌트를 export해주기 위한 index.tsx파일과 Header 컴포넌트에서 사용하기 위한 style을 관리하는 파일인 styles.tsx파일을 생성한다.

index.tsx

index.tsx 파일은 export 해주기 위한 컴포넌트 함수를 함수표현식으로 생성하고, 비즈니스 로직과 UI 로직을 작성한다.

이 때, 사용되는 UI 로직은 styles.tsx에서 import 하여 사용한다.

styles.tsx

styles.tsx 파일은 index.tsx에서 UI를 위한 컴포넌트를 styled-component를 사용하여 관리해준다.