Skip to content

Latest commit

 

History

History
195 lines (157 loc) · 8.25 KB

README.md

File metadata and controls

195 lines (157 loc) · 8.25 KB

목표는 취업이조 2팀


🚀 정보



🛠 기술 스택

📚 Frameworkes & Libraries

  • Next.js@12.0.10
  • react.js@17.0.2
  • 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
  1. 패키지를 설치합니다.
$ yarn install
  1. 서버를 실행합니다.
$ 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