From 28541a1749eed29ad015d3cfb88bcf742c6de4c8 Mon Sep 17 00:00:00 2001 From: Jetom88 Date: Fri, 18 Oct 2024 23:55:01 +0900 Subject: [PATCH 01/23] =?UTF-8?q?feat:=20react-datepicker=20=EB=9D=BC?= =?UTF-8?q?=EC=9D=B4=EB=B8=8C=EB=9F=AC=EB=A6=AC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 ++ pnpm-lock.yaml | 88 ++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 90 insertions(+) diff --git a/package.json b/package.json index fe6b338..7153546 100644 --- a/package.json +++ b/package.json @@ -12,8 +12,10 @@ "@vanilla-extract/css": "^1.15.3", "@vanilla-extract/sprinkles": "^1.6.3", "classnames": "^2.5.1", + "date-fns": "^4.1.0", "next": "14.2.5", "react": "^18", + "react-datepicker": "^7.4.0", "react-dom": "^18", "zustand": "^4.5.5" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3e46b41..9debf73 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -17,12 +17,18 @@ importers: classnames: specifier: ^2.5.1 version: 2.5.1 + date-fns: + specifier: ^4.1.0 + version: 4.1.0 next: specifier: 14.2.5 version: 14.2.5(@babel/core@7.25.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: specifier: ^18 version: 18.3.1 + react-datepicker: + specifier: ^7.4.0 + version: 7.4.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react-dom: specifier: ^18 version: 18.3.1(react@18.3.1) @@ -446,6 +452,27 @@ packages: resolution: {integrity: sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + '@floating-ui/core@1.6.8': + resolution: {integrity: sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==} + + '@floating-ui/dom@1.6.11': + resolution: {integrity: sha512-qkMCxSR24v2vGkhYDo/UzxfJN3D4syqSjyuTFz6C7XcpU1pASPRieNI0Kj5VP3/503mOfYiGY891ugBX1GlABQ==} + + '@floating-ui/react-dom@2.1.2': + resolution: {integrity: sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==} + peerDependencies: + react: '>=16.8.0' + react-dom: '>=16.8.0' + + '@floating-ui/react@0.26.25': + resolution: {integrity: sha512-hZOmgN0NTOzOuZxI1oIrDu3Gcl8WViIkvPMpB4xdd4QD6xAMtwgwr3VPoiyH/bLtRcS1cDnhxLSD1NsMJmwh/A==} + peerDependencies: + react: '>=16.8.0' + react-dom: '>=16.8.0' + + '@floating-ui/utils@0.2.8': + resolution: {integrity: sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==} + '@humanwhocodes/config-array@0.11.14': resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==} engines: {node: '>=10.10.0'} @@ -952,6 +979,10 @@ packages: client-only@0.0.1: resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==} + clsx@2.1.1: + resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==} + engines: {node: '>=6'} + color-convert@1.9.3: resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==} @@ -1008,6 +1039,12 @@ packages: resolution: {integrity: sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==} engines: {node: '>= 0.4'} + date-fns@3.6.0: + resolution: {integrity: sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==} + + date-fns@4.1.0: + resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==} + debug@3.2.7: resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==} peerDependencies: @@ -1857,6 +1894,12 @@ packages: randombytes@2.1.0: resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==} + react-datepicker@7.4.0: + resolution: {integrity: sha512-vSSok4DTZ9/Os8O4HjZLxh4SZVFU6dQvoCX6mfbNdBqMsBBdzftrvMz0Nb4UUVVbgj9o8PfX84K3/31oPrTqmg==} + peerDependencies: + react: ^16.9.0 || ^17 || ^18 + react-dom: ^16.9.0 || ^17 || ^18 + react-dom@18.3.1: resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==} peerDependencies: @@ -2070,6 +2113,9 @@ packages: resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} engines: {node: '>= 0.4'} + tabbable@6.2.0: + resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==} + tapable@2.2.1: resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==} engines: {node: '>=6'} @@ -2577,6 +2623,31 @@ snapshots: '@eslint/js@8.57.0': {} + '@floating-ui/core@1.6.8': + dependencies: + '@floating-ui/utils': 0.2.8 + + '@floating-ui/dom@1.6.11': + dependencies: + '@floating-ui/core': 1.6.8 + '@floating-ui/utils': 0.2.8 + + '@floating-ui/react-dom@2.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@floating-ui/dom': 1.6.11 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + + '@floating-ui/react@0.26.25(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@floating-ui/react-dom': 2.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@floating-ui/utils': 0.2.8 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + tabbable: 6.2.0 + + '@floating-ui/utils@0.2.8': {} + '@humanwhocodes/config-array@0.11.14': dependencies: '@humanwhocodes/object-schema': 2.0.3 @@ -3146,6 +3217,8 @@ snapshots: client-only@0.0.1: {} + clsx@2.1.1: {} + color-convert@1.9.3: dependencies: color-name: 1.1.3 @@ -3198,6 +3271,10 @@ snapshots: es-errors: 1.3.0 is-data-view: 1.0.1 + date-fns@3.6.0: {} + + date-fns@4.1.0: {} + debug@3.2.7: dependencies: ms: 2.1.3 @@ -4239,6 +4316,15 @@ snapshots: dependencies: safe-buffer: 5.2.1 + react-datepicker@7.4.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + dependencies: + '@floating-ui/react': 0.26.25(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + clsx: 2.1.1 + date-fns: 3.6.0 + prop-types: 15.8.1 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + react-dom@18.3.1(react@18.3.1): dependencies: loose-envify: 1.4.0 @@ -4492,6 +4578,8 @@ snapshots: supports-preserve-symlinks-flag@1.0.0: {} + tabbable@6.2.0: {} + tapable@2.2.1: {} terser-webpack-plugin@5.3.10(webpack@5.95.0): From 26e08535f923c73ff5d19a907f0b3b8d84e18d52 Mon Sep 17 00:00:00 2001 From: Jetom88 Date: Fri, 18 Oct 2024 23:55:32 +0900 Subject: [PATCH 02/23] =?UTF-8?q?rename:=20svg=20=ED=8C=8C=EC=9D=BC?= =?UTF-8?q?=EB=AA=85=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/svgs/poop/thin/{active_default.svg => active-default.svg} | 0 public/svgs/poop/thin/{active_crackle.svg => active-hard.svg} | 0 public/svgs/poop/thin/{active_thin.svg => active-thin.svg} | 0 public/svgs/poop/thin/{crackle.svg => hard.svg} | 0 4 files changed, 0 insertions(+), 0 deletions(-) rename public/svgs/poop/thin/{active_default.svg => active-default.svg} (100%) rename public/svgs/poop/thin/{active_crackle.svg => active-hard.svg} (100%) rename public/svgs/poop/thin/{active_thin.svg => active-thin.svg} (100%) rename public/svgs/poop/thin/{crackle.svg => hard.svg} (100%) diff --git a/public/svgs/poop/thin/active_default.svg b/public/svgs/poop/thin/active-default.svg similarity index 100% rename from public/svgs/poop/thin/active_default.svg rename to public/svgs/poop/thin/active-default.svg diff --git a/public/svgs/poop/thin/active_crackle.svg b/public/svgs/poop/thin/active-hard.svg similarity index 100% rename from public/svgs/poop/thin/active_crackle.svg rename to public/svgs/poop/thin/active-hard.svg diff --git a/public/svgs/poop/thin/active_thin.svg b/public/svgs/poop/thin/active-thin.svg similarity index 100% rename from public/svgs/poop/thin/active_thin.svg rename to public/svgs/poop/thin/active-thin.svg diff --git a/public/svgs/poop/thin/crackle.svg b/public/svgs/poop/thin/hard.svg similarity index 100% rename from public/svgs/poop/thin/crackle.svg rename to public/svgs/poop/thin/hard.svg From 073e47c9815bd489f672bc6db3c8fa9418b04bc5 Mon Sep 17 00:00:00 2001 From: Jetom88 Date: Fri, 18 Oct 2024 23:55:57 +0900 Subject: [PATCH 03/23] =?UTF-8?q?fix:=20memo=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/components/common/Memo.tsx | 37 ++++++++++++++++-------------- 1 file changed, 20 insertions(+), 17 deletions(-) diff --git a/src/app/components/common/Memo.tsx b/src/app/components/common/Memo.tsx index 4737701..71bbbbb 100644 --- a/src/app/components/common/Memo.tsx +++ b/src/app/components/common/Memo.tsx @@ -4,32 +4,35 @@ import { gray300 } from "@/app/styles/colors.css"; import { pointer } from "@/app/styles/global.css"; import { memoBox } from "@/app/styles/common/memo.css"; import { flexSprinklesFc } from "./utils/flex"; -import { CSSProperties } from "@vanilla-extract/css"; type MemoPorps = { onClick?: () => void; - date: string; - text: string; - height: CSSProperties["height"]; + date?: string; + text?: string; + height?: string; + edit?: boolean; + onChange?: (e: React.ChangeEvent) => void; }; -const Memo = ({ onClick, date, text, height }: MemoPorps) => { +const Memo = ({ onClick, date, text, height = "200px", edit = false, onChange }: MemoPorps) => { return ( -
+
icon
-

24.09.09(화)

-

- 오늘은 조금 힘들었다. 물을 더 많이 마셔야겠다 😥 오늘은 조금 힘들었다. 물을 더 많이 마셔야겠다 😥 - 오늘은 조금 힘들었다. 물을 더 많이 마셔야겠다 😥 -

+ {date &&

{date}

} + + {text} +
-

- 수정 |{" "} - - 삭제 - -

+ + {edit && ( +

+ 수정 |{" "} + + 삭제 + +

+ )}
); }; From 41560e3617544e212d00fad698e1f93799e8e3a3 Mon Sep 17 00:00:00 2001 From: Jetom88 Date: Fri, 18 Oct 2024 23:57:02 +0900 Subject: [PATCH 04/23] =?UTF-8?q?feat:=20detail=20page=20=EB=82=B4?= =?UTF-8?q?=EC=9A=A9=20localStorage=EC=97=90=20=EB=8B=B4=EA=B8=B0=EB=8F=84?= =?UTF-8?q?=EB=A1=9D=20=EB=A1=9C=EC=A7=81=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/info/detail/page.tsx | 69 +++++++++++++++++++++++------------- 1 file changed, 45 insertions(+), 24 deletions(-) diff --git a/src/app/info/detail/page.tsx b/src/app/info/detail/page.tsx index 3ab9426..649e6cb 100644 --- a/src/app/info/detail/page.tsx +++ b/src/app/info/detail/page.tsx @@ -2,40 +2,61 @@ import Button from "@/app/components/common/Button"; import Memo from "@/app/components/common/Memo"; +import Popup from "@/app/components/common/Popup"; import { flexSprinklesFc } from "@/app/components/common/utils/flex"; import { gray300, colors } from "@/app/styles/colors.css"; import { semiBold, heading2, caption } from "@/app/styles/font.css"; import { infoContainer } from "@/app/styles/info/common.css"; +import useInfoStore from "@/store/store"; import { useRouter } from "next/navigation"; +import { useState } from "react"; const page = () => { + const [showPopup, setShowPopup] = useState(false); const router = useRouter(); + const { recordNote, setRecordNote } = useInfoStore(); + return ( -
-
-

- 기록 할 -
- 내용이 있나요? -

-

기록하고 싶은 내용이 있다면 적어보세요

-
- + <> + {showPopup && ( + +
- +
+
+ + ); }; From e876c71758733bd272d21b1353ed058c46982f7a Mon Sep 17 00:00:00 2001 From: Jetom88 Date: Fri, 18 Oct 2024 23:57:46 +0900 Subject: [PATCH 05/23] =?UTF-8?q?feat:=20=EB=AC=BD=EA=B8=B0=20=EB=B0=8F=20?= =?UTF-8?q?=EB=AA=A8=EC=96=91=20=ED=81=B4=EB=A6=AD=20=EA=B0=80=EB=8A=A5?= =?UTF-8?q?=ED=95=98=EB=8F=84=EB=A1=9D=20=EB=A1=9C=EC=A7=81=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/info/shape/page.tsx | 110 +++++++++++++++++++++++++----------- 1 file changed, 76 insertions(+), 34 deletions(-) diff --git a/src/app/info/shape/page.tsx b/src/app/info/shape/page.tsx index 2fa9349..17c2d72 100644 --- a/src/app/info/shape/page.tsx +++ b/src/app/info/shape/page.tsx @@ -4,11 +4,12 @@ import Button from "@/app/components/common/Button"; import { flexSprinklesFc } from "@/app/components/common/utils/flex"; import { colors, gray300, primary, white } from "@/app/styles/colors.css"; import { heading2, semiBold } from "@/app/styles/font.css"; -import { infoBox } from "@/app/styles/info/common.css"; +import { pointer } from "@/app/styles/global.css"; import { shapeContentBox, shapeContentBoxWrapper, shapeContentBoxText } from "@/app/styles/info/shape.css"; import { paddingSprinkles } from "@/app/styles/padding.css"; import Image, { ImageProps } from "next/image"; import { useRouter } from "next/navigation"; +import { useState } from "react"; type ContentBoxProps = { src: string; @@ -16,12 +17,13 @@ type ContentBoxProps = { width: ImageProps["width"]; height: ImageProps["height"]; active?: boolean; + onClick: (label: string) => void; }; -const ContentBox = ({ src, text, width, height, active }: ContentBoxProps) => { +const ContentBox = ({ src, text, width, height, active, onClick }: ContentBoxProps) => { return ( -
-
+
onClick(text)}> +
{text}

{text}

@@ -31,9 +33,51 @@ const ContentBox = ({ src, text, width, height, active }: ContentBoxProps) => { const page = () => { const router = useRouter(); + const [stoolAttributes, setStoolAttributes] = useState({ + consistency: "thin", + shapeType: "poop-1", + }); + + const onConsistencyChange = (consistency: string) => { + setStoolAttributes((prev) => ({ ...prev, consistency: consistency })); + }; + + const onShapeChange = (shape: string) => { + setStoolAttributes((prev) => ({ ...prev, shapeType: shape })); + }; + + const getConsistencyImageSrc = (label: string) => { + return stoolAttributes.consistency === label + ? `/svgs/poop/thin/active-${label}.svg` + : `/svgs/poop/thin/${label}.svg`; + }; + + const getShapeTypeImageSrc = (level: number) => { + return stoolAttributes.shapeType === `poop-${level}` + ? `/svgs/poop/active-poop-${level}.svg` + : `/svgs/poop/poop-${level}.svg`; + }; + + const consistencyOption = [ + { label: "묽음", consistency: "thin" }, + { label: "정상", consistency: "default" }, + { label: "딱딱", consistency: "hard" }, + ]; + + const shapeTypeOption = + // + [ + { label: "단단한 덩어리", width: 71, height: 31, shape: "poop-1" }, + { label: "단단한 소시지", width: 63, height: 30, shape: "poop-2" }, + { label: "표면에 균열 있는 소시지", width: 67, height: 25, shape: "poop-3" }, + { label: "매끈한 소시지", width: 70, height: 14, shape: "poop-4" }, + { label: "부드러운 덩어리", width: 59, height: 31, shape: "poop-5" }, + { label: "흐물흐물한 덩어리", width: 69, height: 33, shape: "poop-6" }, + { label: "완전한 액체", width: 68, height: 90, shape: "poop-7" }, + ]; return ( -
+

묽기 및 모양을 @@ -46,41 +90,39 @@ const page = () => {

묽음 정도

- - - + {consistencyOption.map((image) => { + return ( + onConsistencyChange(image.consistency)} + active={stoolAttributes.consistency === image.consistency} + /> + ); + })}

-

묽음 정도

+

변의 모양

- - - - - - - + {shapeTypeOption.map((image, idx) => { + return ( + onShapeChange(image.shape)} + active={stoolAttributes.shapeType === image.shape} + /> + ); + })}
From 7abf10a7012144f9a7414872d84d1875ac0758f2 Mon Sep 17 00:00:00 2001 From: Jetom88 Date: Fri, 18 Oct 2024 23:58:45 +0900 Subject: [PATCH 06/23] =?UTF-8?q?feat:=20store=20=ED=8C=8C=EC=9D=BC=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80(=EC=B6=94=ED=9B=84=20=EB=8D=B0=EC=9D=B4?= =?UTF-8?q?=ED=84=B0=EB=A5=BC=20=EB=A1=9C=EC=BB=AC=EC=8A=A4=ED=86=A0?= =?UTF-8?q?=EB=A6=AC=EC=A7=80=EC=97=90=20=EB=84=A3=EA=B8=B0=EC=9C=84?= =?UTF-8?q?=ED=95=A8)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/store/store.ts | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 src/store/store.ts diff --git a/src/store/store.ts b/src/store/store.ts new file mode 100644 index 0000000..a75facc --- /dev/null +++ b/src/store/store.ts @@ -0,0 +1,31 @@ +import { create } from "zustand"; + +type State = { + bowelTime: string; + setBowelTime: (time: string) => void; + + consistencyLevel: string; + setConsistencyLevel: (level: string) => void; + + shapeType: string; + setShapeType: (type: string) => void; + + recordNote: string; + setRecordNote: (note: string) => void; +}; + +const useInfoStore = create((set) => ({ + bowelTime: "", + setBowelTime: (time: string) => set({ bowelTime: time }), + + consistencyLevel: "", + setConsistencyLevel: (level: string) => set({ consistencyLevel: level }), + + shapeType: "", + setShapeType: (type) => set({ shapeType: type }), + + recordNote: "", + setRecordNote: (note: string) => set({ recordNote: note }), +})); + +export default useInfoStore; From 4bdd82cde4559c9cbac83d7ddaa6b9b17cd8eed0 Mon Sep 17 00:00:00 2001 From: Jetom88 Date: Sat, 19 Oct 2024 17:33:36 +0900 Subject: [PATCH 07/23] =?UTF-8?q?remove:=20css=20=EC=9C=84=EC=B9=98=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=20=EB=B0=8F=20react-datepicker=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 - pnpm-lock.yaml | 80 ------------------- src/app/components/common/Button.tsx | 2 +- src/app/components/common/Memo.tsx | 2 +- src/app/components/common/Popup.tsx | 2 +- .../common/button.css.ts | 4 +- .../common/input.css.ts | 3 +- .../{styles => components}/common/memo.css.ts | 2 +- .../common/popup.css.ts | 2 +- 9 files changed, 8 insertions(+), 90 deletions(-) rename src/app/{styles => components}/common/button.css.ts (90%) rename src/app/{styles => components}/common/input.css.ts (78%) rename src/app/{styles => components}/common/memo.css.ts (81%) rename src/app/{styles => components}/common/popup.css.ts (91%) diff --git a/package.json b/package.json index 7153546..cf6fa42 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,6 @@ "date-fns": "^4.1.0", "next": "14.2.5", "react": "^18", - "react-datepicker": "^7.4.0", "react-dom": "^18", "zustand": "^4.5.5" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9debf73..2f7055c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -26,9 +26,6 @@ importers: react: specifier: ^18 version: 18.3.1 - react-datepicker: - specifier: ^7.4.0 - version: 7.4.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react-dom: specifier: ^18 version: 18.3.1(react@18.3.1) @@ -452,27 +449,6 @@ packages: resolution: {integrity: sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} - '@floating-ui/core@1.6.8': - resolution: {integrity: sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==} - - '@floating-ui/dom@1.6.11': - resolution: {integrity: sha512-qkMCxSR24v2vGkhYDo/UzxfJN3D4syqSjyuTFz6C7XcpU1pASPRieNI0Kj5VP3/503mOfYiGY891ugBX1GlABQ==} - - '@floating-ui/react-dom@2.1.2': - resolution: {integrity: sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==} - peerDependencies: - react: '>=16.8.0' - react-dom: '>=16.8.0' - - '@floating-ui/react@0.26.25': - resolution: {integrity: sha512-hZOmgN0NTOzOuZxI1oIrDu3Gcl8WViIkvPMpB4xdd4QD6xAMtwgwr3VPoiyH/bLtRcS1cDnhxLSD1NsMJmwh/A==} - peerDependencies: - react: '>=16.8.0' - react-dom: '>=16.8.0' - - '@floating-ui/utils@0.2.8': - resolution: {integrity: sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==} - '@humanwhocodes/config-array@0.11.14': resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==} engines: {node: '>=10.10.0'} @@ -979,10 +955,6 @@ packages: client-only@0.0.1: resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==} - clsx@2.1.1: - resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==} - engines: {node: '>=6'} - color-convert@1.9.3: resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==} @@ -1039,9 +1011,6 @@ packages: resolution: {integrity: sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==} engines: {node: '>= 0.4'} - date-fns@3.6.0: - resolution: {integrity: sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==} - date-fns@4.1.0: resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==} @@ -1894,12 +1863,6 @@ packages: randombytes@2.1.0: resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==} - react-datepicker@7.4.0: - resolution: {integrity: sha512-vSSok4DTZ9/Os8O4HjZLxh4SZVFU6dQvoCX6mfbNdBqMsBBdzftrvMz0Nb4UUVVbgj9o8PfX84K3/31oPrTqmg==} - peerDependencies: - react: ^16.9.0 || ^17 || ^18 - react-dom: ^16.9.0 || ^17 || ^18 - react-dom@18.3.1: resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==} peerDependencies: @@ -2113,9 +2076,6 @@ packages: resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} engines: {node: '>= 0.4'} - tabbable@6.2.0: - resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==} - tapable@2.2.1: resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==} engines: {node: '>=6'} @@ -2623,31 +2583,6 @@ snapshots: '@eslint/js@8.57.0': {} - '@floating-ui/core@1.6.8': - dependencies: - '@floating-ui/utils': 0.2.8 - - '@floating-ui/dom@1.6.11': - dependencies: - '@floating-ui/core': 1.6.8 - '@floating-ui/utils': 0.2.8 - - '@floating-ui/react-dom@2.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': - dependencies: - '@floating-ui/dom': 1.6.11 - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) - - '@floating-ui/react@0.26.25(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': - dependencies: - '@floating-ui/react-dom': 2.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@floating-ui/utils': 0.2.8 - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) - tabbable: 6.2.0 - - '@floating-ui/utils@0.2.8': {} - '@humanwhocodes/config-array@0.11.14': dependencies: '@humanwhocodes/object-schema': 2.0.3 @@ -3217,8 +3152,6 @@ snapshots: client-only@0.0.1: {} - clsx@2.1.1: {} - color-convert@1.9.3: dependencies: color-name: 1.1.3 @@ -3271,8 +3204,6 @@ snapshots: es-errors: 1.3.0 is-data-view: 1.0.1 - date-fns@3.6.0: {} - date-fns@4.1.0: {} debug@3.2.7: @@ -4316,15 +4247,6 @@ snapshots: dependencies: safe-buffer: 5.2.1 - react-datepicker@7.4.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1): - dependencies: - '@floating-ui/react': 0.26.25(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - clsx: 2.1.1 - date-fns: 3.6.0 - prop-types: 15.8.1 - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) - react-dom@18.3.1(react@18.3.1): dependencies: loose-envify: 1.4.0 @@ -4578,8 +4500,6 @@ snapshots: supports-preserve-symlinks-flag@1.0.0: {} - tabbable@6.2.0: {} - tapable@2.2.1: {} terser-webpack-plugin@5.3.10(webpack@5.95.0): diff --git a/src/app/components/common/Button.tsx b/src/app/components/common/Button.tsx index fdc69fd..3c0fcb5 100644 --- a/src/app/components/common/Button.tsx +++ b/src/app/components/common/Button.tsx @@ -1,6 +1,6 @@ import { colors } from "@/app/styles/colors.css"; -import { buttonSprinkles, ButtonSprinkles, buttonWrapper } from "@/app/styles/common/button.css"; import { pointer } from "@/app/styles/global.css"; +import { ButtonSprinkles, buttonSprinkles, buttonWrapper } from "./button.css"; interface ButtonProps extends ButtonSprinkles { text: string; diff --git a/src/app/components/common/Memo.tsx b/src/app/components/common/Memo.tsx index 71bbbbb..e88482b 100644 --- a/src/app/components/common/Memo.tsx +++ b/src/app/components/common/Memo.tsx @@ -2,8 +2,8 @@ import { caption2, subFontStyle } from "@/app/styles/font.css"; import Image from "next/image"; import { gray300 } from "@/app/styles/colors.css"; import { pointer } from "@/app/styles/global.css"; -import { memoBox } from "@/app/styles/common/memo.css"; import { flexSprinklesFc } from "./utils/flex"; +import { memoBox } from "./memo.css"; type MemoPorps = { onClick?: () => void; diff --git a/src/app/components/common/Popup.tsx b/src/app/components/common/Popup.tsx index 9fed3b6..a0e18d5 100644 --- a/src/app/components/common/Popup.tsx +++ b/src/app/components/common/Popup.tsx @@ -1,6 +1,6 @@ -import { popupContents, popupWrapper } from "@/app/styles/common/popup.css"; import { paragraph2, semiBold } from "@/app/styles/font.css"; import { flexSprinklesFc } from "./utils/flex"; +import { popupWrapper, popupContents } from "./popup.css"; const Popup = ({ text, children }: { text: string; children: React.ReactNode }) => { return ( diff --git a/src/app/styles/common/button.css.ts b/src/app/components/common/button.css.ts similarity index 90% rename from src/app/styles/common/button.css.ts rename to src/app/components/common/button.css.ts index f5c08a1..f35a4d9 100644 --- a/src/app/styles/common/button.css.ts +++ b/src/app/components/common/button.css.ts @@ -1,7 +1,7 @@ import { createSprinkles, defineProperties } from "@vanilla-extract/sprinkles"; -import { colors } from "../colors.css"; -import { light } from "../font.css"; import { style } from "@vanilla-extract/css"; +import { colors } from "@/app/styles/colors.css"; +import { light } from "@/app/styles/font.css"; const buttonProperties = defineProperties({ properties: { diff --git a/src/app/styles/common/input.css.ts b/src/app/components/common/input.css.ts similarity index 78% rename from src/app/styles/common/input.css.ts rename to src/app/components/common/input.css.ts index 320940b..5ba62c5 100644 --- a/src/app/styles/common/input.css.ts +++ b/src/app/components/common/input.css.ts @@ -1,6 +1,5 @@ +import { colors } from "@/app/styles/colors.css"; import { style } from "@vanilla-extract/css"; -import { colors } from "../colors.css"; -import { caption } from "../font.css"; export const inputStyle = style({ width: "100%", diff --git a/src/app/styles/common/memo.css.ts b/src/app/components/common/memo.css.ts similarity index 81% rename from src/app/styles/common/memo.css.ts rename to src/app/components/common/memo.css.ts index 1475a9e..c26f721 100644 --- a/src/app/styles/common/memo.css.ts +++ b/src/app/components/common/memo.css.ts @@ -1,5 +1,5 @@ +import { colors } from "@/app/styles/colors.css"; import { style } from "@vanilla-extract/css"; -import { colors } from "../colors.css"; export const memoBox = style({ display: "grid", diff --git a/src/app/styles/common/popup.css.ts b/src/app/components/common/popup.css.ts similarity index 91% rename from src/app/styles/common/popup.css.ts rename to src/app/components/common/popup.css.ts index 8b15db8..e6da60b 100644 --- a/src/app/styles/common/popup.css.ts +++ b/src/app/components/common/popup.css.ts @@ -1,5 +1,5 @@ +import { colors } from "@/app/styles/colors.css"; import { style } from "@vanilla-extract/css"; -import { colors } from "../colors.css"; export const popupWrapper = style({ position: "fixed", From feaa127b66be21f82b3c226f594f0a9adfefd81b Mon Sep 17 00:00:00 2001 From: Jetom88 Date: Sat, 19 Oct 2024 17:34:26 +0900 Subject: [PATCH 08/23] =?UTF-8?q?feat:=20time=EC=9D=84=20wheel=20=EB=B0=94?= =?UTF-8?q?=EA=BF=80=20=EC=88=98=20=EC=9E=88=EA=B2=8C=20=EB=A1=9C=EC=A7=81?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20button=20=EC=9B=8C=EB=94=A9?= =?UTF-8?q?=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20routing=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/info/layout.tsx | 10 ++++- src/app/info/shape/page.tsx | 4 +- src/app/info/time/TimePicker.tsx | 66 +++++++++++++++++++++++++++++ src/app/info/time/page.tsx | 7 ++- src/app/info/time/timePicker.css.ts | 9 ++++ src/app/page.tsx | 2 +- 6 files changed, 92 insertions(+), 6 deletions(-) create mode 100644 src/app/info/time/TimePicker.tsx create mode 100644 src/app/info/time/timePicker.css.ts diff --git a/src/app/info/layout.tsx b/src/app/info/layout.tsx index 29c2e92..bfd5353 100644 --- a/src/app/info/layout.tsx +++ b/src/app/info/layout.tsx @@ -11,7 +11,15 @@ export default function Layout({ children }: { children: React.ReactNode }) { return (
- back + back { + router.push("/record"); + }} + />
{children} diff --git a/src/app/info/shape/page.tsx b/src/app/info/shape/page.tsx index 17c2d72..8b38927 100644 --- a/src/app/info/shape/page.tsx +++ b/src/app/info/shape/page.tsx @@ -129,11 +129,11 @@ const page = () => {
-
08:00 오전
+
+ +
+ + ); +}; + +export default SignupForm; diff --git a/src/app/auth/signup/components/signupPopup.tsx b/src/app/auth/signup/components/signupPopup.tsx new file mode 100644 index 0000000..16b12bb --- /dev/null +++ b/src/app/auth/signup/components/signupPopup.tsx @@ -0,0 +1,46 @@ +import Button from "@/app/components/common/Button"; +import Popup from "@/app/components/common/Popup"; +import { usePopupStore } from "@/app/store/popup/PopupStore"; +import { colors } from "@/app/styles/colors.css"; +import { useRouter } from "next/navigation"; + +const messageRoute: Record = { + "이미 존재하는 회원입니다.": null, + "이미 존재하는 닉네임입니다.": null, + "회원가입이 완료됐습니다.": "/", +}; + +const SignupPopup = () => { + const router = useRouter(); + const signupMessageState = usePopupStore((state) => state.message); + const signupPopupState = usePopupStore((state) => state.isPopup); + const setSignupPopupState = usePopupStore((state) => state.setIsPopup); + + const onClick = () => { + const route = signupMessageState ? messageRoute[signupMessageState] : null; + + if (route) { + setSignupPopupState(false); + router.push(route); + } else { + setSignupPopupState(false); + } + }; + return ( +
+ {signupPopupState && ( + +
+ ); +}; + +export default SignupPopup; diff --git a/src/app/auth/signup/hook/index.ts b/src/app/auth/signup/hook/index.ts new file mode 100644 index 0000000..f3a79bb --- /dev/null +++ b/src/app/auth/signup/hook/index.ts @@ -0,0 +1 @@ +export { useSignup } from "./useSignup"; diff --git a/src/app/auth/signup/hook/useSignup.ts b/src/app/auth/signup/hook/useSignup.ts new file mode 100644 index 0000000..0019018 --- /dev/null +++ b/src/app/auth/signup/hook/useSignup.ts @@ -0,0 +1,33 @@ +import { usePopupStore } from "@/app/store/popup/PopupStore"; +import { LocalStorage } from "@/app/types/localStorageSchema"; +import { signupSchema } from "@/app/types/signupSchema"; +import { z } from "zod"; + +export const useSignup = () => { + const setIsPopupState = usePopupStore((state) => state.setIsPopup); + const setMessageState = usePopupStore((state) => state.setMessage); + + const onSignupSubmit = (data: z.infer) => { + const signupStorage = new LocalStorage("signup"); + + if (data.id === signupStorage.get()?.id) { + setIsPopupState(true); + setMessageState("이미 존재하는 회원입니다."); + return; + } + + if (data.nickname === signupStorage.get()?.nickname) { + setIsPopupState(true); + setMessageState("이미 존재하는 닉네임입니다."); + return; + } + + if (data) { + setIsPopupState(true); + setMessageState("회원가입이 완료됐습니다."); + signupStorage.set(data); + } + }; + + return { onSignupSubmit }; +}; diff --git a/src/app/auth/signup/page.tsx b/src/app/auth/signup/page.tsx index 7e021ae..09e9578 100644 --- a/src/app/auth/signup/page.tsx +++ b/src/app/auth/signup/page.tsx @@ -1,66 +1,20 @@ "use client"; -import { flexSprinklesFc } from "@/app/components/common/utils/flex"; -import { signupContainer, signupWrapper } from "./signup.css"; -import { caption, heading2, regular, semiBold } from "@/app/styles/font.css"; +import { signupContainer, signupWrapper } from "./styles/signup.css"; +import { heading2, semiBold } from "@/app/styles/font.css"; import { paddingSprinkles } from "@/app/styles/padding.css"; -import { colors, pink80 } from "@/app/styles/colors.css"; import Image from "next/image"; import { pointer } from "@/app/styles/global.css"; import { useRouter } from "next/navigation"; -import Button from "@/app/components/common/Button"; -import { useForm } from "react-hook-form"; -import { signupSchema } from "@/app/types/signupSchema"; -import { z } from "zod"; -import { zodResolver } from "@hookform/resolvers/zod"; -import { useState } from "react"; -import Popup from "@/app/components/common/Popup"; -import { LocalStorage } from "@/app/types/localStorageSchema"; -import { inputStyle } from "@/app/components/common/input.css"; +import SignupPopup from "./components/signupPopup"; +import SignupForm from "./components/signupForm"; const Page = () => { const router = useRouter(); - const [submit, setSubmit] = useState(false); - - const { - register, - handleSubmit, - formState: { errors, isValid }, - } = useForm>({ - resolver: zodResolver(signupSchema), - mode: "onChange", - defaultValues: { - id: "", - password: "", - confirmPassword: "", - nickname: "", - }, - }); - - const onSubmit = (data: z.infer) => { - if (data) { - const signupStorage = new LocalStorage("signup"); - - setSubmit(true); - signupStorage.set(data); - } - }; return ( <> - {submit && ( - -
- -
-
-
-

- 아이디* -

- - -

- {errors.id?.message} -

-
- -
-

- 비밀번호* -

- - -

- {errors.password?.message} -

-
- -
-

- 비밀번호 확인* -

- - -

- {errors.confirmPassword?.message} -

-
- -
-

- 닉네임* -

- - -

- {errors.nickname?.message} -

-
-
-
-
-
+ +
diff --git a/src/app/auth/signup/signup.css.ts b/src/app/auth/signup/styles/signup.css.ts similarity index 100% rename from src/app/auth/signup/signup.css.ts rename to src/app/auth/signup/styles/signup.css.ts From 1e3d4d0465f48f46d13225da3ea06eb59159b06f Mon Sep 17 00:00:00 2001 From: Jetom88 Date: Sat, 26 Oct 2024 22:47:41 +0900 Subject: [PATCH 17/23] =?UTF-8?q?remove:=20css=20=ED=8C=8C=EC=9D=BC=20?= =?UTF-8?q?=EA=B2=BD=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/info/{ => common}/common.css.ts | 0 src/app/info/layout.tsx | 2 +- src/app/info/shape/{ => styles}/shape.css.ts | 1 - src/app/store/login/loginStore.ts | 0 src/app/types/localStorageSchema.ts | 3 ++- 5 files changed, 3 insertions(+), 3 deletions(-) rename src/app/info/{ => common}/common.css.ts (100%) rename src/app/info/shape/{ => styles}/shape.css.ts (99%) delete mode 100644 src/app/store/login/loginStore.ts diff --git a/src/app/info/common.css.ts b/src/app/info/common/common.css.ts similarity index 100% rename from src/app/info/common.css.ts rename to src/app/info/common/common.css.ts diff --git a/src/app/info/layout.tsx b/src/app/info/layout.tsx index 76863c5..447c13a 100644 --- a/src/app/info/layout.tsx +++ b/src/app/info/layout.tsx @@ -4,7 +4,7 @@ import { useRouter } from "next/navigation"; import Image from "next/image"; import { pointer } from "../styles/global.css"; import { paddingSprinkles } from "../styles/padding.css"; -import { infoWrapper } from "./common.css"; +import { infoWrapper } from "./common/common.css"; export default function Layout({ children }: { children: React.ReactNode }) { const router = useRouter(); diff --git a/src/app/info/shape/shape.css.ts b/src/app/info/shape/styles/shape.css.ts similarity index 99% rename from src/app/info/shape/shape.css.ts rename to src/app/info/shape/styles/shape.css.ts index c23059a..c9aaa4e 100644 --- a/src/app/info/shape/shape.css.ts +++ b/src/app/info/shape/styles/shape.css.ts @@ -19,7 +19,6 @@ export const shapeContentBox = style({ justifyContent: "center", width: "74px", height: "74px", - background: colors.white30, }); diff --git a/src/app/store/login/loginStore.ts b/src/app/store/login/loginStore.ts deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/types/localStorageSchema.ts b/src/app/types/localStorageSchema.ts index 81878f3..bd108d9 100644 --- a/src/app/types/localStorageSchema.ts +++ b/src/app/types/localStorageSchema.ts @@ -6,6 +6,7 @@ export type LocalStorageSchema = { signup: z.infer; signin: z.infer; goal: string; + recordNote: string; }; type LocalStorageMapper = { @@ -35,7 +36,7 @@ export class LocalStorage { } set(target: LocalStorageSchema[T]): void { - const value = this.mapper.toJson(target); + const value = target === "" ? JSON.stringify("") : this.mapper.toJson(target); localStorage.setItem(this.key, value); } From 4f77c9156634c61c1eae1cf6625ef11fa0df1d95 Mon Sep 17 00:00:00 2001 From: Jetom88 Date: Sat, 26 Oct 2024 22:50:05 +0900 Subject: [PATCH 18/23] =?UTF-8?q?feat:=20detail=20page=20fsd=20=ED=8C=A8?= =?UTF-8?q?=ED=84=B4=EC=9C=BC=EB=A1=9C=20=EB=82=98=EB=88=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/info/detail/components/popup.tsx | 42 ++++++++++++++++++++ src/app/info/detail/components/titleText.tsx | 18 +++++++++ src/app/info/detail/page.tsx | 40 +++++-------------- 3 files changed, 71 insertions(+), 29 deletions(-) create mode 100644 src/app/info/detail/components/popup.tsx create mode 100644 src/app/info/detail/components/titleText.tsx diff --git a/src/app/info/detail/components/popup.tsx b/src/app/info/detail/components/popup.tsx new file mode 100644 index 0000000..2f9506e --- /dev/null +++ b/src/app/info/detail/components/popup.tsx @@ -0,0 +1,42 @@ +import Button from "@/app/components/common/Button"; +import Popup from "@/app/components/common/Popup"; +import useInfoStore from "@/app/store/info/infoStore"; +import { usePopupStore } from "@/app/store/popup/PopupStore"; +import { colors } from "@/app/styles/colors.css"; +import { LocalStorage } from "@/app/types/localStorageSchema"; +import { useRouter } from "next/navigation"; + +const DetailPopup = () => { + const router = useRouter(); + const detailPopupState = usePopupStore((state) => state.isPopup); + const setDetailPopupState = usePopupStore((state) => state.setIsPopup); + + const recordNoteState = useInfoStore((state) => state.recordNote); + const setRecordNoteState = useInfoStore((state) => state.setRecordNote); + + const detailStorage = new LocalStorage("recordNote"); + + const onClick = () => { + if (recordNoteState === "") { + setDetailPopupState(false); + detailStorage.set(""); + router.push("/record"); + } else { + setDetailPopupState(false); + detailStorage.set(recordNoteState); + router.push("/record"); + setRecordNoteState(""); + } + }; + return ( + <> + {detailPopupState && ( + + ); }; diff --git a/src/app/info/shape/components/shapeTypeBox.tsx b/src/app/info/shape/components/shapeTypeBox.tsx index e0d87bb..a9a7e3c 100644 --- a/src/app/info/shape/components/shapeTypeBox.tsx +++ b/src/app/info/shape/components/shapeTypeBox.tsx @@ -9,7 +9,7 @@ const ShapeTypeBox = () => { const setStoolAttributesState = useInfoStore((state) => state.setStoolAttributes); const onShapeChange = (value: StoolAttributes["shapeType"]) => { - setStoolAttributesState({ shapeType: value as StoolAttributes["shapeType"] }); + setStoolAttributesState({ shapeType: value }); }; const getShapeTypeImageSrc = (level: number) => {