Skip to content

후회없는 선택의 여정을 함께, 커스텀 타투 체험 서비스 TATTOUR 🦋

Notifications You must be signed in to change notification settings

TEAM-TATTOUR/tattour-client

Repository files navigation

🦋 TATTOUR

표지


📱 서비스 소개

후회없는 선택의 여정을 함께, 커스텀 타투 체험 서비스 TATTOUR


🔎 타투를 받고 싶은 사람들은 왜 고민하고 망설이는데 시간을 허비하게 될까?

문제 정의: 마음에 드는 도안을 찾더라도 과연 나에게 어울릴지, 후회하지 않을지, 주위의 시선 등의 이유로 길게는 3년 이상 고민과 망설임을 반복한다.

👀 target
  • 타투를 하고 싶지만, 과연 후회하지 않을지. 고민과 망설임을 반복하며 리소스를 허비하는 고객

  • 고민하는 도안 또는 개체를 [타투스티커]라는 수단을 통해 미리 부위에 부착하고 생활하며, 다양한 고민의 이유를 현실적으로 해결하고 해소할 수 있을 것임.


📍 service flow
  1. 유저 로그인

    • 소셜 로그인 기능
    • 로그인 성공 시, 회원 전용 홈 화면으로 이동
  2. 포인트를 활용한 결제 서비스

    • 포인트가 구매 금액보다 적으면, 계좌로 구매 금액을 송금하여 포인트 충전 후 결제 가능
  3. 커스텀 도안의 유무에 따라 주문 페이지 및 금액이 달라짐.

  4. 내 타투 페이지에서 찜 목록과 주문 목록 화인 가능.


✅ solution 가상으로 체험해본다면, 더 나아가 생활해본다면 고민의 장벽을 대폭 낮출 수 있을 것이라고 판단함.
  • 효율적인 고민과 탐색 🔎

    • 타투스티커를 통해 타투 고민의 과정 단축 가능.
  • 현실적인 결정 💡

    • 체험과 생활을 통해 고객의 상황에 맞는 현실적인 결정 가능.
  • 개인화 맞춤화 경험 🪄

    • 개인이 고민하는 이유/상황에 맞는 직접적인 선택 및 결정 경험 가능.

즉! 소비자가 고민되는 모든 것들을 직접 타투스티커로 체험하며, 고민의 효율성을 높이는 커스터마이징된 타투를 선택 및 체험 가능.



🚀 핵심 기능 소개

1️⃣ TATTOUR MAIN : HOT CUSTOM, THEME, STYLE 소개, 네비게이션 사이드바

KakaoTalk_Photo_2023-07-21-22-58-41 001

2️⃣ TATTOUR SHOP : 고객들이 함께 만든 타투 스티커 둘러보기 및 주문하기 / 주문하기 과정에서 찜한 타투들은 '내 타투' 페이지에서 확인 가능

KakaoTalk_Photo_2023-07-21-22-58-41 002

3️⃣ TATTOUR CUSTOM : 원하는 제작 방식에 따라 섬세한 신청서 작성으로 나만의 타투 스티커 만들기

  • 내 도안 그대로 만들기 : 타투스티커 크기, 도안 이미지 첨부, 타투스티커 이름, 요청 사항, 수량 선택 가능
  • 타투어에게 도안 의뢰하기 : 타투스티커 크기, 참고 이미지 첨부, 레퍼런스 대충 그리기, 색상, 장르 , 스타일, 타투스티커 이름, 주제 및 추가 설명, 요청 사항, 수량 선택 가능
KakaoTalk_Photo_2023-07-21-22-58-42 003 KakaoTalk_Photo_2023-07-21-22-58-42 004

🙋🏻‍♀️ 팀원 소개


팀원 구건모 서아름 유지민 조승희 조연서
팀원 소개 image image image image image
역할 WEB FRONTEND, 리드 개발자 WEB FRONTEND WEB FRONTEND WEB FRONTEND WEB FRONTEND


⚙️ 기술 스택

역할 종류
Library React
Programming Language TypeScript
Styling Styled Components
State Management State Management
Formatting ESLint Prettier
Version Control Git GitHub


✍🏻 컨벤션

✨ Git 컨벤션

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 받아오기 !


✨ Project 컨벤션

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) 🎨 Style 속성

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 기준)

About

후회없는 선택의 여정을 함께, 커스텀 타투 체험 서비스 TATTOUR 🦋

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages