DO-SOPT-WEB · nayujin-dev · Nov 17, 2023 · Nov 17, 2023 · Nov 17, 2023 · Nov 17, 2023
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,25 @@
+.env
+# 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?
diff --git a/assignment/thinking.md → assignment/week01/thinking.md b/assignment/thinking.md → assignment/week01/thinking.md
diff --git a/assignment/week04/login-project/.eslintrc.cjs b/assignment/week04/login-project/.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/assignment/week04/login-project/.gitignore b/assignment/week04/login-project/.gitignore
@@ -0,0 +1,25 @@
+.env
+# 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?
diff --git a/assignment/week04/login-project/README.md b/assignment/week04/login-project/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/assignment/week04/login-project/index.html b/assignment/week04/login-project/index.html
@@ -0,0 +1,13 @@
+<!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>week04 과제</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/assignment/week04/login-project/package.json b/assignment/week04/login-project/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "login-project",
+  "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"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "@vitejs/plugin-react": "^4.2.0",
+    "eslint": "^8.53.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.4",
+    "vite": "^5.0.0"
+  }
+}
diff --git a/assignment/week04/login-project/public/vite.svg b/assignment/week04/login-project/public/vite.svg
diff --git a/assignment/week04/login-project/src/App.jsx b/assignment/week04/login-project/src/App.jsx
@@ -0,0 +1,17 @@
+import GlobalStyle from "./styles/GlobalStyle";
+import Router from "./components/Router";
+import { ThemeProvider } from "styled-components";
+import theme from "./styles/theme";
+
+function App() {
+  return (
+    <>
+      <ThemeProvider theme={theme}>
+        <GlobalStyle />
+        <Router />
+      </ThemeProvider>
+    </>
+  );
+}
+
+export default App;
diff --git a/assignment/week04/login-project/src/assets/5.jpg b/assignment/week04/login-project/src/assets/5.jpg
diff --git a/assignment/week04/login-project/src/assets/react.svg b/assignment/week04/login-project/src/assets/react.svg
diff --git a/assignment/week04/login-project/src/components/Router.jsx b/assignment/week04/login-project/src/components/Router.jsx
@@ -0,0 +1,19 @@
+import React from "react";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import Login from "../pages/Login";
+import Signup from "../pages/Signup";
+import Mypage from "../pages/Mypage";
+
+const Router = () => {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/login" element={<Login />} />
+        <Route path="/signup" element={<Signup />} />
+        <Route path="/mypage/:userId" element={<Mypage />} />
+      </Routes>
+    </BrowserRouter>
+  );
+};
+
+export default Router;
diff --git a/assignment/week04/login-project/src/main.jsx b/assignment/week04/login-project/src/main.jsx
@@ -0,0 +1,9 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/assignment/week04/login-project/src/pages/Login.jsx b/assignment/week04/login-project/src/pages/Login.jsx
@@ -0,0 +1,69 @@
+import axios from "axios";
+import React, { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { St } from "../styles/Design";
+
+const Login = () => {
+  const navigate = useNavigate();
+  const [id, setId] = useState("");
+  const [password, setPassword] = useState("");
+  const onIdChange = (e) => {
+    setId(e.target.value.toString());
+  };
+  const onPasswordChange = (e) => {
+    setPassword(e.target.value.toString());
+  };
+  const onRegisterBtnClick = () => {
+    navigate("/signup");
+  };
+  const onLoginBtnClick = () => {
+    try {
+      axios
+        .post(`${import.meta.env.VITE_BASE_URL}/api/v1/members/sign-in`, {
+          username: id,
+          password: password,
+        })
+        .then((res) => {
+          navigate(`/mypage/${res.data.id}`);
+        });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  return (
+    <St.ModalContainer>
+      <St.ModalBox>
+        <St.ModalTitle>Login</St.ModalTitle>
+        <St.InputContainer>
+          <St.InputCategory>ID</St.InputCategory>
+          <St.InputBox
+            required
+            placeholder="아이디를 입력해주세요"
+            onChange={onIdChange}
+          ></St.InputBox>
+        </St.InputContainer>
+        <St.InputContainer>
+          <St.InputCategory>PASSWORD</St.InputCategory>
+          <St.InputBox
+            placeholder="비밀번호를 입력해주세요"
+            required
+            onChange={onPasswordChange}
+          ></St.InputBox>
+        </St.InputContainer>
+        <St.ButtonContainer>
+          <St.SubmitButton type="button" onClick={onLoginBtnClick}>
+            로그인
+          </St.SubmitButton>
+          <Link to={"/signup"}>
+            <St.RegisterButton type="button">회원가입</St.RegisterButton>
+          </Link>
+          {/* <St.RegisterButton onClick={onRegisterBtnClick}>
+            회원가입
+          </St.RegisterButton> */}
+        </St.ButtonContainer>
+      </St.ModalBox>
+    </St.ModalContainer>
+  );
+};
+
+export default Login;
diff --git a/assignment/week04/login-project/src/pages/Mypage.jsx b/assignment/week04/login-project/src/pages/Mypage.jsx
@@ -0,0 +1,50 @@
+import axios from "axios";
+import React, { useEffect, useState } from "react";
+import { Link, useNavigate, useParams } from "react-router-dom";
+import { St } from "../styles/Design";
+import img from "../assets/5.jpg";
+const Mypage = () => {
+  const { userId } = useParams();
+  const navigate = useNavigate();
+  const [username, setUserName] = useState("");
+  const [nickname, setNickName] = useState("");
+  useEffect(() => {
+    userId !== "" && getUserInfo();
+  }, [userId]);
+  const getUserInfo = () => {
+    try {
+      axios
+        .get(`${import.meta.env.VITE_BASE_URL}/api/v1/members/${userId}`)
+        .then((response) => {
+          setUserName(response.data.username);
+          setNickName(response.data.nickname);
+        });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  const onLogoutBtnClick = () => {
+    navigate("/login");
+  };
+  return (
+    <St.ModalContainer>
+      <St.ModalBox>
+        <St.ModalTitle>MY PAGE</St.ModalTitle>
+        <St.UserInfoContainer>
+          <St.UserProfile src={img} alt="profile" />
+          <St.UserInfoBox>
+            <St.UserInfo>ID : {username}</St.UserInfo>
+            <St.UserInfo>닉네임 : {nickname}</St.UserInfo>
+          </St.UserInfoBox>
+        </St.UserInfoContainer>
+        <St.ButtonContainer>
+          <St.SubmitButton type="button" onClick={onLogoutBtnClick}>
+            로그아웃
+          </St.SubmitButton>
+        </St.ButtonContainer>
+      </St.ModalBox>
+    </St.ModalContainer>
+  );
+};
+
+export default Mypage;