-```ts -interface ResponseValue { - email: string // 사용자 아이디 - displayName: string // 사용자 표시 이름 - profileImg: string | null // 사용자 프로필 이미지(URL) -} -``` +## :bookmark_tabs: 프로젝트 주제 -```json -{ - "email": "thesecon@gmail.com", - "displayName": "ParkYoungWoong", - "profileImg": "https://storage.googleapis.com/heropy-api/vAKjlJ-Gx5v163442.png" -} -``` + -### 사용자 목록 조회 +거래 API를 활용해 코로나 시기에 오프라인 쇼핑을 하지 못하는 소비자들을 위한 +온라인 상으로 퍼스널 컬러를 진단 하고 진단 결과에 따른 제품을 추천 받고 구매할 수 있는 +온라인 메이크업 제품 판매 쇼핑몰입니다. -- 관리자 전용 API입니다. +
-```curl -curl https://asia-northeast3-heropy-api.cloudfunctions.net/api/auth/users - \ -X 'GET' - \ -H 'masterKey: true' -``` +## 📆 프로젝트 기간 -요청 데이터 타입 및 예시: +2023.05.30 ~ 2023.07.02 -- 없음 +
-응답 데이터 타입 및 예시: +## 🔗 배포 링크 -```ts -type ResponseValue = User[] +[뷰티인사이드](https://beautyinside.netlify.app/) -interface User { - email: string // 사용자 아이디 - displayName: string // 사용자 표시 이름 - profileImg: string // 사용자 프로필 이미지 URL -} -``` +
-```json -[ - { - "email": "thesecon@gmail.com", - "displayName": "HEROPY", - "profileImg": null - }, - { - "email": "neo@zillinks.com", - "displayName": "박영웅", - "profileImg": "https://storage.googleapis.com/heropy-api/Z_una7lyijv074804.png" - }, - { - "email": "test@test.com", - "displayName": "관리자", - "profileImg": "https://storage.googleapis.com/heropy-api/ZXcXjwsB7nv121507.png" - } -] -``` - -
+## 🔧 기술 스택 -## 계좌 +config +
+development
+
+
+
+enviroment
+
+
+
+deployment
+
+design
+
-'계좌' 관련 API는 모두 일반 사용자 전용입니다.
+-### 선택 가능한 은행 목록 조회 +## 📁 주요 기능 -- 은행 당 하나의 계좌만 허용됩니다. -- 사용자가 계좌를 추가하면, 해당 은행 정보 `disabled` 속성이 `true`로 변경됩니다. -- 은행 정보 `digits` 속성의 숫자를 모두 더하면 각 은행의 유효한 계좌번호 길이가 됩니다. -- `[3, 2, 4, 3]` => 123-12-1234-123 +사용자 -```curl -curl https://asia-northeast3-heropy-api.cloudfunctions.net/api/account/banks - \ -X 'GET' - \ -H 'Authorization: Bearer
-```ts -interface ResponseValue { // 연결된 계좌 정보 - id: string // 계좌 ID - bankName: string // 은행 이름 - bankCode: string // 은행 코드 - accountNumber: string // 계좌 번호 - balance: number // 계좌 잔액 -} -``` +## 💻 구현 화면 -```json -{ - "id": "1qRFC6Ey5VkSu6nyj5Ba", - "bankName": "신한은행", - "bankCode": "088", - "accountNumber": "123-XXX-XXXXXX", - "balance": 3000000 -} -``` +
+
-```curl
-curl https://asia-northeast3-heropy-api.cloudfunctions.net/api/products
- \ -X 'GET'
- \ -H 'masterKey: true'
-```
+보기
+
-### 계좌 해지
+| 로그인 | 회원가입 |
+| -------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
+|  |  |
-- 해지한 계좌는 다시 연결해도 잔액이 반영되지 않습니다.(기본 금액으로 추가됩니다)
+| 퍼스널컬러 | 퍼스널컬러 진단 |
+| ---------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
+|  |  |
-```curl
-curl https://asia-northeast3-heropy-api.cloudfunctions.net/api/account
- \ -X 'DELETE'
- \ -H 'Authorization: Bearer '
-```
+| 퍼스널컬러 결과 | 메인 |
+| ----------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
+|  |  |
-요청 데이터 타입 및 예시:
+| 베스트 | 메이크업 |
+| ------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------- |
+|  |  |
-```ts
-interface RequestBody {
- accountId: string // 계좌 ID (필수!)
- signature: boolean // 사용자 서명 (필수!)
-}
-```
+| 장바구니 | 결제 |
+| ------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------- |
+|  |  |
-```json
-{
- "accountId": "jQMfKla8vOIFELA3mAXv",
- "signature": true
-}
-```
+| 구매내역 | 구매내역상세 |
+| ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
+|  |  |
-응답 데이터 타입 및 예시:
+| 계좌관리 | 계좌등록 |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
+|  |  |
-```ts
-type ResponseValue = true // 계좌 해지 처리 상태
-```
+| 상세정보 | 관리자-대시보드 |
+| -------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
+|  |  |
-
+| 관리자-상품관리 | 관리자-상품상세 | +| --------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | +|  |  | -## 제품 +| 관리자-상품추가 | 관리자-상품수정 | +| ---------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | +|  |  | -'제품' 관련 API는 관리자 전용과 일반 사용자 전용으로 구분됩니다.
-공용 API도 있으니 주의하세요! +| 관리자-거래내역관리 | 관리자-거래내역상세 | +| ---------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | +|  |  | -### 모든 제품 조회 +| 관리자-사용자 목록 | 관리자-로그인 | +| ----------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | +|  |  | -- 관리자 전용 API입니다. -- 상세 정보가 아닌 기본 정보의 제품 설명은 100자까지만 포함됩니다. -- 상세 정보가 아닌 기본 정보의 제품 상세 사진은 포함되지 않습니다. -- 제품 할인율(`discountRate`)은 제품 가격과 직접 관계가 없는 단순 메모 속성입니다. -- 제품 할인율이 없는 경우, `0`으로 표시됩니다. +
++| 관리자-상품관리 | 관리자-상품상세 | +| --------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | +|  |  | -## 제품 +| 관리자-상품추가 | 관리자-상품수정 | +| ---------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | +|  |  | -'제품' 관련 API는 관리자 전용과 일반 사용자 전용으로 구분됩니다.
-공용 API도 있으니 주의하세요! +| 관리자-거래내역관리 | 관리자-거래내역상세 | +| ---------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | +|  |  | -### 모든 제품 조회 +| 관리자-사용자 목록 | 관리자-로그인 | +| ----------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | +|  |  | -- 관리자 전용 API입니다. -- 상세 정보가 아닌 기본 정보의 제품 설명은 100자까지만 포함됩니다. -- 상세 정보가 아닌 기본 정보의 제품 상세 사진은 포함되지 않습니다. -- 제품 할인율(`discountRate`)은 제품 가격과 직접 관계가 없는 단순 메모 속성입니다. -- 제품 할인율이 없는 경우, `0`으로 표시됩니다. +
-요청 데이터 타입 및 예시: +## 👍팀원&역할 분담 -- 없음 +| 양준용 | 김다슬(조장) | 이용수 | 송수연 | +| :--------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------: | +|  |  |  |  | +| 와이어프레임, UI, 사용자-퍼스널 컬러 진단 페이지, 사용자-회원가입, 사용자-로그아웃, 사용자-메인, 사용자-상세정보 | 와이어프레임, UI, 사용자-장바구니, 사용자-결제, 사용자-계좌관리, 사용자-구매내역,상세, 관리자-대시보드, 관리자-상품목록/상세/등록/수정, 관리자-거래내역/상세, 관리자-사용자목록 | 사용자-베스트, 사용자-메이크업, 사용자-로그인, 사용자-회원가입, 사용자-로그인인증(헤더) | 사용자-회원가입, 사용자-퍼스널컬러진단페이지 | -응답 데이터 타입 및 예시: +
-```ts -type ResponseValue = Product[] // 관리하는 모든 제품의 목록 +## 참고 사항 -interface Product { // 제품 정보 - id: string // 제품 ID - title: string // 제품 이름 - price: number // 제품 가격 - description: string // 제품 설명(최대 100자) - tags: string[] // 제품 태그 - thumbnail: string | null // 제품 썸네일 이미지(URL) - isSoldOut: boolean // 제품 매진 여부 - discountRate: number // 제품 할인율 -} -``` - -```json -[ - { - "id": "cFmeC7aY5KjZbBAdJE9y", - "title": "삼성전자 스마트모니터 M7 S43AM700", - "price": 639000, - "description": "107.9cm(43인치) / 와이드(16:9) / 평면 / VA / 3840 x 2160(4K UHD) / 픽셀피치: 0.2451mm / 8ms(GTG) / 300cd / 5,00", - "tags": [ - "가전", - "모니터", - "컴퓨터" - ], - "thumbnail": "https://storage.googleapis.com/heropy-api/vBAK4MQdH5v195712.png", - "isSoldOut": false, - "discountRate": 20 - }, - { - "id": "nbqtQvEivYwEXTDet7YM", - "title": "MacBook Pro 16", - "price": 3360000, - "description": "역대 가장 강력한 MacBook Pro가 등장했습니다. 최초의 프로용 Apple Silicon인 M1 Pro 또는 M1 Max 칩을 탑재해 쏜살같이 빠른 속도는 물론, 획기적인 성", - "tags": [ - "가전", - "노트북", - "컴퓨터" - ], - "thumbnail": "https://storage.googleapis.com/heropy-api/vIKMk_jy4Yv195256.png", - "isSoldOut": false, - "discountRate": 0 - } -] -``` - -### 전체 거래(판매) 내역 - -- 관리자 전용 API입니다. - -```curl -curl https://asia-northeast3-heropy-api.cloudfunctions.net/api/products/transactions/all - \ -X 'GET' - \ -H 'masterKey: true' -``` +
+
-### 거래(판매) 내역 완료/취소 및 해제
+보기
+
-요청 데이터 타입 및 예시:
-
-- 없음
-
-응답 데이터 타입 및 예시:
-
-```ts
-type RequestValue = TransactionDetail[] // 모든 거래 내역의 목록
-
-interface TransactionDetail { // 거래 내역 정보
- detailId: string // 거래 내역 ID
- user: { // 거래한 사용자 정보
- email: string
- displayName: string
- profileImg: string | null
- }
- account: { // 거래한 사용자의 계좌 정보
- bankName: string
- bankCode: string
- accountNumber: string
- }
- product: { // 거래한 제품 정보
- productId: string
- title: string
- price: number
- description: string
- tags: string[]
- thumbnail: string | null
- discountRate: number
- }
- reservation: Reservation | null // 거래한 제품의 예약 정보
- timePaid: string // 제품을 거래한 시간
- isCanceled: boolean // 거래 취소 여부
- done: boolean // 거래 완료 여부
-}
-
-interface Reservation {
- start: string // 예약 시작 시간
- end: string // 예약 종료 시간
- isCanceled: boolean // 예약 취소 여부
- isExpired: boolean // 예약 만료 여부
-}
-```
+사용자 관리자를 각각 다른 저장소에서 개발해서 제출 업로드는 합쳐서 올립니다.
-```json
-[
- {
- "detailId": "dMhfxyrAupQP18OYmywy",
- "user": {
- "email": "thesecon@gmail.com",
- "displayName": "ParkYoungWoong",
- "profileImg": "https://storage.googleapis.com/heropy-api/vsLRqTlPO5v200111.png"
- },
- "account": {
- "bankName": "KB국민은행",
- "bankCode": "004",
- "accountNumber": "123-XX-XXXX-XXX"
- },
- "product": {
- "productId": "cFmeC7aY5KjZbBAdJE9y",
- "title": "삼성전자 스마트모니터 M7 S43AM700",
- "price": 639000,
- "description": "107.9cm(43인치) / 와이드(16:9) / 평면 / VA / 3840 x 2160(4K UHD) / 픽셀피치: 0.2451mm / 8ms(GTG) / 300cd / 5,00",
- "tags": [
- "가전",
- "모니터",
- "컴퓨터"
- ],
- "thumbnail": "https://storage.googleapis.com/heropy-api/vBAK4MQdH5v195712.png",
- "discountRate": 0
- },
- "reservation": null,
- "timePaid": "2021-11-07T20:01:49.100Z",
- "isCanceled": false,
- "done": false
- }
-]
-```
+개별 저장소 링크:
+[사용자](https://github.com/YTTC-T/BeautyInside-Client)
+[관리자](https://github.com/YTTC-T/BeautyInside-Admin)
-예약 정보(`reservation`)가 있는 경우:
-
-```json
-[
- {
- "reservation": {
- "start": "2021-11-12T06:00:00.000Z",
- "end": "2021-11-12T07:00:00.000Z",
- "isCanceled": false,
- "isExpired": true
- }
- }
-]
-```
+
+-- 관리자 전용 API입니다. -- 거래 내역을 취소하면, 예약도 같이 취소됩니다. -- 거래 내역을 취소 해제하면, 예약도 같이 취소가 해제됩니다. +## 관리자 계정 -```curl -curl https://asia-northeast3-heropy-api.cloudfunctions.net/api/products/transactions/:detailId - \ -X 'PUT' - \ -H 'masterKey: true' -``` - -요청 데이터 타입 및 예시: - -```ts -interface RequestBody { - isCanceled?: boolean // 거래 취소 여부 (사용자의 '제품 거래(구매) 취소' 상태와 같습니다) - done?: boolean // 거래 완료 여부 (사용자의 '제품 거래(구매) 확정' 상태와 같습니다) -} -``` +
+
diff --git a/admin/.eslintrc.cjs b/admin/.eslintrc.cjs
new file mode 100644
index 00000000..8a1c9386
--- /dev/null
+++ b/admin/.eslintrc.cjs
@@ -0,0 +1,14 @@
+module.exports = {
+ env: { browser: true, es2020: true, node: true },
+ extends: [
+ "eslint:recommended",
+ "plugin:@typescript-eslint/recommended",
+ "plugin:react-hooks/recommended",
+ ],
+ parser: "@typescript-eslint/parser",
+ parserOptions: { ecmaVersion: "latest", sourceType: "module" },
+ plugins: ["react-refresh"],
+ rules: {
+ "react-refresh/only-export-components": "warn",
+ },
+};
diff --git a/admin/.gitignore b/admin/.gitignore
new file mode 100644
index 00000000..a547bf36
--- /dev/null
+++ b/admin/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/admin/.prettierrc b/admin/.prettierrc
new file mode 100644
index 00000000..3fe02465
--- /dev/null
+++ b/admin/.prettierrc
@@ -0,0 +1,10 @@
+{
+ "printWidth": 100,
+ "tabWidth": 2,
+ "singleQuote": true,
+ "trailingComma": "all",
+ "useTabs": false,
+ "bracketSpacing": true,
+ "bracketSameLine": false,
+ "semi": false
+}
diff --git a/admin/index.html b/admin/index.html
new file mode 100644
index 00000000..5a2c9da0
--- /dev/null
+++ b/admin/index.html
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ 보기
+
-```json
-{
- "isCanceled": true
-}
-```
-
-응답 데이터 타입 및 예시:
-
-
-```ts
-type ResponseValue = true // 거래 내역 완료/취소 및 해제 처리 상태
-```
-
-### 제품 추가
-
-- 관리자 전용 API입니다.
-- 파일(사진)은 Base64로 요청해야 합니다.
-- 제품 썸네일 사진은 1MB 이하여야 합니다.
-- 제품 상세 사진은 4MB 이하여야 합니다.
-- 제품 할인율(`discountRate`)은 제품 가격과 직접 관계가 없는 단순 메모 속성입니다.
-- 제품 할인율은 `0`~`99` 사이 숫자를 입력하세요. 만약 할인율이 '20%'인 경우, `20`으로 입력해야 합니다.
-- 제품 할인율을 입력하지 않으면, `0`으로 적용됩니다.
-
-```js
-// 할인 전 가격을 계산!
-const priceBeforeDiscount = price * 100 / (100 - discountRate)
-```
-
-```curl
-curl https://asia-northeast3-heropy-api.cloudfunctions.net/api/products
- \ -X 'POST'
- \ -H 'masterKey: true'
-```
-
-요청 데이터 타입 및 예시:
-
-```ts
-interface RequestBody {
- title: string // 제품 이름 (필수!)
- price: number // 제품 가격 (필수!)
- description: string // 제품 상세 설명 (필수!)
- tags?: string[] // 제품 태그
- thumbnailBase64?: string // 제품 썸네일(대표) 사진(base64) - jpg, jpeg, webp, png, gif, svg
- photoBase64?: string // 제품 상세 사진(base64) - jpg, jpeg, webp, png, gif, svg
- discountRate?: number // 제품 할인율
-}
-```
+이메일: admin@bul4jo.com
+비밀번호: 1q2w3e4r
-```json
-{
- "title": "MacBook Pro 16",
- "price": 3360000,
- "description": "역대 가장 강력한 MacBook Pro가 등장했습니다. 최초의 프로용 Apple Silicon인 M1 Pro 또는 M1 Max 칩을 탑재해 쏜살같이 빠른 속도는 물론, 획기적인 성능과 놀라운 배터리 사용 시간을 자랑하죠. 여기에 시선을 사로잡는 Liquid Retina XDR 디스플레이, Mac 노트북 사상 최고의 카메라 및 오디오 그리고 더할 나위 없이 다양한 포트까지. 기존 그 어떤 카테고리에도 속하지 않는 노트북. 새로운 MacBook Pro는 그야말로 야수입니다.",
- "tags": [
- "가전",
- "노트북",
- "컴퓨터"
- ],
- "thumbnailBase64": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...(생략)"
-}
-```
-
-응답 데이터 타입 및 예시:
-
-```ts
-interface ResponseValue { // 추가한 제품의 상세 내용
- id: string // 제품 ID
- title: string // 제품 이름
- price: number // 제품 가격
- description: string // 제품 상세 설명
- tags: string[] // 제품 태그
- thumbnail: string | null // 제품 썸네일 이미지(URL)
- photo: string | null // 제품 상세 이미지(URL)
- isSoldOut: boolean // 제품 매진 여부
- discountRate: number // 제품 할인율
-}
-```
-
-```json
-{
- "id": "nbqtQvEivYwEXTDet7YM",
- "title": "MacBook Pro 16",
- "price": 3360000,
- "description": "역대 가장 강력한 MacBook Pro가 등장했습니다. 최초의 프로용 Apple Silicon인 M1 Pro 또는 M1 Max 칩을 탑재해 쏜살같이 빠른 속도는 물론, 획기적인 성능과 놀라운 배터리 사용 시간을 자랑하죠. 여기에 시선을 사로잡는 Liquid Retina XDR 디스플레이, Mac 노트북 사상 최고의 카메라 및 오디오 그리고 더할 나위 없이 다양한 포트까지. 기존 그 어떤 카테고리에도 속하지 않는 노트북. 새로운 MacBook Pro는 그야말로 야수입니다.",
- "tags": [
- "가전",
- "노트북",
- "컴퓨터"
- ],
- "thumbnail": "https://storage.googleapis.com/heropy-api/vIKMk_jy4Yv195256.png",
- "photo": "https://storage.googleapis.com/heropy-api/voihKb3NLGcv195257.png",
- "isSoldOut": false,
- "discountRate": 0
-}
-```
-
-### 제품 수정
-
-- 관리자 전용 API입니다.
-- 사용자의 구매 내역 확인을 위해, 제품을 실제로는 삭제하지 않고 매진(Sold Out) 처리해야 합니다.
-- 매진은 다시 해제할 수 있습니다.
-
-```curl
-curl https://asia-northeast3-heropy-api.cloudfunctions.net/api/products/:productId
- \ -X 'PUT'
- \ -H 'masterKey: true'
-```
-
-요청 데이터 타입 및 예시:
-
-```ts
-interface RequestBody {
- title?: string // 제품 이름
- price?: number // 제품 가격
- description?: string // 제품 상세 설명
- tags?: string[] // 제품 태그
- thumbnailBase64?: string // 제품 썸네일(대표) 사진(base64) - jpg, jpeg, webp, png, gif, svg
- photoBase64?: string // 제품 상세 사진(base64) - jpg, jpeg, webp, png, gif, svg
- isSoldOut?: boolean // 제품 매진 여부
- discountRate?: number // 제품 할인율
-}
-```
-
-```json
-{
- "price": 1500
-}
-```
-
-응답 데이터 타입 및 예시:
-
-```ts
-interface ResponseValue { // 수정한 제품의 상세 내용
- id: string // 제품 ID
- title: string // 제품 이름
- price: number // 제품 가격
- description: string // 제품 상세 설명
- tags: string[] // 제품 태그
- thumbnail: string | null // 제품 썸네일 이미지(URL)
- photo: string | null // 제품 상세 이미지(URL)
- isSoldOut: boolean // 제품 매진 여부
- discountRate: number // 제품 할인율
-}
-```
-
-```json
-{
- "id": "nbqtQvEivYwEXTDet7YM",
- "title": "MacBook Pro 16",
- "price": 1500,
- "description": "역대 가장 강력한 MacBook Pro가 등장했습니다. 최초의 프로용 Apple Silicon인 M1 Pro 또는 M1 Max 칩을 탑재해 쏜살같이 빠른 속도는 물론, 획기적인 성능과 놀라운 배터리 사용 시간을 자랑하죠. 여기에 시선을 사로잡는 Liquid Retina XDR 디스플레이, Mac 노트북 사상 최고의 카메라 및 오디오 그리고 더할 나위 없이 다양한 포트까지. 기존 그 어떤 카테고리에도 속하지 않는 노트북. 새로운 MacBook Pro는 그야말로 야수입니다.",
- "tags": [
- "가전",
- "노트북",
- "컴퓨터"
- ],
- "thumbnail": "https://storage.googleapis.com/heropy-api/vIKMk_jy4Yv195256.png",
- "photo": "https://storage.googleapis.com/heropy-api/voihKb3NLGcv195257.png",
- "isSoldOut": false,
- "discountRate": 0
-}
-```
-
-### 제품 삭제
-
-- 관리자 전용 API입니다.
-
-```curl
-curl https://asia-northeast3-heropy-api.cloudfunctions.net/api/products/:productId
- \ -X 'DELETE'
- \ -H 'masterKey: true'
-```
-
-요청 데이터 타입 및 예시:
-
-- 없음
-
-응답 데이터 타입 및 예시:
-
-```ts
-type ResponseValue = true // 제품 삭제 처리 상태
-```
-
-### 단일 제품 상세 조회
-
-- 공용 API입니다.
-
-```curl
-curl https://asia-northeast3-heropy-api.cloudfunctions.net/api/products/:productId
- \ -X 'GET'
-```
-
-요청 데이터 타입 및 예시:
-
-- 없음
-
-응답 데이터 타입 및 예시:
-
-```ts
-interface ResponseValue { // 제품의 상세 내용
- id: string // 제품 ID
- title: string // 제품 이름
- price: number // 제품 가격
- description: string // 제품 상세 설명
- tags: string[] // 제품 태그
- thumbnail: string | null // 제품 썸네일 이미지(URL)
- photo: string | null // 제품 상세 이미지(URL)
- isSoldOut: boolean // 제품 매진 여부
- reservations: Reservation[] // 제품의 모든 예약 정보 목록
- discountRate: number // 제품 할인율
-}
-
-interface Reservation {
- start: string // 예약 시작 시간
- end: string // 예약 종료 시간
- isCanceled: boolean // 예약 취소 여부
- isExpired: boolean // 예약 만료 여부
-}
-```
-
-```json
-{
- "id": "nbqtQvEivYwEXTDet7YM",
- "title": "MacBook Pro 16",
- "price": 3360000,
- "description": "역대 가장 강력한 MacBook Pro가 등장했습니다. 최초의 프로용 Apple Silicon인 M1 Pro 또는 M1 Max 칩을 탑재해 쏜살같이 빠른 속도는 물론, 획기적인 성능과 놀라운 배터리 사용 시간을 자랑하죠. 여기에 시선을 사로잡는 Liquid Retina XDR 디스플레이, Mac 노트북 사상 최고의 카메라 및 오디오 그리고 더할 나위 없이 다양한 포트까지. 기존 그 어떤 카테고리에도 속하지 않는 노트북. 새로운 MacBook Pro는 그야말로 야수입니다.",
- "tags": [
- "가전",
- "노트북",
- "컴퓨터"
- ],
- "thumbnail": "https://storage.googleapis.com/heropy-api/vIKMk_jy4Yv195256.png",
- "photo": "https://storage.googleapis.com/heropy-api/voihKb3NLGcv195257.png",
- "isSoldOut": false,
- "reservations": [],
- "discountRate": 0
-}
-```
-
-예약 정보(`reservation`)가 있는 경우:
-
-```json
-{
- "reservations": [
- {
- "reservation": {
- "start": "2021-11-12T06:00:00.000Z",
- "end": "2021-11-12T07:00:00.000Z",
- "isCanceled": false,
- "isExpired": true
- }
- }
- ]
-}
-```
-
-### 제품 검색
-
-- 사용자 전용 API입니다.
-- 제품 이름과 태그를 동시에 검색할 수 있고, 'And'(검색한 이름과 태그 모두 포함된 제품) 조건으로 결과를 반환합니다.
-- 제품 이름과 태그 모두 포함하지 않으면, 모든 제품의 결과를 반환합니다.
-- 제품의 기본 정보만 반환합니다.
-- 매진된 제품은 검색되지 않습니다.
-
-```curl
-curl https://asia-northeast3-heropy-api.cloudfunctions.net/api/products/search
- \ -X 'POST'
-```
-
-요청 데이터 타입 및 예시:
-
-```ts
-interface RequestBody {
- searchText?: string // 검색할 제품 이름
- searchTags?: string[] // 검색할 제품 태그
-}
-```
-
-```json
-{
- "searchText": "삼성전자",
- "searchTags": ["가전"]
-}
-```
-
-응답 데이터 타입 및 예시:
-
-```ts
-type ResponseValue = Product[] // 관리하는 모든 제품의 목록
-
-interface Product { // 제품 정보
- id: string // 제품 ID
- title: string // 제품 이름
- price: number // 제품 가격
- description: string // 제품 설명(최대 100자)
- tags: string[] // 제품 태그
- thumbnail: string | null // 제품 썸네일 이미지(URL)
- discountRate: number // 제품 할인율
-}
-```
-
-```json
-[
- {
- "id": "cFmeC7aY5KjZbBAdJE9y",
- "title": "삼성전자 스마트모니터 M7 S43AM700",
- "price": 639000,
- "description": "107.9cm(43인치) / 와이드(16:9) / 평면 / VA / 3840 x 2160(4K UHD) / 픽셀피치: 0.2451mm / 8ms(GTG) / 300cd / 5,00",
- "tags": [
- "가전",
- "모니터",
- "컴퓨터"
- ],
- "thumbnail": "https://storage.googleapis.com/heropy-api/vBAK4MQdH5v195712.png",
- "discountRate": 0
- }
-]
-```
-
-### 제품 거래(구매) 신청
-
-- 사용자 전용 API입니다.
-- 거래(구매) 신청시 연결된 계좌에서 결제됩니다.
-- 결제할 계좌(ID)를 꼭 선택해야 합니다.(`계좌 목록 및 잔액 조회` API를 사용하세요)
-- 선택한 계좌의 잔액보다 결제 금액이 크면 결제가 처리되지 않습니다.(에러 반환)
-
-```curl
-curl https://asia-northeast3-heropy-api.cloudfunctions.net/api/products/buy
- \ -X 'POST'
- \ -H 'Authorization: Bearer '
-```
-
-요청 데이터 타입 및 예시:
-
-```ts
-interface RequestBody {
- productId: string // 거래할 제품 ID (필수!)
- accountId: string // 결제할 사용자 계좌 ID (필수!)
- reservation?: { // 예약 정보(예약 시스템을 사용하는 경우만 필요)
- start: string // 예약 시작 시간(ISO)
- end: string // 예약 종료 시간(ISO)
- }
-}
-```
-
-```js
-const isoString = new Date().toISOString()
-```
-
-```json
-{
- "productId": "nbqtQvEivYwEXTDet7YM",
- "accountId": "Mq2KKHk8vlmr6Xkg58Fa",
- "reservation": {
- "start": "2021-11-12T06:00:00.000Z",
- "end": "2021-11-12T07:00:00.000Z"
- }
-}
-```
-
-응답 데이터 타입 및 예시:
-
-```ts
-type ResponseValue = true // 거래 신청 처리 여부
-```
-
-### 제품 거래(구매) 취소
-
-- 사용자 전용 API입니다.
-- '거래 취소'시 결제한 사용자 계좌로 금액이 환불됩니다.
-
-```curl
-curl https://asia-northeast3-heropy-api.cloudfunctions.net/api/products/cancel
- \ -X 'POST'
- \ -H 'Authorization: Bearer '
-```
-
-요청 데이터 타입 및 예시:
-
-```ts
-interface RequestBody {
- detailId: string // 취소할 제품의 거래 내역 ID
-}
-```
-
-```json
-{
- "detailId": "dMhfxyrAupQP18OYmywy"
-}
-```
-
-응답 데이터 타입 및 예시:
-
-```ts
-type ResponseValue = true // 거래 취소 처리 여부
-```
-
-### 제품 거래(구매) 확정
-
-- 사용자 전용 API입니다.
-- '거래(구매) 확정' 후에는 '거래 취소'를 할 수 없습니다.
-
-```curl
-curl https://asia-northeast3-heropy-api.cloudfunctions.net/api/products/ok
- \ -X 'POST'
- \ -H 'Authorization: Bearer '
-```
-
-요청 데이터 타입 및 예시:
-
-```ts
-interface RequestBody {
- detailId: string // 거래(구매) 확정할 제품의 거래 내역 ID
-}
-```
-
-```json
-{
- "detailId": "dMhfxyrAupQP18OYmywy"
-}
-```
-
-응답 데이터 타입 및 예시:
-
-```ts
-type ResponseValue = true // 거래(구매) 확정 처리 여부
-```
-
-### 제품 전체 거래(구매) 내역
-
-- 사용자 전용 API입니다.
-- 거래 내역의 기본 정보만 포함됩니다.
-
-```curl
-curl https://asia-northeast3-heropy-api.cloudfunctions.net/api/products/transactions/details
- \ -X 'GET'
- \ -H 'Authorization: Bearer '
-```
-
-요청 데이터 타입 및 예시:
-
-- 없음
-
-응답 데이터 타입 및 예시:
-
-```ts
-type RequestValue = TransactionDetail[] // 모든 거래 내역의 목록
-
-interface TransactionDetail { // 거래 내역 정보
- detailId: string // 거래 내역 ID
- product: { // 거래한 제품 정보
- productId: string
- title: string
- price: number
- description: string
- tags: string[]
- thumbnail: string | null
- discountRate: number // 제품 할인율
- }
- reservation: Reservation | null // 거래한 제품의 예약 정보
- timePaid: string // 제품을 거래한 시간
- isCanceled: boolean // 거래 취소 여부
- done: boolean // 거래 완료 여부
-}
-
-interface Reservation {
- start: string // 예약 시작 시간
- end: string // 예약 종료 시간
- isCanceled: boolean // 예약 취소 여부
- isExpired: boolean // 예약 만료 여부
-}
-```
-
-```json
-[
- {
- "detailId": "9jAoagzrZBkSWI5NctEB",
- "product": {
- "productId": "nbqtQvEivYwEXTDet7YM",
- "title": "MacBook Pro 16",
- "price": 3360000,
- "description": "역대 가장 강력한 MacBook Pro가 등장했습니다. 최초의 프로용 Apple Silicon인 M1 Pro 또는 M1 Max 칩을 탑재해 쏜살같이 빠른 속도는 물론, 획기적인 성",
- "tags": [
- "가전",
- "노트북",
- "컴퓨터"
- ],
- "thumbnail": "https://storage.googleapis.com/heropy-api/vIKMk_jy4Yv195256.png",
- "discountRate": 0
- },
- "reservation": null,
- "timePaid": "2021-11-07T20:17:32.112Z",
- "isCanceled": true,
- "done": false
- },
- {
- "detailId": "dMhfxyrAupQP18OYmywy",
- "product": {
- "productId": "cFmeC7aY5KjZbBAdJE9y",
- "title": "삼성전자 스마트모니터 M7 S43AM700",
- "price": 639000,
- "description": "107.9cm(43인치) / 와이드(16:9) / 평면 / VA / 3840 x 2160(4K UHD) / 픽셀피치: 0.2451mm / 8ms(GTG) / 300cd / 5,00",
- "tags": [
- "가전",
- "모니터",
- "컴퓨터"
- ],
- "thumbnail": "https://storage.googleapis.com/heropy-api/vBAK4MQdH5v195712.png",
- "discountRate": 0
- },
- "reservation": {
- "start": "2021-11-12T06:00:00.000Z",
- "end": "2021-11-12T07:00:00.000Z",
- "isCanceled": false,
- "isExpired": true
- },
- "timePaid": "2021-11-07T20:01:49.100Z",
- "isCanceled": false,
- "done": true
- }
-]
-```
-
-### 단일 제품 상세 거래(구매) 내역
-
-- 사용자 전용 API입니다.
-
-```curl
-curl https://asia-northeast3-heropy-api.cloudfunctions.net/api/products/transactions/detail
- \ -X 'POST'
- \ -H 'Authorization: Bearer '
-```
-
-요청 데이터 타입 및 예시:
-
-```ts
-interface RequestBody {
- detailId: string // 상세 내용을 확인할 거래(구매) 내역 ID
-}
-```
-
-```json
-{
- "detailId": "dMhfxyrAupQP18OYmywy"
-}
-```
-
-응답 데이터 타입 및 예시:
-
-```ts
-interface TransactionDetail { // 상세 거래 정보
- detailId: string // 거래 내역 ID
- account: { // 거래한 사용자의 계좌 정보
- bankName: string
- bankCode: string
- accountNumber: string
- }
- product: { // 거래한 제품 정보
- productId: string
- title: string
- price: number
- description: string
- tags: string[]
- thumbnail: string | null
- photo: string | null
- discountRate: number // 제품 할인율
- }
- reservation: Reservation | null // 거래한 제품의 예약 정보
- timePaid: string // 제품을 거래한 시간
- isCanceled: boolean // 거래 취소 여부
- done: boolean // 거래 완료 여부
-}
-
-interface Reservation {
- start: string // 예약 시작 시간
- end: string // 예약 종료 시간
- isCanceled: boolean // 예약 취소 여부
- isExpired: boolean // 예약 만료 여부
-}
-```
-
-```json
-{
- "detailId": "dMhfxyrAupQP18OYmywy",
- "account": {
- "bankName": "KB국민은행",
- "bankCode": "004",
- "accountNumber": "123-XX-XXXX-XXX"
- },
- "product": {
- "productId": "cFmeC7aY5KjZbBAdJE9y",
- "title": "삼성전자 스마트모니터 M7 S43AM700",
- "price": 639000,
- "description": "107.9cm(43인치) / 와이드(16:9) / 평면 / VA / 3840 x 2160(4K UHD) / 픽셀피치: 0.2451mm / 8ms(GTG) / 300cd / 5,000:1 / 최대 주사율: 60Hz / HDMI 2.0 / USB Type-C / 플리커 프리 / 블루라이트 차단 / 게임모드 지원 / 스피커 / 리모컨 / USB허브 / Wi-Fi(무선) / 스마트TV / 블루투스 / 틸트(상하) / 200 x 200mm / HDR / HDR10 / 10.6kg 기획전 차세대 게임 라이프 PS5 매력분석 관련기사 큐소닉, 43인치 4K UHD 스마트 모니터 ‘삼성전자 M7 S43AM700’ 출시 및 할인 행사 사용기 삼성 스마트모니터 m7 s43am700",
- "tags": [
- "가전",
- "모니터",
- "컴퓨터"
- ],
- "thumbnail": "https://storage.googleapis.com/heropy-api/vBAK4MQdH5v195712.png",
- "photo": "https://storage.googleapis.com/heropy-api/vVLP-ox_zSDv195712.jpg",
- "discountRate": 0
- },
- "reservation": null,
- "timePaid": "2021-11-07T20:01:49.100Z",
- "isCanceled": false,
- "done": true
-}
-```
+
+
+ 뷰티
+ 인사이드
+
+ | 관리자
+
+
+
+
+
+
+
+
+
+
+
+
+ 거래일 {' '}
+ {filteredDetail.timePaid?.split('.')[0].split('T')[0]}
+
+
+ 거래시간 {' '}
+ {filteredDetail.timePaid?.split('.')[0].split('T')[1]}
+
+
+ 취소여부 {' '}
+ {filteredDetail.isCanceled ? '취소됨' : '취소전'}
+
+
+ 완료여부 {' '}
+ {filteredDetail.done ? '완료됨' : '완료전'}
+
+
+
+
+ 구매자 이메일 {filteredDetail.user?.email}
+
+
+ 구매자 이름 {filteredDetail.user?.displayName}
+
+
+
+
+ 은행명 {filteredDetail.account?.bankName}
+
+
+ 계좌번호 {filteredDetail.account?.accountNumber}
+
+
+
+
+ )
+}
+
+export default App
diff --git a/client/src/apis/api.ts b/client/src/apis/api.ts
new file mode 100644
index 00000000..060d42c6
--- /dev/null
+++ b/client/src/apis/api.ts
@@ -0,0 +1,246 @@
+import axios from 'axios'
+
+const { VITE_API_KEY, VITE_USERNAME } = (import.meta as any).env
+
+const headers = {
+ 'content-type': 'application/json',
+ apikey: VITE_API_KEY,
+ username: VITE_USERNAME,
+}
+
+const requestApi = axios.create({
+ baseURL: 'https://asia-northeast3-heropy-api.cloudfunctions.net/api',
+ headers,
+})
+
+// 사용자 : 회원가입
+export const signUp = async (email: string, password: string, displayName: string) => {
+ try {
+ const { data } = await requestApi.post('auth/signup', { email, password, displayName })
+ return data
+ } catch (error) {
+ console.warn(error)
+ console.warn('회원가입에 실패했습니다.')
+ return false
+ }
+}
+
+// 사용자: 로그인
+export const signIn = async (email: string, password: string) => {
+ try {
+ const { data } = await requestApi.post('auth/login', { email, password })
+ return data
+ } catch (error) {
+ console.warn(error)
+ console.warn('로그인에 실패했습니다.')
+ return false
+ }
+}
+
+// 사용자: 로그아웃
+export const signOut = async () => {
+ try {
+ const { data } = await requestApi.post('auth/logout')
+ return data
+ } catch (error) {
+ console.warn(error)
+ console.warn('로그아웃에 실패했습니다.')
+ return false
+ }
+}
+
+// 사용자: 등록가능한 계좌 조회
+export const getValidAccounts = async () => {
+ try {
+ const { data } = await requestApi.get('account/banks', {
+ headers: {
+ ...headers,
+ Authorization: `Bearer ${localStorage.getItem('accessToken')}`,
+ },
+ })
+ return data
+ } catch (error) {
+ console.warn(error)
+ console.warn('등록 가능한 은행 목록 조회를 실패했습니다.')
+ return false
+ }
+}
+
+// 사용자: 계좌 목록 및 잔액 조회
+export const getUserAccounts = async () => {
+ try {
+ const { data } = await requestApi.get('account', {
+ headers: {
+ ...headers,
+ Authorization: `Bearer ${localStorage.getItem('accessToken')}`,
+ },
+ })
+ return data
+ } catch (error) {
+ console.warn(error)
+ console.warn('등록된 계좌 목록 조회를 실패했습니다.')
+ return false
+ }
+}
+
+// 사용자: 계좌 연결
+export const addAccount = async (payload: AddAccount) => {
+ try {
+ const { data } = await requestApi.post('account', payload, {
+ headers: {
+ ...headers,
+ Authorization: `Bearer ${localStorage.getItem('accessToken')}`,
+ },
+ })
+ return data
+ } catch (error) {
+ console.warn(error)
+ console.warn('계좌 연결에 실패했습니다.')
+ return false
+ }
+}
+
+//사용자: 계좌 삭제
+export const deleteAccount = async ({ id, signature }: { id: string; signature: boolean }) => {
+ try {
+ const { data } = await requestApi.delete('account', {
+ data: {
+ accountId: id,
+ signature: signature,
+ },
+ headers: {
+ ...headers,
+ Authorization: `Bearer ${localStorage.getItem('accessToken')}`,
+ },
+ })
+ return data
+ } catch (error) {
+ console.warn(error)
+ console.warn('계좌 삭제에 실패했습니다.')
+ return false
+ }
+}
+
+// 단일제품상세조회 // products/:productId
+export const getProduct = async (id: string) => {
+ try {
+ const { data } = await requestApi.get('products/' + id)
+ return data
+ } catch (error) {
+ console.warn(error)
+ console.warn('상품 로드 실패')
+ return false
+ }
+}
+
+// 사용자: 인증 확인
+export const authVerification = async () => {
+ try {
+ const { data } = await requestApi.post(
+ 'auth/me',
+ {},
+ {
+ headers: {
+ ...headers,
+ Authorization: `Bearer ${localStorage.getItem('accessToken')}`,
+ },
+ },
+ )
+ return data
+ } catch (error) {
+ console.warn(error)
+ console.warn('인증 확인에 실패했습니다.')
+ return false
+ }
+}
+
+// 사용자: 구매 신청
+export const requestBuy = async ({
+ productId,
+ accountId,
+}: {
+ productId: string
+ accountId: string
+}) => {
+ try {
+ const { data } = await requestApi.post(
+ 'products/buy',
+ { productId, accountId },
+ {
+ headers: {
+ ...headers,
+ Authorization: `Bearer ${localStorage.getItem('accessToken')}`,
+ },
+ },
+ )
+ return data
+ } catch (error) {
+ console.warn(error)
+ console.log('데이터', productId, accountId)
+ console.warn('구매 신청에 실패했습니다.')
+ return false
+ }
+}
+
+// 사용자: 구매 내역 조회
+export const getPurchaselist = async () => {
+ try {
+ const { data } = await requestApi.get('products/transactions/details', {
+ headers: {
+ ...headers,
+ Authorization: `Bearer ${localStorage.getItem('accessToken')}`,
+ },
+ })
+ return data
+ } catch (error) {
+ console.warn(error)
+ console.warn('구매 내역 로드 실패')
+ return false
+ }
+}
+
+// 사용자: 구매 내역 상세 조회
+export const getPurchaseDetail = async (id: string) => {
+ try {
+ const { data } = await requestApi.post(
+ 'products/transactions/detail',
+ { detailId: id },
+ {
+ headers: {
+ ...headers,
+ Authorization: `Bearer ${localStorage.getItem('accessToken')}`,
+ },
+ },
+ )
+ return data
+ } catch (error) {
+ console.warn(error)
+ console.warn('구매 내역 상세 로드 실패')
+ return false
+ }
+}
+
+// 사용자 : 목록 조회
+export const getProductList = async ({
+ searchText,
+ searchTags,
+}: {
+ searchText: string
+ searchTags: string[]
+}) => {
+ try {
+ const { data } = await requestApi.post('products/search', { searchText, searchTags })
+ return data
+ } catch (error) {
+ console.warn(error)
+ console.warn('상품 목록 로드 실패')
+ return false
+ }
+}
+
+interface AddAccount {
+ bankCode: string // 연결할 은행 코드 (필수!)
+ accountNumber: string // 연결할 계좌번호 (필수!)
+ phoneNumber: string // 사용자 전화번호 (필수!)
+ signature: boolean // 사용자 서명 (필수!)
+}
diff --git a/client/src/components/Banner.tsx b/client/src/components/Banner.tsx
new file mode 100644
index 00000000..f0eff59f
--- /dev/null
+++ b/client/src/components/Banner.tsx
@@ -0,0 +1,84 @@
+import GlobalStyle from '../styles/GlobalStyles'
+import banner01 from '../../public/assets/main/banner/banner01.jpg'
+import banner02 from '../../public/assets/main/banner/banner02.jpg'
+import banner03 from '../../public/assets/main/banner/banner03.jpg'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import { EffectFade, Autoplay, Navigation } from 'swiper'
+import SlideNextButton from './SlideNextButton'
+import SlidePrevButton from './SlidePrevButton'
+import styled from 'styled-components'
+
+import 'swiper/css'
+import 'swiper/css/effect-fade'
+
+const BannerList = styled.div`
+ position: relative;
+`
+
+const ProductLink = styled.a`
+ > img {
+ width: 100%;
+ display: block;
+ }
+`
+
+const Prevbtn = styled.div`
+ position: absolute;
+ top: 50%;
+ left: 162px;
+ transform: translateY(-50%);
+ z-index: 9;
+`
+
+const Nextbtn = styled.div`
+ position: absolute;
+ top: 50%;
+ right: 162px;
+ transform: translateY(-50%);
+ z-index: 9;
+`
+
+const Banner = () => {
+ return (
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default Banner
diff --git a/client/src/components/CoolProduct.tsx b/client/src/components/CoolProduct.tsx
new file mode 100644
index 00000000..6bfb8bd8
--- /dev/null
+++ b/client/src/components/CoolProduct.tsx
@@ -0,0 +1,209 @@
+import GlobalStyle from '../styles/GlobalStyles'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import SwiperCore, { Autoplay, Navigation } from 'swiper'
+import SlideNextButton from './SlideNextButton'
+import SlidePrevButton from './SlidePrevButton'
+import styled from 'styled-components'
+import { useNavigate } from 'react-router-dom'
+
+import 'swiper/css'
+import 'swiper/css/effect-fade'
+SwiperCore.use([Autoplay, Navigation])
+
+const CoolList = styled.div`
+ margin-top: 180px;
+ > div.inner {
+ position: relative;
+ width: calc(100% - 500px);
+ margin: 0 auto;
+ > h1 {
+ font-family: 'Noto Sans KR';
+ font-size: 32px;
+ letter-spacing: -0.05em;
+ font-weight: 500;
+ }
+ }
+`
+
+const Listitem = styled.div`
+ margin-top: 40px;
+ margin-right: 16px;
+ > div.thumbnail {
+ cursor: pointer;
+ > img {
+ width: 100%;
+ display: block;
+ }
+ }
+ > div.contents {
+ margin-top: 10px;
+ margin-bottom: 26px;
+ > h3 {
+ font-family: 'Noto Sans KR';
+ font-size: 16px;
+ font-weight: 500;
+ letter-spacing: -0.05em;
+ margin-bottom: 4px;
+ }
+ > span {
+ display: block;
+ font-family: 'Noto Sans KR';
+ font-size: 12px;
+ letter-spacing: -0.05em;
+ color: #8e8e8e;
+ }
+ }
+ > p {
+ font-family: 'Noto Sans KR';
+ letter-spacing: -0.05em;
+ text-align: right;
+ font-size: 14px;
+ > span {
+ font-family: 'Spoqa Han Sans Neo';
+ font-size: 18px;
+ font-weight: 700;
+ }
+ }
+`
+
+const Prevbtn = styled.div`
+ position: absolute;
+ top: 50%;
+ left: 0;
+ transform: translateY(-50%);
+ z-index: 9;
+`
+
+const Nextbtn = styled.div`
+ position: absolute;
+ top: 50%;
+ right: 0;
+ transform: translateY(-50%);
+ z-index: 9;
+`
+
+const CoolProduct = () => {
+ const navigate = useNavigate()
+
+ const Product = [
+ {
+ id: 'KuVFr4I445aq3zjQoE4M',
+ src: 'https://www.narscosmetics.co.kr/dw/image/v2/BCSK_PRD/on/demandware.static/-/Sites-itemmaster_NARS/default/dw8f48591b/hi-res/0607845053347.jpg?sw=856&sh=750&sm=fit',
+ category: '하드와이어드 아이섀도우',
+ name: '멜로즈',
+ price: '32,000',
+ },
+
+ {
+ id: '4XrXRmzHQpuk0hWRspZO',
+ src: 'https://www.narscosmetics.co.kr/dw/image/v2/BCSK_PRD/on/demandware.static/-/Sites-itemmaster_NARS/default/dw638bf00a/hi-res/NARS_FA19_Lipstick_Soldier_LPS_Roman_Holliday_Sheer_GLBL_B_square_0607845029489.jpg?sw=856&sh=750&sm=fit',
+ category: '립스틱',
+ name: '로만 홀리데이',
+ price: '40,000',
+ },
+
+ {
+ id: 'VNcxrsNJGhNPiRTmqYfu',
+ src: 'https://www.narscosmetics.co.kr/dw/image/v2/BCSK_PRD/on/demandware.static/-/Sites-itemmaster_NARS/default/dwe698e13a/hi-res/0607845053101.jpg?sw=856&sh=750&sm=fit',
+ category: '싱글 아이섀도우',
+ name: '카보 산 루카스',
+ price: '30,000',
+ },
+
+ {
+ id: 'HVUfcgBBKR2iVPEjci79',
+ src: 'https://www.narscosmetics.co.kr/dw/image/v2/BCSK_PRD/on/demandware.static/-/Sites-itemmaster_NARS/default/dwf16c17e3/hi-res/NARS_FA19_Lipstick_Soldier_LPS_Tolede_Satin_GLBL_B_square_0607845029137.jpg?sw=856&sh=750&sm=fit',
+ category: '립스틱',
+ name: '톨레도',
+ price: '40,000',
+ },
+
+ {
+ id: 'lMwtCFaYYlscqrXxSPZh',
+ src: 'https://www.narscosmetics.co.kr/dw/image/v2/BCSK_PRD/on/demandware.static/-/Sites-itemmaster_NARS/default/dw2a7d68cf/hi-res/NARS_FA19_Lipstick_Soldier_LPS_Red_Lizard_Matte_GLBL_B_square_0607845029632.jpg?sw=856&sh=750&sm=fit',
+ category: '오리지널 립스틱',
+ name: '레드 리자드',
+ price: '40,000',
+ },
+
+ {
+ id: 'HSyGIMka7PkaKdsFVxM2',
+ src: 'https://www.narscosmetics.co.kr/dw/image/v2/BCSK_PRD/on/demandware.static/-/Sites-itemmaster_NARS/default/dw34453553/hi-res/NARS_FA19_Lipstick_Soldier_LPS_Impulse_Satin_GLBL_B_square_0607845029298.jpg?sw=856&sh=750&sm=fit',
+ category: '립스틱',
+ name: '임펄스',
+ price: '40,000',
+ },
+
+ {
+ id: 'WTJ1zwIKx68j3W8oLtXP',
+ src: 'https://www.narscosmetics.co.kr/dw/image/v2/BCSK_PRD/on/demandware.static/-/Sites-itemmaster_NARS/default/dwf0f20c62/hi-res/NARS_FA19_Lipstick_Soldier_LPS_Trans_Siberian_Matte_GLBL_B_square_0607845029656.jpg?sw=856&sh=750&sm=fit',
+ category: '오리지널 립스틱',
+ name: '트랜스 시베리안',
+ price: '40,000',
+ },
+
+ {
+ id: 'CvHwdrBls4NpkxmD93Px',
+ src: 'https://www.narscosmetics.co.kr/dw/image/v2/BCSK_PRD/on/demandware.static/-/Sites-itemmaster_NARS/default/dwa5506e71/hi-res/0607845053446.jpg?sw=856&sh=750&sm=fit',
+ category: '하드와이어드 아이섀도우',
+ name: '피렌체',
+ price: '32,000',
+ },
+ ]
+
+ const handleClickItem = (id: string) => {
+ navigate('/ProductDetail', {
+ state: {
+ id,
+ },
+ })
+ }
+
+ return (
+
+ console.log('slide change')}
+ // onSwiper={(swiper) => console.log(swiper)}
+ autoplay={{ delay: 6000, disableOnInteraction: false }}
+ loop={true}
+ >
+
+
+ 
+
+
+
+
+ 
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default CoolProduct
diff --git a/client/src/components/HueList.tsx b/client/src/components/HueList.tsx
new file mode 100644
index 00000000..0e45279b
--- /dev/null
+++ b/client/src/components/HueList.tsx
@@ -0,0 +1,279 @@
+import GlobalStyle from '../styles/GlobalStyles'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import { Autoplay, Navigation } from 'swiper'
+import SlideNextButton from './SlideNextButton'
+import SlidePrevButton from './SlidePrevButton'
+import styled from 'styled-components'
+import { useNavigate } from 'react-router-dom'
+
+import 'swiper/css'
+import 'swiper/css/effect-fade'
+
+const Hue = styled.div`
+ margin-top: 180px;
+ > div.inner {
+ position: relative;
+ width: calc(100% - 500px);
+ margin: 0 auto;
+ > h1 {
+ font-family: 'Noto Sans KR';
+ font-size: 32px;
+ letter-spacing: 0.05em;
+ font-weight: 500;
+ margin-bottom: 40px;
+ }
+ > div.tabmenu {
+ margin-bottom: 60px;
+ > ul {
+ display: flex;
+ gap: 20px;
+ }
+ > ul.tone {
+ margin-bottom: 26px;
+ > li {
+ padding: 10px 50px;
+ border-radius: 30px;
+ &:first-child {
+ font-family: 'Noto Sans KR';
+ font-size: 24px;
+ letter-spacing: -0.05em;
+ background-color: #ffa9be;
+ > a {
+ color: #fff;
+ }
+ }
+ &:last-child {
+ font-family: 'Noto Sans KR';
+ font-size: 24px;
+ background-color: #f3f3f3;
+ > a {
+ color: #8e8e8e;
+ }
+ }
+ }
+ }
+ > ul.cool {
+ > li {
+ padding: 10px 40px;
+ border-radius: 30px;
+ font-family: 'Noto Sans KR';
+ font-size: 18px;
+ &:first-child {
+ letter-spacing: 0.05em;
+ background-color: #191919;
+ > a {
+ color: #fff;
+ }
+ }
+ &:last-child {
+ background-color: #f3f3f3;
+ > a {
+ color: #8e8e8e;
+ }
+ }
+ }
+ }
+ }
+ }
+`
+
+const Listitem = styled.div`
+ margin-top: 40px;
+ margin-right: 16px;
+ > div.thumbnail {
+ cursor: pointer;
+ > img {
+ width: 100%;
+ display: block;
+ }
+ }
+ > div.contents {
+ margin-top: 10px;
+ margin-bottom: 26px;
+ > h3 {
+ font-family: 'Noto Sans KR';
+ font-size: 16px;
+ font-weight: 500;
+ letter-spacing: -0.05em;
+ margin-bottom: 4px;
+ }
+ > span {
+ display: block;
+ font-family: 'Noto Sans KR';
+ font-size: 12px;
+ letter-spacing: -0.05em;
+ color: #8e8e8e;
+ }
+ }
+ > p {
+ font-family: 'Noto Sans KR';
+ letter-spacing: -0.05em;
+ text-align: right;
+ font-size: 14px;
+ > span {
+ font-family: 'Spoqa Han Sans Neo';
+ font-size: 18px;
+ font-weight: 700;
+ }
+ }
+`
+
+const Prevbtn = styled.div`
+ position: absolute;
+ top: 50%;
+ left: 0;
+ transform: translateY(-50%);
+ z-index: 9;
+`
+
+const Nextbtn = styled.div`
+ position: absolute;
+ top: 50%;
+ right: 0;
+ transform: translateY(-50%);
+ z-index: 9;
+`
+
+const HueList = () => {
+ const navigate = useNavigate()
+
+ const Product = [
+ {
+ id: 'KuVFr4I445aq3zjQoE4M',
+ src: 'https://www.narscosmetics.co.kr/dw/image/v2/BCSK_PRD/on/demandware.static/-/Sites-itemmaster_NARS/default/dw8f48591b/hi-res/0607845053347.jpg?sw=856&sh=750&sm=fit',
+ category: '하드와이어드 아이섀도우',
+ name: '멜로즈',
+ price: '32,000',
+ },
+
+ {
+ id: '4XrXRmzHQpuk0hWRspZO',
+ src: 'https://www.narscosmetics.co.kr/dw/image/v2/BCSK_PRD/on/demandware.static/-/Sites-itemmaster_NARS/default/dw638bf00a/hi-res/NARS_FA19_Lipstick_Soldier_LPS_Roman_Holliday_Sheer_GLBL_B_square_0607845029489.jpg?sw=856&sh=750&sm=fit',
+ category: '립스틱',
+ name: '로만 홀리데이',
+ price: '40,000',
+ },
+
+ {
+ id: 'VNcxrsNJGhNPiRTmqYfu',
+ src: 'https://www.narscosmetics.co.kr/dw/image/v2/BCSK_PRD/on/demandware.static/-/Sites-itemmaster_NARS/default/dwe698e13a/hi-res/0607845053101.jpg?sw=856&sh=750&sm=fit',
+ category: '싱글 아이섀도우',
+ name: '카보 산 루카스',
+ price: '30,000',
+ },
+
+ {
+ id: 'HVUfcgBBKR2iVPEjci79',
+ src: 'https://www.narscosmetics.co.kr/dw/image/v2/BCSK_PRD/on/demandware.static/-/Sites-itemmaster_NARS/default/dwf16c17e3/hi-res/NARS_FA19_Lipstick_Soldier_LPS_Tolede_Satin_GLBL_B_square_0607845029137.jpg?sw=856&sh=750&sm=fit',
+ category: '립스틱',
+ name: '톨레도',
+ price: '40,000',
+ },
+
+ {
+ id: 'xRm7wLsZhDcgVz5KQFq0',
+ src: 'https://www.narscosmetics.co.kr/dw/image/v2/BCSK_PRD/on/demandware.static/-/Sites-itemmaster_NARS/default/dwa1030bd6/hi-res/0607845053422.jpg?sw=856&sh=750&sm=fit',
+ category: '하드와이어드 아이섀도우',
+ name: '얼쓰샤인',
+ price: '32,000',
+ },
+
+ {
+ id: 'kr4KyIJtbXLg1RUoADAH',
+ src: 'https://www.narscosmetics.co.kr/dw/image/v2/BCSK_PRD/on/demandware.static/-/Sites-itemmaster_NARS/default/dwbac184f2/hi-res/NARS_FA19_Lipstick_Soldier_LPS_Catfight_Matte_GLBL_B_square_0607845029717.jpg?sw=856&sh=750&sm=fit',
+ category: '립스틱',
+ name: '캣파이트',
+ price: '40,000',
+ },
+
+ {
+ id: 'L8JdI5hyPUb9g1KU4UXs',
+ src: 'https://www.narscosmetics.co.kr/dw/image/v2/BCSK_PRD/on/demandware.static/-/Sites-itemmaster_NARS/default/dw8f736413/hi-res/NARS_FA19_Lipstick_Soldier_LPS_Instant_Crush_Sheer_GLBL_B_square_0607845029557.jpg?sw=856&sh=750&sm=fit',
+ category: '립스틱',
+ name: '인스턴트 크러쉬',
+ price: '40,000',
+ },
+
+ {
+ id: 'nbAcxTzKgFQsKhCl83IQ',
+ src: 'https://www.narscosmetics.co.kr/dw/image/v2/BCSK_PRD/on/demandware.static/-/Sites-itemmaster_NARS/default/dw12b9b591/hi-res/NARS_FA19_Lipstick_Soldier_LPS_Hot_Kiss_Matte_GLBL_B_square_0607845029854.jpg?sw=856&sh=750&sm=fit',
+ category: '립스틱',
+ name: '핫 키스',
+ price: '40,000',
+ },
+ ]
+
+ const handleClickItem = (id) => {
+ navigate('/ProductDetail', {
+ state: {
+ id,
+ },
+ })
+ }
+
+ return (
+
+ console.log('slide change')}
+ // onSwiper={(swiper) => console.log(swiper)}
+ autoplay={{ delay: 6000, disableOnInteraction: false }}
+ loop={true}
+ >
+ {Product.map((product) => (
+
+
+
+
+ ))}
+
+
+
+
+
+
+ 추천 제품
+
+ 
handleClickItem(product.id)}
+ />
+
+
+
+ {product.category}
+ {product.name} ++ {product.price}원 +
+
+
+
+
+ )
+}
+
+export default HueList
diff --git a/client/src/components/MainBest.tsx b/client/src/components/MainBest.tsx
new file mode 100644
index 00000000..1ec7cc15
--- /dev/null
+++ b/client/src/components/MainBest.tsx
@@ -0,0 +1,207 @@
+import GlobalStyle from '../styles/GlobalStyles'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import { Autoplay, Navigation } from 'swiper'
+import SlideNextButton from './SlideNextButton'
+import SlidePrevButton from './SlidePrevButton'
+import styled from 'styled-components'
+import { useNavigate } from 'react-router-dom'
+
+import 'swiper/css'
+import 'swiper/css/effect-fade'
+
+const Mainbest = styled.div`
+ margin-top: 180px;
+ > div.inner {
+ position: relative;
+ width: calc(100% - 500px);
+ margin: 0 auto;
+ > h1 {
+ font-family: 'Spoqa Han Sans Neo';
+ font-size: 32px;
+ font-weight: 500;
+ }
+ }
+`
+
+const Listitem = styled.div`
+ margin-top: 40px;
+ margin-right: 16px;
+ > div.thumbnail {
+ cursor: pointer;
+ > img {
+ width: 100%;
+ display: block;
+ }
+ }
+ > div.contents {
+ margin-top: 10px;
+ margin-bottom: 26px;
+ > h3 {
+ font-family: 'Noto Sans KR';
+ font-size: 16px;
+ font-weight: 500;
+ letter-spacing: -0.05em;
+ margin-bottom: 4px;
+ }
+ > span {
+ display: block;
+ font-family: 'Noto Sans KR';
+ font-size: 12px;
+ letter-spacing: -0.05em;
+ color: #8e8e8e;
+ }
+ }
+ > p {
+ font-family: 'Noto Sans KR';
+ letter-spacing: -0.05em;
+ text-align: right;
+ font-size: 14px;
+ > span {
+ font-family: 'Spoqa Han Sans Neo';
+ font-size: 18px;
+ font-weight: 700;
+ }
+ }
+`
+
+const Prevbtn = styled.div`
+ position: absolute;
+ top: 50%;
+ left: 0;
+ transform: translateY(-50%);
+ z-index: 9;
+`
+
+const Nextbtn = styled.div`
+ position: absolute;
+ top: 50%;
+ right: 0;
+ transform: translateY(-50%);
+ z-index: 9;
+`
+
+const MainBest = () => {
+ const navigate = useNavigate()
+
+ const Product = [
+ {
+ id: '6O8YPJIMZbOcyNDMn8YU',
+ src: 'https://www.narscosmetics.co.kr/dw/image/v2/BCSK_PRD/on/demandware.static/-/Sites-itemmaster_NARS/default/dw73a7bdcc/hi-res/NARS_SP22_SpringEdit_Afterglow_PDPCrop_Soldier_Afterglow_Lipshine_LoverToLover_GLBL_2000x2000.jpg?sw=856&sh=750&sm=fit',
+ category: '에프터글로우 립 샤인',
+ name: '러버 투 러버',
+ price: '37,000',
+ },
+
+ {
+ id: 'i3yOg0gUQXpVb6n5Yah6',
+ src: 'https://www.narscosmetics.co.kr/dw/image/v2/BCSK_PRD/on/demandware.static/-/Sites-itemmaster_NARS/default/dw594c7940/hi-res/NARS_FA19_Lipstick_Soldier_LPS_Heat_Wave_Matte_GLBL_B_square_0607845029618.jpg?sw=856&sh=750&sm=fit',
+ category: '오리지널 립스틱',
+ name: '히트 웨이브',
+ price: '40,000',
+ },
+
+ {
+ id: 'KuVFr4I445aq3zjQoE4M',
+ src: 'https://www.narscosmetics.co.kr/dw/image/v2/BCSK_PRD/on/demandware.static/-/Sites-itemmaster_NARS/default/dw8f48591b/hi-res/0607845053347.jpg?sw=856&sh=750&sm=fit',
+ category: '하드와이어 아이섀도우',
+ name: '멜로즈',
+ price: '32,000',
+ },
+
+ {
+ id: 'wbzDFBshCidi0naEotyK',
+ src: 'https://www.narscosmetics.co.kr/dw/image/v2/BCSK_PRD/on/demandware.static/-/Sites-itemmaster_NARS/default/dwab29559f/hi-res/NARS_FA19_Lipstick_Soldier_LPS_Chelsea_Girls_Sheer_GLBL_B_square_0607845029595.jpg?sw=856&sh=750&sm=fit',
+ category: '립스틱',
+ name: '첼시 걸스',
+ price: '40,000',
+ },
+
+ {
+ id: 'mdUg1DmAkefBYlftcUnq',
+ src: 'https://www.narscosmetics.co.kr/dw/image/v2/BCSK_PRD/on/demandware.static/-/Sites-itemmaster_NARS/default/dw856e9a59/hi-res/NARS_FA19_Lipstick_Soldier_LPS_Casablanca_Satin_GLBL_B_square_0607845029205.jpg?sw=856&sh=750&sm=fit',
+ category: '오리지널 립스틱',
+ name: '카사블랑카',
+ price: '40,000',
+ },
+
+ {
+ id: 'v51IqksbGctAov6qMuDn',
+ src: 'https://www.narscosmetics.co.kr/dw/image/v2/BCSK_PRD/on/demandware.static/-/Sites-itemmaster_NARS/default/dw5471c7eb/hi-res/0607845053095.jpg?sw=856&sh=750&sm=fit',
+ category: '싱글 아이섀도우',
+ name: '네팔',
+ price: '30,000',
+ },
+
+ {
+ id: 'L8JdI5hyPUb9g1KU4UXs',
+ src: 'https://www.narscosmetics.co.kr/dw/image/v2/BCSK_PRD/on/demandware.static/-/Sites-itemmaster_NARS/default/dw8f736413/hi-res/NARS_FA19_Lipstick_Soldier_LPS_Instant_Crush_Sheer_GLBL_B_square_0607845029557.jpg?sw=856&sh=750&sm=fit',
+ category: '립스틱',
+ name: '인스턴트 크러쉬',
+ price: '40,000',
+ },
+
+ {
+ id: 'ASGoSP7sbNvePBLvIn0D',
+ src: 'https://www.narscosmetics.co.kr/dw/image/v2/BCSK_PRD/on/demandware.static/-/Sites-itemmaster_NARS/default/dw53a64a5e/hi-res/0607845039273.jpg?sw=856&sh=750&sm=fit',
+ category: '듀오 아이섀도우',
+ name: '샤레이드',
+ price: '49,000',
+ },
+ ]
+
+ const handleClickItem = (id: string) => {
+ navigate('/ProductDetail', {
+ state: {
+ id,
+ },
+ })
+ }
+
+ return (
+
+ console.log('slide change')}
+ // onSwiper={(swiper) => console.log(swiper)}
+ autoplay={{ delay: 6000, disableOnInteraction: false }}
+ loop={true}
+ >
+ {Product.map((product) => (
+
+
+
+
+ ))}
+
+
+
+
+
+
+ 색조
+ +
+ handleClickItem(product.id)}
+ />
+
+
+
+ {product.category}
+ {product.name} ++ {product.price}원 +
+
+
+
+
+ )
+}
+
+export default MainBest
diff --git a/client/src/components/NewList.tsx b/client/src/components/NewList.tsx
new file mode 100644
index 00000000..0e68e049
--- /dev/null
+++ b/client/src/components/NewList.tsx
@@ -0,0 +1,207 @@
+import GlobalStyle from '../styles/GlobalStyles'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import { Autoplay, Navigation } from 'swiper'
+import SlideNextButton from './SlideNextButton'
+import SlidePrevButton from './SlidePrevButton'
+import styled from 'styled-components'
+import { useNavigate } from 'react-router-dom'
+
+import 'swiper/css'
+import 'swiper/css/effect-fade'
+
+const New = styled.div`
+ margin-top: 180px;
+ > div.inner {
+ position: relative;
+ width: calc(100% - 500px);
+ margin: 0 auto;
+ > h1 {
+ font-family: 'Spoqa Han Sans Neo';
+ font-size: 32px;
+ font-weight: 500;
+ }
+ }
+`
+
+const Listitem = styled.div`
+ margin-top: 40px;
+ margin-right: 16px;
+ > div.thumbnail {
+ cursor: pointer;
+ > img {
+ width: 100%;
+ display: block;
+ }
+ }
+ > div.contents {
+ margin-top: 10px;
+ margin-bottom: 26px;
+ > h3 {
+ font-family: 'Noto Sans KR';
+ font-size: 16px;
+ font-weight: 500;
+ letter-spacing: -0.05em;
+ margin-bottom: 4px;
+ }
+ > span {
+ display: block;
+ font-family: 'Noto Sans KR';
+ font-size: 12px;
+ letter-spacing: -0.05em;
+ color: #8e8e8e;
+ }
+ }
+ > p {
+ font-family: 'Noto Sans KR';
+ letter-spacing: -0.05em;
+ text-align: right;
+ font-size: 14px;
+ > span {
+ font-family: 'Spoqa Han Sans Neo';
+ font-size: 18px;
+ font-weight: 700;
+ }
+ }
+`
+
+const Prevbtn = styled.div`
+ position: absolute;
+ top: 50%;
+ left: 0;
+ transform: translateY(-50%);
+ z-index: 9;
+`
+
+const Nextbtn = styled.div`
+ position: absolute;
+ top: 50%;
+ right: 0;
+ transform: translateY(-50%);
+ z-index: 9;
+`
+
+const NewList = () => {
+ const navigate = useNavigate()
+
+ const Product = [
+ {
+ id: 'RIOZemEhYVhghqYfqOqI',
+ src: 'https://www.narscosmetics.co.kr/dw/image/v2/BCSK_PRD/on/demandware.static/-/Sites-itemmaster_NARS/default/dwc2bb73af/hi-res/0607845053392.jpg?sw=856&sh=750&sm=fit',
+ category: '하드와이어드 아이섀도우',
+ name: '멘도자',
+ price: '32,000',
+ },
+
+ {
+ id: 'cERZ06rbjCYlB9oKmMIl',
+ src: 'https://www.narscosmetics.co.kr/dw/image/v2/BCSK_PRD/on/demandware.static/-/Sites-itemmaster_NARS/default/dwa5933760/hi-res/0607845053088.jpg?sw=856&sh=750&sm=fit',
+ category: '싱글 아이섀도우',
+ name: '나이트 스타',
+ price: '30,000',
+ },
+
+ {
+ id: '4XrXRmzHQpuk0hWRspZO',
+ src: 'https://www.narscosmetics.co.kr/dw/image/v2/BCSK_PRD/on/demandware.static/-/Sites-itemmaster_NARS/default/dw638bf00a/hi-res/NARS_FA19_Lipstick_Soldier_LPS_Roman_Holliday_Sheer_GLBL_B_square_0607845029489.jpg?sw=856&sh=750&sm=fit',
+ category: '립스틱',
+ name: '로만 홀리데이',
+ price: '40,000',
+ },
+
+ {
+ id: 'kr4KyIJtbXLg1RUoADAH',
+ src: 'https://www.narscosmetics.co.kr/dw/image/v2/BCSK_PRD/on/demandware.static/-/Sites-itemmaster_NARS/default/dwbac184f2/hi-res/NARS_FA19_Lipstick_Soldier_LPS_Catfight_Matte_GLBL_B_square_0607845029717.jpg?sw=856&sh=750&sm=fit',
+ category: '립스틱',
+ name: '캣파이트',
+ price: '40,000',
+ },
+
+ {
+ id: 'lMwtCFaYYlscqrXxSPZh',
+ src: 'https://www.narscosmetics.co.kr/dw/image/v2/BCSK_PRD/on/demandware.static/-/Sites-itemmaster_NARS/default/dw2a7d68cf/hi-res/NARS_FA19_Lipstick_Soldier_LPS_Red_Lizard_Matte_GLBL_B_square_0607845029632.jpg?sw=856&sh=750&sm=fit',
+ category: '오리지널 립스틱',
+ name: '레드 리자드',
+ price: '40,000',
+ },
+
+ {
+ id: 'xB5Zj1NUavjuWiFbmQnn',
+ src: 'https://www.narscosmetics.co.kr/dw/image/v2/BCSK_PRD/on/demandware.static/-/Sites-itemmaster_NARS/default/dwcb3182c7/hi-res/0607845039709.jpg?sw=856&sh=750&sm=fit',
+ category: '쿼드 아이섀도우',
+ name: '모하비',
+ price: '68,000',
+ },
+
+ {
+ id: 'QltRkohtiA2S8AObj0Qt',
+ src: 'https://www.narscosmetics.co.kr/dw/image/v2/BCSK_PRD/on/demandware.static/-/Sites-itemmaster_NARS/default/dw94bc3a5f/hi-res/NARS_FA19_Lipstick_Soldier_LPS_Bulgarian_Rose_Sheer_GLBL_B_square_0607845029571.jpg?sw=856&sh=750&sm=fit',
+ category: '립스틱',
+ name: '불가리안 로즈',
+ price: '40,000',
+ },
+
+ {
+ id: 'CvHwdrBls4NpkxmD93Px',
+ src: 'https://www.narscosmetics.co.kr/dw/image/v2/BCSK_PRD/on/demandware.static/-/Sites-itemmaster_NARS/default/dwa5506e71/hi-res/0607845053446.jpg?sw=856&sh=750&sm=fit',
+ category: '하드와이어드 아이섀도우',
+ name: '피렌체',
+ price: '32,000',
+ },
+ ]
+
+ const handleClickItem = (id: string) => {
+ navigate('/ProductDetail', {
+ state: {
+ id,
+ },
+ })
+ }
+
+ return (
+
+ console.log('slide change')}
+ // onSwiper={(swiper) => console.log(swiper)}
+ autoplay={{ delay: 6000, disableOnInteraction: false }}
+ loop={true}
+ >
+ {Product.map((product) => (
+
+
+
+
+ ))}
+
+
+
+
+
+
+ BEST
+
+ handleClickItem(product.id)}
+ />
+
+
+
+ {product.category}
+ {product.name} ++ {product.price}원 +
+
+
+
+
+ )
+}
+
+export default NewList
diff --git a/client/src/components/ScrollToTop.tsx b/client/src/components/ScrollToTop.tsx
new file mode 100644
index 00000000..f189182a
--- /dev/null
+++ b/client/src/components/ScrollToTop.tsx
@@ -0,0 +1,12 @@
+import { useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
+
+export default function scrollToTop () {
+ const { pathname } = useLocation()
+
+ useEffect(() => {
+ window.scrollTo(0, 0)
+ }, [pathname])
+
+ return null
+}
\ No newline at end of file
diff --git a/client/src/components/SlideNextButton.tsx b/client/src/components/SlideNextButton.tsx
new file mode 100644
index 00000000..46dc78ab
--- /dev/null
+++ b/client/src/components/SlideNextButton.tsx
@@ -0,0 +1,10 @@
+import { useSwiper } from 'swiper/react'
+import btnnext from '../../public/assets/btnnext.png'
+
+export default function SlideNextButton() {
+ const swiper = useSwiper()
+
+ return (
+
+ )
+}
\ No newline at end of file
diff --git a/client/src/components/SlidePrevButton.tsx b/client/src/components/SlidePrevButton.tsx
new file mode 100644
index 00000000..37268b9f
--- /dev/null
+++ b/client/src/components/SlidePrevButton.tsx
@@ -0,0 +1,10 @@
+import { useSwiper } from 'swiper/react'
+import btnprev from '../../public/assets/btnprev.png'
+
+export default function SlidePrevButton() {
+ const swiper = useSwiper()
+
+ return (
+
+ )
+}
\ No newline at end of file
diff --git a/client/src/components/WarmProduct.tsx b/client/src/components/WarmProduct.tsx
new file mode 100644
index 00000000..49030cc0
--- /dev/null
+++ b/client/src/components/WarmProduct.tsx
@@ -0,0 +1,208 @@
+import GlobalStyle from '../styles/GlobalStyles'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import { Autoplay, Navigation } from 'swiper'
+import SlideNextButton from './SlideNextButton'
+import SlidePrevButton from './SlidePrevButton'
+import styled from 'styled-components'
+import { useNavigate } from 'react-router-dom'
+
+import 'swiper/css'
+import 'swiper/css/effect-fade'
+
+const WarmList = styled.div`
+ margin-top: 180px;
+ > div.inner {
+ position: relative;
+ width: calc(100% - 500px);
+ margin: 0 auto;
+ > h1 {
+ font-family: 'Noto Sans KR';
+ font-size: 32px;
+ letter-spacing: -0.05em;
+ font-weight: 500;
+ }
+ }
+`
+
+const Listitem = styled.div`
+ margin-top: 40px;
+ margin-right: 16px;
+ > div.thumbnail {
+ cursor: pointer;
+ > img {
+ width: 100%;
+ display: block;
+ }
+ }
+ > div.contents {
+ margin-top: 10px;
+ margin-bottom: 26px;
+ > h3 {
+ font-family: 'Noto Sans KR';
+ font-size: 16px;
+ font-weight: 500;
+ letter-spacing: -0.05em;
+ margin-bottom: 4px;
+ }
+ > span {
+ display: block;
+ font-family: 'Noto Sans KR';
+ font-size: 12px;
+ letter-spacing: -0.05em;
+ color: #8e8e8e;
+ }
+ }
+ > p {
+ font-family: 'Noto Sans KR';
+ letter-spacing: -0.05em;
+ text-align: right;
+ font-size: 14px;
+ > span {
+ font-family: 'Spoqa Han Sans Neo';
+ font-size: 18px;
+ font-weight: 700;
+ }
+ }
+`
+
+const Prevbtn = styled.div`
+ position: absolute;
+ top: 50%;
+ left: 0;
+ transform: translateY(-50%);
+ z-index: 9;
+`
+
+const Nextbtn = styled.div`
+ position: absolute;
+ top: 50%;
+ right: 0;
+ transform: translateY(-50%);
+ z-index: 9;
+`
+
+const WarmProduct = () => {
+ const navigate = useNavigate()
+
+ const Product = [
+ {
+ id: 'euSsDf0TQW8QzdEz6iiE',
+ src: 'https://www.narscosmetics.co.kr/dw/image/v2/BCSK_PRD/on/demandware.static/-/Sites-itemmaster_NARS/default/dwf4074b8d/hi-res/NARS_FA19_Lipstick_Soldier_LPS_Lovin_Lips_Matte_GLBL_B_square_0607845029809.jpg?sw=856&sh=750&sm=fit',
+ category: '립스틱',
+ name: '러빙 립스',
+ price: '40,000',
+ },
+
+ {
+ id: '6O8YPJIMZbOcyNDMn8YU',
+ src: 'https://www.narscosmetics.co.kr/dw/image/v2/BCSK_PRD/on/demandware.static/-/Sites-itemmaster_NARS/default/dw73a7bdcc/hi-res/NARS_SP22_SpringEdit_Afterglow_PDPCrop_Soldier_Afterglow_Lipshine_LoverToLover_GLBL_2000x2000.jpg?sw=856&sh=750&sm=fit',
+ category: '에프터글로우 립 샤인',
+ name: '러버 투 러버',
+ price: '37,000',
+ },
+
+ {
+ id: 'i3yOg0gUQXpVb6n5Yah6',
+ src: 'https://www.narscosmetics.co.kr/dw/image/v2/BCSK_PRD/on/demandware.static/-/Sites-itemmaster_NARS/default/dw594c7940/hi-res/NARS_FA19_Lipstick_Soldier_LPS_Heat_Wave_Matte_GLBL_B_square_0607845029618.jpg?sw=856&sh=750&sm=fit',
+ category: '오리지널 립스틱',
+ name: '히트 웨이브',
+ price: '40,000',
+ },
+
+ {
+ id: 'cERZ06rbjCYlB9oKmMIl',
+ src: 'https://www.narscosmetics.co.kr/dw/image/v2/BCSK_PRD/on/demandware.static/-/Sites-itemmaster_NARS/default/dwa5933760/hi-res/0607845053088.jpg?sw=856&sh=750&sm=fit',
+ category: '싱글 아이섀도우',
+ name: '나이트 스타',
+ price: '30,000',
+ },
+
+ {
+ id: 'mdUg1DmAkefBYlftcUnq',
+ src: 'https://www.narscosmetics.co.kr/dw/image/v2/BCSK_PRD/on/demandware.static/-/Sites-itemmaster_NARS/default/dw856e9a59/hi-res/NARS_FA19_Lipstick_Soldier_LPS_Casablanca_Satin_GLBL_B_square_0607845029205.jpg?sw=856&sh=750&sm=fit',
+ category: '오리지널 립스틱',
+ name: '카사블랑카',
+ price: '40,000',
+ },
+
+ {
+ id: 'HVUfcgBBKR2iVPEjci79',
+ src: 'https://www.narscosmetics.co.kr/dw/image/v2/BCSK_PRD/on/demandware.static/-/Sites-itemmaster_NARS/default/dwf16c17e3/hi-res/NARS_FA19_Lipstick_Soldier_LPS_Tolede_Satin_GLBL_B_square_0607845029137.jpg?sw=856&sh=750&sm=fit',
+ category: '립스틱',
+ name: '톨레도',
+ price: '40,000',
+ },
+
+ {
+ id: 'v51IqksbGctAov6qMuDn',
+ src: 'https://www.narscosmetics.co.kr/dw/image/v2/BCSK_PRD/on/demandware.static/-/Sites-itemmaster_NARS/default/dw5471c7eb/hi-res/0607845053095.jpg?sw=856&sh=750&sm=fit',
+ category: '싱글 아이섀도우',
+ name: '네팔',
+ price: '30,000',
+ },
+
+ {
+ id: 'uk5Bhp1GJwFFLn40gK0Y',
+ src: 'https://www.narscosmetics.co.kr/dw/image/v2/BCSK_PRD/on/demandware.static/-/Sites-itemmaster_NARS/default/dw2b1b929c/hi-res/0607845053217.jpg?sw=856&sh=750&sm=fit',
+ category: '싱글 아이섀도우',
+ name: '라호르',
+ price: '30,000',
+ },
+ ]
+
+ const handleClickItem = (id: string) => {
+ navigate('/ProductDetail', {
+ state: {
+ id,
+ },
+ })
+ }
+
+ return (
+
+ console.log('slide change')}
+ // onSwiper={(swiper) => console.log(swiper)}
+ autoplay={{ delay: 6000, disableOnInteraction: false }}
+ loop={true}
+ >
+ {Product.map((product) => (
+
+
+
+
+ ))}
+
+
+
+
+
+
+ NEW
+
+ handleClickItem(product.id)}
+ />
+
+
+
+ {product.category}
+ {product.name} ++ {product.price}원 +
+
+
+
+
+ )
+}
+
+export default WarmProduct
diff --git a/client/src/components/common/LoadingSpinner.tsx b/client/src/components/common/LoadingSpinner.tsx
new file mode 100644
index 00000000..ef00bbba
--- /dev/null
+++ b/client/src/components/common/LoadingSpinner.tsx
@@ -0,0 +1,47 @@
+import styled from 'styled-components'
+
+export const LoadingSpinner = () => {
+ return (
+
+ console.log('slide change')}
+ // onSwiper={(swiper) => console.log(swiper)}
+ autoplay={{ delay: 6000, disableOnInteraction: false }}
+ loop={true}
+ >
+ {Product.map((product) => (
+
+
+
+
+ ))}
+
+
+
+
+
+
+ 추천 제품
+
+ handleClickItem(product.id)}
+ />
+
+
+
+ {product.category}
+ {product.name} ++ {product.price}원 +
+
+ 
+
+
+
+ 소개
+ 이용약관
+ 개인정보처리방침
+ 이용안내
+
+
+
+
+ Copyright © 2023 beautyinside. All Rights Reserved.
+
+
+
+ 법인명 : 뷰티인사이드
+ 사업자등록번호 : 123-45-1234
+
+
+ 주소 : 서울특별시 강남구 테헤란로 231, 11 층
+ 개인정보보호책임자 : 4 조 그룹원들
+
+
+ 대표이사 : 4 조 그룹원들
+ FAX : 02-1234-1234
+ 이메일주소 : beautyinside@beautyinside.com
+
+ 고객 서비스 센터 이용안내
+080-123-1234
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default Header
diff --git a/client/src/components/mypage/AccountAddModal.tsx b/client/src/components/mypage/AccountAddModal.tsx
new file mode 100644
index 00000000..342e179c
--- /dev/null
+++ b/client/src/components/mypage/AccountAddModal.tsx
@@ -0,0 +1,386 @@
+import { styled } from 'styled-components'
+import { useState, useEffect } from 'react'
+import { getValidAccounts, addAccount } from '../../apis/api'
+
+interface Bank {
+ // 선택 가능한 은행 정보
+ name: string // 은행 이름
+ code: string // 은행 코드
+ digits: number[] // 은행 계좌 자릿수
+ disabled: boolean // 사용자가 추가한 계좌 여부
+}
+
+interface AddAccountPayload {
+ bankCode: string
+ accountNumber: string
+ phoneNumber: string
+ signature: boolean
+}
+
+interface BankImageProps {
+ bank: string
+}
+
+export const AccountAddModal = ({
+ setisModalOpen,
+}: {
+ setisModalOpen: React.Dispatch
+
+
+
+
+
+
+ {loggedIn ? (
+ <>
+ 안녕하세요, {displayName}님
+
+
+
+
+ 장바구니
+
+
+ 마이페이지
+
+
+ ) : (
+ <>
+
+ 로그인
+
+
+ 회원가입
+
+
+ )}
+
+ 계좌등록
+휴대폰 번호
+ +약관에 동의하고 계좌를 등록하겠습니다.
+마이페이지
+
+
+ Best
+
+ {items.map((item) => (
+
+ handleClickItem(item.id)} />
+ {item.name}
+ {item.price}원
+
+ ))}
+
+
+
+ );
+};
+
+export default Best;
diff --git a/client/src/routes/Cart/CartPurchase.tsx b/client/src/routes/Cart/CartPurchase.tsx
new file mode 100644
index 00000000..c39fb1af
--- /dev/null
+++ b/client/src/routes/Cart/CartPurchase.tsx
@@ -0,0 +1,365 @@
+import { useNavigate } from 'react-router-dom'
+import { useEffect, useState } from 'react'
+import GlobalStyle from '../../styles/GlobalStyles'
+import styled from 'styled-components'
+
+type Product = {
+ id: number;
+ title: string;
+ thumbnail: string;
+ price: number;
+};
+
+
+
+
+const Section = styled.div`
+ margin-top: 152px;
+ margin-bottom: 60px;
+ &:last-child {
+ border-top: 10px solid #eaeaea;
+ margin-top: 0px;
+ margin-bottom: 0px;
+ padding: 60px 0;
+ }
+ > div.inner {
+ width: calc(100% - 500px);
+ margin: 0 auto;
+ > div.title {
+ text-align: center;
+ > h2 {
+ font-family: 'Noto Sans KR';
+ font-size: 26px;
+ font-weight: 500;
+ letter-spacing: -0.05em;
+ margin-bottom: 12px;
+ }
+ > p {
+ font-family: 'Noto Sans KR';
+ font-size: 20px;
+ letter-spacing: -0.05em;
+ color: #8e8e8e;
+ > span {
+ color: #ffa9be;
+ }
+ }
+ }
+ }
+`
+
+const Product = styled.div`
+ margin-top: 56px;
+ > div.product {
+ > h2 {
+ font-family: 'Noto Sans KR';
+ font-size: 20px;
+ font-weight: 500;
+ letter-spacing: -0.05em;
+ margin-bottom: 32px;
+ }
+ > ul.product-list {
+ margin-bottom: 94px;
+ > li {
+ display: flex;
+ margin-right: 16px;
+ &:last-child {
+ margin-right: 0px;
+ }
+ > div.thumbnail {
+ > a {
+ width: 200px;
+ > img {
+ width: 100%;
+ display: block;
+ object-fit: cover;
+ }
+ }
+ }
+ > div.contents {
+ margin-top: 10px;
+ margin-bottom: 26px;
+ > h3 {
+ font-family: 'Noto Sans KR';
+ font-size: 16px;
+ font-weight: 500;
+ letter-spacing: -0.05em;
+ margin-bottom: 4px;
+ }
+ > span {
+ display: block;
+ font-family: 'Spoqa Han Sans Neo';
+ font-size: 14px;
+ color: #8e8e8e;
+ }
+ > p {
+ margin-top: 30px;
+ font-size: 14px;
+ > span {
+ font-family: 'Spoqa Han Sans Neo';
+ letter-spcing: 0;
+ font-size: 18px;
+ font-weight: 500;
+ }
+ }
+ }
+ > button {
+ margin-left: 30px;
+ border: 1px solid #8e8e8e;
+ border-radius: 4px;
+ width: 50px;
+ height: 30px;
+ font-family: 'Noto Sans KR';
+ letter-spacing: -0.05em;
+ font-size: 14px;
+ transition: 0.3s;
+ &:hover {
+ background-color: #ffa9be;
+ border-color: transparent;
+ color: #fff;
+ }
+ }
+ }
+ }
+ > div.price {
+ margin-bottom: 38px;
+ > p {
+ font-family: 'Noto Sans KR';
+ font-size: 26px;
+ text-align: right;
+ > span {
+ font-family: 'Spoqa Han Sans Neo';
+ font-weight: 500;
+ }
+ }
+ }
+ > div.link {
+ font-family: 'Noto Sans KR';
+ font-size: 18px;
+ letter-spacing: -0.05em;
+ height: 50px;
+ display: flex;
+ justify-content: flex-end;
+ > a {
+ display: block;
+ width: 304px;
+ height: 50px;
+ text-align: center;
+ padding: 10px 94px;
+ border-radius: 6px;
+ margin-right: 20px;
+ border: 1px solid #8e8e8e;
+ transition: 0.2s;
+ &:hover {
+ border-color: transparent;
+ background-color: #ffa9be;
+ color: #fff;
+ }
+ &:last-child {
+ margin-right: 0px;
+ background-color: #ffa9be;
+ color: #fff;
+ border-color: transparent;
+ }
+ }
+ }
+ }
+`
+
+const Purchase = styled.div`
+ > h2 {
+ font-family: 'Noto Sans KR';
+ font-size: 20px;
+ font-weight: 500;
+ letter-spacing: -0.05em;
+ margin-bottom: 112px;
+ }
+ > div.total {
+ display: flex;
+ justify-content: flex-end;
+ margin-bottom: 40px;
+ > div.price {
+ width: 304px;
+ > div {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 10px;
+ font-family: 'Noto Sans KR';
+ font-size: 20px;
+ letter-spacing: -0.05em;
+ > h3 {
+ font-weight: 500;
+ }
+ > p {
+ > span {
+ font-family: 'Spoqa Han Sans Neo';
+ letter-spacing: 0;
+ font-weight: 500;
+ }
+ }
+ }
+ }
+ }
+ > div.link {
+ height: 50px;
+ display: flex;
+ justify-content: flex-end;
+ }
+`
+
+const Button = styled.button`
+ font-family: 'Noto Sans KR';
+ font-size: 18px;
+ letter-spacing: -0.05em;
+ display: block;
+ width: 304px;
+ height: 50px;
+ text-align: center;
+ border-radius: 6px;
+ padding: 10px 0;
+ margin-right: 20px;
+ border: 1px solid #8e8e8e;
+ transition: 0.2s;
+ &:hover {
+ border-color: transparent;
+ background-color: #ffa9be;
+ color: #fff;
+ }
+ &:last-child {
+ margin-right: 0px;
+ }
+ > span {
+ font-family: 'Spoqa Han Sans Neo';
+ font-weight: 500;
+ }
+`
+
+const CartPurchase = (): JSX.Element => {
+ const STORAGE_KEY = 'detail';
+ const [productList, setProductList] = useState
+
+
+
+
+
+ );
+};
+
+export default CartPurchase;
\ No newline at end of file
diff --git a/client/src/routes/Main.tsx b/client/src/routes/Main.tsx
new file mode 100644
index 00000000..48767f40
--- /dev/null
+++ b/client/src/routes/Main.tsx
@@ -0,0 +1,170 @@
+import GlobalStyle from '../styles/GlobalStyles'
+import styled from 'styled-components'
+import Banner from '../components/Banner'
+import MainBest from '../components/MainBest'
+import NewList from '../components/NewList'
+import HueList from '../components/HueList'
+import { useNavigate } from 'react-router-dom'
+
+const SummerMakeup = styled.div`
+ margin-top: 180px;
+ > div.inner {
+ width: calc(100% - 500px);
+ margin: 0 auto;
+ display: flex;
+ gap: 102px;
+ > div.contents {
+ width: 552px;
+ > h1 {
+ font-family: 'Noto Sans KR';
+ font-size: 60px;
+ letter-spacing: -0.05em;
+ font-weight: 700;
+ margin-bottom: 86px;
+ }
+ > h4 {
+ font-family: 'Noto Sans KR';
+ font-size: 20px;
+ letter-spacing: -0.05em;
+ margin-bottom: 12px;
+ }
+ > h2 {
+ font-family: 'Noto Sans KR';
+ font-size: 32px;
+ letter-spacing: -0.05em;
+ font-weight: 500;
+ }
+ > ul.makeup-detail {
+ margin-top: 134px;
+ display: flex;
+ > li {
+ width: 170px;
+ margin-right: 16px;
+ > div.thumbnail {
+ > img {
+ width: 100%;
+ display: block;
+ cursor: pointer;
+ }
+ }
+ > div.makeup-contents {
+ font-family: 'Noto Sans KR';
+ letter-spacing: -0.05em;
+ > h3 {
+ font-size: 14px;
+ font-weight: 500;
+ margin-bottom: 4px;
+ }
+ > span {
+ display: block;
+ font-size: 10px;
+ color: #8e8e8e;
+ }
+ }
+ }
+ }
+ }
+ > div.thumbnail {
+ width: 600px;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ > img {
+ width: 100%;
+ display: block;
+ }
+ }
+ }
+`
+
+const Thumbnail = styled.div`
+ margin-top: 180px;
+ > img {
+ width: 100%;
+ display: block;
+ object-fit: cover;
+ }
+`
+
+const Main = () => {
+ const navigate = useNavigate()
+
+ const Product = [
+ {
+ id: 'kqbOag03VKTYZiMq5vt2',
+ src: 'https://www.narscosmetics.co.kr/dw/image/v2/BCSK_PRD/on/demandware.static/-/Sites-itemmaster_NARS/default/dw9ea1e5c2/hi-res/NARS_HO21_Holiday_PDPCrop_Soldier_UnwrappedMiniESPalette_Orgasm_GLBL_2000x2000.jpg?sw=255&sh=255&sm=fit',
+ category: '언랩트 미니 아이섀도우 팔레트',
+ name: '오르가즘',
+ },
+
+ {
+ id: 'KuVFr4I445aq3zjQoE4M',
+ src: 'https://www.narscosmetics.co.kr/dw/image/v2/BCSK_PRD/on/demandware.static/-/Sites-itemmaster_NARS/default/dw8f48591b/hi-res/0607845053347.jpg?sw=856&sh=750&sm=fit',
+ category: '하드와이어드 아이섀도우',
+ name: '멜로즈',
+ },
+
+ {
+ id: '4XrXRmzHQpuk0hWRspZO',
+ src: 'https://www.narscosmetics.co.kr/dw/image/v2/BCSK_PRD/on/demandware.static/-/Sites-itemmaster_NARS/default/dw638bf00a/hi-res/NARS_FA19_Lipstick_Soldier_LPS_Roman_Holliday_Sheer_GLBL_B_square_0607845029489.jpg?sw=856&sh=750&sm=fit',
+ category: '립스틱',
+ name: '로만 홀리데이',
+ },
+ ]
+
+ const handleClickItem = (id: string) => {
+ navigate('/ProductDetail', {
+ state: {
+ id,
+ },
+ });
+ };
+
+ return (
+
+
+
+
+
+
+ 장바구니
++ 뷰티인사이드의 다양한 서비스와 퍼스널 진단을 누리세요. +
+
+
+ 상품
+-
+ {productList === null ? (
+
-
+ + ++
+ +
++ +{product.title.split('-')[0]}
+ {product.title.split('-')[1]} ++ {product.price.toLocaleString('ko-KR')}원 +
+
+ ))
+ )}
+
목록없음
+ ) : ( + productList.map((product, index) => ( +
+
+
+
+
+
+
+ 결제 예상 금액
+
+
+
+
+
+
+ 총 상품금액
++ {productTotal.toLocaleString('ko-KR')}원 +
+
+
+ 총 할인금액
++ 0원 +
+
+
+ 총 배송비
++ {DELIVERY_CHARGE}원 +
+
+
+
+
+
+
+
+ 
+
+
+ )
+}
+
+export default Main
diff --git a/client/src/routes/Makeup/Makeup.tsx b/client/src/routes/Makeup/Makeup.tsx
new file mode 100644
index 00000000..4b70ccc5
--- /dev/null
+++ b/client/src/routes/Makeup/Makeup.tsx
@@ -0,0 +1,76 @@
+import { useState, useEffect } from 'react';
+import GlobalStyle from '../../styles/GlobalStyles';
+import styled from 'styled-components';
+import MakeupList from './MakeupList';
+import MakeupFilter from './MakeupFilter';
+import { getProductList } from '../../apis/api';
+
+interface Item {
+ id: number;
+ title: string;
+ thumbnail: string;
+ price: number;
+}
+
+
+const Container = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 40px;
+`;
+
+const Title = styled.h1`
+ font-family: 'Noto Sans KR';
+ text-align: center;
+ margin-top: 40px;
+ margin-bottom: 50px;
+ font-size: 30px;
+ font-weight: 700;
+`;
+
+function Makeup() {
+ const [tags, setTags] = useState
+
+
+
+ 여름철
+
+
+
+ 여름철
+
+ 그날의 메이크업
+
+ 단 한 번의 터치
+모두의 시선을 사로잡다
+-
+ {Product.map((product) => (
+
-
+ ++++
{product.category}
+ {product.name} +
+ ))}
+
+ 
+
+
+
+
+
+ 메이크업
+
+
+ );
+}
+
+export default Makeup;
diff --git a/client/src/routes/Makeup/MakeupFilter.tsx b/client/src/routes/Makeup/MakeupFilter.tsx
new file mode 100644
index 00000000..31b3ad65
--- /dev/null
+++ b/client/src/routes/Makeup/MakeupFilter.tsx
@@ -0,0 +1,92 @@
+import { useState, useEffect, ChangeEvent } from 'react';
+import styled from 'styled-components';
+
+// 컴포넌트 Props 타입 정의
+interface Props {
+ onSelectTags: (tags: string[]) => void; // 태그 선택 시 실행될 콜백 함수
+}
+
+// 필터 컨테이너 스타일드 컴포넌트
+const FilterContainer = styled.div`
+ display: flex;
+ align-items: center;
+ margin-bottom: 50px;
+`;
+
+const Checkbox = styled.input`
+ margin-right: 5px;
+`;
+
+const Label = styled.label`
+ margin-right: 10px;
+`;
+
+// MakeupFilter 컴포넌트
+const MakeupFilter = ({ onSelectTags }: Props) => {
+ const [selectedTags, setSelectedTags] = useState등록된 계좌
+ {!dataLoading ? ( + accountList.length > 0 ? ( + accountList.map((account) => ( +
+ {account.bankName}
+{account.accountNumber}
++ 잔액:{account.balance} +
+상품 정보
+거래 정보
+{data.product.title.split('-')[0]}
+{data.product.title.split('-')[1]} / 1개
+{data.product.price.toLocaleString('ko-KR')}원
+{data.timePaid.slice(0, 10)}
+로그아웃 하시겠습니까?
+ {isLoggeIn ? ( + + ) : ( +이미 로그아웃 되었습니다.
+ )} +주문상품 {productList.length}개
+ {productList.map((item: Product, index: number) => ( +{item.title.split('-')[0]}
++ {item.title.split('-')[1]} / 1개 +
+{item.price.toLocaleString('ko-KR')}원
+주문자 정보
+주문자 이름
+{userInfo?.displayName}
+주문자 이메일
+{userInfo?.email}
+결제 수단
+ +결제 금액
+총 주문 금액
+{counttotal.toLocaleString('ko-KR')}원
+배송비
+{DELIVERY_CHARGE.toLocaleString('ko-KR')}원
+총 결제 금액
+{total.toLocaleString('ko-KR')}원
+결제가 완료되었습니다.
+ +
+
+
+
+ )
+}
+
+export default PersonalColor
diff --git a/client/src/routes/PersonalColor/PersonalColorCool.tsx b/client/src/routes/PersonalColor/PersonalColorCool.tsx
new file mode 100644
index 00000000..729f89d6
--- /dev/null
+++ b/client/src/routes/PersonalColor/PersonalColorCool.tsx
@@ -0,0 +1,118 @@
+import styled from 'styled-components';
+import GlobalStyle from '../../styles/GlobalStyles'
+import { BiChevronsRight } from "react-icons/bi";
+import CoolProduct from '../../components/CoolProduct';
+
+const PersonalColorCool = () => {
+
+
+ const Section = styled.div`
+ margin-top: 100px;
+ margin-bottom: 424px;
+ > div.inner {
+ width: calc(100% - 500px);
+ margin: 0 auto;
+ > h1 {
+ font-family: 'InkLipquid';
+ font-size: 42px;
+ letter-spacing: -.05em;
+ text-align: center;
+ color: #ffa9be;
+ margin-bottom: 50px;
+ }
+ > h2 {
+ font-family: 'InkLipquid';
+ font-size: 42px;
+ letter-spacing: -.05em;
+ text-align: center;
+ margin-bottom: 160px;
+ }
+ }
+ `
+ const Cool = styled.div`
+ font-family: 'Noto Sans KR';
+ font-size: 20px;
+ letter-spacing: -.05em;
+ > div {
+ margin-bottom: 280px;
+ &:last-child {
+ margin-bottom: 0;
+ }
+ > h1 {
+ font-weight: 500;
+ margin-top: 70px;
+ margin-bottom: 30px;
+ }
+ > img {
+ width: 100%;
+ display: block;
+ }
+ }
+ `
+ const Contents = styled.div`
+ > p {
+ display: flex;
+ align-items: center;
+ font-family: 'Noto Sans KR';
+ font-size: 20px;
+ letter-spacing: -.05em;
+ margin-bottom: 6px;
+ }
+ .arrow {
+ color: #ffa9be;
+ width: 24px;
+ height: 24px;
+ }
+ `
+
+
+
+ return (
+
+
+ 
+
+
+
+
+ 나에게 가장 잘 어울리는
+ 퍼스널 컬러 찾기
+
+
+
+
+
+ );
+};
+
+export default PersonalColorCool;
\ No newline at end of file
diff --git a/client/src/routes/PersonalColor/PersonalColorTest.tsx b/client/src/routes/PersonalColor/PersonalColorTest.tsx
new file mode 100644
index 00000000..43645a29
--- /dev/null
+++ b/client/src/routes/PersonalColor/PersonalColorTest.tsx
@@ -0,0 +1,281 @@
+import { useNavigate } from 'react-router-dom'
+import styled from 'styled-components';
+import GlobalStyle from '../../styles/GlobalStyles'
+
+
+const PersonalColorTest = () => {
+ const navigate = useNavigate();
+
+ const checkOne = (checkThis: HTMLInputElement) => {
+ const checkboxes = document.getElementsByName('test1');
+ for (let i = 0; i < checkboxes.length; i++) {
+ if (checkboxes[i] !== checkThis) {
+ (checkboxes[i] as HTMLInputElement).checked = false;
+ }
+ }
+ };
+
+ const checkTwo = (checkThis: HTMLInputElement) => {
+ const checkboxes = document.getElementsByName('test2');
+ for (let i = 0; i < checkboxes.length; i++) {
+ if (checkboxes[i] !== checkThis) {
+ (checkboxes[i] as HTMLInputElement).checked = false;
+ }
+ }
+ };
+
+ const checkThree = (checkThis: HTMLInputElement) => {
+ const checkboxes = document.getElementsByName('test3');
+ for (let i = 0; i < checkboxes.length; i++) {
+ if (checkboxes[i] !== checkThis) {
+ (checkboxes[i] as HTMLInputElement).checked = false;
+ }
+ }
+ };
+
+ const checkFour = (checkThis: HTMLInputElement) => {
+ const checkboxes = document.getElementsByName('test4');
+ for (let i = 0; i < checkboxes.length; i++) {
+ if (checkboxes[i] !== checkThis) {
+ (checkboxes[i] as HTMLInputElement).checked = false;
+ }
+ }
+ };
+
+ const checkFive = (checkThis: HTMLInputElement) => {
+ const checkboxes = document.getElementsByName('test5');
+ for (let i = 0; i < checkboxes.length; i++) {
+ if (checkboxes[i] !== checkThis) {
+ (checkboxes[i] as HTMLInputElement).checked = false;
+ }
+ }
+ };
+
+ const checkSix = (checkThis: HTMLInputElement) => {
+ const checkboxes = document.getElementsByName('test6');
+ for (let i = 0; i < checkboxes.length; i++) {
+ if (checkboxes[i] !== checkThis) {
+ (checkboxes[i] as HTMLInputElement).checked = false;
+ }
+ }
+ };
+
+
+
+ const Section = styled.div`
+ margin-top: 100px;
+ box-sizing: border-box;
+ > h1 {
+ font-family: 'InkLipquid';
+ font-size: 42px;
+ text-align: center;
+ color: #ffa9be;
+ margin-bottom: 50px;
+ }
+ > h2 {
+ font-family: 'Noto Sans KR';
+ font-size: 20px;
+ text-align: center;
+ margin-bottom: 76px;
+ }
+ > div.test-list {
+ width: 950px;
+ margin: 0 auto;
+ margin-bottom: 120px;
+ > ul {
+ > div {
+ display: flex;
+ align-items: center;
+ margin-bottom: 26px;
+ &:last-child {
+ margin-bottom: 0;
+ }
+ &:nth-child(1) {
+ padding-left: 132px;
+ }
+ &:nth-child(2) {
+ padding-left: 114px;
+ }
+ &:nth-child(3) {
+ padding-left: 156px;
+ }
+ &:nth-child(4) {
+ padding-left: 216px;
+ }
+ &:nth-child(5) {
+ padding-left: 88px;
+ }
+ &:nth-child(6) {
+ padding-left: 76px;
+ }
+ > li {
+ display: flex;
+ margin-right: 20px;
+ %:last-child {
+ margin-right: 0;
+ }
+ > label {
+ font-family: 'Noto Sans KR';
+ font-size: 20px;
+ letter-spacing: -.05%;
+ &:first-child {
+ margin-right: 20px;
+ text-align: right;
+ }
+ &:last-child {
+ margin-left: 20px;
+ text-align: left;
+ }
+ }
+ }
+ > li.number {
+ font-family: 'Spoqa Han Sans Neo';
+ font-size: 20px;
+ letter-spacing: 0;
+ font-weight: 500;
+ }
+ }
+ }
+ }
+ `
+ const Test = styled.div`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-family: 'Noto Sans KR';
+ font-size: 20px;
+ font-weight: 700;
+ margin-bottom: 30px;
+ > span:first-child {
+ margin-right: 32px;
+ }
+ `
+
+
+ const Button = styled.div`
+ display: flex;
+ justify-content: center;
+ margin-top: 50px;
+
+ > button {
+ font-family: 'Noto Sans KR';
+ font-size: 26px;
+ color: #fff;
+ background-color: #dedede;
+ padding: 12px 60px;
+ border-radius: 30px;
+ transition: .3s;
+ cursor: pointer;
+ &:first-child {
+ margin-left: 8px;
+ margin-right: 20px;
+ }
+ &:hover {
+ background-color: #ffa9be;
+ }
+ }
+ `
+
+ const StyledInput = styled.input`
+ appearance: none;
+ border: 1px solid #8e8e8e;
+ border-radius: 6px;
+ width: 28px;
+ height: 28px;
+ &:checked {
+ border-color: transparent;
+ background: url('assets/checkbox.png') no-repeat center center;
+ }
+ `
+
+ return (
+
+
+
+
+ 나의 퍼스널 컬러는?
+쿨톤
+
+ 
+
+
+
+
+
+
+ 여름 쿨톤
+< BiChevronsRight className="arrow"/> 흰색, 파랑을 지닌 차가운 유형
+< BiChevronsRight className="arrow"/> 아이보리, 라벤더, 하늘색 등 노란기 없는 차가운 색이 잘 어울림
+< BiChevronsRight className="arrow"/> 깔끔하고 시원하며 우아한 이미지
+< BiChevronsRight className="arrow"/> 핑크빛과 붉은 빛이 감도는 피부
+< BiChevronsRight className="arrow"/> 차갑고 회색기 섞인 톤
+여름 쿨톤 Tip
+< BiChevronsRight className="arrow"/> BEST - 노란기 없는 차가운 파스텔톤 새틴 소재, 자연 흑발
+< BiChevronsRight className="arrow"/> WORST - 옐로우 베이스가 들어간 헤어컬러, 스모키 화장
+
+ 
+
+
+
+
+
+
+ 겨울 쿨톤
+< BiChevronsRight className="arrow"/> 파랑, 흰색, 검정을 지닌 차가운 유형
+< BiChevronsRight className="arrow"/> 핫핑크, 버건디 색상이 잘 어울림
+< BiChevronsRight className="arrow"/> 시크하고 모던한 이미지
+< BiChevronsRight className="arrow"/> 푸른빛이 도는 어두운 검정머리
+< BiChevronsRight className="arrow"/> 다크 초콜릿 눈동자, 카리스마가 있음
+겨울 쿨톤 Tip
+< BiChevronsRight className="arrow"/> BEST - 블랙 헤어 혹은 백색에 가까운 금발, 가벼운 화장에 붉은 립, 핫핑크와 버건디
+< BiChevronsRight className="arrow"/> WORST - 골드 쥬얼리, 피치, 코랄의 따뜻한 색감
+
+
+ 선택의 개수가 많은 쪽이
+
+ WARM
+ COOL
+
+
+
+ );
+};
+
+export default PersonalColorTest;
\ No newline at end of file
diff --git a/client/src/routes/PersonalColor/PersonalColorWarm.tsx b/client/src/routes/PersonalColor/PersonalColorWarm.tsx
new file mode 100644
index 00000000..62a6b1b0
--- /dev/null
+++ b/client/src/routes/PersonalColor/PersonalColorWarm.tsx
@@ -0,0 +1,148 @@
+import styled from 'styled-components'
+import GlobalStyle from '../../styles/GlobalStyles'
+import { BiChevronsRight } from 'react-icons/bi'
+import WarmProduct from '../../components/WarmProduct'
+
+const PersonalColorWarm = () => {
+ const Section = styled.div`
+ margin-top: 100px;
+ margin-bottom: 424px;
+ > div.inner {
+ width: calc(100% - 500px);
+ margin: 0 auto;
+ > h1 {
+ font-family: 'InkLipquid';
+ font-size: 42px;
+ letter-spacing: -0.05em;
+ text-align: center;
+ color: #ffa9be;
+ margin-bottom: 50px;
+ }
+ > h2 {
+ font-family: 'InkLipquid';
+ font-size: 42px;
+ letter-spacing: -0.05em;
+ text-align: center;
+ margin-bottom: 160px;
+ }
+ }
+ `
+ const Warm = styled.div`
+ font-family: 'Noto Sans KR';
+ font-size: 20px;
+ letter-spacing: -0.05em;
+ > div {
+ margin-bottom: 280px;
+ &:last-child {
+ margin-bottom: 0;
+ }
+ > h1 {
+ font-weight: 500;
+ margin-top: 70px;
+ margin-bottom: 30px;
+ }
+ > img {
+ width: 100%;
+ display: block;
+ }
+ }
+ `
+
+ const Contents = styled.div`
+ > p {
+ display: flex;
+ align-items: center;
+ font-family: 'Noto Sans KR';
+ font-size: 20px;
+ letter-spacing: -0.05em;
+ margin-bottom: 6px;
+ }
+ .arrow {
+ color: #ffa9be;
+ width: 24px;
+ height: 24px;
+ }
+ `
+
+ return (
+ 퍼스널컬러 진단
+선택의 개수가 많은 쪽이
본인의 피부톤입니다.
+
+
+
+
+ -
+
-
+
+
checkOne(e.target)} /> +
+ - 01 +
-
+
checkOne(e.target)} /> + +
+ -
+
+
checkTwo(e.target)} /> +
+ - 02 +
-
+
checkTwo(e.target)} /> + +
+ -
+
+
checkThree(e.target)} /> +
+ - 03 +
-
+
checkThree(e.target)} /> + +
+ -
+
+
checkFour(e.target)} /> +
+ - 04 +
-
+
checkFour(e.target)} /> + +
+ -
+
+
checkFive(e.target)} /> +
+ - 05 +
-
+
checkFive(e.target)} /> + +
+ -
+
+
checkSix(e.target)} /> +
+ - 06 +
-
+
checkSix(e.target)} /> + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default PersonalColorWarm
diff --git a/client/src/routes/ProductDetail.tsx b/client/src/routes/ProductDetail.tsx
new file mode 100644
index 00000000..7e70536f
--- /dev/null
+++ b/client/src/routes/ProductDetail.tsx
@@ -0,0 +1,191 @@
+import { useLocation, useNavigate } from 'react-router-dom'
+import GlobalStyle from '../styles/GlobalStyles'
+import styled from 'styled-components'
+import { getProduct } from '../apis/api'
+import { useEffect, useState } from 'react'
+
+const Section = styled.div`
+ margin-top: 180px;
+ margin-bottom: 80px;
+ &:last-child {
+ border-top: 1px solid #8e8e8e;
+ margin-bottom: 0;
+ }
+ > div.inner {
+ width: calc(100% - 500px);
+ margin: 0 auto;
+ > img {
+ margin-top: 100px;
+ width: 100%;
+ display: block;
+ }
+ > div.product-info {
+ display: flex;
+ > div.photo {
+ position: relative;
+ width: 40%;
+ > img {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 300px;
+ display: block;
+ }
+ }
+ > div.product-detail {
+ width: 60%;
+ > div.detail-info {
+ margin-bottom: 40px;
+ > h3 {
+ font-family: 'Noto Sans KR';
+ font-size: 32px;
+ font-weight: 700;
+ letter-spacing: -0.05em;
+ margin-bottom: 4px;
+ }
+ > p {
+ margin-top: 30px;
+ }
+ }
+ > div.price {
+ display: flex;
+ justify-content: flex-end;
+ margin-bottom: 156px;
+ > p {
+ font-family: 'Noto Sans KR';
+ font-size: 20px;
+ letter-spacing: -0.05em;
+ > span {
+ font-family: 'Spoqa Han Sans Neo';
+ letter-spacing: 0;
+ font-size: 32px;
+ font-weight: 500;
+ }
+ }
+ }
+ > div.link {
+ display: flex;
+ justify-content: flex-end;
+ }
+ }
+ }
+ }
+`
+
+const Button = styled.button`
+ width: 110px;
+ height: 50px;
+ margin-right: 20px;
+ border: 1px solid #8e8e8e;
+ border-radius: 6px;
+ font-family: 'Noto Sans KR';
+ font-size: 16px;
+ letter-spacing: -0.05em;
+ transition: 0.2s;
+ &:last-child {
+ margin-right: 0;
+ }
+ &:hover {
+ color: #fff;
+ background-color: #ffa9ba;
+ border-color: transparent;
+ }
+`
+
+interface ProductDetailType {
+ id?: number
+ thumbnail?: string
+ title?: string
+ description?: string
+ price?: number
+ photo?: string
+}
+
+const ProductDetail = () => {
+ const navigate = useNavigate()
+ const location = useLocation()
+ const id = location.state?.id
+
+ const STORAGE_KEY = 'detail'
+ let storage: ProductDetailType[] = []
+
+ const [productDetail, setProductDetail] = useState
+
+
+
+ 나의 퍼스널 컬러는?
+웜톤
+
+ 
+
+
+
+
+
+
+ 봄 웜톤
+
+
+
+
+
+
봄 웜톤 Tip
+
+
+
+ 
+
+
+
+
+
+
+ 가을 웜톤
+
+
+
+
+
+
가을 웜톤 Tip
+
+
+
+
+
+
+
+
+ )
+}
+
+export default ProductDetail
diff --git a/client/src/routes/SignIn.tsx b/client/src/routes/SignIn.tsx
new file mode 100644
index 00000000..635d370b
--- /dev/null
+++ b/client/src/routes/SignIn.tsx
@@ -0,0 +1,177 @@
+import styled from 'styled-components'
+import React, { useState, FormEvent, useEffect } from 'react'
+import { signIn, authVerification } from '../apis/api'
+import { useNavigate } from 'react-router-dom'
+const { VITE_ADMIN_EMAIL } = (import.meta as any).env
+
+const SignInBox = styled.div<{ isValidEmail: boolean }>`
+ font-family: 'Noto Sans KR';
+ text-align: center;
+ margin-top: 100px;
+
+ h1 {
+ font-size: 26px;
+ font-weight: 700;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ color: #191919;
+
+ div {
+ display: flex;
+ align-items: center;
+ width: auto;
+ margin-top: 10px;
+ margin-bottom: 50px;
+ font-size: 20px;
+ color: #8e8e8e;
+ flex-direction: row;
+
+ h2 {
+ color: #ffa9be;
+ }
+ }
+ }
+
+ form {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ input {
+ padding: 10px;
+ margin-top: 10px;
+ width: 500px;
+ height: 46px;
+ border: 1px solid #8e8e8e;
+ border-radius: 7px;
+ }
+
+ input:focus {
+ border: 2px solid #ffa9be;
+ outline: none;
+ }
+
+ button {
+ margin-top: 30px;
+ background-color: ${({ isValidEmail }) => (isValidEmail ? 'red' : '#DEDEDE')};
+ padding: 20px;
+ width: 500px;
+ height: 60px;
+ border-radius: 7px;
+ font-size: 24px;
+ color: #fff;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+`
+
+const SignIn = () => {
+ const navigate = useNavigate()
+ const [email, setEmail] = useState('')
+ const [password, setPassword] = useState('')
+ const [isValidEmail, setIsValidEmail] = useState(false)
+ const [loggedIn, setLoggedIn] = useState
+
+
+
+
+ 
+
+
+
+
+
+ {productDetail?.title}
+{productDetail?.description}
+
+
+ + {productDetail?.price}원 +
+
+
+
+
+ 
+
+
+ 로그인
+
+ 뷰티인사이드
의 다양한 서비스와 퍼스널 진단을 누리세요.
+
+
+
+ 뷰티인사이드
의 다양한 서비스와 퍼스널 진단을 누리세요. +
+
+
+
+ )
+}
+
+export default Signup
diff --git a/client/src/styles/GlobalStyles.tsx b/client/src/styles/GlobalStyles.tsx
new file mode 100644
index 00000000..31e3775b
--- /dev/null
+++ b/client/src/styles/GlobalStyles.tsx
@@ -0,0 +1,46 @@
+import { createGlobalStyle } from 'styled-components'
+
+const GlobalStyle = createGlobalStyle`
+
+ // InkLipquid font 적용
+ @font-face {
+ font-family: 'InkLipquid';
+ src: local('InkLipquid'), url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/InkLipquid.woff') format('woff');
+ src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/InkLipquid.woff') format('woff');
+ font-weight: normal;
+ font-style: normal;
+ }
+
+ // 공통
+ body {
+ font-family: 'Noto Sans KR';
+ font-size: 16px;
+ line-height: 1.5;
+ margin: 0;
+ padding: 0;
+ }
+
+ li {
+ list-style: none;
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ a {
+ color: #191919;
+ text-decoration: none;
+ }
+
+ button {
+ border: 0;
+ outline: 0;
+ background: transparent;
+ cursor: pointer;
+ }
+`
+
+export default GlobalStyle
\ No newline at end of file
diff --git a/client/tsconfig.json b/client/tsconfig.json
new file mode 100644
index 00000000..f688e562
--- /dev/null
+++ b/client/tsconfig.json
@@ -0,0 +1,29 @@
+{
+ "compilerOptions": {
+ "target": "ES2020",
+ "useDefineForClassFields": true,
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+ "typeRoots": ["node_modules/@types"],
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true,
+
+ "esModuleInterop": true,
+ "allowSyntheticDefaultImports": true
+ },
+ "include": ["src", "public/assets/styles", "logo.d.ts", "swiper.d.ts"],
+ "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/client/tsconfig.node.json b/client/tsconfig.node.json
new file mode 100644
index 00000000..42872c59
--- /dev/null
+++ b/client/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+ "compilerOptions": {
+ "composite": true,
+ "skipLibCheck": true,
+ "module": "ESNext",
+ "moduleResolution": "bundler",
+ "allowSyntheticDefaultImports": true
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/client/vite.config.ts b/client/vite.config.ts
new file mode 100644
index 00000000..3b370b04
--- /dev/null
+++ b/client/vite.config.ts
@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [react()],
+ define: {
+ 'process.env.VITE_ADMIN_EMAIL': JSON.stringify(process.env.VITE_ADMIN_EMAIL),
+ },
+})
회원가입
+
+
+
+ + 뷰티인사이드의 다양한 서비스와 퍼스널 진단을 누리세요. +
+