fix: 코드리뷰 반영

week4/assign1/src/App.jsx

@@ -2,8 +2,8 @@ import GlobalStyle from "./styles/GlobalStyle"
 import { ThemeProvider } from "styled-components";
 import theme from "./styles/theme";
 import './App.css';
-import {BrowserRouter, Routes,Route} from "react-router-dom";
-import {Login,Mypage,Signup} from "./pages";
+import {BrowserRouter} from "react-router-dom";
+import Router from "./components/Router";
 
 
 function App() {
@@ -14,11 +14,7 @@ function App() {
     <ThemeProvider theme={theme}>
       <BrowserRouter>
         <GlobalStyle/>
-        <Routes>
-          <Route path="/" element={<Login/>}/>
-          <Route path="/signup" element={<Signup/>}/>
-          <Route path="/Mypage/:userId" element={<Mypage/>}/>
-        </Routes>
+        <Router/>
       </BrowserRouter>
     </ThemeProvider>
     </div>

week4/assign1/src/components/InputBox.jsx

@@ -6,7 +6,7 @@ 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>
+      <Input type='text'  name={name} placeholder={placeholder} value={value} onChange={(e)=>onChange(e.target.value)}></Input>
     </InputContaier>
   )
 }

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

week4/assign1/src/pages/Login.jsx

@@ -23,13 +23,12 @@ const Login = () => {
       username&&password ? setCanLogin(true): setCanLogin(false);
     },[username,password]);
 
-  const submitLogin=(e)=>{
+  const submitLogin=()=>{
     axios.post(`${API_URL}/api/v1/members/sign-in`,{
       "username":username,
       "password":password
     }).then(res=>{
-      console.log(res.data);
-      nav(`/Mypage/${res.data.id}`);
+      nav(`/mypage/${res.data.id}`);
     }).catch(err=>{
 
     })

week4/assign1/src/pages/Mypage.jsx

@@ -12,15 +12,20 @@ const Mypage = () => {
   const [userId,setuserId]=useState("");
   const [nickname,setNickname]=useState("");
 
-  const getInfo=()=>{
-    axios.get(`${API_URL}/api/v1/members/${memberId}`)
-    .then(res=>{
-      setuserId(res.data.username);
-      setNickname(res.data.nickname);
-    })
-    .catch(err=>{
+  const imgUrl='https://search.pstatic.net/sunny/?src=https%3A%2F%2Fi.pinimg.com%2Foriginals%2F8e%2Fe6%2F82%2F8ee68280783c081cc1ecd7e20342d050.jpg&type=a340';
+
+
 
-    })
+  const getInfo=async ()=>{
+
+    try {
+      const res =await axios.get(`${API_URL}/api/v1/members/${memberId}`);
+      const {username, nickname} = res.data; //구조분해 할당으로 가져오기
+      setuserId(username);
+      setNickname(nickname);
+    } catch {
+      (err)=>console.log(err);
+    }
   }
 
   useEffect(()=>{
@@ -32,7 +37,7 @@ const Mypage = () => {
       <Container>
         <h1>My Page</h1>
         <section>
-          <img alt='프로필 사진' src='https://search.pstatic.net/sunny/?src=https%3A%2F%2Fi.pinimg.com%2Foriginals%2F8e%2Fe6%2F82%2F8ee68280783c081cc1ecd7e20342d050.jpg&type=a340'/>
+          <img alt='프로필 사진' src={imgUrl}/>
           <span className='text-info-container'> 
             <Info>ID: {userId}</Info>
             <Info>닉네임: {nickname}</Info>

week4/assign1/src/pages/Signup.jsx

@@ -20,35 +20,46 @@ const Signup = () => {
   const [nickname,setNickname]=useState("");
 
   //그외
-  const  [checkDup,setCheckDup]=useState(0);
+  const  [checkDup,setCheckDup]=useState('yet');
   const [canSignup,setCanSignup]=useState(false);
 
 
   //중복체크
   const checkDuplicate=(e)=>{
     axios.get(`${API_URL}/api/v1/members/check?username=${username}`)
     .then(res=>{
-      res.data.isExist? setCheckDup(1):setCheckDup(2);
+      res.data.isExist? setCheckDup('exist'):setCheckDup('notExist');
     })
   }
 
 
   //회원가입 버튼 활성화
   useEffect(()=>{
-    username&&password&&passwordCheck&&nickname&&(checkDup===2) ? setCanSignup(true): setCanSignup(false);
-    console.log(canSignup);
+    username&&password&&passwordCheck&&nickname&&(checkDup==='notExist') ? setCanSignup(true): setCanSignup(false);
   },[username,password,passwordCheck,nickname,checkDup]);
 
   //회원가입
   const submitSignup=()=>{
-    axios.post(`${API_URL}/api/v1/members`,{
-      "username": username,
-      "nickname": nickname, 
-      "password": password
-  })
-  .then(res=>{
-    nav('/');
-  })
+    try {
+       axios.post(`${API_URL}/api/v1/members`,{
+            "username": username,
+            "nickname": nickname, 
+            "password": password
+        })
+        .then(()=>{
+            nav('/');
+          })
+    } catch {
+      (err)=>console.log(err);
+    }
+  //   axios.post(`${API_URL}/api/v1/members`,{
+  //     "username": username,
+  //     "nickname": nickname, 
+  //     "password": password
+  // })
+  // .then(res=>{
+  //   nav('/');
+  // })
 
   }
 
@@ -119,7 +130,7 @@ const DupBtn=styled.button`
   border: none;
   font-size: 15px;
   font-weight: 400;
-  background-color: ${({ $checkDup }) => $checkDup===0 ? '#000' : ($checkDup===1 ? 'red':'green')};
+  background-color: ${({ $checkDup }) => $checkDup==='yet' ? '#000' : ($checkDup==='exist' ? 'red':'green')};
   color: ${({theme})=>theme.colors.white};
 
 

week4/assign1/src/styles/common/CommonStyle.js

@@ -11,14 +11,15 @@ export const Wrapper=styled.div`
   }
 `
 
+
+
 export const Input=styled.input`
   width: 300px;
   height: 35px;
   border-radius: 10px;
   padding-left: 5px;
 
-  ${props => props.$len&&
-    css`width:200px`};
+  ${({ $len }) =>($len==='short')&& css`width:200px` };
 
 `