DO-SOPT-WEB · namdaeun · Nov 14, 2023 · Nov 14, 2023 · Nov 14, 2023 · Nov 15, 2023
diff --git a/Week4/LoginAndSignup/index.html b/Week4/LoginAndSignup/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>로그인 & 회원가입</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <div id="toast"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/Week4/LoginAndSignup/src/App.css b/Week4/LoginAndSignup/src/App.css
diff --git a/Week4/LoginAndSignup/src/App.jsx b/Week4/LoginAndSignup/src/App.jsx
@@ -0,0 +1,15 @@
+import Router from './components/Router';
+import './App.css'
+import { GlobalStyle } from './style/GlobalStyle';
+
+function App() {
+
+  return (
+    <>
+      <GlobalStyle />
+      <Router />
+    </>
+  )
+}
+
+export default App
diff --git a/Week4/LoginAndSignup/src/assets/profile/profile.png b/Week4/LoginAndSignup/src/assets/profile/profile.png
diff --git a/Week4/LoginAndSignup/src/components/Router.jsx b/Week4/LoginAndSignup/src/components/Router.jsx
@@ -0,0 +1,18 @@
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import SignUp from '../pages/SignUp/SignUp';
+import Login from '../pages/Login/Login';
+import MyPage from '../pages/MyPage/MyPage';
+
+const Router = () => {
+    return (
+        <BrowserRouter>
+            <Routes>
+                <Route path='/signup' element={<SignUp />} />
+                <Route path='/login' element={<Login />} />
+                <Route path='/mypage/:userId' element={<MyPage />} />
+            </Routes>
+        </BrowserRouter>
+    );
+};
+
+export default Router;
diff --git a/Week4/LoginAndSignup/src/components/Toast.jsx b/Week4/LoginAndSignup/src/components/Toast.jsx
@@ -0,0 +1,32 @@
+import { useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import styled from 'styled-components';
+
+const Toast = ({ error, setError, errMessage }) => {
+    useEffect(() => {
+        setTimeout(() => {
+            setError(false);
+        }, 2000);
+    }, [error]);
+
+    return createPortal(
+        <ToastWrapper>
+            <ToastMessage>{errMessage}</ToastMessage>
+        </ToastWrapper>, document.getElementById("toast")
+    );
+};
+
+export default Toast;
+
+const ToastWrapper = styled.div`
+    background-color: var(--color-bg);
+    position: fixed;
+    bottom: 11rem;
+    right: 25rem;
+    padding: 0.6rem;
+    border-radius: 1rem;
+`;
+
+const ToastMessage = styled.div`
+    color: black;
+`;
diff --git a/Week4/LoginAndSignup/src/index.css b/Week4/LoginAndSignup/src/index.css
diff --git a/Week4/LoginAndSignup/src/main.jsx b/Week4/LoginAndSignup/src/main.jsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
diff --git a/Week4/LoginAndSignup/src/pages/Login/Login.jsx b/Week4/LoginAndSignup/src/pages/Login/Login.jsx
@@ -0,0 +1,78 @@
+import { useState } from 'react';
+import * as S from './style';
+import axios from "axios";
+import Toast from '../../components/Toast';
+import { useNavigate } from 'react-router-dom';
+
+const Login = () => {
+    const [username, setUsername] = useState("");
+    const [password, setPassword] = useState("");
+    const [error, setError] = useState(false);
+    const [errMessage, setErrMessage] = useState("");
+    const navigate = useNavigate();
+    const saveUsername = (event) => {
+        setUsername(event.target.value);
+    };
+
+    const savePassword = (event) => {
+        setPassword(event.target.value);
+    };
+
+    const moveSignupPage = () => {
+        navigate(`/signup`);
+    };
+
+    const getData = async () => {
+        try {
+            const res = await axios.post(`${import.meta.env.VITE_BASE_URL}/api/v1/members/sign-in`, {
+                username: username,
+                password: password,
+            })
+            console.log("✨성공🤩✨");
+            console.log(`아이디 : ${res.data.username}`);
+            console.log(`비번 : ${res.data.password}`);
+            navigate(`/mypage/${res.data.id}`);
+        } catch (err) {
+            setError(true);
+            setErrMessage(err.response.data.message);
+        }
+    };
+
+    return (
+        <>
+            <S.Container>
+                <S.InputContainer>
+                    <S.PageTitle>Login</S.PageTitle>
+                    <S.Field className='id-field'>ID</S.Field>
+                    <input
+                        type="text"
+                        size="25"
+                        placeholder="아이디를 입력해주세요"
+                        value={username}
+                        onChange={saveUsername} />
+                    <S.Field className='pw-field'>PASSWORD</S.Field>
+                    <input
+                        type="text"
+                        size="25"
+                        placeholder="비밀번호를 입력해주세요"
+                        value={password}
+                        onChange={savePassword} />
+                </S.InputContainer>
+                <S.ButtonContainer>
+                    <S.Button type="button" onClick={getData}>로그인</S.Button>
+                    <S.SignUpBtn type="button" onClick={moveSignupPage}>회원가입</S.SignUpBtn>
+                </S.ButtonContainer>
+            </S.Container>
+            {error ?
+                <Toast
+                    error={error}
+                    setError={setError}
+                    errMessage={errMessage}
+                ></Toast>
+                : null
+            }
+        </>
+    );
+};
+
+export default Login;
diff --git a/Week4/LoginAndSignup/src/pages/Login/style.js b/Week4/LoginAndSignup/src/pages/Login/style.js
@@ -0,0 +1,77 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+    width: 23rem;
+    height: 25rem;
+    background-color: var(--color-bg);
+    border-radius: 1rem;
+    display: inline-block;
+    flex-direction: column;
+    box-shadow: 12px 15px 63px -1px rgba(0,0,0,0.81);
+    -webkit-box-shadow: 12px 15px 63px -1px rgba(0,0,0,0.81);
+    -moz-box-shadow: 12px 15px 63px -1px rgba(0,0,0,0.81);
+`;
+
+export const PageTitle = styled.h3`
+    text-align: center;
+    font-size: 1.5rem;
+    font-weight: bold;
+    padding: 2rem;
+    margin-bottom: 1rem;
+    color: var(--color-accent);
+`;
+
+export const InputContainer = styled.div`
+    line-height: 40px;  
+`;
+
+export const ButtonContainer = styled.div`
+    display: block;
+    margin-left: 4rem;
+    margin-top: 3rem;
+`;
+
+export const Field = styled.div`
+    display: inline;
+    margin-right: 1.5rem;
+    margin-left: 2rem;
+    &.id-field {
+        margin-right: 6rem;
+    }
+    &.pwd-field {
+        margin-right: 3.5rem;
+    }
+`;
+
+export const Button = styled.button`
+    display: block;
+    width: 70%;
+    margin: 1rem;
+    padding: 0.4rem;
+    border-radius: 0.5rem;
+    font-weight: bold;
+    border: solid;
+    background-color: var(--color-button-bg);
+    color: var(--color-accent);
+    &:hover {
+        background-color: var(--color-accent);
+        color: var(--color-button-bg);
+        font-weight: bold;
+    }
+`;
+
+export const SignUpBtn = styled.button`
+    display: block;
+    width: 70%;
+    margin: 1rem;
+    padding: 0.4rem;
+    border-radius: 0.5rem;
+    font-weight: bold;
+    border: solid;
+    text-align: center;
+    &:hover {
+        background-color: #000000;
+        color: #FF1493;
+        font-weight: bold;
+    }
+`;
diff --git a/Week4/LoginAndSignup/src/pages/MyPage/MyPage.jsx b/Week4/LoginAndSignup/src/pages/MyPage/MyPage.jsx
@@ -0,0 +1,48 @@
+import { useNavigate, useParams } from 'react-router-dom';
+import axios from "axios";
+import * as S from './style';
+import { useState } from 'react';
+import profileImg from "../../assets/profile/profile.png";
+
+const MyPage = () => {
+    const { userId } = useParams();
+    const navigate = useNavigate();
+    const [username, setUsername] = useState("");
+    const [nickname, setNickname] = useState("");
+
+    const moveLoginPage = () => {
+        navigate(`/login`);
+    };
+
+    const getLoginData = async () => {
+        try {
+            axios.get(`${import.meta.env.VITE_BASE_URL}/api/v1/members/${userId}`, {
+                userId: userId,
+            }).then((response) => {
+                setUsername(response.data.username);
+                setNickname(response.data.nickname);
+                console.log("✨🔥성공🔥✨");
+
+            })
+        } catch (err) {
+            console.log(err);
+        }
+    };
+    getLoginData();
+
+    return (
+        <S.Container>
+            <S.PageTitle>MY PAGE</S.PageTitle>
+            <S.Profile src={profileImg} />
+            <S.TextArea>
+                ID : {username}
+            </S.TextArea>
+            <S.TextArea>
+                닉네임 : {nickname}
+            </S.TextArea>
+            <S.Button type="button" onClick={moveLoginPage}>로그아웃</S.Button>
+        </S.Container>
+    );
+};
+
+export default MyPage;
diff --git a/Week4/LoginAndSignup/src/pages/MyPage/style.js b/Week4/LoginAndSignup/src/pages/MyPage/style.js
@@ -0,0 +1,50 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+    width: 23rem;
+    height: 20rem;
+    line-height: 40px;
+    background-color: var(--color-bg);
+    border-radius: 1rem;
+    display: inline-block;
+    flex-direction: column;
+    -webkit-box-shadow: 0px 0px 17px 1px rgba(93,93,93,0.72); 
+    box-shadow: 0px 0px 17px 1px rgba(93,93,93,0.72);
+`;
+
+export const PageTitle = styled.h3`
+    text-align: center;
+    font-size: 1.5rem;
+    padding: 2rem;
+    font-weight: bold;
+    padding-bottom: 0;
+`;
+
+export const TextArea = styled.div`
+    text-align: center;
+    background-color: var(--color-light-pink);
+    font-size: 1rem;
+    font-weight: bold;
+    padding: 0.2rem;
+`;
+
+export const Profile = styled.img`
+    width: 4rem;
+    height: auto;
+    margin-left: 9.5rem;
+`;
+
+export const Button = styled.button`
+    display: block;
+    width: 70%;
+    margin-left: 3.5rem;
+    margin-top: 1.5rem;
+    padding: 0.4rem;
+    border-radius: 0.5rem;
+    border: solid;
+    &:hover {
+        background-color: var(--color-button-bg);
+        color: var(--color-light-pink);
+        font-weight: bold;
+    }
+`;