From 237afb9919784925cc947f80c628cf28470278a6 Mon Sep 17 00:00:00 2001 From: Jetom88 Date: Thu, 17 Oct 2024 18:09:15 +0900 Subject: [PATCH 01/23] =?UTF-8?q?remove:=20css=20=ED=8C=8C=EC=9D=BC?= =?UTF-8?q?=EC=9D=84=20page.tsx=EC=99=80=20=EA=B0=99=EC=9D=80=20=EA=B2=BD?= =?UTF-8?q?=EB=A1=9C=EC=97=90=20=EB=84=A3=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/{styles => }/info/common.css.ts | 0 src/app/{styles/info => info/shape}/shape.css.ts | 0 src/app/{styles/info => info/time}/time.css.ts | 0 src/app/{styles/login => }/login.css.ts | 6 +++--- src/app/my/layout.tsx | 2 +- src/app/{styles => }/my/my.css.ts | 0 src/app/my/page.tsx | 2 +- src/app/{styles => }/record/record.css.ts | 0 8 files changed, 5 insertions(+), 5 deletions(-) rename src/app/{styles => }/info/common.css.ts (100%) rename src/app/{styles/info => info/shape}/shape.css.ts (100%) rename src/app/{styles/info => info/time}/time.css.ts (100%) rename src/app/{styles/login => }/login.css.ts (85%) rename src/app/{styles => }/my/my.css.ts (100%) rename src/app/{styles => }/record/record.css.ts (100%) diff --git a/src/app/styles/info/common.css.ts b/src/app/info/common.css.ts similarity index 100% rename from src/app/styles/info/common.css.ts rename to src/app/info/common.css.ts diff --git a/src/app/styles/info/shape.css.ts b/src/app/info/shape/shape.css.ts similarity index 100% rename from src/app/styles/info/shape.css.ts rename to src/app/info/shape/shape.css.ts diff --git a/src/app/styles/info/time.css.ts b/src/app/info/time/time.css.ts similarity index 100% rename from src/app/styles/info/time.css.ts rename to src/app/info/time/time.css.ts diff --git a/src/app/styles/login/login.css.ts b/src/app/login.css.ts similarity index 85% rename from src/app/styles/login/login.css.ts rename to src/app/login.css.ts index f863d40..7a795a0 100644 --- a/src/app/styles/login/login.css.ts +++ b/src/app/login.css.ts @@ -1,7 +1,7 @@ import { style } from "@vanilla-extract/css"; -import { semiBold, heading, caption } from "../font.css"; -import { paddingSprinkles } from "../padding.css"; -import { vars } from "../vars.css"; +import { semiBold, heading, caption } from "./styles/font.css"; +import { paddingSprinkles } from "./styles/padding.css"; +import { vars } from "./styles/vars.css"; export const loginWrapper = style([ { diff --git a/src/app/my/layout.tsx b/src/app/my/layout.tsx index 8344487..9c10fc5 100644 --- a/src/app/my/layout.tsx +++ b/src/app/my/layout.tsx @@ -1,5 +1,5 @@ import Navigation from "../components/common/Navigation"; -import { myContainer, myWrapper } from "../styles/my/my.css"; +import { myContainer, myWrapper } from "./my.css"; const layout = ({ children }: { children: React.ReactNode }) => { return ( diff --git a/src/app/styles/my/my.css.ts b/src/app/my/my.css.ts similarity index 100% rename from src/app/styles/my/my.css.ts rename to src/app/my/my.css.ts diff --git a/src/app/my/page.tsx b/src/app/my/page.tsx index a88fbae..c16617c 100644 --- a/src/app/my/page.tsx +++ b/src/app/my/page.tsx @@ -1,7 +1,7 @@ import Image from "next/image"; import { caption, paragraph, regular, semiBold } from "../styles/font.css"; import { flexSprinklesFc } from "../components/common/utils/flex"; -import { inputStyle, myTargetContainer } from "../styles/my/my.css"; +import { inputStyle, myTargetContainer } from "./my.css"; import { paddingSprinkles } from "../styles/padding.css"; import { gray300 } from "../styles/colors.css"; import { pointer } from "../styles/global.css"; diff --git a/src/app/styles/record/record.css.ts b/src/app/record/record.css.ts similarity index 100% rename from src/app/styles/record/record.css.ts rename to src/app/record/record.css.ts From e98871759f607e08c4e075ff48cffe6b4579a999 Mon Sep 17 00:00:00 2001 From: Jetom88 Date: Thu, 17 Oct 2024 18:36:25 +0900 Subject: [PATCH 02/23] =?UTF-8?q?remove:=20css=20=ED=8C=8C=EC=9D=BC=20?= =?UTF-8?q?=EC=9C=84=EC=B9=98=20=EB=B3=80=EA=B2=BD=EC=97=90=20=EB=94=B0?= =?UTF-8?q?=EB=A5=B8=20=EA=B2=BD=EB=A1=9C=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/record/DateCircle.tsx | 2 +- src/app/info/layout.tsx | 2 +- src/app/info/time/page.tsx | 2 +- src/app/page.tsx | 12 ++++++++++-- src/app/record/layout.tsx | 2 +- src/app/record/page.tsx | 4 ++-- src/app/record/record.css.ts | 6 +++--- 7 files changed, 19 insertions(+), 11 deletions(-) diff --git a/src/app/components/record/DateCircle.tsx b/src/app/components/record/DateCircle.tsx index 7a1895d..3c29bbc 100644 --- a/src/app/components/record/DateCircle.tsx +++ b/src/app/components/record/DateCircle.tsx @@ -1,4 +1,4 @@ -import { circle } from "@/app/styles/record/record.css"; +import { circle } from "@/app/record/record.css"; const DateCircle = ({ date }: { date: string }) => { return
{date}
; diff --git a/src/app/info/layout.tsx b/src/app/info/layout.tsx index 29c2e92..3f03ace 100644 --- a/src/app/info/layout.tsx +++ b/src/app/info/layout.tsx @@ -1,10 +1,10 @@ "use client"; import { useRouter } from "next/navigation"; -import { infoWrapper } from "../styles/info/common.css"; import Image from "next/image"; import { pointer } from "../styles/global.css"; import { paddingSprinkles } from "../styles/padding.css"; +import { infoWrapper } from "./common.css"; export default function Layout({ children }: { children: React.ReactNode }) { const router = useRouter(); diff --git a/src/app/info/time/page.tsx b/src/app/info/time/page.tsx index 366d3c7..0c02b72 100644 --- a/src/app/info/time/page.tsx +++ b/src/app/info/time/page.tsx @@ -4,8 +4,8 @@ import Button from "@/app/components/common/Button"; import { flexSprinklesFc } from "@/app/components/common/utils/flex"; import { colors, gray300 } from "@/app/styles/colors.css"; import { caption, heading2, semiBold } from "@/app/styles/font.css"; -import { infoContainer } from "@/app/styles/info/common.css"; import { useRouter } from "next/navigation"; +import { infoContainer } from "../common.css"; const page = () => { const router = useRouter(); diff --git a/src/app/page.tsx b/src/app/page.tsx index 6411a6f..b940dc7 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -3,7 +3,7 @@ import Image from "next/image"; import Logo from "@svgs/logo.svg"; -import { loginTextBox, loginHeading, loginCaption, loginWrapper, loginLogo } from "@styles/login/login.css"; +import { loginTextBox, loginHeading, loginCaption, loginWrapper, loginLogo } from "@/app/login.css"; import { useRouter } from "next/navigation"; import { flexSprinklesFc } from "./components/common/utils/flex"; import { inputStyle } from "./styles/common/input.css"; @@ -68,7 +68,15 @@ export default function Login() {

- 로그인 | 회원가입 + 로그인 |{" "} + { + router.push("/auth/signup"); + }} + > + 회원가입 +

diff --git a/src/app/record/layout.tsx b/src/app/record/layout.tsx index 2db5ccf..77f2bbe 100644 --- a/src/app/record/layout.tsx +++ b/src/app/record/layout.tsx @@ -1,5 +1,5 @@ import Navigation from "../components/common/Navigation"; -import { recordWrapper, recordContainer } from "../styles/record/record.css"; +import { recordWrapper, recordContainer } from "./record.css"; const layout = ({ children }: { children: React.ReactNode }) => { return ( diff --git a/src/app/record/page.tsx b/src/app/record/page.tsx index 18c8292..bf64c2e 100644 --- a/src/app/record/page.tsx +++ b/src/app/record/page.tsx @@ -3,9 +3,7 @@ import Image from "next/image"; import { caption2, paragraph, paragraph3, semiBold } from "../styles/font.css"; import { colors, gray150, gray300, gray400 } from "../styles/colors.css"; -import { plusIcon, plusIconBox, recordDate, recordDateSection } from "../styles/record/record.css"; import { paddingSprinkles } from "../styles/padding.css"; -import DateCircle from "../components/record/DateCircle"; import Memo from "../components/common/Memo"; import Popup from "../components/common/Popup"; import { useRouter } from "next/navigation"; @@ -13,6 +11,8 @@ import { flexSprinklesFc } from "../components/common/utils/flex"; import Button from "../components/common/Button"; import { useState } from "react"; import { pointer } from "../styles/global.css"; +import { recordDateSection, recordDate, plusIconBox, plusIcon } from "./record.css"; +import DateCircle from "../components/record/DateCircle"; const page = () => { const router = useRouter(); diff --git a/src/app/record/record.css.ts b/src/app/record/record.css.ts index aa18d7d..164d810 100644 --- a/src/app/record/record.css.ts +++ b/src/app/record/record.css.ts @@ -1,7 +1,7 @@ import { style } from "@vanilla-extract/css"; -import { paddingSprinkles } from "../padding.css"; -import { colors } from "../colors.css"; -import { paragraph3, semiBold } from "../font.css"; +import { colors } from "../styles/colors.css"; +import { semiBold, paragraph3 } from "../styles/font.css"; +import { paddingSprinkles } from "../styles/padding.css"; export const circle = style([ semiBold, From 424aa5d8330668a72f584445254e043e81674de8 Mon Sep 17 00:00:00 2001 From: Jetom88 Date: Thu, 17 Oct 2024 18:36:45 +0900 Subject: [PATCH 03/23] =?UTF-8?q?feat:=20pink80=20=EC=83=89=EC=83=81=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/styles/colors.css.ts | 5 +++++ src/app/styles/common/button.css.ts | 4 ++-- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/app/styles/colors.css.ts b/src/app/styles/colors.css.ts index 02911cd..730c4fc 100644 --- a/src/app/styles/colors.css.ts +++ b/src/app/styles/colors.css.ts @@ -11,6 +11,7 @@ export const colors = { gray300: "#AEB0B2", gray400: "#B8B8B8", gray500: "#9B9B9B", + pink80: "#ee6a7b", background: "#F5F5F5", }; @@ -54,6 +55,10 @@ export const gray500 = style({ color: colors.gray500, }); +export const pink80 = style({ + color: colors.pink80, +}); + export const background = style({ color: colors.background, }); diff --git a/src/app/styles/common/button.css.ts b/src/app/styles/common/button.css.ts index f5c08a1..823c7be 100644 --- a/src/app/styles/common/button.css.ts +++ b/src/app/styles/common/button.css.ts @@ -5,11 +5,11 @@ import { style } from "@vanilla-extract/css"; const buttonProperties = defineProperties({ properties: { - width: ["115px", "226px", "343px"], + width: ["115px", "226px", "343px", "100%"], height: ["38px", "59px"], fontSize: ["12px", "16px", "18px"], color: [colors.primary, colors.white], - background: [colors.primary, colors.white30], + background: [colors.primary, colors.white30, colors.point], borderRadius: ["5px", "10px"], }, shorthands: { From c128a0296aba7a9b7e5fadadc625ed4f2548d2be Mon Sep 17 00:00:00 2001 From: Jetom88 Date: Thu, 17 Oct 2024 18:36:59 +0900 Subject: [PATCH 04/23] =?UTF-8?q?feat:=20=ED=9A=8C=EC=9B=90=EA=B0=80?= =?UTF-8?q?=EC=9E=85=20page=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/auth/signup/page.tsx | 70 +++++++++++++++++++++++++++++++ src/app/auth/signup/signup.css.ts | 16 +++++++ 2 files changed, 86 insertions(+) create mode 100644 src/app/auth/signup/page.tsx create mode 100644 src/app/auth/signup/signup.css.ts diff --git a/src/app/auth/signup/page.tsx b/src/app/auth/signup/page.tsx new file mode 100644 index 0000000..02ca86d --- /dev/null +++ b/src/app/auth/signup/page.tsx @@ -0,0 +1,70 @@ +"use client"; + +import { flexSprinklesFc } from "@/app/components/common/utils/flex"; +import { signupContainer, signupWrapper } from "./signup.css"; +import { inputStyle } from "@/app/styles/common/input.css"; +import { caption, heading2, regular, semiBold } from "@/app/styles/font.css"; +import { paddingSprinkles } from "@/app/styles/padding.css"; +import { colors, gray300, 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"; + +const page = () => { + const router = useRouter(); + + return ( +
+
+
+ back { + router.push("/"); + }} + /> +
+ +
+

+ 회원가입을 +
시작 할까요? +

+
+ +
+
+
+

+ 아이디* +

+ +
+ +
+

+ 비밀번호* +

+ +
+ +
+

+ 비밀번호 확인* +

+ +
+
+
+
+ +
+ ); +}; + +export default page; diff --git a/src/app/auth/signup/signup.css.ts b/src/app/auth/signup/signup.css.ts new file mode 100644 index 0000000..f564076 --- /dev/null +++ b/src/app/auth/signup/signup.css.ts @@ -0,0 +1,16 @@ +import { style } from "@vanilla-extract/css"; + +export const signupWrapper = style([ + { + display: "flex", + flexDirection: "column", + alignItems: "flex-start", + justifyContent: "space-between", + height: "100vh", + padding: "85px 36px 104px 36px", + }, +]); + +export const signupContainer = style({ + width: "100%", +}); From 62bc440c4f3daea00b506beb8d9ab7e628ee582a Mon Sep 17 00:00:00 2001 From: Jetom88 Date: Thu, 17 Oct 2024 21:11:31 +0900 Subject: [PATCH 05/23] =?UTF-8?q?feat:=20=EB=8B=89=EB=84=A4=EC=9E=84=20ui?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/auth/signup/page.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/app/auth/signup/page.tsx b/src/app/auth/signup/page.tsx index 02ca86d..48d9773 100644 --- a/src/app/auth/signup/page.tsx +++ b/src/app/auth/signup/page.tsx @@ -58,6 +58,13 @@ const page = () => {

+ +
+

+ 닉네임* +

+ +
From 81c5f154d2d86fa25fe8fc33bb65cd5223442f6f Mon Sep 17 00:00:00 2001 From: Jetom88 Date: Sat, 19 Oct 2024 18:17:21 +0900 Subject: [PATCH 06/23] =?UTF-8?q?feat:=20zod,=20react-hook-form=20?= =?UTF-8?q?=EB=9D=BC=EC=9D=B4=EB=B8=8C=EB=9F=AC=EB=A6=AC=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80,=20schema=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 | 27 ++++++++++++++++++++++++--- src/app/auth/signup/page.tsx | 14 +++++++++++++- src/app/info/detail/page.tsx | 2 +- src/app/info/shape/page.tsx | 5 ++--- src/app/info/shape/shape.css.ts | 4 ++-- src/app/types/signupSchema.ts | 22 ++++++++++++++++++++++ 7 files changed, 66 insertions(+), 10 deletions(-) create mode 100644 src/app/types/signupSchema.ts diff --git a/package.json b/package.json index fe6b338..6e6ad9d 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,8 @@ "next": "14.2.5", "react": "^18", "react-dom": "^18", + "react-hook-form": "^7.53.1", + "zod": "^3.23.8", "zustand": "^4.5.5" }, "devDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3e46b41..b8d5172 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -26,6 +26,12 @@ importers: react-dom: specifier: ^18 version: 18.3.1(react@18.3.1) + react-hook-form: + specifier: ^7.53.1 + version: 7.53.1(react@18.3.1) + zod: + specifier: ^3.23.8 + version: 3.23.8 zustand: specifier: ^4.5.5 version: 4.5.5(@types/react@18.3.5)(react@18.3.1) @@ -1862,6 +1868,12 @@ packages: peerDependencies: react: ^18.3.1 + react-hook-form@7.53.1: + resolution: {integrity: sha512-6aiQeBda4zjcuaugWvim9WsGqisoUk+etmFEsSUMm451/Ic8L/UAb7sRtMj3V+Hdzm6mMjU1VhiSzYUZeBm0Vg==} + engines: {node: '>=18.0.0'} + peerDependencies: + react: ^16.8.0 || ^17 || ^18 || ^19 + react-is@16.13.1: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} @@ -2266,6 +2278,9 @@ packages: resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==} engines: {node: '>=10'} + zod@3.23.8: + resolution: {integrity: sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==} + zustand@4.5.5: resolution: {integrity: sha512-+0PALYNJNgK6hldkgDq2vLrw5f6g/jCInz52n9RTpropGgeAf/ioFUCdtsjCqu4gNhW9D01rUQBROoRjdzyn2Q==} engines: {node: '>=12.7.0'} @@ -3447,7 +3462,7 @@ snapshots: eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) eslint-plugin-jsx-a11y: 6.9.0(eslint@8.57.0) eslint-plugin-react: 7.35.0(eslint@8.57.0) eslint-plugin-react-hooks: 4.6.2(eslint@8.57.0) @@ -3478,7 +3493,7 @@ snapshots: is-bun-module: 1.1.0 is-glob: 4.0.3 optionalDependencies: - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) transitivePeerDependencies: - '@typescript-eslint/parser' - eslint-import-resolver-node @@ -3496,7 +3511,7 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.0): + eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0): dependencies: array-includes: 3.1.8 array.prototype.findlastindex: 1.2.5 @@ -4245,6 +4260,10 @@ snapshots: react: 18.3.1 scheduler: 0.23.2 + react-hook-form@7.53.1(react@18.3.1): + dependencies: + react: 18.3.1 + react-is@16.13.1: {} react@18.3.1: @@ -4723,6 +4742,8 @@ snapshots: yocto-queue@0.1.0: {} + zod@3.23.8: {} + zustand@4.5.5(@types/react@18.3.5)(react@18.3.1): dependencies: use-sync-external-store: 1.2.2(react@18.3.1) diff --git a/src/app/auth/signup/page.tsx b/src/app/auth/signup/page.tsx index 48d9773..b353543 100644 --- a/src/app/auth/signup/page.tsx +++ b/src/app/auth/signup/page.tsx @@ -5,15 +5,27 @@ import { signupContainer, signupWrapper } from "./signup.css"; import { inputStyle } from "@/app/styles/common/input.css"; import { caption, heading2, regular, semiBold } from "@/app/styles/font.css"; import { paddingSprinkles } from "@/app/styles/padding.css"; -import { colors, gray300, pink80 } from "@/app/styles/colors.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"; const page = () => { const router = useRouter(); + const form = useForm>({ + defaultValues: { + id: "", + password: "", + confirmPassword: "", + nickname: "", + }, + }); + return (
diff --git a/src/app/info/detail/page.tsx b/src/app/info/detail/page.tsx index 3ab9426..7e50762 100644 --- a/src/app/info/detail/page.tsx +++ b/src/app/info/detail/page.tsx @@ -5,8 +5,8 @@ import Memo from "@/app/components/common/Memo"; 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 { useRouter } from "next/navigation"; +import { infoContainer } from "../common.css"; const page = () => { const router = useRouter(); diff --git a/src/app/info/shape/page.tsx b/src/app/info/shape/page.tsx index 2fa9349..96b2152 100644 --- a/src/app/info/shape/page.tsx +++ b/src/app/info/shape/page.tsx @@ -4,11 +4,10 @@ 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 { 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 { shapeContentBoxWrapper, shapeContentBox, shapeContentBoxText } from "./shape.css"; type ContentBoxProps = { src: string; @@ -33,7 +32,7 @@ const page = () => { const router = useRouter(); return ( -
+

묽기 및 모양을 diff --git a/src/app/info/shape/shape.css.ts b/src/app/info/shape/shape.css.ts index 5d5ee95..c23059a 100644 --- a/src/app/info/shape/shape.css.ts +++ b/src/app/info/shape/shape.css.ts @@ -1,6 +1,6 @@ +import { colors } from "@/app/styles/colors.css"; +import { regular, caption } from "@/app/styles/font.css"; import { style } from "@vanilla-extract/css"; -import { colors } from "../colors.css"; -import { caption, regular } from "../font.css"; export const shapeContent = style({ display: "flex", diff --git a/src/app/types/signupSchema.ts b/src/app/types/signupSchema.ts new file mode 100644 index 0000000..a2b6577 --- /dev/null +++ b/src/app/types/signupSchema.ts @@ -0,0 +1,22 @@ +import { z } from "zod"; + +const passwordSchema = z + .string() + .min(8, { message: "최소 8자 이상 입력해주세요" }) + .max(12) + .regex(/[A-Z]/, { message: "비밀번호에는 최소 하나의 대문자가 포함되어야 합니다." }) + .regex(/[a-z]/, { message: "비밀번호에는 최소 하나의 소문자가 포함되어야 합니다." }) + .regex(/[0-9]/, { message: "비밀번호에는 최소 하나의 숫자가 포함되어야 합니다." }) + .regex(/[@$!%*?&]/, { message: "비밀번호에는 최소 하나의 특수 문자가 포함되어야 합니다." }); + +export const signupSchema = z + .object({ + id: z.string().min(6, { message: "최소 6자 이상입니다." }), + password: passwordSchema, + confirmPassword: z.string(), + nickname: z.string().min(3, { message: "닉네임은 최소 3자 이상입니다." }), + }) + .refine((data) => data.password === data.confirmPassword, { + message: "비밀번호가 일치하지 않습니다.", + path: ["confirmPassword"], + }); From ea5b9da8a6e6bdd7ccd8926c285939fdf0d1c210 Mon Sep 17 00:00:00 2001 From: Jetom88 Date: Sun, 20 Oct 2024 17:48:24 +0900 Subject: [PATCH 07/23] =?UTF-8?q?feat:=20=ED=9A=8C=EC=9B=90=EA=B0=80?= =?UTF-8?q?=EC=9E=85=20=EC=9C=A0=ED=9A=A8=EC=84=B1=20=EA=B2=80=EC=82=AC=20?= =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EB=A1=9C?= =?UTF-8?q?=EC=BB=AC=EC=8A=A4=ED=86=A0=EB=A6=AC=EC=A7=80=EC=97=90=20?= =?UTF-8?q?=EC=A0=80=EC=9E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + pnpm-lock.yaml | 18 ++- src/app/auth/signup/page.tsx | 166 +++++++++++++++++++-------- src/app/auth/signup/signup.css.ts | 3 + src/app/components/common/Button.tsx | 6 +- src/app/styles/common/button.css.ts | 2 +- src/app/types/signupSchema.ts | 12 +- 7 files changed, 153 insertions(+), 55 deletions(-) diff --git a/package.json b/package.json index 6e6ad9d..9c7488f 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "lint": "next lint" }, "dependencies": { + "@hookform/resolvers": "^3.9.0", "@vanilla-extract/css": "^1.15.3", "@vanilla-extract/sprinkles": "^1.6.3", "classnames": "^2.5.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b8d5172..1a06178 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,6 +8,9 @@ importers: .: dependencies: + '@hookform/resolvers': + specifier: ^3.9.0 + version: 3.9.0(react-hook-form@7.53.1(react@18.3.1)) '@vanilla-extract/css': specifier: ^1.15.3 version: 1.15.5 @@ -452,6 +455,11 @@ packages: resolution: {integrity: sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + '@hookform/resolvers@3.9.0': + resolution: {integrity: sha512-bU0Gr4EepJ/EQsH/IwEzYLsT/PEj5C0ynLQ4m+GSHS+xKH4TfSelhluTgOaoc4kA5s7eCsQbM4wvZLzELmWzUg==} + peerDependencies: + react-hook-form: ^7.0.0 + '@humanwhocodes/config-array@0.11.14': resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==} engines: {node: '>=10.10.0'} @@ -2592,6 +2600,10 @@ snapshots: '@eslint/js@8.57.0': {} + '@hookform/resolvers@3.9.0(react-hook-form@7.53.1(react@18.3.1))': + dependencies: + react-hook-form: 7.53.1(react@18.3.1) + '@humanwhocodes/config-array@0.11.14': dependencies: '@humanwhocodes/object-schema': 2.0.3 @@ -3462,7 +3474,7 @@ snapshots: eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.0) eslint-plugin-jsx-a11y: 6.9.0(eslint@8.57.0) eslint-plugin-react: 7.35.0(eslint@8.57.0) eslint-plugin-react-hooks: 4.6.2(eslint@8.57.0) @@ -3493,7 +3505,7 @@ snapshots: is-bun-module: 1.1.0 is-glob: 4.0.3 optionalDependencies: - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.0) transitivePeerDependencies: - '@typescript-eslint/parser' - eslint-import-resolver-node @@ -3511,7 +3523,7 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0): + eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.0): dependencies: array-includes: 3.1.8 array.prototype.findlastindex: 1.2.5 diff --git a/src/app/auth/signup/page.tsx b/src/app/auth/signup/page.tsx index b353543..ec21643 100644 --- a/src/app/auth/signup/page.tsx +++ b/src/app/auth/signup/page.tsx @@ -10,14 +10,24 @@ 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 { Form, 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"; const page = () => { const router = useRouter(); + const [submit, setSubmit] = useState(false); - const form = useForm>({ + const { + register, + handleSubmit, + formState: { errors, isValid }, + } = useForm>({ + resolver: zodResolver(signupSchema), + mode: "onChange", defaultValues: { id: "", password: "", @@ -26,63 +36,127 @@ const page = () => { }, }); + const onSubmit = (data: z.infer) => { + if (data) { + setSubmit(true); + localStorage.setItem("auth", JSON.stringify(data)); + } + }; + return ( -
-
-
- back + {submit && ( + +
- -
-

- 회원가입을 -
시작 할까요? -

-
- -
-
-
-

- 아이디* -

- + + )} +
+
+
+
+ back { + router.push("/"); + }} + />
-
-

- 비밀번호* -

- +
+

+ 회원가입을 +
시작 할까요? +

+
-
-

- 비밀번호 확인* -

- +
+
+
+

+ 아이디* +

+ + +

+ {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/signup.css.ts index f564076..57146fd 100644 --- a/src/app/auth/signup/signup.css.ts +++ b/src/app/auth/signup/signup.css.ts @@ -12,5 +12,8 @@ export const signupWrapper = style([ ]); export const signupContainer = style({ + display: "flex", + flexDirection: "column", width: "100%", + height: "100%", }); diff --git a/src/app/components/common/Button.tsx b/src/app/components/common/Button.tsx index fdc69fd..00ee845 100644 --- a/src/app/components/common/Button.tsx +++ b/src/app/components/common/Button.tsx @@ -5,6 +5,7 @@ import { pointer } from "@/app/styles/global.css"; interface ButtonProps extends ButtonSprinkles { text: string; onClick?: () => void; + disabled?: boolean; } const Button = ({ @@ -15,6 +16,7 @@ const Button = ({ fontSize = "16px", background = colors.white30, borderRadius = "5px", + disabled = false, onClick, }: ButtonProps) => { const buttonClass = buttonSprinkles({ @@ -26,9 +28,9 @@ const Button = ({ borderRadius, }); return ( -
+
+ ); }; diff --git a/src/app/styles/common/button.css.ts b/src/app/styles/common/button.css.ts index 823c7be..a741ce9 100644 --- a/src/app/styles/common/button.css.ts +++ b/src/app/styles/common/button.css.ts @@ -9,7 +9,7 @@ const buttonProperties = defineProperties({ height: ["38px", "59px"], fontSize: ["12px", "16px", "18px"], color: [colors.primary, colors.white], - background: [colors.primary, colors.white30, colors.point], + background: [colors.primary, colors.white30, colors.point, colors.gray200], borderRadius: ["5px", "10px"], }, shorthands: { diff --git a/src/app/types/signupSchema.ts b/src/app/types/signupSchema.ts index a2b6577..8039296 100644 --- a/src/app/types/signupSchema.ts +++ b/src/app/types/signupSchema.ts @@ -2,8 +2,8 @@ import { z } from "zod"; const passwordSchema = z .string() - .min(8, { message: "최소 8자 이상 입력해주세요" }) - .max(12) + .min(8, { message: "최소 8자 이상 입력해주세요." }) + .max(12, { message: "최대 12자 이하로 입력해주세요." }) .regex(/[A-Z]/, { message: "비밀번호에는 최소 하나의 대문자가 포함되어야 합니다." }) .regex(/[a-z]/, { message: "비밀번호에는 최소 하나의 소문자가 포함되어야 합니다." }) .regex(/[0-9]/, { message: "비밀번호에는 최소 하나의 숫자가 포함되어야 합니다." }) @@ -11,7 +11,13 @@ const passwordSchema = z export const signupSchema = z .object({ - id: z.string().min(6, { message: "최소 6자 이상입니다." }), + id: z + .string() + .min(6, { message: "최소 6자 이상입니다." }) + .max(10, { message: "최대 10자 이하로 입력해주세요." }) + .regex(/^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z0-9]{6,10}$/, { + message: "6자 이상 10자 이하의 영문 혹은 영문과 숫자를 조합해주세요.", + }), password: passwordSchema, confirmPassword: z.string(), nickname: z.string().min(3, { message: "닉네임은 최소 3자 이상입니다." }), From c483e05502ee574c7eaf8756f6c148176fb9e41c Mon Sep 17 00:00:00 2001 From: Jetom88 Date: Sun, 20 Oct 2024 20:10:46 +0900 Subject: [PATCH 08/23] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/login.css.ts | 4 + src/app/page.tsx | 145 ++++++++++++++++++++++++++-------- src/app/types/signinSchema.ts | 13 +++ src/app/types/signupSchema.ts | 2 +- 4 files changed, 130 insertions(+), 34 deletions(-) create mode 100644 src/app/types/signinSchema.ts diff --git a/src/app/login.css.ts b/src/app/login.css.ts index 7a795a0..c458d73 100644 --- a/src/app/login.css.ts +++ b/src/app/login.css.ts @@ -51,3 +51,7 @@ export const loginBoxContents = style([ }, paddingSprinkles({ paddingLeft: "s24" }), ]); + +export const formBox = style({ + width: "100%", +}); diff --git a/src/app/page.tsx b/src/app/page.tsx index b940dc7..bb74f95 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -3,13 +3,21 @@ import Image from "next/image"; import Logo from "@svgs/logo.svg"; -import { loginTextBox, loginHeading, loginCaption, loginWrapper, loginLogo } from "@/app/login.css"; +import { loginTextBox, loginHeading, loginCaption, loginWrapper, loginLogo, formBox } from "@/app/login.css"; import { useRouter } from "next/navigation"; import { flexSprinklesFc } from "./components/common/utils/flex"; import { inputStyle } from "./styles/common/input.css"; -import { gray300 } from "./styles/colors.css"; -import { caption2 } from "./styles/font.css"; +import { colors, gray300, pink80 } from "./styles/colors.css"; +import { caption, caption2 } from "./styles/font.css"; import { pointer } from "./styles/global.css"; +import { useState } from "react"; +import { useForm } from "react-hook-form"; +import { signinSchema } from "./types/signinSchema"; +import { z } from "zod"; +import { paddingSprinkles } from "./styles/padding.css"; +import { zodResolver } from "@hookform/resolvers/zod"; +import Popup from "./components/common/Popup"; +import Button from "./components/common/Button"; // type LoginBoxProps = { // image: string; @@ -40,6 +48,41 @@ import { pointer } from "./styles/global.css"; export default function Login() { const router = useRouter(); + const [showPopup, setShowPopup] = useState(false); + const [message, setMessage] = useState(""); + + const { + register, + handleSubmit, + formState: { errors }, + } = useForm>({ + resolver: zodResolver(signinSchema), + mode: "onChange", + defaultValues: { + id: "", + password: "", + }, + }); + + const onSubmit = (data: z.infer) => { + if (data) { + const getAuthInfo = localStorage.getItem("auth"); + + if (getAuthInfo) { + const parseInfo = JSON.parse(getAuthInfo); + + if (parseInfo.id === data.id && parseInfo.password === data.password) { + router.push("/record"); + } else { + setMessage("아이디, 비밀번호를 확인해주세요."); + setShowPopup(true); + } + } + } else { + setMessage("가입된 정보를 확인해주세요."); + setShowPopup(true); + } + }; const logoClassName = flexSprinklesFc({ flexDirection: "column", @@ -48,39 +91,74 @@ export default function Login() { gap: "24px", }); return ( -
-
- logo -
-

Eungeori

-

건강한 습관을 위한 스마트 앱

-
+ <> + {showPopup && ( + +

+ + +

+ + 로그인 + {" "} + |{" "} + { + router.push("/auth/signup"); + }} + > + 회원가입 + +

+
- {/* router.push("/record")} border /> */} -
+ + ); } diff --git a/src/app/types/signinSchema.ts b/src/app/types/signinSchema.ts new file mode 100644 index 0000000..ac60e53 --- /dev/null +++ b/src/app/types/signinSchema.ts @@ -0,0 +1,13 @@ +import { z } from "zod"; +import { passwordSchema } from "./signupSchema"; + +export const signinSchema = z.object({ + id: z + .string() + .min(6, { message: "최소 6자 이상입니다." }) + .max(10, { message: "최대 10자 이하로 입력해주세요." }) + .regex(/^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z0-9]{6,10}$/, { + message: "6자 이상 10자 이하의 영문 혹은 영문과 숫자를 조합해주세요.", + }), + password: passwordSchema, +}); diff --git a/src/app/types/signupSchema.ts b/src/app/types/signupSchema.ts index 8039296..eb77957 100644 --- a/src/app/types/signupSchema.ts +++ b/src/app/types/signupSchema.ts @@ -1,6 +1,6 @@ import { z } from "zod"; -const passwordSchema = z +export const passwordSchema = z .string() .min(8, { message: "최소 8자 이상 입력해주세요." }) .max(12, { message: "최대 12자 이하로 입력해주세요." }) From 86bc21007494c5f2a3854b4b449c5e9e45770453 Mon Sep 17 00:00:00 2001 From: Jetom88 Date: Sun, 20 Oct 2024 22:39:44 +0900 Subject: [PATCH 09/23] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=EC=A0=95=EB=B3=B4=20=EB=A1=9C=EC=BB=AC=20=EC=8A=A4=ED=86=A0?= =?UTF-8?q?=EB=A6=AC=EC=A7=80=EC=97=90=20=EC=A0=80=EC=9E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/login.css.ts | 2 +- src/app/page.tsx | 33 +++++++++++++++++------------- src/app/styles/common/input.css.ts | 3 +-- 3 files changed, 21 insertions(+), 17 deletions(-) diff --git a/src/app/login.css.ts b/src/app/login.css.ts index c458d73..3729e76 100644 --- a/src/app/login.css.ts +++ b/src/app/login.css.ts @@ -22,7 +22,7 @@ export const loginTextBox = style({ textAlign: "center", }); -export const loginHeading = style([semiBold, heading, paddingSprinkles({ paddingBottom: "s12" })]); +export const loginHeading = style([semiBold, heading, paddingSprinkles({ paddingBottom: "s4" })]); export const loginCaption = style([ caption, diff --git a/src/app/page.tsx b/src/app/page.tsx index bb74f95..5da407d 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -73,6 +73,7 @@ export default function Login() { if (parseInfo.id === data.id && parseInfo.password === data.password) { router.push("/record"); + localStorage.setItem("login", JSON.stringify(data)); } else { setMessage("아이디, 비밀번호를 확인해주세요."); setShowPopup(true); @@ -123,22 +124,26 @@ export default function Login() { className={flexSprinklesFc({ flexDirection: "column", gap: "8px" })} style={{ width: "95%" }} > - +
+ -

- {errors.id?.message} -

+

+ {errors.id?.message} +

+
- -

- {errors.password?.message} -

+
+ +

+ {errors.password?.message} +

+
diff --git a/src/app/styles/common/input.css.ts b/src/app/styles/common/input.css.ts index 320940b..de53543 100644 --- a/src/app/styles/common/input.css.ts +++ b/src/app/styles/common/input.css.ts @@ -1,11 +1,10 @@ import { style } from "@vanilla-extract/css"; import { colors } from "../colors.css"; -import { caption } from "../font.css"; export const inputStyle = style({ width: "100%", padding: "4px 8px", - borderRadius: "4px", + borderRadius: "8px", border: `1px solid ${colors.gray200}`, selectors: { "&::placeholder": { From 7474f5d14ad43f366052722535ec7822804f7063 Mon Sep 17 00:00:00 2001 From: Jetom88 Date: Sun, 20 Oct 2024 22:40:03 +0900 Subject: [PATCH 10/23] =?UTF-8?q?feat:=20my=20=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=20=ED=95=9C=EC=A4=84=20=EB=AA=A9=ED=91=9C=20=20=EB=A1=9C?= =?UTF-8?q?=EC=BB=AC=EC=8A=A4=ED=86=A0=EB=A6=AC=EC=A7=80=EC=97=90=20?= =?UTF-8?q?=EC=A0=80=EC=9E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/my/my.css.ts | 8 -------- src/app/my/page.tsx | 47 ++++++++++++++++++++++++++++++++++++++++---- 2 files changed, 43 insertions(+), 12 deletions(-) diff --git a/src/app/my/my.css.ts b/src/app/my/my.css.ts index 889b123..87bb6c8 100644 --- a/src/app/my/my.css.ts +++ b/src/app/my/my.css.ts @@ -19,11 +19,3 @@ export const myTargetContainer = style({ width: "100%", paddingTop: "46px", }); - -export const inputStyle = style({ - width: "100%", - padding: "5px 8px", - fontSize: "12px", - border: "1px solid #D9D9D9", - borderRadius: "8px", -}); diff --git a/src/app/my/page.tsx b/src/app/my/page.tsx index c16617c..174352a 100644 --- a/src/app/my/page.tsx +++ b/src/app/my/page.tsx @@ -1,12 +1,36 @@ +"use client"; + import Image from "next/image"; import { caption, paragraph, regular, semiBold } from "../styles/font.css"; import { flexSprinklesFc } from "../components/common/utils/flex"; -import { inputStyle, myTargetContainer } from "./my.css"; +import { myTargetContainer } from "./my.css"; import { paddingSprinkles } from "../styles/padding.css"; import { gray300 } from "../styles/colors.css"; import { pointer } from "../styles/global.css"; +import { useRouter } from "next/navigation"; +import { inputStyle } from "../styles/common/input.css"; +import { useEffect, useState } from "react"; const page = () => { + const router = useRouter(); + const [goal, setGoal] = useState(""); + const onClick = () => { + localStorage.removeItem("login"); + router.push("/"); + }; + + const onGoalSave = (e: React.KeyboardEvent) => { + if (e.key === "Enter") { + localStorage.setItem("goal", goal); + } + }; + + useEffect(() => { + const getGoal = localStorage.getItem("goal"); + if (getGoal) { + setGoal(getGoal); + } + }, []); return ( <>
@@ -19,18 +43,33 @@ const page = () => { })}`} >

제톰 님, 안녕하세요

- profile + profile

한 줄 목표

- + { + setGoal(e.target.value); + }} + onKeyDown={(e) => { + onGoalSave(e); + }} + />

- 로그아웃 | {""} + + 로그아웃 + {" "} + | {""} 회원탈퇴

From 673dcf48da19d65098c70e2bc46b691da87b0bd1 Mon Sep 17 00:00:00 2001 From: Jetom88 Date: Mon, 21 Oct 2024 18:21:54 +0900 Subject: [PATCH 11/23] =?UTF-8?q?fix:=20=EC=95=84=EC=9D=B4=EB=94=94?= =?UTF-8?q?=EB=82=98=20=EB=B9=84=EB=B0=80=EB=B2=88=ED=98=B8=EA=B0=80=20?= =?UTF-8?q?=EC=9D=BC=EC=B9=98=ED=95=98=EC=A7=80=20=EC=95=8A=EC=9D=84?= =?UTF-8?q?=EB=95=8C=20=ED=8C=9D=EC=97=85=20=EB=B3=B4=EC=9D=B4=EA=B2=8C=20?= =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/page.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 5da407d..fa10c53 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -71,12 +71,14 @@ export default function Login() { if (getAuthInfo) { const parseInfo = JSON.parse(getAuthInfo); + if (parseInfo.id !== data.id || parseInfo.password !== data.password) { + setMessage("아이디, 비밀번호를 확인해주세요."); + setShowPopup(true); + } + if (parseInfo.id === data.id && parseInfo.password === data.password) { router.push("/record"); localStorage.setItem("login", JSON.stringify(data)); - } else { - setMessage("아이디, 비밀번호를 확인해주세요."); - setShowPopup(true); } } } else { From 0d65aa497ef3739b968cd64439903bcca5f82bef Mon Sep 17 00:00:00 2001 From: Jetom88 Date: Tue, 22 Oct 2024 21:55:05 +0900 Subject: [PATCH 12/23] =?UTF-8?q?review:=20sonarCloud=EC=97=90=EC=84=9C=20?= =?UTF-8?q?=EB=82=98=ED=83=80=EB=82=9C=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=EC=97=90=EC=84=9C=20=EB=8C=80=EB=AC=B8=EC=9E=90?= =?UTF-8?q?=EB=A1=9C=20=EC=8B=9C=EC=9E=91=ED=95=B4=EC=95=BC=ED=95=9C?= =?UTF-8?q?=EB=8B=A4=EB=8A=94=20=EA=B7=9C=EC=B9=99=20=EC=88=98=EC=A0=95=20?= =?UTF-8?q?=EB=B0=8F=20span=EC=9D=84=20button=EC=9C=BC=EB=A1=9C=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/auth/signup/page.tsx | 6 +++--- src/app/components/common/Button.tsx | 8 ++++++-- src/app/info/detail/page.tsx | 4 ++-- src/app/info/shape/page.tsx | 4 ++-- src/app/info/time/page.tsx | 4 ++-- src/app/my/page.tsx | 18 ++++++++++++------ src/app/page.tsx | 12 ++++++------ src/app/record/page.tsx | 4 ++-- src/app/styles/global.css.ts | 7 +++++++ 9 files changed, 42 insertions(+), 25 deletions(-) diff --git a/src/app/auth/signup/page.tsx b/src/app/auth/signup/page.tsx index ec21643..44e3517 100644 --- a/src/app/auth/signup/page.tsx +++ b/src/app/auth/signup/page.tsx @@ -10,14 +10,14 @@ 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 { Form, useForm } from "react-hook-form"; +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"; -const page = () => { +const Page = () => { const router = useRouter(); const [submit, setSubmit] = useState(false); @@ -160,4 +160,4 @@ const page = () => { ); }; -export default page; +export default Page; diff --git a/src/app/components/common/Button.tsx b/src/app/components/common/Button.tsx index 00ee845..7a69bb8 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 { buttonOutLine, pointer } from "@/app/styles/global.css"; interface ButtonProps extends ButtonSprinkles { text: string; @@ -28,7 +28,11 @@ const Button = ({ borderRadius, }); return ( - ); diff --git a/src/app/info/detail/page.tsx b/src/app/info/detail/page.tsx index 7e50762..b77d93c 100644 --- a/src/app/info/detail/page.tsx +++ b/src/app/info/detail/page.tsx @@ -8,7 +8,7 @@ import { semiBold, heading2, caption } from "@/app/styles/font.css"; import { useRouter } from "next/navigation"; import { infoContainer } from "../common.css"; -const page = () => { +const Page = () => { const router = useRouter(); return (
@@ -39,4 +39,4 @@ const page = () => { ); }; -export default page; +export default Page; diff --git a/src/app/info/shape/page.tsx b/src/app/info/shape/page.tsx index 96b2152..97478dd 100644 --- a/src/app/info/shape/page.tsx +++ b/src/app/info/shape/page.tsx @@ -28,7 +28,7 @@ const ContentBox = ({ src, text, width, height, active }: ContentBoxProps) => { ); }; -const page = () => { +const Page = () => { const router = useRouter(); return ( @@ -109,4 +109,4 @@ const page = () => { ); }; -export default page; +export default Page; diff --git a/src/app/info/time/page.tsx b/src/app/info/time/page.tsx index 0c02b72..0e35e15 100644 --- a/src/app/info/time/page.tsx +++ b/src/app/info/time/page.tsx @@ -7,7 +7,7 @@ import { caption, heading2, semiBold } from "@/app/styles/font.css"; import { useRouter } from "next/navigation"; import { infoContainer } from "../common.css"; -const page = () => { +const Page = () => { const router = useRouter(); return ( @@ -47,4 +47,4 @@ const page = () => { ); }; -export default page; +export default Page; diff --git a/src/app/my/page.tsx b/src/app/my/page.tsx index 174352a..237d560 100644 --- a/src/app/my/page.tsx +++ b/src/app/my/page.tsx @@ -6,12 +6,12 @@ import { flexSprinklesFc } from "../components/common/utils/flex"; import { myTargetContainer } from "./my.css"; import { paddingSprinkles } from "../styles/padding.css"; import { gray300 } from "../styles/colors.css"; -import { pointer } from "../styles/global.css"; +import { buttonOutLine, pointer } from "../styles/global.css"; import { useRouter } from "next/navigation"; import { inputStyle } from "../styles/common/input.css"; import { useEffect, useState } from "react"; -const page = () => { +const Page = () => { const router = useRouter(); const [goal, setGoal] = useState(""); const onClick = () => { @@ -25,6 +25,12 @@ const page = () => { } }; + const onKeyDown = (e: React.KeyboardEvent) => { + if (e.key === "Enter" || e.key === " ") { + onClick(); + } + }; + useEffect(() => { const getGoal = localStorage.getItem("goal"); if (getGoal) { @@ -66,15 +72,15 @@ const page = () => {

- + {" "} | {""} - 회원탈퇴 +

); }; -export default page; +export default Page; diff --git a/src/app/page.tsx b/src/app/page.tsx index fa10c53..871189f 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -9,7 +9,7 @@ import { flexSprinklesFc } from "./components/common/utils/flex"; import { inputStyle } from "./styles/common/input.css"; import { colors, gray300, pink80 } from "./styles/colors.css"; import { caption, caption2 } from "./styles/font.css"; -import { pointer } from "./styles/global.css"; +import { buttonOutLine, pointer } from "./styles/global.css"; import { useState } from "react"; import { useForm } from "react-hook-form"; import { signinSchema } from "./types/signinSchema"; @@ -150,18 +150,18 @@ export default function Login() {

- + {" "} |{" "} - { router.push("/auth/signup"); }} > 회원가입 - +

diff --git a/src/app/record/page.tsx b/src/app/record/page.tsx index bf64c2e..10f42e4 100644 --- a/src/app/record/page.tsx +++ b/src/app/record/page.tsx @@ -14,7 +14,7 @@ import { pointer } from "../styles/global.css"; import { recordDateSection, recordDate, plusIconBox, plusIcon } from "./record.css"; import DateCircle from "../components/record/DateCircle"; -const page = () => { +const Page = () => { const router = useRouter(); const [click, setClick] = useState(false); return ( @@ -398,4 +398,4 @@ const page = () => { ); }; -export default page; +export default Page; diff --git a/src/app/styles/global.css.ts b/src/app/styles/global.css.ts index 25514fe..d59b70b 100644 --- a/src/app/styles/global.css.ts +++ b/src/app/styles/global.css.ts @@ -21,3 +21,10 @@ export const contentContainer = style({ export const pointer = style({ cursor: "pointer", }); + +export const buttonOutLine = style({ + ":focus": { + outline: "2px solid #005fcc", + outlineOffset: "2px", + }, +}); From 5097967213d79357e0c87e81b87da385a9353f5f Mon Sep 17 00:00:00 2001 From: Jetom88 Date: Tue, 22 Oct 2024 23:16:42 +0900 Subject: [PATCH 13/23] =?UTF-8?q?review:=20=EB=A1=9C=EC=BB=AC=EC=8A=A4?= =?UTF-8?q?=ED=86=A0=EB=A6=AC=EC=A7=80=20=EA=B4=80=EB=A6=AC=EB=A5=BC=20?= =?UTF-8?q?=ED=83=80=EC=9E=85=EC=9C=BC=EB=A1=9C=20=ED=99=9C=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/auth/signup/page.tsx | 3 ++- src/app/my/page.tsx | 18 +++++++++--------- src/app/page.tsx | 5 +++-- src/app/types/localStorageSchema.ts | 27 +++++++++++++++++++++++++++ 4 files changed, 41 insertions(+), 12 deletions(-) create mode 100644 src/app/types/localStorageSchema.ts diff --git a/src/app/auth/signup/page.tsx b/src/app/auth/signup/page.tsx index 44e3517..c37de3f 100644 --- a/src/app/auth/signup/page.tsx +++ b/src/app/auth/signup/page.tsx @@ -16,6 +16,7 @@ import { z } from "zod"; import { zodResolver } from "@hookform/resolvers/zod"; import { useState } from "react"; import Popup from "@/app/components/common/Popup"; +import { localStorageSetItem } from "@/app/types/localStorageSchema"; const Page = () => { const router = useRouter(); @@ -39,7 +40,7 @@ const Page = () => { const onSubmit = (data: z.infer) => { if (data) { setSubmit(true); - localStorage.setItem("auth", JSON.stringify(data)); + localStorageSetItem("signup", data); } }; diff --git a/src/app/my/page.tsx b/src/app/my/page.tsx index 237d560..573ebdb 100644 --- a/src/app/my/page.tsx +++ b/src/app/my/page.tsx @@ -10,29 +10,29 @@ import { buttonOutLine, pointer } from "../styles/global.css"; import { useRouter } from "next/navigation"; import { inputStyle } from "../styles/common/input.css"; import { useEffect, useState } from "react"; +import { + localStorageGetItem, + localStorageRemoveItem, + localStorageSetItem, +} from "../types/localStorageSchema"; const Page = () => { const router = useRouter(); const [goal, setGoal] = useState(""); const onClick = () => { - localStorage.removeItem("login"); + localStorageRemoveItem("signin"); + router.push("/"); }; const onGoalSave = (e: React.KeyboardEvent) => { if (e.key === "Enter") { - localStorage.setItem("goal", goal); - } - }; - - const onKeyDown = (e: React.KeyboardEvent) => { - if (e.key === "Enter" || e.key === " ") { - onClick(); + localStorageSetItem("goal", goal); } }; useEffect(() => { - const getGoal = localStorage.getItem("goal"); + const getGoal = localStorageGetItem("goal"); if (getGoal) { setGoal(getGoal); } diff --git a/src/app/page.tsx b/src/app/page.tsx index 871189f..b93a828 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -18,6 +18,7 @@ import { paddingSprinkles } from "./styles/padding.css"; import { zodResolver } from "@hookform/resolvers/zod"; import Popup from "./components/common/Popup"; import Button from "./components/common/Button"; +import { localStorageSetItem } from "./types/localStorageSchema"; // type LoginBoxProps = { // image: string; @@ -66,7 +67,7 @@ export default function Login() { const onSubmit = (data: z.infer) => { if (data) { - const getAuthInfo = localStorage.getItem("auth"); + const getAuthInfo = localStorage.getItem("signup"); if (getAuthInfo) { const parseInfo = JSON.parse(getAuthInfo); @@ -78,7 +79,7 @@ export default function Login() { if (parseInfo.id === data.id && parseInfo.password === data.password) { router.push("/record"); - localStorage.setItem("login", JSON.stringify(data)); + localStorageSetItem("signin", data); } } } else { diff --git a/src/app/types/localStorageSchema.ts b/src/app/types/localStorageSchema.ts new file mode 100644 index 0000000..716fc7e --- /dev/null +++ b/src/app/types/localStorageSchema.ts @@ -0,0 +1,27 @@ +import { z } from "zod"; +import { signinSchema } from "./signinSchema"; +import { signupSchema } from "./signupSchema"; + +export type LocalStorageSchema = { + signup: z.infer; + signin: z.infer; + goal: string; +}; + +export const localStorageSetItem = ( + key: K, + value: LocalStorageSchema[K] +): void => { + return localStorage.setItem(key, JSON.stringify(value)); +}; + +export const localStorageGetItem = ( + key: K +): LocalStorageSchema[K] | null => { + const item = localStorage.getItem(key); + return item ? (JSON.parse(item) as LocalStorageSchema[K]) : null; +}; + +export const localStorageRemoveItem = (key: K): void => { + localStorage.removeItem(key); +}; From 9d2e29455e6f6c667141c5037e600cc5400c72a4 Mon Sep 17 00:00:00 2001 From: Jetom88 Date: Tue, 22 Oct 2024 23:23:19 +0900 Subject: [PATCH 14/23] =?UTF-8?q?review:=20=EB=86=93=EC=B9=9C=20localStora?= =?UTF-8?q?ge=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/page.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index b93a828..865d8a9 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -18,7 +18,7 @@ import { paddingSprinkles } from "./styles/padding.css"; import { zodResolver } from "@hookform/resolvers/zod"; import Popup from "./components/common/Popup"; import Button from "./components/common/Button"; -import { localStorageSetItem } from "./types/localStorageSchema"; +import { localStorageGetItem, localStorageSetItem } from "./types/localStorageSchema"; // type LoginBoxProps = { // image: string; @@ -67,17 +67,15 @@ export default function Login() { const onSubmit = (data: z.infer) => { if (data) { - const getAuthInfo = localStorage.getItem("signup"); + const getAuthInfo = localStorageGetItem("signin"); if (getAuthInfo) { - const parseInfo = JSON.parse(getAuthInfo); - - if (parseInfo.id !== data.id || parseInfo.password !== data.password) { + if (getAuthInfo.id !== data.id || getAuthInfo.password !== data.password) { setMessage("아이디, 비밀번호를 확인해주세요."); setShowPopup(true); } - if (parseInfo.id === data.id && parseInfo.password === data.password) { + if (getAuthInfo.id === data.id && getAuthInfo.password === data.password) { router.push("/record"); localStorageSetItem("signin", data); } From b57c4ac7bc28f13ad898e0d6d9aa21cc51114616 Mon Sep 17 00:00:00 2001 From: Jetom88 Date: Thu, 24 Oct 2024 18:13:44 +0900 Subject: [PATCH 15/23] =?UTF-8?q?review:=20login=20page=EB=A5=BC=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5=EA=B3=BC=20=EB=A0=88=EC=9D=B4=EC=95=84?= =?UTF-8?q?=EC=9B=83=EC=9C=BC=EB=A1=9C=20=EC=BD=94=EB=93=9C=20=EB=B6=84?= =?UTF-8?q?=ED=95=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/components/common/Popup.tsx | 2 +- src/app/login/components/loginForm.tsx | 80 ++++++++++ src/app/login/components/loginPopup.tsx | 27 ++++ src/app/login/hook/index.ts | 1 + src/app/login/hook/useAuth.ts | 34 +++++ src/app/login/loginPage.tsx | 88 +++++++++++ src/app/{ => login/styles}/login.css.ts | 6 +- src/app/page.tsx | 195 +----------------------- src/app/store/login/loginStore.ts | 20 +++ 9 files changed, 259 insertions(+), 194 deletions(-) create mode 100644 src/app/login/components/loginForm.tsx create mode 100644 src/app/login/components/loginPopup.tsx create mode 100644 src/app/login/hook/index.ts create mode 100644 src/app/login/hook/useAuth.ts create mode 100644 src/app/login/loginPage.tsx rename src/app/{ => login/styles}/login.css.ts (85%) create mode 100644 src/app/store/login/loginStore.ts diff --git a/src/app/components/common/Popup.tsx b/src/app/components/common/Popup.tsx index 9fed3b6..01e91fb 100644 --- a/src/app/components/common/Popup.tsx +++ b/src/app/components/common/Popup.tsx @@ -2,7 +2,7 @@ import { popupContents, popupWrapper } from "@/app/styles/common/popup.css"; import { paragraph2, semiBold } from "@/app/styles/font.css"; import { flexSprinklesFc } from "./utils/flex"; -const Popup = ({ text, children }: { text: string; children: React.ReactNode }) => { +const Popup = ({ text, children }: { text: null | string; children: React.ReactNode }) => { return (
diff --git a/src/app/login/components/loginForm.tsx b/src/app/login/components/loginForm.tsx new file mode 100644 index 0000000..0474e7b --- /dev/null +++ b/src/app/login/components/loginForm.tsx @@ -0,0 +1,80 @@ +import { flexSprinklesFc } from "@/app/components/common/utils/flex"; +import { gray300, pink80 } from "@/app/styles/colors.css"; +import { inputStyle } from "@/app/styles/common/input.css"; +import { caption, caption2 } from "@/app/styles/font.css"; +import { paddingSprinkles } from "@/app/styles/padding.css"; +import { formBox } from "../styles/login.css"; +import { useRouter } from "next/navigation"; + +import { signinSchema } from "@/app/types/signinSchema"; +import { zodResolver } from "@hookform/resolvers/zod"; +import { useForm } from "react-hook-form"; +import { z } from "zod"; +import { pointer, buttonOutLine } from "@/app/styles/global.css"; + +import { useAuth } from "../hook"; + +const LoginForm = () => { + const router = useRouter(); + const { onLoginSubmit } = useAuth(); + + const { + register, + handleSubmit, + formState: { errors }, + } = useForm>({ + resolver: zodResolver(signinSchema), + mode: "onChange", + defaultValues: { + id: "", + password: "", + }, + }); + + return ( + <> +
+
+
+ + +

+ {errors.id?.message} +

+
+ +
+ +

+ {errors.password?.message} +

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

+ {" "} + |{" "} + +

+ + ); +}; + +export default LoginForm; diff --git a/src/app/login/components/loginPopup.tsx b/src/app/login/components/loginPopup.tsx new file mode 100644 index 0000000..709b0fa --- /dev/null +++ b/src/app/login/components/loginPopup.tsx @@ -0,0 +1,27 @@ +import Button from "@/app/components/common/Button"; +import Popup from "@/app/components/common/Popup"; +import { useLoginStore } from "@/app/store/login/loginStore"; +import { colors } from "@/app/styles/colors.css"; + +const LoginPopup = () => { + const { loginMessage, loginPopup, setLoginMessage, setLoginPopup } = useLoginStore(); + return ( + <> + {loginPopup && ( + + {" "} - |{" "} - -

-
- - {/* router.push("/record")} - /> - router.push("/record")} - /> - router.push("/record")} - border - /> */} -
- - ); -} +export default page; diff --git a/src/app/store/login/loginStore.ts b/src/app/store/login/loginStore.ts new file mode 100644 index 0000000..f5304db --- /dev/null +++ b/src/app/store/login/loginStore.ts @@ -0,0 +1,20 @@ +import { create } from "zustand"; + +type LoginStore = { + loginPopup: boolean; + setLoginPopup: (state: boolean) => void; + + loginMessage: null | string; + setLoginMessage: (state: string) => void; +}; + +export const useLoginStore = create((set) => ({ + loginPopup: false, + setLoginPopup: (state) => { + set(() => ({ loginPopup: state })); + }, + loginMessage: null, + setLoginMessage: (state) => { + set(() => ({ loginMessage: state })); + }, +})); From 60783b42b24ada0c91a0b04ff0bbfd600f9992fb Mon Sep 17 00:00:00 2001 From: Jetom88 Date: Sat, 26 Oct 2024 16:51:22 +0900 Subject: [PATCH 16/23] =?UTF-8?q?review:=20zod=EB=A5=BC=20=EC=82=AC?= =?UTF-8?q?=EC=9A=A9=ED=95=B4=EC=84=9C=20text=20props=EB=A5=BC=20nullable?= =?UTF-8?q?=20=ED=83=80=EC=9E=85=EC=9C=BC=EB=A1=9C=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/Popup.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/app/components/common/Popup.tsx b/src/app/components/common/Popup.tsx index 01e91fb..3ea7e20 100644 --- a/src/app/components/common/Popup.tsx +++ b/src/app/components/common/Popup.tsx @@ -1,8 +1,11 @@ import { popupContents, popupWrapper } from "@/app/styles/common/popup.css"; import { paragraph2, semiBold } from "@/app/styles/font.css"; import { flexSprinklesFc } from "./utils/flex"; +import { z } from "zod"; -const Popup = ({ text, children }: { text: null | string; children: React.ReactNode }) => { +const textSchema = z.string().nullable(); + +const Popup = ({ text, children }: { text: z.infer; children: React.ReactNode }) => { return (
From 60cd2151b68075f633aa9f65f8b7631291aabc0c Mon Sep 17 00:00:00 2001 From: Jetom88 Date: Sat, 26 Oct 2024 16:52:17 +0900 Subject: [PATCH 17/23] =?UTF-8?q?review:=20immer=20=EB=9D=BC=EC=9D=B4?= =?UTF-8?q?=EB=B8=8C=EB=9F=AC=EB=A6=AC=EB=A5=BC=20=ED=99=9C=EC=9A=A9?= =?UTF-8?q?=ED=95=B4=20=EB=B6=88=EB=B3=80=EC=84=B1=20=EA=B4=80=EB=A6=AC=20?= =?UTF-8?q?=EB=B0=8F=20=EC=83=81=ED=83=9C=20=EB=B3=B5=EC=82=AC=20=EC=9E=91?= =?UTF-8?q?=EC=97=85=20=EC=A4=84=EC=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/store/login/loginStore.ts | 31 +++++++++++++++++++------------ 1 file changed, 19 insertions(+), 12 deletions(-) diff --git a/src/app/store/login/loginStore.ts b/src/app/store/login/loginStore.ts index f5304db..249379b 100644 --- a/src/app/store/login/loginStore.ts +++ b/src/app/store/login/loginStore.ts @@ -1,20 +1,27 @@ import { create } from "zustand"; +import { immer } from "zustand/middleware/immer"; type LoginStore = { - loginPopup: boolean; - setLoginPopup: (state: boolean) => void; + isLoginPopup: boolean; + setIsLoginPopup: (state: boolean) => void; loginMessage: null | string; setLoginMessage: (state: string) => void; }; -export const useLoginStore = create((set) => ({ - loginPopup: false, - setLoginPopup: (state) => { - set(() => ({ loginPopup: state })); - }, - loginMessage: null, - setLoginMessage: (state) => { - set(() => ({ loginMessage: state })); - }, -})); +export const useLoginStore = create()( + immer((set) => ({ + isLoginPopup: false, + setIsLoginPopup: (state) => { + set((draft) => { + draft.isLoginPopup = state; + }); + }, + loginMessage: null, + setLoginMessage: (state) => { + set((draft) => { + draft.loginMessage = state; + }); + }, + })) +); From ff71deb4a78db4c603f31989e0865b4a1c505779 Mon Sep 17 00:00:00 2001 From: Jetom88 Date: Sat, 26 Oct 2024 16:52:28 +0900 Subject: [PATCH 18/23] =?UTF-8?q?feat:=20immer=20=EB=9D=BC=EC=9D=B4?= =?UTF-8?q?=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 | 1 + pnpm-lock.yaml | 19 ++++++++++++++----- 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 9c7488f..0e065c9 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "@vanilla-extract/css": "^1.15.3", "@vanilla-extract/sprinkles": "^1.6.3", "classnames": "^2.5.1", + "immer": "^10.1.1", "next": "14.2.5", "react": "^18", "react-dom": "^18", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1a06178..5e763e3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -20,6 +20,9 @@ importers: classnames: specifier: ^2.5.1 version: 2.5.1 + immer: + specifier: ^10.1.1 + version: 10.1.1 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) @@ -37,7 +40,7 @@ importers: version: 3.23.8 zustand: specifier: ^4.5.5 - version: 4.5.5(@types/react@18.3.5)(react@18.3.1) + version: 4.5.5(@types/react@18.3.5)(immer@10.1.1)(react@18.3.1) devDependencies: '@types/node': specifier: ^20 @@ -1437,6 +1440,9 @@ packages: resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==} engines: {node: '>= 4'} + immer@10.1.1: + resolution: {integrity: sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==} + import-fresh@3.3.0: resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==} engines: {node: '>=6'} @@ -3474,7 +3480,7 @@ snapshots: eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) eslint-plugin-jsx-a11y: 6.9.0(eslint@8.57.0) eslint-plugin-react: 7.35.0(eslint@8.57.0) eslint-plugin-react-hooks: 4.6.2(eslint@8.57.0) @@ -3505,7 +3511,7 @@ snapshots: is-bun-module: 1.1.0 is-glob: 4.0.3 optionalDependencies: - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) transitivePeerDependencies: - '@typescript-eslint/parser' - eslint-import-resolver-node @@ -3523,7 +3529,7 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.0): + eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0): dependencies: array-includes: 3.1.8 array.prototype.findlastindex: 1.2.5 @@ -3841,6 +3847,8 @@ snapshots: ignore@5.3.2: {} + immer@10.1.1: {} + import-fresh@3.3.0: dependencies: parent-module: 1.0.1 @@ -4756,9 +4764,10 @@ snapshots: zod@3.23.8: {} - zustand@4.5.5(@types/react@18.3.5)(react@18.3.1): + zustand@4.5.5(@types/react@18.3.5)(immer@10.1.1)(react@18.3.1): dependencies: use-sync-external-store: 1.2.2(react@18.3.1) optionalDependencies: '@types/react': 18.3.5 + immer: 10.1.1 react: 18.3.1 From 686f08f4a16293cbbaf8aba578605f5294ad62c5 Mon Sep 17 00:00:00 2001 From: Jetom88 Date: Sat, 26 Oct 2024 16:52:41 +0900 Subject: [PATCH 19/23] =?UTF-8?q?review:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EC=A3=BC=EC=84=9D=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/login/loginPage.tsx | 50 ------------------------------------- 1 file changed, 50 deletions(-) diff --git a/src/app/login/loginPage.tsx b/src/app/login/loginPage.tsx index 666812a..2c49d64 100644 --- a/src/app/login/loginPage.tsx +++ b/src/app/login/loginPage.tsx @@ -7,33 +7,6 @@ import { loginWrapper, loginLogo, loginTextBox, loginHeading, loginCaption } fro import LoginForm from "./components/loginForm"; import LoginPopup from "./components/loginPopup"; -// type LoginBoxProps = { -// image: string; -// text: string; -// bg: string; -// textColor: string; -// border?: boolean; -// onClick: MouseEventHandler; -// }; - -// const LoginBox = ({ image, text, bg, textColor, border, onClick }: LoginBoxProps) => { -// return ( -//
-//
-// {text} -//

{text}

-//
-//
-// ); -// }; - export default function LoginPage() { const logoClassName = flexSprinklesFc({ flexDirection: "column", @@ -59,29 +32,6 @@ export default function LoginPage() {
- - {/* router.push("/record")} - /> - router.push("/record")} - /> - router.push("/record")} - border - /> */}
); From e1951eed3448a026d0f6016d8e8145e77ef9a63a Mon Sep 17 00:00:00 2001 From: Jetom88 Date: Sat, 26 Oct 2024 16:53:32 +0900 Subject: [PATCH 20/23] =?UTF-8?q?fix:=20=ED=95=84=EC=9A=94=ED=95=9C=20stat?= =?UTF-8?q?e=EB=A7=8C=20=EC=82=AC=EC=9A=A9=ED=95=B4=20=EB=A6=AC=EB=A0=8C?= =?UTF-8?q?=EB=8D=94=EB=A7=81=EC=9D=84=20=EC=B5=9C=EC=86=8C=ED=99=94=20?= =?UTF-8?q?=ED=95=98=EB=8A=94=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/login/components/loginPopup.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/app/login/components/loginPopup.tsx b/src/app/login/components/loginPopup.tsx index 709b0fa..126871e 100644 --- a/src/app/login/components/loginPopup.tsx +++ b/src/app/login/components/loginPopup.tsx @@ -4,17 +4,19 @@ import { useLoginStore } from "@/app/store/login/loginStore"; import { colors } from "@/app/styles/colors.css"; const LoginPopup = () => { - const { loginMessage, loginPopup, setLoginMessage, setLoginPopup } = useLoginStore(); + const { setLoginMessage, setIsLoginPopup } = useLoginStore(); + const loginMessageState = useLoginStore((state) => state.loginMessage); + const isLoginPopupState = useLoginStore((state) => state.isLoginPopup); return ( <> - {loginPopup && ( - + {isLoginPopupState && ( +