next
react
tailwindcss
react-lottie-player
storybook
npm run dev
npm run storybook (storybook 시작)
app
├──api - 외부 연동 api를 위한 세팅과 펑션 정의 (미 사용)
│
├──components - 서비스 내에서 쓰이는 공통 컴포넌트
│ └──lottieAnimatePane.tsx - 로티 애니메이션 플레이어 적용을 위한 공통 컴포넌트
│
├──layout - 기본적인 레이아웃 (header, content, footer)
│ ├──contents.tsx - 메인 컨텐츠
│ ├──footer.tsx - 사이트 푸터 정의
│ └──header.tsx - 사이트 헤더 정의 (탑메뉴)
│
└──pages - 메인 컨텐츠 내 각 섹션
├──abountme.tsx - 간단 자기소개 섹션
├──contacts.tsx - 연락처 정보 섹션 (github, gmail, naver)
├──projects.tsx - 수행한 프로젝트들의 정보 섹션
└──skills.tsx - 사용하는 기술 스택 소개 섹션
stories
├──backup - storybook 설치시 기본 세팅되는 button, header, page 백업
│ └──(내용 생략)
│
├──Abountme.stories.ts - 간단 자기소개 섹션 stories 문서화
├──Contacts.stories.ts - 연락처 정보 섹션 (github, gmail, naver) stories 문서화
├──Projects.stories.ts - 수행한 프로젝트들의 정보 섹션 stories 문서화
├──Skills.stories.ts - 사용하는 기술 스택 소개 섹션 stories 문서화
├──Header.stories.ts - 사이트 헤더 정의 (탑메뉴) stories 문서화
└──Footer.stories.ts - 사이트 푸터 정의 stories 문서화