DO-SOPT-WEB · se0jinYoon · Nov 11, 2023 · Nov 16, 2023 · Nov 16, 2023 · Nov 16, 2023
diff --git a/week4/SignupLogin/.eslintrc.cjs b/week4/SignupLogin/.eslintrc.cjs
@@ -0,0 +1,20 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
diff --git a/week4/SignupLogin/.gitignore b/week4/SignupLogin/.gitignore
@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+.env
diff --git a/week4/SignupLogin/README.md b/week4/SignupLogin/README.md
@@ -0,0 +1,8 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
diff --git a/week4/SignupLogin/index.html b/week4/SignupLogin/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>❄️서진로그</title>
+  </head>
+  <body>
+    <div id="modal"></div>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/week4/SignupLogin/package.json b/week4/SignupLogin/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "react",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "styled-components": "^6.1.1",
+    "styled-reset": "^4.5.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@vitejs/plugin-react": "^4.0.3",
+    "eslint": "^8.45.0",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "vite": "^4.4.5"
+  }
+}
diff --git a/week4/SignupLogin/public/img/profileImg.jpeg b/week4/SignupLogin/public/img/profileImg.jpeg
diff --git a/week4/SignupLogin/src/App.jsx b/week4/SignupLogin/src/App.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import styled, { ThemeProvider } from 'styled-components';
+
+import GlobalStyle from './styles/GlobalStyle';
+import theme from './styles/theme';
+import Router from './components/Router';
+
+function App() {
+  return (
+    <ThemeProvider theme={theme}>
+      <GlobalStyle />
+        <Router />
+    </ThemeProvider>
+  );
+}
+
+export default App;
diff --git a/week4/SignupLogin/src/api.js b/week4/SignupLogin/src/api.js
@@ -0,0 +1,7 @@
+import axios from "axios";
+
+const API = axios.create({
+  baseURL: import.meta.env.VITE_APP_BASE_URL,
+});
+
+export default API;
diff --git a/week4/SignupLogin/src/assets/constants/constants.js b/week4/SignupLogin/src/assets/constants/constants.js
@@ -0,0 +1,16 @@
+
+
+const SIGNUP_LABEL = ['ID', '비밀번호', '비밀번호 확인', '닉네임'];
+
+const SIGNUP_PLACEHOLDER = [
+  '아이디를 입력해주세요',
+  '비밀번호를 입력해주세요',
+  '비밀번호를 다시 한 번 입력해주세요',
+  '닉네임을 입력해주세요',
+];
+
+const LOGIN_LABEL = ['ID', 'PASSWORD'];
+
+const LOGIN_PLACEHOLDER = ['아이디를 입력해주세요', '비밀번호를 입력해주세요'];
+
+export {SIGNUP_LABEL, SIGNUP_PLACEHOLDER, LOGIN_LABEL, LOGIN_PLACEHOLDER};
diff --git a/week4/SignupLogin/src/components/Layout/BtnWrapper.jsx b/week4/SignupLogin/src/components/Layout/BtnWrapper.jsx
@@ -0,0 +1,22 @@
+import React from "react";
+import styled from 'styled-components';
+
+const BtnWrapper = (props) => {
+    return(
+        <Wrapper>{props.children}</Wrapper>
+    )
+}
+
+export default BtnWrapper;
+
+const Wrapper = styled.section`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem 0;
+
+    margin-top: 1rem;
+
+    width: 100%;
+`
+
diff --git a/week4/SignupLogin/src/components/Layout/ContentWrapper.jsx b/week4/SignupLogin/src/components/Layout/ContentWrapper.jsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const ContentWrapper = (props, {children}) => {
+    return (
+        <Wrapper onSubmit={props.onSubmit}>
+            <Header>{props.header}</Header>
+            {props.children}
+        </Wrapper>
+    )
+}
+
+export default ContentWrapper;
+
+const Wrapper = styled.form`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 2rem;
+
+  width: 34rem;
+  padding: 3rem 2rem;
+
+  border: 1px solid ${({theme}) => theme.colors.gray};
+  border-radius: 1rem;
+  background-color: ${({theme}) => theme.colors.white};
+`
+
+const Header = styled.header`
+    font-size: 2rem;
+`
diff --git a/week4/SignupLogin/src/components/Layout/InputWrapper.jsx b/week4/SignupLogin/src/components/Layout/InputWrapper.jsx
@@ -0,0 +1,19 @@
+import React from "react";
+import styled from 'styled-components';
+
+import Input from "../UI/Input";
+
+const InputWrapper = (props) => {
+    return <Wrapper>{props.children}</Wrapper>
+}
+
+export default InputWrapper;
+
+const Wrapper = styled.section`
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+
+    width: 100%;
+    margin-top: 1rem;
+`
diff --git a/week4/SignupLogin/src/components/Pages/Login.jsx b/week4/SignupLogin/src/components/Pages/Login.jsx
@@ -0,0 +1,115 @@
+import React, { useState, useReducer, useContext } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { createPortal } from 'react-dom';
+import styled from 'styled-components';
+
+import { LOGIN_LABEL, LOGIN_PLACEHOLDER } from '../../assets/constants/constants';
+import API from '../../api';
+
+import ContentWrapper from '../Layout/ContentWrapper';
+import InputWrapper from '../Layout/InputWrapper';
+import BtnWrapper from '../Layout/BtnWrapper';
+import Input from '../UI/Input';
+import ErrorToast from '../UI/ErrorToast';
+
+const initialState = {
+  id: '',
+  password: '',
+};
+
+const reducerFn = (state, action) => {
+  switch (action.type) {
+    case 'ID':
+      return {
+        ...state,
+        id: action.value,
+      };
+    case 'PASSWORD':
+      return {
+        ...state,
+        password: action.value,
+      };
+  }
+};
+
+const portalElement = document.getElementById('modal');
+
+const Login = () => {
+  // 로그인 폼 입력값
+  const [inputVal, dispatch] = useReducer(reducerFn, initialState);
+  // 토스트 모달 
+  const [toastState, setToastState] = useState({
+    message: '',
+    flag: false,
+  });
+  const navigate = useNavigate();
+
+  // 회원가입으로 이동
+  const onClickSignup = () => {
+    navigate('/signup');
+  };
+
+  // 아이디, 비밀번호 업데이트
+  const onChangeHandler = (e) => {
+    dispatch({ type: e.target.name, value: e.target.value });
+  };
+
+  // 로그인 요청
+  const onLoginSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      const response = await API.post(
+        `api/v1/members/sign-in`,
+        {
+          username: `${inputVal.id}`,
+          password: `${inputVal.password}`,
+        },
+        {
+          header: {
+            'Content-Type': 'application/json',
+          },
+        }
+      );
+      const userInfo = response.data;
+      navigate(`/mypage/${userInfo.id}`);
+    } catch (error) {
+      setToastState({ message: error.response.data.message, flag: true });
+    }
+  };
+
+  return (
+    <ContentWrapper header={'로그인'} onSubmit={onLoginSubmit}>
+      <InputWrapper>
+        {LOGIN_LABEL.map((label, idx) => (
+          <Input key={idx} label={label} placeholder={LOGIN_PLACEHOLDER[idx]} onChange={onChangeHandler} />
+        ))}
+      </InputWrapper>
+
+      <BtnWrapper>
+        <LoginBtn $login={true} type="submit">로그인</LoginBtn>
+        <LoginBtn $login={false} type="button" onClick={onClickSignup}>
+          회원가입
+        </LoginBtn>
+      </BtnWrapper>
+      {toastState.flag
+        ? createPortal(<ErrorToast setToastState={setToastState}>{toastState.message}</ErrorToast>, portalElement)
+        : null}
+    </ContentWrapper>
+  );
+};
+
+export default Login;
+
+const LoginBtn = styled.button`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  padding: 0.8rem;
+  width: 100%;
+
+  font-size: 17px;
+  font-weight: bold;
+  background-color: ${({ $login, theme }) => ($login? theme.colors.darkGreen : theme.colors.darkIvory)};
+  color: ${({ $login, theme }) => ($login? theme.colors.ivory : theme.colors.brown)};
+`;