| 데스크톱뷰 | 로그인 | 홈화면 |
|---|---|---|
| 카테고리 | 상품 등록 | 상품 삭제 | 상품 상태 변경 | 관심상품 등록 |
|---|---|---|---|---|
- React.js: 웹 UI 라이브러리
- TypeScript: 정적 타입 사용 및 코드 에러 검출
- styled-components: css-in-js를 통한 컴포넌트 스타일 관리
- storybook: 컴포넌트 UI 테스트
- ESLint & Prettier: 코드 컨벤션 검사 및 코드 포맷팅
- 코딩 컨벤션
- 브랜치 전략, 이슈, 커밋, PR
- 코드 리뷰 후 merge 진행: PR 보러가기
📦 public # 정적 파일들이 위치하는 디렉토리
├─ .storybook # Storybook 설정 파일
├─ src # 소스 코드가 위치하는 디렉토리
│ ├─ assets # 이미지 및 기타 자원 파일들
│ ├─ components # 컴포넌트 파일 - UI 구성 요소들
│ │ ├─ common # 공통으로 사용되는 컴포넌트들
│ │ └─ ... # 페이지별 컴포넌트들
│ ├─ context # 상태 관리를 위한 컨텍스트 파일들
│ │ ├─ themeContext.tsx # 다크모드 테마 관련 컨텍스트
│ │ └─ userContext.tsx # 유저 로그인 상태 관련 컨텍스트
│ ├─ hooks # 커스텀 훅 파일들
│ │ ├─ useFetch.ts # 데이터 페치 관련 커스텀 훅
│ │ └─ useIntersectionObserver.ts # 무한 스크롤 타겟 감지 커스텀 훅
│ ├─ pages # 페이지 컴포넌트들
│ ├─ styles # 전역 스타일 설정 및 컬러, 타이포 시스템 정리
│ │ ├─ color.ts # 컬러 시스템 정의
│ │ ├─ font.ts # 타이포시스템 정의
│ │ └─ GlobalStyle.ts # 전역 스타일 설정
│ ├─ utils # 공통으로 사용하는 유틸리티 함수들
│ ├─ App.tsx # 애플리케이션 컴포넌트
│ └─ index.tsx # 엔트리 포인트 파일
├─ .env # 환경 변수 설정 파일
├─ .eslintrc.json # ESLint 설정 파일
├─ prettierrc # Prettier 설정 파일
├─ craco.config.js # Craco 설정 파일
├─ package-lock.json # npm 패키지 의존성 파일
├─ package.json # npm 패키지 의존성 및 프로젝트 상세 파일
├─ README.md # README 파일
├─ tsconfig.json # 타입스크립트 설정 파일
└─ tsconfig.paths.json # 절대 경로 설정 파일
