From 53bb7c4a291c3e8da361748bfef4d7b5ab775f2f Mon Sep 17 00:00:00 2001 From: moonhuicheol Date: Fri, 27 Dec 2024 11:57:49 +0900 Subject: [PATCH 001/124] =?UTF-8?q?=E2=9C=A8=20feat:=20=EA=B3=B5=ED=86=B5?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20Button=EA=B5=AC=ED=98=84?= =?UTF-8?q?=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + src/components/ui/button/Button.tsx | 25 ++++++ src/components/ui/button/buttonStyle.ts | 99 ++++++++++++++++++++++ src/components/ui/button/button_props.d.ts | 11 +++ yarn.lock | 5 ++ 5 files changed, 141 insertions(+) create mode 100644 src/components/ui/button/Button.tsx create mode 100644 src/components/ui/button/buttonStyle.ts create mode 100644 src/components/ui/button/button_props.d.ts diff --git a/package.json b/package.json index bb9f6b2..758c217 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "axios": "^1.7.9", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-hook-form": "^7.54.2", "react-router-dom": "^7.0.2", "styled-components": "^6.1.13", "zustand": "^5.0.2" diff --git a/src/components/ui/button/Button.tsx b/src/components/ui/button/Button.tsx new file mode 100644 index 0000000..ae24887 --- /dev/null +++ b/src/components/ui/button/Button.tsx @@ -0,0 +1,25 @@ +import { IButtonProps } from "./button_props"; +import * as S from "./buttonStyle"; + +export default function Button({ + children, + onClickFnc, + type = "button", + disabled = false, + style, + bgColor, + textColor, +}: IButtonProps) { + return ( + + {children} + + ); +} diff --git a/src/components/ui/button/buttonStyle.ts b/src/components/ui/button/buttonStyle.ts new file mode 100644 index 0000000..c190717 --- /dev/null +++ b/src/components/ui/button/buttonStyle.ts @@ -0,0 +1,99 @@ +import styled from "styled-components"; +import { IButtonProps } from "./button_props"; + +export const Button = styled.button` + width: 100%; + border-radius: 50px; + border: 1px solid #000000; + + ${({ style }) => { + switch (style) { + case "xl": + return ` + height: 80px; + font-weight: 500; + font-size: 40px; + `; + case "l": + return ` + height: 60px; + font-weight: 700; + font-size: 20px; + `; + case "md": + return ` + height: 50px; + font-weight: 600; + font-size: 18px; + `; + case "sm": + return ` + height: 40px; + font-weight: 600; + font-size: 16px; + `; + case "xs": + return ` + height: 30px; + font-weight: 600; + font-size: 14px; + `; + default: + return ` + height: 50px; + font-weight: 400; + font-size: 16px; + `; + } + }}; + + ${({ bgColor }) => { + switch (bgColor) { + case "black": + return ` + background: #000000; + `; + case "blue": + return ` + background: radial-gradient(78.73% 146.71% at 50% 100.71%, #2571FF 0%, #FFFFFF 100%); + `; + case "green": + return ` + background: radial-gradient(78.68% 145.31% at 50% 100.71%, #44FF92 0%, #FFFFFF 100%); + `; + case "white": + return ` + background: radial-gradient(78.68% 145.31% at 50% 100.71%, #E4E4E4 0%, #FFFFFF 100%); + `; + case "red": + return ` + background: radial-gradient(78.73% 146.71% at 50% 100.71%, #FF5E5E 0%, #FFFFFF 100%); + `; + default: + return ` + background: transparent; + `; + } + }} + + ${({ textColor }) => { + switch (textColor) { + case "black": + return ` + color: #000000; + `; + case "white": + return ` + color: #ffffff; + `; + case "gray": + return ` + color: #6c6c6c + `; + default: + return ` + color: inherit; + `; + } + }} +`; diff --git a/src/components/ui/button/button_props.d.ts b/src/components/ui/button/button_props.d.ts new file mode 100644 index 0000000..082ab2e --- /dev/null +++ b/src/components/ui/button/button_props.d.ts @@ -0,0 +1,11 @@ +import { ReactNode } from "react"; + +interface IButtonProps { + children: ReactNode; + onClickFnc?: () => void; + type: "button" | "submit" | "reset"; + disabled?: boolean; + style: "xl" | "l" | "md" | "sm" | "xs"; + bgColor: "black" | "green" | "red" | "white" | "blue"; + textColor: "black" | "gray" | "white"; +} diff --git a/yarn.lock b/yarn.lock index 22f1b42..7f7f071 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1459,6 +1459,11 @@ react-dom@^18.3.1: loose-envify "^1.1.0" scheduler "^0.23.2" +react-hook-form@^7.54.2: + version "7.54.2" + resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.54.2.tgz#8c26ed54c71628dff57ccd3c074b1dd377cfb211" + integrity sha512-eHpAUgUjWbZocoQYUHposymRb4ZP6d0uwUnooL2uOybA9/3tPUvoAKqEWK1WaSiTxxOfTpffNZP7QwlnM3/gEg== + react-refresh@^0.14.2: version "0.14.2" resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz" From dcd112357b41c14a432310d0abb4c0aebe098a6a Mon Sep 17 00:00:00 2001 From: moonhuicheol Date: Fri, 27 Dec 2024 17:01:18 +0900 Subject: [PATCH 002/124] =?UTF-8?q?=E2=9C=A8=20feat:=20=EA=B3=B5=ED=86=B5?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8/input?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ui/input/Input.tsx | 5 +++++ src/components/ui/input/inputStyle.ts | 16 ++++++++++++++++ src/components/ui/input/input_porps.d.ts | 3 +++ 3 files changed, 24 insertions(+) create mode 100644 src/components/ui/input/Input.tsx create mode 100644 src/components/ui/input/inputStyle.ts create mode 100644 src/components/ui/input/input_porps.d.ts diff --git a/src/components/ui/input/Input.tsx b/src/components/ui/input/Input.tsx new file mode 100644 index 0000000..ad8a472 --- /dev/null +++ b/src/components/ui/input/Input.tsx @@ -0,0 +1,5 @@ +import * as S from "./inputStyle"; + +export default function Input({ type }: IInputProps) { + return ; +} diff --git a/src/components/ui/input/inputStyle.ts b/src/components/ui/input/inputStyle.ts new file mode 100644 index 0000000..49aa0ea --- /dev/null +++ b/src/components/ui/input/inputStyle.ts @@ -0,0 +1,16 @@ +import styled from "styled-components"; + +export const input = styled.input` + width: 100%; + height: 40px; + border-radius: 14px; + padding: 16px; + background-color: #f8f8f8; + font-weight: 400; + font-size: 14px; + color: #000000; + + &:focus { + border: 1px solid #44ff92; + } +`; diff --git a/src/components/ui/input/input_porps.d.ts b/src/components/ui/input/input_porps.d.ts new file mode 100644 index 0000000..717dfb0 --- /dev/null +++ b/src/components/ui/input/input_porps.d.ts @@ -0,0 +1,3 @@ +interface IInputProps { + type: "text"; +} From 101655841081514136353e6b5ce0f7331de5729f Mon Sep 17 00:00:00 2001 From: moonhuicheol Date: Sat, 28 Dec 2024 21:02:45 +0900 Subject: [PATCH 003/124] =?UTF-8?q?=E2=9C=A8=20feat:=20formbutton=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ui/button/Button2.tsx | 13 +++++++++++++ src/components/ui/button/button2_props.d.ts | 6 ++++++ 2 files changed, 19 insertions(+) create mode 100644 src/components/ui/button/Button2.tsx create mode 100644 src/components/ui/button/button2_props.d.ts diff --git a/src/components/ui/button/Button2.tsx b/src/components/ui/button/Button2.tsx new file mode 100644 index 0000000..d855fad --- /dev/null +++ b/src/components/ui/button/Button2.tsx @@ -0,0 +1,13 @@ +import { FieldValues, useFormContext } from "react-hook-form"; +import { IFormButtonProps } from "./button2_props"; + +export default function FormButton( + props: IFormButtonProps, +) { + const { formState } = useFormContext(); + return ( + + ); +} diff --git a/src/components/ui/button/button2_props.d.ts b/src/components/ui/button/button2_props.d.ts new file mode 100644 index 0000000..ec11585 --- /dev/null +++ b/src/components/ui/button/button2_props.d.ts @@ -0,0 +1,6 @@ +import { ReactNode } from "react"; + +interface IFormButtonProps { + children: ReactNode; + className: "string"; +} From 650e2e4f27e128f80b3357d2c92e9341ea16fd41 Mon Sep 17 00:00:00 2001 From: moonhuicheol Date: Sat, 28 Dec 2024 21:31:54 +0900 Subject: [PATCH 004/124] =?UTF-8?q?=E2=9C=A8=20feat:=20=EA=B3=B5=ED=86=B5?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20input2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ui/input/Input2.tsx | 13 +++++++++++++ src/components/ui/input/input2_props.d.ts | 8 ++++++++ .../ui/input/{input_porps.d.ts => input_props.d.ts} | 0 3 files changed, 21 insertions(+) create mode 100644 src/components/ui/input/Input2.tsx create mode 100644 src/components/ui/input/input2_props.d.ts rename src/components/ui/input/{input_porps.d.ts => input_props.d.ts} (100%) diff --git a/src/components/ui/input/Input2.tsx b/src/components/ui/input/Input2.tsx new file mode 100644 index 0000000..892c1bb --- /dev/null +++ b/src/components/ui/input/Input2.tsx @@ -0,0 +1,13 @@ +import { FieldValues, useFormContext } from "react-hook-form"; +import { IInputProps2 } from "./input2_props"; + +export default function Input(props: IInputProps2) { + const { register } = useFormContext(); + return ( + + ); +} diff --git a/src/components/ui/input/input2_props.d.ts b/src/components/ui/input/input2_props.d.ts new file mode 100644 index 0000000..10687d3 --- /dev/null +++ b/src/components/ui/input/input2_props.d.ts @@ -0,0 +1,8 @@ +import { HTMLInputTypeAttribute } from "react"; +import { Path } from "react-router-dom"; + +interface IInputProps2

{ + className?: string; + type: HTMLInputTypeAttribute; + keyname: Path

; +} diff --git a/src/components/ui/input/input_porps.d.ts b/src/components/ui/input/input_props.d.ts similarity index 100% rename from src/components/ui/input/input_porps.d.ts rename to src/components/ui/input/input_props.d.ts From 2a08868aba0235c310c4430f6818431e830427df Mon Sep 17 00:00:00 2001 From: moonhuicheol Date: Mon, 30 Dec 2024 10:56:43 +0900 Subject: [PATCH 005/124] =?UTF-8?q?=E2=9C=A8=20feat:=20loginPage=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 + src/App.tsx | 7 ++- src/components/layout/header/HeaderStyle.ts | 2 + src/components/ui/button/Button.tsx | 4 +- src/components/ui/button/buttonStyle.ts | 5 +- src/components/ui/button/button_props.d.ts | 2 +- src/components/ui/input/Input.tsx | 6 ++- src/components/ui/input/input_porps.d.ts | 1 + src/pages/user/login/Login.tsx | 40 +++++++++++++++- src/pages/user/login/LoginStyle.ts | 51 +++++++++++++++++++++ src/pages/user/login/schema.ts | 13 ++++++ yarn.lock | 10 ++++ 12 files changed, 134 insertions(+), 9 deletions(-) create mode 100644 src/pages/user/login/LoginStyle.ts create mode 100644 src/pages/user/login/schema.ts diff --git a/package.json b/package.json index 758c217..c770b90 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "preview": "vite preview" }, "dependencies": { + "@hookform/resolvers": "^3.9.1", "@tanstack/react-query": "4", "axios": "^1.7.9", "react": "^18.3.1", @@ -17,6 +18,7 @@ "react-hook-form": "^7.54.2", "react-router-dom": "^7.0.2", "styled-components": "^6.1.13", + "zod": "^3.24.1", "zustand": "^5.0.2" }, "devDependencies": { diff --git a/src/App.tsx b/src/App.tsx index b580cd3..f520216 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,16 +3,21 @@ import Header from "@components/layout/header/Header"; import Footer from "@components/layout/footer/Footer"; import GlobalStyles from "./styles/GlobalStyle"; import "@styles/font.css"; +import styled from "styled-components"; function App() { return ( <>

- +