NOW-SOPT-WEB · se0jinYoon · May 8, 2024 · May 8, 2024 · May 8, 2024 · May 8, 2024
diff --git a/4주차과제/loginSignup/.env b/4주차과제/loginSignup/.env
@@ -0,0 +1 @@
+VITE_APP_BASE_URL = http://34.64.233.12:8080
diff --git a/4주차과제/loginSignup/.eslintrc.cjs b/4주차과제/loginSignup/.eslintrc.cjs
@@ -0,0 +1,21 @@
+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/jsx-no-target-blank': 'off',
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
diff --git a/4주차과제/loginSignup/.gitignore b/4주차과제/loginSignup/.gitignore
@@ -0,0 +1,24 @@
+# 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/4주차과제/loginSignup/README.md b/4주차과제/loginSignup/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/4주차과제/loginSignup/index.html b/4주차과제/loginSignup/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/4주차과제/loginSignup/package.json b/4주차과제/loginSignup/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "loginsignup",
+  "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": {
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "axios": "^1.6.8",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.23.0",
+    "styled-components": "^6.1.10",
+    "styled-reset": "^4.5.2"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "vite": "^5.2.0"
+  }
+}
diff --git a/4주차과제/loginSignup/public/vite.svg b/4주차과제/loginSignup/public/vite.svg
diff --git a/4주차과제/loginSignup/src/App.jsx b/4주차과제/loginSignup/src/App.jsx
@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+import Router from './Router';
+
+function App() {
+  return (
+    <DesktopWrapper>
+      <Router />
+    </DesktopWrapper>
+  );
+}
+
+export default App;
+
+const DesktopWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: 100vw;
+  height: 100vh;
+`;
diff --git a/4주차과제/loginSignup/src/Router.jsx b/4주차과제/loginSignup/src/Router.jsx
@@ -0,0 +1,22 @@
+/* eslint-disable react/prop-types */
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+
+import Main from './pages/main/Main';
+import Signup from './pages/signup/Signup';
+import Login from './pages/login/Login';
+import MyPage from './pages/myPage/MyPage';
+
+const Router = () => {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Main />} />
+        <Route path="/signup" element={<Signup />} />
+        <Route path="/login" element={<Login />} />
+        <Route path="/mypage/:userId" element={<MyPage />} />
+      </Routes>
+    </BrowserRouter>
+  );
+};
+
+export default Router;
diff --git a/4주차과제/loginSignup/src/apis/client.js b/4주차과제/loginSignup/src/apis/client.js
@@ -0,0 +1,6 @@
+import axios from 'axios';
+
+export const client = axios.create({
+  baseURL: import.meta.env.VITE_APP_BASE_URL,
+  headers: { 'Content-Type': 'application/json' },
+});
diff --git a/4주차과제/loginSignup/src/apis/getUserInfo.js b/4주차과제/loginSignup/src/apis/getUserInfo.js
@@ -0,0 +1,9 @@
+import { client } from './client';
+
+export const getUserInfo = (userId) => {
+  return client.get(`/member/info`, {
+    headers: {
+      memberId: userId,
+    },
+  });
+};
diff --git a/4주차과제/loginSignup/src/apis/patchChangePw.js b/4주차과제/loginSignup/src/apis/patchChangePw.js
@@ -0,0 +1,10 @@
+import { client } from './client';
+
+export const patchChangePw = (body, userId) => {
+  return client.patch(`/member/password`, body, {
+    headers: {
+      ...client.defaults.headers,
+      memberId: userId,
+    },
+  });
+};
diff --git a/4주차과제/loginSignup/src/apis/postLogin.js b/4주차과제/loginSignup/src/apis/postLogin.js
@@ -0,0 +1,5 @@
+import { client } from './client';
+
+export const postLogin = (body) => {
+  return client.post(`/member/login`, body);
+};
diff --git a/4주차과제/loginSignup/src/apis/postSignup.js b/4주차과제/loginSignup/src/apis/postSignup.js
@@ -0,0 +1,5 @@
+import { client } from './client';
+
+export const postSignup = (body) => {
+  return client.post(`/member/join`, body);
+};
diff --git a/4주차과제/loginSignup/src/assets/constants/constants.js b/4주차과제/loginSignup/src/assets/constants/constants.js
@@ -0,0 +1,35 @@
+const SIGNUP_LABEL = [
+  { label: 'ID', detailExist: false },
+  {
+    label: 'PW',
+    detailExist: true,
+    detail: '비밀번호 형식은 8자이상, 숫자, 특수문자, 영어 알파벳이 포함되어야 합니다.',
+  },
+  { label: '닉네임', detailExist: false },
+  { label: '전화번호', detailExist: true, detail: '전화번호 형식은 010-****-**** 입니다.' },
+];
+
+const LOGIN_LABEL = [{ label: 'ID' }, { label: 'PW' }];
+
+const MYPAGE_LABEL = [
+  {
+    label: 'ID',
+    content: 'authenticationId',
+  },
+  {
+    label: '닉네임',
+    content: 'nickname',
+  },
+  {
+    label: '전화번호',
+    content: 'phone',
+  },
+];
+
+const CHANGE_PW_LABEL = [
+  { label: '기존 비밀번호', id: 'previousPassword' },
+  { label: '새로운 비밀번호', id: 'newPassword' },
+  { label: '비밀번호 확인', id: 'newPasswordVerification' },
+];
+
+export { SIGNUP_LABEL, LOGIN_LABEL, MYPAGE_LABEL, CHANGE_PW_LABEL };
diff --git a/4주차과제/loginSignup/src/assets/gifs/modalCongrats.gif b/4주차과제/loginSignup/src/assets/gifs/modalCongrats.gif
diff --git a/4주차과제/loginSignup/src/assets/img/loginImg.jpeg b/4주차과제/loginSignup/src/assets/img/loginImg.jpeg
diff --git a/4주차과제/loginSignup/src/commons/Button.jsx b/4주차과제/loginSignup/src/commons/Button.jsx
@@ -0,0 +1,51 @@
+/* eslint-disable react/prop-types */
+import styled, { css } from 'styled-components';
+
+const Button = (props) => {
+  const { content, onClick } = props;
+  return (
+    <ButtonWrapper {...props} onClick={onClick}>
+      {content}
+    </ButtonWrapper>
+  );
+};
+
+export default Button;
+
+const ButtonWrapper = styled.button`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width = auto;
+  height = auto;
+
+  padding: 0.5rem 0.8rem;
+
+  border: 1px solid ${({ theme }) => theme.colors.white};
+  border-radius: 0.3rem;
+
+  font-size: 1.2rem;
+  cursor: pointer;
+
+  ${({
+    theme,
+    $marginTop = '',
+    $buttonColor = 'skyblue',
+    $fontColor = 'white',
+    $hoverFontColor = 'white',
+    $hoverColor = 'blue',
+  }) => css`
+    margin-top: ${$marginTop};
+
+    background-color: ${theme.colors[$buttonColor]};
+    color: ${theme.colors[$fontColor]};
+
+    &:hover {
+      border: 1px solid ${({ theme }) => theme.colors.blue};
+
+      color: ${theme.colors[$hoverFontColor]};
+      background-color: ${theme.colors[$hoverColor]};
+    }
+  `}
+`;
diff --git a/4주차과제/loginSignup/src/commons/ButtonWrapper.jsx b/4주차과제/loginSignup/src/commons/ButtonWrapper.jsx
@@ -0,0 +1,16 @@
+/* eslint-disable react/prop-types */
+import styled from 'styled-components';
+
+const ButtonWrapper = (props) => {
+  const { children } = props;
+  return <BtnWrapper>{children}</BtnWrapper>;
+};
+
+export default ButtonWrapper;
+
+const BtnWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 2rem;
+`;
diff --git a/4주차과제/loginSignup/src/commons/Input.jsx b/4주차과제/loginSignup/src/commons/Input.jsx
@@ -0,0 +1,52 @@
+/* eslint-disable react/prop-types */
+import styled from 'styled-components';
+
+const Input = (props) => {
+  const { label, children, onChangeHandler } = props;
+
+  return (
+    <InputWrapper>
+      <InputContainer>
+        <InputLabel>{label}</InputLabel>
+        <StyledInput id={label} onChange={onChangeHandler} />
+      </InputContainer>
+      {children}
+    </InputWrapper>
+  );
+};
+
+export default Input;
+
+const InputWrapper = styled.div`
+  position: relative;
+`;
+
+const InputContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 2rem;
+
+  width: 28rem;
+`;
+
+const InputLabel = styled.label`
+  color: ${({ theme }) => theme.colors.white};
+
+  font-size: 1.2rem;
+  font-weight: bolder;
+`;
+
+const StyledInput = styled.input`
+  width: 17rem;
+
+  padding: 0.5rem 0.7rem;
+
+  border: none;
+  border-radius: 0.5rem;
+
+  background-color: ${({ theme }) => theme.colors.white};
+
+  font-size: 1.1rem;
+  font-family: ${({ theme }) => theme.font.fontFamily};
+`;
diff --git a/4주차과제/loginSignup/src/commons/LoginSignupWrapper.jsx b/4주차과제/loginSignup/src/commons/LoginSignupWrapper.jsx
@@ -0,0 +1,39 @@
+/* eslint-disable react/prop-types */
+import styled from 'styled-components';
+
+const LoginSignupWrapper = (props) => {
+  const { title, children } = props;
+  return (
+    <LoginSignupWrp>
+      <Title>{title}</Title>
+      {children}
+    </LoginSignupWrp>
+  );
+};
+
+export default LoginSignupWrapper;
+
+const LoginSignupWrp = styled.section`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 2.7rem;
+
+  width: 35rem;
+
+  padding: 2.5rem 1rem 4rem 1rem;
+
+  border: 1px solid ${({ theme }) => theme.colors.white};
+  border-radius: 0.5rem;
+
+  color: ${({ theme }) => theme.colors.black};
+  background-color: ${({ theme }) => theme.colors.lightSkyblue};
+`;
+
+const Title = styled.h1`
+  color: ${({ theme }) => theme.colors.white};
+
+  font-size: 1.7rem;
+  font-weight: bolder;
+`;