Merge branch 'develop' of https://github.com/TEAM-TATTOUR/tattour-client

into Refactor/#590-list-page
TEAM-TATTOUR · Feb 14, 2024 · 1adf907 · 1adf907
2 parents 77be4c6 + 94ada39
commit 1adf907
Show file tree

Hide file tree

Showing 31 changed files with 364 additions and 92 deletions.
diff --git a/README.md b/README.md
@@ -1,2 +1,274 @@
-# tattour-client
-TBD
+# 🦋 TATTOUR
+
+![표지](https://github.com/TEAM-TATTOUR/tattour-client/assets/77691829/e77e1a88-a897-48b1-8bc1-4f358d9dfdcb)
+
+<br/>
+
+
+## 📱 서비스 소개
+
+### 후회없는 선택의 여정을 함께, 커스텀 타투 체험 서비스 TATTOUR
+
+<br/>
+
+### 🔎 타투를 받고 싶은 사람들은 왜 고민하고 망설이는데 시간을 허비하게 될까?
+
+    문제 정의: 마음에 드는 도안을 찾더라도 과연 나에게 어울릴지, 후회하지 않을지, 주위의 시선 등의 이유로 길게는 3년 이상 고민과 망설임을 반복한다.
+
+<br/>
+
+<details>
+<summary> 👀 target </summary>
+
+- 타투를 하고 싶지만, 과연 후회하지 않을지. 고민과 망설임을 반복하며 리소스를 허비하는 고객
+
+- 고민하는 도안 또는 개체를 [타투스티커]라는 수단을 통해 미리 부위에 부착하고 생활하며, 다양한 고민의 이유를 현실적으로 해결하고 해소할 수 있을 것임.
+
+</details>
+
+<br />
+
+<details>
+<summary>📍 service flow </summary>
+
+1. 유저 로그인
+    - 소셜 로그인 기능
+    - 로그인 성공 시, 회원 전용 홈 화면으로 이동
+
+2. `포인트`를 활용한 결제 서비스
+    - 포인트가 구매 금액보다 적으면, 계좌로 구매 금액을 송금하여 포인트 충전 후 결제 가능
+
+3. `커스텀 도안`의 유무에 따라 주문 페이지 및 금액이 달라짐.
+
+4. `내 타투` 페이지에서 찜 목록과 주문 목록 화인 가능.
+</details>
+
+<br />
+
+<details>
+<summary>✅ solution</summary>
+가상으로 체험해본다면, 더 나아가 생활해본다면 고민의 장벽을 대폭 낮출 수 있을 것이라고 판단함.
+
+- `효율적인` 고민과 탐색 🔎
+
+  - 타투스티커를 통해 타투 고민의 과정 단축 가능.
+
+- `현실적인` 결정 💡
+
+  - 체험과 생활을 통해 고객의 상황에 맞는 현실적인 결정 가능.
+
+- `개인화 맞춤화` 경험 🪄
+  - 개인이 고민하는 이유/상황에 맞는 직접적인 선택 및 결정 경험 가능.
+
+<br />
+
+즉! 소비자가 고민되는 모든 것들을 직접 타투스티커로 체험하며, 고민의 효율성을 높이는 커스터마이징된 타투를 선택 및 체험 가능.
+
+</details>
+
+<br/>
+<hr/>
+
+## 🚀 핵심 기능 소개
+### **1️⃣ TATTOUR MAIN** : HOT CUSTOM, THEME, STYLE 소개, 네비게이션 사이드바
+<img width="595" alt="KakaoTalk_Photo_2023-07-21-22-58-41 001" src="https://github.com/TEAM-TATTOUR/tattour-client/assets/77691829/863b1e38-2ada-4bd2-a36b-0fd87a3171f4">
+
+### **2️⃣ TATTOUR SHOP** : 고객들이 함께 만든 타투 스티커 둘러보기 및 주문하기 / 주문하기 과정에서 찜한 타투들은 '내 타투' 페이지에서 확인 가능
+<img width="595" alt="KakaoTalk_Photo_2023-07-21-22-58-41 002" src="https://github.com/TEAM-TATTOUR/tattour-client/assets/77691829/de9a6ac6-bb8e-4fd8-8333-fbf0ce922a63">
+
+### **3️⃣ TATTOUR CUSTOM** : 원하는 제작 방식에 따라 섬세한 신청서 작성으로 나만의 타투 스티커 만들기
+* 내 도안 그대로 만들기 : 타투스티커 크기, 도안 이미지 첨부, 타투스티커 이름, 요청 사항, 수량 선택 가능
+* 타투어에게 도안 의뢰하기 : 타투스티커 크기, 참고 이미지 첨부, 레퍼런스 대충 그리기, 색상, 장르 , 스타일, 타투스티커 이름, 주제 및 추가 설명, 요청 사항, 수량 선택 가능
+
+<img width="595" alt="KakaoTalk_Photo_2023-07-21-22-58-42 003" src="https://github.com/TEAM-TATTOUR/tattour-client/assets/77691829/a8999877-8130-42ce-bd90-556e2e2eb511">
+<img width="595" alt="KakaoTalk_Photo_2023-07-21-22-58-42 004" src="https://github.com/TEAM-TATTOUR/tattour-client/assets/77691829/683d94dd-eb58-4036-a77a-bfdb2cf9232e">
+
+<br/>
+<hr/>
+
+
+## 🙋🏻‍♀️ 팀원 소개
+<br/>
+<div align="center">
+	<table>
+<th>팀원</th>
+  <th>구건모  <a href="https://github.com/gunom"><img src="https://img.shields.io/badge/Github-181717?style=flat-square&logo=Github&logoColor=white"/></a>  </th>
+	<th>서아름 <a href="https://github.com/Arooming"><img src="https://img.shields.io/badge/Github-181717?style=flat-square&logo=Github&logoColor=white"/></a>  </th>
+    <th> 유지민 <a href="https://github.com/urjimyu"><img src="https://img.shields.io/badge/Github-181717?style=flat-square&logo=Github&logoColor=white"/></a>  </th>
+  <th> 조승희 <a href="https://github.com/lydiacho"><img src="https://img.shields.io/badge/Github-181717?style=flat-square&logo=Github&logoColor=white"/></a>  </th>
+  <th> 조연서 <a href="https://github.com/Yeonseo-Jo"><img src="https://img.shields.io/badge/Github-181717?style=flat-square&logo=Github&logoColor=white"/></a>  </th>
+	<tr>
+	<td> 팀원 소개 </td>
+		<td> <img width="230" alt="image" src="https://user-images.githubusercontent.com/80264647/252587166-85b4b938-e123-4a83-ad4b-ce3b7e28cd52.jpeg">
+ </td>
+		<td> <img width="230" alt="image" src="https://avatars.githubusercontent.com/u/80264647?v=4"></td>  
+		<td><img width="230" alt="image" src="https://github.com/TEAM-TATTOUR/tattour-client/assets/92876819/11be19b8-442b-4d7b-9a0d-266d92a8ae03"></td>
+        <td> <img width="230" alt="image" src="https://avatars.githubusercontent.com/u/81505421?v=4"></td>  
+		<td><img width="230" alt="image" src="https://github.com/SopkathonTeam2/Client/assets/77691829/4828df0b-3fad-44bd-a243-7682687aff66"></td>
+	</tr>
+	<tr>
+	<td> 역할 </td>
+	<td>
+		<strong>WEB FRONTEND, 리드 개발자</strong>
+	</td>
+	<td>
+		<strong>WEB FRONTEND</strong>
+	</td>
+	<td>
+		<strong>WEB FRONTEND</strong>
+	</td>
+    <td>
+		<strong>WEB FRONTEND</strong>
+	</td>
+    <td>
+		<strong>WEB FRONTEND</strong>
+	</td>
+    </tr>
+	</table>
+</div>
+
+
+<br/>
+<hr/>
+
+## ⚙️ 기술 스택
+
+<div align="center">
+
+| 역할                 | 종류                                                                                                                                                                                                              |
+| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Library              | ![React](https://img.shields.io/badge/React-61DAFB?style=for-the-badge&logo=React&logoColor=black)                                                                                                                |
+| Programming Language | ![TypeScript](https://img.shields.io/badge/TypeScript-3178C6.svg?style=for-the-badge&logo=TypeScript&logoColor=white)                                                                                             |
+| Styling              | ![Styled Components](https://img.shields.io/badge/styled--components-DB7093?style=for-the-badge&logo=styled-components&logoColor=white)                                                                           |
+| State Management     | ![State Management](https://img.shields.io/badge/recoil-f26b00?style=for-the-badge&logo=Recoil)                                                                                                                   |
+| Formatting           | ![ESLint](https://img.shields.io/badge/ESLint-4B3263?style=for-the-badge&logo=eslint&logoColor=white) ![Prettier](https://img.shields.io/badge/Prettier-F7B93E?style=for-the-badge&logo=prettier&logoColor=white) |
+| Version Control      | ![Git](https://img.shields.io/badge/git-%23F05033.svg?style=for-the-badge&logo=git&logoColor=white) ![GitHub](https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white)  |
+
+</div>
+
+
+<br/>
+<hr/>
+
+## ✍🏻 컨벤션
+
+### ✨ Git 컨벤션
+
+<details>
+<summary> 1️⃣ Commit 컨벤션  </summary>
+
+- 기본적인것 (feat, fix, chore, ..) 중점적으로 지키기!
+
+| 제목     | 내용                                        |
+| -------- | ------------------------------------------- |
+| init     | 브랜치 첫 커밋                              |
+| feat     | 새로운 기능에 대한 커밋                     |
+| fix      | 버그 수정에 대한 커밋                       |
+| build    | 빌드 관련 파일 수정에 대한 커밋             |
+| chore    | 그 외 자잘한 수정에 대한 커밋               |
+| docs     | 문서 수정에 대한 커밋                       |
+| style    | style: 코드 스타일 혹은 포맷 등에 관한 커밋 |
+| refactor | 코드 리팩토링에 대한 커밋                   |
+
+</details>
+
+<details>
+<summary> 2️⃣ Branch 전략 </summary>
+
+```  
+1. feature 브랜치를 파고 페이지 단위로 이름 생성 ex)feature/LoginPage
+
+2. feature 브랜치 하위에 이슈 번호를 포함한 기능 단위 브랜치 생성 ex)LoginPage/#6-login
+
+3. develop 브랜치 만들어서 페이지 단위 브랜치는 dev브랜치로 merge
+
+4. 개발이 최종적으로 끝나면 main에 dev 브랜치 merge
+
+5. 개발단계에서 merge가 이루어지면 develop pull 받아오기 !
+
+````
+
+</details>
+
+<br/>
+
+### ✨ Project 컨벤션
+
+<details>
+<summary >1️⃣ 폴더 구조 </summary>
+
+* 공통 컴포넌트를 분리
+* 페이지 단위로 러프하게 분리
+
+```tsx
+├── 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 함수 관련 파일들 저장
+ 
+
+````
+
+</details>
+
+<details>
+<summary >2️⃣ 기타 컨벤션 </summary>
+
+#### (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을 위주로 적용.
+
+<br/>
+
+#### 🫡 기타 컨벤션
+
+- 화살표 함수형태 (`const ~~~ () => { } )` ) 로 사용.
+  - `rsc` 컴포넌트 단축키 사용
+- event 함수는 `handle(Action)(Component)`
+- 변수명 : `카멜케이스` / 상수데이터 : `대문자` / Component명 :`파스칼`
+- 절대경로 사용 (`src` 기준)
+</details>
+
diff --git a/src/common/Modal/CheckModal/CheckModalForm.tsx b/src/common/Modal/CheckModal/CheckModalForm.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { IcCancelDark } from '../../../assets/icon';
 import { useNavigate } from 'react-router-dom';
-import api from '../../../libs/api';
+import { api } from '../../../libs/api';
 
 interface CheckModalFormProps {
   onClose: () => void;

diff --git a/src/common/Modal/DeleteCartModal/DeleteCartModal.tsx b/src/common/Modal/DeleteCartModal/DeleteCartModal.tsx
@@ -1,6 +1,6 @@
 import ModalPortal from '../ModalPortal';
 import EscapeModalForm from '../EscapeModal/EscapeModalForm';
-import api from '../../../libs/api';
+import { api } from '../../../libs/api';
 import { useNavigate } from 'react-router-dom';
 
 interface DeleteCartModalProps {

diff --git a/src/common/Modal/EscapeModal/CustomSizeEscapeModal.tsx b/src/common/Modal/EscapeModal/CustomSizeEscapeModal.tsx
@@ -3,7 +3,7 @@ import ModalPortal from '../ModalPortal';
 import { IcCancelDark } from '../../../assets/icon';
 import { useNavigate } from 'react-router-dom';
 import { customInfoType } from '../../../types/customInfoType';
-import api from '../../../libs/api';
+import { api } from '../../../libs/api';
 
 interface CustomSizeEscapeModalProps {
   setModalOn: React.Dispatch<React.SetStateAction<boolean>>;

diff --git a/src/components/Cart/CartItem.tsx b/src/components/Cart/CartItem.tsx
@@ -3,7 +3,7 @@ import { IcCancelDark, IcMinus, IcMinusOneunder, IcPlus } from '../../assets/ico
 import { useState, useEffect, useCallback } from 'react';
 import DeleteCartModal from '../../common/Modal/DeleteCartModal/DeleteCartModal';
 import { debounce } from 'lodash';
-import api from '../../libs/api';
+import { api } from '../../libs/api';
 import { useNavigate } from 'react-router-dom';
 
 const CartItem = ({

diff --git a/src/components/Custom/Common/OnBoardingFooter.tsx b/src/components/Custom/Common/OnBoardingFooter.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { styled } from 'styled-components';
 import TempSaveModal from '../../../common/Modal/TempSaveModal/TempSaveModal';
 import { useNavigate } from 'react-router-dom';
-import api from '../../../libs/api';
+import { api } from '../../../libs/api';
 import { AxiosError } from 'axios';
 
 export interface CustomSaveItemProps {

diff --git a/src/components/Custom/PriceFooter.tsx b/src/components/Custom/PriceFooter.tsx
@@ -1,7 +1,7 @@
 import { styled } from 'styled-components';
 import { customInfoType, resCustomInfoType } from '../../types/customInfoType';
-import api from '../../libs/api';
 import React from 'react';
+import { api } from '../../libs/api';
 
 interface PriceFooterProps {
   haveDesign?: boolean;

diff --git a/src/components/Detail/DetailFooter.tsx b/src/components/Detail/DetailFooter.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { IcHeartDark, IcHeartLight } from '../../assets/icon';
 import { useNavigate } from 'react-router-dom';
-import api from '../../libs/api';
+import { api } from '../../libs/api';
 import { useState } from 'react';
 import Toast from '../../common/ToastMessage/Toast';
 

diff --git a/src/components/MyTattoo/MySaveItem.tsx b/src/components/MyTattoo/MySaveItem.tsx
@@ -1,6 +1,6 @@
 import { styled } from 'styled-components';
 import { useNavigate } from 'react-router-dom';
-import api from '../../libs/api';
+import { api } from '../../libs/api';
 
 export interface CustomDetailItemProps {
   id: number;

diff --git a/src/components/Order/OrderFooter.tsx b/src/components/Order/OrderFooter.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
-import api from '../../libs/api';
+import { api } from '../../libs/api';
 import { OrderSheetProps } from '../../libs/hooks/order/useGetOrdersheet';
 
 interface OrderRequest {