DO-SOPT-WEB · doyn511 · Nov 14, 2023 · Nov 15, 2023 · Nov 16, 2023 · Nov 16, 2023
diff --git a/.gitignore b/.gitignore
@@ -1 +1,28 @@
-.DS_Store
+.DS_Store
+
+# 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/assignment/.eslintrc.cjs b/week4/assignment/.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/assignment/.gitignore b/week4/assignment/.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/assignment/README.md b/week4/assignment/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/assignment/index.html b/week4/assignment/index.html
@@ -0,0 +1,12 @@
+<!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>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/week4/assignment/package.json b/week4/assignment/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "assignment",
+  "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": {
+    "axios": "^1.6.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.18.0"
+  },
+  "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/assignment/src/App.jsx b/week4/assignment/src/App.jsx
@@ -0,0 +1,15 @@
+// import Router from "./components/Router";
+import LogInPage from "./pages/login/LoginPage";
+import MyPage from "./pages/mypage/MyPage";
+import SignUp from "./pages/signup/SignupPage";
+import Router from "./Router";
+
+function App() {
+  return (
+    <>
+      <Router />
+    </>
+  );
+}
+
+export default App;
diff --git a/week4/assignment/src/Router.jsx b/week4/assignment/src/Router.jsx
@@ -0,0 +1,22 @@
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import MainPage from "./pages/main/MainPage";
+import LogIn from "./pages/login/LoginPage";
+import SignUp from "./pages/signup/SignupPage";
+import MyPage from "./pages/mypage/MyPage";
+
+function Router() {
+  return (
+    <>
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<MainPage />} />
+          <Route path="/login" element={<LogIn />} />
+          <Route path="/signup" element={<SignUp />}></Route>
+          <Route path="/mypage/:userId" element={<MyPage />}></Route>
+        </Routes>
+      </BrowserRouter>
+    </>
+  );
+}
+
+export default Router;
diff --git a/week4/assignment/src/assets/DATA.js b/week4/assignment/src/assets/DATA.js
@@ -0,0 +1,29 @@
+export const TypeList = [
+  {
+    key: "ID",
+    title: "ID",
+    type: "text",
+    placeholder: "아이디를 입력해주세요",
+  },
+  {
+    key: "Password",
+    title: "비밀번호",
+    type: "text",
+    placeholder: "비밀번호를 입력해주세요",
+  },
+  {
+    key: "ConfirmPassword",
+    title: "비밀번호 확인",
+    type: "text",
+    placeholder: "비밀번호를 다시 한 번 입력해주세요",
+  },
+  {
+    key: "Nickname",
+    title: "닉네임",
+    type: "text",
+    placeholder: "닉네임을 입력해주세요",
+  },
+];
+
+export const Profile =
+  "https://mblogthumb-phinf.pstatic.net/MjAyMjEwMjRfMjMy/MDAxNjY2NTQxNTAzMzI5.xQSPMKxEVSKTshiz7jCMBkKoHZcKWN7DPiSY5uFXj-4g.UrtqDuXKmjWV5delpGbQQ_JIiexPpsMQAEpnIKa304Eg.JPEG.gogoa25/IMG_7098.JPG?type=w800";
diff --git a/week4/assignment/src/components/common/idCheckBtn.jsx b/week4/assignment/src/components/common/idCheckBtn.jsx
@@ -0,0 +1,39 @@
+import styled from "styled-components";
+
+const IdCheckBtn = ({ onClick, isIdValid }) => {
+  return (
+    <>
+      {isIdValid === null && <Button onClick={onClick}>중복 체크</Button>}
+      {isIdValid === true && (
+        <IsValidBtn onClick={onClick}>중복 체크</IsValidBtn>
+      )}
+      {isIdValid === false && (
+        <IsNotValidBtn onClick={onClick}>중복 체크</IsNotValidBtn>
+      )}
+    </>
+  );
+};
+
+export default IdCheckBtn;
+
+const Button = styled.button`
+  width: 5.5rem;
+  height: 2.2rem;
+
+  padding: 0.3rem;
+
+  border: none;
+
+  background-color: #000000;
+  color: #ffffff;
+
+  cursor: pointer;
+`;
+
+const IsValidBtn = styled(Button)`
+  background-color: #23ac21;
+`;
+
+const IsNotValidBtn = styled(Button)`
+  background-color: #f75757;
+`;
-  return (
-    <>
-      {isIdValid === null && <Button onClick={onClick}>중복 체크</Button>}
-      {isIdValid === true && (
-        <IsValidBtn onClick={onClick}>중복 체크</IsValidBtn>
-      )}
-      {isIdValid === false && (
-        <IsNotValidBtn onClick={onClick}>중복 체크</IsNotValidBtn>
-      )}
-    </>
-  );
-};
-
-export default IdCheckBtn;
-
-const Button = styled.button`
-  width: 5.5rem;
-  height: 2.2rem;
-
-  padding: 0.3rem;
-
-  border: none;
-
-  background-color: #000000;
-  color: #ffffff;
-
-  cursor: pointer;
-`;
-
-const IsValidBtn = styled(Button)`
-  background-color: #23ac21;
-`;
-
-const IsNotValidBtn = styled(Button)`
-  background-color: #f75757;
-`;
+  return (
+    <>
+      <IsValidButton isValid={isValid} onClick={onClick}>중복 체크</IsValidButton>
+    </>
+  );
+};
+
+export default IdCheckBtn;
+
+const IsValidButton = styled.button`
+  width: 5.5rem;
+  height: 2.2rem;
+
+  padding: 0.3rem;
+
+  border: none;
+
+  background-color: ${({ isValid, theme} => isValid == null ?  theme.color.black : isValid ? theme.color.green: theme.color.red)}
+
+  cursor: pointer;
+`;
+
+
-  return (
-    <>
-      {isIdValid === null && <Button onClick={onClick}>중복 체크</Button>}
-      {isIdValid === true && (
-        <IsValidBtn onClick={onClick}>중복 체크</IsValidBtn>
-      )}
-      {isIdValid === false && (
-        <IsNotValidBtn onClick={onClick}>중복 체크</IsNotValidBtn>
-      )}
-    </>
-  );
-};
-
-export default IdCheckBtn;
-
-const Button = styled.button`
-  width: 5.5rem;
-  height: 2.2rem;
-
-  padding: 0.3rem;
-
-  border: none;
-
-  background-color: #000000;
-  color: #ffffff;
-
-  cursor: pointer;
-`;
-
-const IsValidBtn = styled(Button)`
-  background-color: #23ac21;
-`;
-
-const IsNotValidBtn = styled(Button)`
-  background-color: #f75757;
-`;
+  return (
+    <>
+      <IsValidButton isValid={isValid} onClick={onClick}>중복 체크</IsValidButton>
+    </>
+  );
+};
+
+export default IdCheckBtn;
+
+const IsValidButton = styled.button`
+  width: 5.5rem;
+  height: 2.2rem;
+
+  padding: 0.3rem;
+
+  border: none;
+
+  background-color: ${({ isValid, theme} => isValid == null ?  theme.color.black : isValid ? theme.color.green: theme.color.red)}
+
+  cursor: pointer;
+`;
+
+
diff --git a/week4/assignment/src/components/common/input.jsx b/week4/assignment/src/components/common/input.jsx
@@ -0,0 +1,34 @@
+import styled from "styled-components";
+
+const PerInput = ({ title, type, placeholder, value, onChange, disabled }) => {
-const PerInput = ({ title, type, placeholder, value, onChange, disabled }) => {
+const PerInput = ({ title, type, placeholder, value, onChange, disabled }) => {
+CONST PerInput = (props) => {
+const {title, type, placeholder, value, onChange, disabled}= props
-const PerInput = ({ title, type, placeholder, value, onChange, disabled }) => {
+const PerInput = ({ title, type, placeholder, value, onChange, disabled }) => {
+CONST PerInput = (props) => {
+const {title, type, placeholder, value, onChange, disabled}= props
+  return (
+    <InputWrapper>
+      <Title>{title}</Title>
+      <Input
+        type={type}
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+        disabled={disabled}
+      />
+    </InputWrapper>
+  );
+};
+
+export default PerInput;
+
+const InputWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const Title = styled.h2`
+  font-size: 1.1rem;
+`;
+
+const Input = styled.input`
+  width: 60%;
+  height: 1.5rem;
+  padding: 0.3rem;
+`;
diff --git a/week4/assignment/src/components/common/loginBtn.jsx b/week4/assignment/src/components/common/loginBtn.jsx
@@ -0,0 +1,17 @@
+import styled from "styled-components";
+import { Btn } from "../../styles/CommonStyle";
+
+const LoginBtn = ({ onClick }) => {
+  return (
+    <>
+      <Button onClick={onClick}>로그인</Button>
+    </>
+  );
+};
+
+export default LoginBtn;
+
+const Button = styled(Btn)`
+  background-color: #030046;
+  color: #ffffff;
+`;
diff --git a/week4/assignment/src/main.jsx b/week4/assignment/src/main.jsx
@@ -0,0 +1,9 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.jsx";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/week4/assignment/src/pages/login/loginPage.jsx b/week4/assignment/src/pages/login/loginPage.jsx
@@ -0,0 +1,71 @@
+import axios from "axios";
+import styled from "styled-components";
+import PerInput from "../../components/common/input";
+import { Wrapper, Title, Btn } from "../../styles/CommonStyle";
+import { TypeList } from "../../assets/DATA";
+import LoginBtn from "../../components/common/loginBtn";
+import { useNavigate } from "react-router-dom";
+import { useState } from "react";
+
+const LogInPage = () => {
+  const [inputUsername, setInputUsername] = useState("");
+  const [inputPW, setInputPW] = useState("");
+  const [isLoginPage, setIsLoginPage] = useState(true);
+
+  const navigate = useNavigate();
+
+  const handlePost = async () => {
+    try {
+      const response = await axios.post(
+        `${import.meta.env.VITE_APP_BASE_URL}/api/v1/members/sign-in`,
+        {
+          username: inputUsername,
+          password: inputPW,
+        }
+      );
+      navigate(`/mypage/${response.data.id}`);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const GoToSignUp = () => {
+    navigate("/signup");
+  };
+
+  return (
+    <>
+      <Wrapper>
+        <Title>로그인</Title>
+        <PerInput
+          title={TypeList[0].title}
+          type={TypeList[0].type}
+          placeholder={TypeList[0].placeholder}
+          value={inputUsername}
+          onChange={(e) => {
+            setInputUsername(e.target.value);
+          }}
+        />
+        <PerInput
+          title={TypeList[1].title}
+          type={TypeList[1].type}
+          placeholder={TypeList[1].placeholder}
+          value={inputPW}
+          onChange={(e) => {
+            setInputPW(e.target.value);
+          }}
+        />
+        <LoginBtn onClick={handlePost} />
+        <SignUpBtn type="button" onClick={GoToSignUp} isLoginPage={isLoginPage}>
+          회원가입
+        </SignUpBtn>
+      </Wrapper>
+    </>
+  );
+};
+
+export default LogInPage;
+
+const SignUpBtn = styled(Btn)`
+  background-color: #fffffff;
+`;