원티드 프리온보딩 7차 3차 과제

과제 설명

Assignment 3 주제 : B2C 차량대여 서비스

진행 기간 : 2022-11-02 ~ 2022-11-04

데모 링크

🚀 GO TO DEMO

검색하기 🚓

_{차량 전체 페이지}

상세 보기 🚗

_{차량 상세 페이지}

실행 방법

Local

# Clone Repo
git clone

# Install Dependency
yarn run install

# Run Project
yarn run dev

# Build Project
yarn run build

12팀 소개


[팀장] 오다영	[부팀장] 위영민	김종현	박상호	임승민	피경희

12팀이 동료학습으로 협업하는 방식

Convention Rule을 정하고, 모든 팀원이 실천합니다.
게더 타운에서 만나요~

1시부터 6시까지는 12팀이 집중해서 작업하는 코어 시간입니다. 멀리 떨어져 있지만 옆에 있는 것처럼 화면을 공유하고 서로 자유롭게 의견을 나누면서 과제를 해결하기 위해 협업합니다.

gitflow

12팀은 git flow 방식으로 개발하고 있습니다. devlop branch에 자신이 작업한 branch를 merge하려면 최소 두 명 이상의 팀원이 리뷰를 하고, 요청을 수락해야 합니다. 그래서 12팀은 pull request 요청이 오는 즉시 12팀의 디스코드에 알람으로, 메일로 각 팀원들에게 전달되어 빠르게 피드백이 가능하면서도 작업하는 branch의 변경사항을 공유할 수 있는 환경을 구성했습니다.

피그잼 & 피그마

피그잼에 모여서 UI를 고민하는 팀과 데이터를 고민하는 팀으로 나누어서 계획을 짜고, 다시 모여서 함께 짧은 시간동안 완성해야하는 작업을 나눴습니다. 피그잼과 피그마로 함께 만들 소프트웨어를 기획했습니다. 작업을 시작했습니다~

피그잼에서 고민한 내용 보러가기
피그마에서 기획한 내용 보러가기

과제 달성 사항 및 해결 방법

필수 요구 사항

추가 구현 사항

SEO
- 카카오톡, 페이스북에 공유 시 아래의 내용이 미리보기로 노출되도록 해야 함
  - 제목: car.brand + car.name
  - 내용: 월 car.amount 원
  - 사진: 차량 사진

디스코드 OG

슬라이드 카테고리
- api 요청 url에 fueltype과 segment 두가지로 api 요청이 가능한 것을 파악
- Figma 상의 디자인에는 segment 카테고리만 구현
- fuletype segment 데이터 두개를 사용해 api 요청을 하기 위해 카테고리를 분리 필요
- 검색기능 세분화를 통한 UX 개선을 목표로 카테고리 분리를 선택

슬라이드 구현

레포지토리 구조(src)

📦src
 ┣ 📂apis
 ┃ ┣ 📜car.ts
 ┃ ┗ 📜requester.ts
 ┣ 📂assets
 ┃ ┗ 📂images
 ┃ ┃ ┗ 📜back_icon.svg
 ┣ 📂components
 ┃ ┣ 📂feature
 ┃ ┃ ┣ 📂CarListItem
 ┃ ┃ ┃ ┣ 📜index.tsx
 ┃ ┃ ┃ ┗ 📜styled.ts
 ┃ ┃ ┣ 📂DetailForm
 ┃ ┃ ┃ ┣ 📜index.tsx
 ┃ ┃ ┃ ┗ 📜styled.ts
 ┃ ┃ ┣ 📂FormBody
 ┃ ┃ ┃ ┣ 📜index.tsx
 ┃ ┃ ┃ ┗ 📜styled.ts
 ┃ ┃ ┣ 📂FormHeader
 ┃ ┃ ┃ ┣ 📜index.tsx
 ┃ ┃ ┃ ┗ 📜styled.ts
 ┃ ┃ ┗ 📂Nav
 ┃ ┃ ┃ ┣ 📜index.tsx
 ┃ ┃ ┃ ┗ 📜styled.ts
 ┃ ┣ 📂layout
 ┃ ┃ ┣ 📂Header
 ┃ ┃ ┃ ┣ 📜index.tsx
 ┃ ┃ ┃ ┗ 📜styled.ts
 ┃ ┃ ┣ 📜index.tsx
 ┃ ┃ ┗ 📜styled.ts
 ┃ ┣ 📂shared
 ┃ ┃ ┣ 📂Chip
 ┃ ┃ ┃ ┣ 📜index.tsx
 ┃ ┃ ┃ ┗ 📜styled.ts
 ┃ ┃ ┣ 📂Image
 ┃ ┃ ┃ ┣ 📜index.tsx
 ┃ ┃ ┃ ┗ 📜styled.ts
 ┃ ┃ ┣ 📂SEOMetaTag
 ┃ ┃ ┃ ┗ 📜index.tsx
 ┃ ┃ ┗ 📂StatusContent
 ┃ ┃ ┃ ┣ 📜index.tsx
 ┃ ┃ ┃ ┗ 📜styled.ts
 ┃ ┗ 📜index.ts
 ┣ 📂constants
 ┃ ┣ 📜api.ts
 ┃ ┣ 📜attributeDummyData.ts
 ┃ ┗ 📜car.ts
 ┣ 📂hooks
 ┃ ┣ 📜useCar.ts
 ┃ ┗ 📜useCars.ts
 ┣ 📂pages
 ┃ ┣ 📂CarDetail
 ┃ ┃ ┣ 📜index.tsx
 ┃ ┃ ┗ 📜styled.ts
 ┃ ┣ 📂CarList
 ┃ ┃ ┣ 📜index.tsx
 ┃ ┃ ┗ 📜styled.ts
 ┃ ┣ 📂ErrorPage
 ┃ ┃ ┣ 📜ErrorBoundary.tsx
 ┃ ┃ ┣ 📜index.tsx
 ┃ ┃ ┗ 📜styled.ts
 ┃ ┗ 📜index.ts
 ┣ 📂recoil
 ┃ ┗ 📂atoms
 ┃ ┃ ┗ 📜ChipAtom.tsx
 ┣ 📂router
 ┃ ┣ 📜index.tsx
 ┃ ┗ 📜routePath.ts
 ┣ 📂styles
 ┃ ┣ 📜GlobalStyle.tsx
 ┃ ┣ 📜index.ts
 ┃ ┣ 📜styled.d.ts
 ┃ ┗ 📜theme.ts
 ┣ 📂types
 ┃ ┗ 📜car.ts
 ┣ 📂utils
 ┃ ┣ 📜ArrayUtils.ts
 ┃ ┣ 📜DateUtils.ts
 ┃ ┗ 📜StringUtils.ts
 ┣ 📜App.tsx
 ┣ 📜index.tsx
 ┗ 📜vite-env.d.ts

wanted-pre-onboarding-frontend-12team/pre-onboarding-7th-2-1-12

원티드 프리온보딩 7차 3차 과제

과제 설명

데모 링크

실행 방법

Local

12팀 소개

12팀이 동료학습으로 협업하는 방식

과제 달성 사항 및 해결 방법

필수 요구 사항

추가 구현 사항

레포지토리 구조(src)

기술 스택