From 1b7b5695e0ffa9d7f1b720456e3af5dd2d23ae4f Mon Sep 17 00:00:00 2001 From: Minkyu01 Date: Tue, 20 Aug 2024 17:25:28 +0900 Subject: [PATCH 01/24] =?UTF-8?q?[FE]=20FEAT:=20main=20layout=20=EC=84=A4?= =?UTF-8?q?=EC=A0=95=20#1681?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/Cabinet/assets/data/ManualContent.ts | 14 +++++ .../components/Home/ManualContentBox.tsx | 60 ++++++++++++++++++- .../Cabinet/components/Home/ServiceManual.tsx | 37 +++++++++--- .../Cabinet/types/enum/content.status.enum.ts | 2 + ...vite.config.ts.timestamp-1724129829170.mjs | 53 ++++++++++++++++ 5 files changed, 154 insertions(+), 12 deletions(-) create mode 100644 frontend/vite.config.ts.timestamp-1724129829170.mjs diff --git a/frontend/src/Cabinet/assets/data/ManualContent.ts b/frontend/src/Cabinet/assets/data/ManualContent.ts index 7e92e6370..5ce8d6207 100644 --- a/frontend/src/Cabinet/assets/data/ManualContent.ts +++ b/frontend/src/Cabinet/assets/data/ManualContent.ts @@ -153,4 +153,18 @@ export const manualContentData: Record = { `, pointColor: "var(--normal-text-color)", }, + [ContentStatus.COIN]: { + contentTitle: `코인 안내서`, + iconComponent: ClockImg, + background: "var(--card-bg-color)", + contentText: ``, + pointColor: "var(--sys-main-color)", + }, + [ContentStatus.STORE]: { + contentTitle: "까비 상점", + iconComponent: ClockImg, + background: "var(--sys-main-color)", + contentText: `dfgdfgd`, + pointColor: "var(--sys-main-color)", + }, }; diff --git a/frontend/src/Cabinet/components/Home/ManualContentBox.tsx b/frontend/src/Cabinet/components/Home/ManualContentBox.tsx index 5f4885e30..64c2b95b9 100644 --- a/frontend/src/Cabinet/components/Home/ManualContentBox.tsx +++ b/frontend/src/Cabinet/components/Home/ManualContentBox.tsx @@ -23,18 +23,39 @@ const MaunalContentBox = ({ contentStatus }: MaunalContentBoxProps) => { contentData.iconComponent && ( )} + - {contentStatus === ContentStatus.IN_SESSION && + {/* {contentStatus === ContentStatus.IN_SESSION && contentData.iconComponent && ( - )} + )} */} + {/* {contentStatus === ContentStatus.STORE && contentData.iconComponent && ( + + 다양한 아이템을 구매하고 사물함을 더 편리하게 사용할 수 있습니다! + + // + )} */}

{contentData.contentTitle}

 + {contentStatus === ContentStatus.STORE && ( + + )} + ); }; +const StoreCardCircle = styled.div` + width: 58px; + height: 58px; + top: 110px; + left: -30px; + border-radius: 50%; + background-color: var(--bg-color); + position: absolute; +`; + const Rotation = keyframes` to { transform : rotate(360deg) @@ -89,10 +110,38 @@ const MaunalContentBoxStyled = styled.div<{ fill: var(--sys-main-color); } + ${({ contentStatus }) => + contentStatus === ContentStatus.COIN && + css` + border: 6px solid var(--sys-main-color); + color: var(--sys-main-color); + /* color: var(--custom-purple-200); */ + /* box-shadow: inset 0px 0px 0px 5px var(--bg-color); */ + `} + + ${({ contentStatus }) => + contentStatus === ContentStatus.STORE && + css` + border: 6px solid var(--custom-purple-200); + /* max-width: 650px; + width: 100%; */ + width: 620px; + color: var(--normal-text-color); + @media screen and (max-width: 1000px) { + width: 280px; + .peopleImg { + display: none; + } + font-size: 21px; + } + /* color: var(--custom-purple-200); */ + /* box-shadow: inset 0px 0px 0px 5px var(--bg-color); */ + `} + ${({ contentStatus }) => contentStatus === ContentStatus.PENDING && css` - border: 5px double var(--sys-main-color); + border: 6px double var(--sys-main-color); box-shadow: inset 0px 0px 0px 5px var(--bg-color); `} @@ -174,6 +223,11 @@ const MaunalContentBoxStyled = styled.div<{ const ContentTextStyled = styled.div` display: flex; align-items: center; + + & > span { + font-weight: 400; + font-size: 1rem; + } `; export default MaunalContentBox; diff --git a/frontend/src/Cabinet/components/Home/ServiceManual.tsx b/frontend/src/Cabinet/components/Home/ServiceManual.tsx index 94f766f70..c305a909a 100644 --- a/frontend/src/Cabinet/components/Home/ServiceManual.tsx +++ b/frontend/src/Cabinet/components/Home/ServiceManual.tsx @@ -35,6 +35,29 @@ const ServiceManual = ({ +

+ 당신의 사물함 +
+ 당신의 방식으로, +

+ + +
openModal(ContentStatus.COIN)} + > + + {/*

new

*/} +
+
openModal(ContentStatus.STORE)} + > + + {/*

new

*/} +
+ +

가능성의 확장
@@ -60,12 +83,8 @@ const ServiceManual = ({ -

- 공정한 대여를 위한 -
- 새로운 사물함 서비스. -

- + + {/*
openModal(ContentStatus.PENDING)} @@ -80,8 +99,8 @@ const ServiceManual = ({

new

- -

+ */} + {/*

사물함을 더 오래
사용할 수 있는 방법. @@ -93,7 +112,7 @@ const ServiceManual = ({ > - + */} diff --git a/frontend/src/Cabinet/types/enum/content.status.enum.ts b/frontend/src/Cabinet/types/enum/content.status.enum.ts index cb348bd85..535867bca 100644 --- a/frontend/src/Cabinet/types/enum/content.status.enum.ts +++ b/frontend/src/Cabinet/types/enum/content.status.enum.ts @@ -5,6 +5,8 @@ export enum ContentStatus { PENDING = "PENDING", IN_SESSION = "IN_SESSION", EXTENSION = "EXTENSION", + COIN = "COIN", + STORE = "STORE", } export default ContentStatus; diff --git a/frontend/vite.config.ts.timestamp-1724129829170.mjs b/frontend/vite.config.ts.timestamp-1724129829170.mjs new file mode 100644 index 000000000..f86bb69e5 --- /dev/null +++ b/frontend/vite.config.ts.timestamp-1724129829170.mjs @@ -0,0 +1,53 @@ +// vite.config.ts +import svgr from "file:///Users/miyu/Documents/cabi/frontend/node_modules/@svgr/rollup/dist/index.js"; +import react from "file:///Users/miyu/Documents/cabi/frontend/node_modules/@vitejs/plugin-react/dist/index.mjs"; +import * as path from "path"; +import { visualizer } from "file:///Users/miyu/Documents/cabi/frontend/node_modules/rollup-plugin-visualizer/dist/plugin/index.js"; +import { defineConfig } from "file:///Users/miyu/Documents/cabi/frontend/node_modules/vite/dist/node/index.js"; +var __vite_injected_original_dirname = "/Users/miyu/Documents/cabi/frontend"; +var vite_config_default = defineConfig({ + plugins: [ + react({ + babel: { + plugins: [ + [ + "babel-plugin-styled-components", + { + displayName: true, + fileName: false + } + ] + ] + } + }), + visualizer({ open: true, gzipSize: true, template: "treemap" }), + svgr() + ], + resolve: { + alias: [{ find: "@", replacement: path.resolve(__vite_injected_original_dirname, "src") }] + }, + server: { + host: "0.0.0.0", + port: 4242, + strictPort: true, + hmr: { + port: 4242, + clientPort: 4242, + host: "localhost", + path: "/hmr/" + } + }, + test: { + include: [ + "**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}", + "**/__tests__/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}" + ], + globals: true, + environment: "jsdom", + setupFiles: "./src/setupTest.ts" + } +}); +export { + vite_config_default as default +}; +//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvVXNlcnMvbWl5dS9Eb2N1bWVudHMvY2FiaS9mcm9udGVuZFwiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiL1VzZXJzL21peXUvRG9jdW1lbnRzL2NhYmkvZnJvbnRlbmQvdml0ZS5jb25maWcudHNcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfaW1wb3J0X21ldGFfdXJsID0gXCJmaWxlOi8vL1VzZXJzL21peXUvRG9jdW1lbnRzL2NhYmkvZnJvbnRlbmQvdml0ZS5jb25maWcudHNcIjsvLy8gPHJlZmVyZW5jZSB0eXBlcz1cInZpdGVzdFwiIC8+XG5pbXBvcnQgc3ZnciBmcm9tIFwiQHN2Z3Ivcm9sbHVwXCI7XG5pbXBvcnQgcmVhY3QgZnJvbSBcIkB2aXRlanMvcGx1Z2luLXJlYWN0XCI7XG5pbXBvcnQgKiBhcyBwYXRoIGZyb20gXCJwYXRoXCI7XG5pbXBvcnQgeyB2aXN1YWxpemVyIH0gZnJvbSBcInJvbGx1cC1wbHVnaW4tdmlzdWFsaXplclwiO1xuaW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSBcInZpdGVcIjtcblxuLy8gaHR0cHM6Ly92aXRlanMuZGV2L2NvbmZpZy9cbmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbmZpZyh7XG4gIHBsdWdpbnM6IFtcbiAgICByZWFjdCh7XG4gICAgICBiYWJlbDoge1xuICAgICAgICBwbHVnaW5zOiBbXG4gICAgICAgICAgW1xuICAgICAgICAgICAgXCJiYWJlbC1wbHVnaW4tc3R5bGVkLWNvbXBvbmVudHNcIixcbiAgICAgICAgICAgIHtcbiAgICAgICAgICAgICAgZGlzcGxheU5hbWU6IHRydWUsXG4gICAgICAgICAgICAgIGZpbGVOYW1lOiBmYWxzZSxcbiAgICAgICAgICAgIH0sXG4gICAgICAgICAgXSxcbiAgICAgICAgXSxcbiAgICAgIH0sXG4gICAgfSksXG4gICAgdmlzdWFsaXplcih7IG9wZW46IHRydWUsIGd6aXBTaXplOiB0cnVlLCB0ZW1wbGF0ZTogXCJ0cmVlbWFwXCIgfSksXG4gICAgc3ZncigpLFxuICBdLFxuICByZXNvbHZlOiB7XG4gICAgYWxpYXM6IFt7IGZpbmQ6IFwiQFwiLCByZXBsYWNlbWVudDogcGF0aC5yZXNvbHZlKF9fZGlybmFtZSwgXCJzcmNcIikgfV0sXG4gIH0sXG4gIHNlcnZlcjoge1xuICAgIGhvc3Q6IFwiMC4wLjAuMFwiLFxuICAgIHBvcnQ6IDQyNDIsXG4gICAgc3RyaWN0UG9ydDogdHJ1ZSxcbiAgICBobXI6IHtcbiAgICAgIHBvcnQ6IDQyNDIsXG4gICAgICBjbGllbnRQb3J0OiA0MjQyLFxuICAgICAgaG9zdDogXCJsb2NhbGhvc3RcIixcbiAgICAgIHBhdGg6IFwiL2htci9cIixcbiAgICB9LFxuICB9LFxuICB0ZXN0OiB7XG4gICAgaW5jbHVkZTogW1xuICAgICAgXCIqKi8qLnt0ZXN0LHNwZWN9LntqcyxtanMsY2pzLHRzLG10cyxjdHMsanN4LHRzeH1cIixcbiAgICAgIFwiKiovX190ZXN0c19fLyoue2pzLG1qcyxjanMsdHMsbXRzLGN0cyxqc3gsdHN4fVwiLFxuICAgIF0sXG4gICAgZ2xvYmFsczogdHJ1ZSxcbiAgICBlbnZpcm9ubWVudDogXCJqc2RvbVwiLFxuICAgIHNldHVwRmlsZXM6IFwiLi9zcmMvc2V0dXBUZXN0LnRzXCIsXG4gIH0sXG59KTtcbiJdLAogICJtYXBwaW5ncyI6ICI7QUFDQSxPQUFPLFVBQVU7QUFDakIsT0FBTyxXQUFXO0FBQ2xCLFlBQVksVUFBVTtBQUN0QixTQUFTLGtCQUFrQjtBQUMzQixTQUFTLG9CQUFvQjtBQUw3QixJQUFNLG1DQUFtQztBQVF6QyxJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUMxQixTQUFTO0FBQUEsSUFDUCxNQUFNO0FBQUEsTUFDSixPQUFPO0FBQUEsUUFDTCxTQUFTO0FBQUEsVUFDUDtBQUFBLFlBQ0U7QUFBQSxZQUNBO0FBQUEsY0FDRSxhQUFhO0FBQUEsY0FDYixVQUFVO0FBQUEsWUFDWjtBQUFBLFVBQ0Y7QUFBQSxRQUNGO0FBQUEsTUFDRjtBQUFBLElBQ0YsQ0FBQztBQUFBLElBQ0QsV0FBVyxFQUFFLE1BQU0sTUFBTSxVQUFVLE1BQU0sVUFBVSxVQUFVLENBQUM7QUFBQSxJQUM5RCxLQUFLO0FBQUEsRUFDUDtBQUFBLEVBQ0EsU0FBUztBQUFBLElBQ1AsT0FBTyxDQUFDLEVBQUUsTUFBTSxLQUFLLGFBQWtCLGFBQVEsa0NBQVcsS0FBSyxFQUFFLENBQUM7QUFBQSxFQUNwRTtBQUFBLEVBQ0EsUUFBUTtBQUFBLElBQ04sTUFBTTtBQUFBLElBQ04sTUFBTTtBQUFBLElBQ04sWUFBWTtBQUFBLElBQ1osS0FBSztBQUFBLE1BQ0gsTUFBTTtBQUFBLE1BQ04sWUFBWTtBQUFBLE1BQ1osTUFBTTtBQUFBLE1BQ04sTUFBTTtBQUFBLElBQ1I7QUFBQSxFQUNGO0FBQUEsRUFDQSxNQUFNO0FBQUEsSUFDSixTQUFTO0FBQUEsTUFDUDtBQUFBLE1BQ0E7QUFBQSxJQUNGO0FBQUEsSUFDQSxTQUFTO0FBQUEsSUFDVCxhQUFhO0FBQUEsSUFDYixZQUFZO0FBQUEsRUFDZDtBQUNGLENBQUM7IiwKICAibmFtZXMiOiBbXQp9Cg== From eed3df0f4faabd5c0f918d7de1582be7cdadb440 Mon Sep 17 00:00:00 2001 From: gykoh42 Date: Tue, 20 Aug 2024 17:46:29 +0900 Subject: [PATCH 02/24] =?UTF-8?q?[FE]=20FEAT:=20coinDolar.svg=20=EC=95=84?= =?UTF-8?q?=EC=9D=B4=EC=BD=98=20=EC=B6=94=EA=B0=80=20#1681?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/Cabinet/assets/images/coinDolar.svg | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 frontend/src/Cabinet/assets/images/coinDolar.svg diff --git a/frontend/src/Cabinet/assets/images/coinDolar.svg b/frontend/src/Cabinet/assets/images/coinDolar.svg new file mode 100644 index 000000000..be17c2fa5 --- /dev/null +++ b/frontend/src/Cabinet/assets/images/coinDolar.svg @@ -0,0 +1,5 @@ + + + + + From b10b77c493d39689d4cba7c1ecf6850917992241 Mon Sep 17 00:00:00 2001 From: Minkyu01 Date: Tue, 20 Aug 2024 17:47:06 +0900 Subject: [PATCH 03/24] Co-authored-by: Gyeong A Koh --- .../src/Cabinet/components/Home/ManualContentBox.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/frontend/src/Cabinet/components/Home/ManualContentBox.tsx b/frontend/src/Cabinet/components/Home/ManualContentBox.tsx index 64c2b95b9..e364979b0 100644 --- a/frontend/src/Cabinet/components/Home/ManualContentBox.tsx +++ b/frontend/src/Cabinet/components/Home/ManualContentBox.tsx @@ -47,12 +47,13 @@ const MaunalContentBox = ({ contentStatus }: MaunalContentBoxProps) => { }; const StoreCardCircle = styled.div` - width: 58px; + width: 40px; height: 58px; top: 110px; - left: -30px; - border-radius: 50%; - background-color: var(--bg-color); + left: -6px; + border-top-right-radius: 58px; + border-bottom-right-radius: 58px; + background-color: rgba(255, 255, 255, 1); position: absolute; `; @@ -127,6 +128,7 @@ const MaunalContentBoxStyled = styled.div<{ width: 100%; */ width: 620px; color: var(--normal-text-color); + border: 5px solid var(--sys-main-color); @media screen and (max-width: 1000px) { width: 280px; .peopleImg { From f05a6d0faa6d1fb511f3eceddef6d445e33af70a Mon Sep 17 00:00:00 2001 From: jiminChoi Date: Wed, 21 Aug 2024 17:38:16 +0900 Subject: [PATCH 04/24] =?UTF-8?q?FE]=20FEAT:=20ManualModal=20=EB=8F=99?= =?UTF-8?q?=EC=A0=84=20=EC=82=AC=EC=9A=A9=EB=B2=95=20=EB=AA=A8=EB=8B=AC=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=20#1681?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/Cabinet/assets/data/ManualContent.ts | 38 +++++++++++++++++-- .../components/Home/ManualContentBox.tsx | 30 +++++++++------ .../Cabinet/components/Home/ServiceManual.tsx | 16 ++++---- .../Modals/ManualModal/ManualModal.tsx | 14 +++---- 4 files changed, 68 insertions(+), 30 deletions(-) diff --git a/frontend/src/Cabinet/assets/data/ManualContent.ts b/frontend/src/Cabinet/assets/data/ManualContent.ts index 5ce8d6207..dab0a95c4 100644 --- a/frontend/src/Cabinet/assets/data/ManualContent.ts +++ b/frontend/src/Cabinet/assets/data/ManualContent.ts @@ -153,18 +153,48 @@ export const manualContentData: Record = { `, pointColor: "var(--normal-text-color)", }, - [ContentStatus.COIN]: { - contentTitle: `코인 안내서`, + [ContentStatus.COIN]: +{ + contentTitle: "코인 사용법", iconComponent: ClockImg, background: "var(--card-bg-color)", - contentText: ``, + contentText: `◦ 160시간 출석하기
+

+ 42 출석 160시간을 채운다면 2000까비가 지급됩니다.
+
+
+ ◦ 동전줍기
+
+ Cabi 홈페이지에 접속해, 하루에 한 번 동전을 주울 수 있습니다.
+ 한 달 동안 20개의 코인을 모두 줍는다면 랜덤 보상이 주어집니다.
+
+
+ ◦ 수요지식회 발표하기
+
+ 수요지식회 발표자 분께 1000까비를 지급해 드립니다.
+ 수요지식회 신청은 왼쪽 상단의수요지식회 홈페이지에서 신청할 수 있습니다.
+
+ + `, pointColor: "var(--sys-main-color)", }, [ContentStatus.STORE]: { contentTitle: "까비 상점", iconComponent: ClockImg, background: "var(--sys-main-color)", - contentText: `dfgdfgd`, + contentText: `◦ 이용 방법
+
+ 1인이 1개의 사물함을 사용합니다.
+ 최대 ${ + import.meta.env.VITE_PRIVATE_LENT_PERIOD + }일간 대여할 수 있습니다.

+
+ ◦ 페널티
+
+ 연체 시 연체되는 일의 제곱 수만큼 페널티가 부과됩니다.
+ 연체 페널티는 누적됩니다. +
+ `, pointColor: "var(--sys-main-color)", }, }; diff --git a/frontend/src/Cabinet/components/Home/ManualContentBox.tsx b/frontend/src/Cabinet/components/Home/ManualContentBox.tsx index 64c2b95b9..8e5b442a1 100644 --- a/frontend/src/Cabinet/components/Home/ManualContentBox.tsx +++ b/frontend/src/Cabinet/components/Home/ManualContentBox.tsx @@ -4,15 +4,15 @@ import { ReactComponent as ManualPeopleImg } from "@/Cabinet/assets/images/manua import { ReactComponent as MoveBtnImg } from "@/Cabinet/assets/images/moveButton.svg"; import ContentStatus from "@/Cabinet/types/enum/content.status.enum"; -interface MaunalContentBoxProps { +interface ManualContentBoxProps { contentStatus: ContentStatus; } -const MaunalContentBox = ({ contentStatus }: MaunalContentBoxProps) => { +const ManualContentBox = ({ contentStatus }: ManualContentBoxProps) => { const contentData = manualContentData[contentStatus]; return ( - @@ -42,7 +42,7 @@ const MaunalContentBox = ({ contentStatus }: MaunalContentBoxProps) => { )} - + ); }; @@ -62,7 +62,7 @@ const Rotation = keyframes` } `; -const MaunalContentBoxStyled = styled.div<{ +const ManualContentBoxStyled = styled.div<{ background: string; contentStatus: ContentStatus; }>` @@ -110,11 +110,14 @@ const MaunalContentBoxStyled = styled.div<{ fill: var(--sys-main-color); } + // 상자 ${({ contentStatus }) => contentStatus === ContentStatus.COIN && css` - border: 6px solid var(--sys-main-color); - color: var(--sys-main-color); + border: 5px solid var(--sys-main-color); + color: var(--sys-main-color); + // border: 6px solid var(--sys-main-color); + // color: var(--sys-main-color); /* color: var(--custom-purple-200); */ /* box-shadow: inset 0px 0px 0px 5px var(--bg-color); */ `} @@ -183,11 +186,12 @@ const MaunalContentBoxStyled = styled.div<{ right: 35px; bottom: 35px; stroke: ${(props) => - props.contentStatus === ContentStatus.IN_SESSION + props.contentStatus === ContentStatus.IN_SESSION || + props.contentStatus === ContentStatus.COIN ? "var(--sys-main-color)" : props.contentStatus === ContentStatus.EXTENSION ? "var(--normal-text-color)" - : "var(--white-text-with-bg-color)"}; + :"var(--white-text-with-bg-color)"}; cursor: pointer; } @@ -207,8 +211,9 @@ const MaunalContentBoxStyled = styled.div<{ transition: all 0.3s ease-in-out; transform: translateY(-5px); ${({ contentStatus }) => - (contentStatus === ContentStatus.PENDING || - contentStatus === ContentStatus.IN_SESSION) && + (contentStatus === ContentStatus.PENDING || + contentStatus === ContentStatus.COIN || + contentStatus === ContentStatus.IN_SESSION) && css` margin-top: 155px; `} @@ -224,10 +229,11 @@ const ContentTextStyled = styled.div` display: flex; align-items: center; + & > span { font-weight: 400; font-size: 1rem; } `; -export default MaunalContentBox; +export default ManualContentBox; diff --git a/frontend/src/Cabinet/components/Home/ServiceManual.tsx b/frontend/src/Cabinet/components/Home/ServiceManual.tsx index c305a909a..add8c34c0 100644 --- a/frontend/src/Cabinet/components/Home/ServiceManual.tsx +++ b/frontend/src/Cabinet/components/Home/ServiceManual.tsx @@ -38,7 +38,7 @@ const ServiceManual = ({

당신의 사물함
- 당신의 방식으로, + 당신의 방식으로,

@@ -78,20 +78,22 @@ const ServiceManual = ({
openModal(ContentStatus.CLUB)} + onClick={() => openModal(ContentStatus.IN_SESSION)} > - + {/* + */} +
- {/* -
+ {/*
openModal(ContentStatus.PENDING)} >

new

-
+
*/}
openModal(ContentStatus.IN_SESSION)} @@ -99,7 +101,7 @@ const ServiceManual = ({

new

- */} + {/*

사물함을 더 오래
diff --git a/frontend/src/Cabinet/components/Modals/ManualModal/ManualModal.tsx b/frontend/src/Cabinet/components/Modals/ManualModal/ManualModal.tsx index 494d11383..9427f8d03 100644 --- a/frontend/src/Cabinet/components/Modals/ManualModal/ManualModal.tsx +++ b/frontend/src/Cabinet/components/Modals/ManualModal/ManualModal.tsx @@ -77,11 +77,11 @@ const ManualModal: React.FC = ({ )} {contentData.contentTitle} - +

- + @@ -145,7 +145,7 @@ const ModalWrapper = styled.div<{ border: ${(props) => props.contentStatus === ContentStatus.PENDING ? "5px double var(--sys-main-color)" - : props.contentStatus === ContentStatus.IN_SESSION + : props.contentStatus === ContentStatus.IN_SESSION || props.contentStatus === ContentStatus.COIN ? "5px solid var(--sys-main-color)" : "none"}; box-shadow: ${(props) => @@ -166,7 +166,7 @@ const ModalContent = styled.div<{ display: flex; flex-direction: column; color: ${(props) => - props.contentStatus === ContentStatus.IN_SESSION + props.contentStatus === ContentStatus.IN_SESSION || props.contentStatus === ContentStatus.COIN ? "var(--sys-main-color)" : props.contentStatus === ContentStatus.EXTENSION ? "var(--normal-text-color)" @@ -188,7 +188,7 @@ const ModalContent = styled.div<{ } .moveButton { stroke: ${(props) => - props.contentStatus === ContentStatus.IN_SESSION + props.contentStatus === ContentStatus.IN_SESSION || props.contentStatus === ContentStatus.COIN ? "var(--sys-main-color)" : props.contentStatus === ContentStatus.EXTENSION ? "var(--normal-text-color)" @@ -210,7 +210,7 @@ const CloseButton = styled.div<{ svg { transform: scaleX(-1); stroke: ${(props) => - props.contentStatus === ContentStatus.IN_SESSION + props.contentStatus === ContentStatus.IN_SESSION || props.contentStatus === ContentStatus.COIN ? "var(--sys-main-color)" : props.contentStatus === ContentStatus.EXTENSION ? "var(--normal-text-color)" @@ -269,7 +269,7 @@ const BoxInfo2 = styled.div` } `; -const ManualContentStyeld = styled.div<{ +const ManualContentStyled = styled.div<{ color: string; }>` margin: 40px 0 0 20px; From 10bd5bd8f8e2a14f9f8efb7634f810913034623c Mon Sep 17 00:00:00 2001 From: Minkyu01 Date: Thu, 22 Aug 2024 00:05:33 +0900 Subject: [PATCH 05/24] =?UTF-8?q?[FE]=20FEAT:=20main=20ui=20=ED=8B=B0?= =?UTF-8?q?=EC=BC=93=20=EB=94=94=EC=9E=90=EC=9D=B8=20v1=20#1681?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/Cabinet/assets/data/ManualContent.ts | 12 ++- .../src/Cabinet/assets/images/coinDolar.svg | 2 +- .../components/Home/ManualContentBox.tsx | 82 ++++++++++++------- 3 files changed, 62 insertions(+), 34 deletions(-) diff --git a/frontend/src/Cabinet/assets/data/ManualContent.ts b/frontend/src/Cabinet/assets/data/ManualContent.ts index 5ce8d6207..db48b223d 100644 --- a/frontend/src/Cabinet/assets/data/ManualContent.ts +++ b/frontend/src/Cabinet/assets/data/ManualContent.ts @@ -1,8 +1,10 @@ import { ReactComponent as ClockImg } from "@/Cabinet/assets/images/clock.svg"; import { ReactComponent as ClubIcon } from "@/Cabinet/assets/images/clubIcon.svg"; +import { ReactComponent as DollarImg } from "@/Cabinet/assets/images/coinDolar.svg"; import { ReactComponent as ExtensionIcon } from "@/Cabinet/assets/images/extension.svg"; import { ReactComponent as PrivateIcon } from "@/Cabinet/assets/images/privateIcon.svg"; import { ReactComponent as ShareIcon } from "@/Cabinet/assets/images/shareIcon.svg"; +import { ReactComponent as StoreImg } from "@/Cabinet/assets/images/storeIconGray.svg"; import ContentStatus from "@/Cabinet/types/enum/content.status.enum"; interface ContentStatusData { @@ -155,15 +157,17 @@ export const manualContentData: Record = { }, [ContentStatus.COIN]: { contentTitle: `코인 안내서`, - iconComponent: ClockImg, + iconComponent: DollarImg, background: "var(--card-bg-color)", contentText: ``, pointColor: "var(--sys-main-color)", }, [ContentStatus.STORE]: { - contentTitle: "까비 상점", - iconComponent: ClockImg, - background: "var(--sys-main-color)", + contentTitle: "까비 상점 open", + iconComponent: StoreImg, + // background: "var(--sys-main-color)", + background: + "linear-gradient(180deg, rgba(161,123,243,1) 0%, rgba(131,55,229,1) 100%);", contentText: `dfgdfgd`, pointColor: "var(--sys-main-color)", }, diff --git a/frontend/src/Cabinet/assets/images/coinDolar.svg b/frontend/src/Cabinet/assets/images/coinDolar.svg index be17c2fa5..72f985b8f 100644 --- a/frontend/src/Cabinet/assets/images/coinDolar.svg +++ b/frontend/src/Cabinet/assets/images/coinDolar.svg @@ -1,4 +1,4 @@ - + diff --git a/frontend/src/Cabinet/components/Home/ManualContentBox.tsx b/frontend/src/Cabinet/components/Home/ManualContentBox.tsx index e364979b0..f600b688e 100644 --- a/frontend/src/Cabinet/components/Home/ManualContentBox.tsx +++ b/frontend/src/Cabinet/components/Home/ManualContentBox.tsx @@ -25,20 +25,13 @@ const MaunalContentBox = ({ contentStatus }: MaunalContentBoxProps) => { )} - {/* {contentStatus === ContentStatus.IN_SESSION && - contentData.iconComponent && ( - - )} */} - {/* {contentStatus === ContentStatus.STORE && contentData.iconComponent && ( - - 다양한 아이템을 구매하고 사물함을 더 편리하게 사용할 수 있습니다! - - // - )} */}

{contentData.contentTitle}

{contentStatus === ContentStatus.STORE && ( - + <> + + + )} @@ -47,14 +40,24 @@ const MaunalContentBox = ({ contentStatus }: MaunalContentBoxProps) => { }; const StoreCardCircle = styled.div` - width: 40px; - height: 58px; - top: 110px; - left: -6px; - border-top-right-radius: 58px; - border-bottom-right-radius: 58px; - background-color: rgba(255, 255, 255, 1); + top: -12px; + right: 193px; + rotate: 45deg; + width: 0; + height: 0; + border-bottom: 24px solid white; + border-left: 24px solid transparent; position: absolute; + + :hover { + transition: all 0.3s ease-in-out; + transform: translateY(-5px); + } + &.bottom { + border-bottom: 24px solid transparent; + border-left: 24px solid white; + top: 268px; + } `; const Rotation = keyframes` @@ -93,10 +96,16 @@ const MaunalContentBoxStyled = styled.div<{ width: 80px; height: 80px; + /* & > path { + stroke: ${(props) => + props.contentStatus === ContentStatus.EXTENSION + ? "var(--normal-text-color)" + : "var(--white-text-with-bg-color)"}; + } */ & > path { stroke: ${(props) => - props.contentStatus === ContentStatus.EXTENSION - ? "var(--normal-text-color)" + props.contentStatus === ContentStatus.COIN + ? "var(--sys-default-main-color)" : "var(--white-text-with-bg-color)"}; } } @@ -123,21 +132,36 @@ const MaunalContentBoxStyled = styled.div<{ ${({ contentStatus }) => contentStatus === ContentStatus.STORE && css` - border: 6px solid var(--custom-purple-200); - /* max-width: 650px; - width: 100%; */ width: 620px; - color: var(--normal-text-color); - border: 5px solid var(--sys-main-color); + color: var(--white-text-with-bg-color); + position: relative; /* Added for positioning the pseudo-element */ + + &:after { + content: ""; + position: absolute; + top: 0; + left: 66.67%; /* 3분의 2 지점 */ + height: 100%; + width: 4px; /* 점선의 가로 너비 */ + background-image: linear-gradient( + to bottom, + white 33%, + rgba(255, 255, 255, 0) 0% + ); + background-position: right; + background-size: 10px 30px; /* 점의 세로 크기 10px, 간격 5px */ + background-repeat: repeat-y; + } @media screen and (max-width: 1000px) { width: 280px; .peopleImg { display: none; } font-size: 21px; + &:after { + left: 186.67px; /* 280px의 3분의 2 지점 */ + } } - /* color: var(--custom-purple-200); */ - /* box-shadow: inset 0px 0px 0px 5px var(--bg-color); */ `} ${({ contentStatus }) => @@ -185,8 +209,8 @@ const MaunalContentBoxStyled = styled.div<{ right: 35px; bottom: 35px; stroke: ${(props) => - props.contentStatus === ContentStatus.IN_SESSION - ? "var(--sys-main-color)" + props.contentStatus === ContentStatus.COIN + ? "var(--sys-default-main-color)" : props.contentStatus === ContentStatus.EXTENSION ? "var(--normal-text-color)" : "var(--white-text-with-bg-color)"}; From be69e65800f2a8b64bc220c3914137ed3086add8 Mon Sep 17 00:00:00 2001 From: jiminChoi Date: Thu, 22 Aug 2024 22:23:16 +0900 Subject: [PATCH 06/24] =?UTF-8?q?FE]=20FEAT:=20ManualModal=20=EC=95=84?= =?UTF-8?q?=EC=9D=B4=ED=85=9C=20=EB=82=B4=EC=9A=A9=EC=B6=94=EA=B0=80=20#16?= =?UTF-8?q?81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/Cabinet/assets/data/ManualContent.ts | 78 ++++++++++--- .../Modals/ManualModal/ManualModal.tsx | 105 ++++++++++++++++-- 2 files changed, 156 insertions(+), 27 deletions(-) diff --git a/frontend/src/Cabinet/assets/data/ManualContent.ts b/frontend/src/Cabinet/assets/data/ManualContent.ts index 237411760..01ce9d454 100644 --- a/frontend/src/Cabinet/assets/data/ManualContent.ts +++ b/frontend/src/Cabinet/assets/data/ManualContent.ts @@ -6,7 +6,7 @@ import { ReactComponent as PrivateIcon } from "@/Cabinet/assets/images/privateIc import { ReactComponent as ShareIcon } from "@/Cabinet/assets/images/shareIcon.svg"; import { ReactComponent as StoreImg } from "@/Cabinet/assets/images/storeIconGray.svg"; import ContentStatus from "@/Cabinet/types/enum/content.status.enum"; - +// import {StoreItemType} from "@/Cabinet/types/enum/store.enum" interface ContentStatusData { contentTitle: string; iconComponent: React.FunctionComponent> | null; @@ -16,6 +16,61 @@ interface ContentStatusData { contentText: string; pointColor: string; } +export enum StoreItemType { + EXTENSION = "EXTENSION", + SWAP = "SWAP", + ALARM = "ALARM", + PENALTY = "PENALTY", +} +export const ItemContentsData: Record = { + [StoreItemType.EXTENSION] : { + contentTitle: "개인 사물함", + iconComponent: PrivateIcon, + background: + "linear-gradient(to bottom, var(--ref-purple-400), var(--ref-purple-600))", + rentalPeriod: `${import.meta.env.VITE_PRIVATE_LENT_PERIOD}일`, + capacity: "1인", + contentText: `◦ 이용 방법
+ `, + pointColor: "var(--white-text-with-bg-color)", + }, + [StoreItemType.SWAP] : { + contentTitle: "개인 사물함", + iconComponent: PrivateIcon, + background: + "linear-gradient(to bottom, var(--ref-purple-400), var(--ref-purple-600))", + rentalPeriod: `${import.meta.env.VITE_PRIVATE_LENT_PERIOD}일`, + capacity: "1인", + contentText: `◦ 이용 방법
+ + `, + pointColor: "var(--white-text-with-bg-color)", + }, + [StoreItemType.ALARM] : { + contentTitle: "개인 사물함", + iconComponent: PrivateIcon, + background: + "linear-gradient(to bottom, var(--ref-purple-400), var(--ref-purple-600))", + rentalPeriod: `${import.meta.env.VITE_PRIVATE_LENT_PERIOD}일`, + capacity: "1인", + contentText: `◦ 이용 방법
+ + `, + pointColor: "var(--white-text-with-bg-color)", + }, + [StoreItemType.PENALTY] : { + contentTitle: "개인 사물함", + iconComponent: PrivateIcon, + background: + "linear-gradient(to bottom, var(--ref-purple-400), var(--ref-purple-600))", + rentalPeriod: `${import.meta.env.VITE_PRIVATE_LENT_PERIOD}일`, + capacity: "1인", + contentText: `◦ 이용 방법
+ `, + pointColor: "var(--white-text-with-bg-color)", + }, +} + export const manualContentData: Record = { [ContentStatus.PRIVATE]: { @@ -161,7 +216,7 @@ export const manualContentData: Record = { background: "var(--card-bg-color)", contentText: `◦ 160시간 출석하기
- 42 출석 160시간을 채운다면 2000까비가 지급됩니다.
+ 42 출석 160시간을 채운다면 다음달 2일에 2000까비가 지급됩니다.

◦ 동전줍기
@@ -180,23 +235,12 @@ export const manualContentData: Record = { pointColor: "var(--sys-main-color)", }, [ContentStatus.STORE]: { - contentTitle: "까비 상점 open", + contentTitle: "까비 상점 OPEN!", iconComponent: StoreImg, background: - "linear-gradient(180deg, rgba(161,123,243,1) 0%, rgba(131,55,229,1) 100%);", - contentText: `◦ 이용 방법
-
- 1인이 1개의 사물함을 사용합니다.
- 최대 ${ - import.meta.env.VITE_PRIVATE_LENT_PERIOD - }일간 대여할 수 있습니다.

-
- ◦ 페널티
-
- 연체 시 연체되는 일의 제곱 수만큼 페널티가 부과됩니다.
- 연체 페널티는 누적됩니다. -
+ "linear-gradient(to bottom, var(--ref-purple-400), var(--ref-purple-600))", + contentText: ` `, - pointColor: "var(--sys-main-color)", + pointColor: "var(--white-text-with-bg-color)", }, }; diff --git a/frontend/src/Cabinet/components/Modals/ManualModal/ManualModal.tsx b/frontend/src/Cabinet/components/Modals/ManualModal/ManualModal.tsx index 9427f8d03..c36f035cd 100644 --- a/frontend/src/Cabinet/components/Modals/ManualModal/ManualModal.tsx +++ b/frontend/src/Cabinet/components/Modals/ManualModal/ManualModal.tsx @@ -2,7 +2,12 @@ import React from "react"; import { useState } from "react"; import styled, { keyframes } from "styled-components"; import { manualContentData } from "@/Cabinet/assets/data/ManualContent"; +//store Icons +import { ReactComponent as ExtensionImg } from "@/Cabinet/assets/images/extension.svg"; import { ReactComponent as MoveBtnImg } from "@/Cabinet/assets/images/moveButton.svg"; +import { ReactComponent as AlarmImg } from "@/Cabinet/assets/images/storeAlarm.svg"; +import { ReactComponent as SwapImg } from "@/Cabinet/assets/images/storeMove.svg"; +import { ReactComponent as PenaltyImg } from "@/Cabinet/assets/images/storePenalty.svg"; import ContentStatus from "@/Cabinet/types/enum/content.status.enum"; interface ModalProps { @@ -28,6 +33,42 @@ const ManualModal: React.FC = ({ contentStatus === ContentStatus.SHARE || contentStatus === ContentStatus.CLUB; + const [selectedItem, setSelectedItem] = useState(0); + const storeItems = [ + { icon: ExtensionImg, title: "연장권", content: ` + + store 탭을 눌러 연장권 구매하기 버튼을 클릭 후 3일, 15일, 31일 단위로 구매할 수 있습니다.
+ 구매한 아이템은 인벤토리 탭에서 확인할 수 있습니다.
+
+ ◦ 사용방법
+
+ 사물함을 대여한 상태로, 상단 오른쪽의 상자 아이콘을 누르면 현재 자신의 사물함의 정보를 볼 수 있습니다.
+ 연장권 사용하기 버튼을 눌러 보유한 연장권 중 원하는 타입을 선택 후 사용합니다.
+ 이미 사용한 연장권은 취소할 수 없습니다.
+ 공유사물함의 모든 인원이 연장권을 사용할 수 있지만, 남은 인원이 한 명인 경우 연장권을 사용할 수 없습니다. +
+ ` }, + { icon: SwapImg, title: "이사권", content: ` + + 기존 일주일에 한 번 가능했던 이사하기 기능을 제한 없이 자유롭게 사용할 수 있습니다.
+ 현재 이용중인 사물함의 대여 기간을 유지한 채 다른 사물함으로 이사할 수 있습니다.
+ store 탭에서 구매할 수 있으며, 인벤토리 탭에서 구매한 아이템을 확인할 수 있습니다. +
+ ◦ 사용방법
+
+ 개인 사물함을 이용중인 사용자만 이사권을 사용할 수 있습니다.
+ 아이템을 보유한 상태로 비어있는 개인 사물함을 눌렀을 때 이사하기 버튼이 활성화됩니다.
+ 이미 사용한 이사권은 취소할 수 없습니다.
+ +
+ ` }, + { icon: AlarmImg, title: "알림 등록권", content: "ALARM" }, + { icon: PenaltyImg, title: "페널티 감면권", content: "PENALTY" }, + ]; + const handleIconClick = (index: number) => { + setSelectedItem(index); + }; + const closeModal = () => { if (modalIsOpen) { setModalIsOpen(false); @@ -76,12 +117,37 @@ const ManualModal: React.FC = ({ )} )} - {contentData.contentTitle} - -
- + {contentStatus === ContentStatus.STORE && ( + <> + + {storeItems.map((item, index) => ( + handleIconClick(index)} + className={selectedItem === index ? "selected" : ""} + > + + + ))} + + {storeItems[selectedItem].title} + +
+ + + )} + {contentStatus !== ContentStatus.STORE && ( + <> + {contentData.contentTitle} + +
+ + + )} @@ -145,7 +211,8 @@ const ModalWrapper = styled.div<{ border: ${(props) => props.contentStatus === ContentStatus.PENDING ? "5px double var(--sys-main-color)" - : props.contentStatus === ContentStatus.IN_SESSION || props.contentStatus === ContentStatus.COIN + : props.contentStatus === ContentStatus.IN_SESSION || + props.contentStatus === ContentStatus.COIN ? "5px solid var(--sys-main-color)" : "none"}; box-shadow: ${(props) => @@ -166,7 +233,8 @@ const ModalContent = styled.div<{ display: flex; flex-direction: column; color: ${(props) => - props.contentStatus === ContentStatus.IN_SESSION || props.contentStatus === ContentStatus.COIN + props.contentStatus === ContentStatus.IN_SESSION || + props.contentStatus === ContentStatus.COIN ? "var(--sys-main-color)" : props.contentStatus === ContentStatus.EXTENSION ? "var(--normal-text-color)" @@ -188,7 +256,8 @@ const ModalContent = styled.div<{ } .moveButton { stroke: ${(props) => - props.contentStatus === ContentStatus.IN_SESSION || props.contentStatus === ContentStatus.COIN + props.contentStatus === ContentStatus.IN_SESSION || + props.contentStatus === ContentStatus.COIN ? "var(--sys-main-color)" : props.contentStatus === ContentStatus.EXTENSION ? "var(--normal-text-color)" @@ -210,7 +279,8 @@ const CloseButton = styled.div<{ svg { transform: scaleX(-1); stroke: ${(props) => - props.contentStatus === ContentStatus.IN_SESSION || props.contentStatus === ContentStatus.COIN + props.contentStatus === ContentStatus.IN_SESSION || + props.contentStatus === ContentStatus.COIN ? "var(--sys-main-color)" : props.contentStatus === ContentStatus.EXTENSION ? "var(--normal-text-color)" @@ -330,4 +400,19 @@ const ContentImgStyled = styled.div<{ } `; +const ItemContentsStyled = styled.div` + width: 400px; + height: 80px; + // background-color: red; + display: flex; + margin-bottom:20px; +`; + +const ItemIconStyled = styled.div` + width: 80px; + height: 80px; + // background-color: blue; + margin-right: 10px; +`; + export default ManualModal; From 2d5b8639eba388b9fdedd104ac9b2fdcbe8a0d7e Mon Sep 17 00:00:00 2001 From: jusohn Eddie Sohn Date: Tue, 27 Aug 2024 14:10:29 +0900 Subject: [PATCH 07/24] =?UTF-8?q?[FE]=20FEAT:=20CSS=20clip-path=20?= =?UTF-8?q?=EB=A5=BC=20=EC=82=AC=EC=9A=A9=ED=95=B4=20STORE=20MandualConten?= =?UTF-8?q?tBox=20=EC=83=9D=EC=84=B1=20#1681?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Cabinet/components/Home/ServiceManual.tsx | 80 ++++++++++++++++++- 1 file changed, 78 insertions(+), 2 deletions(-) diff --git a/frontend/src/Cabinet/components/Home/ServiceManual.tsx b/frontend/src/Cabinet/components/Home/ServiceManual.tsx index add8c34c0..2e3953ad9 100644 --- a/frontend/src/Cabinet/components/Home/ServiceManual.tsx +++ b/frontend/src/Cabinet/components/Home/ServiceManual.tsx @@ -38,9 +38,13 @@ const ServiceManual = ({

당신의 사물함
- 당신의 방식으로, + 당신의 방식으로,

+ + + +
{/* */} - +
@@ -128,6 +132,78 @@ const ServiceManual = ({ ); }; +const TicketWrapperStyled = styled.div` + width: 620px; + &:hover { + transition: all 0.3s ease-in-out; + transform: translateY(-5px); + filter: drop-shadow(10px 10px 50px rgba(0, 0, 0, 0.2)); + } +`; +// 16.794 +const TicketStyled = styled.div` + display: flex; + align-items: center; + justify-content: flex-start; + font-size: 24px; + font-weight: bold; + width: 620px; + height: 300px; + position: relative; + background: linear-gradient( + to bottom, + var(--ref-purple-400), + var(--ref-purple-600) + ); + border-radius: 40px; + clip-path: path( + "M 0 175 + A 25 25 1 0 0 0 125 + L 0 0 + L 396.56 0 + L 413.354 16.794 + L 430.148 0 + L 620 0 + L 620 300 + L 430.148 300 + L 413.354 283.206 + L 396.56 300 + L 0 300 + Z" + ); + /* Explanation of path: + - M 0 175: Move to (0, 175) + - A 25 25 1 0 0 0 125: Draw an arc with radius 25, starting from (0, 175) to (0, 125) // radius-x, radius-y, x-axis-rotation, large-arc-flag, sweep-flag, x, y + - L 0 0: Draw a line from (0, 125) to (0, 0) + - L 396.56 0: Draw a line from (0, 0) to (396.56, 0) + - L 413.354 16.794: Draw a line from (396.56, 0) to (413.354, 16.794) + - L 430.148 0: Draw a line from (413.354, 16.794) to (430.148, 0) + - L 620 0: Draw a line from (430.148, 0) to (620, 0) + - L 620 300: Draw a line from (620, 0) to (620, 300) + - L 430.148 300: Draw a line from (620, 300) to (430.148, 300) + - L 413.354 283.206: Draw a line from (430.148, 300) to (413.354, 283.206) + - L 396.56 300: Draw a line from (413.354, 283.206) to (396.56, 300) + - L 0 300: Draw a line from (396.56, 300) to (0, 300) + - Z: Close the path + */ + &:after { + content: ""; + position: absolute; + top: 25px; + right: 32.99%; /* 2/3 point */ + height: 90%; + width: 4px; + background-image: linear-gradient( + to bottom, + white 33%, + rgba(255, 255, 255, 0) 0% + ); + background-position: right; + background-size: 10px 30px; + background-repeat: repeat-y; + } +`; + const WrapperStyled = styled.div` display: flex; flex-direction: column; From 8f9b82545f8a1441ceb785d4e307bb7ce11db201 Mon Sep 17 00:00:00 2001 From: jusohn Eddie Sohn Date: Tue, 27 Aug 2024 15:10:54 +0900 Subject: [PATCH 08/24] =?UTF-8?q?[FE]=20FIX:=20ManualContentBox=20?= =?UTF-8?q?=EC=9D=98=20CSS=20=EB=AA=A8=EB=93=88=ED=99=94=20#1681?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Home/ManualContentBoxStyles.ts | 54 +++++++++++++++++++ 1 file changed, 54 insertions(+) create mode 100644 frontend/src/Cabinet/components/Home/ManualContentBoxStyles.ts diff --git a/frontend/src/Cabinet/components/Home/ManualContentBoxStyles.ts b/frontend/src/Cabinet/components/Home/ManualContentBoxStyles.ts new file mode 100644 index 000000000..7b944ea58 --- /dev/null +++ b/frontend/src/Cabinet/components/Home/ManualContentBoxStyles.ts @@ -0,0 +1,54 @@ +import { css } from "styled-components"; + +export const extensionBoxStyles = css` + width: 900px; + color: var(--normal-text-color); + @media screen and (max-width: 1000px) { + width: 280px; + font-size: 21px; + } +`; + +export const storeBoxStyles = css` + width: 620px; + color: var(--white-text-with-bg-color); + position: relative; + &:after { + content: ""; + position: absolute; + top: 0; + left: 66.67%; + height: 100%; + width: 4px; + background-image: linear-gradient( + to bottom, + white 33%, + rgba(255, 255, 255, 0) 0% + ); + background-position: right; + background-size: 10px 30px; + background-repeat: repeat-y; + } + @media screen and (max-width: 1000px) { + width: 280px; + font-size: 21px; + &:after { + left: 186.67px; + } + } +`; + +export const coinBoxStyles = css` + border: 5px solid var(--sys-main-color); + color: var(--sys-main-color); +`; + +export const pendingBoxStyles = css` + border: 6px double var(--sys-main-color); + box-shadow: inset 0px 0px 0px 5px var(--bg-color); +`; + +export const inSessionBoxStyles = css` + border: 5px solid var(--sys-main-color); + color: var(--sys-main-color); +`; From aaf0aa4c0d319344fa4464aa2434e253630047b4 Mon Sep 17 00:00:00 2001 From: jusohn Eddie Sohn Date: Tue, 27 Aug 2024 15:11:32 +0900 Subject: [PATCH 09/24] =?UTF-8?q?[FE]=20FIX:=20ManualContentBox=20?= =?UTF-8?q?=EC=9D=98=20CSS=20Map=20=EC=83=9D=EC=84=B1=20#1681?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/Cabinet/assets/data/maps.ts | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/frontend/src/Cabinet/assets/data/maps.ts b/frontend/src/Cabinet/assets/data/maps.ts index 8706697ba..0d529f172 100644 --- a/frontend/src/Cabinet/assets/data/maps.ts +++ b/frontend/src/Cabinet/assets/data/maps.ts @@ -1,3 +1,11 @@ +import { css } from "styled-components"; +import { + coinBoxStyles, + extensionBoxStyles, + inSessionBoxStyles, + pendingBoxStyles, + storeBoxStyles, +} from "@/Cabinet/components/Home/ManualContentBoxStyles"; import { ReactComponent as ClubIcon } from "@/Cabinet/assets/images/clubIcon.svg"; import { ReactComponent as ExtensionImg } from "@/Cabinet/assets/images/extension.svg"; import { ReactComponent as PrivateIcon } from "@/Cabinet/assets/images/privateIcon.svg"; @@ -7,6 +15,7 @@ import { ReactComponent as SwapImg } from "@/Cabinet/assets/images/storeMove.svg import { ReactComponent as PenaltyImg } from "@/Cabinet/assets/images/storePenalty.svg"; import CabinetStatus from "@/Cabinet/types/enum/cabinet.status.enum"; import CabinetType from "@/Cabinet/types/enum/cabinet.type.enum"; +import ContentStatus from "@/Cabinet/types/enum/content.status.enum"; import { StoreExtensionType, StoreItemType, @@ -267,3 +276,16 @@ export const ItemTypeExtensionMap = { [StoreExtensionType.EXTENSION_15]: "15일", [StoreExtensionType.EXTENSION_31]: "31일", }; + +export const ContentStatusStylesMap: { + [key in ContentStatus]: any; +} = { + [ContentStatus.EXTENSION]: extensionBoxStyles, + [ContentStatus.STORE]: storeBoxStyles, + [ContentStatus.COIN]: coinBoxStyles, + [ContentStatus.PENDING]: pendingBoxStyles, + [ContentStatus.IN_SESSION]: inSessionBoxStyles, + [ContentStatus.PRIVATE]: css``, + [ContentStatus.SHARE]: css``, + [ContentStatus.CLUB]: css``, +}; From 28373d928f4786f041fed820cfb8b4e81b79cdf0 Mon Sep 17 00:00:00 2001 From: jusohn Eddie Sohn Date: Tue, 27 Aug 2024 15:12:19 +0900 Subject: [PATCH 10/24] =?UTF-8?q?[FE]=20FIX:=20CSS=20Map=20=EC=9D=84=20?= =?UTF-8?q?=EC=82=AC=EC=9A=A9=ED=95=B4=20ManualContentBoxStyled=20?= =?UTF-8?q?=EA=B0=84=EC=86=8C=ED=99=94=20#1681?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Home/ManualContentBox.tsx | 82 ++----------------- 1 file changed, 5 insertions(+), 77 deletions(-) diff --git a/frontend/src/Cabinet/components/Home/ManualContentBox.tsx b/frontend/src/Cabinet/components/Home/ManualContentBox.tsx index b9ee271f5..2d4f396ec 100644 --- a/frontend/src/Cabinet/components/Home/ManualContentBox.tsx +++ b/frontend/src/Cabinet/components/Home/ManualContentBox.tsx @@ -1,5 +1,6 @@ import styled, { css, keyframes } from "styled-components"; import { manualContentData } from "@/Cabinet/assets/data/ManualContent"; +import { ContentStatusStylesMap } from "@/Cabinet/assets/data/maps"; import { ReactComponent as ManualPeopleImg } from "@/Cabinet/assets/images/manualPeople.svg"; import { ReactComponent as MoveBtnImg } from "@/Cabinet/assets/images/moveButton.svg"; import ContentStatus from "@/Cabinet/types/enum/content.status.enum"; @@ -84,6 +85,8 @@ const ManualContentBoxStyled = styled.div<{ font-weight: bold; cursor: pointer; + ${(props) => ContentStatusStylesMap[props.contentStatus]} + .clockImg { width: 35px; margin-right: 10px; @@ -120,82 +123,7 @@ const ManualContentBoxStyled = styled.div<{ fill: var(--sys-main-color); } - // 상자 - ${({ contentStatus }) => - contentStatus === ContentStatus.COIN && - css` - border: 5px solid var(--sys-main-color); - color: var(--sys-main-color); - // border: 6px solid var(--sys-main-color); - // color: var(--sys-main-color); - /* color: var(--custom-purple-200); */ - /* box-shadow: inset 0px 0px 0px 5px var(--bg-color); */ - `} - - ${({ contentStatus }) => - contentStatus === ContentStatus.STORE && - css` - width: 620px; - color: var(--white-text-with-bg-color); - position: relative; /* Added for positioning the pseudo-element */ - - &:after { - content: ""; - position: absolute; - top: 0; - left: 66.67%; /* 3분의 2 지점 */ - height: 100%; - width: 4px; /* 점선의 가로 너비 */ - background-image: linear-gradient( - to bottom, - white 33%, - rgba(255, 255, 255, 0) 0% - ); - background-position: right; - background-size: 10px 30px; /* 점의 세로 크기 10px, 간격 5px */ - background-repeat: repeat-y; - } - @media screen and (max-width: 1000px) { - width: 280px; - .peopleImg { - display: none; - } - font-size: 21px; - &:after { - left: 186.67px; /* 280px의 3분의 2 지점 */ - } - } - `} - - ${({ contentStatus }) => - contentStatus === ContentStatus.PENDING && - css` - border: 6px double var(--sys-main-color); - box-shadow: inset 0px 0px 0px 5px var(--bg-color); - `} - - ${({ contentStatus }) => - contentStatus === ContentStatus.IN_SESSION && - css` - border: 5px solid var(--sys-main-color); - color: var(--sys-main-color); - `} - - ${({ contentStatus }) => - contentStatus === ContentStatus.EXTENSION && - css` - width: 900px; - color: var(--normal-text-color); - @media screen and (max-width: 1000px) { - width: 280px; - .peopleImg { - display: none; - } - font-size: 21px; - } - `} - - p { + p { margin-top: 90px; ${({ contentStatus }) => (contentStatus === ContentStatus.PENDING || @@ -220,7 +148,7 @@ const ManualContentBoxStyled = styled.div<{ cursor: pointer; } - :hover { + &:hover { transition: all 0.3s ease-in-out; ${({ contentStatus }) => contentStatus === ContentStatus.PENDING From b9de7ff7ef53c8c0e04eae90fe44be6f19f7a06c Mon Sep 17 00:00:00 2001 From: Minkyu01 Date: Wed, 28 Aug 2024 14:37:24 +0900 Subject: [PATCH 11/24] =?UTF-8?q?[FE]=20FEAT:=20=ED=8B=B0=EC=BC=93=20?= =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EA=B7=B8=EB=A6=BC=EC=9E=90=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9=20#1681?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Home/ManualContentBox.tsx | 26 ++++----- .../components/Home/ManualContentBoxStyles.ts | 54 ++++++++++++++---- .../Cabinet/components/Home/ServiceManual.tsx | 55 +++++-------------- 3 files changed, 67 insertions(+), 68 deletions(-) diff --git a/frontend/src/Cabinet/components/Home/ManualContentBox.tsx b/frontend/src/Cabinet/components/Home/ManualContentBox.tsx index 2d4f396ec..331a004e9 100644 --- a/frontend/src/Cabinet/components/Home/ManualContentBox.tsx +++ b/frontend/src/Cabinet/components/Home/ManualContentBox.tsx @@ -28,12 +28,6 @@ const ManualContentBox = ({ contentStatus }: ManualContentBoxProps) => {

{contentData.contentTitle}

 - {contentStatus === ContentStatus.STORE && ( - <> - - - - )} @@ -99,12 +93,6 @@ const ManualContentBoxStyled = styled.div<{ width: 80px; height: 80px; - /* & > path { - stroke: ${(props) => - props.contentStatus === ContentStatus.EXTENSION - ? "var(--normal-text-color)" - : "var(--white-text-with-bg-color)"}; - } */ & > path { stroke: ${(props) => props.contentStatus === ContentStatus.COIN @@ -154,18 +142,24 @@ const ManualContentBoxStyled = styled.div<{ contentStatus === ContentStatus.PENDING ? css` border: 5px double var(--sys-main-color); - box-shadow: inset 0px 0px 0px 5px var(--bg-color), - 10px 10px 25px 0 var(--left-nav-border-shadow-color); + box-shadow: inset 0px 0px 0px 5px var(--bg-color); + filter: drop-shadow( + 10px 10px 10px var(--left-nav-border-shadow-color) + ); ` + : contentStatus === ContentStatus.STORE + ? css`` // No box-shadow or filter for STORE status : css` - box-shadow: 10px 10px 25px 0 var(--left-nav-border-shadow-color); + filter: drop-shadow( + 10px 10px 10px var(--left-nav-border-shadow-color) + ); `} + p { transition: all 0.3s ease-in-out; transform: translateY(-5px); ${({ contentStatus }) => (contentStatus === ContentStatus.PENDING || - contentStatus === ContentStatus.COIN || contentStatus === ContentStatus.IN_SESSION) && css` margin-top: 155px; diff --git a/frontend/src/Cabinet/components/Home/ManualContentBoxStyles.ts b/frontend/src/Cabinet/components/Home/ManualContentBoxStyles.ts index 7b944ea58..75e21c877 100644 --- a/frontend/src/Cabinet/components/Home/ManualContentBoxStyles.ts +++ b/frontend/src/Cabinet/components/Home/ManualContentBoxStyles.ts @@ -11,13 +11,49 @@ export const extensionBoxStyles = css` export const storeBoxStyles = css` width: 620px; - color: var(--white-text-with-bg-color); + height: 280px; position: relative; + background: linear-gradient( + to bottom, + var(--ref-purple-400), + var(--ref-purple-600) + ); + border-radius: 40px; + clip-path: path( + "M 0 163.33 + A 23.33 23.33 1 0 0 0 116.67 + L 0 0 + L 396.56 0 + L 413.354 15.67 + L 430.148 0 + L 620 0 + L 620 280 + L 430.148 280 + L 413.354 264.33 + L 396.56 280 + L 0 280 + Z" + ); + /* Explanation of path: + - M 0 175: Move to (0, 175) + - A 25 25 1 0 0 0 125: Draw an arc with radius 25, starting from (0, 175) to (0, 125) // radius-x, radius-y, x-axis-rotation, large-arc-flag, sweep-flag, x, y + - L 0 0: Draw a line from (0, 125) to (0, 0) + - L 396.56 0: Draw a line from (0, 0) to (396.56, 0) + - L 413.354 16.794: Draw a line from (396.56, 0) to (413.354, 16.794) + - L 430.148 0: Draw a line from (413.354, 16.794) to (430.148, 0) + - L 620 0: Draw a line from (430.148, 0) to (620, 0) + - L 620 300: Draw a line from (620, 0) to (620, 300) + - L 430.148 300: Draw a line from (620, 300) to (430.148, 300) + - L 413.354 283.206: Draw a line from (430.148, 300) to (413.354, 283.206) + - L 396.56 300: Draw a line from (413.354, 283.206) to (396.56, 300) + - L 0 300: Draw a line from (396.56, 300) to (0, 300) + - Z: Close the path + */ &:after { content: ""; position: absolute; - top: 0; - left: 66.67%; + top: 25px; + right: 32.99%; /* 2/3 point */ height: 100%; width: 4px; background-image: linear-gradient( @@ -29,13 +65,6 @@ export const storeBoxStyles = css` background-size: 10px 30px; background-repeat: repeat-y; } - @media screen and (max-width: 1000px) { - width: 280px; - font-size: 21px; - &:after { - left: 186.67px; - } - } `; export const coinBoxStyles = css` @@ -52,3 +81,8 @@ export const inSessionBoxStyles = css` border: 5px solid var(--sys-main-color); color: var(--sys-main-color); `; + +export const privateBoxStyles = css` + /* border: 5px solid var(--sys-main-color); + color: var(--sys-main-color); */ +`; diff --git a/frontend/src/Cabinet/components/Home/ServiceManual.tsx b/frontend/src/Cabinet/components/Home/ServiceManual.tsx index 2e3953ad9..99940437d 100644 --- a/frontend/src/Cabinet/components/Home/ServiceManual.tsx +++ b/frontend/src/Cabinet/components/Home/ServiceManual.tsx @@ -41,9 +41,9 @@ const ServiceManual = ({ 당신의 방식으로,

- + {/* - + */}
{/*

new

*/}
-
openModal(ContentStatus.STORE)} - > - - {/*

new

*/} -
+ +
openModal(ContentStatus.STORE)} + > + + {/*

new

*/} +
+

@@ -84,41 +86,9 @@ const ServiceManual = ({ className="article" onClick={() => openModal(ContentStatus.IN_SESSION)} > - {/* - */} - - - {/*

openModal(ContentStatus.PENDING)} - > - -

new

-
*/} -
openModal(ContentStatus.IN_SESSION)} - > - -

new

-
- - {/*

- 사물함을 더 오래 -
- 사용할 수 있는 방법. -

- -
openModal(ContentStatus.EXTENSION)} - > - -
- */} @@ -137,7 +107,8 @@ const TicketWrapperStyled = styled.div` &:hover { transition: all 0.3s ease-in-out; transform: translateY(-5px); - filter: drop-shadow(10px 10px 50px rgba(0, 0, 0, 0.2)); + /* filter: drop-shadow(10px 10px 8px rgba(0, 0, 0, 0.2)); */ + filter: drop-shadow(10px 10px 10px var(--left-nav-border-shadow-color)); } `; // 16.794 From 3508e275d816c4342681afed593d952fcfe13259 Mon Sep 17 00:00:00 2001 From: jiminChoi Date: Wed, 28 Aug 2024 15:29:44 +0900 Subject: [PATCH 12/24] =?UTF-8?q?[FE]=20FEAT:=20ManualModal=20=EC=95=84?= =?UTF-8?q?=EC=9D=B4=EC=BD=98=20=ED=98=B8=EB=B2=84=20=ED=9A=A8=EA=B3=BC=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9=20#1681?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/Cabinet/assets/data/ManualContent.ts | 87 ++++++++- frontend/src/Cabinet/assets/data/maps.ts | 2 +- .../Card/StoreItemCard/StoreItemCard.tsx | 2 - .../Modals/ManualModal/ManualModal.tsx | 166 ++++++++++++------ 4 files changed, 197 insertions(+), 60 deletions(-) diff --git a/frontend/src/Cabinet/assets/data/ManualContent.ts b/frontend/src/Cabinet/assets/data/ManualContent.ts index 01ce9d454..29633ba67 100644 --- a/frontend/src/Cabinet/assets/data/ManualContent.ts +++ b/frontend/src/Cabinet/assets/data/ManualContent.ts @@ -1,3 +1,4 @@ +import { ItemIconMap } from "@/Cabinet/assets/data/maps"; import { ReactComponent as ClockImg } from "@/Cabinet/assets/images/clock.svg"; import { ReactComponent as ClubIcon } from "@/Cabinet/assets/images/clubIcon.svg"; import { ReactComponent as DollarImg } from "@/Cabinet/assets/images/coinDolar.svg"; @@ -6,6 +7,7 @@ import { ReactComponent as PrivateIcon } from "@/Cabinet/assets/images/privateIc import { ReactComponent as ShareIcon } from "@/Cabinet/assets/images/shareIcon.svg"; import { ReactComponent as StoreImg } from "@/Cabinet/assets/images/storeIconGray.svg"; import ContentStatus from "@/Cabinet/types/enum/content.status.enum"; + // import {StoreItemType} from "@/Cabinet/types/enum/store.enum" interface ContentStatusData { contentTitle: string; @@ -22,8 +24,8 @@ export enum StoreItemType { ALARM = "ALARM", PENALTY = "PENALTY", } -export const ItemContentsData: Record = { - [StoreItemType.EXTENSION] : { +export const ItemContentsData: Record = { + [StoreItemType.EXTENSION]: { contentTitle: "개인 사물함", iconComponent: PrivateIcon, background: @@ -34,7 +36,7 @@ export const ItemContentsData: Record = { `, pointColor: "var(--white-text-with-bg-color)", }, - [StoreItemType.SWAP] : { + [StoreItemType.SWAP]: { contentTitle: "개인 사물함", iconComponent: PrivateIcon, background: @@ -46,7 +48,7 @@ export const ItemContentsData: Record = { `, pointColor: "var(--white-text-with-bg-color)", }, - [StoreItemType.ALARM] : { + [StoreItemType.ALARM]: { contentTitle: "개인 사물함", iconComponent: PrivateIcon, background: @@ -58,7 +60,7 @@ export const ItemContentsData: Record = { `, pointColor: "var(--white-text-with-bg-color)", }, - [StoreItemType.PENALTY] : { + [StoreItemType.PENALTY]: { contentTitle: "개인 사물함", iconComponent: PrivateIcon, background: @@ -69,8 +71,7 @@ export const ItemContentsData: Record = { `, pointColor: "var(--white-text-with-bg-color)", }, -} - +}; export const manualContentData: Record = { [ContentStatus.PRIVATE]: { @@ -238,9 +239,79 @@ export const manualContentData: Record = { contentTitle: "까비 상점 OPEN!", iconComponent: StoreImg, background: - "linear-gradient(to bottom, var(--ref-purple-400), var(--ref-purple-600))", + "linear-gradient(to bottom, var(--ref-purple-400), var(--ref-purple-600))", contentText: ` `, pointColor: "var(--white-text-with-bg-color)", }, }; + +export const storeItems = [ + { + icon: ItemIconMap.EXTENSION, + title: "연장권", + content: ` + store 탭을 눌러 연장권 구매하기 버튼을 클릭 후 3일, 15일, 31일 단위로 구매할 수 있습니다.
+ 구매한 아이템은 인벤토리 탭에서 확인할 수 있습니다.
+
+ ◦ 사용방법
+
+ 사물함을 대여한 상태로, 상단 오른쪽의 상자 아이콘을 누르면 현재 자신의 사물함의 정보를 볼 수 있습니다.
+ 연장권 사용하기 버튼을 눌러 보유한 연장권 중 원하는 타입을 선택 후 사용합니다.
+ 이미 사용한 연장권은 취소할 수 없습니다.
+ 공유사물함의 모든 인원이 연장권을 사용할 수 있지만, 남은 인원이 한 명인 경우 연장권을 사용할 수 없습니다. +
+ `, + }, + { + icon: ItemIconMap.SWAP, + title: "이사권", + content: ` + + 기존 일주일에 한 번 가능했던 이사하기 기능을 제한 없이 자유롭게 사용할 수 있습니다.
+ 현재 이용중인 사물함의 대여 기간을 유지한 채 다른 사물함으로 이사할 수 있습니다.
+ store 탭에서 구매할 수 있으며, 인벤토리 탭에서 구매한 아이템을 확인할 수 있습니다. +
+ ◦ 사용방법
+
+ 개인 사물함을 이용중인 사용자만 이사권을 사용할 수 있습니다.
+ 아이템을 보유한 상태로 비어있는 개인 사물함을 눌렀을 때 이사하기 버튼이 활성화됩니다.
+ 이미 사용한 이사권은 취소할 수 없습니다.
+ +
+ `, + }, + { + icon: ItemIconMap.ALARM, + title: "알림 등록권", + content: ` + 내가 원하는 섹션에 빈 자리가 나온다면 알림을 받을 수 있습니다.
+ 개인사물함에 대해서만 알림을 받을 수 있습니다.
+ store 탭에서 구매할 수 있으며, 인벤토리 탭에서 구매한 아이템을 확인할 수 있습니다.
+
+ ◦ 사용방법
+
+ 아이템 구매 후 원하는 섹션으로 이동해 우측 상단의 하트 아이콘을 클릭합니다.
+ 사용한 알림 등록권은 섹션을 변경하거나 취소할 수 없습니다.
+ 알림등록권은 1화 알림 후 소멸됩니다. +
+ + `, + }, + { + icon: ItemIconMap.PENALTY, + title: "페널티 감면권", + content: ` + 페널티 감면권은 7일, 15일, 31일 단위로 구매할 수 있습니다.
+ 구매한 아이템은 인벤토리 탭에서 확인할 수 있습니다.
+
+ ◦ 사용방법
+
+ 사물함 대여 불가 페널티가 부과된 유저라면 Profile 탭을 눌러 대여정보 상자 상단의
+ 페널티 감면권 사용하기 버튼이 활성화됩니다.
+ 버튼을 눌러 내가 보유한 페널티 감면권을 선택하면, 남은 페널티 기간을 확인하실 수 있습니다.
+ 연체된 사물함을 아직 반납하지 않았다면, 우선 반납하기 버튼을 눌러야 사용 버튼이 활성화됩니다. +
+ `, + }, +]; diff --git a/frontend/src/Cabinet/assets/data/maps.ts b/frontend/src/Cabinet/assets/data/maps.ts index 0d529f172..a1bfdfc83 100644 --- a/frontend/src/Cabinet/assets/data/maps.ts +++ b/frontend/src/Cabinet/assets/data/maps.ts @@ -7,7 +7,7 @@ import { storeBoxStyles, } from "@/Cabinet/components/Home/ManualContentBoxStyles"; import { ReactComponent as ClubIcon } from "@/Cabinet/assets/images/clubIcon.svg"; -import { ReactComponent as ExtensionImg } from "@/Cabinet/assets/images/extension.svg"; +import { ReactComponent as ExtensionImg } from "@/Cabinet/assets/images/storeExtension.svg"; import { ReactComponent as PrivateIcon } from "@/Cabinet/assets/images/privateIcon.svg"; import { ReactComponent as ShareIcon } from "@/Cabinet/assets/images/shareIcon.svg"; import { ReactComponent as AlarmImg } from "@/Cabinet/assets/images/storeAlarm.svg"; diff --git a/frontend/src/Cabinet/components/Card/StoreItemCard/StoreItemCard.tsx b/frontend/src/Cabinet/components/Card/StoreItemCard/StoreItemCard.tsx index 717e0c2df..17b021574 100644 --- a/frontend/src/Cabinet/components/Card/StoreItemCard/StoreItemCard.tsx +++ b/frontend/src/Cabinet/components/Card/StoreItemCard/StoreItemCard.tsx @@ -137,8 +137,6 @@ const ItemIconStyled = styled.div<{ itemType: StoreItemType }>` & > svg > path { stroke: var(--white-text-with-bg-color); - stroke-width: ${(props) => - props.itemType === StoreItemType.EXTENSION ? "2.8px" : "1.5px"}; } `; diff --git a/frontend/src/Cabinet/components/Modals/ManualModal/ManualModal.tsx b/frontend/src/Cabinet/components/Modals/ManualModal/ManualModal.tsx index c36f035cd..957fc4df8 100644 --- a/frontend/src/Cabinet/components/Modals/ManualModal/ManualModal.tsx +++ b/frontend/src/Cabinet/components/Modals/ManualModal/ManualModal.tsx @@ -2,12 +2,9 @@ import React from "react"; import { useState } from "react"; import styled, { keyframes } from "styled-components"; import { manualContentData } from "@/Cabinet/assets/data/ManualContent"; -//store Icons -import { ReactComponent as ExtensionImg } from "@/Cabinet/assets/images/extension.svg"; +import { storeItems } from "@/Cabinet/assets/data/ManualContent"; +import { ItemIconMap } from "@/Cabinet/assets/data/maps"; import { ReactComponent as MoveBtnImg } from "@/Cabinet/assets/images/moveButton.svg"; -import { ReactComponent as AlarmImg } from "@/Cabinet/assets/images/storeAlarm.svg"; -import { ReactComponent as SwapImg } from "@/Cabinet/assets/images/storeMove.svg"; -import { ReactComponent as PenaltyImg } from "@/Cabinet/assets/images/storePenalty.svg"; import ContentStatus from "@/Cabinet/types/enum/content.status.enum"; interface ModalProps { @@ -34,37 +31,75 @@ const ManualModal: React.FC = ({ contentStatus === ContentStatus.CLUB; const [selectedItem, setSelectedItem] = useState(0); - const storeItems = [ - { icon: ExtensionImg, title: "연장권", content: ` - - store 탭을 눌러 연장권 구매하기 버튼을 클릭 후 3일, 15일, 31일 단위로 구매할 수 있습니다.
- 구매한 아이템은 인벤토리 탭에서 확인할 수 있습니다.
-
- ◦ 사용방법
-
- 사물함을 대여한 상태로, 상단 오른쪽의 상자 아이콘을 누르면 현재 자신의 사물함의 정보를 볼 수 있습니다.
- 연장권 사용하기 버튼을 눌러 보유한 연장권 중 원하는 타입을 선택 후 사용합니다.
- 이미 사용한 연장권은 취소할 수 없습니다.
- 공유사물함의 모든 인원이 연장권을 사용할 수 있지만, 남은 인원이 한 명인 경우 연장권을 사용할 수 없습니다. -
- ` }, - { icon: SwapImg, title: "이사권", content: ` - - 기존 일주일에 한 번 가능했던 이사하기 기능을 제한 없이 자유롭게 사용할 수 있습니다.
- 현재 이용중인 사물함의 대여 기간을 유지한 채 다른 사물함으로 이사할 수 있습니다.
- store 탭에서 구매할 수 있으며, 인벤토리 탭에서 구매한 아이템을 확인할 수 있습니다. -
- ◦ 사용방법
-
- 개인 사물함을 이용중인 사용자만 이사권을 사용할 수 있습니다.
- 아이템을 보유한 상태로 비어있는 개인 사물함을 눌렀을 때 이사하기 버튼이 활성화됩니다.
- 이미 사용한 이사권은 취소할 수 없습니다.
- -
- ` }, - { icon: AlarmImg, title: "알림 등록권", content: "ALARM" }, - { icon: PenaltyImg, title: "페널티 감면권", content: "PENALTY" }, - ]; + // const storeItems = [ + // { + // icon: ItemIconMap.EXTENSION, + // title: "연장권", + // content: ` + // store 탭을 눌러 연장권 구매하기 버튼을 클릭 후 3일, 15일, 31일 단위로 구매할 수 있습니다.
+ // 구매한 아이템은 인벤토리 탭에서 확인할 수 있습니다.
+ //
+ // ◦ 사용방법
+ //
+ // 사물함을 대여한 상태로, 상단 오른쪽의 상자 아이콘을 누르면 현재 자신의 사물함의 정보를 볼 수 있습니다.
+ // 연장권 사용하기 버튼을 눌러 보유한 연장권 중 원하는 타입을 선택 후 사용합니다.
+ // 이미 사용한 연장권은 취소할 수 없습니다.
+ // 공유사물함의 모든 인원이 연장권을 사용할 수 있지만, 남은 인원이 한 명인 경우 연장권을 사용할 수 없습니다. + //
+ // `, + // }, + // { + // icon: ItemIconMap.SWAP, + // title: "이사권", + // content: ` + // + // 기존 일주일에 한 번 가능했던 이사하기 기능을 제한 없이 자유롭게 사용할 수 있습니다.
+ // 현재 이용중인 사물함의 대여 기간을 유지한 채 다른 사물함으로 이사할 수 있습니다.
+ // store 탭에서 구매할 수 있으며, 인벤토리 탭에서 구매한 아이템을 확인할 수 있습니다. + //
+ // ◦ 사용방법
+ //
+ // 개인 사물함을 이용중인 사용자만 이사권을 사용할 수 있습니다.
+ // 아이템을 보유한 상태로 비어있는 개인 사물함을 눌렀을 때 이사하기 버튼이 활성화됩니다.
+ // 이미 사용한 이사권은 취소할 수 없습니다.
+ + //
+ // `, + // }, + // { + // icon: ItemIconMap.ALARM, + // title: "알림 등록권", + // content: ` + // 내가 원하는 섹션에 빈 자리가 나온다면 알림을 받을 수 있습니다.
+ // 개인사물함에 대해서만 알림을 받을 수 있습니다.
+ // store 탭에서 구매할 수 있으며, 인벤토리 탭에서 구매한 아이템을 확인할 수 있습니다.
+ //
+ // ◦ 사용방법
+ //
+ // 아이템 구매 후 원하는 섹션으로 이동해 우측 상단의 하트 아이콘을 클릭합니다.
+ // 사용한 알림 등록권은 섹션을 변경하거나 취소할 수 없습니다.
+ // 알림등록권은 1화 알림 후 소멸됩니다. + //
+ + // `, + // }, + // { + // icon: ItemIconMap.PENALTY, + // title: "페널티 감면권", + // content: ` + // 페널티 감면권은 7일, 15일, 31일 단위로 구매할 수 있습니다.
+ // 구매한 아이템은 인벤토리 탭에서 확인할 수 있습니다.
+ //
+ // ◦ 사용방법
+ //
+ // 사물함 대여 불가 페널티가 부과된 유저라면 Profile 탭을 눌러 대여정보 상자 상단의
+ // 페널티 감면권 사용하기 버튼이 활성화됩니다.
+ // 버튼을 눌러 내가 보유한 페널티 감면권을 선택하면, 남은 페널티 기간을 확인하실 수 있습니다.
+ // 연체된 사물함을 아직 반납하지 않았다면, 우선 반납하기 버튼을 눌러야 사용 버튼이 활성화됩니다. + //
+ // `, + // }, + // ]; const handleIconClick = (index: number) => { setSelectedItem(index); }; @@ -125,6 +160,7 @@ const ManualModal: React.FC = ({ key={index} onClick={() => handleIconClick(index)} className={selectedItem === index ? "selected" : ""} + color={contentData.pointColor} > @@ -132,21 +168,23 @@ const ManualModal: React.FC = ({ {storeItems[selectedItem].title} -
- + )} {contentStatus !== ContentStatus.STORE && ( <> - {contentData.contentTitle} - -
+
- - + + )} @@ -403,16 +441,46 @@ const ContentImgStyled = styled.div<{ const ItemContentsStyled = styled.div` width: 400px; height: 80px; - // background-color: red; display: flex; - margin-bottom:20px; + margin-bottom: 30px; `; -const ItemIconStyled = styled.div` +const ItemIconStyled = styled.div<{ + color: string; +}>` width: 80px; height: 80px; - // background-color: blue; margin-right: 10px; + display: flex; + justify-content: center; + align-items: center; + &.selected > svg { + filter: drop-shadow(0px 6px 3px var(--hover-box-shadow-color)); + width: 80px; + height: 80px; + & > path { + // stroke: red; + stroke: ${(props) => props.color}; + } + } + & > svg { + width: 50px; + height: 50px; + // filter: drop-shadow(0px 3px 1px var(--hover-box-shadow-color)); + & > path { + transition: all 0.3s ease; + stroke: var(--ref-purple-690); + } + + &:hover { + filter: drop-shadow(0px 6px 3px var(--hover-box-shadow-color)); + width: 80px; + height: 80px; + & > path { + stroke: ${(props) => props.color}; + } + } + } `; export default ManualModal; From 41f9a4e734e8417c8bffb92bceb2ca99cfc3db9b Mon Sep 17 00:00:00 2001 From: Minkyu01 Date: Wed, 28 Aug 2024 20:48:59 +0900 Subject: [PATCH 13/24] =?UTF-8?q?[FE]=20FEAT:=20=ED=8B=B0=EC=BC=93=20?= =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EB=B0=98=EC=9D=91=ED=98=95=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9=20#1681?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- config | 2 +- .../components/Home/ManualContentBox.tsx | 21 ------------------- .../components/Home/ManualContentBoxStyles.ts | 9 ++++++++ .../Cabinet/components/Home/ServiceManual.tsx | 6 ------ 4 files changed, 10 insertions(+), 28 deletions(-) diff --git a/config b/config index f185aa6c7..dd72d80cc 160000 --- a/config +++ b/config @@ -1 +1 @@ -Subproject commit f185aa6c734e4c7f8dd672610802e25c5c4f8d3e +Subproject commit dd72d80cce8800e34f3938f3da0dfeb4ef9eb8eb diff --git a/frontend/src/Cabinet/components/Home/ManualContentBox.tsx b/frontend/src/Cabinet/components/Home/ManualContentBox.tsx index 331a004e9..35d9127be 100644 --- a/frontend/src/Cabinet/components/Home/ManualContentBox.tsx +++ b/frontend/src/Cabinet/components/Home/ManualContentBox.tsx @@ -34,27 +34,6 @@ const ManualContentBox = ({ contentStatus }: ManualContentBoxProps) => { ); }; -const StoreCardCircle = styled.div` - top: -12px; - right: 193px; - rotate: 45deg; - width: 0; - height: 0; - border-bottom: 24px solid white; - border-left: 24px solid transparent; - position: absolute; - - :hover { - transition: all 0.3s ease-in-out; - transform: translateY(-5px); - } - &.bottom { - border-bottom: 24px solid transparent; - border-left: 24px solid white; - top: 268px; - } -`; - const Rotation = keyframes` to { transform : rotate(360deg) diff --git a/frontend/src/Cabinet/components/Home/ManualContentBoxStyles.ts b/frontend/src/Cabinet/components/Home/ManualContentBoxStyles.ts index 75e21c877..2eccf448d 100644 --- a/frontend/src/Cabinet/components/Home/ManualContentBoxStyles.ts +++ b/frontend/src/Cabinet/components/Home/ManualContentBoxStyles.ts @@ -65,6 +65,15 @@ export const storeBoxStyles = css` background-size: 10px 30px; background-repeat: repeat-y; } + @media screen and (max-width: 1100px) { + width: 280px; + font-size: 21px; + clip-path: none; + + &:after { + display: none; + } + } `; export const coinBoxStyles = css` diff --git a/frontend/src/Cabinet/components/Home/ServiceManual.tsx b/frontend/src/Cabinet/components/Home/ServiceManual.tsx index 99940437d..6d6f24025 100644 --- a/frontend/src/Cabinet/components/Home/ServiceManual.tsx +++ b/frontend/src/Cabinet/components/Home/ServiceManual.tsx @@ -41,17 +41,12 @@ const ServiceManual = ({ 당신의 방식으로,

- {/* - - */} -
openModal(ContentStatus.COIN)} > - {/*

new

*/}
openModal(ContentStatus.STORE)} > - {/*

new

*/}
From b2ba01eab964a36711719ef8ece86b542fe97ecd Mon Sep 17 00:00:00 2001 From: jiminChoi Date: Wed, 28 Aug 2024 21:00:09 +0900 Subject: [PATCH 14/24] =?UTF-8?q?[FE]=20FEAT:=20coin=20manual=20color=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9=20#1681?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/Cabinet/assets/data/ManualContent.ts | 2 +- .../components/Home/ManualContentBox.tsx | 14 +-- .../components/Home/ManualContentBoxStyles.ts | 2 +- .../Cabinet/components/Home/ServiceManual.tsx | 14 +-- .../Modals/ManualModal/ManualModal.tsx | 85 ++----------------- 5 files changed, 26 insertions(+), 91 deletions(-) diff --git a/frontend/src/Cabinet/assets/data/ManualContent.ts b/frontend/src/Cabinet/assets/data/ManualContent.ts index 29633ba67..333da0d8e 100644 --- a/frontend/src/Cabinet/assets/data/ManualContent.ts +++ b/frontend/src/Cabinet/assets/data/ManualContent.ts @@ -233,7 +233,7 @@ export const manualContentData: Record = {
`, - pointColor: "var(--sys-main-color)", + pointColor: "var(--sys-default-main-color)", }, [ContentStatus.STORE]: { contentTitle: "까비 상점 OPEN!", diff --git a/frontend/src/Cabinet/components/Home/ManualContentBox.tsx b/frontend/src/Cabinet/components/Home/ManualContentBox.tsx index 35d9127be..d313ac9e1 100644 --- a/frontend/src/Cabinet/components/Home/ManualContentBox.tsx +++ b/frontend/src/Cabinet/components/Home/ManualContentBox.tsx @@ -65,7 +65,7 @@ const ManualContentBoxStyled = styled.div<{ margin-right: 10px; margin-top: 160px; animation: ${Rotation} 1s linear infinite; - stroke: var(--sys-main-color); + stroke: var(--sys-default-main-color); } .contentImg { @@ -87,16 +87,18 @@ const ManualContentBoxStyled = styled.div<{ position: absolute; right: 100px; bottom: 30px; - fill: var(--sys-main-color); + fill: var(--sys-def-main-color); } p { margin-top: 90px; ${({ contentStatus }) => (contentStatus === ContentStatus.PENDING || + contentStatus === ContentStatus.COIN || contentStatus === ContentStatus.IN_SESSION) && css` - margin-top: 160px; + /* margin-top: 160px; */ + color: var(--sys-default-main-color); `} } @@ -120,7 +122,7 @@ const ManualContentBoxStyled = styled.div<{ ${({ contentStatus }) => contentStatus === ContentStatus.PENDING ? css` - border: 5px double var(--sys-main-color); + border: 5px double var(--sys-default-main-color); box-shadow: inset 0px 0px 0px 5px var(--bg-color); filter: drop-shadow( 10px 10px 10px var(--left-nav-border-shadow-color) @@ -139,9 +141,11 @@ const ManualContentBoxStyled = styled.div<{ transform: translateY(-5px); ${({ contentStatus }) => (contentStatus === ContentStatus.PENDING || + contentStatus === ContentStatus.COIN || contentStatus === ContentStatus.IN_SESSION) && css` - margin-top: 155px; + /* margin-top: 155px; */ + color: var(--sys-default-main-color); `} } .clockImg { diff --git a/frontend/src/Cabinet/components/Home/ManualContentBoxStyles.ts b/frontend/src/Cabinet/components/Home/ManualContentBoxStyles.ts index 2eccf448d..99c3489d6 100644 --- a/frontend/src/Cabinet/components/Home/ManualContentBoxStyles.ts +++ b/frontend/src/Cabinet/components/Home/ManualContentBoxStyles.ts @@ -77,7 +77,7 @@ export const storeBoxStyles = css` `; export const coinBoxStyles = css` - border: 5px solid var(--sys-main-color); + border: 5px solid var(--sys-default-main-color); color: var(--sys-main-color); `; diff --git a/frontend/src/Cabinet/components/Home/ServiceManual.tsx b/frontend/src/Cabinet/components/Home/ServiceManual.tsx index 6d6f24025..25b16c623 100644 --- a/frontend/src/Cabinet/components/Home/ServiceManual.tsx +++ b/frontend/src/Cabinet/components/Home/ServiceManual.tsx @@ -1,6 +1,6 @@ import { useState } from "react"; import styled from "styled-components"; -import MaunalContentBox from "@/Cabinet/components/Home/ManualContentBox"; +import ManualContentBox from "@/Cabinet/components/Home/ManualContentBox"; import ManualModal from "@/Cabinet/components/Modals/ManualModal/ManualModal"; import ContentStatus from "@/Cabinet/types/enum/content.status.enum"; @@ -46,14 +46,14 @@ const ServiceManual = ({ className="article" onClick={() => openModal(ContentStatus.COIN)} > - +
openModal(ContentStatus.STORE)} > - +
@@ -68,19 +68,19 @@ const ServiceManual = ({ className="article" onClick={() => openModal(ContentStatus.PRIVATE)} > - +
openModal(ContentStatus.SHARE)} > - +
openModal(ContentStatus.IN_SESSION)} + onClick={() => openModal(ContentStatus.CLUB)} > - +
diff --git a/frontend/src/Cabinet/components/Modals/ManualModal/ManualModal.tsx b/frontend/src/Cabinet/components/Modals/ManualModal/ManualModal.tsx index 957fc4df8..797b98286 100644 --- a/frontend/src/Cabinet/components/Modals/ManualModal/ManualModal.tsx +++ b/frontend/src/Cabinet/components/Modals/ManualModal/ManualModal.tsx @@ -31,75 +31,6 @@ const ManualModal: React.FC = ({ contentStatus === ContentStatus.CLUB; const [selectedItem, setSelectedItem] = useState(0); - // const storeItems = [ - // { - // icon: ItemIconMap.EXTENSION, - // title: "연장권", - // content: ` - // store 탭을 눌러 연장권 구매하기 버튼을 클릭 후 3일, 15일, 31일 단위로 구매할 수 있습니다.
- // 구매한 아이템은 인벤토리 탭에서 확인할 수 있습니다.
- //
- // ◦ 사용방법
- //
- // 사물함을 대여한 상태로, 상단 오른쪽의 상자 아이콘을 누르면 현재 자신의 사물함의 정보를 볼 수 있습니다.
- // 연장권 사용하기 버튼을 눌러 보유한 연장권 중 원하는 타입을 선택 후 사용합니다.
- // 이미 사용한 연장권은 취소할 수 없습니다.
- // 공유사물함의 모든 인원이 연장권을 사용할 수 있지만, 남은 인원이 한 명인 경우 연장권을 사용할 수 없습니다. - //
- // `, - // }, - // { - // icon: ItemIconMap.SWAP, - // title: "이사권", - // content: ` - // - // 기존 일주일에 한 번 가능했던 이사하기 기능을 제한 없이 자유롭게 사용할 수 있습니다.
- // 현재 이용중인 사물함의 대여 기간을 유지한 채 다른 사물함으로 이사할 수 있습니다.
- // store 탭에서 구매할 수 있으며, 인벤토리 탭에서 구매한 아이템을 확인할 수 있습니다. - //
- // ◦ 사용방법
- //
- // 개인 사물함을 이용중인 사용자만 이사권을 사용할 수 있습니다.
- // 아이템을 보유한 상태로 비어있는 개인 사물함을 눌렀을 때 이사하기 버튼이 활성화됩니다.
- // 이미 사용한 이사권은 취소할 수 없습니다.
- - //
- // `, - // }, - // { - // icon: ItemIconMap.ALARM, - // title: "알림 등록권", - // content: ` - // 내가 원하는 섹션에 빈 자리가 나온다면 알림을 받을 수 있습니다.
- // 개인사물함에 대해서만 알림을 받을 수 있습니다.
- // store 탭에서 구매할 수 있으며, 인벤토리 탭에서 구매한 아이템을 확인할 수 있습니다.
- //
- // ◦ 사용방법
- //
- // 아이템 구매 후 원하는 섹션으로 이동해 우측 상단의 하트 아이콘을 클릭합니다.
- // 사용한 알림 등록권은 섹션을 변경하거나 취소할 수 없습니다.
- // 알림등록권은 1화 알림 후 소멸됩니다. - //
- - // `, - // }, - // { - // icon: ItemIconMap.PENALTY, - // title: "페널티 감면권", - // content: ` - // 페널티 감면권은 7일, 15일, 31일 단위로 구매할 수 있습니다.
- // 구매한 아이템은 인벤토리 탭에서 확인할 수 있습니다.
- //
- // ◦ 사용방법
- //
- // 사물함 대여 불가 페널티가 부과된 유저라면 Profile 탭을 눌러 대여정보 상자 상단의
- // 페널티 감면권 사용하기 버튼이 활성화됩니다.
- // 버튼을 눌러 내가 보유한 페널티 감면권을 선택하면, 남은 페널티 기간을 확인하실 수 있습니다.
- // 연체된 사물함을 아직 반납하지 않았다면, 우선 반납하기 버튼을 눌러야 사용 버튼이 활성화됩니다. - //
- // `, - // }, - // ]; const handleIconClick = (index: number) => { setSelectedItem(index); }; @@ -248,10 +179,10 @@ const ModalWrapper = styled.div<{ border-radius: 40px 40px 0 0; border: ${(props) => props.contentStatus === ContentStatus.PENDING - ? "5px double var(--sys-main-color)" + ? "5px double var(--sys-default-main-color)" : props.contentStatus === ContentStatus.IN_SESSION || props.contentStatus === ContentStatus.COIN - ? "5px solid var(--sys-main-color)" + ? "5px solid var(--sys-default-main-color)" : "none"}; box-shadow: ${(props) => props.contentStatus === ContentStatus.PENDING && @@ -273,7 +204,7 @@ const ModalContent = styled.div<{ color: ${(props) => props.contentStatus === ContentStatus.IN_SESSION || props.contentStatus === ContentStatus.COIN - ? "var(--sys-main-color)" + ? "var(--sys-default-main-color)" : props.contentStatus === ContentStatus.EXTENSION ? "var(--normal-text-color)" : "var(--white-text-with-bg-color)"}; @@ -296,7 +227,7 @@ const ModalContent = styled.div<{ stroke: ${(props) => props.contentStatus === ContentStatus.IN_SESSION || props.contentStatus === ContentStatus.COIN - ? "var(--sys-main-color)" + ? "var(--sys-default-main-color)" : props.contentStatus === ContentStatus.EXTENSION ? "var(--normal-text-color)" : "var(--white-text-with-bg-color)"}; @@ -319,7 +250,7 @@ const CloseButton = styled.div<{ stroke: ${(props) => props.contentStatus === ContentStatus.IN_SESSION || props.contentStatus === ContentStatus.COIN - ? "var(--sys-main-color)" + ? "var(--sys-default-main-color)" : props.contentStatus === ContentStatus.EXTENSION ? "var(--normal-text-color)" : "var(--bg-color)"}; @@ -439,7 +370,7 @@ const ContentImgStyled = styled.div<{ `; const ItemContentsStyled = styled.div` - width: 400px; + width: 40%; height: 80px; display: flex; margin-bottom: 30px; @@ -459,7 +390,6 @@ const ItemIconStyled = styled.div<{ width: 80px; height: 80px; & > path { - // stroke: red; stroke: ${(props) => props.color}; } } @@ -467,12 +397,13 @@ const ItemIconStyled = styled.div<{ width: 50px; height: 50px; // filter: drop-shadow(0px 3px 1px var(--hover-box-shadow-color)); + /* transition: all 0.3s ease; */ & > path { - transition: all 0.3s ease; stroke: var(--ref-purple-690); } &:hover { + transition: all 0.5s ease; filter: drop-shadow(0px 6px 3px var(--hover-box-shadow-color)); width: 80px; height: 80px; From daa81ee8b42d94a5575dff1e10b7f079456d774b Mon Sep 17 00:00:00 2001 From: jiminChoi Date: Wed, 28 Aug 2024 21:03:00 +0900 Subject: [PATCH 15/24] =?UTF-8?q?[FE]=20FEAT:=20ItemContentsStyled=20width?= =?UTF-8?q?=20=EC=88=98=EC=A0=95=20#1681?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/Cabinet/components/Modals/ManualModal/ManualModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/Cabinet/components/Modals/ManualModal/ManualModal.tsx b/frontend/src/Cabinet/components/Modals/ManualModal/ManualModal.tsx index 797b98286..baf1f4cf3 100644 --- a/frontend/src/Cabinet/components/Modals/ManualModal/ManualModal.tsx +++ b/frontend/src/Cabinet/components/Modals/ManualModal/ManualModal.tsx @@ -370,7 +370,7 @@ const ContentImgStyled = styled.div<{ `; const ItemContentsStyled = styled.div` - width: 40%; + width: 45%; height: 80px; display: flex; margin-bottom: 30px; From adcd7314f4c46f9aae583dca5faf101f32dba19e Mon Sep 17 00:00:00 2001 From: jiminChoi Date: Wed, 28 Aug 2024 21:29:58 +0900 Subject: [PATCH 16/24] [FE] FEAT: new! #1681 --- frontend/src/Cabinet/components/Home/ServiceManual.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/frontend/src/Cabinet/components/Home/ServiceManual.tsx b/frontend/src/Cabinet/components/Home/ServiceManual.tsx index 25b16c623..a0c9754ed 100644 --- a/frontend/src/Cabinet/components/Home/ServiceManual.tsx +++ b/frontend/src/Cabinet/components/Home/ServiceManual.tsx @@ -47,6 +47,7 @@ const ServiceManual = ({ onClick={() => openModal(ContentStatus.COIN)} > +

new

openModal(ContentStatus.STORE)} > +

new

 From ba66441a6b430bbcc0168d3656a2902825a3689c Mon Sep 17 00:00:00 2001 From: jiminChoi Date: Tue, 10 Sep 2024 15:29:18 +0900 Subject: [PATCH 17/24] =?UTF-8?q?[FE]=20FEAT:=20=EC=95=84=EC=9D=B4?= =?UTF-8?q?=EC=BD=98=20resizing=20=20=20#1681?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/Cabinet/assets/data/ManualContent.ts | 10 +++++----- frontend/src/Cabinet/assets/images/storeAlarm.svg | 6 +++--- .../src/Cabinet/assets/images/storeExtension.svg | 10 +++++----- frontend/src/Cabinet/assets/images/storeMove.svg | 12 ++++++------ frontend/src/Cabinet/assets/images/storePenalty.svg | 8 ++++---- .../components/Modals/ManualModal/ManualModal.tsx | 13 +++++++------ .../components/Store/Inventory/InventoryItem.tsx | 3 +-- .../components/Store/ItemUsageLog/ItemLogBlock.tsx | 9 ++++----- 8 files changed, 35 insertions(+), 36 deletions(-) diff --git a/frontend/src/Cabinet/assets/data/ManualContent.ts b/frontend/src/Cabinet/assets/data/ManualContent.ts index 333da0d8e..2d4fadc80 100644 --- a/frontend/src/Cabinet/assets/data/ManualContent.ts +++ b/frontend/src/Cabinet/assets/data/ManualContent.ts @@ -256,10 +256,10 @@ export const storeItems = [
◦ 사용방법
- 사물함을 대여한 상태로, 상단 오른쪽의 상자 아이콘을 누르면 현재 자신의 사물함의 정보를 볼 수 있습니다.
- 연장권 사용하기 버튼을 눌러 보유한 연장권 중 원하는 타입을 선택 후 사용합니다.
+ 사물함을 대여한 상태로, 상단 오른쪽의 상자 아이콘을 누르면 현재 자신의 사물함의 정보를 볼 수 있습니다.
+ 연장권 사용하기 버튼을 눌러 보유한 연장권 중 원하는 타입을 선택 후 사용합니다.
이미 사용한 연장권은 취소할 수 없습니다.
- 공유사물함의 모든 인원이 연장권을 사용할 수 있지만, 남은 인원이 한 명인 경우 연장권을 사용할 수 없습니다. + 공유사물함의 모든 인원이 연장권을 사용할 수 있지만, 남은 인원이 한 명인 경우 연장권을 사용할 수 없습니다.
`, }, @@ -274,8 +274,8 @@ export const storeItems = [
◦ 사용방법
- 개인 사물함을 이용중인 사용자만 이사권을 사용할 수 있습니다.
- 아이템을 보유한 상태로 비어있는 개인 사물함을 눌렀을 때 이사하기 버튼이 활성화됩니다.
+ 개인 사물함을 이용중인 사용자만 이사권을 사용할 수 있습니다.
+ 아이템을 보유한 상태로 비어있는 개인 사물함을 눌렀을 때 이사하기 버튼이 활성화됩니다.
이미 사용한 이사권은 취소할 수 없습니다.
diff --git a/frontend/src/Cabinet/assets/images/storeAlarm.svg b/frontend/src/Cabinet/assets/images/storeAlarm.svg index fdec88cdb..deb44a952 100644 --- a/frontend/src/Cabinet/assets/images/storeAlarm.svg +++ b/frontend/src/Cabinet/assets/images/storeAlarm.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/frontend/src/Cabinet/assets/images/storeExtension.svg b/frontend/src/Cabinet/assets/images/storeExtension.svg index 91c16096c..d97f6f116 100644 --- a/frontend/src/Cabinet/assets/images/storeExtension.svg +++ b/frontend/src/Cabinet/assets/images/storeExtension.svg @@ -1,6 +1,6 @@ - - - - - + + + + + diff --git a/frontend/src/Cabinet/assets/images/storeMove.svg b/frontend/src/Cabinet/assets/images/storeMove.svg index 4500e4867..f87ec2c31 100644 --- a/frontend/src/Cabinet/assets/images/storeMove.svg +++ b/frontend/src/Cabinet/assets/images/storeMove.svg @@ -1,7 +1,7 @@ - - - - - - + + + + + + diff --git a/frontend/src/Cabinet/assets/images/storePenalty.svg b/frontend/src/Cabinet/assets/images/storePenalty.svg index 158760b33..9838cbd18 100644 --- a/frontend/src/Cabinet/assets/images/storePenalty.svg +++ b/frontend/src/Cabinet/assets/images/storePenalty.svg @@ -1,5 +1,5 @@ - - - - + + + + diff --git a/frontend/src/Cabinet/components/Modals/ManualModal/ManualModal.tsx b/frontend/src/Cabinet/components/Modals/ManualModal/ManualModal.tsx index baf1f4cf3..e60ba96be 100644 --- a/frontend/src/Cabinet/components/Modals/ManualModal/ManualModal.tsx +++ b/frontend/src/Cabinet/components/Modals/ManualModal/ManualModal.tsx @@ -389,24 +389,25 @@ const ItemIconStyled = styled.div<{ filter: drop-shadow(0px 6px 3px var(--hover-box-shadow-color)); width: 80px; height: 80px; + transform-origin: center; & > path { stroke: ${(props) => props.color}; } } & > svg { - width: 50px; - height: 50px; - // filter: drop-shadow(0px 3px 1px var(--hover-box-shadow-color)); - /* transition: all 0.3s ease; */ + width: 80px; + height: 80px; + cursor: pointer; + transform-origin: center; & > path { + transform: scale(2); stroke: var(--ref-purple-690); } &:hover { transition: all 0.5s ease; filter: drop-shadow(0px 6px 3px var(--hover-box-shadow-color)); - width: 80px; - height: 80px; + transform-origin: center; & > path { stroke: ${(props) => props.color}; } diff --git a/frontend/src/Cabinet/components/Store/Inventory/InventoryItem.tsx b/frontend/src/Cabinet/components/Store/Inventory/InventoryItem.tsx index e15a09d89..340134de8 100644 --- a/frontend/src/Cabinet/components/Store/Inventory/InventoryItem.tsx +++ b/frontend/src/Cabinet/components/Store/Inventory/InventoryItem.tsx @@ -170,8 +170,7 @@ const ItemIconStyled = styled.div<{ itemType: StoreItemType }>` & > svg > path { stroke: var(--sys-main-color); - stroke-width: ${(props) => - props.itemType === StoreItemType.EXTENSION ? "2.8px" : "1.5px"}; + stroke-width: "1.5px"; } `; diff --git a/frontend/src/Cabinet/components/Store/ItemUsageLog/ItemLogBlock.tsx b/frontend/src/Cabinet/components/Store/ItemUsageLog/ItemLogBlock.tsx index b82eacb00..b6a2fae71 100644 --- a/frontend/src/Cabinet/components/Store/ItemUsageLog/ItemLogBlock.tsx +++ b/frontend/src/Cabinet/components/Store/ItemUsageLog/ItemLogBlock.tsx @@ -50,14 +50,13 @@ const IconBlockStyled = styled.div<{ itemName: string }>` svg { width: 40px; height: 40px; + transform-origin: center; } - & > svg > path { + & > svg > * { + transform: scale(1.25); stroke: var(--white-text-with-bg-color); - stroke-width: ${(props) => - props.itemName === ItemTypeLabelMap[StoreItemType.EXTENSION] - ? "3px" - : "1.5px"}; + stroke-width: "1.5px"; } `; From d39163971e5a44e060bf8d9f83526cf5aacb0f59 Mon Sep 17 00:00:00 2001 From: jnkeniaem Date: Thu, 19 Sep 2024 13:56:19 +0900 Subject: [PATCH 18/24] =?UTF-8?q?[FE]=20DOCS:=20=EB=B0=94=EB=80=90=20?= =?UTF-8?q?=EC=A0=95=EC=B1=85=EC=97=90=20=EB=94=B0=EB=9D=BC=20=EC=8A=AC?= =?UTF-8?q?=EB=9E=99=20=EC=95=8C=EB=A6=BC=20=EC=97=B0=EC=B2=B4=20=EB=AC=B8?= =?UTF-8?q?=EA=B5=AC=20=EC=88=98=EC=A0=95#1681?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/Cabinet/assets/data/SlackAlarm.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/Cabinet/assets/data/SlackAlarm.ts b/frontend/src/Cabinet/assets/data/SlackAlarm.ts index 514b7e654..760fb57a4 100644 --- a/frontend/src/Cabinet/assets/data/SlackAlarm.ts +++ b/frontend/src/Cabinet/assets/data/SlackAlarm.ts @@ -179,8 +179,8 @@ export const SlackAlarmTemplates: ISlackAlarmTemplate[] = [ { title: "연체", content: `[CABI] 안녕하세요! :embarrassed_cabi: -현재 이용 중이신 사물함이 연체인 것으로 확인되어 연락드립니다. -장기간 연체시 서비스 이용에 대한 페널티, 혹은 :tig:가 부여될 수 있음을 인지해주세요! +현재 이용 중이신 사물함이 *연체* 된 것으로 확인되어 연락드립니다. +*3주(21일) 이상 연체 시 미회수된 개인 물품은 폐기될 수 있음을 인지해 주세요!* 사물함의 대여 기간을 확인하신 후 반납 부탁드립니다. 항상 저희 서비스를 이용해 주셔서 감사합니다:)`, }, From e8633c4e4420952e8a755a8e0a00e836dbb3dae2 Mon Sep 17 00:00:00 2001 From: jnkeniaem Date: Thu, 19 Sep 2024 14:00:31 +0900 Subject: [PATCH 19/24] =?UTF-8?q?[FE]=20DOCS:=20=EC=8A=AC=EB=9E=99=20?= =?UTF-8?q?=EC=95=8C=EB=A6=BC=20=EB=AC=B8=EA=B5=AC=20=EB=B3=BC=EB=93=9C?= =?UTF-8?q?=EC=B2=B4=20=EC=A0=81=EC=9A=A9=EB=90=98=EA=B2=8C=20=EB=9D=84?= =?UTF-8?q?=EC=96=B4=EC=93=B0=EA=B8=B0=20#1681?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/Cabinet/assets/data/SlackAlarm.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/Cabinet/assets/data/SlackAlarm.ts b/frontend/src/Cabinet/assets/data/SlackAlarm.ts index 760fb57a4..2779aea48 100644 --- a/frontend/src/Cabinet/assets/data/SlackAlarm.ts +++ b/frontend/src/Cabinet/assets/data/SlackAlarm.ts @@ -27,7 +27,7 @@ export const SlackAlarmTemplates: ISlackAlarmTemplate[] = [ :happy_ccabi: 안녕하세요. Cabi 팀입니다! :happy_ccabi: :sad_ccabi: 서비스 개선을 위해, 서버를 점검하게 되었습니다. :sad_ccabi: :file_cabinet: 서비스 개선과 관련한 사항은 Cabi 채널 에서, :file_cabinet: -:hammer_and_wrench: 보관물 관련 사항은 *데스크에 직접 문의*해주세요! :hammer_and_wrench: +:hammer_and_wrench: 보관물 관련 사항은 *데스크에 직접 문의* 해주세요! :hammer_and_wrench: 점검 일자 : 2024년 04월 02일 (화요일) 점검 시간 : 15시 10분 ~ 완료 공지 시점까지 From 085d59a9664831372c41fa1fe325d4cd7325aafa Mon Sep 17 00:00:00 2001 From: jiminChoi Date: Thu, 19 Sep 2024 14:10:27 +0900 Subject: [PATCH 20/24] =?UTF-8?q?[FE]=20FEAT:=20=EC=82=AC=EB=AC=BC?= =?UTF-8?q?=ED=95=A8=20=EB=8C=80=EC=97=AC=20=EB=AA=A8=EB=8B=AC=EC=97=90=20?= =?UTF-8?q?=EC=97=B0=EC=B2=B4=EC=A3=BC=EC=9D=98=EC=82=AC=ED=95=AD=20?= =?UTF-8?q?=EB=AC=B8=EA=B5=AC=20=EC=B6=94=EA=B0=80=20=20=20#1681?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/Cabinet/assets/data/SlackAlarm.ts | 8 ++++---- .../src/Cabinet/components/Modals/LentModal/LentModal.tsx | 8 ++++++-- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/frontend/src/Cabinet/assets/data/SlackAlarm.ts b/frontend/src/Cabinet/assets/data/SlackAlarm.ts index 514b7e654..4e0819e3a 100644 --- a/frontend/src/Cabinet/assets/data/SlackAlarm.ts +++ b/frontend/src/Cabinet/assets/data/SlackAlarm.ts @@ -179,9 +179,9 @@ export const SlackAlarmTemplates: ISlackAlarmTemplate[] = [ { title: "연체", content: `[CABI] 안녕하세요! :embarrassed_cabi: -현재 이용 중이신 사물함이 연체인 것으로 확인되어 연락드립니다. -장기간 연체시 서비스 이용에 대한 페널티, 혹은 :tig:가 부여될 수 있음을 인지해주세요! -사물함의 대여 기간을 확인하신 후 반납 부탁드립니다. -항상 저희 서비스를 이용해 주셔서 감사합니다:)`, + 현재 이용 중이신 사물함이 *연체* 된 것으로 확인되어 연락드립니다. + *3주(21일) 이상 연체 시 미회수된 개인 물품은 폐기될 수 있음을 인지해 주세요!* + 사물함의 대여 기간을 확인하신 후 반납 부탁드립니다. + 항상 저희 서비스를 이용해 주셔서감사합니다:)`, }, ]; diff --git a/frontend/src/Cabinet/components/Modals/LentModal/LentModal.tsx b/frontend/src/Cabinet/components/Modals/LentModal/LentModal.tsx index 614cfaafa..556af4a8e 100644 --- a/frontend/src/Cabinet/components/Modals/LentModal/LentModal.tsx +++ b/frontend/src/Cabinet/components/Modals/LentModal/LentModal.tsx @@ -46,7 +46,9 @@ const LentModal: React.FC<{ const formattedExpireDate = getExpireDateString(props.lentType); const privateLentDetail = `대여기간은 ${formattedExpireDate} 23:59까지 입니다. - 귀중품 분실 및 메모 내용의 유출에 책임지지 않습니다.`; + 귀중품 분실 및 메모 내용의 유출에 책임지지 않습니다. + 3주(21일) 이상 연체 시 사물함은 강제 반납되며 + 미회수된 개인 물품은 폐기될 수 있습니다.`; const shareLentDetail = `대여 후 ${ 10 // import.meta.env.VITE_SHARE_LENT_COUNTDOWN // TODO: .env 에 등록하기 @@ -54,7 +56,9 @@ const LentModal: React.FC<{ 공유 인원 (2인~4인) 이 충족되지 않으면, 공유 사물함의 대여가 취소됩니다. “메모 내용”은 공유 인원끼리 공유됩니다. - 귀중품 분실 및 메모 내용의 유출에 책임지지 않습니다.`; + 귀중품 분실 및 메모 내용의 유출에 책임지지 않습니다. + 3주(21일) 이상 연체 시 사물함은 강제 반납되며 + 미회수된 개인 물품은 폐기될 수 있습니다.`; const tryLentRequest = async (e: React.MouseEvent) => { setIsLoading(true); try { From 953099ebf2083321e7bcd64d7a642b227cbda0f4 Mon Sep 17 00:00:00 2001 From: jiminChoi Date: Thu, 19 Sep 2024 14:14:36 +0900 Subject: [PATCH 21/24] =?UTF-8?q?[FE]=20FEAT:=20=EC=82=AC=EB=AC=BC?= =?UTF-8?q?=ED=95=A8=20=EB=8C=80=EC=97=AC=20=EB=AA=A8=EB=8B=AC=EC=97=90=20?= =?UTF-8?q?=EC=97=B0=EC=B2=B4=EC=A3=BC=EC=9D=98=EC=82=AC=ED=95=AD=20?= =?UTF-8?q?=EB=AC=B8=EA=B5=AC=20=EB=9D=84=EC=96=B4=EC=93=B0=EA=B8=B0=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=20=20=20#1681?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/Cabinet/assets/data/SlackAlarm.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/Cabinet/assets/data/SlackAlarm.ts b/frontend/src/Cabinet/assets/data/SlackAlarm.ts index 9abc4c779..3def9e28e 100644 --- a/frontend/src/Cabinet/assets/data/SlackAlarm.ts +++ b/frontend/src/Cabinet/assets/data/SlackAlarm.ts @@ -182,6 +182,6 @@ export const SlackAlarmTemplates: ISlackAlarmTemplate[] = [ 현재 이용 중이신 사물함이 *연체* 된 것으로 확인되어 연락드립니다. *3주(21일) 이상 연체 시 미회수된 개인 물품은 폐기될 수 있음을 인지해 주세요!* 사물함의 대여 기간을 확인하신 후 반납 부탁드립니다. - 항상 저희 서비스를 이용해 주셔서감사합니다:)`, + 항상 저희 서비스를 이용해 주셔서 감사합니다:)`, }, ]; From a2726412bb89bae81559bea1dd2cfdf6ee7321c5 Mon Sep 17 00:00:00 2001 From: jiminChoi Date: Thu, 19 Sep 2024 15:27:44 +0900 Subject: [PATCH 22/24] =?UTF-8?q?[FE]=20FEAT:=20=EB=B6=88=ED=95=84?= =?UTF-8?q?=EC=9A=94=ED=95=9C=20=ED=8C=8C=EC=9D=BC=20=EB=B0=8F=20=EC=BD=94?= =?UTF-8?q?=EB=93=9C=20=EC=82=AD=EC=A0=9C,=20storeItems=20=EB=B0=B0?= =?UTF-8?q?=EC=97=B4=EC=9D=84=20manualItemsData=20=EA=B0=9D=EC=B2=B4?= =?UTF-8?q?=EB=A1=9C=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20=EC=A0=81=EC=9A=A9?= =?UTF-8?q?=20#1681?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/Cabinet/assets/data/ManualContent.ts | 72 ++++--------------- .../components/Home/ManualContentBox.tsx | 2 - .../Cabinet/components/Home/ServiceManual.tsx | 1 - .../Modals/ManualModal/ManualModal.tsx | 25 ++++--- ...vite.config.ts.timestamp-1724129829170.mjs | 53 -------------- 5 files changed, 24 insertions(+), 129 deletions(-) delete mode 100644 frontend/vite.config.ts.timestamp-1724129829170.mjs diff --git a/frontend/src/Cabinet/assets/data/ManualContent.ts b/frontend/src/Cabinet/assets/data/ManualContent.ts index 2d4fadc80..50f99e1f7 100644 --- a/frontend/src/Cabinet/assets/data/ManualContent.ts +++ b/frontend/src/Cabinet/assets/data/ManualContent.ts @@ -7,8 +7,8 @@ import { ReactComponent as PrivateIcon } from "@/Cabinet/assets/images/privateIc import { ReactComponent as ShareIcon } from "@/Cabinet/assets/images/shareIcon.svg"; import { ReactComponent as StoreImg } from "@/Cabinet/assets/images/storeIconGray.svg"; import ContentStatus from "@/Cabinet/types/enum/content.status.enum"; +import { StoreItemType } from "@/Cabinet/types/enum/store.enum"; -// import {StoreItemType} from "@/Cabinet/types/enum/store.enum" interface ContentStatusData { contentTitle: string; iconComponent: React.FunctionComponent> | null; @@ -18,60 +18,12 @@ interface ContentStatusData { contentText: string; pointColor: string; } -export enum StoreItemType { - EXTENSION = "EXTENSION", - SWAP = "SWAP", - ALARM = "ALARM", - PENALTY = "PENALTY", -} -export const ItemContentsData: Record = { - [StoreItemType.EXTENSION]: { - contentTitle: "개인 사물함", - iconComponent: PrivateIcon, - background: - "linear-gradient(to bottom, var(--ref-purple-400), var(--ref-purple-600))", - rentalPeriod: `${import.meta.env.VITE_PRIVATE_LENT_PERIOD}일`, - capacity: "1인", - contentText: `◦ 이용 방법
- `, - pointColor: "var(--white-text-with-bg-color)", - }, - [StoreItemType.SWAP]: { - contentTitle: "개인 사물함", - iconComponent: PrivateIcon, - background: - "linear-gradient(to bottom, var(--ref-purple-400), var(--ref-purple-600))", - rentalPeriod: `${import.meta.env.VITE_PRIVATE_LENT_PERIOD}일`, - capacity: "1인", - contentText: `◦ 이용 방법
- `, - pointColor: "var(--white-text-with-bg-color)", - }, - [StoreItemType.ALARM]: { - contentTitle: "개인 사물함", - iconComponent: PrivateIcon, - background: - "linear-gradient(to bottom, var(--ref-purple-400), var(--ref-purple-600))", - rentalPeriod: `${import.meta.env.VITE_PRIVATE_LENT_PERIOD}일`, - capacity: "1인", - contentText: `◦ 이용 방법
- - `, - pointColor: "var(--white-text-with-bg-color)", - }, - [StoreItemType.PENALTY]: { - contentTitle: "개인 사물함", - iconComponent: PrivateIcon, - background: - "linear-gradient(to bottom, var(--ref-purple-400), var(--ref-purple-600))", - rentalPeriod: `${import.meta.env.VITE_PRIVATE_LENT_PERIOD}일`, - capacity: "1인", - contentText: `◦ 이용 방법
- `, - pointColor: "var(--white-text-with-bg-color)", - }, -}; +interface ItemStatusData { + icon: React.FunctionComponent>; + title: string; + content: string; +} export const manualContentData: Record = { [ContentStatus.PRIVATE]: { @@ -246,8 +198,8 @@ export const manualContentData: Record = { }, }; -export const storeItems = [ - { +export const manualItemsData: Record = { + [StoreItemType.EXTENSION]: { icon: ItemIconMap.EXTENSION, title: "연장권", content: ` @@ -263,7 +215,7 @@ export const storeItems = [ `, }, - { + [StoreItemType.SWAP]: { icon: ItemIconMap.SWAP, title: "이사권", content: ` @@ -281,7 +233,7 @@ export const storeItems = [ `, }, - { + [StoreItemType.ALARM]: { icon: ItemIconMap.ALARM, title: "알림 등록권", content: ` @@ -298,7 +250,7 @@ export const storeItems = [ `, }, - { + [StoreItemType.PENALTY]: { icon: ItemIconMap.PENALTY, title: "페널티 감면권", content: ` @@ -314,4 +266,4 @@ export const storeItems = [ `, }, -]; +}; diff --git a/frontend/src/Cabinet/components/Home/ManualContentBox.tsx b/frontend/src/Cabinet/components/Home/ManualContentBox.tsx index d313ac9e1..2f973569d 100644 --- a/frontend/src/Cabinet/components/Home/ManualContentBox.tsx +++ b/frontend/src/Cabinet/components/Home/ManualContentBox.tsx @@ -97,7 +97,6 @@ const ManualContentBoxStyled = styled.div<{ contentStatus === ContentStatus.COIN || contentStatus === ContentStatus.IN_SESSION) && css` - /* margin-top: 160px; */ color: var(--sys-default-main-color); `} } @@ -144,7 +143,6 @@ const ManualContentBoxStyled = styled.div<{ contentStatus === ContentStatus.COIN || contentStatus === ContentStatus.IN_SESSION) && css` - /* margin-top: 155px; */ color: var(--sys-default-main-color); `} } diff --git a/frontend/src/Cabinet/components/Home/ServiceManual.tsx b/frontend/src/Cabinet/components/Home/ServiceManual.tsx index a0c9754ed..4148baad1 100644 --- a/frontend/src/Cabinet/components/Home/ServiceManual.tsx +++ b/frontend/src/Cabinet/components/Home/ServiceManual.tsx @@ -103,7 +103,6 @@ const TicketWrapperStyled = styled.div` &:hover { transition: all 0.3s ease-in-out; transform: translateY(-5px); - /* filter: drop-shadow(10px 10px 8px rgba(0, 0, 0, 0.2)); */ filter: drop-shadow(10px 10px 10px var(--left-nav-border-shadow-color)); } `; diff --git a/frontend/src/Cabinet/components/Modals/ManualModal/ManualModal.tsx b/frontend/src/Cabinet/components/Modals/ManualModal/ManualModal.tsx index e60ba96be..82a00e39a 100644 --- a/frontend/src/Cabinet/components/Modals/ManualModal/ManualModal.tsx +++ b/frontend/src/Cabinet/components/Modals/ManualModal/ManualModal.tsx @@ -1,9 +1,8 @@ import React from "react"; import { useState } from "react"; import styled, { keyframes } from "styled-components"; -import { manualContentData } from "@/Cabinet/assets/data/ManualContent"; -import { storeItems } from "@/Cabinet/assets/data/ManualContent"; -import { ItemIconMap } from "@/Cabinet/assets/data/maps"; +import { manualContentData, manualItemsData } from "@/Cabinet/assets/data/ManualContent"; +import { StoreItemType } from "@/Cabinet/types/enum/store.enum"; import { ReactComponent as MoveBtnImg } from "@/Cabinet/assets/images/moveButton.svg"; import ContentStatus from "@/Cabinet/types/enum/content.status.enum"; @@ -17,6 +16,7 @@ const ManualModal: React.FC = ({ setIsModalOpen, }) => { const [modalIsOpen, setModalIsOpen] = useState(true); + const [selectedItem, setSelectedItem] = useState(StoreItemType.EXTENSION); const contentData = manualContentData[contentStatus]; const isCabinetType = @@ -30,8 +30,7 @@ const ManualModal: React.FC = ({ contentStatus === ContentStatus.SHARE || contentStatus === ContentStatus.CLUB; - const [selectedItem, setSelectedItem] = useState(0); - const handleIconClick = (index: number) => { + const handleIconClick = (index: StoreItemType) => { setSelectedItem(index); }; @@ -86,25 +85,25 @@ const ManualModal: React.FC = ({ {contentStatus === ContentStatus.STORE && ( <> - {storeItems.map((item, index) => ( + {Object.entries(manualItemsData).map(([key, item]) =>( handleIconClick(index)} - className={selectedItem === index ? "selected" : ""} - color={contentData.pointColor} + key={key} + onClick={() => handleIconClick(key as StoreItemType)} + className={selectedItem === key ? "selected" : ""} + color={contentData.pointColor} > ))} - {storeItems[selectedItem].title} + {manualItemsData[selectedItem].title}
- + )} {contentStatus !== ContentStatus.STORE && ( diff --git a/frontend/vite.config.ts.timestamp-1724129829170.mjs b/frontend/vite.config.ts.timestamp-1724129829170.mjs deleted file mode 100644 index f86bb69e5..000000000 --- a/frontend/vite.config.ts.timestamp-1724129829170.mjs +++ /dev/null @@ -1,53 +0,0 @@ -// vite.config.ts -import svgr from "file:///Users/miyu/Documents/cabi/frontend/node_modules/@svgr/rollup/dist/index.js"; -import react from "file:///Users/miyu/Documents/cabi/frontend/node_modules/@vitejs/plugin-react/dist/index.mjs"; -import * as path from "path"; -import { visualizer } from "file:///Users/miyu/Documents/cabi/frontend/node_modules/rollup-plugin-visualizer/dist/plugin/index.js"; -import { defineConfig } from "file:///Users/miyu/Documents/cabi/frontend/node_modules/vite/dist/node/index.js"; -var __vite_injected_original_dirname = "/Users/miyu/Documents/cabi/frontend"; -var vite_config_default = defineConfig({ - plugins: [ - react({ - babel: { - plugins: [ - [ - "babel-plugin-styled-components", - { - displayName: true, - fileName: false - } - ] - ] - } - }), - visualizer({ open: true, gzipSize: true, template: "treemap" }), - svgr() - ], - resolve: { - alias: [{ find: "@", replacement: path.resolve(__vite_injected_original_dirname, "src") }] - }, - server: { - host: "0.0.0.0", - port: 4242, - strictPort: true, - hmr: { - port: 4242, - clientPort: 4242, - host: "localhost", - path: "/hmr/" - } - }, - test: { - include: [ - "**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}", - "**/__tests__/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}" - ], - globals: true, - environment: "jsdom", - setupFiles: "./src/setupTest.ts" - } -}); -export { - vite_config_default as default -}; -//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvVXNlcnMvbWl5dS9Eb2N1bWVudHMvY2FiaS9mcm9udGVuZFwiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiL1VzZXJzL21peXUvRG9jdW1lbnRzL2NhYmkvZnJvbnRlbmQvdml0ZS5jb25maWcudHNcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfaW1wb3J0X21ldGFfdXJsID0gXCJmaWxlOi8vL1VzZXJzL21peXUvRG9jdW1lbnRzL2NhYmkvZnJvbnRlbmQvdml0ZS5jb25maWcudHNcIjsvLy8gPHJlZmVyZW5jZSB0eXBlcz1cInZpdGVzdFwiIC8+XG5pbXBvcnQgc3ZnciBmcm9tIFwiQHN2Z3Ivcm9sbHVwXCI7XG5pbXBvcnQgcmVhY3QgZnJvbSBcIkB2aXRlanMvcGx1Z2luLXJlYWN0XCI7XG5pbXBvcnQgKiBhcyBwYXRoIGZyb20gXCJwYXRoXCI7XG5pbXBvcnQgeyB2aXN1YWxpemVyIH0gZnJvbSBcInJvbGx1cC1wbHVnaW4tdmlzdWFsaXplclwiO1xuaW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSBcInZpdGVcIjtcblxuLy8gaHR0cHM6Ly92aXRlanMuZGV2L2NvbmZpZy9cbmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbmZpZyh7XG4gIHBsdWdpbnM6IFtcbiAgICByZWFjdCh7XG4gICAgICBiYWJlbDoge1xuICAgICAgICBwbHVnaW5zOiBbXG4gICAgICAgICAgW1xuICAgICAgICAgICAgXCJiYWJlbC1wbHVnaW4tc3R5bGVkLWNvbXBvbmVudHNcIixcbiAgICAgICAgICAgIHtcbiAgICAgICAgICAgICAgZGlzcGxheU5hbWU6IHRydWUsXG4gICAgICAgICAgICAgIGZpbGVOYW1lOiBmYWxzZSxcbiAgICAgICAgICAgIH0sXG4gICAgICAgICAgXSxcbiAgICAgICAgXSxcbiAgICAgIH0sXG4gICAgfSksXG4gICAgdmlzdWFsaXplcih7IG9wZW46IHRydWUsIGd6aXBTaXplOiB0cnVlLCB0ZW1wbGF0ZTogXCJ0cmVlbWFwXCIgfSksXG4gICAgc3ZncigpLFxuICBdLFxuICByZXNvbHZlOiB7XG4gICAgYWxpYXM6IFt7IGZpbmQ6IFwiQFwiLCByZXBsYWNlbWVudDogcGF0aC5yZXNvbHZlKF9fZGlybmFtZSwgXCJzcmNcIikgfV0sXG4gIH0sXG4gIHNlcnZlcjoge1xuICAgIGhvc3Q6IFwiMC4wLjAuMFwiLFxuICAgIHBvcnQ6IDQyNDIsXG4gICAgc3RyaWN0UG9ydDogdHJ1ZSxcbiAgICBobXI6IHtcbiAgICAgIHBvcnQ6IDQyNDIsXG4gICAgICBjbGllbnRQb3J0OiA0MjQyLFxuICAgICAgaG9zdDogXCJsb2NhbGhvc3RcIixcbiAgICAgIHBhdGg6IFwiL2htci9cIixcbiAgICB9LFxuICB9LFxuICB0ZXN0OiB7XG4gICAgaW5jbHVkZTogW1xuICAgICAgXCIqKi8qLnt0ZXN0LHNwZWN9LntqcyxtanMsY2pzLHRzLG10cyxjdHMsanN4LHRzeH1cIixcbiAgICAgIFwiKiovX190ZXN0c19fLyoue2pzLG1qcyxjanMsdHMsbXRzLGN0cyxqc3gsdHN4fVwiLFxuICAgIF0sXG4gICAgZ2xvYmFsczogdHJ1ZSxcbiAgICBlbnZpcm9ubWVudDogXCJqc2RvbVwiLFxuICAgIHNldHVwRmlsZXM6IFwiLi9zcmMvc2V0dXBUZXN0LnRzXCIsXG4gIH0sXG59KTtcbiJdLAogICJtYXBwaW5ncyI6ICI7QUFDQSxPQUFPLFVBQVU7QUFDakIsT0FBTyxXQUFXO0FBQ2xCLFlBQVksVUFBVTtBQUN0QixTQUFTLGtCQUFrQjtBQUMzQixTQUFTLG9CQUFvQjtBQUw3QixJQUFNLG1DQUFtQztBQVF6QyxJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUMxQixTQUFTO0FBQUEsSUFDUCxNQUFNO0FBQUEsTUFDSixPQUFPO0FBQUEsUUFDTCxTQUFTO0FBQUEsVUFDUDtBQUFBLFlBQ0U7QUFBQSxZQUNBO0FBQUEsY0FDRSxhQUFhO0FBQUEsY0FDYixVQUFVO0FBQUEsWUFDWjtBQUFBLFVBQ0Y7QUFBQSxRQUNGO0FBQUEsTUFDRjtBQUFBLElBQ0YsQ0FBQztBQUFBLElBQ0QsV0FBVyxFQUFFLE1BQU0sTUFBTSxVQUFVLE1BQU0sVUFBVSxVQUFVLENBQUM7QUFBQSxJQUM5RCxLQUFLO0FBQUEsRUFDUDtBQUFBLEVBQ0EsU0FBUztBQUFBLElBQ1AsT0FBTyxDQUFDLEVBQUUsTUFBTSxLQUFLLGFBQWtCLGFBQVEsa0NBQVcsS0FBSyxFQUFFLENBQUM7QUFBQSxFQUNwRTtBQUFBLEVBQ0EsUUFBUTtBQUFBLElBQ04sTUFBTTtBQUFBLElBQ04sTUFBTTtBQUFBLElBQ04sWUFBWTtBQUFBLElBQ1osS0FBSztBQUFBLE1BQ0gsTUFBTTtBQUFBLE1BQ04sWUFBWTtBQUFBLE1BQ1osTUFBTTtBQUFBLE1BQ04sTUFBTTtBQUFBLElBQ1I7QUFBQSxFQUNGO0FBQUEsRUFDQSxNQUFNO0FBQUEsSUFDSixTQUFTO0FBQUEsTUFDUDtBQUFBLE1BQ0E7QUFBQSxJQUNGO0FBQUEsSUFDQSxTQUFTO0FBQUEsSUFDVCxhQUFhO0FBQUEsSUFDYixZQUFZO0FBQUEsRUFDZDtBQUNGLENBQUM7IiwKICAibmFtZXMiOiBbXQp9Cg== From 7f56b51950bd9efff17651f51cf1bf36a23cfa4b Mon Sep 17 00:00:00 2001 From: jiminChoi Date: Mon, 23 Sep 2024 20:19:09 +0900 Subject: [PATCH 23/24] =?UTF-8?q?[FE]=20FIX:=20ManualModal=20=EC=95=84?= =?UTF-8?q?=EC=9D=B4=ED=85=9C=20=EC=95=84=EC=9D=B4=EC=BD=98=20=EA=B7=B8?= =?UTF-8?q?=EB=A6=BC=EC=9E=90=20=EC=9E=98=EB=A6=BC=20=ED=95=B4=EA=B2=B0,?= =?UTF-8?q?=20=EC=98=A4=ED=83=80=20=EC=88=98=EC=A0=95=20#1681?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/Cabinet/assets/data/ManualContent.ts | 2 +- .../Modals/ManualModal/ManualModal.tsx | 54 +++++++++---------- 2 files changed, 28 insertions(+), 28 deletions(-) diff --git a/frontend/src/Cabinet/assets/data/ManualContent.ts b/frontend/src/Cabinet/assets/data/ManualContent.ts index 50f99e1f7..8b39bebca 100644 --- a/frontend/src/Cabinet/assets/data/ManualContent.ts +++ b/frontend/src/Cabinet/assets/data/ManualContent.ts @@ -245,7 +245,7 @@ export const manualItemsData: Record = {
아이템 구매 후 원하는 섹션으로 이동해 우측 상단의 하트 아이콘을 클릭합니다.
사용한 알림 등록권은 섹션을 변경하거나 취소할 수 없습니다.
- 알림등록권은 1화 알림 후 소멸됩니다. + 알림등록권은 1회 알림 후 소멸됩니다.
`, diff --git a/frontend/src/Cabinet/components/Modals/ManualModal/ManualModal.tsx b/frontend/src/Cabinet/components/Modals/ManualModal/ManualModal.tsx index 82a00e39a..a238f8fb1 100644 --- a/frontend/src/Cabinet/components/Modals/ManualModal/ManualModal.tsx +++ b/frontend/src/Cabinet/components/Modals/ManualModal/ManualModal.tsx @@ -1,10 +1,13 @@ import React from "react"; import { useState } from "react"; import styled, { keyframes } from "styled-components"; -import { manualContentData, manualItemsData } from "@/Cabinet/assets/data/ManualContent"; -import { StoreItemType } from "@/Cabinet/types/enum/store.enum"; +import { + manualContentData, + manualItemsData, +} from "@/Cabinet/assets/data/ManualContent"; import { ReactComponent as MoveBtnImg } from "@/Cabinet/assets/images/moveButton.svg"; import ContentStatus from "@/Cabinet/types/enum/content.status.enum"; +import { StoreItemType } from "@/Cabinet/types/enum/store.enum"; interface ModalProps { contentStatus: ContentStatus; @@ -16,7 +19,9 @@ const ManualModal: React.FC = ({ setIsModalOpen, }) => { const [modalIsOpen, setModalIsOpen] = useState(true); - const [selectedItem, setSelectedItem] = useState(StoreItemType.EXTENSION); + const [selectedItem, setSelectedItem] = useState( + StoreItemType.EXTENSION + ); const contentData = manualContentData[contentStatus]; const isCabinetType = @@ -85,12 +90,12 @@ const ManualModal: React.FC = ({ {contentStatus === ContentStatus.STORE && ( <> - {Object.entries(manualItemsData).map(([key, item]) =>( + {Object.entries(manualItemsData).map(([key, item]) => ( handleIconClick(key as StoreItemType)} - className={selectedItem === key ? "selected" : ""} - color={contentData.pointColor} + key={key} + onClick={() => handleIconClick(key as StoreItemType)} + className={selectedItem === key ? "selected" : ""} + color={contentData.pointColor} > @@ -103,7 +108,7 @@ const ManualModal: React.FC = ({ __html: manualItemsData[selectedItem].content, }} > - + )} {contentStatus !== ContentStatus.STORE && ( @@ -370,7 +375,7 @@ const ContentImgStyled = styled.div<{ const ItemContentsStyled = styled.div` width: 45%; - height: 80px; + height: 90px; display: flex; margin-bottom: 30px; `; @@ -384,32 +389,27 @@ const ItemIconStyled = styled.div<{ display: flex; justify-content: center; align-items: center; - &.selected > svg { - filter: drop-shadow(0px 6px 3px var(--hover-box-shadow-color)); - width: 80px; - height: 80px; - transform-origin: center; - & > path { - stroke: ${(props) => props.color}; - } - } + & > svg { + padding: 4px; width: 80px; height: 80px; cursor: pointer; - transform-origin: center; + stroke-width: 50px; & > path { transform: scale(2); stroke: var(--ref-purple-690); } + } - &:hover { - transition: all 0.5s ease; - filter: drop-shadow(0px 6px 3px var(--hover-box-shadow-color)); - transform-origin: center; - & > path { - stroke: ${(props) => props.color}; - } + &:hover:not(.selected), + &.selected > svg { + width: 80px; + height: 80px; + filter: drop-shadow(0px 5px 3px var(--hover-box-shadow-color)); + transition: all 0.2s ease; + & > path { + stroke: ${(props) => props.color}; } } `; From 063dcf9c6b385ed461fdac5ca18f9c39f103aa4f Mon Sep 17 00:00:00 2001 From: Minkyu01 Date: Tue, 8 Oct 2024 14:20:47 +0900 Subject: [PATCH 24/24] =?UTF-8?q?[FE]=20FEAT:=20=EC=82=AC=EC=9A=A9=20?= =?UTF-8?q?=EC=95=88=ED=95=98=EB=8A=94=20css=20=EC=A0=9C=EA=B1=B0=20#1681?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- config | 2 +- .../Cabinet/components/Home/ServiceManual.tsx | 63 ------------------- 2 files changed, 1 insertion(+), 64 deletions(-) diff --git a/config b/config index dd72d80cc..93674bce3 160000 --- a/config +++ b/config @@ -1 +1 @@ -Subproject commit dd72d80cce8800e34f3938f3da0dfeb4ef9eb8eb +Subproject commit 93674bce354efe9ad8fb3a7a934bdbf5acd1d162 diff --git a/frontend/src/Cabinet/components/Home/ServiceManual.tsx b/frontend/src/Cabinet/components/Home/ServiceManual.tsx index 4148baad1..ccf8c876c 100644 --- a/frontend/src/Cabinet/components/Home/ServiceManual.tsx +++ b/frontend/src/Cabinet/components/Home/ServiceManual.tsx @@ -106,69 +106,6 @@ const TicketWrapperStyled = styled.div` filter: drop-shadow(10px 10px 10px var(--left-nav-border-shadow-color)); } `; -// 16.794 -const TicketStyled = styled.div` - display: flex; - align-items: center; - justify-content: flex-start; - font-size: 24px; - font-weight: bold; - width: 620px; - height: 300px; - position: relative; - background: linear-gradient( - to bottom, - var(--ref-purple-400), - var(--ref-purple-600) - ); - border-radius: 40px; - clip-path: path( - "M 0 175 - A 25 25 1 0 0 0 125 - L 0 0 - L 396.56 0 - L 413.354 16.794 - L 430.148 0 - L 620 0 - L 620 300 - L 430.148 300 - L 413.354 283.206 - L 396.56 300 - L 0 300 - Z" - ); - /* Explanation of path: - - M 0 175: Move to (0, 175) - - A 25 25 1 0 0 0 125: Draw an arc with radius 25, starting from (0, 175) to (0, 125) // radius-x, radius-y, x-axis-rotation, large-arc-flag, sweep-flag, x, y - - L 0 0: Draw a line from (0, 125) to (0, 0) - - L 396.56 0: Draw a line from (0, 0) to (396.56, 0) - - L 413.354 16.794: Draw a line from (396.56, 0) to (413.354, 16.794) - - L 430.148 0: Draw a line from (413.354, 16.794) to (430.148, 0) - - L 620 0: Draw a line from (430.148, 0) to (620, 0) - - L 620 300: Draw a line from (620, 0) to (620, 300) - - L 430.148 300: Draw a line from (620, 300) to (430.148, 300) - - L 413.354 283.206: Draw a line from (430.148, 300) to (413.354, 283.206) - - L 396.56 300: Draw a line from (413.354, 283.206) to (396.56, 300) - - L 0 300: Draw a line from (396.56, 300) to (0, 300) - - Z: Close the path - */ - &:after { - content: ""; - position: absolute; - top: 25px; - right: 32.99%; /* 2/3 point */ - height: 90%; - width: 4px; - background-image: linear-gradient( - to bottom, - white 33%, - rgba(255, 255, 255, 0) 0% - ); - background-position: right; - background-size: 10px 30px; - background-repeat: repeat-y; - } -`; const WrapperStyled = styled.div` display: flex;