DO-SOPT-WEB · rachel5640 · Nov 17, 2023 · aazkgh · Dec 8, 2023 · lydiacho
diff --git a/week4_2/.cspell.json b/week4_2/.cspell.json
@@ -0,0 +1,3 @@
+{
+  "words": ["signup", "mypage"]
+}
diff --git a/week4_2/.eslintrc.cjs b/week4_2/.eslintrc.cjs
@@ -0,0 +1,25 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:react-hooks/recommended",
+    "plugin:react/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 },
+  //   ],
+  // },
+  extends: ["eslint:recommended", "plugin:react/recommended"],
+  rules: {
+    "react/prop-types": "off",
+  },
+};
diff --git a/week4_2/.gitignore b/week4_2/.gitignore
@@ -0,0 +1,29 @@
+# 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
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/week4_2/README.md b/week4_2/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_2/index.html b/week4_2/index.html
@@ -0,0 +1,17 @@
+<!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" />
+
+    <style>
+      @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@100;200;300;400;500;600;700&family=Noto+Sans+KR:wght@100;200;300;400;500;600;700;800;900&display=swap");
+    </style>
+    <title>로그인/회원가입</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/week4_2/package.json b/week4_2/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "week4",
+  "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",
+    "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_2/public/vite.svg b/week4_2/public/vite.svg
diff --git a/week4_2/src/App.css b/week4_2/src/App.css
diff --git a/week4_2/src/App.jsx b/week4_2/src/App.jsx
@@ -0,0 +1,12 @@
+import Router from "./components/router";
+
+import React from "react";
+function App() {
+  return (
+    <>
+      <Router />
+    </>
+  );
+}
+
+export default App;
diff --git a/week4_2/src/api/axios.js b/week4_2/src/api/axios.js
@@ -0,0 +1,10 @@
+import axios from "axios";
+
+const apiClient = axios.create({
+  headers: {
+    "Content-Type": "application/json",
+  },
+  baseURL: import.meta.env.VITE_BASE_URL,
+});
+
+export default apiClient;
diff --git a/week4_2/src/assets/profile.png b/week4_2/src/assets/profile.png
diff --git a/week4_2/src/assets/react.svg b/week4_2/src/assets/react.svg
diff --git a/week4_2/src/components/Title.jsx b/week4_2/src/components/Title.jsx
@@ -0,0 +1,9 @@
+import styled from "styled-components";
+
+const Title = styled.p`
+  color: black;
+  margin: 0.5rem 0;
+  font-size: 1.2rem;
+  font-weight: 600;
+`;
+export default Title;
diff --git a/week4_2/src/components/contentBox.jsx b/week4_2/src/components/contentBox.jsx
@@ -0,0 +1,17 @@
+import styled from "styled-components";
+
+const contentBox = styled.section`
+  display: grid;
+  place-items: center;
+  width: 30rem;
+  padding: 2.5rem;
+  background-color: ${({ theme }) => theme.white};
+  grid-gap: 0.3rem;
+  position: absolute;
+  left: 50%;
+  top: 45%;
+  transform: translate(-50%, -50%);
+  border-radius: 1.3rem;
+  box-shadow: 5px 5px 5px lightgray;
+`;
+export default contentBox;
diff --git a/week4_2/src/components/cta.jsx b/week4_2/src/components/cta.jsx
@@ -0,0 +1,27 @@
+import styled from "styled-components";
+
+const Main = styled.button`
+  width: 25rem;
+  height: 2.5rem;
+  font-size: 0.9rem;
+  font-weight: 500;
+  border-style: none;
+  border-radius: 0.4rem;
+  background-color: ${({ theme }) => theme.yellow};
+  cursor: pointer;
+`;
+
+const Secondary = styled.button`
+  width: 25rem;
+  height: 2.5rem;
+  font-size: 0.9rem;
+  font-weight: 500;
+  font-color: ${({ theme }) => theme.gray2};
+  border-style: none;
+  border-radius: 0.4rem;
+  background-color: ${({ theme }) => theme.gray1};
+  cursor: pointer;
+`;
+
+const Cta = { Main, Secondary };
+export default Cta;
diff --git a/week4_2/src/components/info.jsx b/week4_2/src/components/info.jsx
@@ -0,0 +1,21 @@
+import styled from "styled-components";
+
+const info = styled.div`
+  height: 2rem;
+  transform: translate(0, -50%);
+  height: 5rem;
+  width: 9rem;
+  margin: 4rem 2rem;
+  display: grid;
+  grid-gap: 0.5rem;
+
+  & > p {
+    background-color: ${({ theme }) => theme.gray1};
+    line-height: 2.5rem;
+    padding-left: 0.6rem;
+    font-weight: 500;
+    border-radius: 0.4rem;
+  }
+`;
+
+export default info;
diff --git a/week4_2/src/components/inputForm.jsx b/week4_2/src/components/inputForm.jsx
@@ -0,0 +1,166 @@
+import styled from "styled-components";
+import React from "react";
+
+const LoginForm = ({ idValue, setIdValue, pwValue, setPwValue }) => {
+  return (
+    <>
+      <Input>
+        <Wrapper>
+          <Name>ID</Name>
+          <Textholder
+            type="text"
+            placeholder="아이디를 입력하세요"
+            value={idValue}
+            onChange={(e) => setIdValue(e.target.value)}
+          ></Textholder>
+        </Wrapper>
+        <Wrapper>
+          <Name>비밀번호</Name>
+          <Textholder
+            type="text"
+            placeholder="비밀번호를 입력하세요"
+            value={pwValue}
+            onChange={(e) => setPwValue(e.target.value)}
+          ></Textholder>
+        </Wrapper>
+      </Input>
+    </>
+  );
+};
+
+const SignForm = ({
+  username,
+  password,
+  passwordCheck,
+  nickname,
+  setUsername,
+  setPassword,
+  setPasswordCheck,
+  setNickname,
+  doubleCheck,
+  isExist,
+  isClicked,
+  setIsClicked,
+}) => {
+  return (
+    <>
+      <Input>
+        <Wrapper>
+          <Name>ID</Name>
+          <ShortTextholder
+            type="text"
+            placeholder="아이디를 입력하세요"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+          ></ShortTextholder>{" "}
+          <Btn
+            type="button"
+            onClick={() => {
+              doubleCheck();
+              setIsClicked(true);
+            }}
+            isExist={isExist} // isExist 값을 전달
+            isClicked={isClicked} // isClicked 값을 전달
+          >
+            중복확인
+          </Btn>
+        </Wrapper>
+        <Wrapper>
+          <Name>비밀번호</Name>
+          <Textholder
+            type="text"
+            placeholder="비밀번호를 입력하세요"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          ></Textholder>
+        </Wrapper>
+        <Wrapper>
+          <Name>비밀번호 확인</Name>
+          <Textholder
+            type="text"
+            placeholder="비밀번호를 다시 한번 입력해주세요"
+            value={passwordCheck}
+            onChange={(e) => setPasswordCheck(e.target.value)}
+          ></Textholder>
+        </Wrapper>
+        <Wrapper>
+          <Name>닉네임</Name>
+          <Textholder
+            type="text"
+            placeholder="닉네임을 입력해주세요"
+            value={nickname}
+            onChange={(e) => setNickname(e.target.value)}
+          ></Textholder>
+        </Wrapper>
+      </Input>
+    </>
+  );
+};
+
+const Input = styled.section`
+  margin: 1rem 0;
+`;
+const Wrapper = styled.div`
+  display: flex;
+  margin: 0.5rem 0;
+`;
+const Name = styled.p`
+  color: ${({ theme }) => theme.black};
+  font-weight: 500;
+  width: 6.5rem;
+  height: 2.5rem;
+  line-height: 2.5rem;
+`;
+const Textholder = styled.input`
+  background-color: ${({ theme }) => theme.gray1};
+  color: grey;
+  height: 2.5rem;
+  width: 17rem;
+  border-style: none;
+  border-radius: 0.4rem;
+  padding-left: 1rem;
+
+  &::placeholder {
+    color: ${({ theme }) => theme.gray2};
+  }
+`;
+const ShortTextholder = styled.input`
+  background-color: ${({ theme }) => theme.gray1};
+  height: 2.5rem;
+  width: 12.5rem;
+  border-style: none;
+  border-radius: 0.4rem;
+  padding-left: 1rem;
+
+  &::placeholder {
+    color: ${({ theme }) => theme.gray2};
+  }
+`;
+
+const Btn = styled.button`
+  background-color: ${({ theme, isExist, isClicked }) => {
+    if (isClicked === true) {
+      return isExist ? theme.red50 : theme.blue50;
+    } else if (isClicked === false) {
+      return theme.gray2;
+    } else {
+      return theme.gray2;
+    }
+  }};
+
+  font-weight: 500;
+  border-style: none;
+  height: 2.5rem;
+  width: 4rem;
+  margin-left: 0.5rem;
+  border-style: none;
+  border-radius: 0.4rem;
+  cursor: pointer;
+`;
+
+const inputForm = {
+  LoginForm,
+  SignForm,
+};
+
+export default inputForm;