DO-SOPT-WEB · SooY2 · Nov 16, 2023 · Nov 16, 2023 · Nov 16, 2023 · Nov 16, 2023
diff --git a/week4/assign1/.env b/week4/assign1/.env
@@ -0,0 +1 @@
+VITE_APP_URL = "http://3.39.54.196"
diff --git a/week4/assign1/.eslintrc.cjs b/week4/assign1/.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/assign1/.gitignore b/week4/assign1/.gitignore
@@ -0,0 +1,26 @@
+.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/week4/assign1/README.md b/week4/assign1/README.md
@@ -0,0 +1,45 @@
+ - 로딩 / 에러 처리를 하는 방법에는 어떤 것들이 있을까?
+    >Try/Catch 블록:
+    코드에서 예외가 발생할 수 있는 부분을 try 블록에 넣고, 예외가 발생하면 catch 블록에서 이를 잡아내어 처리한다.
+
+    콜백 함수:
+    비동기 작업에서 종종 사용되며, 함수가 완료되었을 때 실행되는 콜백에 성공 또는 실패 로직을 작성한다.
+
+    프로미스(Promise):
+    ES6에 도입된 프로미스는 비동기 작업의 완료 또는 실패를 나타내는 객체로, .then()과 .catch() 메서드를 사용하여 결과를 처리한다.
+
+    async/await:
+    ES2017에서 도입된 async/await는 프로미스를 더 읽기 쉽게 만들어주며, try/catch와 함께 사용하여 에러를 처리한다.
+
+    로딩 상태 관리:
+    UI 상태 변수(예: isLoading, isError)를 사용하여 로딩 상태와 에러 상태를 관리하고, 이를 기반으로 사용자에게 피드백을 제공함.
+
+    이벤트 리스너/에미터:
+    특정 이벤트 발생 시 호출되는 리스너를 등록하여 에러를 처리함.
+
+    인터셉터(Interceptors):
+    많은 HTTP 클라이언트 라이브러리에서 제공하는 인터셉터를 사용하여 요청/응답을 가로채 에러 처리함.    
+ - 패칭 라이브러리란 무엇이고 어떤 것들이 있을까?
+  >패칭 라이브러리는 웹 애플리케이션에서 외부 API 또는 서버로부터 데이터를 가져오기 위해 HTTP 요청을 보내는 작업을 돕는 라이브러리이다. 이러한 라이브러리는 HTTP 클라이언트의 역할을 하며, 개발자가 네트워크 요청을 쉽게 만들고 관리할 수 있도록 도와준다.
+
+  Fetch API,
+  Axios,
+  jQuery.ajax(),
+  Superagent
+
+ - 패칭 라이브러리를 쓰는 이유는 무엇일까?
+
+    간편성:
+    복잡한 네트워크 요청 로직을 추상화하여 개발자가 쉽게 HTTP 요청을 구성하고 실행할 수 있게 해줌.
+
+    기능성:
+    타임아웃, 쿠키, 헤더 설정 등의 고급 기능과 에러 처리를 쉽게 할 수 있는 기능을 제공.
+
+    프로미스 지원:
+    비동기 요청을 처리할 때 프로미스를 사용하여 코드의 가독성을 높이고, 비동기 코드의 복잡성을 관리할 수 있음.
+
+    브라우저 호환성:
+    다양한 브라우저에서 일관된 방식으로 HTTP 요청을 보낼 수 있도록 도와줌.
+
+    커뮤니티와 지원:
+    널리 사용되는 라이브러리는 커뮤니티의 지원을 받아 문제 발생 시 해결책을 찾기 쉽고, 지속적인 업데이트가 이루어집니다.
diff --git a/week4/assign1/index.html b/week4/assign1/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="" />
+    <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/assign1/package.json b/week4/assign1/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "week4-assign1",
+  "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.19.0",
+    "styled-components": "^6.1.1"
+  },
+  "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/week4/assign1/public/vite.svg b/week4/assign1/public/vite.svg
diff --git a/week4/assign1/src/App.css b/week4/assign1/src/App.css
@@ -0,0 +1,7 @@
+.App{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/week4/assign1/src/App.jsx b/week4/assign1/src/App.jsx
@@ -0,0 +1,24 @@
+import GlobalStyle from "./styles/GlobalStyle"
+import { ThemeProvider } from "styled-components";
+import theme from "./styles/theme";
+import './App.css';
+import {BrowserRouter} from "react-router-dom";
+import Router from "./components/Router";
+
+
+function App() {
+
+
+  return (
+    <div className="App">
+    <ThemeProvider theme={theme}>
+      <BrowserRouter>
+        <GlobalStyle/>
+        <Router/>
+      </BrowserRouter>
+    </ThemeProvider>
+    </div>
+  )
+}
+
+export default App
diff --git a/week4/assign1/src/assets/react.svg b/week4/assign1/src/assets/react.svg
diff --git a/week4/assign1/src/components/Button.jsx b/week4/assign1/src/components/Button.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import styled,{css} from "styled-components";
+
+const Button = ({content,onClick,disabled}) => {
+  return (
+    <ButtonSt onClick={onClick} $disabled={disabled}>{content}</ButtonSt>
+  )
+}
+
+const ButtonSt=styled.button`
+  width: 100%;
+  height: 40px;
+  border-radius: 10px;
+  border: none;
+  font-size:18px;
+  font-weight: 800;
+  background-color: ${({ $disabled,theme }) => ($disabled ? theme.colors.mainColor : '#ccc')}; 
+  color: ${({theme})=>theme.colors.white};
+
+
+
+
+ &:hover{
+  /* background-color: #f5d6d2; */
+  cursor: pointer;
+ }
+`
+
+export default Button
diff --git a/week4/assign1/src/components/InputBox.jsx b/week4/assign1/src/components/InputBox.jsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import {Input,Label} from "../styles/common/CommonStyle"
+import { styled } from 'styled-components'
+
+const InputBox = ({name,label,placeholder,value,onChange}) => {
+  return (
+    <InputContaier>
+      <Label htmlFor={name}>{label}</Label>
+      <Input type='text'  name={name} placeholder={placeholder} value={value} onChange={(e)=>onChange(e.target.value)}></Input>
+    </InputContaier>
+  )
+}
+
+const InputContaier=styled.div`
+      width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+`
+
+export default InputBox
diff --git a/week4/assign1/src/components/Router.jsx b/week4/assign1/src/components/Router.jsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import {Routes,Route} from "react-router-dom";
+import {Login,Mypage,Signup} from "../pages/index";
+
+const Router = () => {
+  return (
+    <>
+    <Routes>
+          <Route path="/" element={<Login/>}/>
+          <Route path="/signup" element={<Signup/>}/>
+          <Route path="/mypage/:userId" element={<Mypage/>}/>
+        </Routes>
+    </>
+  )
+}
+
+export default Router
diff --git a/week4/assign1/src/main.jsx b/week4/assign1/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/assign1/src/pages/Login.jsx b/week4/assign1/src/pages/Login.jsx
@@ -0,0 +1,94 @@
+import React, { useState,useEffect } from 'react'
+import styled from "styled-components";
+import { Wrapper} from '../styles/common/CommonStyle';
+import Button from '../components/Button';
+import {useNavigate} from "react-router-dom";
+import axios from "axios";
+import InputBox from '../components/InputBox';
+
+/**로그인 페이지 */
+const Login = () => {
+  const API_URL = import.meta.env.VITE_APP_URL;
+  const nav = useNavigate();
+
+  //넘길 정보들
+  const [username,setUsername]=useState("");
+  const [password,setPassword]=useState("");
+
+  //그ㅡ 외
+  const [canlogin,setCanLogin]=useState(false);
+
+  //로그인 버튼 활성화
+    useEffect(()=>{
+      username&&password ? setCanLogin(true): setCanLogin(false);
+    },[username,password]);
+
+  const submitLogin=()=>{
+    axios.post(`${API_URL}/api/v1/members/sign-in`,{
+      "username":username,
+      "password":password
+    }).then(res=>{
+      nav(`/mypage/${res.data.id}`);
+    }).catch(err=>{
+
+    })
+  }
+
+  return (
+    <Wrapper>
+      <Container>
+        <h1>Login</h1>
+        <div className='inputsContainer'>
+          <InputBox name="id" label="ID" placeholder="아이디를 입력해주세요" value={username} onChange={setUsername}/>
+          <InputBox name="pw" label="PASSWORD" placeholder="비밀번호를 입력해주세요" value={password} onChange={setPassword}/>
+        </div>
+        <Button disabled={canlogin} content="로그인" onClick={submitLogin}/>
+        <button id='move-pw' onClick={()=>{nav('/signup')}}>회원가입 하러가기</button>
+      </Container>
+    </Wrapper>
+  )
+};
+
+const Container=styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+
+  .inputsContainer{
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap:10px;
+    margin: 30px 0;
+  }
+
+  .input{
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+  }
+
+  #move-pw{
+    width: 100%;
+    height: 40px;
+    font-size: 18px;
+    font-weight: 800;
+    background-color: transparent;
+    border: none;
+    color: ${({theme})=>theme.colors.grayColor};
+
+    &:hover{
+      color: ${({theme})=>theme.colors.pointColor};
+    }
+  }
+
+`
+
+
+export default Login