문제 정의: 마음에 드는 도안을 찾더라도 과연 나에게 어울릴지, 후회하지 않을지, 주위의 시선 등의 이유로 길게는 3년 이상 고민과 망설임을 반복한다.
👀 target
-
타투를 하고 싶지만, 과연 후회하지 않을지. 고민과 망설임을 반복하며 리소스를 허비하는 고객
-
고민하는 도안 또는 개체를 [타투스티커]라는 수단을 통해 미리 부위에 부착하고 생활하며, 다양한 고민의 이유를 현실적으로 해결하고 해소할 수 있을 것임.
📍 service flow
-
유저 로그인
- 소셜 로그인 기능
- 로그인 성공 시, 회원 전용 홈 화면으로 이동
-
포인트를 활용한 결제 서비스- 포인트가 구매 금액보다 적으면, 계좌로 구매 금액을 송금하여 포인트 충전 후 결제 가능
-
커스텀 도안의 유무에 따라 주문 페이지 및 금액이 달라짐. -
내 타투페이지에서 찜 목록과 주문 목록 화인 가능.
✅ solution
가상으로 체험해본다면, 더 나아가 생활해본다면 고민의 장벽을 대폭 낮출 수 있을 것이라고 판단함.-
효율적인고민과 탐색 🔎- 타투스티커를 통해 타투 고민의 과정 단축 가능.
-
현실적인결정 💡- 체험과 생활을 통해 고객의 상황에 맞는 현실적인 결정 가능.
-
개인화 맞춤화경험 🪄- 개인이 고민하는 이유/상황에 맞는 직접적인 선택 및 결정 경험 가능.
즉! 소비자가 고민되는 모든 것들을 직접 타투스티커로 체험하며, 고민의 효율성을 높이는 커스터마이징된 타투를 선택 및 체험 가능.
- 내 도안 그대로 만들기 : 타투스티커 크기, 도안 이미지 첨부, 타투스티커 이름, 요청 사항, 수량 선택 가능
- 타투어에게 도안 의뢰하기 : 타투스티커 크기, 참고 이미지 첨부, 레퍼런스 대충 그리기, 색상, 장르 , 스타일, 타투스티커 이름, 주제 및 추가 설명, 요청 사항, 수량 선택 가능
| 팀원 | 구건모  |
서아름 |
유지민 |
조승희 |
조연서 |
|---|---|---|---|---|---|
| 팀원 소개 | 
|
 |
 |
 |
 |
| 역할 | WEB FRONTEND, 리드 개발자 | WEB FRONTEND | WEB FRONTEND | WEB FRONTEND | WEB FRONTEND |
| 역할 | 종류 |
|---|---|
| Library |  |
| Programming Language |  |
| Styling |  |
| State Management |  |
| Formatting |   |
| Version Control |   |
1️⃣ Commit 컨벤션
- 기본적인것 (feat, fix, chore, ..) 중점적으로 지키기!
| 제목 | 내용 |
|---|---|
| init | 브랜치 첫 커밋 |
| feat | 새로운 기능에 대한 커밋 |
| fix | 버그 수정에 대한 커밋 |
| build | 빌드 관련 파일 수정에 대한 커밋 |
| chore | 그 외 자잘한 수정에 대한 커밋 |
| docs | 문서 수정에 대한 커밋 |
| style | style: 코드 스타일 혹은 포맷 등에 관한 커밋 |
| refactor | 코드 리팩토링에 대한 커밋 |
2️⃣ Branch 전략
1. feature 브랜치를 파고 페이지 단위로 이름 생성 ex)feature/LoginPage
2. feature 브랜치 하위에 이슈 번호를 포함한 기능 단위 브랜치 생성 ex)LoginPage/#6-login
3. develop 브랜치 만들어서 페이지 단위 브랜치는 dev브랜치로 merge
4. 개발이 최종적으로 끝나면 main에 dev 브랜치 merge
5. 개발단계에서 merge가 이루어지면 develop pull 받아오기 !
1️⃣ 폴더 구조
- 공통 컴포넌트를 분리
- 페이지 단위로 러프하게 분리
├── public 🗂 썸네일 이미지, 로고 이미지 저장
├── .eslintrc.cjs ✨ 린트 설정
├── .prettierrc.cjs ✨ 프리티어 설정
├── package.json 📦 설치된 패키지를 관리하는 파일
└── src
├── App.tsx ✡️ 앱의 라우팅과 글로벌 스타일 지정
│
├── main.tsx
│
├── Router.tsx ✡️ 라우터 설정
│
├── assets
│ ├── icon 🖼 이미지 파일들 저장
│ ├── └── svgs 🌁 svg 파일들 저장
│
├── components 🗂 컴포넌트들 저장
│ ├── modal 🗂 모달 컴포넌트들
│ └── Login.tsx
│
├── pages 🗂 라우팅 시 보여질 페이지 컴포넌트 저장
│ └── LoginPage.tsx
│
├── recoil 🗂 리코일 관련 파일들 저장
│ ├── atoms 🗂 atom들 저장
│ └── seletors 🗂 selector들 저장
│
├── styles 🗂 전역 스타일 관련 파일들 저장
│ ├── GlobalStyle.js
│ ├── modal.css
│ └── color.js
│
├── utils 🗂 util 함수 관련 파일들 저장
│ └── apis 🗂 api 함수 관련 파일들 저장
2️⃣ 기타 컨벤션
1. 레이아웃 속성 (display, position, float 등)
2. 박스 모델 속성 (width, height, margin, padding, border 등)
3. 시각 관련 속성 (background-color, background-image, box-shadow 등)
4. 글꼴 관련 속성 (font-size, font-family, color, text-align, text-transform 등)
5. 기타 속성 (opacity, cursor, overflow, z-index, transition, animation 등)
- CSS : Styled component 사용
- theme와 globalStyle 사용 (
theme: colors, font ~ ) - rem을 위주로 적용.
- 화살표 함수형태 (
const ~~~ () => { } )) 로 사용.rsc컴포넌트 단축키 사용
- event 함수는
handle(Action)(Component) - 변수명 :
카멜케이스/ 상수데이터 :대문자/ Component명 :파스칼 - 절대경로 사용 (
src기준)