NOW-SOPT-WEB · yarimu · May 9, 2024 · May 9, 2024 · May 9, 2024 · May 9, 2024
diff --git a/week4/.eslintrc.cjs b/week4/.eslintrc.cjs
@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
diff --git a/week4/.gitignore b/week4/.gitignore
@@ -0,0 +1,25 @@
+# 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/README.md b/week4/README.md
@@ -0,0 +1,30 @@
+# React + TypeScript + 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
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default {
+  // other rules...
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname,
+  },
+}
+```
+
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
diff --git a/week4/index.html b/week4/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>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/week4/package.json b/week4/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "week4",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.6.8",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.23.0",
+    "styled-components": "^6.1.10"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "typescript": "^5.2.2",
+    "vite": "^5.2.0"
+  }
+}
diff --git a/week4/public/img/포챠코.png b/week4/public/img/포챠코.png
diff --git a/week4/public/img/피짱즈.png b/week4/public/img/피짱즈.png
diff --git a/week4/public/vite.svg b/week4/public/vite.svg
diff --git a/week4/src/App.css b/week4/src/App.css
diff --git a/week4/src/App.tsx b/week4/src/App.tsx
@@ -0,0 +1,11 @@
+import Router from "./Router";
+
+function App() {
+  return (
+    <>
+      <Router />
+    </>
+  );
+}
+
+export default App;
diff --git a/week4/src/Router.tsx b/week4/src/Router.tsx
@@ -0,0 +1,20 @@
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import Join from "./pages/Join";
+import Login from "./pages/Login";
+import Main from "./pages/Main";
+import My from "./pages/My";
+
+const Router = () => {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/login" element={<Login />}></Route>
+        <Route path="/join" element={<Join />}></Route>
+        <Route path="/main" element={<Main />}></Route>
+        <Route path="/my/:memberId" element={<My />}></Route>
+      </Routes>
+    </BrowserRouter>
+  );
+};
+
+export default Router;
diff --git a/week4/src/assets/react.svg b/week4/src/assets/react.svg
diff --git a/week4/src/main.tsx b/week4/src/main.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/week4/src/pages/Join.tsx b/week4/src/pages/Join.tsx
@@ -0,0 +1,102 @@
+import { useState } from "react";
+import styled from "styled-components";
+import axios, { AxiosError } from "axios";
+import { useNavigate } from "react-router-dom";
+
+function Join() {
+  const [userId, setUserId] = useState("");
+  const [userPw, setUserPw] = useState("");
+  const [userNickName, setNickName] = useState("");
+  const [userPhoneNumber, setPhoneNumber] = useState("");
+  const navigate = useNavigate();
+
+  const submitForm = async () => {
+    try {
+      const postJoinData = await axios.post(
+        `${import.meta.env.VITE_APP_BASE_URL}/member/join`,
+        {
+          authenticationId: userId,
+          password: userPw,
+          nickname: userNickName,
+          phone: userPhoneNumber,
+        }
+      );
+      console.log(postJoinData);
+      alert("웰컴!");
+      navigate("/login");
+    } catch (error) {
+      if (error instanceof AxiosError) {
+        alert(error.response?.data.message);
+      }
+
+      console.log(error);
+    }
+  };
+
+  return (
+    <>
+      <JoinWrapper>
+        <JoinContainer>
+          <span>회원가입 페이지</span>
+          <p>아이디</p>
+          <div>
+            <input
+              type="text"
+              value={userId}
+              onChange={(e) => setUserId(e.target.value)}
+            />
+          </div>
-          <p>아이디</p>
-          <div>
-            <input
-              type="text"
-              value={userId}
-              onChange={(e) => setUserId(e.target.value)}
-            />
-          </div>
+function YerimInput({title,value,onChange}) {
+          return (
+            <>
+                 <p>{title}<p>
+                 <div>
+                      <input 
+                      type="text"
+                      value = {value}
+                      onChange={onChange}
+                      />
+                  </div>
+            </>
+}
+
-          <p>아이디</p>
-          <div>
-            <input
-              type="text"
-              value={userId}
-              onChange={(e) => setUserId(e.target.value)}
-            />
-          </div>
+function YerimInput({title,value,onChange}) {
+          return (
+            <>
+                 <p>{title}<p>
+                 <div>
+                      <input 
+                      type="text"
+                      value = {value}
+                      onChange={onChange}
+                      />
+                  </div>
+            </>
+}
+
+          <p>비밀번호</p>
+          <div>
+            <input
+              type="text"
+              value={userPw}
+              onChange={(e) => setUserPw(e.target.value)}
+            />
+            <p>
+              비밀번호가 형식(최소 8글자 이상, 숫자, 문자(a-z, A-Z), 특수문자
+              포함)
+            </p>
+          </div>
+          <p>닉네임</p>
+          <div>
+            <input
+              type="text"
+              value={userNickName}
+              onChange={(e) => setNickName(e.target.value)}
+            />
+          </div>
+          <p>전화번호</p>
+          <div>
+            <input
+              type="string"
+              value={userPhoneNumber}
+              onChange={(e) => setPhoneNumber(e.target.value)}
+            />
+            <p>전화번호가 형식(010-****-****)</p>
+          </div>
+
+          <button type="button" onClick={submitForm}>
+            회원가입
+          </button>
+
+          <button onClick={() => navigate(-1)}>뒤로가기</button>
+        </JoinContainer>
+      </JoinWrapper>
+    </>
+  );
+}
+
+export default Join;
+
+const JoinWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #f5dad2;
+  font-size: 2rem;
+`;
+
+const JoinContainer = styled.div`
+  width: 20rem;
+`;
diff --git a/week4/src/pages/Login.tsx b/week4/src/pages/Login.tsx
@@ -0,0 +1,83 @@
+import { useState } from "react";
+import styled from "styled-components";
+import axios from "axios";
+import img1 from "../../public/img/포챠코.png";
+import { useNavigate } from "react-router-dom";
+
+function Login() {
+  const [userId, setUserId] = useState("");
+  const [userPw, setUserPw] = useState("");
+  const [uniqueId, setUniqueId] = useState("");
+
+  const navigate = useNavigate();
+
+  const handleClickLogin = async () => {
+    try {
+      const postData = await axios.post(
+        `${import.meta.env.VITE_APP_BASE_URL}/member/login`,
+        {
+          authenticationId: userId,
+          password: userPw,
+        }
+      );
+      const memberId = postData.headers.location;
+      navigate(`/my/${memberId}`);
+
+      setUniqueId(uniqueId);
+      // console.log(postData);
+      // console.log(memberId);
+    } catch (error) {
+      alert("아이디,비밀번호를 입력하세요");
+      console.log(error);
+    }
+  };
+
+  return (
+    <>
+      <LoginWrapper>
+        <LoginContainer>
+          <span>로그인</span>
+          <img src={img1} alt="포챠코이미지" width="150rem" />
+          <p>아이디</p>
+          <div>
+            <input
+              type="text"
+              value={userId}
+              onChange={(e) => setUserId(e.target.value)}
+            />
+          </div>
+          <p>비밀번호</p>
+          <div>
+            <input
+              type="text"
+              value={userPw}
+              onChange={(e) => setUserPw(e.target.value)}
+            />
+          </div>
+
+          <button type="button" onClick={handleClickLogin}>
+            로그인
+          </button>
+
+          <button type="button" onClick={() => navigate("/join")}>
+            회원가입
+          </button>
+        </LoginContainer>
+      </LoginWrapper>
+    </>
+  );
+}
+
+export default Login;
+
+const LoginWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #f5dad2;
+  font-size: 2rem;
+`;
+
+const LoginContainer = styled.div`
+  width: 10rem;
+`;
diff --git a/week4/src/pages/Main.tsx b/week4/src/pages/Main.tsx
@@ -0,0 +1,33 @@
+import { Link } from "react-router-dom";
+import img2 from "../../public/img/피짱즈.png";
+import styled from "styled-components";
+
+const Main = () => {
+  return (
+    <MainWrapper>
+      <MainContainer>
+        <img src={img2} alt="피짱즈이미지" width="300rem" />
+        <Link to="/my/:memberId">
+          <button type="button">내정보</button>
+        </Link>
+        <Link to="/join">
+          <button type="button">회원가입</button>
+        </Link>
+      </MainContainer>
+    </MainWrapper>
+  );
+};
+
+export default Main;
+
+const MainWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #f5dad2;
+  font-size: 2rem;
+`;
+
+const MainContainer = styled.div`
+  width: 20rem;
+`;