diff --git a/README.md b/README.md index 5e1cb44..a8a53df 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,38 @@ ## 배포 사이트 [![Netlify Status](https://api.netlify.com/api/v1/badges/df0e144a-736d-44d7-be21-12d6c1573797/deploy-status)](https://app.netlify.com/sites/magical-babka-4591f3/deploys) - +### 접속 링크 **[TwoCircle(투써클 안경점)](https://magical-babka-4591f3.netlify.app/)** +## TwoCircle 프로젝트 소개 +REST API를 활용하여 Vanilla JavaScript로 제작한 안경 쇼핑몰입니다. +- 유저는 회원가입 및 로그인 후 상품 구매를 사용할 수 있으며 그 외 주문내역, 개인정보수정 등이 가능하고 계좌관리(계좌등록)을 통해 구매가 가능합니다. +- 관리자는 거래내역, 상품 등록, 등록 상품 내역을 볼 수 있고, 상품등록 및 수정, 거래취소 및 거래확정이 가능합니다. +- 404페이지 출력 시, 3초 뒤 메인화면으로 돌아갑니다 +- 사용자가 배너에 있는 버튼을 통해 라이트 모드와 다크 모드를 선택 할 수 있습니다 + +## 사이트 소개 +| 메인페이지(라이트)| 메인페이지(다크) | +|:---------:|:----------:| +| | | + +| 제품 페이지| 결제 페이지 | +|:---------:|:----------:| +| | | + +| 관리자 대시보드| 관리자 상품 관리 | +|:---------:|:----------:| +| | | +### 페이지 구성 +![페이지 구성](/image/%ED%8E%98%EC%9D%B4%EC%A7%80%20%EB%8B%A4%EC%9D%B4%EC%96%B4%EA%B7%B8%EB%9E%A8.png) + +### TwoCircle 작업과정 +[TwoCircle Issues](https://github.com/TwoCircle-Team5/TwoCircle/issues) +![TwoCircle Issues](/image/TwoCircle%20Issues.png) -## 작업기간 -23.01.30(월) ~ 미정 +### 작업기간 +23.01.30 ~ 23.03.10 -## 테스트 아이디 +## 테스트 계정 ### 사용자 ID : test@naver.com
PW : abcd1234 @@ -15,20 +40,17 @@ PW : abcd1234 ID : admin@naver.com
PW : abcd1234 -## 사이트 설명 (추가 예정...) - ## 프로젝트 멤버 및 작업 목록 |
박희수<조장>
|
김선미
|
송지윤
|
장현준
|
박현준
| |:--:|:--:|:--:|:--:|:--:| | | | | | | | [박희수](https://github.com/Nevacat) | [김선미](https://github.com/seon-mikim) | [송지윤](https://github.com/jiyoon29) | [장현준](https://github.com/hyeon17) | [박현준](https://github.com/johnphjkr) | -|
라우터 연결
로그인 및 회원가입 페이지
검색 및 태그에 따른 상품페이지 | 장바구니 페이지
위시리스트
마이페이지
계좌관리 페이지 | 메인페이지
관리자 페이지
전반적인 디자인 관리 | 제품 상세페이지
결제 페이지
결제 완료 페이지
관리자 유저 목록 페이지
관리자 대시보드 페이지
구매목록 페이지 구조 제작 및 디자인
카카오톡 공유
API 구조 제작
초기 라우터 구조 제작
Wiki 작성 | 정보 변경 페이지
구매목록 페이지 | +|
라우터 연결
로그인 및 회원가입 페이지
검색 및 태그에 따른 상품페이지 | 장바구니 페이지
위시리스트
마이페이지
계좌관리 페이지 | 메인페이지
관리자 페이지
전반적인 디자인 관리 | 제품 상세페이지
결제 페이지
결제 완료 페이지
관리자 유저 목록 페이지
관리자 대시보드 페이지
404(NotFound)페이지
구매목록 페이지 구조 제작 및 디자인
카카오톡 공유하기
API 구조 제작
라우터 구조 제작
Wiki 작성 | 정보 변경 페이지
구매목록 페이지 | ### 프로젝트의 기능구현 사항 📌 필수사항 - - [x] 제공된 API를 사용하여 해당하는 쇼핑몰을 구성하기. - [x] 회원가입 페이지를 제작하여 회원가입 기능 구현하기. - [x] 로그인 페이지를 제작하여 로그인 기능 구현하기. @@ -46,10 +68,8 @@ PW : abcd1234 - Bundler: `Parcel 1` ### 프로젝트 구조 - ``` TwoCircle -├─ .gitignore ├─ image ├─ index.html ├─ LICENSE @@ -65,6 +85,8 @@ TwoCircle │ │ └─ product_update.js │ ├─ admin_wrap.js │ ├─ header.js +│ ├─ notfound +│ │ └─ 404page.js │ └─ user │ ├─ account.js │ ├─ cart.js @@ -85,6 +107,7 @@ TwoCircle │ ├─ abstracts │ ├─ admin │ ├─ base +│ ├─ notfound │ └─ user ├─ source │ ├─ api @@ -118,6 +141,7 @@ TwoCircle │ │ │ └─ purchase_ok_api.js │ │ └─ requests.js │ └─ js +│ ├─ 404page.js │ ├─ account.js │ ├─ admin │ │ ├─ admin.js @@ -128,6 +152,7 @@ TwoCircle │ │ ├─ product_list.js │ │ ├─ product_update.js │ │ └─ user_list.js +│ ├─ bankImage.js │ ├─ cart.js │ ├─ event_badge.js │ ├─ header.js @@ -135,6 +160,7 @@ TwoCircle │ ├─ login.js │ ├─ main.js │ ├─ order_completed.js +│ ├─ pagination.js │ ├─ payment.js │ ├─ product_details.js │ ├─ product_list.js @@ -145,3 +171,12 @@ TwoCircle │ └─ wish_list.js └─ static ``` + +### 프로젝트 실행 방법 +``` +1. $ git clone https://github.com/TwoCircle-Team5/TwoCircle.git +2. $ cd TwoCircle-Team5 +3. $ npm i +4. root경로에 .env 파일 생성 후, api관련 정보(API_KEY, ADMIN) 입력 +5. $ npm run dev +``` \ No newline at end of file diff --git a/image/KBbank_logo.png b/image/KBbank_logo.png new file mode 100644 index 0000000..8710ef1 Binary files /dev/null and b/image/KBbank_logo.png differ diff --git a/image/Kbank_logo.png b/image/Kbank_logo.png new file mode 100644 index 0000000..e25f4fb Binary files /dev/null and b/image/Kbank_logo.png differ diff --git a/image/Kbank_logo.svg b/image/Kbank_logo.svg new file mode 100644 index 0000000..da47906 --- /dev/null +++ b/image/Kbank_logo.svg @@ -0,0 +1,20 @@ + + + + + + + + + + diff --git a/image/NHbank_logo.png b/image/NHbank_logo.png new file mode 100644 index 0000000..0f886d3 Binary files /dev/null and b/image/NHbank_logo.png differ diff --git a/image/NHbank_logo.svg b/image/NHbank_logo.svg new file mode 100644 index 0000000..11555b9 --- /dev/null +++ b/image/NHbank_logo.svg @@ -0,0 +1,13 @@ + + + + + + + diff --git a/image/TwoCircle Issues.png b/image/TwoCircle Issues.png new file mode 100644 index 0000000..7e13c0a Binary files /dev/null and b/image/TwoCircle Issues.png differ diff --git a/image/box.png b/image/box.png new file mode 100644 index 0000000..08a1a54 Binary files /dev/null and b/image/box.png differ diff --git a/image/hanabank_logo.png b/image/hanabank_logo.png new file mode 100644 index 0000000..b709c1f Binary files /dev/null and b/image/hanabank_logo.png differ diff --git a/image/hanabank_logo.svg b/image/hanabank_logo.svg new file mode 100644 index 0000000..bb348ba --- /dev/null +++ b/image/hanabank_logo.svg @@ -0,0 +1,20 @@ + + + + + + + + diff --git a/image/kakaobank_logo.png b/image/kakaobank_logo.png new file mode 100644 index 0000000..5821300 Binary files /dev/null and b/image/kakaobank_logo.png differ diff --git a/image/kakaobank_logo.svg b/image/kakaobank_logo.svg new file mode 100644 index 0000000..14fae15 --- /dev/null +++ b/image/kakaobank_logo.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/image/kbbank_logo.svg b/image/kbbank_logo.svg new file mode 100644 index 0000000..ada9f98 --- /dev/null +++ b/image/kbbank_logo.svg @@ -0,0 +1,28 @@ + + + + + + diff --git a/image/logo_dark.svg b/image/logo_dark.svg new file mode 100644 index 0000000..16b82e8 --- /dev/null +++ b/image/logo_dark.svg @@ -0,0 +1,136 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/image/main_logo.svg b/image/main_logo.svg new file mode 100644 index 0000000..bed6b21 --- /dev/null +++ b/image/main_logo.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/image/shinhanbank_logo.png b/image/shinhanbank_logo.png new file mode 100644 index 0000000..66e2f01 Binary files /dev/null and b/image/shinhanbank_logo.png differ diff --git a/image/shinhanbank_logo.svg b/image/shinhanbank_logo.svg new file mode 100644 index 0000000..3ea3046 --- /dev/null +++ b/image/shinhanbank_logo.svg @@ -0,0 +1,21 @@ + + + + + + diff --git a/image/usercount.png b/image/usercount.png new file mode 100644 index 0000000..4072c52 Binary files /dev/null and b/image/usercount.png differ diff --git a/image/won.png b/image/won.png new file mode 100644 index 0000000..2fe33ee Binary files /dev/null and b/image/won.png differ diff --git a/image/wooribank_logo.png b/image/wooribank_logo.png new file mode 100644 index 0000000..7cebe77 Binary files /dev/null and b/image/wooribank_logo.png differ diff --git a/image/wooribank_logo.svg b/image/wooribank_logo.svg new file mode 100644 index 0000000..b62845c --- /dev/null +++ b/image/wooribank_logo.svg @@ -0,0 +1,12 @@ + + + + + + diff --git "a/image/\352\262\260\354\240\234.png" "b/image/\352\262\260\354\240\234.png" new file mode 100644 index 0000000..6b78473 Binary files /dev/null and "b/image/\352\262\260\354\240\234.png" differ diff --git "a/image/\352\264\200\353\246\254\354\236\220_\353\214\200\354\213\234\353\263\264\353\223\234.png" "b/image/\352\264\200\353\246\254\354\236\220_\353\214\200\354\213\234\353\263\264\353\223\234.png" new file mode 100644 index 0000000..fdac89f Binary files /dev/null and "b/image/\352\264\200\353\246\254\354\236\220_\353\214\200\354\213\234\353\263\264\353\223\234.png" differ diff --git "a/image/\352\264\200\353\246\254\354\236\220_\354\203\201\355\222\210\353\246\254\354\212\244\355\212\270.png" "b/image/\352\264\200\353\246\254\354\236\220_\354\203\201\355\222\210\353\246\254\354\212\244\355\212\270.png" new file mode 100644 index 0000000..df03047 Binary files /dev/null and "b/image/\352\264\200\353\246\254\354\236\220_\354\203\201\355\222\210\353\246\254\354\212\244\355\212\270.png" differ diff --git "a/image/\352\264\200\353\246\254\354\236\220_\354\203\201\355\222\210\354\266\224\352\260\200.png" "b/image/\352\264\200\353\246\254\354\236\220_\354\203\201\355\222\210\354\266\224\352\260\200.png" new file mode 100644 index 0000000..cdb1c70 Binary files /dev/null and "b/image/\352\264\200\353\246\254\354\236\220_\354\203\201\355\222\210\354\266\224\352\260\200.png" differ diff --git "a/image/\353\251\224\354\235\270_\353\213\244\355\201\254.png" "b/image/\353\251\224\354\235\270_\353\213\244\355\201\254.png" new file mode 100644 index 0000000..40a250a Binary files /dev/null and "b/image/\353\251\224\354\235\270_\353\213\244\355\201\254.png" differ diff --git "a/image/\353\251\224\354\235\270_\353\235\274\354\235\264\355\212\270.png" "b/image/\353\251\224\354\235\270_\353\235\274\354\235\264\355\212\270.png" new file mode 100644 index 0000000..6c42490 Binary files /dev/null and "b/image/\353\251\224\354\235\270_\353\235\274\354\235\264\355\212\270.png" differ diff --git "a/image/\354\240\234\355\222\210\354\203\201\354\204\270\355\216\230\354\235\264\354\247\200.png" "b/image/\354\240\234\355\222\210\354\203\201\354\204\270\355\216\230\354\235\264\354\247\200.png" new file mode 100644 index 0000000..a4f32b9 Binary files /dev/null and "b/image/\354\240\234\355\222\210\354\203\201\354\204\270\355\216\230\354\235\264\354\247\200.png" differ diff --git "a/image/\355\216\230\354\235\264\354\247\200 \353\213\244\354\235\264\354\226\264\352\267\270\353\236\250.png" "b/image/\355\216\230\354\235\264\354\247\200 \353\213\244\354\235\264\354\226\264\352\267\270\353\236\250.png" new file mode 100644 index 0000000..a8d1358 Binary files /dev/null and "b/image/\355\216\230\354\235\264\354\247\200 \353\213\244\354\235\264\354\226\264\352\267\270\353\236\250.png" differ diff --git a/index.html b/index.html index 1612f92..a737862 100644 --- a/index.html +++ b/index.html @@ -1,38 +1,53 @@ + + + + + + + 투써클(TWO CIRCLE) - - - - - - - 투써클(TWO CIRCLE) + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - -
-
- - - \ No newline at end of file + +
+ + diff --git a/package-lock.json b/package-lock.json index 4d2ccf2..c606142 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,8 @@ "version": "1.0.0", "license": "ISC", "dependencies": { - "navigo": "^8.11.1" + "navigo": "^8.11.1", + "source": "^0.0.3" }, "devDependencies": { "parcel-bundler": "^1.12.5", @@ -4308,6 +4309,11 @@ "node": ">=0.10.0" } }, + "node_modules/findit": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/findit/-/findit-2.0.0.tgz", + "integrity": "sha512-ENZS237/Hr8bjczn5eKuBohLgaD0JyUd0arxretR1f9RO46vZHA1b2y0VorgGV3WaOT3c+78P8h7v4JGJ1i/rg==" + }, "node_modules/for-each": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz", @@ -8508,6 +8514,17 @@ "node": ">=0.10.0" } }, + "node_modules/source": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/source/-/source-0.0.3.tgz", + "integrity": "sha512-R3sMIbB31pFhS5qmiPfY6RYae6DQM1y4rdFyvB4dlMc5+YJ9ZQos+GTYNmV1hyozgUUHz4aQIIm+nZM9oKMVNQ==", + "dependencies": { + "findit": ">=0.0.2" + }, + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", @@ -13042,6 +13059,11 @@ "to-regex-range": "^2.1.0" } }, + "findit": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/findit/-/findit-2.0.0.tgz", + "integrity": "sha512-ENZS237/Hr8bjczn5eKuBohLgaD0JyUd0arxretR1f9RO46vZHA1b2y0VorgGV3WaOT3c+78P8h7v4JGJ1i/rg==" + }, "for-each": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz", @@ -16402,6 +16424,14 @@ "kind-of": "^3.2.0" } }, + "source": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/source/-/source-0.0.3.tgz", + "integrity": "sha512-R3sMIbB31pFhS5qmiPfY6RYae6DQM1y4rdFyvB4dlMc5+YJ9ZQos+GTYNmV1hyozgUUHz4aQIIm+nZM9oKMVNQ==", + "requires": { + "findit": ">=0.0.2" + } + }, "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", diff --git a/package.json b/package.json index 2d0151e..22bfe9c 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "sass": "^1.58.3" }, "dependencies": { + "chart.js": "^4.2.1", "chartjs-adapter-luxon": "^1.3.1", "luxon": "^3.3.0", @@ -31,5 +32,6 @@ }, "staticFiles": { "staticPath": "static" + } } diff --git a/pages/admin/admin_dashboard.js b/pages/admin/admin_dashboard.js index 643a75b..8594aa2 100644 --- a/pages/admin/admin_dashboard.js +++ b/pages/admin/admin_dashboard.js @@ -15,9 +15,9 @@ export function dashBoardRender() {

요약

-
-
-
+
상품
+
원화
+
유저수
@@ -34,10 +34,7 @@ export function dashBoardRender() {
매출 합계
-
- - -
+
diff --git a/pages/admin/admin_product_list.js b/pages/admin/admin_product_list.js index 08fa116..ed5cd59 100644 --- a/pages/admin/admin_product_list.js +++ b/pages/admin/admin_product_list.js @@ -2,7 +2,7 @@ import { adminProductList } from "../../source/js/admin/product_list"; export function adminPageRender() { const admin = document.querySelector("#admin"); - admin.innerHTML = /*html*/` + admin.innerHTML = /*html*/ `
@@ -30,7 +30,9 @@ export function adminPageRender() {

품절여부

+
+
`; adminProductList(); diff --git a/pages/admin/product_add.js b/pages/admin/product_add.js index cd2808e..50ad71f 100644 --- a/pages/admin/product_add.js +++ b/pages/admin/product_add.js @@ -10,21 +10,59 @@ export function adminProductAdd() {
-

제품이름

+

제품이름*

-

제품가격

+

제품가격*

-

제품 상세 설명

+

제품 상세 설명*

+
+

메인상품 진열

+
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+ 핫한 상품(6), MD 추천 상품(6), 신상품(12)까지만 보입니다. +

태그

- - 태그는 ', '로 구분해주세요 +
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +

제품 사진

diff --git a/pages/admin/product_update.js b/pages/admin/product_update.js index 21dd1dc..ee55730 100644 --- a/pages/admin/product_update.js +++ b/pages/admin/product_update.js @@ -25,10 +25,48 @@ export function productUpdate(id) {

제품 상세 설명

+
+

메인상품 진열

+
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+ 핫한 상품(6), MD 추천 상품(6), 신상품(12)까지만 보입니다. +

태그

- - 태그는 ', '로 구분해주세요 +
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +

제품 사진

diff --git a/pages/admin_wrap.js b/pages/admin_wrap.js index f49fc64..03ddb5b 100644 --- a/pages/admin_wrap.js +++ b/pages/admin_wrap.js @@ -1,13 +1,13 @@ -import { admin } from "../source/js/admin/admin"; +import { admin } from '../source/js/admin/admin'; export function adminWrap() { - const wrap = document.querySelector("#wrap"); + const wrap = document.querySelector('#wrap'); wrap.innerHTML = /* html */ `

- 로고 + + 로고

@@ -16,22 +16,20 @@ export function adminWrap() {
-
+
- + `; admin(); -} \ No newline at end of file +} diff --git a/pages/header.js b/pages/header.js index c76cc94..7da1694 100644 --- a/pages/header.js +++ b/pages/header.js @@ -1,7 +1,10 @@ -import { router } from '../source/route'; +import { eventBadgeHandler } from '../source/js/event_badge'; +import { headerHandler } from '../source/js/header'; + export function headerRender() { const wrap = document.querySelector('#wrap'); + wrap.innerHTML = /*html*/ `
@@ -22,31 +25,32 @@ export function headerRender() {

- + +

@@ -80,44 +84,48 @@ export function headerRender() {

TEAM5
23.01.30
~ ING

- -

박희수

+ + 박희수 프로필 +

박희수

+
- -

김선미

+ + 김선미 프로필 +

김선미

+
- -

송지윤

+ + 송지윤 프로필 +

송지윤

+
- -

장현준

+ + 장현준 프로필 +

장현준

+
- -

박현준

+ + 박현준 프로필 +

박현준

+
- - - - - - - - - - - 최근 본 상품 - TOP +
+ DARK + + +
+
@@ -125,7 +133,10 @@ export function headerRender() {
-

+

+ + +

개인정보처리방침 이용약관 @@ -171,7 +182,7 @@ export function headerRender() {

SNS

  • - + TwoCircle_logo
  • @@ -195,54 +206,6 @@ export function headerRender() {
`; - - // 검색기능 - const search = document.querySelector('.search'); - const searchInput = document.querySelector('.search input'); - - search.addEventListener('submit', (e) => { - e.preventDefault(); - router.navigate(`product_search/${searchInput.value}`); - }); - - // 카트, 찜하기 개수 - const cartNum = document.querySelector('.cart_num'); - const heartNum = document.querySelector('.heart_num'); - - if (localStorage.getItem('basket')) { - cartNum.innerText = JSON.parse(localStorage.getItem('basket')).length; - } - if (localStorage.getItem('wish')) { - heartNum.innerText = JSON.parse(localStorage.getItem('wish')).length; - } - // TOP - const top = document.querySelector(".scroll_top") - top.addEventListener("click",()=>{ - window.scrollTo({top : 0, behavior: 'smooth'}) - }) - // 이벤트 베너 - const eventBanner = new Swiper('.event-swiper', { - width: "100", - loop:true, - autoplay:true, - scrollbar: { - el: ".swiper-scrollbar" - }, - }); - // 스크롤 이벤트 - const eventSection = document.querySelector(".event") - window.addEventListener('scroll',_.throttle(()=>{ - console.log(window.scrollY) - if(window.scrollY<330){ - gsap.to(eventSection,.4,{ - opacity:0, - display:'none' - }) - }else{ - gsap.to(eventSection,.4,{ - opacity:1, - display:'block' - }) - } - },300)) + headerHandler() + eventBadgeHandler() } diff --git a/pages/notfound/404page.js b/pages/notfound/404page.js new file mode 100644 index 0000000..5ed2bc3 --- /dev/null +++ b/pages/notfound/404page.js @@ -0,0 +1,16 @@ +import { notFoundHandler } from '../../source/js/404page.js'; +export function notFoundRender() { + const app = document.querySelector('#app'); + app.innerHTML = /*html*/ ` +
+
+
+
존재하지 않는 페이지 입니다
+
3초후 메인페이지로 이동합니다
+
+
+
+
+ `; + notFoundHandler(); +} \ No newline at end of file diff --git a/pages/user/account.js b/pages/user/account.js index 98d8b30..fab0f19 100644 --- a/pages/user/account.js +++ b/pages/user/account.js @@ -1,35 +1,17 @@ import { accountHandler } from "../../source/js/account"; -export function accountRender(){ - const mypage = document.querySelector("#mypage") - mypage.innerHTML = /*html*/` +export function accountRender() { + const mypage = document.querySelector("#mypage"); + mypage.innerHTML = /*html*/ ` ` - accountHandler() + `; + + accountHandler(); } + + diff --git a/pages/user/cart.js b/pages/user/cart.js index 83f05c5..afd3a50 100644 --- a/pages/user/cart.js +++ b/pages/user/cart.js @@ -3,7 +3,7 @@ import { cartHandler, renderCartList } from "../../source/js/cart" export function cartRender(){ const app =document.querySelector("#app") const basketItem = JSON.parse(localStorage.getItem("basket")); - const isEmpty = basketItem === null || basketItem.length === 0 + const isEmpty = !basketItem?.length app.innerHTML=/*html*/`
@@ -22,7 +22,7 @@ export function cartRender(){ ${isEmpty ?/*html*/`
- cart_img + cart_img
장바구니가 비었습니다.
@@ -61,5 +61,8 @@ export function cartRender(){
` renderCartList() - cartHandler() + if(!isEmpty) { + + cartHandler() + } } diff --git a/pages/user/login.js b/pages/user/login.js index 7a271b1..87fb0fd 100644 --- a/pages/user/login.js +++ b/pages/user/login.js @@ -12,20 +12,20 @@ export function loginRender() { - + Person Icon - + Lock Icon + + + - - -
`; diff --git a/pages/user/mypage.js b/pages/user/mypage.js index 1792302..c4be1a6 100644 --- a/pages/user/mypage.js +++ b/pages/user/mypage.js @@ -6,8 +6,8 @@ export function navRender() {
-
-

마이페이지

+
+

마이페이지

@@ -32,14 +32,14 @@ export function navRender() {
-
;`; + `; } export async function mypageRender() { const mypage = document.querySelector("#mypage"); const accessToken = JSON.parse(localStorage.getItem("accessToken")); const auth = await authCheck(accessToken); - + mypage.innerHTML = /*html*/ `
@@ -110,7 +110,7 @@ export async function mypageRender() {
diff --git a/pages/user/order_completed.js b/pages/user/order_completed.js index f067c76..12f1581 100644 --- a/pages/user/order_completed.js +++ b/pages/user/order_completed.js @@ -7,7 +7,7 @@ export async function orderCompletedRender() {
- +
diff --git a/pages/user/payment.js b/pages/user/payment.js index ad0cba2..35cb93d 100644 --- a/pages/user/payment.js +++ b/pages/user/payment.js @@ -7,7 +7,7 @@ export async function paymentRender() {
-
+
diff --git a/pages/user/product_details.js b/pages/user/product_details.js index 689d02e..6a41437 100644 --- a/pages/user/product_details.js +++ b/pages/user/product_details.js @@ -7,7 +7,7 @@ export async function productDetailRender(data) { app.innerHTML = /* html */ `
-
+
@@ -19,16 +19,11 @@ export async function productDetailRender(data) {
-
- 상품이미지 -
+
-
${id.title.replace( - /\/.*/, - "" - )}
+
${id.title.replace(/\/.*/, "")}
@@ -57,9 +52,7 @@ export async function productDetailRender(data) {
-
${id.price - .toString() - .replace(/\B(?=(\d{3})+(?!\d))/g, ",")}원 +
${id.price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}원
@@ -91,9 +84,7 @@ export async function productDetailRender(data) {
-
- 상세이미지 -
+
diff --git a/pages/user/signup.js b/pages/user/signup.js index 11dd11f..911989d 100644 --- a/pages/user/signup.js +++ b/pages/user/signup.js @@ -1,8 +1,8 @@ -import "../../scss/user/signup.scss" -import { signUp } from "../../source/api/certified/signup_api" +import '../../scss/user/signup.scss'; +import { signupHandler } from '../../source/js/signup'; -export function signupRender(){ - const app = document.querySelector("#app") +export function signupRender() { + const app = document.querySelector('#app'); app.innerHTML = /* html */ ` - ` - - // 회원가입 기능 + `; - const signUpForm = document.querySelector(".signup_form") - - let profileImgBase64 = "" - - signUpForm.addEventListener("submit",e=>{ - e.preventDefault() - // 비밀번호 확인 - const pwCheck = e.target[3].value - // 전송 할 Body - const body = { - // 각 Input에 해당하는 Value - email : e.target[1].value, - password : e.target[2].value, - displayName : e.target[0].value, - profileImgBase64 - } - // 비밀번호가 일치하면 전송 - if(body.password.length>=8 && body.password === pwCheck){ - signUp("POST",body) - }else if(body.password.length<7){ - alert("비밀번호가 옳바르지 않습니다.") - }else if(body.password.length>=8 && body.password != pwCheck){ - alert("비밀번호가 일치하지 않습니다.") - } - }) - - - // 비밀번호 일치 확인 - - const pw = document.querySelector(".signup_form_pw_input") - const pwCheck = document.querySelector(".signup_form_check_input") - - - // 비밀번호 - pw.addEventListener("input",e=>{ - const err = document.querySelector(".signup_form_pw_error") - const inputBox = document.querySelector(".signup_form_pw_input:focus") - if(e.target.value.length > 7){ - err.textContent = "사용 가능한 비밀번호 입니다." - err.style.color = "#2DB400" - inputBox.style.border="1px solid #2DB400" - }else{ - err.textContent = "8자 이상의 비밀번호를 입력하세요." - err.style.color = "var(--pink-color)" - inputBox.style.border="1px solid var(--pink-color)" - } - }) - - // 비밀번호 일치 여부 - pwCheck.addEventListener("input",e=>{ - const err = document.querySelector(".signup_form_check_error") - const inputBox = document.querySelector(".signup_form_check_input:focus") - if(e.target.value===pw.value&&e.target.value){ - err.textContent = "비밀번호가 일치합니다." - err.style.color = "#2DB400" - inputBox.style.border="1px solid #2DB400" - }else if(e.target.value!=pw.value || !e.target.value){ - err.textContent = "비빌번호가 일치하지 않습니다!" - err.style.color = "var(--pink-color)" - inputBox.style.border="1px solid var(--pink-color)" - } - }) - - // 이미지 파일 업로드 - const uploadName = document.querySelector(".upload_name") - const inputImgEl = document.querySelector(".signup_form_profil_input[type='file']") - const figureEl = document.querySelector(".signup_form_profil_img") - inputImgEl.addEventListener("change", ()=>{ - const file = inputImgEl.files[0] - if(file.size <= 1000000){ - uploadName.setAttribute("value",file.name) - figureEl.style.border = "1px solid #2DB400" - const reader = new FileReader() - reader.readAsDataURL(file) - reader.addEventListener("load",e=>{ - const imgEl = document.createElement("img") - imgEl.src = e.target.result - profileImgBase64 = e.target.result - figureEl.innerHTML = "" - figureEl.append(imgEl) - }) - }else{ - figureEl.innerHTML = "" - figureEl.style.border = "1px solid var(--pink-color)" - } - }) + // 회원가입 기능 + signupHandler() } diff --git a/pages/user/wish_list.js b/pages/user/wish_list.js index 9850464..eec8e40 100644 --- a/pages/user/wish_list.js +++ b/pages/user/wish_list.js @@ -10,14 +10,13 @@ export function wishRender() {
-

찜 리스트

+

찜 리스트

- ${ - isEmpty - ? /*html*/ ` + ${isEmpty + ? /*html*/ `
- +
찜 리스트가 비었습니다.
@@ -25,14 +24,17 @@ export function wishRender() {
` - : /*html*/ ` + : /*html*/ `
` - } + }
`; - renderWishList(wishList); + if(!isEmpty) { + + renderWishList(wishList); + } } diff --git a/scss/abstracts/_variable.scss b/scss/abstracts/_variable.scss index 3052be8..7d9b669 100644 --- a/scss/abstracts/_variable.scss +++ b/scss/abstracts/_variable.scss @@ -1,5 +1,6 @@ :root { --font-color: #181818; + --more-darkgray-color: #393737; --pink-color: #FF597B; --black-color: #000000; --white-color: #FFFFFF; @@ -10,5 +11,26 @@ --font-thin: 300; --font-basic: 400; --font-bold: 700; + --nav-bg:#fff; + --border-line:#EEE; + --body-bg:#fff; + --math-color:#C8C8C8; + --admin-bg:#f5f5f5; + --product-hover:#fdfdfd; + --tag-color: #181818; + --event-badge:#363738; + --dashBoard-border: #e6e6e6; } +.dark { + --nav-bg: #292A2D; + --font-color: #fff; + --border-line:#333436; + --body-bg: #1e1f21; + --math-color:#292A2D; + --admin-bg: #363738; + --product-hover:#1e1f21; + --tag-color:#FF597B; + --event-badge:#fff; + --dashBoard-border: #363738; +} diff --git a/scss/admin/admin.scss b/scss/admin/admin.scss index 0ee0a6e..26fd7a8 100644 --- a/scss/admin/admin.scss +++ b/scss/admin/admin.scss @@ -1,15 +1,14 @@ - // header - top .top { width: 100%; height: 9rem; - background: #fff; + background: var(--nav-bg); padding: 1.8rem 2.1rem 1.6rem; display: flex; justify-content: space-between; - border-bottom: solid 1px #ededed; - + border-bottom: solid 1px var(--border-line); + color: var(--font-color); &_inner { padding-right: 2.1rem; line-height: 5.6rem; @@ -32,26 +31,37 @@ .admin_container { display: flex; padding-top: 9rem; - background: var(--more-lightgray-color); + background: var(--admin-bg); + color: var(--font-color); + + .admin_dot { + z-index: 4; + position: fixed; + top: 30%; + left: 60%; + } // menu .menu { position: fixed; width: 27rem; min-height: calc(100vh - 9rem); - background: #fff; + background: var(--nav-bg); &_list li { line-height: 4.29; padding-left: 4rem; + &.now_page { border-left: solid .4rem var(--pink-color); padding-left: 3.6rem; } + &:hover { border-left: solid .4rem var(--pink-color); padding-left: 3.6rem; } + a { display: block; } @@ -65,7 +75,7 @@ width: 100%; min-height: calc(100vh - 9rem); padding-left: 27rem; - + color: var(--font-color); .container { padding: 3.1rem 2rem; @@ -75,6 +85,7 @@ justify-content: flex-end; align-items: center; margin-right: 21px; + input { width: 24.4rem; height: 5rem; @@ -83,11 +94,12 @@ border: solid 1px #ededed; text-indent: 2.2rem; outline: 0; + &::placeholder { color: var(--gray-color); } } - + .search { width: 8rem; height: 4.2rem; @@ -96,6 +108,7 @@ text-align: center; line-height: 4.2rem; background: #636363; + a { color: var(--white-color); } @@ -107,6 +120,7 @@ display: flex; justify-content: space-between; margin-bottom: 31px; + h2 { padding: 0 24px; font-size: 25px; @@ -114,35 +128,41 @@ line-height: 48px; } } + .button_box { display: flex; - > * { + + >* { display: block; width: 13rem; height: 4rem; line-height: 4rem; + padding: 0; margin-left: 1rem; font-size: 1.5rem; text-align: center; - background: var(--white-color); - border: 1px solid var(--font-color); + background: var(--body-bg); + border: 1px solid var(--border-line); cursor: pointer; + &.delete_btn { - transition: 2s linear; + transition: .2s linear; &:hover { box-shadow: inset 0 0 5rem 0 rgba(0 0 0 / 10%); } } } + :nth-child(2) { border: none; color: var(--white-color); background: var(--pink-color); - transition: 0.2s linear; + transition: .2s linear; + &:hover { box-shadow: inset 0 0 5rem 0 rgba(0 0 0 / 10%); } } } } -} +} \ No newline at end of file diff --git a/scss/admin/admin_dashboard.scss b/scss/admin/admin_dashboard.scss index 7e725db..f90a511 100644 --- a/scss/admin/admin_dashboard.scss +++ b/scss/admin/admin_dashboard.scss @@ -5,23 +5,21 @@ } @mixin summary-item { - width: 100%; - height: 100%; - border-radius: 100%; + width: 30rem; + height: 18rem; display: flex; + flex-direction: column; align-items: center; justify-content: center; - margin: 3rem 10rem; - font-size: 1.5rem; + margin: 3rem 5rem; + font-size: 2rem; font-weight: bold; text-align: center; - background-color: var(--more-lightgray-color); } .admin_dashboard { - background-color: var(--white-color); + background-color: var(--nav-bg); padding: 1rem; - .chart_title { @include title; } @@ -31,15 +29,16 @@ height: 45rem; display: flex; flex-direction: column; - margin: 2rem; + margin: 1rem; justify-content: center; align-items: center; } /* 테이블 스타일링 */ .dashboard_table { - border: 1px solid #ddd; + border: 1px solid var(--border-line); padding: 1rem; + margin-bottom: 1rem; /* 테이블 타이틀 스타일링 */ .table_title { @@ -49,7 +48,7 @@ /* 테이블 내비게이션 바 스타일링 */ .table_navbar { display: flex; - background-color: #eee; + background-color: var(--product-hover); font-weight: bold; /* 내비게이션 요소 스타일링 */ @@ -67,7 +66,7 @@ } .navbar_date { - flex: 2; + flex: 1.5; } .navbar_user { @@ -104,7 +103,7 @@ display: flex; justify-content: center; align-items: center; - border-top: 1px solid #ddd; + border-top: 1px solid var(--border-line); height: 5rem; font-size: 1.2rem; @@ -123,7 +122,7 @@ } .content_date { - flex: 2; + flex: 1.5; } .content_user { @@ -152,7 +151,7 @@ /* 짝수 행의 색깔 변경 */ &:nth-child(even) { - background-color: #f9f9f9; + background-color: var(--product-hover); } /* 매출 합계 요소 스타일링 */ @@ -165,7 +164,7 @@ .content_footer_totalsum { font-weight: bold; padding: 1rem; - border-top: 1px solid #ddd; + border-top: 1px solid var(--border-line); display: flex; /* 페이지 합계 요소 스타일링 */ @@ -181,17 +180,31 @@ } } } - .table_pagination{ - display:flex; + + .table_pagination { + display: flex; justify-content: center; align-items: center; - button{ - width: 8rem; - height: 5rem; - margin: 2rem 8rem; - cursor: pointer; - border: 2px solid var(--pink-color); - background-color: #fff + margin: 2rem; + + .dashboard-link { + text-align: center; + width: 4rem; + padding: 1rem; + margin: 1rem; + border: 1px solid #ddd; + border-radius: 0.5rem; + text-decoration: none; + color: var(--font-color); + transition: .5s; + &:hover { + background-color: var(--pink-color); + color: #eee; + } + } + .active-link{ + background-color: var(--pink-color); + color: #eee; } } } @@ -213,19 +226,24 @@ margin: 3rem; .summary_itemcount { - color: blue; + color: #ADD8E6; @include summary-item(); } .summary_salesum { - color: green; + color: #8aeb8f; @include summary-item(); } .summary_member { - color: red; + color: var(--pink-color); @include summary-item(); } + img{ + margin: 2rem; + width:5rem; + height: 5rem; + } } } } \ No newline at end of file diff --git a/scss/admin/admin_product_list.scss b/scss/admin/admin_product_list.scss index 3d2f041..35eed29 100644 --- a/scss/admin/admin_product_list.scss +++ b/scss/admin/admin_product_list.scss @@ -7,7 +7,7 @@ .admin_list_wrap { padding: 3rem 0; - background: var(--white-color); + background: var(--nav-bg); border-radius: 0.5rem; } @@ -20,23 +20,30 @@ align-items: center; width: 100%; text-align: center; + input { margin: 0 2rem; } + :nth-child(2) { width: 7%; } + :nth-child(3) { width: 10%; } + :nth-child(4) { width: 55%; } + :nth-child(5) { width: 15%; } + :nth-child(6) { width: 15%; + } } @@ -44,23 +51,63 @@ display: block; width: 100%; } - + .product_admin_ul { li { padding: 1rem 0; transition: 0.2s linear; + &:hover { - background: #fdfdfd; + background: var(--product-hover); box-shadow: inset 0 0 1rem 0 rgba(0 0 0 / 5%); } + .product_text { text-align: left; padding: 0 2rem; + span { font-size: 1.5rem; color: var(--gray-color); } } + + .sold { + color: #03c04a; + } + + .sold_out { + color: #d21404; + } + } + } + + .pagination { + display: flex; + justify-content: center; + align-items: center; + margin: 2rem; + + .dashboard-link { + text-align: center; + width: 4rem; + padding: 1rem; + margin: 1rem; + border: 1px solid #ddd; + border-radius: 0.5rem; + text-decoration: none; + color: var(--font-color); + transition: .5s; + + &:hover { + background-color: var(--pink-color); + color: #eee; + } + } + + .active-link { + background-color: var(--pink-color); + color: #eee; } } } \ No newline at end of file diff --git a/scss/admin/admin_userlist.scss b/scss/admin/admin_userlist.scss index 747bb84..7207565 100644 --- a/scss/admin/admin_userlist.scss +++ b/scss/admin/admin_userlist.scss @@ -1,6 +1,6 @@ .admin_userlist { - background-color: var(--white-color); - border: 1px solid #ddd; + background-color: var(--nav-bg); + border: 1px solid var(--border-line); border-radius: 4px; .navbar { @@ -32,7 +32,7 @@ display: flex; justify-content: center; align-items: center; - border-top: 1px solid #ddd; + border-top: 1px solid var(--border-line); padding: 10px; .list_number { @@ -58,7 +58,7 @@ } .list:nth-child(2n) { - background-color: var(--more-lightgray-color); + background-color: var(--body-bg); } .list>div { diff --git a/scss/admin/product.scss b/scss/admin/product.scss index 7d0cd2b..d2727dd 100644 --- a/scss/admin/product.scss +++ b/scss/admin/product.scss @@ -1,4 +1,7 @@ .product_admin_wrap { + .product_left { + width: 40rem; + } img { display: block; width: 100%; @@ -30,7 +33,8 @@ } } - .tag_box { + .tag_box, + .main_tag_box { margin-bottom: 2rem; span { display: block; @@ -40,22 +44,26 @@ } &_list { display: flex; + flex-wrap: wrap; > p { line-height: 3rem; - background: var(--font-color); + background: var(--tag-color); color: var(--white-color); padding: 0 1rem; margin-right: 1rem; + margin-bottom: 1rem; } } } .product_detail { - margin-left: 5rem; + display: block; + width: 65rem; + margin-left: 10rem; font-size: 2rem; font-weight: 700; &_img { - height: 70rem; + height: 90rem; margin-top: 1rem; overflow: auto; } diff --git a/scss/admin/product_add.scss b/scss/admin/product_add.scss index 8d7097d..39a485f 100644 --- a/scss/admin/product_add.scss +++ b/scss/admin/product_add.scss @@ -1,7 +1,7 @@ .admin_wrap { display: flex; - padding: 5rem; - background: var(--white-color); + padding: 8rem; + background: var(--nav-bg); font-size: 1.8rem; line-height: 1.5; @@ -12,18 +12,48 @@ > p { margin-bottom: 1rem; font-weight: 700; + b { + color: var(--pink-color); + } } - input { + input[type="text"] { + background-color: transparent; border: 1px solid var(--gray-color); - width: 35rem; + width: 42rem; height: 4rem; padding: 0 1rem; outline: none; - &[type="file"] { - display: none; + &:focus{ + border: 1px solid var(--pink-color); + } + } + input[type="file"] { + display: none; + } + .main_tag { + display: flex; + li { + margin-right: 1.5rem; + &:last-child { + margin-right: 0; + } + span { + font-size: 1.6rem; + } } } - span { + .tag_list { + display: flex; + flex-wrap: wrap; + li { + margin-right: 1.5rem; + margin-bottom: 1rem; + &:last-child { + margin-right: 0; + } + } + } + >span { display: block; margin-top: 0.5rem; font-size: 1.5rem; @@ -40,7 +70,7 @@ .button { width: 12rem; line-height: 3.6rem; - background: var(--font-color); + background: #181818; color: var(--white-color); font-size: 1.4rem; text-align: center; @@ -64,7 +94,7 @@ .product_update_img { display: flex; width: 100%; - padding: 5rem; + padding: 5rem 0 5rem 5rem; img { display: block; @@ -73,13 +103,12 @@ .thumbnail_img { width: 40%; - margin-right: 3rem; + margin-right: 5rem; } .photo_img { width: 60%; - height: 70rem; - padding: 0 1rem; + max-height: 90rem; overflow: auto; } } diff --git a/scss/base/_preset.scss b/scss/base/_preset.scss index d24f269..fd20fe5 100644 --- a/scss/base/_preset.scss +++ b/scss/base/_preset.scss @@ -48,18 +48,35 @@ input { } } +body:not(.dark) { + .light_logo { + display: block; + } + .dark_logo { + display: none; + } +} - - +body.dark { + .light_logo { + display: none; + } + .dark_logo { + display: block; + } + .filter_icon{ + filter: invert(99%) sepia(37%) saturate(0%) hue-rotate(355deg) brightness(103%) contrast(100%); + } +} #app { min-height: 39.44rem; - padding-top: 17rem + padding-top: 18.1rem } header { position: fixed; - background: #fff; + background: var(--nav-bg); width: 100%; z-index: 2; top: 0; @@ -78,8 +95,11 @@ header { &_right { >div { display: flex; - - p:first-child::after { + color: var(--font-color); + .login_name a:hover { + border-bottom: 1px solid var(--font-color); + } + >:first-child::after { display: inline-block; content: ""; border-left: 1px solid var(--gray-color); @@ -101,7 +121,6 @@ header { .header { padding: 10px 0; - .inner { display: flex; justify-content: space-between; @@ -130,12 +149,11 @@ header { border: none; outline: none; padding: 1.2rem; - background: transparent; + background: var(--nav-bg); font-size: 1.4rem; - + border: 2px solid var(--pink-color); + border: 2px solid var(--pink-color); &:focus { - border: 2px solid var(--pink-color); - background: #fff; } } @@ -171,6 +189,7 @@ header { border-radius: 50%; text-align: center; font-size: 1.2rem; + z-index: 1; } } } @@ -178,8 +197,8 @@ header { } nav { - border-top: 1px solid var(--lightgray-color); - border-bottom: 1px solid var(--lightgray-color); + border-top: 1px solid var(--border-line); + border-bottom: 1px solid var(--border-line); .nav { display: flex; @@ -213,10 +232,14 @@ nav { } } +#app{ + background-color: var(--body-bg); + color: var(--font-color); +} // footer footer { - border-top: 1px solid var(--lightgray-color); - + border-top: 1px solid var(--border-line); + background-color: var(--nav-bg); .footer_container { padding: 4rem 0 5rem; line-height: 2.4rem; @@ -324,11 +347,11 @@ footer { .inner { padding: 2rem 0; - border-top: 1px solid var(--lightgray-color); - } + border-top: 1px solid var(--border-line); + } } } ._hidden { - display: none; + display: none !important; } \ No newline at end of file diff --git a/scss/base/event.scss b/scss/base/event.scss index 7f0ed7b..9d9f497 100644 --- a/scss/base/event.scss +++ b/scss/base/event.scss @@ -2,15 +2,14 @@ display: none; width: 100px; position: fixed; - right: 5rem; + right: 1rem; bottom: 5rem; z-index: 2; .swiper-container{ position: relative; - width: 100%; height: 200px; overflow: hidden; - border: 1px solid #d6dae5; + border: 1px solid var(--border-line); margin-bottom: 10px; background-color: #fff; .team{ @@ -55,6 +54,7 @@ bottom: 0 !important; .swiper-scrollbar-drag{ background-color: #FF597B !important; + --swiper-scrollbar-size: 20%; } } } @@ -62,23 +62,51 @@ width: 68px; display: flex; flex-direction: column; - border: 1px solid #d6dae5; + border: 1px solid var(--border-line); margin: 0 auto; - .resently{ + .mode{ + cursor: pointer; + outline: none; + border: none; width: 100%; - height: 68px; + height: 6.2rem; + background-color: var(--admin-bg); display: flex; flex-direction: column; - font-size: 12px; - letter-spacing: -2px; - text-align: center; - display: flex; - background-color: #fff; - flex-direction: column; justify-content: center; align-items: center; - svg{ - margin-bottom: 8px; + &_name{ + color: var(--event-badge); + font-weight: 700; + margin-bottom: 0.8rem; + } + .toggleSwitch { + width: 5rem; + height: 2rem; + display: block; + position: relative; + border-radius: 30px; + background-color: #363738; + box-shadow: 0 0 16px 3px rgba(0 0 0 / 15%); + cursor: pointer; + .toggleButton { + width: 1.5rem; + height: 1.5rem; + position: absolute; + top: 50%; + left: 4px; + transform: translateY(-50%); + border-radius: 50%; + background: var(--white-color); + transition: all 0.2s ease-in; + } + } + #toggle:checked ~ .toggleSwitch { + background: var(--white-color); + .toggleButton { + left: calc(100% - 2rem); + background: #363738; + } } } .scroll_top{ @@ -90,6 +118,9 @@ font-size: 13px; font-weight: 700; color: #fff; + padding: 0; + border: none; + outline: none; } } } \ No newline at end of file diff --git a/scss/base/loading.scss b/scss/base/loading.scss index a631638..fd60e2f 100644 --- a/scss/base/loading.scss +++ b/scss/base/loading.scss @@ -1,102 +1,82 @@ .dot-wrap{ width: 7rem; margin: 20rem auto; - z-index: 4; - position: fixed; - top: 30%; - left: 50%; -} - -.dot-spinner { - --uib-size: 7rem; - --uib-speed: .9s; - --uib-color: black; - - position: relative; - display: flex; - align-items: center; - justify-content: center; - height: var(--uib-size); - width: var(--uib-size); -} - -.dot-spinner__dot { - position: absolute; - top: 0; - left: 0; - display: flex; - align-items: center; - justify-content: flex-start; - height: 100%; - width: 100%; -} - -.dot-spinner__dot::before { - content: ''; - height: 20%; - width: 20%; - border-radius: 50%; - background-color: var(--uib-color); - transform: scale(0); - opacity: 0.5; - animation: pulse calc(var(--uib-speed) * 1.111) ease-in-out infinite; -} - -.dot-spinner__dot:nth-child(2) { - transform: rotate(45deg); -} - -.dot-spinner__dot:nth-child(2)::before { - animation-delay: calc(var(--uib-speed) * -0.875); -} - -.dot-spinner__dot:nth-child(3) { - transform: rotate(90deg); -} - -.dot-spinner__dot:nth-child(3)::before { - animation-delay: calc(var(--uib-speed) * -0.75); -} - -.dot-spinner__dot:nth-child(4) { - transform: rotate(135deg); -} - -.dot-spinner__dot:nth-child(4)::before { - animation-delay: calc(var(--uib-speed) * -0.625); -} - -.dot-spinner__dot:nth-child(5) { - transform: rotate(180deg); -} - -.dot-spinner__dot:nth-child(5)::before { - animation-delay: calc(var(--uib-speed) * -0.5); -} - -.dot-spinner__dot:nth-child(6) { - transform: rotate(225deg); -} - -.dot-spinner__dot:nth-child(6)::before { - animation-delay: calc(var(--uib-speed) * -0.375); -} - -.dot-spinner__dot:nth-child(7) { - transform: rotate(270deg); -} - -.dot-spinner__dot:nth-child(7)::before { - animation-delay: calc(var(--uib-speed) * -0.25); -} - -.dot-spinner__dot:nth-child(8) { - transform: rotate(315deg); + .dot-spinner { + --uib-size: 7rem; + --uib-speed: .9s; + --uib-color: var(--pink-color); + + position: relative; + display: flex; + align-items: center; + justify-content: center; + height: var(--uib-size); + width: var(--uib-size); + .dot-spinner__dot{ + position: absolute; + top: 0; + left: 0; + display: flex; + align-items: center; + justify-content: flex-start; + height: 100%; + width: 100%; + &::before { + content: ''; + height: 20%; + width: 20%; + border-radius: 50%; + background-color: var(--uib-color); + transform: scale(0); + opacity: 0.5; + animation: pulse calc(var(--uib-speed) * 1.111) ease-in-out infinite; + } + &:nth-child(2) { + transform: rotate(45deg); + &::before { + animation-delay: calc(var(--uib-speed) * -0.875); + } + } + &:nth-child(3) { + transform: rotate(90deg); + &::before { + animation-delay: calc(var(--uib-speed) * -0.75); + } + } + &:nth-child(4) { + transform: rotate(135deg); + &::before { + animation-delay: calc(var(--uib-speed) * -0.625); + } + } + &:nth-child(5) { + transform: rotate(180deg); + &::before { + animation-delay: calc(var(--uib-speed) * -0.5); + } + } + &:nth-child(6) { + transform: rotate(225deg); + &::before { + animation-delay: calc(var(--uib-speed) * -0.375); + } + } + &:nth-child(7) { + transform: rotate(270deg); + &::before { + animation-delay: calc(var(--uib-speed) * -0.25); + } + } + &:nth-child(8) { + transform: rotate(315deg); + &::before { + animation-delay: calc(var(--uib-speed) * -0.125); + } + } + } + } } -.dot-spinner__dot:nth-child(8)::before { - animation-delay: calc(var(--uib-speed) * -0.125); -} @keyframes pulse { 0%, diff --git a/scss/notfound/404.scss b/scss/notfound/404.scss new file mode 100644 index 0000000..2375ab2 --- /dev/null +++ b/scss/notfound/404.scss @@ -0,0 +1,19 @@ +.notfound{ + display: flex; + flex-direction: column; + align-items: center; + height: 50rem; + .title{ + font-size: 4rem; + font-weight: bold; + margin-top: 5rem; + } + .info{ + font-size: 3rem; + margin-top: 2rem; + } + .clock{ + margin-top: 2rem; + font-size: 2.5rem; + } +} \ No newline at end of file diff --git a/scss/style.scss b/scss/style.scss index 1f0c2f9..c328344 100644 --- a/scss/style.scss +++ b/scss/style.scss @@ -24,4 +24,5 @@ @import "../scss/admin/admin_userlist.scss"; @import "../scss/admin/product.scss"; @import "../scss/admin/admin_update.scss"; -@import "../scss/admin/admin_dashboard.scss"; \ No newline at end of file +@import "../scss/admin/admin_dashboard.scss"; +@import "../scss/notfound/404.scss"; \ No newline at end of file diff --git a/scss/user/account.scss b/scss/user/account.scss index 77ab76e..8e3cbe8 100644 --- a/scss/user/account.scss +++ b/scss/user/account.scss @@ -1,4 +1,3 @@ - .dimmed_layer { position: fixed; top: 0; @@ -6,6 +5,7 @@ right: 0; bottom: 0; background-color: rgba(#000, 0.8); + z-index: 3; } .pop_up { @@ -15,10 +15,11 @@ transform: translate(-50%, -50%); background-color: #ffffff; box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3); + z-index: 3; /* 임시 지정 */ - width: 50rem; - height: 60rem; + width: 55rem; + height: 70rem; &_wrap { display: flex; @@ -28,14 +29,14 @@ flex-direction: column; padding: 2rem; font-size: 1.8rem; - width: 40rem; + // width: 48rem; margin: 2rem auto; .close_btn { border: none; position: absolute; top: 0.5rem; - left: 39rem; + right: 3rem; background-color: transparent; font-size: 3rem; cursor: pointer; @@ -43,7 +44,7 @@ .title { margin-top: 2rem; - margin-bottom: 8rem; + margin-bottom: 3rem; font-size: 3rem; text-align: center; font-weight: var(--font-bold); @@ -51,100 +52,188 @@ .bank_code_wrap { display: flex; - justify-content: center; + flex-wrap: wrap; align-items: center; margin-bottom: 3rem; - width: 100%; + width: 42rem; + margin: 0 auto; .bank_code { - text-align: center; + display: flex; + width: 12rem; + height: 5rem; margin-right: 2rem; - } - - .bank_code_select { - width: 23rem; - text-align: center; - padding: 0.8rem 0; + border: 0.1rem solid var(--gray-color); + border-radius: 0.4rem; + margin-bottom: 1rem; + + input { + display: none; + &:checked + label { + border: 1px solid var(--pink-color); + border-radius: 0.4rem; + } + } + label { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + + div { + width: 10rem; + + img { + display: block; + object-fit: cover; + width: 100%; + &.isDisable { + filter: grayscale(1); + } + } + } + } } } - .bank_account_wrap { - display: flex; - justify-content: center; - align-items: center; - width: 100%; - margin-bottom: 3rem; - flex-wrap: wrap; - .bank_account { - text-align: center; - margin-right: 2rem; + .card_template { + width: 42rem; + min-height: 25.3rem; + transition: opacity 0.3s; + border-radius: 0.4rem; + color: var(--white-color); + opacity: 1; + + &:empty { + background-image: none; + opacity: 0; } - input { - padding: 0.8rem 3rem; - } - } + &[data-bank_name="카카오뱅크"] { + color: var(--font-color); + input { + color: var(--font-color) !important; + border-bottom: 2px solid var(--font-color) !important; - .phone_number_wrap { - display: flex; - justify-content: center; - align-items: center; - width: 100%; - margin-bottom: 3rem; - flex-wrap: wrap; - .phone_number { - text-align: center; - margin-right: 2rem; + &::placeholder { + color: var(--more-darkgray-color) !important; + } + } } - input { - padding: 0.8rem 3rem; - - } + .bank_account_wrap { + display: flex; + padding: 0 2rem; + width: 100%; + height: 25.3rem; + flex-wrap: wrap; - .validate_text { - margin-left: 2.5rem; - text-align: end; - width: 23rem; - } - .red { - color: var(--pink-color); - } + .bank_wrap { + display: flex; + align-items: center; + width: 100%; + + img { + width: 5rem; + } + span { + text-align: center; + } + } - .green { - color: #2DB400; + .input_wrap { + .bank_account { + padding-bottom: 1rem; + } + input.bank_account_input { + background-color: transparent; + border: none; + color: var(--white-color); + border-bottom: 2px solid var(--white-color); + padding: 0 1rem; + box-sizing: content-box; + margin-right: 1rem; + height: 3.5rem; + outline: none; + min-width: calc(2rem * 2); + &:invalid { + border-bottom: 2px solid var(--pink-color); + & ~ .validate_account_wrap { + &::after { + content: "유효한 자리수가 아닙니다."; + color: red; + } + } + } + &::placeholder { + color: var(--lightgray-color); + } + } + } } + .phone_number_wrap { + margin-bottom: 3rem; + .phone_number { + padding-top: 1rem; + padding-bottom: 1rem; + } + input.phone_number_input { + background-color: transparent; + border: none; + outline: none; + opacity: 0.9; + color: var(--white-color); + border-bottom: 2px solid var(--white-color); + width: 18rem; + padding: 0.8rem 3rem; - - } + &::placeholder { + color: var(--lightgray-color); + } + } - .signature_wrap { - display: flex; - justify-content: center; - align-items: center; - width: 100%; - margin-bottom: 3rem; + .validate_text { + margin-left: 2.5rem; + text-align: end; + width: 23rem; + } + .red { + color: var(--pink-color); + } - .signature { - text-align: center; - margin-right: 3.5rem; + .green { + color: #2db400; + } } - input { - padding: 0.8rem 3rem; - } - - .validate_text { - padding-top: 2rem; - } + .signature_wrap { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + margin-bottom: 3rem; - .red { - color: var(--pink-color); - } + .signature { + text-align: center; + margin-right: 3.5rem; + } + + input { + padding: 0.8rem 3rem; + } + + .validate_text { + padding-top: 2rem; + } + + .red { + color: var(--pink-color); + } - .green { - color: #2DB400; + .green { + color: #2db400; + } } } @@ -213,9 +302,26 @@ padding: 4rem 3rem; margin: 0 auto 2rem; + input[type="checkbox"] { + width: 1.5rem; + height: 1.5rem; + appearance: none; + border-radius: 50%; + border: 0.1rem solid #c3b7b7; + background-color: var(--white-color); + margin-right: 10px; + } + + input[type="checkbox"]:checked { + width: 1.5rem; + height: 1.5rem; + border-radius: 50%; + background-color: var(--pink-color); + } + .bank_name { font-size: 1.6rem; - margin-bottom: 3rem; + margin-bottom: 2rem; } .account_holder { @@ -234,8 +340,8 @@ margin-left: 82.9rem; margin-top: 2rem; - .account_change_btn_wrap { - .account_change_btn { + .account_terminate_btn_wrap { + .account_terminate_btn { border: 0.2px solid var(--font-color); background-color: transparent; color: var(--font-color); @@ -280,20 +386,62 @@ .account { .modal { + display: flex; + justify-content: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #ffffff; box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3); - + z-index: 3; /* 임시 지정 */ width: 50rem; height: 40rem; - - input { - margin: 2rem; - padding: 0.8rem 3rem; + .signature_wrap { + .close_btn { + position: absolute; + border: 1px solid transparent; + background-color: transparent; + font-size: 1.5rem; + right: 3rem; + top: 2rem; + } + .warning_text { + font-weight: var(--font-bold); + font-size: 1.8rem; + text-align: center; + } + .title { + margin-top: 2rem; + margin-bottom: 8rem; + font-size: 3rem; + text-align: center; + font-weight: var(--font-bold); + } + input { + margin: 2rem; + padding: 0.8rem 3rem; + } + .btn_wrap { + text-align: center; + .account_signature_btn { + border: 0.2px solid var(--font-color); + background-color: transparent; + color: var(--font-color); + font-weight: var(--font-basic); + font-size: 1.8rem; + padding: 1rem 2rem; + width: 28rem; + height: 6rem; + cursor: pointer; + &:hover { + border: 0.2rem solid var(--pink-color); + color: var(--pink-color); + font-weight: var(--font-bold); + } + } + } } } -} \ No newline at end of file +} diff --git a/scss/user/cart.scss b/scss/user/cart.scss index 8092942..6b7490d 100644 --- a/scss/user/cart.scss +++ b/scss/user/cart.scss @@ -2,8 +2,11 @@ .cart_wrap { width: 99rem; margin: 0 auto; + padding: 0 0 10rem; + .cart_header { margin-top: 4rem; + .header { font-size: 3.2rem; font-weight: var(--font-bold); @@ -14,6 +17,7 @@ position: relative; font-size: 2rem; width: 50rem; + .card_list { list-style: none; padding-left: 0; @@ -23,12 +27,15 @@ bottom: 6rem; left: 60.5rem; font-weight: var(--font-bold); + .item { width: 33.3%; } + .item:not(:nth-child(1)) { color: var(--gray-color); } + .item::after { content: ""; display: block; @@ -42,6 +49,7 @@ border-left: 0.7rem solid var(--gray-color); border-right: 0.7rem solid transparent; } + .item:not(:nth-child(1), :nth-child(2))::before { content: ""; display: block; @@ -58,6 +66,7 @@ } } } + .cart_none { display: flex; text-align: center; @@ -65,28 +74,30 @@ align-items: center; padding-top: 10rem; padding-bottom: 20rem; + .cart_icon { - + img { - width: 12rem; + width: 12rem; } } + .empty_text { padding: 2rem 4rem; - color: var(--darkgray-color); + color: var(--font-color); font-size: 2.4rem; } .cart_btn { - background-color: var(--font-color); + background-color: var(--border-line); width: 26rem; padding: 1.5rem 1.5rem; margin-top: 2rem; margin-bottom: 2rem; + a { - text-align: center; - color: var(--white-color); + color: var(--font-color); } } } @@ -97,6 +108,7 @@ border-top: 0.2rem solid var(--font-color); border-bottom: 0.1rem solid var(--font-color); padding: 1.8rem 0; + .info_wrap { display: flex; font-size: 1.6rem; @@ -126,20 +138,23 @@ .cart_list { list-style: none; padding-left: 0; - height: 50rem; + max-height: 50rem; overflow: auto; + padding: 2rem 0; - padding-top: 2rem; &_item { padding: 2rem 0; + .cart_card { display: flex; align-items: center; text-align: center; + .img_wrap { width: 25%; height: 12rem; + img { height: 12rem; } @@ -149,6 +164,7 @@ width: 25%; padding: 1rem; word-break: keep-all; + .name { font-size: 1.6rem; } @@ -156,6 +172,7 @@ .product_total_wrap { width: 25%; + .decrease_btn { font-size: 1.6rem; border: 1px solid var(--font-color); @@ -181,6 +198,7 @@ .price_wrap { width: 25%; + .price { font-size: 1.6rem; } @@ -191,9 +209,8 @@ } .cart_total_price_area { - background-color: var(--more-lightgray-color); - height: 21rem; - + background-color: var(--border-line); + padding: 2rem 0; .area_wrap { display: flex; @@ -201,6 +218,7 @@ align-items: center; text-align: center; font-size: 2rem; + .cart_order_price { display: flex; justify-content: space-evenly; @@ -210,18 +228,13 @@ .order_price_text { font-weight: var(--font-thin); - margin-top: 1rem; position: relative; &::after { - display: flex; - justify-content: center; - align-items: center; - text-align: center; position: absolute; content: "+"; - background-color: var(--gray-color); - text-align: center; + background-color: var(--math-color); + line-height: 3.5rem; width: 4rem; height: 4rem; border-radius: 50%; @@ -246,32 +259,28 @@ .delivery_fee_text { font-weight: var(--font-thin); - margin-top: 1rem; - } - - .fee { - font-weight: var(--font-bold); position: relative; &::after { - display: flex; - justify-content: center; - align-items: center; position: absolute; - text-align: center; content: "="; - background-color: var(--gray-color); + background-color: var(--math-color); text-align: center; width: 4rem; height: 4rem; border-radius: 50%; + line-height: 3.5rem; left: 13rem; - bottom: 1.1rem; + top: 2.3rem; font-size: 3rem; font-weight: var(--font-basic); color: var(--white-color); } } + + .fee { + font-weight: var(--font-bold); + } } .cart_total_price { @@ -283,7 +292,6 @@ .total_price_text { font-weight: var(--font-thin); - margin-top: 1rem; } .price { @@ -300,6 +308,7 @@ justify-content: end; margin-top: 2rem; margin-left: 82.9rem; + .cancel_btn_wrap { width: 20rem; margin-right: 2rem; @@ -321,6 +330,7 @@ } } } + .purchase_btn_wrap { .purchase_btn { @@ -337,15 +347,14 @@ padding: 1rem 2rem; width: 20rem; height: 6rem; - + transition: 0.2s; &:hover { border: 0.2rem solid var(--pink-color); background-color: transparent; color: var(--pink-color); - transition-delay: 1; } } } } } -} +} \ No newline at end of file diff --git a/scss/user/login.scss b/scss/user/login.scss index ac7f2da..f9748fb 100644 --- a/scss/user/login.scss +++ b/scss/user/login.scss @@ -1,13 +1,4 @@ -// 버튼 공통 셋팅 -.btn { - background-color: var(--white-color); - font-size: 1.8rem; - font-weight: var(--font-bold); - width: 41rem; - height: 5.5rem; - border: none; - cursor: pointer; -} + a { text-decoration: none; @@ -18,11 +9,10 @@ a { .login_section { &_inner { position: relative; - max-width: 44rem; + max-width: 41rem; margin: 0 auto; text-align: center; - margin-top: 9rem; - margin-bottom: 6rem; + padding: 10rem 0; // 로그인 제목 .login_section_title { @@ -45,7 +35,7 @@ a { width: 41rem; height: 5.5rem; padding: 0 1rem; - + background-color: transparent; &::placeholder { color: var(--gray-color) } @@ -68,8 +58,8 @@ a { // 아이디 이미지 .icon_person { position: absolute; - right: 2.6rem; - top: 7.8rem; + right: 1.6rem; + top: 17.8rem; } // 비밀번호 입력 @@ -80,8 +70,8 @@ a { // 비밀번호 이미지 .icon_lock { position: absolute; - right: 2.6rem; - top: 15.2rem; + right: 1.6rem; + top: 25.2rem; } // 버튼 @@ -90,13 +80,21 @@ a { background-color: var(--pink-color); margin-bottom: 1.8rem; } + // 회원가입 버튼 + .login_section_signup { + background-color: var(--border-line); + border: 1px solid var(--black-color); + line-height: 5.5rem; + } } - - // 회원가입 버튼 - .login_section_signup { - margin: 0 auto; - border: 1px solid var(--black-color); - line-height: 5.5rem; - } + } + // 버튼 공통 셋팅 + .btn { + font-size: 1.8rem; + font-weight: var(--font-bold); + width: 41rem; + height: 5.5rem; + border: none; + cursor: pointer; } } \ No newline at end of file diff --git a/scss/user/main.scss b/scss/user/main.scss index cc077ce..869a9f7 100644 --- a/scss/user/main.scss +++ b/scss/user/main.scss @@ -18,6 +18,12 @@ } } + .swiper { + .swiper-button-next, .swiper-button-prev { + color: var(--pink-color); + } + } + .swiper-wrqpper { li:first-child { .swiper_text { @@ -32,7 +38,7 @@ top: 15%; left: 13.5%; &.text_black { - color: var(--font-color); + color: var(--black-color); } p { line-height: 6.2rem; @@ -54,7 +60,6 @@ display: flex; justify-content: space-between; flex-wrap: wrap; - .list_main { width: 33%; overflow: hidden; @@ -69,6 +74,7 @@ li { width: 32%; + margin-bottom: 0; &:nth-child(4), &:nth-child(5), &:nth-child(6) { diff --git a/scss/user/my_page.scss b/scss/user/my_page.scss index c0c0a8d..15be8dd 100644 --- a/scss/user/my_page.scss +++ b/scss/user/my_page.scss @@ -1,16 +1,20 @@ .mypage { padding: 10rem 0; - .inner { - // display: flex; + >.inner { + display: flex; + flex-flow: row nowrap; + position: relative; .mypage_nav { - position: fixed; - width: 30rem; + position: sticky; + top: 28.1rem; + min-width: 30rem; + height: 42rem; - .header { + .mypage_title { width: 23rem; - &_title { + h2 { font-size: 3.2rem; font-weight: var(--font-bold); } @@ -80,13 +84,10 @@ } .mypage_main { - padding-left: 30rem; width: 128rem; .info_user { - - height: 16rem; - background-color: var(--more-lightgray-color); + background-color: var(--border-line); .user_name { padding:5rem; @@ -200,7 +201,7 @@ align-items: center; margin-top: 0; padding: 2rem 0; - background-color: var(--lightgray-color); + background-color: var(--border-line); font-size: 1.4rem; color: var(--font-color); diff --git a/scss/user/order_completed.scss b/scss/user/order_completed.scss index 7219df7..a5d469c 100644 --- a/scss/user/order_completed.scss +++ b/scss/user/order_completed.scss @@ -15,6 +15,13 @@ margin-bottom: 4rem; } + .dot_loading { + z-index: 4; + position: fixed; + top: 15rem; + left: 50%; + } + .order_completed_inner { display: flex; flex-direction: column; diff --git a/scss/user/password_check.scss b/scss/user/password_check.scss index 77c3aee..2d5eec3 100644 --- a/scss/user/password_check.scss +++ b/scss/user/password_check.scss @@ -9,7 +9,7 @@ width: 30%; h1 { - font-size: 3rem; + font-size: 3.2rem; //justify-content: center; margin-bottom: 4rem; } @@ -35,17 +35,21 @@ } .pw_check_section_input { - justify-content: center; align-self: center; border: 0.1rem solid lightgray; width: 100%; height: 4rem; margin-bottom: 4rem; + background: transparent; + &:focus{ + border: 1px solid var(--pink-color); + outline: none; + } } .pw_check_section_btn { color: white; - border: 0.1rem solid lightgray; + border: none; cursor: pointer; justify-content: center; background-color: #FF597B; diff --git a/scss/user/payment.scss b/scss/user/payment.scss index 5aa78cd..6852991 100644 --- a/scss/user/payment.scss +++ b/scss/user/payment.scss @@ -23,251 +23,251 @@ margin-bottom: 1rem; } -#wrap { - .wrap_container { + +.wrap_container { + display: flex; + margin-top: 3rem; + justify-content: center; + + .payment { display: flex; - margin: 3rem 0; - justify-content: center; - .payment { - display: flex; + img { + display: block; + width: 100%; + } - img { - display: block; - width: 100%; - } + h2 { + width: 100%; + line-height: 4.6rem; + font-size: 3.2rem; + font-weight: 700; + margin-bottom: 4rem; + } - h2 { - width: 100%; - line-height: 4.6rem; - font-size: 3.2rem; - font-weight: 700; - margin-bottom: 4rem; - } + .payment_inner { + display: flex; + max-width: 134rem; + margin: 0 auto; + padding: 0 3rem; - .payment_inner { + // 주문정보 + .inner_orderinfo { display: flex; - max-width: 134rem; - margin: 0 auto; - padding: 0 3rem; + flex-direction: column; + width: 70rem; - // 주문정보 - .inner_orderinfo { - display: flex; - flex-direction: column; - width: 70rem; + // 주문상품 상단 바 + .orderinfo_title_navbar { + @include title; + } - // 주문상품 상단 바 - .orderinfo_title_navbar { - @include title; - } + .orderinfo_navbar { + @include window_default; + font-size: 1.8rem; + border-bottom: 1px solid var(--black-color); + } - .orderinfo_navbar { - @include window_default; - font-size: 1.8rem; - border-bottom: 1px solid var(--black-color); - } + .orderinfo_navbar>div { + @include window_default; + width: 15rem; + padding: 1.5rem 0; + } - .orderinfo_navbar>div { - @include window_default; - width: 15rem; - padding: 1.5rem 0; - } + // 주문상품 리스트 + .orderinfo_list { + display: flex; + justify-content: center; + margin-top: 2rem; - // 주문상품 리스트 - .orderinfo_list { + .list_image { display: flex; - justify-content: center; - margin-top: 2rem; - .list_image { - display: flex; - - img { - width: 9rem; - height: 9rem; - } + img { + width: 9rem; + height: 9rem; } } + } - .orderinfo_list>div { - @include window_default; - width: 15rem; - margin: 0 auto; - } + .orderinfo_list>div { + @include window_default; + width: 15rem; + margin: 0 auto; + } - .orderinfo_title_orderer { - @include title; - } + .orderinfo_title_orderer { + @include title; + } - // 주문자 정보 - .orderinfo_orderer { - display: flex; - justify-content: center; - flex-direction: column; - padding: 1.5rem 0; - padding-bottom: 5rem; + // 주문자 정보 + .orderinfo_orderer { + display: flex; + justify-content: center; + flex-direction: column; + padding: 1.5rem 0; + padding-bottom: 5rem; - .orderinfo_name, - .orderinfo_email, - .orderinfo_account { - @include order_info_style; - } + .orderinfo_name, + .orderinfo_email, + .orderinfo_account { + @include order_info_style; + } - .orderinfo_name { - .orderinfo_name_text { - margin-left: 7rem; - font-size: 1.6rem; - } + .orderinfo_name { + .orderinfo_name_text { + margin-left: 7rem; + font-size: 1.6rem; } + } - .orderinfo_email { - .orderinfo_email_text { - margin-left: 5rem; - font-size: 1.6rem; - } + .orderinfo_email { + .orderinfo_email_text { + margin-left: 5rem; + font-size: 1.6rem; } + } - .orderinfo_account { - .account_text { - display: flex; - margin-right: 1rem; - align-items: center; - width: 9rem; - } + .orderinfo_account { + .account_text { + display: flex; + margin-right: 1rem; + align-items: center; + width: 9rem; + } - .account_select { - display: flex; - width: 30em; - height: 4rem; - } + .account_select { + display: flex; + width: 30em; + height: 4rem; + } - .account_search { - @include window_default; - height: 4rem; - width: 12rem; - margin: 0 2rem; - background-color: var(--pink-color); - color: var(--white-color); - border: transparent; - } + .account_search { + @include window_default; + height: 4rem; + width: 12rem; + margin: 0 2rem; + background-color: var(--pink-color); + color: var(--white-color); + border: transparent; } } + } - .user_account_info { + .user_account_info { + display: flex; + flex-direction: column; + border: 0.2rem solid var(--lightgray-color); + width: 50rem; + height: 30rem; + padding: 2rem 3rem; + margin: 2rem 0 0 5rem; + + .bank { display: flex; flex-direction: column; - border: 0.2rem solid var(--lightgray-color); - width: 50rem; - height: 30rem; - padding: 2rem 3rem; - margin: 2rem 0 0 5rem; - .bank { + .bank_name { display: flex; - flex-direction: column; - - .bank_name { - display: flex; - font-size: 2rem; - margin-bottom: 3rem; - justify-content: space-between; - } + font-size: 2rem; + margin-bottom: 3rem; + justify-content: space-between; + } - .account_number, - .bank_balance { - display: flex; - margin-bottom: 2rem; - font-size: 1.6rem; - justify-content: space-between; - } + .account_number, + .bank_balance { + display: flex; + margin-bottom: 2rem; + font-size: 1.6rem; + justify-content: space-between; } + } + + .bank_card_wrap { + height: 15rem; + padding: 2rem; + + .bank_card { + height: 13rem; + display: flex; + justify-content: center; - .bank_card_wrap { - height: 15rem; - padding: 2rem; - - .bank_card { - height: 13rem; - display: flex; - justify-content: center; - img{ - width: 15rem; - height: 10rem; - } + img { + width: 15rem; + height: 10rem; } } } } } } + } - // 결제정보요약 - .inner_summary { - position: sticky; - top: 18rem; + // 결제정보요약 + .inner_summary { + position: sticky; + top: 18rem; + display: flex; + flex-direction: column; + width: 35rem; + height: 40rem; + background-color: var(--border-line); + padding: 3rem; + margin: 7rem 0 0 12rem; + + .summary_info { display: flex; flex-direction: column; - width: 35rem; - height: 40rem; - background-color: var(--more-lightgray-color); - padding: 3rem; - margin: 7rem 0 0 12rem; + justify-content: space-between; + height: 20rem; - .summary_info { - display: flex; - flex-direction: column; + .info_totalprice { justify-content: space-between; - height: 20rem; - - .info_totalprice { - justify-content: space-between; - } + } - .info_totaldiscount { - justify-content: space-between; - border-bottom: 1px solid var(--black-color); - padding-bottom: 3rem; + .info_totaldiscount { + justify-content: space-between; + border-bottom: 1px solid var(--black-color); + padding-bottom: 3rem; - .info_totaldiscount_text { - color: red; - } + .info_totaldiscount_text { + color: red; } + } - .info_totalpayment { - justify-content: space-between; + .info_totalpayment { + justify-content: space-between; - .info_totalpayment_text { - font-weight: var(--font-bold); + .info_totalpayment_text { + font-weight: var(--font-bold); - } } } + } - .summary_info>div { - display: flex; - height: 3rem; - } + .summary_info>div { + display: flex; + height: 3rem; + } - .summary_btn { - display: flex; - flex-direction: column; + .summary_btn { + display: flex; + flex-direction: column; - .btn_payment { - background-color: var(--pink-color); - color: var(--white-color); - border: transparent; - height: 4rem; - margin: 2rem 0; - cursor: pointer; - } + .btn_payment { + background-color: var(--pink-color); + color: var(--white-color); + border: transparent; + height: 4rem; + margin: 2rem 0; + cursor: pointer; + } - .btn_cancel { - height: 4rem; - cursor: pointer; - border: 1px solid var(--black-color); - background-color: #fff; - } + .btn_cancel { + height: 4rem; + cursor: pointer; + border: 1px solid var(--black-color); + background-color: var(--body-bg); } } } diff --git a/scss/user/product_details.scss b/scss/user/product_details.scss index 073a0db..eb74075 100644 --- a/scss/user/product_details.scss +++ b/scss/user/product_details.scss @@ -30,366 +30,355 @@ .material-symbols-outlined { font-weight: var(---font-bold); - margin-right: 0.625rem; font-size: 1.8rem; } -#wrap { - .wrap_container { - display: flex; - margin: 3rem 0; +.product_detail { + display: flex; - .product_detail { - display: flex; + img { + display: block; + width: 100%; + } + + .product_detail_inner { + display: flex; + flex-direction: column; + max-width: 134rem; + margin: 0 auto; + padding: 0 3rem; + font-weight: 1.5rem; + + // 제품 태그 + .product_tag { + height: 3.125rem; + font-size: 1.25rem; + + @include productDefault; + padding: 0 7rem; + + .bigtag { + text-decoration: none; + font-size: 1.5rem; + color: var(--font-color); + color: #bfbfbf; + cursor: pointer; + } - img { - display: block; - width: 100%; + .midtag { + text-decoration: none; + font-size: 1.5rem; + color: #bfbfbf; + cursor: pointer; } - h2 { - width: 100%; - line-height: 4.6rem; - font-size: 3.2rem; - font-weight: 700; - margin-bottom: 4rem; + .smalltag { + text-decoration: none; + font-size: 1.5rem; + color: var(--font-color); + cursor: pointer; } + } + + .product_content { + display: flex; + height: inherit; - .product_detail_inner { + // 제품 이미지 + .container_content_productImg { display: flex; - flex-direction: column; - max-width: 134rem; - margin: 0 auto; - padding: 0 3rem; - font-weight: 1.5rem; + width: 60rem; + + .productImg { + margin: auto; + height: 60rem; + } + } - // 제품 태그 - .product_tag { - height: 3.125rem; - font-size: 1.25rem; + .product_info { + width: 60rem; - @include productDefault; - padding: 0 7rem; - - .bigtag { - text-decoration: none; - font-size: 1.5rem; - color: var(--font-color); - color: #bfbfbf; - cursor: pointer; - } + .dot_loading { + z-index: 4; + position: fixed; + top: 15rem; + left: 50%; + } + + .title { + display: flex; + flex-direction: column; + height: 10rem; - .midtag { - text-decoration: none; - font-size: 1.5rem; - color: #bfbfbf; - cursor: pointer; + .product_info_title { + @include productDefault; + font-size: 4rem; + font-weight: bold; } - .smalltag { - text-decoration: none; - font-size: 1.5rem; - color: var(--font-color); - cursor: pointer; + .product_info_code { + @include productDefault; + margin-top: 1rem; + color: var(--gray-color); } } - .product_content { + // 평점, 찜 유뮤, share + .product_info_option { display: flex; - height: inherit; + height: 3.75rem; + font-size: 1.6rem; + justify-content: flex-end; + margin-right: 1rem; - // 제품 이미지 - .container_content_productImg { + .option_stock { display: flex; - width: 60rem; + align-items: center; + padding: 0 1.25rem; - .productImg { - margin: auto; - height: 60rem; + .stock_text { + width: 7rem; } } - // 제품 정보 - .product_info { - width: 60rem; + .option_stock:after { + content: ''; + height: 2rem; + border: 1px solid var(--gray-color); + } + + .option_share { display: flex; - flex-direction: column; + align-items: center; + padding: 0 1.15rem; + padding-left: 0; - .title { - display: flex; - flex-direction: column; - height: 10rem; + .share_icon { + cursor: pointer; + padding-left: 0; + } + } + } - .product_info_title { - @include productDefault; - font-size: 4rem; - font-weight: bold; - } + .product_info_discount { + @include productDefault; + color: var(--pink-color); + width: auto; + height: 5rem; + font-size: 1.8rem; + font-weight: bold; + margin-right: 1rem; + justify-content: end; + white-space: nowrap; + } - .product_info_code { - @include productDefault; - margin-top: 1rem; - color: var(--gray-color); - } + // 제품 상세 이름, 제품 수량 추가 or 감소, 제품 가격 + .product_info_quantity { + @include productDefault; + position: relative; + height: 25rem; + font-size: 2rem; + display: flex; + align-items: end; + margin-bottom: 1.875rem; + + .product_info_quantity_box { + background-color: var(--border-line); + display: flex; + flex-direction: column; + width: 57rem; + height: 13rem; + margin-bottom: 1.875rem; + + .box_option { + display: flex; + width: 100%; + font-size: 1.5rem; + font-weight: var(---font-bold); + height: 2.5rem; + margin: 1.5rem 0 0 1.5rem; } - // 평점, 찜 유뮤, share - .product_info_option { + .option_content { display: flex; - height: 3.75rem; - font-size: 1.6rem; - width: inherit; - margin-left: 43rem; + align-items: center; + margin: 4rem 0 0 0.7rem; - .option_stock { - @include productDefault; - width: 15rem; + .option_content_btn { + display: flex; + margin-left: 0.625rem; + height: 3rem; - .stock_text { - width: 7rem; + .btn_minus { + @include boxDefault; + background-color: var(--body-bg); + border: 0.063rem solid var(--gray-color); + width: 3.5rem; + cursor: pointer; + transition: .7s; } - } - .option_stock:after { - content: ''; - height: 2rem; - border: 1px solid var(--gray-color); - } + .btn_minus:hover { + @include btnColorChange; + } - .option_share { - @include productDefault; - padding-left: 0; + .count { + @include boxDefault; + width: 4.75rem; + border: 0.063rem solid var(--gray-color); + background-color: var(--body-bg); + } - .share_icon { + .btn_plus { + @include boxDefault; + background-color: var(--body-bg); + border: 0.063rem solid var(--gray-color); + width: 3.5rem; cursor: pointer; - padding-left: 0; + transition: .7s; } - } - } - .product_info_discount { - @include productDefault; - color: var(--pink-color); - width: auto; - height: 5rem; - font-size: 1.8rem; - font-weight: bold; - margin-right: 1rem; - justify-content: end; - white-space: nowrap; - } - - // 제품 상세 이름, 제품 수량 추가 or 감소, 제품 가격 - .product_info_quantity { - @include productDefault; - position: relative; - height: 25rem; - font-size: 2rem; - display: flex; - align-items: end; - margin-bottom: 1.875rem; + .btn_plus:hover { + @include btnColorChange; + } + } - .product_info_quantity_box { - background-color: var(--lightgray-color); + .option_price { display: flex; flex-direction: column; - width: 57rem; - height: 13rem; - margin-bottom: 1.875rem; + margin-bottom: 1rem; - .box_option { + .option_content_price { display: flex; - width: 100%; - font-size: 1.5rem; - font-weight: var(---font-bold); - height: 2.5rem; - margin: 1.5rem 0 0 1.5rem; + width: 43rem; + justify-content: end; + margin-right: 1.5rem; + font-weight: bold; + color: var(--gray-color); + text-decoration: line-through; } - .option_content { + .option_content_discount { display: flex; - align-items: center; - margin: 4rem 0 0 0.7rem; - - .option_content_btn { - display: flex; - margin-left: 0.625rem; - height: 3rem; - - .btn_minus { - @include boxDefault; - background-color: var(--white-color); - border: 0.063rem solid var(--gray-color); - width: 3.5rem; - cursor: pointer; - transition: .7s; - } - - .btn_minus:hover { - @include btnColorChange; - } - - .count { - @include boxDefault; - width: 4.75rem; - border: 0.063rem solid var(--gray-color); - background-color: var(--white-color); - } - - .btn_plus { - @include boxDefault; - background-color: var(--white-color); - border: 0.063rem solid var(--gray-color); - width: 3.5rem; - cursor: pointer; - transition: .7s; - } - - .btn_plus:hover { - @include btnColorChange; - } - } - - .option_price { - display: flex; - flex-direction: column; - margin-bottom: 1rem; - - .option_content_price { - display: flex; - width: 43rem; - justify-content: end; - margin-right: 1.5rem; - font-weight: bold; - color: var(--gray-color); - text-decoration: line-through; - - } - - .option_content_discount { - display: flex; - width: 43rem; - justify-content: end; - margin: 1rem 1.5rem 0 0; - font-weight: bold; - } - } + width: 43rem; + justify-content: end; + margin: 1rem 1.5rem 0 0; + font-weight: bold; } } } + } + } - .product_info_quantity::after { - content: ''; - position: absolute; - width: 95%; - border-bottom: 0.063rem solid var(--gray-color); - } + .product_info_quantity::after { + content: ''; + position: absolute; + width: 95%; + border-bottom: 0.063rem solid var(--gray-color); + } - // 총 상품 가격 - .product_info_count { - display: flex; - height: 3.5rem; - margin-top: 2rem; + // 총 상품 가격 + .product_info_count { + display: flex; + height: 3.5rem; + margin-top: 2rem; - .count_totaltext { - @include productDefault; - color: var(--gray-color); - font-size: 1.3rem; - } + .count_totaltext { + @include productDefault; + color: var(--gray-color); + font-size: 1.3rem; + } - .count_totalprice { - @include productDefault; - justify-content: end; - font-size: 3rem; - font-weight: bold; - } - } + .count_totalprice { + @include productDefault; + justify-content: end; + font-size: 3rem; + font-weight: bold; + } + } - // 찜, 장바구니, 구매 버튼 - .product_info_btn { - font-weight: bold; - display: flex; - height: 7rem; - margin-top: 5rem; - padding: 0 1rem; + // 찜, 장바구니, 구매 버튼 + .product_info_btn { + font-weight: bold; + display: flex; + height: 7rem; + margin-top: 5rem; + padding: 0 1rem; - .info_btn_heart { - width: 17rem; - display: flex; + .info_btn_heart { + width: 17rem; + display: flex; - .btn_heart { - @include btn; - background-color: var(--white-color); - border: 0.063rem solid var(--gray-color); - padding-left: 0; - - .favorite_icons { - display: flex; - justify-content: center; - align-items: center; - margin: 0 auto; - - .favorite_text { - margin-left: 1rem; - } - - .favorite { - display: flex; - justify-content: center; - align-items: center; - } - - .fa-solid { - display: flex; - justify-content: center; - align-items: center; - color: var(--pink-color); - } - } - } - } + .btn_heart { + @include btn; + background-color: transparent; + border: 0.063rem solid var(--gray-color); + padding-left: 0; - .info_btn_basket { - width: 17rem; + .favorite_icons { display: flex; + justify-content: center; + align-items: center; + margin: 0 auto; - .btn_basket { - @include btn; - background-color: var(--white-color); - border: 0.063rem solid var(--gray-color); - padding-left: 0; + .favorite_text { + margin-left: 1rem; } - } - .btn_purchase { - width: 50%; - display: flex; + .favorite { + display: flex; + justify-content: center; + align-items: center; + } - .productInfo_btn_purchase { - @include btn; - color: var(--white-color); - background-color: var(--pink-color); - border: 0.063rem solid transparent; - width: 27rem; + .fa-solid { + display: flex; + justify-content: center; + align-items: center; + color: var(--pink-color); } } } } - } - .photo { - display: flex; - flex-direction: column; - margin: 5rem auto; - width: 80rem; - justify-content: center; + .info_btn_basket { + width: 17rem; + display: flex; + + .btn_basket { + @include btn; + background-color: transparent; + border: 0.063rem solid var(--gray-color); + padding: 0; + } + + .bag_icon { + padding-right: 0.8rem; + } + } - .photo_Img { + .btn_purchase { + width: 50%; display: flex; - justify-content: center; + + .productInfo_btn_purchase { + @include btn; + color: var(--white-color); + background-color: var(--pink-color); + border: 0.063rem solid transparent; + width: 27rem; + } } } } } + + .photo { + display: flex; + flex-direction: column; + margin: 5rem auto; + width: 80rem; + justify-content: center; + } } } \ No newline at end of file diff --git a/scss/user/product_list.scss b/scss/user/product_list.scss index e5510cb..29c7804 100644 --- a/scss/user/product_list.scss +++ b/scss/user/product_list.scss @@ -1,5 +1,5 @@ .product_wrap { - padding: 12rem 0 22rem; + padding: 12rem 0; } // 카테고리 제목 @@ -65,7 +65,7 @@ gap: 1.33%; li { width: 24%; - margin-bottom: 1.5rem; + margin-bottom: 4.5rem; } .product{ // 상품 썸네일 이미지 @@ -133,6 +133,7 @@ right: 0; padding: 3%; z-index: 1; + color: var(--black-color); } .fa-solid{ color: var(--pink-color); diff --git a/scss/user/purchase_history.scss b/scss/user/purchase_history.scss index 3522c56..8fd91cb 100644 --- a/scss/user/purchase_history.scss +++ b/scss/user/purchase_history.scss @@ -1,6 +1,6 @@ @mixin filterBtn { border: 0.063rem solid var(--gray-color); - background-color: var(--white-color); + background-color: var(--border-line); font-size: 1.5rem; height: 4rem; width: 8rem; @@ -36,10 +36,8 @@ .material-symbols-outlined { display: flex; - background-color: var(--white-color); font-size: 1.6rem; cursor: pointer; - padding-left: 2rem; } @@ -181,7 +179,7 @@ width: inherit; border-top: 1px solid black; //border-bottom: 1px solid black; - background-color: var(--more-lightgray-color); + background-color: var(--border-line); //margin-left: 4rem; } @@ -242,7 +240,7 @@ } .no_list_container { - display: flex; + display: none; justify-content: center; align-items: center; width: inherit; @@ -276,6 +274,11 @@ } } + .list_item_orderNumber { + width: 9.5rem; + //text-align: center; + } + .list_item_btn { display: flex; @@ -332,19 +335,27 @@ display: inline-block; text-align: center; line-height: 2.5; - color: #4e4e4e; } .page-link { border: 0.063rem solid var(--gray-color); - background-color: var(--white-color); + background-color: var(--border-line); height: 4rem; width: 4rem; margin: 1rem 1rem 0 0; cursor: pointer; font-size: 1.6rem; text-align: center; - color: #4e4e4e; + } + + .arrow-link { + height: 4rem; + width: 4rem; + margin: 1rem 1rem 0 0; + cursor: pointer; + font-size: 1.6rem; + text-align: center; + color: var(--font-color) } .active-link { @@ -352,6 +363,17 @@ border-color: #FF597B; color: #FFFFFF; } + + .arrow-link-unactive { + height: 4rem; + width: 4rem; + margin: 1rem 1rem 0 0; + cursor: text; + font-size: 1.6rem; + text-align: center; + color: #c7c5c5; + pointer-events: none; + } } } } diff --git a/scss/user/signup.scss b/scss/user/signup.scss index 6b5ff2b..ecc80e7 100644 --- a/scss/user/signup.scss +++ b/scss/user/signup.scss @@ -18,8 +18,7 @@ max-width: 41rem; margin: 0 auto; text-align: start; - margin-top: 9rem; - margin-bottom: 6rem; + padding: 9rem 0; // 회원가입 제목 .signup_section_title { @@ -38,7 +37,6 @@ &_pw, &_check { margin-bottom: 2.2rem; - h3 { font-size: 1.8rem; width: 13rem; @@ -52,7 +50,7 @@ height: 5.5rem; padding: 0 1rem; border: 1px solid var(--gray-color); - + background: transparent; &:focus { outline: none; } diff --git a/scss/user/user_information.scss b/scss/user/user_information.scss index 8d1b78b..52a8c8c 100644 --- a/scss/user/user_information.scss +++ b/scss/user/user_information.scss @@ -31,7 +31,7 @@ border: 0.1rem solid lightgray; cursor: pointer; height: 3rem; - width: 10rem; + width: 11rem; font-weight: 600; margin-left: 3rem; diff --git a/scss/user/wish_list.scss b/scss/user/wish_list.scss index a2911b0..47912b6 100644 --- a/scss/user/wish_list.scss +++ b/scss/user/wish_list.scss @@ -4,10 +4,11 @@ .wish_wrap { .wish_header { - .header { + h2 { font-size: 3.2rem; font-weight: var(--font-bold); padding: 0 0 4rem; + line-height: 1; } } @@ -20,24 +21,24 @@ padding-bottom: 20rem; .wish_icon { .heart_img { - width: 18rem; + width: 12rem; } } .empty_text { padding: 2rem 4rem; - color: var(--darkgray-color); + color: var(--font-color); font-size: 2.4rem; } .wish_btn { - background-color: var(--font-color); + background-color: var(--border-line); width: 26rem; padding: 1.5rem 1.5rem; margin-top: 2rem; margin-bottom: 2rem; a { text-align: center; - color: var(--white-color); + color: var(--font-color); } } } diff --git a/source/api/account/account_able_check.js b/source/api/account/account_able_check.js index 1c22af8..c781a7e 100644 --- a/source/api/account/account_able_check.js +++ b/source/api/account/account_able_check.js @@ -1,20 +1,18 @@ import { headers, url } from "../requests.js"; - - export async function ableAccount(data) { - const res = await fetch(url + "/account/banks ", { - method: "GET", - headers: { - ...headers, - authorization: `Bearer ${JSON.parse(localStorage.getItem("accessToken"))}`, - }, - }); - const json = await res.json(); - return json; + try { + const res = await fetch(url + "/account/banks ", { + method: "GET", + headers: { + ...headers, + authorization: `Bearer ${JSON.parse( + localStorage.getItem("accessToken") + )}`, + }, + }); + return await res.json(); + } catch (e) { + console.log(e); + } } - - - - - diff --git a/source/api/account/account_add.js b/source/api/account/account_add.js index 58d973a..7c8d643 100644 --- a/source/api/account/account_add.js +++ b/source/api/account/account_add.js @@ -1,7 +1,5 @@ import { headers, url } from "../requests.js"; - - /** 계좌 등록및 추가하는 함수 */ export async function addAccount(data) { const res = await fetch(url + "/account ", { @@ -10,17 +8,7 @@ export async function addAccount(data) { ...headers, authorization: `Bearer ${JSON.parse(localStorage.getItem("accessToken"))}`, }, - body: JSON.stringify({ - bankCode: data.bankCode, - accountNumber: data.accountNumber, - phoneNumber: data.phoneNumber, - signature: data.signature, - }), + body: JSON.stringify(data), }); const json = await res.json(); } - - - - - diff --git a/source/api/account/account_add_check.js b/source/api/account/account_add_check.js index 2c7ec87..9de2641 100644 --- a/source/api/account/account_add_check.js +++ b/source/api/account/account_add_check.js @@ -1,24 +1,18 @@ import { headers, url } from "../requests.js"; - - export async function checkAccount(data) { - const res = await fetch(url + "/account ", { - method: "GET", - headers: { - ...headers, - authorization: `Bearer ${JSON.parse(localStorage.getItem("accessToken"))}`, - }, - - }); - const json = await res.json(); - return json + try { + const res = await fetch(url + "/account ", { + method: "GET", + headers: { + ...headers, + authorization: `Bearer ${JSON.parse( + localStorage.getItem("accessToken") + )}`, + }, + }); + return await res.json(); + } catch (e) { + console.log(e); + } } - - - - - - - - diff --git a/source/api/account/account_delete.js b/source/api/account/account_delete.js index f4106b5..073654b 100644 --- a/source/api/account/account_delete.js +++ b/source/api/account/account_delete.js @@ -1,6 +1,5 @@ import { headers, url } from "../requests.js"; - export async function deleteAccount(data) { const res = await fetch(url + `/account`, { method: "DELETE", @@ -8,15 +7,8 @@ export async function deleteAccount(data) { ...headers, authorization: `Bearer ${JSON.parse(localStorage.getItem("accessToken"))}`, }, - body: JSON.stringify({ - - accountId: data.accountId, - signature: data.signature, - - }) + body: JSON.stringify(data) }); const json = await res.json(); return json; } - - diff --git a/source/api/certified/authcheck_api.js b/source/api/certified/authcheck_api.js index 6674115..950b419 100644 --- a/source/api/certified/authcheck_api.js +++ b/source/api/certified/authcheck_api.js @@ -13,6 +13,7 @@ export async function authCheck(accessToken) { }) if(res.status !== 200) { localStorage.removeItem("accessToken") + localStorage.removeItem("pwCheck") return null; } return await res.json(); diff --git a/source/api/certified/login_api.js b/source/api/certified/login_api.js index e4a081a..d997282 100644 --- a/source/api/certified/login_api.js +++ b/source/api/certified/login_api.js @@ -1,26 +1,22 @@ -import { router } from "../../route"; -import { url, headers } from "../requests" - - +import { router } from '../../route'; +import { url, headers } from '../requests'; export async function login(method, data) { - const res = await fetch(url + "/auth/login", { + const res = await fetch(url + '/auth/login', { method, headers, - body: JSON.stringify(data) - }) - const json = await res.json() - if (res.status === 200) { - localStorage.setItem("accessToken", JSON.stringify(json.accessToken)); - if(json.user.email === process.env.ADMIN){ - alert("관리자님 환영합니다.") - router.navigate("admin") - }else{ - alert("로그인 성공!"); - history.go(-1); - } - } else { - alert("아이디와 비밀번호가 일치하지 않습니다.!"); + body: JSON.stringify(data), + }); + const json = await res.json(); + if (res.status !== 200) { + return alert('아이디와 비밀번호가 일치하지 않습니다.!'); + } + + localStorage.setItem('accessToken', JSON.stringify(json.accessToken)); + + if (json.user.email === process.env.ADMIN) { + return router.navigate('admin'); } + history.go(-1); return res; -} \ No newline at end of file +} diff --git a/source/api/certified/logout_api.js b/source/api/certified/logout_api.js index 6db9422..4c14f0f 100644 --- a/source/api/certified/logout_api.js +++ b/source/api/certified/logout_api.js @@ -10,6 +10,7 @@ export async function logout(accessToken) { }); if (res.status === 200) { alert("로그아웃!"); + localStorage.removeItem("pwCheck") } return res.json(); } \ No newline at end of file diff --git a/source/api/certified/pw_check_api.js b/source/api/certified/pw_check_api.js index 6239022..40f90c7 100644 --- a/source/api/certified/pw_check_api.js +++ b/source/api/certified/pw_check_api.js @@ -1,14 +1,15 @@ import { router } from "../../route"; -import { url, headers } from "../requests" - - +import { url, headers } from "../requests"; export async function pwCheckApi(method, data) { - const res = await fetch(url + "/auth/login", { - method, - headers, - body: JSON.stringify(data) - }) - const json = await res.json() - return res; -} \ No newline at end of file + try { + const res = await fetch(url + "/auth/login", { + method, + headers, + body: JSON.stringify(data), + }); + return res; + } catch (e) { + console.log(e); + } +} diff --git a/source/api/certified/signup_api.js b/source/api/certified/signup_api.js index 2b2c064..087a634 100644 --- a/source/api/certified/signup_api.js +++ b/source/api/certified/signup_api.js @@ -10,12 +10,16 @@ export async function signUp(method, data){ }) const json = await res.json() if(res.status===401){ - alert("이미 존재하는 이메일 입니다.") - }else if(res.status === 400){ - alert("옳바른 정보를 입력해주세요.") - }else if(res.status === 200){ + return alert("이미 존재하는 이메일 입니다.") + } + + if(res.status === 400){ + return alert("옳바른 정보를 입력해주세요.") + } + + if(res.status === 200){ alert("TwoCircle 회원이 되신 것을 환영합니다!") - router.navigate("login") + return router.navigate("login") } } diff --git a/source/api/certified/userupdate_api.js b/source/api/certified/userupdate_api.js index 9f60146..add49d6 100644 --- a/source/api/certified/userupdate_api.js +++ b/source/api/certified/userupdate_api.js @@ -1,18 +1,24 @@ import { headers, url } from "../requests.js"; export async function userupdate(data) { - const res = await fetch(url + "/auth/user", { - method: "PUT", - headers: { - ...headers, - authorization: `Bearer ${JSON.parse(localStorage.getItem("accessToken"))}`, - }, - body: JSON.stringify({ - displayName: data.displayName, - oldPassword: data.oldPassword, - newPassword: data.newPassword, - profileImgBase64: data.profileImgBase64 - }), - }); - return res.json(); + try { + const res = await fetch(url + "/auth/user", { + method: "PUT", + headers: { + ...headers, + authorization: `Bearer ${JSON.parse( + localStorage.getItem("accessToken") + )}`, + }, + body: JSON.stringify({ + displayName: data.displayName, + oldPassword: data.oldPassword, + newPassword: data.newPassword, + profileImgBase64: data.profileImgBase64, + }), + }); + return await res.json(); + } catch (e) { + console.log(e); + } } diff --git a/source/api/products/admin/allProduct_api.js b/source/api/products/admin/allProduct_api.js index c3f6724..ae67e51 100644 --- a/source/api/products/admin/allProduct_api.js +++ b/source/api/products/admin/allProduct_api.js @@ -1,12 +1,16 @@ import { headers, url } from "../../requests.js"; export async function allProduct() { - const res = await fetch(url + "/products", { - method: "GET", - headers: { - ...headers, - masterKey: true, - }, - }); - return await res.json(); + try { + const res = await fetch(url + "/products", { + method: "GET", + headers: { + ...headers, + masterKey: true, + }, + }); + return await res.json(); + } catch (e) { + console.log(e); + } } diff --git a/source/api/products/admin/product.js b/source/api/products/admin/product.js index 4f25244..9f215a2 100644 --- a/source/api/products/admin/product.js +++ b/source/api/products/admin/product.js @@ -1,10 +1,13 @@ import { headers, url } from "../../requests.js"; export async function product(id) { - const res = await fetch(url + "/products/" + id, { - method: "GET", - headers - }); - const json = await res.json(); - return json; + try { + const res = await fetch(url + "/products/" + id, { + method: "GET", + headers, + }); + return await res.json(); + } catch (e) { + console.log(e); + } } diff --git a/source/api/products/admin/product_add.js b/source/api/products/admin/product_add.js index 7bfe7c8..a0cd6e2 100644 --- a/source/api/products/admin/product_add.js +++ b/source/api/products/admin/product_add.js @@ -1,12 +1,17 @@ import { headers, url } from "../../requests.js"; export async function productAdd(data) { - const res = await fetch(url + "/products", { - method: "POST", - headers: { - ...headers, - masterKey: true - }, - body: JSON.stringify(data) - }); + try { + const res = await fetch(url + "/products", { + method: "POST", + headers: { + ...headers, + masterKey: true, + }, + body: JSON.stringify(data), + }); + return await res.json(); + } catch (e) { + console.log(e); + } } diff --git a/source/api/products/admin/product_delete.js b/source/api/products/admin/product_delete.js index c55f11c..41e70ee 100644 --- a/source/api/products/admin/product_delete.js +++ b/source/api/products/admin/product_delete.js @@ -1,13 +1,16 @@ import { headers, url } from "../../requests.js"; export async function productDelete(id) { - const res = await fetch(url + "/products/" + id, { - method: "DELETE", - headers: { - ...headers, - masterKey: true - } - }); - const json = await res.json(); - return json; + try { + const res = await fetch(url + "/products/" + id, { + method: "DELETE", + headers: { + ...headers, + masterKey: true, + }, + }); + return await res.json(); + } catch (e) { + console.log(e); + } } diff --git a/source/api/products/admin/product_transactions_api.js b/source/api/products/admin/product_transactions_api.js index 588fa44..eabdd7e 100644 --- a/source/api/products/admin/product_transactions_api.js +++ b/source/api/products/admin/product_transactions_api.js @@ -1,12 +1,16 @@ import { headers, url } from "../../requests.js"; export async function transactionDetail() { - const res = await fetch(url + "/products/transactions/all", { - method: "GET", - headers: { - ...headers, - masterKey: true, - }, - }); - return await res.json(); + try { + const res = await fetch(url + "/products/transactions/all", { + method: "GET", + headers: { + ...headers, + masterKey: true, + }, + }); + return await res.json(); + } catch (e) { + console.log(e); + } } diff --git a/source/api/products/admin/product_update.js b/source/api/products/admin/product_update.js index c9f963e..605678b 100644 --- a/source/api/products/admin/product_update.js +++ b/source/api/products/admin/product_update.js @@ -1,14 +1,17 @@ import { headers, url } from "../../requests.js"; export async function product(id, data) { - const res = await fetch(url + "/products/" + id, { - method: "PUT", - headers: { - ...headers, - masterKey: true - }, - body: JSON.stringify(data) - }); - const json = await res.json(); - return json; + try { + const res = await fetch(url + "/products/" + id, { + method: "PUT", + headers: { + ...headers, + masterKey: true, + }, + body: JSON.stringify(data), + }); + return await res.json(); + } catch (e) { + console.log(e); + } } diff --git a/source/api/products/admin/user_list_api.js b/source/api/products/admin/user_list_api.js index f7c2c4f..c81409f 100644 --- a/source/api/products/admin/user_list_api.js +++ b/source/api/products/admin/user_list_api.js @@ -1,12 +1,16 @@ import { headers, url } from "../../requests.js"; export async function userlist() { - const res = await fetch(url + "/auth/users", { - method: "GET", - headers: { - ...headers, - masterKey: true - }, - }); - return await res.json(); + try { + const res = await fetch(url + "/auth/users", { + method: "GET", + headers: { + ...headers, + masterKey: true, + }, + }); + return await res.json(); + } catch (e) { + console.log(e); + } } diff --git a/source/api/products/common/product_detail_api.js b/source/api/products/common/product_detail_api.js index 22cf055..8d4dd83 100644 --- a/source/api/products/common/product_detail_api.js +++ b/source/api/products/common/product_detail_api.js @@ -1,9 +1,13 @@ import { headers, url } from "../../requests.js"; export async function productDetail(id) { - const res = await fetch(url + "/products/" + id, { - method: "GET", - headers, - }); - return await res.json(); -} \ No newline at end of file + try { + const res = await fetch(url + "/products/" + id, { + method: "GET", + headers, + }); + return await res.json(); + } catch (e) { + console.log(e); + } +} diff --git a/source/api/products/user/payment_api.js b/source/api/products/user/payment_api.js index fb077b3..3de59ab 100644 --- a/source/api/products/user/payment_api.js +++ b/source/api/products/user/payment_api.js @@ -1,18 +1,22 @@ import { headers, url } from "../../requests.js"; export async function payment(productId, accountId) { - const res = await fetch(url + "/products/buy", { - method: "POST", - headers: { - ...headers, - Authorization: `Bearer ${JSON.parse( - localStorage.getItem("accessToken") - )}`, - }, - body: JSON.stringify({ - productId: productId.id, - accountId: accountId.id, - }), - }); - return await res.json(); + try { + const res = await fetch(url + "/products/buy", { + method: "POST", + headers: { + ...headers, + Authorization: `Bearer ${JSON.parse( + localStorage.getItem("accessToken") + )}`, + }, + body: JSON.stringify({ + productId: productId.id, + accountId: accountId.id, + }), + }); + return await res.json(); + } catch (e) { + console.log(e); + } } diff --git a/source/api/products/user/product_search.js b/source/api/products/user/product_search.js index 573031e..275dfa4 100644 --- a/source/api/products/user/product_search.js +++ b/source/api/products/user/product_search.js @@ -1,13 +1,16 @@ import { headers, url } from "../../requests"; export async function searchProduct(data) { - const res = await fetch(url + "/products/search",{ - method:"POST", - headers: { - ...headers, - }, - body:JSON.stringify({...data}) - }); - const json = await res.json() - return json -} \ No newline at end of file + try { + const res = await fetch(url + "/products/search", { + method: "POST", + headers: { + ...headers, + }, + body: JSON.stringify({ ...data }), + }); + return await res.json(); + } catch (e) { + console.log(e); + } +} diff --git a/source/api/products/user/purchase_cancel_api.js b/source/api/products/user/purchase_cancel_api.js index 0e23983..83df570 100644 --- a/source/api/products/user/purchase_cancel_api.js +++ b/source/api/products/user/purchase_cancel_api.js @@ -1,15 +1,21 @@ import { headers, url } from "../../requests.js"; export async function purchaseCancel(data) { + try { const res = await fetch(url + "/products/cancel", { - method: "POST", - headers: { - ...headers, - authorization: `Bearer ${JSON.parse(localStorage.getItem("accessToken"))}`, - }, - body: JSON.stringify({ - detailId: data.detailId - }), + method: "POST", + headers: { + ...headers, + authorization: `Bearer ${JSON.parse( + localStorage.getItem("accessToken") + )}`, + }, + body: JSON.stringify({ + detailId: data.detailId, + }), }); return await res.json(); + } catch (e) { + console.log(e); + } } diff --git a/source/api/products/user/purchase_history_only_api.js b/source/api/products/user/purchase_history_only_api.js index a810702..3250069 100644 --- a/source/api/products/user/purchase_history_only_api.js +++ b/source/api/products/user/purchase_history_only_api.js @@ -1,17 +1,21 @@ import { headers, url } from "../../requests.js"; export async function purchaseHistoryOnly(data) { - const res = await fetch(url + "/products/transactions/detail", { - method: "POST", - headers: { - ...headers, - Authorization: `Bearer ${JSON.parse( - localStorage.getItem("accessToken") - )}`, - }, - body: JSON.stringify({ - detailId: data.detailId, - }), - }); - return await res.json(); + try { + const res = await fetch(url + "/products/transactions/detail", { + method: "POST", + headers: { + ...headers, + Authorization: `Bearer ${JSON.parse( + localStorage.getItem("accessToken") + )}`, + }, + body: JSON.stringify({ + detailId: data.detailId, + }), + }); + return await res.json(); + } catch (e) { + console.log(e); + } } diff --git a/source/api/products/user/purchase_ok_api.js b/source/api/products/user/purchase_ok_api.js index 45bc36e..e7000da 100644 --- a/source/api/products/user/purchase_ok_api.js +++ b/source/api/products/user/purchase_ok_api.js @@ -1,15 +1,21 @@ import { headers, url } from "../../requests.js"; export async function purchaseOk(data) { + try { const res = await fetch(url + "/products/ok", { - method: "POST", - headers: { - ...headers, - authorization: `Bearer ${JSON.parse(localStorage.getItem("accessToken"))}`, - }, - body: JSON.stringify({ - detailId: data.detailId - }), + method: "POST", + headers: { + ...headers, + authorization: `Bearer ${JSON.parse( + localStorage.getItem("accessToken") + )}`, + }, + body: JSON.stringify({ + detailId: data.detailId, + }), }); return await res.json(); + } catch (e) { + console.log(e); + } } diff --git a/source/api/userAPI.js b/source/api/userAPI.js deleted file mode 100644 index e69de29..0000000 diff --git a/source/api/util.js b/source/api/util.js deleted file mode 100644 index e69de29..0000000 diff --git a/source/js/404page.js b/source/js/404page.js new file mode 100644 index 0000000..f2fdc03 --- /dev/null +++ b/source/js/404page.js @@ -0,0 +1,21 @@ +import { router } from '../route.js'; +export function notFoundHandler() { + const clockEl = document.querySelector('.clock'); + const clock = document.createElement('div'); + clock.classList.add('clock-widget'); + clockEl.appendChild(clock); + + // 시계 업데이트 함수 + let remainingTime = 3; + function updateClock() { + clock.innerHTML = `메인페이지 이동까지 ${remainingTime}초 남았습니다`; + remainingTime--; + if (remainingTime < 0) { + clearInterval(intervalId); + router.navigate('/'); + } + } + + // 초마다 업데이트 + const intervalId = setInterval(updateClock, 1000); +} diff --git a/source/js/account.js b/source/js/account.js index 6ceb413..a3d56d1 100644 --- a/source/js/account.js +++ b/source/js/account.js @@ -1,113 +1,237 @@ -import { addAccount } from '../api/account/account_add.js'; -import { checkAccount } from '../api/account/account_add_check.js'; -import { deleteAccount } from '../api/account/account_delete.js'; -import { ableAccount } from '../api/account/account_able_check.js'; +import { addAccount } from "../api/account/account_add.js"; +import { checkAccount } from "../api/account/account_add_check.js"; +import { deleteAccount } from "../api/account/account_delete.js"; +import { ableAccount } from "../api/account/account_able_check.js"; +import { bankLogo } from "./bankImage"; export function accountHandler() { - const sectionEl = document.querySelector('.account'); - const dimmedLayer = document.querySelector('.dimmed_layer'); - const modal = document.querySelector('.pop_up'); - const closeBtnEl = document.querySelector('.close_btn'); - const selectEl = document.querySelector('.bank_code_select'); - const signatureInputEl = document.querySelector('.signature_input'); - const phoneInputEl = document.querySelector('.phone_number_input'); - const accountInputEl = document.querySelector('.bank_account_input'); - const addBtnEl = document.querySelector('.add_btn'); - const accountAddBtnEl = document.querySelector('.account_add_btn'); - const divEl = document.querySelector('.account_info_wrap'); + const sectionEl = document.querySelector(".account"); + const dimmedLayer = document.querySelector(".dimmed_layer"); + const modal = document.querySelector(".pop_up"); + const closeBtnEl = document.querySelector(".close_btn"); + const bankSelectArea = document.querySelector(".bank_code_wrap"); + const addBtnEl = document.querySelector(".add_btn"); + const accountAddBtnEl = document.querySelector(".account_add_btn"); + const accountTerminateBtnEl = document.querySelector( + ".account_terminate_btn" + ); + const divEl = document.querySelector(".account_info_wrap"); /**은행 등록시 필요 정보담는 객체*/ let accountInfo = { - bankCode: '', - accountNumber: '', - phoneNumber: '', + bankCode: "", + accountNumber: "", + phoneNumber: "", + signature: true, + }; + /**은행 해지시 필요 정보담는 객체*/ + let deleteCheckInfo = { + accountId: "", signature: false, }; - /**은행 해지시 필요 정보담는 객체*/ - let deleteCheckInfo = { - accountId: '', - signature: false - }; (async () => { const banks = await ableAccount(); - // renderAbleBank(banks) - renderOption(banks); + + renderSelectBank(banks); })(); - /**option 생성및 라벨과 은행코드 삽입*/ - function renderOption(banks) { - const optionList = banks.map((bank) => { - const optionEl = document.createElement('option'); - - optionEl.value = bank.code; - optionEl.textContent = bank.name; - if (bank.disabled) { - optionEl.disabled = true; - } - return optionEl; + function renderSelectBank(banks) { + const bankList = banks.map((bank) => { + const logoWrap = document.createElement("div"); + logoWrap.classList = "bank_code"; + const logoList = bankLogo.find((logo) => logo.name === bank.name); + + // const logo = banks.find((bank) => bank.name === logoList.name) + + const isDisabled = bank.disabled; + logoWrap.innerHTML = /*html*/ ` + ${ + isDisabled + ? `` + : `` + } + ${ + isDisabled + ? `` + : `` + } + `; + return logoWrap; }); - selectEl.append(...optionList); + bankSelectArea.banks = banks; + bankSelectArea.append(...bankList); } - /**셀렉트 option 이벤트 함수*/ - selectEl.addEventListener('change', (e) => { - accountInfo.bankCode = e.target.value; - }); + function renderInput(digits, name) { + const cardTemplate = document.querySelector(".card_template"); + const containerEl = document.createElement("div"); + const imgWrapEl = document.createElement("div"); + const accountWrapEl = document.createElement("div"); + const imgEl = document.createElement("img"); + const bankNameTextEl = document.createElement("span"); + const accountLabel = document.createElement("div"); + const validateMessage = document.createElement("div"); - /** 계좌번호 입력 이벤트 함수*/ - accountInputEl.addEventListener('input', (e) => { - accountInfo.accountNumber = e.target.value; - }); + const phoneNumberWrap = document.createElement("div"); + const phoneNumberText = document.createElement("div"); + const phoneNumberInputEl = document.createElement("input"); + + const bank = bankLogo.find((logo) => logo.name === name); + + containerEl.className = "bank_account_wrap"; + + accountWrapEl.className = "input_wrap"; + accountLabel.className = "bank_account"; + accountLabel.textContent = "계좌번호"; + imgWrapEl.className = "bank_wrap"; + bankNameTextEl.textContent = `${bank.name}`; + + validateMessage.className = "validate_account_wrap"; + + phoneNumberWrap.className = "phone_number_wrap"; + phoneNumberText.className = "phone_number"; + phoneNumberText.textContent = "전화번호"; + + phoneNumberInputEl.className = "phone_number_input"; + phoneNumberInputEl.placeholder = "01012345678"; + + cardTemplate.dataset.bank_name = bank.name; + cardTemplate.style.backgroundColor = ` ${bank.card}`; + imgEl.src = `${bank.svg}`; + const inputList = digits.map((digit) => { + const digitInput = document.createElement("input"); + digitInput.className = "bank_account_input"; + digitInput.dataset.digit = digit; + digitInput.inputMode = "numeric"; + digitInput.pattern = `^[0-9]{${digit}}$`; + digitInput.placeholder = `${digit}자리`; + digitInput.style.width = `calc(${digit} * 1.5rem)`; + + return digitInput; + }); + + imgWrapEl.append(imgEl, bankNameTextEl); + accountWrapEl.append(accountLabel, ...inputList); + phoneNumberWrap.append(phoneNumberText, phoneNumberInputEl); + containerEl.append( + imgWrapEl, + accountWrapEl, + validateMessage, + phoneNumberWrap + ); + cardTemplate.replaceChildren(containerEl); + cardTemplate.addEventListener("input", inputHandler); + } + + bankSelectArea.addEventListener("change", (e) => { + const inputRadio = e.target; + accountInfo.bankCode = inputRadio.id; + const { digits, name } = bankSelectArea.banks.find( + (bank) => bank.name === inputRadio.value + ); - /**전화번호 입력 이벤트 함수*/ - phoneInputEl.addEventListener('input', (e) => { - accountInfo.phoneNumber = e.target.value; - validatePhoneTest(accountInfo.phoneNumber); + digits, name && renderInput(digits, name); }); - /** 서명 입력 이벤트 함수*/ - signatureInputEl.addEventListener('input', () => { - if (signatureInputEl.value.length > 0) { - accountInfo.signature = true; + const inputHandler = (e) => { + const inputEl = e.target; + if (!inputEl) { + return; } - }); + + if (e.target.matches(".bank_account_input")) { + accountInput(inputEl); + } + if (e.target.matches(".phone_number_input")) { + phoneNumberInput(inputEl); + } + }; + + const accountInput = (inputEl) => { + const targetDigit = Number(inputEl.dataset.digit); + const inputLength = inputEl.value.length; + const accountInputs = Array.from( + document.querySelectorAll(".bank_account_input") + ); + const startInput = accountInputs.findIndex((input) => input === inputEl); + const nextInput = accountInputs.length - 1; + + if (targetDigit === inputLength && startInput < nextInput) { + accountInputs[startInput + 1].focus(); + return; + } + + const accountInputsValue = accountInputs.map((input) => { + const value = input.value; + + return value; + }); + + const accountNumber = accountInputsValue.join(""); + accountInfo.accountNumber = accountNumber; + }; + + const phoneNumberInput = (inputEl) => { + const phoneNumber = inputEl.value; + accountInfo.phoneNumber = phoneNumber; + // validatePhoneTest(accountInfo.phoneNumber); + }; /** 계좌 추가하기 버튼 이벤트 함수*/ - addBtnEl.addEventListener('click', async () => { - dimmedLayer.classList.add('_hidden'); - modal.classList.add('_hidden'); + addBtnEl.addEventListener("click", async () => { + dimmedLayer.classList.add("_hidden"); + modal.classList.add("_hidden"); addAccount(accountInfo); - checkAccount() - + checkAccount(); + renderAccount(); }); /**계좌 추가하기 누를 시 모달창및 딤드레이어 나타나게 하기 */ - accountAddBtnEl.addEventListener('click', () => { - dimmedLayer.classList.remove('_hidden'); - modal.classList.remove('_hidden'); + accountAddBtnEl.addEventListener("click", () => { + dimmedLayer.classList.remove("_hidden"); + modal.classList.remove("_hidden"); }); /**close 버튼 누를시 딤드레이아웃및 모달창 사라지게 하기 */ - closeBtnEl.addEventListener('click', () => { - dimmedLayer.classList.add('_hidden'); - modal.classList.add('_hidden'); + closeBtnEl.addEventListener("click", () => { + dimmedLayer.classList.add("_hidden"); + modal.classList.add("_hidden"); }); + accountTerminateBtnEl.addEventListener("click", () => { + const checkedInputEl = document.querySelector( + '.user_account_info input[type="radio"]:checked' + ); + + // const isChecked = accountTerminateBtnEl.dataset.checked + const isChecked = checkedInputEl; + if (isChecked) { + const accountId = checkedInputEl.id; + const bankName = checkedInputEl.value; + renderModal(accountId, bankName); + // renderModal(accounts); + } else if (!isChecked) { + const message = "해지할 계좌를 선택해 주세요."; + alert(message); + } + }); /**계좌 등록후 정보 총 계좌 금액 렌더링 */ function renderTotalBalance(accounts) { - const totalDivEl = document.createElement('div'); + const totalDivEl = document.createElement("div"); - totalDivEl.classList = 'total_balance'; + totalDivEl.classList = "total_balance"; - totalDivEl.innerText = ` 총 잔액금액: ${accounts.totalBalance.toLocaleString('ko-KR')}원`; + totalDivEl.innerText = ` 총 잔액금액: ${accounts.totalBalance.toLocaleString( + "ko-KR" + )}원`; divEl.prepend(totalDivEl); } /**즉시 실행함수 */ (async () => { const accounts = await checkAccount(); - renderAccount(accounts); + renderAccount(); renderTotalBalance(accounts); })(); @@ -115,83 +239,130 @@ export function accountHandler() { async function renderAccount() { const addAccounts = await checkAccount(); - const listEl = document.createElement('ul'); + + const accountsWrapper = document.querySelector(".account_info_wrap"); + const renderedAccountListEl = document.querySelector(".account_list"); + + const listEl = document.createElement("ul"); + listEl.className = "account_list"; + const liEls = addAccounts.accounts.map((account) => { - const liEl = document.createElement('li'); + const liEl = document.createElement("li"); liEl.dataset.id = account.id; - + liEl.dataset.bank_name = account.bankName; liEl.dataset.bank_code = account.bankCode; liEl.innerHTML = /*html*/ `