refactor: 코드 정리 (#80)

* refactor: 코드 정리 - 안쓰는 스타일, import, 변수 등을 지웠습니다. - 주석 처리된 코드들을 제거했습니다. - theme의 secondary 색상을 '#46515b'으로 변경했습니다. - 탭의 디자인을 변경했습니다. - 헤더의 제목과 부제목을 수정했습니다. - 타입 에러를 해결했습니다. * feat: 유저 정보 제거 api 추가 --------- Co-authored-by: Anhye0n <anhye0ndev@gmail.com>
tutorial-sejong · Aug 8, 2024 · eaf84fc · eaf84fc
1 parent a19a2ff
commit eaf84fc
Show file tree

Hide file tree

Showing 22 changed files with 391 additions and 535 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,14 +1,9 @@
+import {useEffect} from 'react';
 import {Route, Routes} from 'react-router-dom';
 import {ThemeProvider} from 'styled-components';
 import GlobalStyle from './styles/GlobalStyle';
 import {theme} from './styles/theme/Theme';
-// import Home from '@pages/index/Home';
-// import Login from '@pages/index/Login';
-// import ProtectedRoute from './components/ProtectedRoute';
-import {useEffect} from 'react';
-
 import ReactGA from 'react-ga4';
-import Maintenance from '@pages/Maintenance.tsx';
 import ProtectedRoute from '@components/ProtectedRoute.tsx';
 import Home from '@pages/index/Home.tsx';
 import Login from '@pages/index/Login.tsx';
@@ -27,15 +22,14 @@ function App() {
     <ThemeProvider theme={theme}>
       <GlobalStyle />
       <Routes>
-        <Route path="/login" element={<Login />} />
-        <Route path="/delete" element={<DeleteAccount />} />
+        <Route path='/login' element={<Login />} />
+        <Route path='/delete' element={<DeleteAccount />} />
         <Route
-          path="/"
+          path='/'
           element={
             <ProtectedRoute>
               <Home />
             </ProtectedRoute>
-            // <Maintenance />
           }
         />
       </Routes>

diff --git a/src/apis/api/auth.ts b/src/apis/api/auth.ts
@@ -35,3 +35,14 @@ export const refreshAccessToken = async (): Promise<string> => {
     throw error;
   }
 };
+
+
+export const withdrawal = async (studentId: string)=> {
+  try {
+    const {data} = await baseAPI.delete(`/api/auth/withdrawal/${studentId}`);
+    return data;
+  } catch (error) {
+    console.log('Failed User withdrawal');
+    throw error;
+  }
+};
diff --git a/src/components/CourseRegister/RegisterFilters.tsx b/src/components/CourseRegister/RegisterFilters.tsx
@@ -89,7 +89,6 @@ function RegisterFilters({onSearch, isRegistrationStarted}: FiltersProps) {
           <span>조직분류</span>
           <SelectBox
             options={[{id: 0, value: '학부'}]}
-            tagged={true}
             disabled={true}
             sizes='m'
             onSelect={value => handleInput(value)}
@@ -99,7 +98,6 @@ function RegisterFilters({onSearch, isRegistrationStarted}: FiltersProps) {
           <span>년도/학기</span>
           <SelectBox
             options={term}
-            tagged={true}
             disabled={true}
             sizes='m'
             onSelect={value => handleInput(value)}
@@ -110,7 +108,6 @@ function RegisterFilters({onSearch, isRegistrationStarted}: FiltersProps) {
             <span>검색 구분</span>
             <SelectBox
               options={searchOptions}
-              tagged={true}
               sizes='s'
               onSelect={value => handleSearchOptions(value)}
             />
@@ -119,7 +116,6 @@ function RegisterFilters({onSearch, isRegistrationStarted}: FiltersProps) {
             <span>{searchOption}</span>
             <SelectBox
               options={[{id: 0, value: '학부'}]}
-              tagged={true}
               disabled={true}
               sizes='s'
               onSelect={value => handleSelect('curiTypeCdNm', value)}

diff --git a/src/components/CourseRegister/RegisteredList.tsx b/src/components/CourseRegister/RegisteredList.tsx
@@ -25,7 +25,7 @@ interface RegisteredListProps {
   refreshAll: () => Promise<void>;
 }
 
-function RegisteredList({ list, refreshAll }: RegisteredListProps) {
+function RegisteredList({list, refreshAll}: RegisteredListProps) {
   const handleAction = async (
     _action: string,
     scheduleId: number | undefined,
@@ -64,16 +64,15 @@ const ListContainer = styled.div`
 `;
 
 const ButtonWrap = styled.button`
-    ${props => props.theme.texts.content};
-        // background-color: ${props => props.theme.colors.primary};
-    background-color: #46515b;
-    color: ${props => props.theme.colors.white};
-    width: 6rem;
-    height: 2.4rem;
+  ${props => props.theme.texts.content};
+  background-color: ${props => props.theme.colors.secondary};
+  color: ${props => props.theme.colors.white};
+  width: 6rem;
+  height: 2.4rem;
 
-    &:hover {
-        filter: grayscale(15%);
-    }
+  &:hover {
+    filter: grayscale(15%);
+  }
 `;
 
 export default RegisteredList;
diff --git a/src/components/DeleteAccount/DeleteAccountForm.tsx b/src/components/DeleteAccount/DeleteAccountForm.tsx
@@ -1,68 +1,30 @@
 import {useState} from 'react';
 import styled from 'styled-components';
-import FormInput from '@components/LoginForm/FormInput.tsx';
-import {login} from '@/apis/api/auth';
-import {useDispatch} from 'react-redux';
 import {useNavigate} from 'react-router-dom';
-import {setUserInfo} from '@/store/userSlice';
-import {baseAPI} from '@/apis/utils/instance';
-import Cookies from 'js-cookie';
-
-import copyIcon from '@/assets/img/file-copy-line.png';
-import reloadIcon from '@/assets/img/refresh-line.png';
-
-
-export type setType = string | number | undefined;
+import {withdrawal} from '@/apis/api/auth';
+import FormInput from '@components/LoginForm/FormInput.tsx';
 
 function DeleteAccountForm() {
   const [id, setId] = useState('');
-
   const [error, setError] = useState<string | null>(null);
-  const dispatch = useDispatch();
+
   const navigate = useNavigate();
 
   const handleDelete = async () => {
-    if (!id) {
-      setError('학번과 비밀번호를 모두 입력해주세요.');
-      return;
-    }
-
     if (id.length < 11) {
       setError('11자리 이상의 임의 학번을 입력해주세요!');
       return;
     }
 
-    if (!isTermsCheck) {
-      setError('이용약관에 동의하지 않으셨습니다.');
-
-      window.scrollTo({
-        top: document.documentElement.scrollHeight,
-        behavior: 'smooth'
-      });
-      return;
-    }
-
     try {
-      const response = await login({
-        studentId: id.toString(),
-        password: password.toString(),
-      });
-      console.log('Login successful');
-
-      Cookies.set('accessToken', response.accessToken, {expires: 0.5 / 24});
-      baseAPI.defaults.headers.common['Authorization'] =
-        `Bearer ${response.accessToken}`;
-
-      dispatch(
-        setUserInfo({
-          username: response.username,
-        }),
-      );
+      const response = await withdrawal(id);
+      console.log(response);
+      console.log('Withdrawal successful');
 
       navigate('/');
     } catch (error) {
-      console.error('Login failed', error);
-      setError('로그인에 실패했습니다. 다시 시도해주세요.');
+      console.error('Withdrawal failed', error);
+      setError('제거 실패');
     }
   };
 
@@ -71,68 +33,67 @@ function DeleteAccountForm() {
       <InputContainer>
         <InputBox>
           <LabelWrap>학번</LabelWrap>
-          <FormInput value={id} setValue={setId} type="number" />
+          <FormInput value={id} setValue={setId} type='number' />
         </InputBox>
         <FindWrap onClick={() => navigate('/login')}>로그인 페이지</FindWrap>
-
       </InputContainer>
       {error && <ErrorMessage>{error}</ErrorMessage>}
-      <LoginBtnWrap onClick={handleDelete} type="button">
+      <LoginBtnWrap onClick={handleDelete} type='button'>
         제거
       </LoginBtnWrap>
     </FormContainer>
   );
 }
 
 const FormContainer = styled.div`
-    padding: 1.5rem 4rem;
-    background-color: ${props => props.theme.colors.white};
-    border-radius: 0.3rem;
-    margin-bottom: 2rem;
+  padding: 1.5rem 4rem;
+  background-color: ${props => props.theme.colors.white};
+  border-radius: 0.3rem;
+  margin-bottom: 2rem;
 `;
 
 const InputContainer = styled.div`
-    margin-bottom: 2.5rem;
+  margin-bottom: 2.5rem;
 `;
 
 const InputBox = styled.div`
-    margin-top: 2rem;
+  margin-top: 2rem;
 `;
 
 const LabelWrap = styled.div`
-    ${props => props.theme.texts.loginContent};
-    margin-bottom: 0.7rem;
+  ${props => props.theme.texts.loginContent};
+  margin-bottom: 0.7rem;
 `;
 
 const LoginBtnWrap = styled.button`
-    width: 100%;
-    height: 5rem;
-    background-color: #46515b;
-    border: none;
-    border-radius: 5rem;
-    color: ${props => props.theme.colors.white};
-    font-size: 1.7rem;
-    font-weight: 700;
-    box-shadow: 0px 4px 5px lightgray;
-    margin-bottom: 2rem;
-
-    &:hover {
-        background-color: #c3002fc7;
-    }
+  width: 100%;
+  height: 5rem;
+  background-color: ${props => props.theme.colors.secondary};
+  border: none;
+  border-radius: 5rem;
+  color: ${props => props.theme.colors.white};
+  font-size: 1.7rem;
+  font-weight: 700;
+  box-shadow: 0px 4px 5px lightgray;
+  margin-bottom: 2rem;
+
+  &:hover {
+    background-color: #c3002fc7;
+  }
 `;
 
 const FindWrap = styled.div`
-    ${props => props.theme.texts.tableTitle};
-    color: ${props => props.theme.colors.neutral4};
-    float: inline-end;
-    margin-top: 2rem;
-    margin-bottom: 2rem;
+  ${props => props.theme.texts.tableTitle};
+  color: ${props => props.theme.colors.neutral4};
+  float: inline-end;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
 `;
 
 const ErrorMessage = styled.div`
-    color: red;
-    margin-bottom: 1rem;
-    text-align: center;
+  color: red;
+  margin-bottom: 1rem;
+  text-align: center;
 `;
 
-export default DeleteAccountForm;
+export default DeleteAccountForm;
diff --git a/src/components/Header/TopMenu.tsx b/src/components/Header/TopMenu.tsx
@@ -24,7 +24,7 @@ function TopMenu() {
 
   return (
     <TopMenuContainer>
-      <Clock name={username || '세종대'} />
+      <Clock name={username || '종이'} />
       <LogoutBtn onClick={handleLogout} />
     </TopMenuContainer>
   );
@@ -37,38 +37,13 @@ const TopMenuContainer = styled.div`
 `;
 
 const LogoutBtn = styled.button`
-    background-image: url(${logout});
-    background-size: 1.8rem;
-    width: 1.8rem;
-    height: 1.8rem;
+  background-image: url(${logout});
+  background-size: 1.8rem;
+  width: 1.8rem;
+  height: 1.8rem;
 
-    &:hover {
-        filter: brightness(20%);
-    }
-`;
-
-const DropdownWrap = styled.div`
-  ${props => props.theme.texts.tableTitle};
-  font-size: 1.3rem;
-  display: flex;
-  align-items: center;
-  column-gap: 1.5rem;
-
-  > img {
-    &:hover {
-      filter: brightness(20%);
-    }
-  }
-`;
-
-const GroupWrap = styled.div`
-  display: flex;
-  column-gap: 1rem;
-
-  > img {
-    &:hover {
-      filter: brightness(20%);
-    }
+  &:hover {
+    filter: brightness(20%);
   }
 `;
 

diff --git a/src/components/Header/TopNav.tsx b/src/components/Header/TopNav.tsx
@@ -3,25 +3,20 @@ import styled from 'styled-components';
 function TopNav() {
   return (
     <TopNavContatiner>
-      {/*<TopNavWrap autoFocus>Tutorial Sejong 수강신청 연습 시스템</TopNavWrap>*/}
-      <TopNavWrap>본 서비스는 실제 수강신청 사이트가 아닙니다.</TopNavWrap>
+      <TopNavWrap>:&nbsp;&nbsp;세종대학교 수강신청 연습 사이트</TopNavWrap>
     </TopNavContatiner>
   );
 }
 
 const TopNavContatiner = styled.div`
   display: flex;
   flex-shrink: 0;
+  align-items: center;
 `;
 
-const TopNavWrap = styled.button`
-  ${props => props.theme.texts.title};
-  font-size: 1.6rem;
-  margin-right: 4rem;
-
-  &:focus {
-    color: ${props => props.theme.colors.primary};
-  }
+const TopNavWrap = styled.div`
+  ${props => props.theme.texts.loginContent};
+  font-size: 1.5rem;
 `;
 
 export default TopNav;