From 1202749394ca4317c682ed9e47685e94d73abea4 Mon Sep 17 00:00:00 2001 From: CokeLee777 Date: Sun, 26 Nov 2023 19:36:33 +0900 Subject: [PATCH 001/109] =?UTF-8?q?[INIT]=20=EC=9D=B4=EB=95=8C=EA=B9=8C?= =?UTF-8?q?=EC=A7=80=20=EC=9E=91=EC=97=85=ED=95=9C=20=EB=82=B4=EC=9A=A9=20?= =?UTF-8?q?=EC=BB=A4=EB=B0=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/workflows/build-dev.yml | 2 +- .github/workflows/build-prod.yml | 4 +- package-lock.json | 4 +- package.json | 2 +- src/assets/css/order-history.css | 5 + src/assets/images/product-detail-example.png | Bin 0 -> 18488 bytes src/assets/mypage.css | 1458 ++++++++++++++++++ src/assets/ootd-detail.css | 195 ++- src/assets/ootd-post-create.css | 356 +++++ src/components/OrderHistoryComponent.vue | 200 +++ src/router/index.ts | 5 + src/views/MyPageView.vue | 1368 +++++++++++++++- src/views/OOTDDetailView.vue | 528 +++---- src/views/OOTDPostCreateView.vue | 91 ++ src/views/OOTDView.vue | 133 +- src/views/ProductDetailView.vue | 11 + 16 files changed, 4008 insertions(+), 354 deletions(-) create mode 100644 src/assets/css/order-history.css create mode 100644 src/assets/images/product-detail-example.png create mode 100644 src/assets/mypage.css create mode 100644 src/assets/ootd-post-create.css create mode 100644 src/components/OrderHistoryComponent.vue create mode 100644 src/views/OOTDPostCreateView.vue diff --git a/.github/workflows/build-dev.yml b/.github/workflows/build-dev.yml index c2aaca76..e47c94b1 100644 --- a/.github/workflows/build-dev.yml +++ b/.github/workflows/build-dev.yml @@ -1,7 +1,7 @@ name: Deploy development profile about lotdiz on: workflow_dispatch: - push: + pull_request: branches: - 'develop' jobs: diff --git a/.github/workflows/build-prod.yml b/.github/workflows/build-prod.yml index e47c94b1..49f3ad62 100644 --- a/.github/workflows/build-prod.yml +++ b/.github/workflows/build-prod.yml @@ -3,10 +3,10 @@ on: workflow_dispatch: pull_request: branches: - - 'develop' + - 'main' jobs: build-deploy: - environment: develop + environment: production runs-on: ubuntu-latest steps: - name: Checkout code diff --git a/package-lock.json b/package-lock.json index d5c24fe3..2babb87a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,11 +1,11 @@ { - "name": "vue-test", + "name": "dailyon-frontend", "version": "0.0.0", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "vue-test", + "name": "dailyon-frontend", "version": "0.0.0", "dependencies": { "axios": "^1.6.2", diff --git a/package.json b/package.json index 823a2f43..b5725e50 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "vue-test", + "name": "dailyon-frontend", "version": "0.0.0", "private": true, "scripts": { diff --git a/src/assets/css/order-history.css b/src/assets/css/order-history.css new file mode 100644 index 00000000..ce00c309 --- /dev/null +++ b/src/assets/css/order-history.css @@ -0,0 +1,5 @@ +.order-check-container { + display: flex; + flex-direction: column; +} + diff --git a/src/assets/images/product-detail-example.png b/src/assets/images/product-detail-example.png new file mode 100644 index 0000000000000000000000000000000000000000..67e9679570e47629a58c3d2cffe02dca06ba2a14 GIT binary patch literal 18488 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 literal 0 HcmV?d00001 diff --git a/src/assets/mypage.css b/src/assets/mypage.css new file mode 100644 index 00000000..8a6db30a --- /dev/null +++ b/src/assets/mypage.css @@ -0,0 +1,1458 @@ +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ""; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} + +.main-container { + display: flex; + justify-content: space-between; + width: 1500px; + margin: 0 auto; + margin-top: 68px; + margin-bottom: 400px; +} + +.left-container { + display: flex; + flex-direction: column; + width: 277px; + height: 1600px; + border: 1px solid var(--Grayscale4, #c6c6c6); + background: var(--Grayscale1, #fff); +} + +.left-black-box { + width: 100%; + height: 183px; + flex-shrink: 0; + background: var(--Grayscale7, #000); + display: flex; + justify-content: center; + align-items: center; + color: var(--Grayscale1, #fff); + font-family: The Jamsil; + font-size: 30px; + font-style: normal; + font-weight: 700; + line-height: normal; +} + +.left-inner-container { + margin: 30px auto; + margin-left: 45px; + display: flex; + flex-direction: column; +} + +.left-inner-container > h1 { + color: var(--Grayscale7, #000); + font-family: The Jamsil; + font-size: 30px; + font-style: normal; + font-weight: 700; + line-height: 50px; /* 166.667% */ +} + +.left-inner-container > h2 { + color: var(--Grayscale7, #000); + font-family: The Jamsil; + font-size: 25px; + font-style: normal; + font-weight: 300; + line-height: 50px; +} + +.left-inner-line { + width: 80px; + height: 1px; + background: #c6c6c6; + margin: 30px 0; +} + +.right-container { + display: flex; + flex-direction: column; + width: 1150px; +} + +.user-container { + display: flex; + height: 183px; + align-items: center; + margin-bottom: 44px; +} + +.user-name-container { + display: flex; + flex-direction: column; + margin-left: 39px; + margin-right: 145px; +} + +.user-name-container-first-line { + display: flex; + color: var(--Grayscale7, #000); + font-family: The Jamsil; + font-size: 30px; + font-style: normal; + font-weight: 500; + line-height: 50px; /* 166.667% */ + flex-direction: row; +} + +.user-name-container-first-line > h1 { + display: flex; + color: var(--Grayscale7, #000); + font-family: The Jamsil; + font-size: 30px; + font-style: normal; + font-weight: 500; + line-height: 50px; /* 166.667% */ + flex-direction: row; +} + +.user-name-container-first-line > h2 { + color: var(--Grayscale7, #000); + font-family: The Jamsil; + font-size: 30px; + font-style: normal; + font-weight: 300; + line-height: 50px; +} + +.user-name-container > h3 { + color: var(--Grayscale5, #808080); + font-family: The Jamsil; + font-size: 20px; + font-style: normal; + font-weight: 300; + line-height: 30px; +} + +.user-container-point-container { + display: flex; + flex-wrap: wrap; + /* flex-direction: column; */ + width: 83px; + justify-content: center; + color: var(--Grayscale7, #000); + text-align: center; + font-family: The Jamsil; + font-size: 30px; + font-style: normal; + font-weight: 500; + line-height: 50px; /* 166.667% */ + margin-top: -30px; + margin-right: 202px; +} + +.user-container-point-container > h1 { + color: var(--Dark-Red, #c22727); + font-family: The Jamsil; + font-size: 30px; + font-style: normal; + font-weight: 500; + line-height: 50px; +} + +.modify-button { + width: 108px; + height: 54px; + border: 1px solid #000; + background: var(--Grayscale1, #fff); + display: flex; + justify-content: center; + align-items: center; + color: var(--Grayscale7, #000); + font-family: The Jamsil; + font-size: 20px; + font-style: normal; + font-weight: 300; + line-height: 50px; /* 250% */ + margin-right: 10px; + margin-left: 15px; +} + +.logout-button { + width: 108px; + height: 54px; + border: 1px solid #000; + background: var(--Grayscale1, #000); + display: flex; + justify-content: center; + align-items: center; + color: var(--Grayscale7, #fff); + font-family: The Jamsil; + font-size: 20px; + font-style: normal; + font-weight: 300; + line-height: 50px; /* 250% */ +} + +.container-title { + color: var(--Grayscale7, #000); + font-family: The Jamsil; + font-size: 30px; + font-style: normal; + font-weight: 700; + line-height: 50px; /* 166.667% */ + margin-bottom: 10px; +} + +.inner-title-container { + display: flex; + margin-top: 10px; + margin-bottom: 37px; + align-items: flex-end; + height: 50px; +} + +.container-inner-title { + color: var(--Grayscale7, #000); + font-family: The Jamsil; + font-size: 25px; + font-style: normal; + font-weight: 400; + line-height: 50px; /* 200% */ +} + +.container-inner-title2 { + color: var(--Grayscale7, #000); + font-family: The Jamsil; + font-size: 20px; + font-style: normal; + font-weight: 400; + line-height: 45px; +} + +.container-line { + width: 100%; + height: 2px; + background: #000; +} + +.order-check-container { + display: flex; + flex-direction: column; +} + +.process-container { + display: flex; + justify-content: center; + margin-bottom: 39px; +} + +.process-container > svg { + margin-top: 2px; +} + +.process-column { + display: flex; + flex-direction: column; + margin: 0 20px; +} + +.process-column > h1 { + color: var(--Grayscale4, #c6c6c6); + font-family: The Jamsil; + font-size: 80px; + font-style: normal; + font-weight: 700; + line-height: 50px; /* 62.5% */ + margin: 0 auto; + margin-bottom: 21px; +} +.process-column > h2 { + color: var(--Grayscale7, #000); + font-family: The Jamsil; + font-size: 20px; + font-style: normal; + font-weight: 400; + line-height: 50px; /* 250% */ + margin: 0 auto; + margin-bottom: 12px; +} +.process-column > h3 { + color: var(--Grayscale5, #808080); + font-family: The Jamsil; + font-size: 15px; + font-style: normal; + font-weight: 400; + line-height: 30px; /* 200% */ +} +.process-column > h4 { + color: var(--Grayscale7, #000); + font-family: The Jamsil; + font-size: 15px; + font-style: normal; + font-weight: 400; + line-height: 30px; +} + +.container-inner-line { + width: 100%; + height: 1px; + background: #c6c6c6; +} + +.container-inner-title3 { + color: var(--Grayscale4, #c6c6c6); + font-family: The Jamsil; + font-size: 15px; + font-style: normal; + font-weight: 400; + line-height: 40px; +} + +.hide-cancel-button { + width: 64px; + height: 22px; + padding-top: 2px; + border: 1px solid var(--Grayscale2, #f3f3f3); + background: var(--Grayscale1, #fff); + display: flex; + justify-content: center; + align-items: center; + color: var(--Grayscale5, #808080); + font-family: The Jamsil; + font-size: 8px; + font-style: normal; + font-weight: 400; + line-height: 30px; /* 375% */ + align-self: flex-end; + margin-top: -60px; + margin-bottom: 2px; +} + +.search-container { + width: 100%; + /* height: 41.5px; */ + height: 43px; + background: var(--Grayscale2, #f3f3f3); + display: flex; + align-items: center; + /* padding-top: 2.5px; */ +} + +.search-container > span { + color: var(--Grayscale7, #000); + font-family: The Jamsil; + font-size: 15px; + font-style: normal; + font-weight: 400; + line-height: 30px; /* 200% */ + margin-left: 10px; + margin-right: 14px; + margin-top: 2.5px; +} + +.search-container > select { + width: 100px; + height: 22px; + flex-shrink: 0; + background: var(--Grayscale1, #fff); + color: var(--Grayscale7, #000); + font-family: The Jamsil; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 30px; /* 250% */ + border: 0px; + margin-right: 6px; +} + +.search-container > .black-button { + width: 53px; + height: 22px; + flex-shrink: 0; + background: var(--Grayscale7, #000); + color: var(--Grayscale1, #fff); + font-family: The Jamsil; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 30px; /* 250% */ + display: flex; + justify-content: center; + align-items: center; + margin-right: 365px; +} + +.search-container > input { + width: 239px; + height: 22px; + flex-shrink: 0; + background: var(--Grayscale1, #fff); + color: var(--Grayscale3, #e9e9e9); + font-family: The Jamsil; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 30px; /* 250% */ + border: 0px; +} + +.search-container > .search-button { + width: 22px; + height: 22px; + flex-shrink: 0; + background: var(--Grayscale7, #000); + display: flex; + justify-content: center; + align-items: center; +} + +.table-header > th { + color: var(--Grayscale7, #202027); + font-family: The Jamsil; + font-size: 18px; + font-style: normal; + font-weight: 400; + line-height: 60px; + border-bottom: 1px solid #000; +} + +.table-inner-header > th { + color: var(--Grayscale7, #202027); + font-family: The Jamsil; + font-size: 18px; + font-style: normal; + font-weight: 300; + line-height: 60px; + text-align: center; + border-bottom: 1px solid #808080; +} + +.table-data > td { + color: var(--Grayscale7, #202027); + font-family: The Jamsil; + font-size: 18px; + font-style: normal; + font-weight: 300; + line-height: 40px; + text-align: center; +} + +.table-inner-line1 { + width: 100%; + height: 1px; + background-color: #000; +} + +.button-container { + display: flex; + width: 100%; + flex-direction: column; + justify-content: flex-end; + margin-bottom: 160px; +} + +.black-button { + padding: 0 10px; + height: 22px; + flex-shrink: 0; + background: var(--Grayscale7, #000); + color: var(--Grayscale1, #fff); + font-family: The Jamsil; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 30px; /* 250% */ + display: flex; + justify-content: center; + align-items: center; + margin-left: 8px; +} + +.grey-button1 { + padding: 0 10px; + height: 22px; + flex-shrink: 0; + background: var(--Grayscale4, #c6c6c6); + color: var(--Grayscale1, #fff); + font-family: The Jamsil; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 30px; /* 250% */ + display: flex; + justify-content: center; + align-items: center; + margin-left: 8px; +} + +.grey-button2 { + padding: 0 10px; + height: 22px; + flex-shrink: 0; + background: var(--Grayscale5, #808080); + color: var(--Grayscale1, #fff); + font-family: The Jamsil; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 30px; /* 250% */ + display: flex; + justify-content: center; + align-items: center; + margin-left: 8px; +} + +.grey-button3 { + padding: 0 10px; + height: 22px; + flex-shrink: 0; + background: var(--Grayscale6, #4d4d4d); + color: var(--Grayscale1, #fff); + font-family: The Jamsil; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 30px; /* 250% */ + display: flex; + justify-content: center; + align-items: center; + margin-left: 8px; +} + +.button-row { + display: flex; + justify-content: flex-end; + height: 40px; + margin-right: 35px; +} + +.change-container { + display: flex; + flex-direction: column; +} + +.point-container { + display: flex; + flex-direction: column; + margin-bottom: 69px; +} + +.point-table-data1 > td { + color: var(--Grayscale7, #202027); + font-family: The Jamsil; + font-size: 20px; + font-style: normal; + font-weight: 400; + line-height: 70px; /* 500% */ + border-bottom: 1px solid #202027; +} + +.point-table-data2 > td { + color: var(--Grayscale7, #202027); + font-family: The Jamsil; + font-size: 20px; + font-style: normal; + font-weight: 400; + line-height: 70px; /* 500% */ + border-bottom: 1px solid #808080; +} + +.left-margin { + padding-left: 20px; +} + +.coupon-container { + display: flex; + flex-direction: column; + margin-bottom: 69px; +} + +.event-container { + display: flex; + flex-direction: column; + margin-bottom: 69px; +} + +.left-align { + text-align: start; +} + +.use-button { + width: 67px; + height: 29px; + background: var(--Grayscale7, #000); + display: flex; + justify-content: center; + align-items: center; + color: var(--Grayscale1, #fff); + text-align: center; + font-family: The Jamsil; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 30px; /* 250% */ +} + +.use-button-disable { + width: 67px; + height: 29px; + /* background: var(--Grayscale7, #000); */ + display: flex; + justify-content: center; + align-items: center; + color: var(--Grayscale1, #fff); + text-align: center; + font-family: The Jamsil; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 30px; /* 250% */ +} + +.basket-container { + display: flex; + flex-direction: column; + margin-bottom: 69px; +} + +.basket-top-button-container { + display: flex; + width: 100%; + justify-content: flex-end; +} + +.top-button { + width: 66px; + height: 20px; + border: 1px solid var(--Grayscale5, #808080); + background: var(--Grayscale1, #fff); + padding-top: 2px; + display: flex; + justify-content: center; + align-items: center; + color: var(--Grayscale5, #808080); + font-family: The Jamsil; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 30px; /* 250% */ + margin-left: 7px; + margin-bottom: 8px; + margin-top: -28px; +} + +.basket-checkbox { + width: 27px; + height: 27px; + flex-shrink: 0; + border: 1px solid #000; + background: var(--Grayscale1, #fff); + transform: translate(0, 7px); +} + +.basket-img { + width: 161px; + height: 144px; + flex-shrink: 0; + margin: 20px 0; +} + +.basket-column { + display: flex; + flex-direction: column; +} + +.basket-column > h1 { + color: var(--Grayscale7, #202027); + font-family: The Jamsil; + font-size: 20px; + font-style: normal; + font-weight: 400; + line-height: 40px; /* 500% */ +} + +.basket-column > h2 { + color: var(--Grayscale5, #808080); + font-family: The Jamsil; + font-size: 15px; + font-style: normal; + font-weight: 400; + line-height: 40px; /* 666.667% */ + margin-bottom: 60px; +} + +.basket-column > h3 { + width: 69px; + height: 22px; + flex-shrink: 0; + border: 1px solid var(--Grayscale5, #808080); + background: var(--Grayscale1, #fff); + display: flex; + justify-content: center; + align-items: center; + color: var(--Grayscale5, #808080); + font-family: The Jamsil; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 30px; /* 250% */ +} + +td { + vertical-align: middle; +} + +.count-wrapper { + display: flex; + margin: 0 auto; + justify-content: center; +} + +.count-black { + width: 38px; + height: 38px; + flex-shrink: 0; + background: var(--Grayscale7, #000); + display: flex; + justify-content: center; + align-items: center; +} + +.count-white { + width: 74px; + height: 38px; + display: flex; + justify-content: center; + align-items: center; + color: var(--Grayscale7, #000); + font-family: The Jamsil; + font-size: 20px; + font-style: normal; + font-weight: 300; + line-height: 80px; /* 400% */ +} + +.center-text { + text-align: center; +} + +.total-pay { + color: var(--Grayscale7, #202027); + font-family: The Jamsil; + font-size: 25px; + font-style: normal; + font-weight: 800; + line-height: 100px; /* 400% */ +} + +.prod-price { + color: var(--Grayscale7, #202027); + font-family: The Jamsil; + font-size: 20px; + font-style: normal; + font-weight: 700; + line-height: 100px; /* 500% */ +} + +.basket-grey-container { + width: 100%; + height: 164px; + background: var(--Grayscale2, #f3f3f3); + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 12px; +} + +.grey-first-column { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-right: 78px; +} + +.grey-small-text { + color: var(--Grayscale7, #202027); + font-family: The Jamsil; + font-size: 20px; + font-style: normal; + font-weight: 400; + line-height: 70px; /* 500% */ +} + +.grey-large-text { + color: var(--Grayscale7, #202027); + font-family: The Jamsil; + font-size: 25px; + font-style: normal; + font-weight: 700; + line-height: 70px; /* 400% */ +} + +.plus-icon { + margin-right: 107px; +} + +.grey-second-column { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-right: 166px; +} + +.grey-third-column { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.equal-icon { + margin-right: 146px; +} + +.purchase-button { + width: 208px; + height: 72px; + flex-shrink: 0; + background: var(--Grayscale7, #000); + display: flex; + justify-content: center; + align-items: center; + color: var(--Grayscale1, #fff); + text-align: center; + font-family: The Jamsil; + font-size: 30px; + font-style: normal; + font-weight: 400; + line-height: 30px; /* 100% */ + align-self: flex-end; +} + +.jjim-prod-container { + display: flex; + flex-direction: column; + margin-bottom: 69px; +} + +.user-info-container { + display: flex; + flex-direction: column; + margin-bottom: 69px; +} + +.top-margin-5px { + margin-top: 5px; +} + +.user-info-first-row { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 5px; +} + +.modify-button-wrapper { + height: 29px; + display: flex; +} + +.modify-white { + width: 67px; + height: 29px; + flex-shrink: 0; + border: 1px solid #000; + background: var(--Grayscale1, #fff); + color: var(--Grayscale7, #000); + text-align: center; + font-family: The Jamsil; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 30px; /* 250% */ + display: flex; + justify-content: center; + align-items: center; + margin-left: 7px; +} + +.modify-black { + background: var(--Grayscale1, #000); + color: var(--Grayscale7, #fff); +} + +.user-info-second-row { + display: flex; + margin-top: 10px; + margin-bottom: 42px; +} + +.user-info-second-row-first-col { + display: flex; + flex-direction: column; + align-items: center; + margin-right: 49px; +} + +.profile-circle { + margin-bottom: 14px; +} + +.profile-change-button { + width: 79px; + height: 22px; + flex-shrink: 0; + background: var(--Grayscale7, #000); + display: flex; + justify-content: center; + align-items: center; + color: var(--Grayscale1, #fff); + font-family: The Jamsil; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 30px; /* 250% */ +} + +.user-info-second-row-second-col { + display: flex; + flex-direction: column; + margin-right: 48px; +} + +.user-info-second-row-second-col > span { + color: var(--Grayscale7, #000); + font-family: The Jamsil; + font-size: 20px; + font-style: normal; + font-weight: 300; + line-height: 50px; /* 250% */ +} + +.user-info-second-row-third-col { + display: flex; + flex-direction: column; + margin-right: 14px; +} + +.user-info-second-row-third-col > span { + color: var(--Grayscale5, #808080); + font-family: The Jamsil; + font-size: 20px; + font-style: normal; + font-weight: 300; + line-height: 30px; /* 250% */ + margin-bottom: 24px; +} + +.info-underline { + width: 300px; + border-bottom: 2px solid #000; +} + +.user-info-second-row-fourth-col { + display: flex; + flex-direction: column; +} + +.place-choice-button { + width: 67px; + height: 29px; + flex-shrink: 0; + background: var(--Grayscale7, #000); + display: flex; + justify-content: center; + align-items: center; + color: var(--Grayscale1, #fff); + text-align: center; + font-family: The Jamsil; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 30px; /* 250% */ + margin-top: 109px; +} + +.place-add-button { + width: 67px; + height: 29px; + flex-shrink: 0; + background: var(--Grayscale7, #000); + display: flex; + justify-content: center; + align-items: center; + color: var(--Grayscale1, #fff); + text-align: center; + font-family: The Jamsil; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 30px; /* 250% */ + align-self: flex-end; +} + +.place-font > td { + color: var(--Grayscale7, #202027); + font-family: The Jamsil; + font-size: 20px; + font-style: normal; + font-weight: 400; + line-height: 65px; /* 325% */ + text-align: left; +} + +.padding-left-10 { + padding-left: 10px; +} + +.place-choice-button-wrapper { + display: flex; + width: 100%; + justify-content: flex-end; +} + +.place-white-button { + width: 69px; + height: 22px; + flex-shrink: 0; + border: 1px solid var(--Grayscale5, #808080); + background: var(--Grayscale1, #fff); + color: var(--Grayscale5, #808080); + font-family: The Jamsil; + font-size: 12px; + font-style: normal; + font-weight: 400; + display: flex; + justify-content: center; + align-items: center; + margin-left: 7px; + padding-top: 2px; +} + +.close-button-div { + width: 100%; + display: flex; + justify-content: flex-end; +} + +.margin-right-10 { + margin-right: 10px; +} + +.review-container { + display: flex; + flex-direction: column; + margin-bottom: 43px; +} + +.review-row { + display: flex; + border-bottom: 1px solid #c6c6c6; + padding: 30px 0; +} + +.review-profile { + margin-right: 15px; +} + +.review-first-column { + display: flex; + flex-direction: column; + margin-right: 20px; +} + +.review-first-column > span { + color: var(--Grayscale7, #000); + font-family: The Jamsil; + font-size: 15px; + font-style: normal; + font-weight: 300; + line-height: 20px; +} + +.review-star-container { + display: flex; + width: 100px; + justify-content: space-between; +} + +.review-second-column { + display: flex; + flex-direction: column; + width: 800px; +} + +.review-second-column > span { + color: var(--Grayscale7, #000); + font-family: The Jamsil; + font-size: 15px; + font-style: normal; + font-weight: 300; + line-height: 20px; +} + +.review-grey-box-wrapper { + display: flex; + margin-bottom: 10px; +} + +.review-grey-box { + padding: 0 13px; + padding-top: 2px; + height: 19px; + flex-shrink: 0; + color: var(--Grayscale7, #000); + font-family: The Jamsil; + font-size: 12px; + font-style: normal; + font-weight: 300; + display: flex; + justify-content: center; + align-items: center; + margin-right: 6px; + border-radius: 5px; + background: var(--Grayscale3, #e9e9e9); +} + +.review-text-container1 { + display: flex; + align-items: flex-end; + margin-bottom: 20px; +} + +.review-text-container1 > h1 { + color: var(--Grayscale5, #808080); + font-family: The Jamsil; + font-size: 15px; + font-style: normal; + font-weight: 300; + line-height: 25px; +} +.review-text-container1 > h2 { + color: var(--Grayscale5, #808080); + font-family: The Jamsil; + font-size: 10px; + font-style: normal; + font-weight: 300; + margin-left: 10px; + line-height: 20px; +} + +.review-prod-img { + width: 100px; + height: 89.441px; + flex-shrink: 0; + margin-right: 5px; +} + +.review-last-column { + display: flex; + align-items: flex-end; +} + +.review-last-column > span { + color: var(--Grayscale4, #c6c6c6); + text-align: right; + font-family: The Jamsil; + font-size: 15px; + font-style: normal; + font-weight: 300; + transform: translate(0, 20px); +} + +.follow-container { + display: flex; + flex-direction: column; + margin-bottom: 43px; +} + +.follow-text { + color: var(--Grayscale5, #808080); + font-family: The Jamsil; + font-size: 25px; + font-style: normal; + font-weight: 400; + line-height: 50px; +} + +.follow-text-ontap { + color: var(--Grayscale7, #000); + font-family: The Jamsil; + font-size: 25px; + font-style: normal; + font-weight: 400; + line-height: 50px; /* 200% */ +} + +.margin-both { + margin: 0 40px; +} + +.follow-text-container { + display: flex; + margin-top: 14px; +} + +.follow-row { + display: flex; + align-items: center; + height: 100px; +} + +.follow-img { + margin-left: 19px; + margin-right: 62px; +} + +.nickname { + width: 750px; + color: var(--Grayscale7, #000); + font-family: The Jamsil; + font-size: 25px; + font-style: normal; + font-weight: 700; + line-height: 80px; /* 320% */ +} + +.following { + width: 81px; + height: 35px; + flex-shrink: 0; + border: 1px solid var(--Grayscale3, #e9e9e9); + background: var(--Grayscale1, #fff); + display: flex; + justify-content: center; + align-items: center; + color: var(--Grayscale4, #c6c6c6); + font-family: The Jamsil; + font-size: 20px; + font-style: normal; + font-weight: 300; + line-height: normal; +} + +.non-following { + width: 81px; + height: 35px; + flex-shrink: 0; + background: var(--Dark-Red, #c22727); + display: flex; + justify-content: center; + align-items: center; + color: var(--Grayscale1, #fff); + font-family: The Jamsil; + font-size: 20px; + font-style: normal; + font-weight: 300; + line-height: normal; +} + +.board-container { + display: flex; + flex-direction: column; + margin-bottom: 43px; +} + +.query-option-container { + display: flex; + margin-top: 28px; + margin-bottom: 21px; + align-self: flex-end; + margin-right: 14px; +} + +.option-text { + color: var(--Grayscale7, #000); + font-family: The Jamsil; + font-size: 25px; + font-style: normal; + font-weight: 400; + line-height: normal; +} + +.option-ontap { + color: var(--Dark-Red, #c22727); + text-align: right; + font-family: The Jamsil; + font-size: 25px; + font-style: normal; + font-weight: 400; + line-height: normal; +} + +.both-small-margin { + margin: 0 15px; +} + +.img-container { + display: flex; + width: 96%; + flex-wrap: wrap; + margin: 0 auto; +} + +.single-img-container { + position: relative; + display: flex; + flex-direction: column; + margin-bottom: 23px; + margin: 0 12.5px; +} + +.single-img-container > img { + width: 342px; + height: 431px; + flex-shrink: 0; +} + +.like-button { + position: absolute; + top: 381px; + left: 290px; +} + +.heart-view-container { + display: flex; + align-self: flex-end; + margin-top: 3px; +} + +.heart-view-container > h1 { + color: var(--Red, #f00); + text-align: center; + font-family: The Jamsil; + font-size: 15px; + font-style: normal; + font-weight: 400; + line-height: normal; + margin: 0 3px; +} + +.heart-view-container > h2 { + color: var(--Grayscale4, #c6c6c6); + text-align: center; + font-family: The Jamsil; + font-size: 15px; + font-style: normal; + font-weight: 400; + line-height: normal; + margin-left: 3px; +} diff --git a/src/assets/ootd-detail.css b/src/assets/ootd-detail.css index 41f1ab5d..1e2c45ee 100644 --- a/src/assets/ootd-detail.css +++ b/src/assets/ootd-detail.css @@ -433,6 +433,7 @@ } .ootd-detail-content-image-wrapper { + position: relative; display: flex; align-items: flex-start; gap: 0.625rem; @@ -697,6 +698,8 @@ display: flex; flex-direction: column; align-items: flex-start; + width: 85%; + gap: 0.375rem; } @@ -742,8 +745,7 @@ .ootd-detail-comment-input-box-wrapper { display: flex; padding: 0.3125rem; - align-items: center; - gap: 36.5rem; + width: 85%; border-radius: 0.3125rem; border: 1px solid #C6C6C6; @@ -751,8 +753,10 @@ .ootd-detail-comment-input-wrapper { display: flex; - justify-content: center; + justify-content: flex-start; align-items: center; + width: 96%; + gap: 0.625rem; } @@ -763,6 +767,7 @@ font-style: normal; font-weight: 300; line-height: normal; + width: 95%; outline: none; border: none; @@ -1109,3 +1114,187 @@ border-radius: 0.625rem; } + +.product-detail-tag-wrapper { + display: flex; + padding: 0.625rem; + align-items: flex-start; + gap: 0.625rem; + + position: absolute; + left: 55%; + top: 63%; +} + +.product-detail-tag-wrapper:hover { + cursor: pointer; +} + +.product-detail-tag-wrapper:hover .product-detail-tag-dropdown-wrapper { + display: block; +} + +.product-detail-tag-wrapper-2 { + display: flex; + padding: 0.625rem; + align-items: flex-start; + gap: 0.625rem; + + position: absolute; + left: 45%; + top: 35%; +} + +.product-detail-tag-wrapper-2:hover { + cursor: pointer; +} + +.product-detail-tag-wrapper-2:hover .product-detail-tag-dropdown-wrapper { + display: block; +} + +.product-detail-tag { + width: 1.875rem; + height: 1.875rem; + + fill: var(--Dark-Red, #C22727); +} + +.product-detail-tag-dropdown-wrapper { + display: none; + flex-direction: column; + align-items: center; + + position: absolute; + left: -10.0625rem; + bottom: -12.20313rem; +} + +.product-detail-tag-dropdown-wrapper:hover { + cursor: pointer; +} + +.product-detail-tag-dropdown-pointer { + position: absolute; + left: 46%; + top: -13%; + + width: 1.94856rem; + height: 2.20313rem; + + fill: var(--Grayscale1, #FFF); +} + +.product-detail-tag-dropdown-box { + width: 23.1875rem; + height: 11rem; + + border-radius: 0.625rem; + background: var(--Grayscale1, #FFF); + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); +} + +.product-detail-tag-dropdown-box-2 { + width: 23.1875rem; + height: 11rem; + + border-radius: 0.625rem 0.625rem 0rem 0rem; + background: var(--Grayscale1, #FFF); + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); +} + +.product-image-wrapper { + display: flex; + align-items: flex-start; + + position: absolute; + bottom: 0.01563rem; + + border-radius: 0.625rem; +} + +.product-image { + width: 8.625rem; + height: 11rem; + + border-radius: 0.625rem; +} + +.product-image-brand-and-name-wrapper { + display: flex; + flex-direction: column; + padding: 0.625rem; + justify-content: center; + align-items: center; + gap: 0.625rem; + + position: absolute; + right: 8.625rem; + top: 0.6875rem; +} + +.product-image-brand { + color: var(--Grayscale7, #000); + font-family: The Jamsil; + font-size: 1.25rem; + font-style: normal; + font-weight: 500; + line-height: 1.875rem; /* 150% */ +} + +.product-image-name { + color: var(--Grayscale7, #000); + font-family: The Jamsil; + font-size: 1.25rem; + font-style: normal; + font-weight: 300; + line-height: 1.875rem; +} + +.product-image-price-wrapper { + display: flex; + padding: 0.625rem; + justify-content: center; + align-items: center; + gap: 0.625rem; + + position: absolute; + right: 1.875rem; + bottom: 0.64063rem; +} + +.product-image-price { + color: var(--Grayscale7, #000); + text-align: right; + font-family: The Jamsil; + font-size: 1.5625rem; + font-style: normal; + font-weight: 500; + line-height: 1.875rem; /* 120% */ +} + +.product-coupon-wrapper { + display: flex; + width: 23.1875rem; + height: 3.875rem; + justify-content: center; + align-items: center; + + position: absolute; + bottom: -3.85938rem; + + border-radius: 0rem 0rem 0.625rem 0.625rem; + border-top: 1px solid #E9E9E9; + background: #FFF; + + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); +} + +.product-coupon-text { + color: #000; + font-family: The Jamsil; + font-size: 1.25rem; + font-style: normal; + font-weight: 500; + line-height: 1.875rem; /* 150% */ +} \ No newline at end of file diff --git a/src/assets/ootd-post-create.css b/src/assets/ootd-post-create.css new file mode 100644 index 00000000..4f8588fc --- /dev/null +++ b/src/assets/ootd-post-create.css @@ -0,0 +1,356 @@ +.frame { + display: flex; + flex-direction: column; + align-items: center; + + width: 65rem; + gap: 1.6875rem; +} + +.div { + display: flex; + height: 6.25rem; + flex-direction: column; + align-items: flex-start; + gap: 0.8125rem; +} + +.text-wrapper, .text-wrapper-2 { + color: var(--Grayscale7, #000); + font-family: The Jamsil; + font-size: 0.9375rem; + font-style: normal; + font-weight: 300; + line-height: normal; +} + +.span { + color: var(--Grayscale7, #000); + font-family: The Jamsil; + font-size: 0.9375rem; + font-style: normal; + font-weight: 500; + line-height: normal; +} + +.div-2 { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 0.875rem; +} + +.div, .div-2 { + width: 95%; + padding: 0.625rem; + + border: 1px solid var(--Grayscale4, #C6C6C6); + background: var(--Grayscale1, #FFF); +} + +.text-wrapper-3 { + color: var(--Grayscale7, #000); + font-family: The Jamsil; + font-size: 0.9375rem; + font-style: normal; + font-weight: 400; + line-height: normal; +} + +.div-3 { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 0.6875rem; +} + +.div-4 { + display: flex; + align-items: center; + gap: 4.0625rem; +} + +.text-wrapper-4 { + color: #000; + font-family: The Jamsil; + font-size: 0.9375rem; + font-style: normal; + font-weight: 300; + line-height: 1.25rem; /* 133.333% */ +} + +.rectangle { + width: 9.375rem; + height: 1.875rem; + + border: 1px solid var(--Grayscale3, #E9E9E9); + background: var(--Grayscale1, #FFF); +} + +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + +.rectangle:focus { + outline: none; +} + +.div-5 { + display: flex; + align-items: center; + gap: 2.3125rem; +} + +.div-6 { + display: flex; + align-items: center; + gap: 1.5rem; +} + +.div-7 { + display: flex; + align-items: center; + gap: 0.5625rem; +} + +.div-wrapper { + display: flex; + width: 5.125rem; + padding: 0.3125rem; + justify-content: center; + align-items: center; + + background: #000; +} + +.text-wrapper-5 { + flex: 1 0 0; + text-align: center; + align-self: stretch; + + color: var(--Grayscale1, #FFF); + font-family: The Jamsil; + font-size: 0.9375rem; + font-style: normal; + font-weight: 300; + line-height: normal; +} + +.div-8 { + display: flex; + align-items: center; + gap: 3.1875rem; +} + +.div-9 { + display: flex; + align-items: flex-start; + gap: 0.8125rem; +} + +.div-10 { + display: flex; + align-items: flex-start; + gap: 0.6875rem; +} + +.div-wrapper-2 { + display: flex; + width: 3.125rem; + padding: 0.3125rem; + justify-content: center; + align-items: center; + + background: #000; +} + +.div-11 { + display: flex; + align-items: flex-start; + gap: 0.875rem; +} + +.div-wrapper-3 { + display: flex; + width: 4.875rem; + padding: 0.3125rem; + justify-content: center; + align-items: center; + + border: 1px solid #E9E9E9; +} + +.div-wrapper-3:focus { + outline: none; +} + +.div-wrapper-3::placeholder { + flex: 1 0 0; + align-self: stretch; + + color: var(--Grayscale5, #808080); + text-align: center; + font-family: The Jamsil; + font-size: 0.9375rem; + font-style: normal; + font-weight: 300; + line-height: normal; +} + +.div-wrapper-4 { + display: flex; + padding: 0.3125rem 0.625rem; + justify-content: center; + align-items: center; + gap: 0.625rem; + + background: #C22727; +} + +.div-wrapper-4:hover { + cursor: pointer; +} + +.text-wrapper-7 { + color: var(--Grayscale1, #FFF); + font-family: The Jamsil; + font-size: 0.9375rem; + font-style: normal; + font-weight: 300; + line-height: normal; +} + +.div-12 { + display: flex; + width: 100%; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 1.75rem; +} + +.div-wrapper-5 { + display: flex; + width: 95%; + padding: 0.625rem; + justify-content: center; + align-items: flex-start; + gap: 0.625rem; + + border-bottom: 1px solid #C6C6C6; +} + +.text-wrapper-8 { + width: 100%; + + color: var(--Grayscale4, #000000); + font-family: The Jamsil; + font-size: 1.875rem; + font-style: normal; + font-weight: 300; + line-height: normal; + + border: none; +} + +.text-wrapper-8:focus { + outline: none; +} + +.div-13 { + display: flex; + width: 95%; + flex-direction: column; + align-items: center; + padding: 0.625rem; + gap: 2.875rem; + + border: 1px solid var(--Grayscale2, #F3F3F3); + background: var(--Grayscale2, #F3F3F3); +} + +.div-13 > .p { + text-align: center; +} + +.text-wrapper-9 { + width: 100%; + + color: var(--Grayscale7, #000); + text-align: center; + font-family: The Jamsil; + font-size: 0.9375rem; + font-style: normal; + font-weight: 300; + line-height: normal; +} + +.text-wrapper-10 { + color: var(--Grayscale5, #808080); + text-align: center; + font-family: The Jamsil; + font-size: 0.9375rem; + font-style: normal; + font-weight: 300; + line-height: normal; +} + +.div-wrapper-6 { + display: flex; + width: 7.4375rem; + padding: 0.3125rem 0.625rem; + justify-content: center; + align-items: center; + gap: 0.625rem; + + background: #000; +} + +.div-wrapper-6:hover { + cursor: pointer; +} + +.text-wrapper-11 { + flex: 1 0 0; + align-self: stretch; + + color: var(--Grayscale1, #FFF); + text-align: center; + font-family: The Jamsil; + font-size: 0.9375rem; + font-style: normal; + font-weight: 300; + line-height: normal; +} + +.div-wrapper-7 { + display: flex; + width: 95%; + height: 18.75rem; + padding: 0.625rem; + justify-content: center; + align-items: flex-start; + gap: 0.625rem; + + border: 1px solid #C6C6C6; +} + +.text-wrapper-12 { + flex: 1 0 0; + align-self: stretch; + + color: var(--Grayscale4, #000000); + font-family: The Jamsil; + font-size: 1.25rem; + font-style: normal; + font-weight: 300; + line-height: normal; + + border: none; +} + +.text-wrapper-12:focus { + outline: none; +} \ No newline at end of file diff --git a/src/components/OrderHistoryComponent.vue b/src/components/OrderHistoryComponent.vue new file mode 100644 index 00000000..a7337e4c --- /dev/null +++ b/src/components/OrderHistoryComponent.vue @@ -0,0 +1,200 @@ + + + + + \ No newline at end of file diff --git a/src/router/index.ts b/src/router/index.ts index cf02e7b7..b10c81e9 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -39,6 +39,11 @@ const router = createRouter({ name: 'ootdDetails', component: () => import('@/views/OOTDDetailView.vue') }, + { + path: '/ootds/create', + name: 'ootdPostCreate', + component: () => import('@/views/OOTDPostCreateView.vue') + }, { path: '/events', name: 'events', diff --git a/src/views/MyPageView.vue b/src/views/MyPageView.vue index d879ed07..246d4ee4 100644 --- a/src/views/MyPageView.vue +++ b/src/views/MyPageView.vue @@ -1,5 +1,1367 @@ - + - + + + \ No newline at end of file diff --git a/src/views/OOTDDetailView.vue b/src/views/OOTDDetailView.vue index 0e8e25fc..77399843 100644 --- a/src/views/OOTDDetailView.vue +++ b/src/views/OOTDDetailView.vue @@ -1,373 +1,385 @@ - + +@import "@/assets/ootd-detail.css"; + \ No newline at end of file diff --git a/src/views/OOTDPostCreateView.vue b/src/views/OOTDPostCreateView.vue new file mode 100644 index 00000000..24cf39b2 --- /dev/null +++ b/src/views/OOTDPostCreateView.vue @@ -0,0 +1,91 @@ + + + + + + \ No newline at end of file diff --git a/src/views/OOTDView.vue b/src/views/OOTDView.vue index 2dea9cc4..bd208c89 100644 --- a/src/views/OOTDView.vue +++ b/src/views/OOTDView.vue @@ -1,4 +1,5 @@ - +@import "@/assets/ootd.css"; + \ No newline at end of file diff --git a/src/views/ProductDetailView.vue b/src/views/ProductDetailView.vue index fa24bf6f..52a2150b 100644 --- a/src/views/ProductDetailView.vue +++ b/src/views/ProductDetailView.vue @@ -473,6 +473,17 @@
+ +
+
+
TOP 4 OOTD
+
+
+
+ +
+
+
From 9280f5b68022f438dd7a42e41612ab8df7ff70f0 Mon Sep 17 00:00:00 2001 From: CokeLee777 Date: Sun, 26 Nov 2023 19:39:13 +0900 Subject: [PATCH 002/109] =?UTF-8?q?[FIX]=20=EB=B9=8C=EB=93=9C=20=EC=98=A4?= =?UTF-8?q?=EB=A5=98=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/MyPageView.vue | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/views/MyPageView.vue b/src/views/MyPageView.vue index 246d4ee4..938b427f 100644 --- a/src/views/MyPageView.vue +++ b/src/views/MyPageView.vue @@ -517,7 +517,7 @@ @@ -578,7 +578,7 @@ @@ -711,7 +711,7 @@ @@ -735,7 +735,7 @@ @@ -969,7 +969,7 @@
@@ -1066,7 +1066,7 @@
@@ -1137,7 +1137,7 @@
- +
- +
- +
- +
- +
+
diff --git a/src/assets/main.css b/src/assets/main.css index c30f1b11..0603c7de 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -51,13 +51,19 @@ table { text-decoration: none; } +#app { + margin: 0; + padding: 0; +} + .container { display: flex; flex-direction: column; align-items: center; - height: 100vh; + overflow-y: scroll; gap: 3.8125rem; + height: 100vh } header { diff --git a/src/assets/ootd.css b/src/assets/ootd.css index 634d6cb3..3c7d1022 100644 --- a/src/assets/ootd.css +++ b/src/assets/ootd.css @@ -1,8 +1,10 @@ .ootd-container { display: inline-flex; flex-direction: column; - align-items: flex-start; + align-items: center; gap: 1.1875rem; + + overflow-y: hidden; } .ootd-header-container { @@ -106,8 +108,10 @@ .ootd-body-container { display: flex; - flex-direction: column; + flex-direction: row; + flex-wrap: wrap; align-items: flex-start; + justify-content: center; gap: 1.1875rem; } diff --git a/src/components/HeaderComponent.vue b/src/components/HeaderComponent.vue index 7443b444..ec0a2c92 100644 --- a/src/components/HeaderComponent.vue +++ b/src/components/HeaderComponent.vue @@ -72,7 +72,7 @@ import { RouterLink } from 'vue-router'
OOTD + +import { ref } from 'vue' +import { type PostResponse } from '@/services/ootd/PostDto' + +const VITE_STATIC_IMG_URL = ref(import.meta.env.VITE_STATIC_IMG_URL) + +defineProps({ + sortOptions: { + type: Array as () => Array<{ value: string, label: string }>, + required: true + }, + requestSort: { + type: String, + required: true + }, + onChangeSort: { + type: Function, + required: true + }, + posts: { + type: Array as () => Array, + default: () => [], + required: true + } +}) + +// TODO: 추후 구현 +let isLike = ref(false) +const likeButtonClickListener = () => { + isLike.value = !isLike.value +} + + + + + \ No newline at end of file diff --git a/src/views/OOTDView.vue b/src/views/OOTDView.vue index bd208c89..4d02c755 100644 --- a/src/views/OOTDView.vue +++ b/src/views/OOTDView.vue @@ -1,93 +1,72 @@ diff --git a/src/components/MyPageHeaderComponent.vue b/src/components/MyPageHeaderComponent.vue new file mode 100644 index 00000000..047c9a7a --- /dev/null +++ b/src/components/MyPageHeaderComponent.vue @@ -0,0 +1,37 @@ + + + + + \ No newline at end of file diff --git a/src/components/MyPageNavbarComponent.vue b/src/components/MyPageNavbarComponent.vue new file mode 100644 index 00000000..aacc67d8 --- /dev/null +++ b/src/components/MyPageNavbarComponent.vue @@ -0,0 +1,37 @@ + + + + + \ No newline at end of file diff --git a/src/components/member/MemberInfoComponent.vue b/src/components/member/MemberInfoComponent.vue new file mode 100644 index 00000000..e685616e --- /dev/null +++ b/src/components/member/MemberInfoComponent.vue @@ -0,0 +1,135 @@ + + + + + \ No newline at end of file diff --git a/src/components/member/PointHistoryComponent.vue b/src/components/member/PointHistoryComponent.vue new file mode 100644 index 00000000..e4ec2577 --- /dev/null +++ b/src/components/member/PointHistoryComponent.vue @@ -0,0 +1,49 @@ + + + + + \ No newline at end of file diff --git a/src/components/ootd/FollowComponent.vue b/src/components/ootd/FollowComponent.vue new file mode 100644 index 00000000..b6b44224 --- /dev/null +++ b/src/components/ootd/FollowComponent.vue @@ -0,0 +1,61 @@ + + + + + \ No newline at end of file diff --git a/src/components/ootd/OOTDFollowComponent.vue b/src/components/ootd/OOTDFollowComponent.vue new file mode 100644 index 00000000..9930c2dc --- /dev/null +++ b/src/components/ootd/OOTDFollowComponent.vue @@ -0,0 +1,11 @@ + + + + + \ No newline at end of file diff --git a/src/components/ootd/OOTDPostLikeComponent.vue b/src/components/ootd/OOTDPostLikeComponent.vue new file mode 100644 index 00000000..5647c7ca --- /dev/null +++ b/src/components/ootd/OOTDPostLikeComponent.vue @@ -0,0 +1,243 @@ + + + + + \ No newline at end of file diff --git a/src/components/OrderHistoryComponent.vue b/src/components/order/OrderHistoryComponent.vue similarity index 55% rename from src/components/OrderHistoryComponent.vue rename to src/components/order/OrderHistoryComponent.vue index a7337e4c..48991df5 100644 --- a/src/components/OrderHistoryComponent.vue +++ b/src/components/order/OrderHistoryComponent.vue @@ -3,17 +3,17 @@ \ No newline at end of file diff --git a/src/components/product/ReviewComponent.vue b/src/components/product/ReviewComponent.vue new file mode 100644 index 00000000..45347af9 --- /dev/null +++ b/src/components/product/ReviewComponent.vue @@ -0,0 +1,208 @@ + + + + + \ No newline at end of file diff --git a/src/components/promotion/CouponComponent.vue b/src/components/promotion/CouponComponent.vue new file mode 100644 index 00000000..7d7d64dc --- /dev/null +++ b/src/components/promotion/CouponComponent.vue @@ -0,0 +1,49 @@ + + + + + \ No newline at end of file diff --git a/src/components/promotion/EventComponent.vue b/src/components/promotion/EventComponent.vue new file mode 100644 index 00000000..24f6aa92 --- /dev/null +++ b/src/components/promotion/EventComponent.vue @@ -0,0 +1,53 @@ + + + + + \ No newline at end of file diff --git a/src/components/wishcart/CartComponent.vue b/src/components/wishcart/CartComponent.vue new file mode 100644 index 00000000..5b506006 --- /dev/null +++ b/src/components/wishcart/CartComponent.vue @@ -0,0 +1,206 @@ + + + + + \ No newline at end of file diff --git a/src/components/wishcart/WishComponent.vue b/src/components/wishcart/WishComponent.vue new file mode 100644 index 00000000..1d674ebc --- /dev/null +++ b/src/components/wishcart/WishComponent.vue @@ -0,0 +1,79 @@ + + + + + \ No newline at end of file diff --git a/src/router/index.ts b/src/router/index.ts index b10c81e9..f64905d6 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -1,5 +1,6 @@ import { createRouter, createWebHistory } from 'vue-router' import HomeView from '@/views/HomeView.vue' +import OrderHistoryComponent from '@/components/order/OrderHistoryComponent.vue' const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), @@ -54,20 +55,67 @@ const router = createRouter({ name: 'notifications', component: () => import('@/views/NotificationView.vue') }, - { - path: '/carts', - name: 'carts', - component: () => import('@/views/CartView.vue') - }, - { - path: '/likes', - name: 'likes', - component: () => import('@/views/LikeView.vue') - }, { path: '/my-page', name: 'my-page', - component: () => import('@/views/MyPageView.vue') + component: () => import('@/views/MyPageView.vue'), + children: [ + { + path: '/order-history', + name: 'orderHistory', + component: () => import('@/components/order/OrderHistoryComponent.vue'), + }, + { + path: '/point-history', + name: 'pointHistory', + component: () => import('@/components/member/PointHistoryComponent.vue'), + }, + { + path: '/coupons', + name: 'coupons', + component: () => import('@/components/promotion/CouponComponent.vue'), + }, + { + path: '/events', + name: 'events', + component: () => import('@/components/promotion/EventComponent.vue'), + }, + { + path: '/carts', + name: 'carts', + component: () => import('@/components/wishcart/CartComponent.vue') + }, + { + path: '/wishlist', + name: 'wishlist', + component: () => import('@/components/wishcart/WishComponent.vue') + }, + { + path: '/member-info', + name: 'memberInfo', + component: () => import('@/components/member/MemberInfoComponent.vue') + }, + { + path: '/reviews', + name: 'reviews', + component: () => import('@/components/product/ReviewComponent.vue') + }, + { + path: '/follows', + name: 'follows', + component: () => import('@/components/ootd/FollowComponent.vue') + }, + // { + // path: '/my-posts', + // name: 'myPosts', + // component: () => import('@/components/ootd/MyPostComponent.vue') + // }, + { + path: '/like-posts', + name: 'likePosts', + component: () => import('@/components/ootd/OOTDPostLikeComponent.vue') + }, + ] }, { path: '/login', diff --git a/src/views/MyPageView.vue b/src/views/MyPageView.vue index 938b427f..6ff7b49d 100644 --- a/src/views/MyPageView.vue +++ b/src/views/MyPageView.vue @@ -1,1363 +1,34 @@ From bdf171e3fe14e24c927d01915a12c678d0266d8f Mon Sep 17 00:00:00 2001 From: CokeLee777 Date: Tue, 28 Nov 2023 12:00:38 +0900 Subject: [PATCH 009/109] =?UTF-8?q?[CHORE]=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=ED=8C=8C=EC=9D=BC=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ootd/FollowComponent.vue | 61 --------------------- src/components/ootd/OOTDFollowComponent.vue | 54 +++++++++++++++++- src/router/index.ts | 2 +- src/views/MyPageView.vue | 4 +- 4 files changed, 55 insertions(+), 66 deletions(-) delete mode 100644 src/components/ootd/FollowComponent.vue diff --git a/src/components/ootd/FollowComponent.vue b/src/components/ootd/FollowComponent.vue deleted file mode 100644 index b6b44224..00000000 --- a/src/components/ootd/FollowComponent.vue +++ /dev/null @@ -1,61 +0,0 @@ - - - - - \ No newline at end of file diff --git a/src/components/ootd/OOTDFollowComponent.vue b/src/components/ootd/OOTDFollowComponent.vue index 9930c2dc..b6b44224 100644 --- a/src/components/ootd/OOTDFollowComponent.vue +++ b/src/components/ootd/OOTDFollowComponent.vue @@ -3,9 +3,59 @@ \ No newline at end of file diff --git a/src/router/index.ts b/src/router/index.ts index f64905d6..53e90e76 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -103,7 +103,7 @@ const router = createRouter({ { path: '/follows', name: 'follows', - component: () => import('@/components/ootd/FollowComponent.vue') + component: () => import('@/components/ootd/OOTDFollowComponent.vue') }, // { // path: '/my-posts', diff --git a/src/views/MyPageView.vue b/src/views/MyPageView.vue index 6ff7b49d..1ea5c0e0 100644 --- a/src/views/MyPageView.vue +++ b/src/views/MyPageView.vue @@ -10,7 +10,7 @@ import CartComponent from '@/components/wishcart/CartComponent.vue' import WishComponent from '@/components/wishcart/WishComponent.vue' import MemberInfoComponent from '@/components/member/MemberInfoComponent.vue' import ReviewComponent from '@/components/product/ReviewComponent.vue' -import FollowComponent from '@/components/ootd/FollowComponent.vue' +import OOTDFollowComponent from '@/components/ootd/OOTDFollowComponent.vue' import OOTDPostLikeComponent from '@/components/ootd/OOTDPostLikeComponent.vue' @@ -27,7 +27,7 @@ import OOTDPostLikeComponent from '@/components/ootd/OOTDPostLikeComponent.vue' - +
From 7c181bdee5584879226a567988b550bb8a436ac1 Mon Sep 17 00:00:00 2001 From: CokeLee777 Date: Tue, 28 Nov 2023 12:05:26 +0900 Subject: [PATCH 010/109] =?UTF-8?q?O2F-578=20[FEAT]=20=ED=8C=94=EB=A1=9C?= =?UTF-8?q?=EC=9B=8C=20=EB=AA=A9=EB=A1=9D=20=EC=A1=B0=ED=9A=8C=20API=20Cal?= =?UTF-8?q?l=20=EB=A1=9C=EC=A7=81=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/services/ootd/FollowDto.ts | 12 ++++++++++++ src/services/ootd/FollowService.ts | 26 ++++++++++++++++++++++++++ 2 files changed, 38 insertions(+) create mode 100644 src/services/ootd/FollowDto.ts create mode 100644 src/services/ootd/FollowService.ts diff --git a/src/services/ootd/FollowDto.ts b/src/services/ootd/FollowDto.ts new file mode 100644 index 00000000..be8e22ec --- /dev/null +++ b/src/services/ootd/FollowDto.ts @@ -0,0 +1,12 @@ +export interface FollowerPageResponse { + totalPages: number; + totalElements: number; + followers: Array; +} + +export interface FollowerResponse { + id: number; + nickname: string; + profileImgUrl: string; + isFollowing: boolean; +} \ No newline at end of file diff --git a/src/services/ootd/FollowService.ts b/src/services/ootd/FollowService.ts new file mode 100644 index 00000000..9d663f01 --- /dev/null +++ b/src/services/ootd/FollowService.ts @@ -0,0 +1,26 @@ +import { authAxiosInstance } from '@/apis/utils' +import { AxiosError, type AxiosResponse } from 'axios' +import type { FollowerPageResponse, FollowerResponse } from '@/services/ootd/FollowDto' + +const SNS_SERVICE_PREFIX_PATH = '/sns-service' + +export const getFollowers = async (): Promise> => { + try { + const response: AxiosResponse = await authAxiosInstance.get(`/follows/followers`) + return response.data + } catch (error) { + if (error instanceof AxiosError) { + if (error.response) { + if (error.response.status >= 400) { + alert(error.response.data.message) + console.error(`Client Error=${error.response.data.message}`) + } + if (error.response.status < 500) { + alert('서버 내부 오류') + console.error('Internal Server Error') + } + } + } + throw error + } +} \ No newline at end of file From 352385a524b11eff3856d62eddf809e0f3b3b663 Mon Sep 17 00:00:00 2001 From: CokeLee777 Date: Tue, 28 Nov 2023 12:13:40 +0900 Subject: [PATCH 011/109] =?UTF-8?q?[FIX]=20=EB=AA=BB=EC=B0=BE=EB=8A=94=20?= =?UTF-8?q?=EB=9D=BC=EC=9A=B0=ED=84=B0=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/HeaderComponent.vue | 2 +- src/components/ootd/MyOOTDPostComponent.vue | 11 +++++++++++ src/router/index.ts | 10 +++++----- 3 files changed, 17 insertions(+), 6 deletions(-) create mode 100644 src/components/ootd/MyOOTDPostComponent.vue diff --git a/src/components/HeaderComponent.vue b/src/components/HeaderComponent.vue index ec0a2c92..f7ec7b7f 100644 --- a/src/components/HeaderComponent.vue +++ b/src/components/HeaderComponent.vue @@ -127,7 +127,7 @@ import { RouterLink } from 'vue-router'
- + + + + + + + \ No newline at end of file diff --git a/src/router/index.ts b/src/router/index.ts index 53e90e76..c8be0375 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -105,11 +105,11 @@ const router = createRouter({ name: 'follows', component: () => import('@/components/ootd/OOTDFollowComponent.vue') }, - // { - // path: '/my-posts', - // name: 'myPosts', - // component: () => import('@/components/ootd/MyPostComponent.vue') - // }, + { + path: '/my-posts', + name: 'myPosts', + component: () => import('@/components/ootd/MyOOTDPostComponent.vue') + }, { path: '/like-posts', name: 'likePosts', From 53b4b51c4799a37ba06583561ca5675e76ef3c3a Mon Sep 17 00:00:00 2001 From: CokeLee777 Date: Tue, 28 Nov 2023 15:32:31 +0900 Subject: [PATCH 012/109] =?UTF-8?q?O2F-579=20[FEAT]=20=ED=8C=94=EB=A1=9C?= =?UTF-8?q?=EC=9B=8C=20=EB=AA=A9=EB=A1=9D=20=EC=A1=B0=ED=9A=8C=20CSS=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/css/follow.css | 156 ++++++++++++++++++++++++++++++++++++-- 1 file changed, 149 insertions(+), 7 deletions(-) diff --git a/src/assets/css/follow.css b/src/assets/css/follow.css index 7836998b..b947ff4d 100644 --- a/src/assets/css/follow.css +++ b/src/assets/css/follow.css @@ -3,7 +3,7 @@ font-family: The Jamsil; font-size: 30px; font-style: normal; - font-weight: 700; + font-weight: 500; line-height: 50px; /* 166.667% */ margin-bottom: 10px; } @@ -18,7 +18,6 @@ .follow-container { display: flex; flex-direction: column; - margin-bottom: 43px; } .follow-text { @@ -30,6 +29,19 @@ line-height: 50px; } +.follow-text:hover { + cursor: pointer; +} + +.follow-text.selected { + color: var(--Grayscale7, #000); + font-family: The Jamsil; + font-size: 25px; + font-style: normal; + font-weight: 400; + line-height: 50px; /* 200% */ +} + .follow-text-ontap { color: var(--Grayscale7, #000); font-family: The Jamsil; @@ -46,6 +58,11 @@ .follow-text-container { display: flex; margin-top: 14px; + gap: 2rem; +} + +.follow-row-container { + min-height: 500px; } .follow-row { @@ -55,17 +72,20 @@ } .follow-img { - margin-left: 19px; - margin-right: 62px; + + width: 60px; + height: 60px; + margin-left: 20px; + margin-right: 20px; } .nickname { - width: 750px; + width: 100%; color: var(--Grayscale7, #000); font-family: The Jamsil; - font-size: 25px; + font-size: 20px; font-style: normal; - font-weight: 700; + font-weight: 400; line-height: 80px; /* 320% */ } @@ -100,4 +120,126 @@ font-style: normal; font-weight: 300; line-height: normal; +} + +.follow-btn:hover { + cursor: pointer; +} + + +.pagination-wrapper { + display: flex; + align-items: flex-start; + justify-content: center; + gap: 0.6875rem; +} + +.back-button-wrapper { + display: flex; + width: 1.875rem; + height: 1.875rem; + justify-content: center; + align-items: center; + gap: 0.625rem; + + border-radius: 0.3125rem; + border: 1px solid #C6C6C6; + background: #FFF; +} + +.back-button-wrapper.disabled { + border-radius: 0.3125rem; + border: 1px solid #C6C6C6; + background: #F3F3F3; +} + +.back-button-wrapper:hover:not(.disabled) { + cursor: pointer; +} + +.back-button { + width: 0.44725rem; + height: 0.8125rem; + flex-shrink: 0; + + fill: var(--Grayscale7, #000); +} + +.back-button.disabled { + fill: #C6C6C6; +} + +.front-button-wrapper { + display: flex; + width: 1.875rem; + height: 1.875rem; + justify-content: center; + align-items: center; + gap: 0.625rem; + + border-radius: 0.3125rem; + border: 1px solid #C6C6C6; + background: #FFF; +} + +.front-button-wrapper.disabled { + border-radius: 0.3125rem; + border: 1px solid #C6C6C6; + background: #F3F3F3; +} + +.front-button-wrapper:hover:not(.disabled) { + cursor: pointer; +} + +.front-button { + width: 0.44644rem; + height: 0.8125rem; + flex-shrink: 0; + + fill: var(--Grayscale7, #000); +} + +.front-button.disabled { + fill: #C6C6C6; +} + +.page-button-wrapper { + display: flex; + width: 1.875rem; + height: 1.875rem; + justify-content: center; + align-items: center; + gap: 0.625rem; + + border-radius: 0.3125rem; + border: 1px solid #C6C6C6; + background: #FFF; +} + +.page-button-wrapper:hover { + cursor: pointer; +} + +.page-button-wrapper.selected { + border-radius: 0.3125rem; + background: #C22727; +} + +.page-button { + color: #000; + font-family: The Jamsil; + font-size: 0.9375rem; + font-style: normal; + font-weight: 400; + line-height: normal; +} + +.page-button.selected { + color: #FFF; + font-family: The Jamsil; + font-size: 0.9375rem; + font-style: normal; + font-weight: 400; + line-height: normal; } \ No newline at end of file From 6c6734ab43777e2d2c30c3c487d5580625c7299e Mon Sep 17 00:00:00 2001 From: CokeLee777 Date: Tue, 28 Nov 2023 15:32:47 +0900 Subject: [PATCH 013/109] =?UTF-8?q?O2F-580=20[FEAT]=20=ED=8C=94=EB=A1=9C?= =?UTF-8?q?=EC=9B=8C=20=EB=AA=A9=EB=A1=9D=20=EC=A1=B0=ED=9A=8C=20API=20?= =?UTF-8?q?=EC=97=B0=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ootd/OOTDFollowComponent.vue | 134 +++++++++++++------- src/services/ootd/FollowService.ts | 10 +- src/services/ootd/PostService.ts | 8 +- 3 files changed, 103 insertions(+), 49 deletions(-) diff --git a/src/components/ootd/OOTDFollowComponent.vue b/src/components/ootd/OOTDFollowComponent.vue index b6b44224..6b7b0097 100644 --- a/src/components/ootd/OOTDFollowComponent.vue +++ b/src/components/ootd/OOTDFollowComponent.vue @@ -1,57 +1,99 @@