목표는 취업이조 2팀

🚀 정보

• 배포주소 바로가기
• 노션 바로가기
• 원본 레포지토리 바로가기

🛠 기술 스택

📚 Frameworkes & Libraries

• [email protected]
• [email protected]
• typescript@^4.5.5
• styled-components@^5.3.3
• axios@^0.26.0

🔧 Tools

• commitizen@^4.2.4
• vercel
  
  

👀 프로젝트 빌드 및 실행 방법

1. 상단 Code 버튼을 눌러 레포지토리를 클론 받습니다.

$ git clone https://github.com/wanted-team2/3week_ncnc.git

2. 패키지를 설치합니다.

$ yarn install

3. 서버를 실행합니다.

$ yarn dev
$ yarn build

😎 팀원

김지영(팀장)	고병표	유제호	홍수연
🚀 회고

🔥 프로젝트 과정 소개

실시간 회의	Issue 트래킹 및 PR 분배

정보 공유	반복 최소화

🗣 공통 기능

• commitizen 활용하여 커밋 컨벤션 통일화
• issue로 업무 할당, PR로 issue 트래킹

📝 담당한 기능

✔ 김지영

• ⭐️ Team Leader 프로젝트 전체 관리, 역할 분배 및 issue 관리, 문서 작성
• babel, eslint, prettier, next.config, style theme, web-font, favicon 등의 프로젝트 기초 세팅
• 반복되는 로직은 함수, styled의 css로 분리
• 크롬 light-house를 활용해 접근성 12%개선, 검색엔진 최적화 100% 달성
• unsplash를 활용해 **json mock data**로 커스텀 swiper API 생성
  • 정적 데이터 캐시가 존재하지 않을 경우 랜덤 이미지 생성
• 기존의 getServerSideProps → CSR로 변경하여 페이지 로딩 속도 개선
  • 데이터 fetch가 느릴 경우 Loading 컴포넌트 표시로 UX 개선
• LCP 컨텐츠일 경우 image priority 속성으로 초기 데이터 다운 속도 개선
• 초기렌더링 시 메인 페이지 Navigation Bar의 active된 DOM 요소 위치로 scroll을 이동시켜 UX 개선
• Dropdowns 구현. useTabs 커스텀 훅 활용.
• 라이브러리 없이 Swiper 컴포넌트 구현. 커스텀 훅 활용.
• Contacts 페이지 구현

고병표

• button, Header, Drawer 컴포넌트 구현
• main 페이지 구현

유제호

• NavigationBar, ProductionList 컴포넌트 구현
• categories/brands 페이지 구현
• 각 페이지 api 로직 구현
• 배포

홍수연

• OptionBox, CategoryList 컴포넌트 구현
• items 페이지 구현

📈 디렉토리 구조

.
├── README.md
├── api
│   └── index.ts
├── components
│   ├── base
│   └── domain
├── fileMock.js
├── hooks
│   ├── index.ts
│   ├── useAxios.ts
│   ├── useClickedId.tsx
│   ├── useOption.ts
│   ├── useSwipe.tsx
│   ├── useTabs.tsx
│   └── useWindowWidth.tsx
├── jest.config.js
├── next-env.d.ts
├── next.config.js
├── package.json
├── pages
│   ├── 404
│   ├── _app.tsx
│   ├── _document.tsx
│   ├── brands
│   ├── categories
│   ├── contacts
│   ├── index.tsx
│   └── items
├── pagesStyle
│   ├── brandsStyle.ts
│   ├── categoriesStyle.ts
│   ├── contactStyle.ts
│   ├── homeStyle.ts
│   └── itemStyle.ts
├── public
│   ├── android-chrome-144x144.png
│   ├── apple-touch-icon.png
│   ├── browserconfig.xml
│   ├── favicon-16x16.png
│   ├── favicon-32x32.png
│   ├── favicon.ico
│   ├── fonts
│   ├── images
│   ├── mock
│   ├── mstile-150x150.png
│   └── site.webmanifest
├── styleMock.js
├── styles
│   ├── commonCompo.tsx
│   ├── commonStyle.ts
│   ├── font.ts
│   ├── globalStyle.ts
│   ├── index.ts
│   ├── styled.d.ts
│   └── theme.ts
├── tsconfig.jest.json
├── tsconfig.json
├── types
│   ├── Brand.ts
│   ├── Category.ts
│   ├── ConItem.ts
│   ├── Nested.ts
│   ├── QaType.ts
│   ├── Qas.ts
│   ├── SoonItem.ts
│   ├── Swipe.ts
│   └── index.ts
├── utils
│   └── fucntions
├── yarn-error.log
└── yarn.lock