Skip to content
This repository has been archived by the owner on Aug 28, 2024. It is now read-only.

Commit

Permalink
feat 온보딩
Browse files Browse the repository at this point in the history 
Origin/hae
  • Loading branch information
@ftery0
ftery0 authored Aug 26, 2024
2 parents d121440 + 8c81c63 commit 1ee0dc5
Show file tree
Hide file tree
Showing 10 changed files with 292 additions and 166 deletions.
3 changes: 3 additions & 0 deletions web/src/assets/mouth.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 12 additions & 0 deletions web/src/assets/onBoding.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
85 changes: 48 additions & 37 deletions web/src/components/auth/default/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -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(
<S.login>
<Auth.main>
<S.loginText>
const [, setCurrentUser] = useAtom(currentUserAtom);
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");

const handleNext = () => {
setCurrentUser((prev) => ({
...prev,
username,
password
}));
navigate("/sign/number/");
};

return (
<S.login>
<Auth.main>
<Auth.loginText>
<h2>안녕하세요</h2>
</S.loginText>
</Auth.loginText>
<S.buttonMain>
<S.textFieldWrap>
<S.textField placeholder="아이디를 입력해주세요" />
<S.textFieldWrap>
<S.textField
placeholder="아이디를 입력해주세요"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
</S.textFieldWrap>
<S.textFieldWrap>
<S.textField type="password" placeholder="비밀번호를 입력해주세요" />
<S.textField
type="password"
placeholder="비밀번호를 입력해주세요"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
</S.textFieldWrap>
<S.bottomWarp>
<S.startButton onClick={()=>navigate("/sign/number")}>다음</S.startButton>
<S.navText>

<span onClick={()=>navigate("/sign")}>로그인 하러 가기</span>
</S.navText>
<S.startButton onClick={handleNext}>다음</S.startButton>
<S.navText>
<span onClick={() => navigate("/sign/")}>로그인 하러 가기</span>
</S.navText>
</S.bottomWarp>
</S.buttonMain>

<img src={Polygon}></img>
<img src={Polygon} alt="Polygon" />
</Auth.main>
<Auth.logoMain>
<Auth.logo src={logo}>

</Auth.logo>
<Auth.logo src={logo} alt="Logo" />
</Auth.logoMain>
</S.login>
)
}
export default Default
</S.login>
);
};

export default Default;
84 changes: 51 additions & 33 deletions web/src/components/auth/login/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 = () => {
const navigate = useNavigate();
const [AuthValid, setAuthValid] = useAtom(authType);
const consumerAuth = ()=>{
setAuthValid((prev)=>!prev);
}
return(
<S.login>
<Auth.main>
<S.loginText>
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 (
<S.login>
<Auth.main>
<S.loginText>
<h2>반가워요!</h2>
</S.loginText>
<S.buttonMain>
<S.textFieldWrap>
<S.textField placeholder="아이디를 입력해주세요" />
<S.textField
placeholder="아이디를 입력해주세요"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
</S.textFieldWrap>
<S.textFieldWrap >
<S.textField type="password" placeholder="비밀번호를 입력해주세요" />
<S.textFieldWrap>
<S.textField
type="password"
placeholder="비밀번호를 입력해주세요"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
</S.textFieldWrap>
<S.bottomWarp>
<S.startButton onClick={()=>navigate("/home")}>시작</S.startButton>
<S.navText>
{AuthValid ? <span onClick={consumerAuth}>사용자 로그인 하러 가기</span> : <span onClick={consumerAuth}>지자체 로그인 하러 가기</span>}
<span onClick={()=>navigate("/sign/name")}>회원가입 하러 가기</span>
</S.navText>
<S.startButton onClick={handleLogin}>시작</S.startButton>
<S.navText>
<span onClick={() => navigate("/sign/name/")}>회원가입 하러 가기</span>
</S.navText>
</S.bottomWarp>

</S.buttonMain>

<img src={Polygon}></img>
<img src={Polygon} alt="Polygon" />
</Auth.main>
<Auth.logoMain>
<Auth.logo src={logo}>

</Auth.logo>
<Auth.logo src={logo} alt="Logo" />
</Auth.logoMain>
</S.login>
)
}
export default Login
</S.login>
);
};

export default Login;
73 changes: 39 additions & 34 deletions web/src/components/auth/name/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -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(
<S.login>
<Auth.main>
<Auth.loginText>
const [, setCurrentUser] = useAtom(currentUserAtom);
const [name, setName] = useState("");

const handleNext = () => {
setCurrentUser((prev) => ({
...prev,
name
}));
navigate("/signup");
};

return (
<S.login>
<Auth.main>
<Auth.loginText>
<h2>안녕하세요</h2>
</Auth.loginText>
<S.buttonMain>
<S.textFieldWrap>
<S.textField placeholder="이름을 입력해주세요" />
<S.textFieldWrap>
<S.textField
placeholder="이름을 입력해주세요"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</S.textFieldWrap>
<S.bottomWarp>
<S.startButton onClick={()=>navigate("/signup")}>다음</S.startButton>
<S.navText>
<span onClick={()=>navigate("/sign")}>로그인 하러 가기</span>
</S.navText>
<S.startButton onClick={handleNext}>다음</S.startButton>
<S.navText>
<span onClick={() => navigate("/sign")}>로그인 하러 가기</span>
</S.navText>
</S.bottomWarp>
</S.buttonMain>

<img src={Polygon}></img>
<img src={Polygon} alt="Polygon" />
</Auth.main>
<Auth.logoMain>
<Auth.logo src={logo}>

</Auth.logo>
<Auth.logo src={logo} alt="Logo" />
</Auth.logoMain>
</S.login>
)
}
export default Name
</S.login>
);
};

export default Name;
Loading

0 comments on commit 1ee0dc5

Please sign in to comment.