From 9793ec8350a145f7d22218061fabd1498f0a2cfc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=ED=95=B4=EC=A4=80?= <127281057+ftery0@users.noreply.github.com> Date: Tue, 27 Aug 2024 07:02:48 +0900 Subject: [PATCH] fix : eeor --- web/src/components/auth/default/index.tsx | 85 +++++++++++++---------- web/src/components/auth/login/index.tsx | 84 +++++++++++++--------- web/src/components/auth/name/index.tsx | 73 ++++++++++--------- web/src/components/auth/number/index.tsx | 79 +++++++++++---------- web/src/components/routers/index.tsx | 4 +- web/src/store/user/user.atom.ts | 12 ++++ 6 files changed, 196 insertions(+), 141 deletions(-) create mode 100644 web/src/store/user/user.atom.ts diff --git a/web/src/components/auth/default/index.tsx b/web/src/components/auth/default/index.tsx index ba415b6..c830702 100644 --- a/web/src/components/auth/default/index.tsx +++ b/web/src/components/auth/default/index.tsx @@ -1,52 +1,63 @@ -import React from "react" -import Polygon from "../../../assets/Polygon 2.png"; -import logo from "../../../assets/logo.svg"; +import React, { useState } from "react"; +import { useNavigate } from "react-router-dom"; +import { useAtom } from "jotai"; +import { currentUserAtom } from "../../../store/user/user.atom"; import * as S from "./style"; import * as Auth from "../start/style"; -import { useAtom } from "jotai"; -import { authType } from "../../../store/authtype/authtype.atom"; -import { useNavigate } from "react-router-dom"; - +import Polygon from "../../../assets/Polygon 2.png"; +import logo from "../../../assets/logo.svg"; -const Default = ()=>{ +const Default= () => { const navigate = useNavigate(); - const [AuthValid, setAuthValid] = useAtom(authType); - const consumerAuth = ()=>{ - setAuthValid((prev)=>!prev); - - navigate("/login") - - } -return( - - - + const [, setCurrentUser] = useAtom(currentUserAtom); + const [username, setUsername] = useState(""); + const [password, setPassword] = useState(""); + + const handleNext = () => { + setCurrentUser((prev) => ({ + ...prev, + username, + password + })); + navigate("/sign/number"); + }; + + return ( + + +

안녕하세요

- + - - + + setUsername(e.target.value)} + /> - + setPassword(e.target.value)} + /> - navigate("/sign/number")}>다음 - - - navigate("/sign")}>로그인 하러 가기 - + 다음 + + navigate("/sign")}>로그인 하러 가기 + - - + Polygon - - - + - -) -} -export default Default \ No newline at end of file + + ); +}; + +export default Default; diff --git a/web/src/components/auth/login/index.tsx b/web/src/components/auth/login/index.tsx index c104025..a924418 100644 --- a/web/src/components/auth/login/index.tsx +++ b/web/src/components/auth/login/index.tsx @@ -1,49 +1,67 @@ -import React from "react" -import Polygon from "../../../assets/Polygon 2.png"; -import logo from "../../../assets/logo.svg"; +import React, { useState } from "react"; +import { useNavigate } from "react-router-dom"; +import { useAtom } from "jotai"; +import { usersAtom, currentUserAtom } from "../../../store/user/user.atom"; import * as S from "./style"; import * as Auth from "../start/style"; -import { useAtom } from "jotai"; -import { authType } from "../../../store/authtype/authtype.atom"; -import { useNavigate } from "react-router-dom"; +import Polygon from "../../../assets/Polygon 2.png"; +import logo from "../../../assets/logo.svg"; -const Login = ()=>{ +const Login: React.FC = () => { const navigate = useNavigate(); - const [AuthValid, setAuthValid] = useAtom(authType); - const consumerAuth = ()=>{ - setAuthValid((prev)=>!prev); - } -return( - - - + const [users] = useAtom(usersAtom); + const [, setCurrentUser] = useAtom(currentUserAtom); + const [username, setUsername] = useState(""); + const [password, setPassword] = useState(""); + + const handleLogin = () => { + const user = users.find( + (u) => u.username === username && u.password === password + ); + if (user) { + setCurrentUser(user); + navigate("/home"); + } else { + alert("아이디 또는 비밀번호가 틀렸습니다."); + } + }; + + return ( + + +

반가워요!

 - + setUsername(e.target.value)} + /> - - + + setPassword(e.target.value)} + /> - navigate("/home")}>시작 - - {AuthValid ? 사용자 로그인 하러 가기 : 지자체 로그인 하러 가기} - navigate("/sign/name")}>회원가입 하러 가기 - + 시작 + + navigate("/sign/name")}>회원가입 하러 가기 + - - - + Polygon - - - + - -) -} -export default Login \ No newline at end of file + + ); +}; + +export default Login; diff --git a/web/src/components/auth/name/index.tsx b/web/src/components/auth/name/index.tsx index 19a8e9d..8b260e1 100644 --- a/web/src/components/auth/name/index.tsx +++ b/web/src/components/auth/name/index.tsx @@ -1,48 +1,53 @@ -import React from "react" -import Polygon from "../../../assets/Polygon 2.png"; -import logo from "../../../assets/logo.svg"; +import React, { useState } from "react"; +import { useNavigate } from "react-router-dom"; +import { useAtom } from "jotai"; +import { currentUserAtom } from "../../../store/user/user.atom"; import * as S from "./style"; import * as Auth from "../start/style"; -import { useAtom } from "jotai"; -import { authType } from "../../../store/authtype/authtype.atom"; -import { useNavigate } from "react-router-dom"; - +import Polygon from "../../../assets/Polygon 2.png"; +import logo from "../../../assets/logo.svg"; -const Name = ()=>{ +const Name= () => { const navigate = useNavigate(); - const [AuthValid, setAuthValid] = useAtom(authType); - const consumerAuth = ()=>{ - setAuthValid((prev)=>!prev); - - navigate("/login") - - } -return( - - - + const [, setCurrentUser] = useAtom(currentUserAtom); + const [name, setName] = useState(""); + + const handleNext = () => { + setCurrentUser((prev) => ({ + ...prev, + name + })); + navigate("/signup"); + }; + + return ( + + +

안녕하세요

 - - + + setName(e.target.value)} + /> - navigate("/signup")}>다음 - - navigate("/sign")}>로그인 하러 가기 - + 다음 + + navigate("/sign")}>로그인 하러 가기 + - - + Polygon - - - + - -) -} -export default Name \ No newline at end of file + + ); +}; + +export default Name; diff --git a/web/src/components/auth/number/index.tsx b/web/src/components/auth/number/index.tsx index 1270307..5babb27 100644 --- a/web/src/components/auth/number/index.tsx +++ b/web/src/components/auth/number/index.tsx @@ -1,49 +1,58 @@ -import React from "react" -import Polygon from "../../../assets/Polygon 2.png"; -import logo from "../../../assets/logo.svg"; +import React, { useState } from "react"; +import { useNavigate } from "react-router-dom"; +import { useAtom } from "jotai"; +import { usersAtom, currentUserAtom } from "../../../store/user/user.atom"; import * as S from "./style"; import * as Auth from "../start/style"; -import { useAtom } from "jotai"; -import { authType } from "../../../store/authtype/authtype.atom"; -import { useNavigate } from "react-router-dom"; - +import Polygon from "../../../assets/Polygon 2.png"; +import logo from "../../../assets/logo.svg"; -const Number = (s: string)=>{ +const Number = () => { const navigate = useNavigate(); - const [AuthValid, setAuthValid] = useAtom(authType); - const consumerAuth = ()=>{ - setAuthValid((prev)=>!prev); - - navigate("/login") - - } -return( - - - + const [users, setUsers] = useAtom(usersAtom); + const [currentUser, setCurrentUser] = useAtom(currentUserAtom); + const [phone, setPhone] = useState(""); + + const handleSignUp = () => { + const newUser = { + ...currentUser, + phone, + }; + + setUsers([...users, newUser]); + setCurrentUser(null); + + navigate("/login"); + }; + + return ( + + +

안녕하세요

 - - + + setPhone(e.target.value)} + /> - navigate("/login")}>회원가입 - - - navigate("/sign")}>로그인 하러 가기 - + 회원가입 + + navigate("/sign")}>로그인 하러 가기 + - - + Polygon - - - + - -) -} -export default Number \ No newline at end of file + + ); +}; + +export default Number; diff --git a/web/src/components/routers/index.tsx b/web/src/components/routers/index.tsx index 423f731..0790c54 100644 --- a/web/src/components/routers/index.tsx +++ b/web/src/components/routers/index.tsx @@ -16,11 +16,11 @@ import SearchQuestion from "../../page/search/question"; const Router=()=>{ return( - + ;
- }/> + }/> }/> }/> }/> diff --git a/web/src/store/user/user.atom.ts b/web/src/store/user/user.atom.ts new file mode 100644 index 0000000..360c53b --- /dev/null +++ b/web/src/store/user/user.atom.ts @@ -0,0 +1,12 @@ +import { atom } from "jotai"; +interface User { + name?: string; + username?: string; + password?: string; + phone?: string; +} + + +export const usersAtom = atom([]); + +export const currentUserAtom = atom(null);