design: 모바일 화면 개선 (#91)

- MediaQuery 속성들을 모듈화했습니다.
- 필터 레이아웃 중에서 공통으로 사용되는 부분들을 styles에 분리해 놨습니다.
- 모바일 환경에서는 헤더의 ':  세종대학교 수강신청 연습 사이트'가 나타나지 않도록 변경했습니다.
- 랩탑이 아닌 환경(모바일, 태블릿)에서는 기본적으로 사이드바가 접혀있도록 수정했습니다.
- modules 폴더 안에 없는 슬라이스들을 폴더 안으로 옮겼습니다.

package.json

@@ -12,12 +12,14 @@
   },
   "dependencies": {
     "@reduxjs/toolkit": "^2.2.6",
+    "@types/react-responsive": "^8.0.8",
     "axios": "^1.7.2",
     "js-cookie": "^3.0.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-ga4": "^2.1.0",
     "react-redux": "^9.1.2",
+    "react-responsive": "^10.0.0",
     "react-router-dom": "^6.24.0",
     "redux-persist": "^6.0.0",
     "styled-components": "^6.1.11",

src/apis/utils/instance.ts

@@ -1,4 +1,4 @@
-import {setModalName} from '@/store/modalSlice';
+import {setModalName} from '@/store/modules/modalSlice';
 import {setType} from '@/store/modules/errorSlice';
 import {store} from '@/store/store';
 import axios, {AxiosError, AxiosResponse} from 'axios';

src/components/CourseRegister/RegisterFilters.tsx

@@ -5,7 +5,7 @@ import FilterButton from '../common/FilterButton';
 import FilterInput from '../common/FilterInput';
 import SelectBox from '../common/SelectBox';
 import {term, searchOptions} from '@assets/data/filter';
-import {FilterBox, FilterContainer, FilterWrap} from '../LectureList/Filters';
+import {FilterBox, FilterContainer, FilterWrap} from '@/styles/FilterLayout';
 
 interface FiltersProps {
   isRegistrationStarted: boolean;
@@ -139,23 +139,27 @@ function RegisterFilters({onSearch, isRegistrationStarted}: FiltersProps) {
 const RegisterFilterContainer = styled(FilterContainer)`
   display: flex;
   align-items: flex-end;
+  gap: 0.7rem 0;
+
+  @media ${props => props.theme.device.mobile} {
+    flex-wrap: wrap;
+  }
 `;
 
 const SearchBox = styled.div`
   display: flex;
-  gap: 0 3rem;
+  flex-wrap: wrap;
+  gap: 0.7rem 3rem;
 `;
 
 const SearchWrap = styled(FilterWrap)`
   > div {
     margin-right: 0.7rem;
   }
-  display: flex;
   align-items: center;
 `;
 
-const CuriNoWrap = styled.div`
-  display: flex;
+const CuriNoWrap = styled(FilterBox)`
   align-items: center;
 `;
 

src/components/CourseRegister/index.tsx

@@ -5,12 +5,16 @@ import Table from '../common/Table';
 import {TableTitle, TableTitleWrap} from '../LectureList';
 import RegisteredList from './RegisteredList';
 import {useDispatch} from 'react-redux';
-import {setCourseName, setModalName, setScheduleId} from '@store/modalSlice.ts';
+import {
+  setCourseName,
+  setModalName,
+  setScheduleId,
+} from '@/store/modules/modalSlice';
 import StartButton from '@components/CourseRegister/StartButton.tsx';
 import {getCourseList, getRegisterdList, getWishlist} from '@/apis/api/course';
 import {useAppSelector} from '@/store/hooks';
 import {openModalHandler} from '../common/Modal/handlers/handler';
-import {setEndCount} from '@store/courseRegisteredSlice.ts';
+import {setEndCount} from '@/store/modules/courseRegisteredSlice';
 
 const colData = [
   {name: 'action', value: '신청', initialWidth: 30, enableFilters: false},
@@ -32,8 +36,10 @@ function CourseRegister() {
   const [list, setList] = useState<CourseTypes[]>([]);
   const [registeredList, setRegisteredList] = useState<CourseTypes[]>([]);
   const [currentFilter, setCurrentFilter] = useState<CourseTypes>({});
-  const [currentSearchOption, setCurrentSearchOption] = useState<string>('관심과목');
-  const [isRegistrationStarted, setIsRegistrationStarted] = useState<boolean>(false);
+  const [currentSearchOption, setCurrentSearchOption] =
+    useState<string>('관심과목');
+  const [isRegistrationStarted, setIsRegistrationStarted] =
+    useState<boolean>(false);
   const [isFirstSearch, setIsFirstSearch] = useState<boolean>(true);
 
   const dispatch = useDispatch();
@@ -56,7 +62,11 @@ function CourseRegister() {
     setList(searchResult);
   }, [currentFilter, currentSearchOption, studentId]);
 
-  const handleSearch = async (newList: CourseTypes[], filter: CourseTypes, searchOption: string) => {
+  const handleSearch = async (
+    newList: CourseTypes[],
+    filter: CourseTypes,
+    searchOption: string,
+  ) => {
     if (isRegistrationStarted && isFirstSearch) {
       openModalHandler(dispatch, 'waiting');
       setIsFirstSearch(false);
@@ -79,7 +89,6 @@ function CourseRegister() {
       console.log('35초 지남');
       dispatch(setEndCount(true));
     }, 35000);
-
   };
 
   const handleAction = async (
@@ -96,10 +105,11 @@ function CourseRegister() {
 
   return (
     <>
-      <StartButton
-        onClick={handleStartButtonClick}
+      <StartButton onClick={handleStartButtonClick} />
+      <RegisterFilters
+        onSearch={handleSearch}
+        isRegistrationStarted={isRegistrationStarted}
       />
-      <RegisterFilters onSearch={handleSearch} isRegistrationStarted={isRegistrationStarted} />
       <TableTitleWrap>
         <TableTitle>수강대상교과목</TableTitle>
       </TableTitleWrap>
@@ -110,10 +120,7 @@ function CourseRegister() {
         height='35rem'
         onAction={handleAction}
       />
-      <RegisteredList
-        list={registeredList}
-        refreshAll={refreshAll}
-      />
+      <RegisteredList list={registeredList} refreshAll={refreshAll} />
     </>
   );
 }

src/components/Header/TopMenu.tsx

@@ -4,7 +4,7 @@ import {useDispatch} from 'react-redux';
 import Cookies from 'js-cookie';
 import {baseAPI} from '@/apis/utils/instance';
 import {useAppSelector} from '@/store/hooks';
-import {clearUserInfo} from '@/store/userSlice';
+import {clearUserInfo} from '@/store/modules/userSlice';
 import {deleteAll} from '@/store/modules/tabSlice';
 import logout from '@assets/img/logout.png';
 import Clock from './Clock';
@@ -41,7 +41,7 @@ const LogoutBtn = styled.button`
   background-size: 1.8rem;
   width: 1.8rem;
   height: 1.8rem;
-    margin-right: 1rem;
+  margin-right: 1rem;
   &:hover {
     filter: brightness(20%);
   }

src/components/Header/TopNav.tsx

@@ -12,6 +12,10 @@ const TopNavContatiner = styled.div`
   display: flex;
   flex-shrink: 0;
   align-items: center;
+
+  @media ${props => props.theme.device.mobile} {
+    display: none;
+  }
 `;
 
 const TopNavWrap = styled.div`

src/components/Header/index.tsx

@@ -8,40 +8,39 @@ function Header() {
     <HeaderContainer>
       <LogoBox>
         <img src={logo} />
+        <TopNav />
       </LogoBox>
       <HeaderBox>
-        <TopNav />
         <TopMenu />
       </HeaderBox>
     </HeaderContainer>
   );
 }
 
 const HeaderContainer = styled.div`
-    border-top: 0.5rem solid ${props => props.theme.colors.primary};
-    max-width: 100%;
-    height: 7rem;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
+  border-top: 0.5rem solid ${props => props.theme.colors.primary};
+  max-width: 100%;
+  height: 7rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 `;
 
 const LogoBox = styled.div`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 23rem;
-    > img {
-        height: 6rem;
-        display: block;
-    }
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 1rem;
+  > img {
+    height: 6rem;
+    display: block;
+  }
 `;
 
 const HeaderBox = styled.div`
-    display: flex;
-    flex-grow: 1;
-    height: 100%;
-    justify-content: space-between;
+  display: flex;
+  height: 100%;
+  justify-content: space-between;
 `;
 
 export default Header;