🎁 Pick-Time | 피크 타임

주는 사람 플로우

처음	메시지 카드 생성	선물 추가
쿠폰 추가	선물 목록 확인

받는 사람 플로우

받는 사람 처음	받는 사람 선물 선택	받는 사람 랜덤

무엇이든 담아서 당신의 소중한 사람에게 마음을 전하세요!

피크 타임 서비스의 궁극적인 목적은

선물 고민을 해소하고, 받는 사람이 직접 원하는 선물을 선택할 수 있도록 하는 것입니다.

이 서비스는 선물을 주고 싶은 사람들이 피크 타임 플랫폼을 통해 선물 아이템을 모아두고 링크를 공유하면, 받는 사람은 그 중에서 마음에 드는 것을 선택하고 주문할 수 있습니다.

이를 통해 선물 고민과 번거로움을 줄이고, 받는 사람이 만족하는 선물을 선정할 수 있는 서비스입니다.

프로젝트 개요

🗓 개발 기간

• 1차 6월 21일 ~ 6월 26일
• 2차 10월 23일 ~ 10월 27일

👨‍👩‍👦‍👦 조원

• 닝겐미키-Designer👩🏻‍💻
• 다모-Back-end
• 마크-Front-end
• 마로-Front-end👩🏻‍💻
• 엘라-Front-end
• 코마-Front-end
• 토마토-Back-end
• 타몽-Front-end

🏃🏽‍♀️🏃‍♂️ Kick-off

2023.06.21 20:30pm(KST)

서비스 개요

대상

• 카카오톡에는 없는 선물을 하고 싶으신 분
• 선물을 받는 상대방을 생각하며 선물을 고민하고 계신 분

고민의 방향성

페이지 구상

Quick Start

1. git clone https://github.com/pick-time/pick-time-fe.git
2. cd pick-time-fe
3. npm install && npm start

Stack

• 코어: React, TypeScript, CRA
• 상태관리: Recoil, @tanstack/react-query
• 스타일링: styled-components
• 환경: node.js v18

Co-op Conventions

Folder Structure

|-- components (Element UI 컴포넌트를 정의합니다.)
  |-- 파일명은 도메인을 포함시키지 않습니다.
  |-- GiftCard.tsx (X) | Card.tsx (O)
|-- constants (전역적으로 사용 될 상수를 정의합니다.)
|-- hooks (custom hooks 정의합니다.ex-data fetch hooks)
  |-- 커스텀 훅은 prefix 로 use를 붙입니다.
  |-- useDataFetch.ts
|-- utils (비지니스 로직은 제거된 순수함수를 정의합니다.)
|-- pages (비즈니스 로직이 담긴 페이지 컴포넌트를 정의합니다.)
  |-- pages 하위에 파일은 라우트와 1:1 매핑 관계입니다.
  |-- intro.tsx -> /intro
  |-- Gift.tsx -> /gift

Flow

모든 개발 및 협업과정은 Git Flow 를 따른다.

• 개발을 시작하기 전 issue를 생성한다.
  • issue는 본인이 작업할 내용을 적는다.
• develop 브랜치에서 분기하여 각자의 feature 브랜치를 생성하여 작업한다.
  • feature 브랜치는 feature/기능이름 형식으로 생성한다. ex) feature/intro-page
  • 띄어쓰기는 -로 작성 , 마침표 . 는 사용하지 않는다.
• 작업이 완료되면 develop 브랜치로 PR을 생성한다.
  • commit은 squash and merge로 한다.
  • PR은 Assignee로 본인을 지정한다.
  • PR 내용은 간단하게 작성하고 issue를 연결한다.
  • Approve를 1개 이상 받으면 develop 브랜치에 merge한다.

Branch

• main: 현재 product 버전
• develop: 현재 개발 중인 feature가 모인 최신 버전
• feature: 단위 기능 개발 중인 브랜치
• hotfix: main 브랜치에서 발생한 버그를 수정하는 브랜치

Commit Type

type은 다음 항목 중 하나를 선택해서 commit을 작성한다.

• build: 빌드 시스템이나 외부 종속성에 영향을 미치는 변경 사항
• ci: CI 구성 파일 및 스크립트에 대한 변경 사항
• docs: Documentation에 대한 변경 사항
• feat: 새로운 기능 추가
• fix: 버그 수정
• refactor: 버그 수정과 기능 추가 모두 포함되지 않는 기존 코드 변경 사항
• style: 스타일링 관련 사항
• test: 테스트 코드 추가 혹은 기존의 테스트 코드 수정에 대한 변경 사항