From e23c14f4869a78bd4b16883ae6842b236c697c35 Mon Sep 17 00:00:00 2001 From: pipisebastian Date: Sun, 17 Nov 2024 15:13:18 +0900 Subject: [PATCH 01/10] =?UTF-8?q?feat:=20icon=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - email, password, user에 쓰일 아이콘 svg 추가 #130 --- client/src/assets/icons/lock.svg | 3 +++ client/src/assets/icons/mail.svg | 4 ++++ client/src/assets/icons/user.svg | 3 +++ 3 files changed, 10 insertions(+) create mode 100644 client/src/assets/icons/lock.svg create mode 100644 client/src/assets/icons/mail.svg create mode 100644 client/src/assets/icons/user.svg diff --git a/client/src/assets/icons/lock.svg b/client/src/assets/icons/lock.svg new file mode 100644 index 00000000..e1edeab1 --- /dev/null +++ b/client/src/assets/icons/lock.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/src/assets/icons/mail.svg b/client/src/assets/icons/mail.svg new file mode 100644 index 00000000..3284ad16 --- /dev/null +++ b/client/src/assets/icons/mail.svg @@ -0,0 +1,4 @@ + + + + diff --git a/client/src/assets/icons/user.svg b/client/src/assets/icons/user.svg new file mode 100644 index 00000000..c0cf339e --- /dev/null +++ b/client/src/assets/icons/user.svg @@ -0,0 +1,3 @@ + + + From a886fcd1d362a93e4bb8ee3621bb9496bb2c62e4 Mon Sep 17 00:00:00 2001 From: pipisebastian Date: Sun, 17 Nov 2024 15:15:35 +0900 Subject: [PATCH 02/10] =?UTF-8?q?feat:=20typography=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - display medium 32 추가 #130 --- client/src/styles/typography.ts | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/client/src/styles/typography.ts b/client/src/styles/typography.ts index c31d210b..39c70833 100644 --- a/client/src/styles/typography.ts +++ b/client/src/styles/typography.ts @@ -48,4 +48,16 @@ export const textStyles = defineTextStyles({ textTransform: "None", }, }, + + "display-medium32": { + value: { + fontFamily: "Inter", + fontWeight: "700", + fontSize: "32px", + lineHeight: "40px", + letterSpacing: "-0.2px", + textDecoration: "None", + textTransform: "None", + }, + }, }); From f7940c10c9eba78a48773fb25965b9dfcdf892c1 Mon Sep 17 00:00:00 2001 From: pipisebastian Date: Sun, 17 Nov 2024 19:01:53 +0900 Subject: [PATCH 03/10] =?UTF-8?q?feat:=20text=20button=20width=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD=20#130?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/button/textButton.style.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/components/button/textButton.style.ts b/client/src/components/button/textButton.style.ts index 3556a01d..3098d474 100644 --- a/client/src/components/button/textButton.style.ts +++ b/client/src/components/button/textButton.style.ts @@ -8,7 +8,7 @@ export const textButtonContainer = ({ variant }: { variant: "primary" | "seconda const textButton = cva({ base: { borderRadius: "md", - width: "150px", + width: "50%", height: "40px", cursor: "pointer", }, From b6ad79f2e5104346ef90e336db0a6818540c1d06 Mon Sep 17 00:00:00 2001 From: pipisebastian Date: Sun, 17 Nov 2024 19:02:18 +0900 Subject: [PATCH 04/10] =?UTF-8?q?feat:=20menu=20button=20cursor=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20#130?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/sidebar/MenuButton.style.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/client/src/components/sidebar/MenuButton.style.ts b/client/src/components/sidebar/MenuButton.style.ts index 8a3f95e1..307c3871 100644 --- a/client/src/components/sidebar/MenuButton.style.ts +++ b/client/src/components/sidebar/MenuButton.style.ts @@ -8,6 +8,7 @@ export const menuItemWrapper = css({ width: "300px", padding: "md", boxShadow: "sm", + cursor: "pointer", }); export const imageBox = css({ From 78922af19ecab63f031c2824c63a32367beb875c Mon Sep 17 00:00:00 2001 From: pipisebastian Date: Sun, 17 Nov 2024 19:06:15 +0900 Subject: [PATCH 05/10] =?UTF-8?q?feat:=20input=20field=20=EA=B3=B5?= =?UTF-8?q?=ED=86=B5=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #130 --- .../components/inputField/InputField.style.ts | 36 +++++++++++++++++++ .../src/components/inputField/InputField.tsx | 27 ++++++++++++++ 2 files changed, 63 insertions(+) create mode 100644 client/src/components/inputField/InputField.style.ts create mode 100644 client/src/components/inputField/InputField.tsx diff --git a/client/src/components/inputField/InputField.style.ts b/client/src/components/inputField/InputField.style.ts new file mode 100644 index 00000000..d9e8b1cc --- /dev/null +++ b/client/src/components/inputField/InputField.style.ts @@ -0,0 +1,36 @@ +import { css } from "@styled-system/css"; + +export const formGroup = css({ + position: "relative", +}); + +export const inputContainer = css({ + position: "relative", + borderRadius: "md", + padding: "1", + background: "white/30", +}); + +export const inputBox = css({ + width: "100%", + padding: "2", + paddingLeft: "4", + paddingRight: "12", + color: "gray.700", + "&:focus": { + outline: "none", + }, + "&:placeholder": { + color: "gray.500", + }, +}); + +export const iconBox = css({ + position: "absolute", + top: "50%", + right: "4", + transform: "translateY(-50%)", + width: "6", + height: "6", + color: "white", +}); diff --git a/client/src/components/inputField/InputField.tsx b/client/src/components/inputField/InputField.tsx new file mode 100644 index 00000000..96ba23b7 --- /dev/null +++ b/client/src/components/inputField/InputField.tsx @@ -0,0 +1,27 @@ +import { formGroup, iconBox, inputBox, inputContainer } from "./InputField.style"; + +interface InputFieldProps { + type?: string; + name: string; + value: string; + onChange: (e: React.ChangeEvent) => void; + placeholder?: string; + Icon?: React.FunctionComponent>; +} + +export const InputField = ({ type, name, value, onChange, placeholder, Icon }: InputFieldProps) => ( +
+
+ +
+ {Icon && } +
+); From 9f4ebed73b72874e0cdf15cbf73dc76838634dee Mon Sep 17 00:00:00 2001 From: pipisebastian Date: Sun, 17 Nov 2024 19:06:37 +0900 Subject: [PATCH 06/10] =?UTF-8?q?feat:=20modal=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #130 --- client/src/components/modal/modal.style.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/client/src/components/modal/modal.style.ts b/client/src/components/modal/modal.style.ts index f0998fea..95dc2d0e 100644 --- a/client/src/components/modal/modal.style.ts +++ b/client/src/components/modal/modal.style.ts @@ -17,8 +17,8 @@ export const overlayBox = css({ inset: 0, width: "100%", height: "100%", - background: "gray.500/30", - backdropFilter: "blur(5px)", + background: "gray.500/10", + backdropFilter: "blur(3px)", }); export const modalContainer = cx( @@ -30,9 +30,10 @@ export const modalContainer = cx( transform: "translate(-50%, -50%)", flexDirection: "column", width: "400px", - height: "200px", padding: "md", + background: "white/20", boxShadow: "md", + blur: "1px", }), ); export const modalContent = css({ From bbcafe8a0dd245cb25c74341f351a7839193dd57 Mon Sep 17 00:00:00 2001 From: pipisebastian Date: Sun, 17 Nov 2024 19:16:24 +0900 Subject: [PATCH 07/10] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8,=20?= =?UTF-8?q?=ED=9A=8C=EC=9B=90=EA=B0=80=EC=9E=85=20=EB=AA=A8=EB=8B=AC?= =?UTF-8?q?=EC=B0=BD=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #130 --- client/src/components/sidebar/MenuButton.tsx | 15 +++- client/src/features/auth/AuthModal.style.ts | 46 ++++++++++ client/src/features/auth/AuthModal.tsx | 90 ++++++++++++++++++++ 3 files changed, 147 insertions(+), 4 deletions(-) create mode 100644 client/src/features/auth/AuthModal.style.ts create mode 100644 client/src/features/auth/AuthModal.tsx diff --git a/client/src/components/sidebar/MenuButton.tsx b/client/src/components/sidebar/MenuButton.tsx index 19c81ff9..22a35582 100644 --- a/client/src/components/sidebar/MenuButton.tsx +++ b/client/src/components/sidebar/MenuButton.tsx @@ -1,10 +1,17 @@ +import { useModal } from "@components/modal/useModal"; +import { AuthModal } from "@src/features/auth/AuthModal"; import { menuItemWrapper, imageBox, textBox } from "./MenuButton.style"; export const MenuButton = () => { + const { isOpen, openModal, closeModal } = useModal(); + return ( -
-
-

Noctturn

-
+ <> + + + ); }; diff --git a/client/src/features/auth/AuthModal.style.ts b/client/src/features/auth/AuthModal.style.ts new file mode 100644 index 00000000..2094d534 --- /dev/null +++ b/client/src/features/auth/AuthModal.style.ts @@ -0,0 +1,46 @@ +import { css, cva } from "@styled-system/css"; + +export const container = cva({ + base: { + display: "flex", + gap: "lg", + flexDirection: "column", + justifyContent: "space-between", + width: "100%", + }, + variants: { + mode: { + login: { + height: "300px", + }, + register: { + height: "360px", + }, + }, + }, + defaultVariants: { + mode: "login", + }, +}); + +export const title = css({ + textStyle: "display-medium32", + color: "white", + textAlign: "center", + textShadow: "0 2px 4px rgba(0,0,0,0.1)", +}); + +export const toggleButton = css({ + marginBottom: "md", + color: "white", + cursor: "pointer", + "&:hover": { + textDecoration: "underline", + }, +}); + +export const formContainer = css({ + display: "flex", + gap: "md", + flexDirection: "column", +}); diff --git a/client/src/features/auth/AuthModal.tsx b/client/src/features/auth/AuthModal.tsx new file mode 100644 index 00000000..49912af6 --- /dev/null +++ b/client/src/features/auth/AuthModal.tsx @@ -0,0 +1,90 @@ +/* eslint-disable @typescript-eslint/no-unused-vars */ +import { useState } from "react"; +import Lock from "@assets/icons/lock.svg?react"; +import Mail from "@assets/icons/mail.svg?react"; +import User from "@assets/icons/user.svg?react"; +import { Modal } from "@components/modal/modal"; +import { InputField } from "@src/components/inputField/InputField"; +import { container, formContainer, title, toggleButton } from "./AuthModal.style"; + +interface AuthModalProps { + isOpen: boolean; + onClose: () => void; +} + +export const AuthModal = ({ isOpen, onClose }: AuthModalProps) => { + const [mode, setMode] = useState<"login" | "register">("login"); + const [formData, setFormData] = useState({ + email: "", + password: "", + name: "", + }); + + const handleInputChange = (e: React.ChangeEvent) => { + const { name, value } = e.target; + setFormData((prev) => ({ ...prev, [name]: value })); + }; + + const handleSubmit = () => { + // TODO API 연결 + resetFormData(); + onClose(); + }; + + const toggleMode = () => { + setMode(mode === "login" ? "register" : "login"); + resetFormData(); + }; + + const resetFormData = () => { + setFormData({ email: "", password: "", name: "" }); + }; + + return ( + +
+

{mode === "login" ? "Login" : "Sign Up"}

+
+ {mode === "register" && ( + + )} + + +
+ + +
+ + ); +}; From 9cbf0ad1161920c1d360a1f8c3b9510c468a69e2 Mon Sep 17 00:00:00 2001 From: pipisebastian Date: Sun, 17 Nov 2024 19:20:01 +0900 Subject: [PATCH 08/10] =?UTF-8?q?refactor:=20=EC=B7=A8=EC=86=8C=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=EC=9D=84=20=EB=88=84=EB=A5=BC=EB=95=8C=EB=8F=84=20?= =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EC=82=AC=EB=9D=BC=EC=A7=80?= =?UTF-8?q?=EB=8F=84=EB=A1=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #130 --- client/src/features/auth/AuthModal.tsx | 27 +++++++++++++++----------- 1 file changed, 16 insertions(+), 11 deletions(-) diff --git a/client/src/features/auth/AuthModal.tsx b/client/src/features/auth/AuthModal.tsx index 49912af6..a8d04373 100644 --- a/client/src/features/auth/AuthModal.tsx +++ b/client/src/features/auth/AuthModal.tsx @@ -15,38 +15,43 @@ interface AuthModalProps { export const AuthModal = ({ isOpen, onClose }: AuthModalProps) => { const [mode, setMode] = useState<"login" | "register">("login"); const [formData, setFormData] = useState({ + name: "", email: "", password: "", - name: "", }); + const toggleMode = () => { + setMode(mode === "login" ? "register" : "login"); + resetFormData(); + }; + + const resetFormData = () => { + setFormData({ email: "", password: "", name: "" }); + }; + const handleInputChange = (e: React.ChangeEvent) => { const { name, value } = e.target; setFormData((prev) => ({ ...prev, [name]: value })); }; - const handleSubmit = () => { - // TODO API 연결 + const handleCancelButtonClick = () => { resetFormData(); onClose(); }; - const toggleMode = () => { - setMode(mode === "login" ? "register" : "login"); + const handleSubmitButtonClick = () => { + // TODO API 연결 resetFormData(); - }; - - const resetFormData = () => { - setFormData({ email: "", password: "", name: "" }); + onClose(); }; return (

{mode === "login" ? "Login" : "Sign Up"}

From 2ed7e7427e9ba9f6318600b92ae604424a198d5f Mon Sep 17 00:00:00 2001 From: pipisebastian Date: Sun, 17 Nov 2024 19:34:38 +0900 Subject: [PATCH 09/10] =?UTF-8?q?refactor:=20=EB=AA=A8=EB=8B=AC=EC=B0=BD?= =?UTF-8?q?=20=EB=8B=AB=ED=9E=88=EA=B3=A0=20=EB=82=98=EC=84=9C=20=EB=A1=9C?= =?UTF-8?q?=EA=B7=B8=EC=9D=B8=EB=AA=A8=EB=8B=AC=EB=A1=9C=20=EB=8F=8C?= =?UTF-8?q?=EC=95=84=EA=B0=80=EB=8F=84=EB=A1=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #130 --- client/src/features/auth/AuthModal.tsx | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/client/src/features/auth/AuthModal.tsx b/client/src/features/auth/AuthModal.tsx index a8d04373..3f962609 100644 --- a/client/src/features/auth/AuthModal.tsx +++ b/client/src/features/auth/AuthModal.tsx @@ -22,11 +22,13 @@ export const AuthModal = ({ isOpen, onClose }: AuthModalProps) => { const toggleMode = () => { setMode(mode === "login" ? "register" : "login"); - resetFormData(); + setFormData({ email: "", password: "", name: "" }); }; - const resetFormData = () => { + const closeModal = () => { + setMode("login"); setFormData({ email: "", password: "", name: "" }); + onClose(); }; const handleInputChange = (e: React.ChangeEvent) => { @@ -34,15 +36,9 @@ export const AuthModal = ({ isOpen, onClose }: AuthModalProps) => { setFormData((prev) => ({ ...prev, [name]: value })); }; - const handleCancelButtonClick = () => { - resetFormData(); - onClose(); - }; - const handleSubmitButtonClick = () => { // TODO API 연결 - resetFormData(); - onClose(); + closeModal(); }; return ( @@ -51,7 +47,7 @@ export const AuthModal = ({ isOpen, onClose }: AuthModalProps) => { primaryButtonLabel={mode === "login" ? "로그인" : "회원가입"} primaryButtonOnClick={handleSubmitButtonClick} secondaryButtonLabel="취소" - secondaryButtonOnClick={handleCancelButtonClick} + secondaryButtonOnClick={closeModal} >

{mode === "login" ? "Login" : "Sign Up"}

From 564924f8fb7d19beeedcd0957929f0d06bcfa837 Mon Sep 17 00:00:00 2001 From: pipisebastian Date: Sun, 17 Nov 2024 20:28:21 +0900 Subject: [PATCH 10/10] =?UTF-8?q?refactor:=20=EB=AA=A8=EB=8B=AC=20?= =?UTF-8?q?=EC=B5=9C=EC=86=8C=20=EB=86=92=EC=9D=B4=20=EC=A7=80=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #130 --- client/src/components/modal/modal.style.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/client/src/components/modal/modal.style.ts b/client/src/components/modal/modal.style.ts index 95dc2d0e..034327c2 100644 --- a/client/src/components/modal/modal.style.ts +++ b/client/src/components/modal/modal.style.ts @@ -29,7 +29,9 @@ export const modalContainer = cx( position: "absolute", transform: "translate(-50%, -50%)", flexDirection: "column", + justifyContent: "space-between", width: "400px", + minHeight: "200px", padding: "md", background: "white/20", boxShadow: "md", @@ -38,6 +40,7 @@ export const modalContainer = cx( ); export const modalContent = css({ display: "flex", + flexGrow: 1, justifyContent: "center", alignItems: "center", width: "100%",