From c7600ffcc2dac40a6fb89ea1556744052da15c60 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 04:05:41 +0900 Subject: [PATCH 1/4] Configure Azure Developer Pipeline --- web/src/components/auth/start/index.tsx | 49 ++++++++++++++++++------- web/src/components/auth/start/style.ts | 39 +++++++++++++++++++- 2 files changed, 73 insertions(+), 15 deletions(-) diff --git a/web/src/components/auth/start/index.tsx b/web/src/components/auth/start/index.tsx index 995d24c..b4729e2 100644 --- a/web/src/components/auth/start/index.tsx +++ b/web/src/components/auth/start/index.tsx @@ -1,24 +1,45 @@ -import React from "react"; +import React, { useState } from "react"; import * as S from "./style"; import Polygon from "../../../assets/Polygon 2.png"; import logo from "../../../assets/logo.svg"; -import { useNavigate } from "react-router-dom"; +import { useNavigate, useSearchParams } from "react-router-dom"; import { useAtom } from "jotai"; import { authType } from "../../../store/authtype/authtype.atom"; +import onBoding from "../../../assets/onBoding.svg"; +import mouth from "../../../assets/mouth.svg"; + + + const Auth = ()=>{ const navigate = useNavigate(); + const [onBoarding, setOnBoarding] = useState(true); const [, setAuthValid] = useAtom(authType); -const consumerAuth = ()=>{ - setAuthValid(true); - navigate("/login"); -} -const guideAuth = ()=>{ - setAuthValid(false); - navigate("/login"); -} + if(onBoarding){ + setTimeout(function(){ + setOnBoarding(false); + }, 3000); + + } + const consumerAuth = ()=>{ + setAuthValid(true); + navigate("/login"); + } + const guideAuth = ()=>{ + setAuthValid(false); + navigate("/login"); + + } return( + <> + {onBoarding ? + + + + + + : @@ -32,16 +53,18 @@ const guideAuth = ()=>{

여행 진행자

- - - + } + + ) + } + export default Auth; \ No newline at end of file diff --git a/web/src/components/auth/start/style.ts b/web/src/components/auth/start/style.ts index 9ae422c..dad4dd6 100644 --- a/web/src/components/auth/start/style.ts +++ b/web/src/components/auth/start/style.ts @@ -1,5 +1,16 @@ -import styled from "styled-components"; +import styled,{keyframes} from "styled-components"; import mainRectangle from "../../assets/Group 3.svg"; +const mouthAni = keyframes` +0%{ + left: 35px; +} +80%{ + transform: matrix(100deg); +} +100%{ + left: 23px; +} +` export const auth = styled.div` position: absolute; @@ -10,7 +21,8 @@ export const auth = styled.div` display: flex; flex-direction: column; align-items: center; - + opacity: 1; + translate: 1s ease-in-out; ` export const main = styled.div` display: flex; @@ -88,4 +100,27 @@ font-weight: 800; line-height: normal; } +` +export const onBordingSrceen =styled.div` +display: flex; +align-items: center; +justify-content: center; +width: 100vw; +height: 100vh; +background-color: #fff; +` +export const Logo = styled.div` +position: relative; +display: flex; +width: 166px; +height: 184px; +` +export const mouthImg = styled.img` +position: absolute; +width: 24.76px; +height: 24.76px; +top: 125px; +animation-name: ${mouthAni}; +animation-duration: 1s; +animation-fill-mode: forwards; ` \ No newline at end of file From f73fdd69b78944a61ab6fbca7456dc0aa06f5c8c 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 04:40:24 +0900 Subject: [PATCH 2/4] =?UTF-8?q?feat=20::=20=EC=98=A8=EB=B3=B4=EB=94=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/src/assets/mouth.svg | 3 +++ web/src/assets/onBoding.svg | 12 ++++++++++++ web/src/components/auth/start/index.tsx | 5 +---- 3 files changed, 16 insertions(+), 4 deletions(-) create mode 100644 web/src/assets/mouth.svg create mode 100644 web/src/assets/onBoding.svg diff --git a/web/src/assets/mouth.svg b/web/src/assets/mouth.svg new file mode 100644 index 0000000..1b28217 --- /dev/null +++ b/web/src/assets/mouth.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/src/assets/onBoding.svg b/web/src/assets/onBoding.svg new file mode 100644 index 0000000..3f2e24d --- /dev/null +++ b/web/src/assets/onBoding.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/web/src/components/auth/start/index.tsx b/web/src/components/auth/start/index.tsx index b4729e2..ec11ab6 100644 --- a/web/src/components/auth/start/index.tsx +++ b/web/src/components/auth/start/index.tsx @@ -8,9 +8,6 @@ import { authType } from "../../../store/authtype/authtype.atom"; import onBoding from "../../../assets/onBoding.svg"; import mouth from "../../../assets/mouth.svg"; - - - const Auth = ()=>{ const navigate = useNavigate(); const [onBoarding, setOnBoarding] = useState(true); @@ -18,7 +15,7 @@ const Auth = ()=>{ if(onBoarding){ setTimeout(function(){ setOnBoarding(false); - }, 3000); + }, 2000); } 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 3/4] 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); From 8c81c632b74ba1eacdff23b9e974552ca89b8434 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:19:18 +0900 Subject: [PATCH 4/4] =?UTF-8?q?fix=20::=20=ED=94=BC=EB=93=9C=EB=B0=B1=20?= =?UTF-8?q?=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/src/components/auth/default/index.tsx | 4 ++-- web/src/components/auth/login/index.tsx | 6 +++--- web/src/components/auth/number/index.tsx | 4 ++-- web/src/components/auth/start/index.tsx | 4 ++-- web/src/components/routers/index.tsx | 21 +++++++++++---------- 5 files changed, 20 insertions(+), 19 deletions(-) diff --git a/web/src/components/auth/default/index.tsx b/web/src/components/auth/default/index.tsx index c830702..10b5189 100644 --- a/web/src/components/auth/default/index.tsx +++ b/web/src/components/auth/default/index.tsx @@ -19,7 +19,7 @@ const Default= () => { username, password })); - navigate("/sign/number"); + navigate("/sign/number/"); }; return ( @@ -47,7 +47,7 @@ const Default= () => { 다음 - navigate("/sign")}>로그인 하러 가기 + navigate("/sign/")}>로그인 하러 가기 diff --git a/web/src/components/auth/login/index.tsx b/web/src/components/auth/login/index.tsx index a924418..455060a 100644 --- a/web/src/components/auth/login/index.tsx +++ b/web/src/components/auth/login/index.tsx @@ -7,7 +7,7 @@ import * as Auth from "../start/style"; import Polygon from "../../../assets/Polygon 2.png"; import logo from "../../../assets/logo.svg"; -const Login: React.FC = () => { +const Login = () => { const navigate = useNavigate(); const [users] = useAtom(usersAtom); const [, setCurrentUser] = useAtom(currentUserAtom); @@ -20,7 +20,7 @@ const Login: React.FC = () => { ); if (user) { setCurrentUser(user); - navigate("/home"); + navigate("/home/"); } else { alert("아이디 또는 비밀번호가 틀렸습니다."); } @@ -51,7 +51,7 @@ const Login: React.FC = () => { 시작 - navigate("/sign/name")}>회원가입 하러 가기 + navigate("/sign/name/")}>회원가입 하러 가기 diff --git a/web/src/components/auth/number/index.tsx b/web/src/components/auth/number/index.tsx index 5babb27..af9c952 100644 --- a/web/src/components/auth/number/index.tsx +++ b/web/src/components/auth/number/index.tsx @@ -22,7 +22,7 @@ const Number = () => { setUsers([...users, newUser]); setCurrentUser(null); - navigate("/login"); + navigate("/login/"); }; return ( @@ -42,7 +42,7 @@ const Number = () => { 회원가입 - navigate("/sign")}>로그인 하러 가기 + navigate("/sign/")}>로그인 하러 가기 diff --git a/web/src/components/auth/start/index.tsx b/web/src/components/auth/start/index.tsx index ec11ab6..e8ea45a 100644 --- a/web/src/components/auth/start/index.tsx +++ b/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( diff --git a/web/src/components/routers/index.tsx b/web/src/components/routers/index.tsx index 0790c54..41f0e60 100644 --- a/web/src/components/routers/index.tsx +++ b/web/src/components/routers/index.tsx @@ -21,16 +21,17 @@ const Router=()=>{ }/> - }/> - }/> - }/> - }/> - }/> - }/> - }/> - }/> - }/> - }/> + }/> + }/> + }/> + }/> + }/> + }/> + }/> + }/> + }/> + }/> + }/> )