From 4665800202c1e54c1ddbdc0e60de9c8149ea5dfb Mon Sep 17 00:00:00 2001 From: dongree Date: Thu, 7 Nov 2024 16:28:34 +0900 Subject: [PATCH 1/4] =?UTF-8?q?=E2=9C=A8=20feat:=20login=20API=20=EC=97=B0?= =?UTF-8?q?=EB=8F=99=20#4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FE/src/components/Login/Input.tsx | 12 +++----- FE/src/components/Login/index.tsx | 47 ++++++++++++++++++++++++------- FE/src/service/auth.ts | 15 ++++++++++ FE/src/types.ts | 9 ++++++ 4 files changed, 65 insertions(+), 18 deletions(-) create mode 100644 FE/src/service/auth.ts create mode 100644 FE/src/types.ts diff --git a/FE/src/components/Login/Input.tsx b/FE/src/components/Login/Input.tsx index cb910d07..b6b78ab1 100644 --- a/FE/src/components/Login/Input.tsx +++ b/FE/src/components/Login/Input.tsx @@ -1,16 +1,12 @@ -import { HTMLInputTypeAttribute } from 'react'; +import { ComponentProps } from 'react'; -type LoginInputProps = { - type: HTMLInputTypeAttribute; - placeholder: string; -}; +type LoginInputProps = ComponentProps<'input'>; -export default function Input({ type, placeholder }: LoginInputProps) { +export default function Input({ ...props }: LoginInputProps) { return ( ); } diff --git a/FE/src/components/Login/index.tsx b/FE/src/components/Login/index.tsx index ce03ff78..c8be634f 100644 --- a/FE/src/components/Login/index.tsx +++ b/FE/src/components/Login/index.tsx @@ -1,30 +1,57 @@ import useLoginModalStore from 'store/useLoginModalStore'; import Input from './Input'; import { ChatBubbleOvalLeftIcon } from '@heroicons/react/16/solid'; +import { FormEvent, useState } from 'react'; +import { login } from 'service/auth'; export default function Login() { const { isOpen, toggleModal } = useLoginModalStore(); + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); if (!isOpen) return; + const handleSubmit = async (e: FormEvent) => { + e.preventDefault(); + const res = await login(email, password); + + if ('error' in res) { + return; + } + + console.log(res); + }; + return ( <> toggleModal()} />

JuGa

-
- - -
-
+
+
+ setEmail(e.target.value)} + autoComplete='username' + /> + setPassword(e.target.value)} + autoComplete='current-password' + /> +
- -
+ +
); diff --git a/FE/src/service/auth.ts b/FE/src/service/auth.ts new file mode 100644 index 00000000..e4ecb640 --- /dev/null +++ b/FE/src/service/auth.ts @@ -0,0 +1,15 @@ +import { LoginFailResponse, LoginSuccessResponse } from 'types'; + +export async function login( + email: string, + password: string, +): Promise { + return fetch('http://223.130.151.42:3000/auth/login', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + email, + password, + }), + }).then((res) => res.json()); +} diff --git a/FE/src/types.ts b/FE/src/types.ts new file mode 100644 index 00000000..06b1b10b --- /dev/null +++ b/FE/src/types.ts @@ -0,0 +1,9 @@ +export type LoginSuccessResponse = { + accessToken: string; +}; + +export type LoginFailResponse = { + error: string; + message: string[]; + statusCode: number; +}; From 90e876f753a14329d48c4a6785afa3912c7230c3 Mon Sep 17 00:00:00 2001 From: dongree Date: Thu, 7 Nov 2024 17:08:13 +0900 Subject: [PATCH 2/4] =?UTF-8?q?=E2=9C=A8=20feat:=20accssToken=20=EC=A0=84?= =?UTF-8?q?=EC=97=AD=EC=9C=BC=EB=A1=9C=20=EC=83=81=ED=83=9C=20=EA=B4=80?= =?UTF-8?q?=EB=A6=AC=20#4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FE/src/components/Header.tsx | 26 +++++++++++++++++--------- FE/src/components/Login/index.tsx | 12 ++++++++++-- FE/src/store/authStore.ts | 21 +++++++++++++++++++++ 3 files changed, 48 insertions(+), 11 deletions(-) create mode 100644 FE/src/store/authStore.ts diff --git a/FE/src/components/Header.tsx b/FE/src/components/Header.tsx index 54b70cb8..97657c29 100644 --- a/FE/src/components/Header.tsx +++ b/FE/src/components/Header.tsx @@ -1,7 +1,9 @@ +import useAuthStore from 'store/authStore'; import useLoginModalStore from 'store/useLoginModalStore'; export default function Header() { const { toggleModal } = useLoginModalStore(); + const { isLogin, resetToken } = useAuthStore(); return (
@@ -26,15 +28,21 @@ export default function Header() {
- - + {isLogin ? ( + + ) : ( + <> + + + + )}
diff --git a/FE/src/components/Login/index.tsx b/FE/src/components/Login/index.tsx index c8be634f..13946c43 100644 --- a/FE/src/components/Login/index.tsx +++ b/FE/src/components/Login/index.tsx @@ -1,13 +1,20 @@ import useLoginModalStore from 'store/useLoginModalStore'; import Input from './Input'; import { ChatBubbleOvalLeftIcon } from '@heroicons/react/16/solid'; -import { FormEvent, useState } from 'react'; +import { FormEvent, useEffect, useState } from 'react'; import { login } from 'service/auth'; +import useAuthStore from 'store/authStore'; export default function Login() { const { isOpen, toggleModal } = useLoginModalStore(); const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); + const { setAccessToken } = useAuthStore(); + + useEffect(() => { + setEmail(''); + setPassword(''); + }, [isOpen]); if (!isOpen) return; @@ -19,7 +26,8 @@ export default function Login() { return; } - console.log(res); + setAccessToken(res.accessToken); + toggleModal(); }; return ( diff --git a/FE/src/store/authStore.ts b/FE/src/store/authStore.ts new file mode 100644 index 00000000..1a8e8453 --- /dev/null +++ b/FE/src/store/authStore.ts @@ -0,0 +1,21 @@ +import { create } from 'zustand'; + +type AuthStore = { + accessToken: string | null; + isLogin: boolean; + setAccessToken: (token: string) => void; + resetToken: () => void; +}; + +const useAuthStore = create((set) => ({ + accessToken: null, + isLogin: false, + setAccessToken: (token: string) => { + set({ accessToken: token, isLogin: token !== null }); + }, + resetToken: () => { + set({ accessToken: null, isLogin: false }); + }, +})); + +export default useAuthStore; From 3c120a024b4970f7f46752c53b393a02a15d84d8 Mon Sep 17 00:00:00 2001 From: dongree Date: Thu, 7 Nov 2024 17:19:47 +0900 Subject: [PATCH 3/4] =?UTF-8?q?=F0=9F=92=84=20design:=20=ED=9A=8C=EC=9B=90?= =?UTF-8?q?=EA=B0=80=EC=9E=85=20ui=20=EC=A0=9C=EA=B1=B0,=20overlay=20?= =?UTF-8?q?=ED=88=AC=EB=AA=85=EB=8F=84=20=EB=86=92=EC=9D=B4=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FE/src/components/Header.tsx | 11 ++++++++--- FE/src/components/Login/index.tsx | 2 +- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/FE/src/components/Header.tsx b/FE/src/components/Header.tsx index 97657c29..b2b294fb 100644 --- a/FE/src/components/Header.tsx +++ b/FE/src/components/Header.tsx @@ -29,7 +29,12 @@ export default function Header() {
{isLogin ? ( - + ) : ( <> - + */} )}
diff --git a/FE/src/components/Login/index.tsx b/FE/src/components/Login/index.tsx index 13946c43..fbe4e418 100644 --- a/FE/src/components/Login/index.tsx +++ b/FE/src/components/Login/index.tsx @@ -67,6 +67,6 @@ export default function Login() { function Overay({ onClick }: { onClick: () => void }) { return ( -
+
); } From 3388d71d42c86f2121c23116dbfbce241317adfe Mon Sep 17 00:00:00 2001 From: dongree Date: Thu, 7 Nov 2024 17:21:37 +0900 Subject: [PATCH 4/4] =?UTF-8?q?=E2=9A=99=EF=B8=8F=20chore:=20console.log?= =?UTF-8?q?=20=EC=A0=9C=EA=B1=B0=20=EB=B0=8F=20=EC=82=AC=EC=9A=A9=ED=95=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20id=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FE/src/components/StockIndex/Chart.tsx | 1 - FE/src/utils/chart.ts | 2 -- 2 files changed, 3 deletions(-) diff --git a/FE/src/components/StockIndex/Chart.tsx b/FE/src/components/StockIndex/Chart.tsx index b3e17c8e..2ab43205 100644 --- a/FE/src/components/StockIndex/Chart.tsx +++ b/FE/src/components/StockIndex/Chart.tsx @@ -39,7 +39,6 @@ export function Chart({ name }: StockIndexChartProps) {

-31.55(-1.2%)

{ chartHeight - (chartHeight * (point - yMin)) / (yMax - yMin); - console.log(point); - if (i === 0) { ctx.moveTo(x, y); } else {