Merge pull request #5 from hackersground-kr/origin/hae

Origin/hae

web/src/components/auth/default/index.tsx

@@ -1,25 +1,19 @@
 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 Polygon from "../../../assets/Polygon 2.png";
 import logo from "../../../assets/logo.svg";
+import * as S from "./style";
+import * as Auth from "../start/style";
+import { useNavigate } from "react-router-dom";
 
 const Default= () => {
     const navigate = useNavigate();
-    const [, setCurrentUser] = useAtom(currentUserAtom);
-    const [username, setUsername] = useState("");
-    const [password, setPassword] = useState("");
+    const [username, setUsername] = useState<string>("");
+    const [password, setPassword] = useState<string>("");
 
     const handleNext = () => {
-        setCurrentUser((prev) => ({
-            ...prev,
-            username,
-            password
-        }));
-        navigate("/sign/number/");
+        localStorage.setItem("signupUsername", username);
+        localStorage.setItem("signupPassword", password);
+        navigate("/sign/number");
     };
 
     return (
@@ -47,17 +41,17 @@ const Default= () => {
                     <S.bottomWarp>
                         <S.startButton onClick={handleNext}>다음</S.startButton>
                         <S.navText>
-                            <span onClick={() => navigate("/sign/")}>로그인 하러 가기</span>
+                            <span onClick={() => navigate("/sign")}>로그인 하러 가기</span>
                         </S.navText>
                     </S.bottomWarp>
                 </S.buttonMain>
-                <img src={Polygon} alt="Polygon" />
+                <img src={Polygon} alt="Polygon"/>
             </Auth.main>
             <Auth.logoMain>
-                <Auth.logo src={logo} alt="Logo" />
+                <Auth.logo src={logo} alt="Logo"/>
             </Auth.logoMain>
         </S.login>
     );
-};
+}
 
 export default Default;

web/src/components/auth/login/index.tsx

@@ -7,23 +7,20 @@ import * as Auth from "../start/style";
 import Polygon from "../../../assets/Polygon 2.png";
 import logo from "../../../assets/logo.svg";
 
+
 const Login = () => {
     const navigate = useNavigate();
-    const [users] = useAtom(usersAtom);
-    const [, setCurrentUser] = useAtom(currentUserAtom);
-    const [username, setUsername] = useState("");
+    const [userId, setuserId] = 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 {
-            navigate("/home/");
-            // alert("아이디 또는 비밀번호가 틀렸습니다.");
+        const userIdw = localStorage.getItem("signupUsername")
+        const usePw = localStorage.getItem("signupPassword")
+
+
+        if (userId === userIdw && password === usePw) {
+            navigate("/home");   
+
         }
     };
 
@@ -37,8 +34,8 @@ const Login = () => {
                     <S.textFieldWrap>
                         <S.textField 
                             placeholder="아이디를 입력해주세요" 
-                            value={username}
-                            onChange={(e) => setUsername(e.target.value)}
+                            value={userId}
+                            onChange={(e) => setuserId(e.target.value)}
                         />
                     </S.textFieldWrap>
                     <S.textFieldWrap>
@@ -52,7 +49,7 @@ const Login = () => {
                     <S.bottomWarp>
                         <S.startButton onClick={handleLogin}>시작</S.startButton>
                         <S.navText>
-                            <span onClick={() => navigate("/sign/name/")}>회원가입 하러 가기</span>
+                            <span onClick={() => navigate("/sign/name")}>회원가입 하러 가기</span>
                         </S.navText>
                     </S.bottomWarp>
                 </S.buttonMain>

web/src/components/auth/name/index.tsx

@@ -1,22 +1,16 @@
 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 Polygon from "../../../assets/Polygon 2.png";
 import logo from "../../../assets/logo.svg";
+import * as S from "./style";
+import * as Auth from "../start/style";
+import { useNavigate } from "react-router-dom";
 
-const Name= () => {
+const Name = () => {
     const navigate = useNavigate();
-    const [, setCurrentUser] = useAtom(currentUserAtom);
-    const [name, setName] = useState("");
+    const [name, setName] = useState<string>("");
 
     const handleNext = () => {
-        setCurrentUser((prev) => ({
-            ...prev,
-            name
-        }));
+        localStorage.setItem("signupName", name);
         navigate("/signup");
     };
 
@@ -41,13 +35,13 @@ const Name= () => {
                         </S.navText>
                     </S.bottomWarp>
                 </S.buttonMain>
-                <img src={Polygon} alt="Polygon" />
+                <img src={Polygon} alt="Polygon"/>
             </Auth.main>
             <Auth.logoMain>
-                <Auth.logo src={logo} alt="Logo" />
+                <Auth.logo src={logo} alt="Logo"/>
             </Auth.logoMain>
         </S.login>
     );
-};
+}
 
 export default Name;

web/src/components/auth/number/index.tsx

@@ -1,28 +1,32 @@
 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 Polygon from "../../../assets/Polygon 2.png";
 import logo from "../../../assets/logo.svg";
+import * as S from "./style";
+import * as Auth from "../start/style";
+import { useNavigate } from "react-router-dom";
 
-const Number = () => {
+const Number= () => {
     const navigate = useNavigate();
-    const [users, setUsers] = useAtom(usersAtom);
-    const [currentUser, setCurrentUser] = useAtom(currentUserAtom);
-    const [phone, setPhone] = useState("");
+    const [phone, setPhone] = useState<string>("");
 
     const handleSignUp = () => {
+        const name = localStorage.getItem("signupName") || "";
+        const username = localStorage.getItem("signupUsername") || "";
+        const password = localStorage.getItem("signupPassword") || "";
+
         const newUser = {
-            ...currentUser,
-            phone,
+            name,
+            username,
+            password,
+            phone
         };
 
-        setUsers([...users, newUser]);
-        setCurrentUser(null);
+        const users = JSON.parse(localStorage.getItem("users") || "[]");
+        users.push(newUser);
+        localStorage.setItem("users", JSON.stringify(users));
 
-        navigate("/login/");
+
+        navigate("/login");
     };
 
     return (
@@ -34,25 +38,25 @@ const Number = () => {
                 <S.buttonMain>
                     <S.textFieldWrap>
                         <S.textField 
-                            placeholder="전화번호를 입력해주세요" 
+                            placeholder="전화번호를 입력해주세요(010-1230-1230)" 
                             value={phone}
                             onChange={(e) => setPhone(e.target.value)}
                         />
                     </S.textFieldWrap>
                     <S.bottomWarp>
                         <S.startButton onClick={handleSignUp}>회원가입</S.startButton>
                         <S.navText>
-                            <span onClick={() => navigate("/sign/")}>로그인 하러 가기</span>
+                            <span onClick={() => navigate("/sign")}>로그인 하러 가기</span>
                         </S.navText>
                     </S.bottomWarp>
                 </S.buttonMain>
-                <img src={Polygon} alt="Polygon" />
+                <img src={Polygon} alt="Polygon"/>
             </Auth.main>
             <Auth.logoMain>
-                <Auth.logo src={logo} alt="Logo" />
+                <Auth.logo src={logo} alt="Logo"/>
             </Auth.logoMain>
         </S.login>
     );
-};
+}
 
 export default Number;

web/src/components/auth/number/style.ts

@@ -24,7 +24,7 @@ export const textFieldWrap = styled.div`
 ` 
 
 export const textField = styled.input`
-  margin-left: 13px;
+  margin-left: 10px;
   width: 90%;
   height: 90%;
   border-radius: 13px;

web/src/components/auth/start/index.tsx

@@ -21,11 +21,11 @@ const Auth = ()=>{
 
     const consumerAuth = ()=>{
         setAuthValid(true);
-        navigate("/login/");
+        navigate("/login");
     }
     const guideAuth = ()=>{
         setAuthValid(false);
-        navigate("/login/");
+        navigate("/login");
 
     }
     return(

web/src/components/profile/index.tsx

@@ -2,11 +2,26 @@ import React, {useState} from 'react';
 import * as S from "./style";
 import headerLogo from "../../assets/headerLogo.svg";
 import userIcon from "../../assets/userIcon.svg";
-import {useLocation} from "react-router-dom";
 import LogoutModal from '../logoutmodal';
+import { useAtom } from "jotai";
+import { authType } from "../../store/authtype/authtype.atom";
+import { useNavigate } from "react-router-dom";
+import cancel from "../../assets/cancel.svg";
 
 const Profile =()=>{
+    const navigate = useNavigate();
     const [modal, setModal]=useState(false);
+    const [AuthValid, setAuthValid] = useAtom(authType);
+    const consumerAuth = ()=>{
+        setAuthValid((prev)=>!prev);
+
+
+    }
+    const name = localStorage.getItem("signupName")
+    const logout=()=>{
+        setModal(true)
+
+    }
 return(
 <>
     <S.main>
@@ -20,9 +35,10 @@ return(
                     justifyContent: 'flex-end',
                 }}>
                     <div style={{display: "flex", flexDirection: "column", width: 304, height: 78}}>
-                        <div style={{display: "flex", flexDirection: "row", width: 98, height: 28, justifyContent: "space-between", alignItems: "flex-end"}}>
+                        <div style={{display: "flex", flexDirection: "row", width: 280, height: 28, justifyContent: "space-between", alignItems: "flex-end"}}>
                             <img src={headerLogo} alt="Logo" style={{width: 26, height: 28, marginLeft: 5}}/>
-                            <text style={{fontSize: 16, fontWeight: '800', color: "#FFA800"}}>의성올래</text>
+                            <text style={{fontSize: 16, fontWeight: '800', color: "#FFA800", marginRight:150}}>의성올래</text>
+                            <img onClick={()=>navigate("/home")} src={cancel} alt="cancel" style={{width: 18, height: 18, marginLeft:8, }} />
                         </div>
                         <div style={{width: 1, height: 25}}></div>
                         <div style={{
@@ -64,14 +80,14 @@ return(
                             <img src={userIcon} alt="img" />
                             <S.profileName>
                                 <div>
-                                <p>이해준</p>
-                                <p>방문객</p>
+                                <p>{AuthValid ? name : "이해준"}</p>
+                                <p>{AuthValid ? "방문객" : "여행안내자"}</p>
                                 </div>
                             </S.profileName>
                         </S.profileUser>
                 </S.profileView>
 
-                <S.logoutButton onClick={()=>setModal(true)}>로그아웃</S.logoutButton>
+                <S.logoutButton onClick={logout}>로그아웃</S.logoutButton>
             </S.mainProfile>
 
 

web/src/components/routers/index.tsx

@@ -17,21 +17,21 @@ import Subscription from "../../page/subscription/index";
 
 const Router=()=>{
     return(
-        <BrowserRouter basename={process.env.PUBLIC_URL}>;
+        <BrowserRouter >
             <Header/>
             <HostHeader/>
             <Routes>
-                <Route path="/sign/" element={<Auth />}/>
-                <Route path = "/hosthome/" element = {<HostHome/>}/>
-                <Route path = "/hostmake/" element = {<HostMake/>}/>
-                <Route path="/signup/" element={<Default/>}/> 
-                <Route path="/login/" element={<Login/>}/>
-                <Route path="/sign/name/" element={<Name/>}/>
-                <Route path="/sign/number/" element={<Number/>}/>
-                <Route path = "hostmain/" element = {<HostHome/>}/>
-                <Route path="/home/" element={<Home />}/>
-                <Route path="/profile/" element={<Profile />}/>
-                <Route path="/search/" element={<Search />}/>
+                <Route path="/sign" element={<Auth />}/>
+                <Route path = "/hosthome" element = {<HostHome/>}/>
+                <Route path = "/hostmake" element = {<HostMake/>}/>
+                <Route path="/signup" element={<Default/>}/> 
+                <Route path="/login" element={<Login/>}/>
+                <Route path="/sign/name" element={<Name/>}/>
+                <Route path="/sign/number" element={<Number/>}/>
+                <Route path = "hostmain" element = {<HostHome/>}/>
+                <Route path="/home" element={<Home />}/>
+                <Route path="/profile" element={<Profile />}/>
+                <Route path="/search" element={<Search />}/>
                 <Route path="/search/question/" element={<SearchQuestion />}/>
                 <Route path="/subscribe/" element={<Subscription />}/>
             </Routes>

web/src/store/user/user.atom.ts

@@ -1,12 +1,13 @@
 import { atom } from "jotai";
 interface User {
     name?: string; 
-    username?: string; 
+    userId?: string; 
     password?: string; 
     phone?: string; 
 }
 
 
+
 export const usersAtom = atom<User[]>([]);
 
 export const currentUserAtom = atom<User | null>(null);