Merge pull request #283 from GDSC-PKNU-Official/refactor/#282

Refactor/#282: 프로젝트 폴더 구조 개펀

src/App.tsx

@@ -1,23 +1,23 @@
+import BodyLayout from '@components/BodyLayout';
 import FooterTab from '@components/FooterTab';
 import Header from '@components/Header';
 import Announcement from '@pages/Announcement';
-import BodyLayout from '@pages/BodyLayout';
 import Home from '@pages/Home';
 import MajorDecision from '@pages/MajorDecision';
 import Map from '@pages/Map';
-import MapProvider from '@pages/Map/Provider';
 import My from '@pages/My';
 import Tip from '@pages/Tip';
 import RouteChangeTracker from '@utils/routeChangeTracker';
-import { Routes, Route, useLocation } from 'react-router-dom';
+import { Routes, Route } from 'react-router-dom';
+
+import { OverlayProvider } from './components/Providers';
 
 const App = () => {
-  const location = useLocation();
   RouteChangeTracker();
 
   return (
     <>
-      {location.pathname !== '/map' && <Header />}
+      <Header />
       <Routes>
         <Route element={<BodyLayout />}>
           <Route path="/" element={<Home />} />
@@ -26,7 +26,7 @@ const App = () => {
           <Route path="/my" element={<My />} />
           <Route path="/tip" element={<Tip />} />
         </Route>
-        <Route element={<MapProvider />}>
+        <Route element={<OverlayProvider />}>
           <Route path="/map" element={<Map />} />
         </Route>
       </Routes>

src/components/Card/AnnounceCard/index.test.tsx

@@ -1,5 +1,5 @@
 import http from '@apis/http';
-import MajorProvider from '@components/MajorProvider';
+import MajorProvider from '@components/Providers/MajorProvider';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { AnnounceItemList } from '@type/announcement';

src/components/Card/InformCard/index.test.tsx

@@ -1,5 +1,5 @@
-import AlertModal from '@components/Modal/AlertModal';
-import ModalsProvider from '@components/ModalsProvider';
+import AlertModal from '@components/Common/Modal/AlertModal';
+import ModalsProvider from '@components/Providers/ModalsProvider';
 import { MODAL_MESSAGE } from '@constants/modal-messages';
 import MajorContext from '@contexts/major';
 import useModals from '@hooks/useModals';
@@ -9,8 +9,8 @@ import Major from '@type/major';
 import { IconKind } from '@type/styles/icon';
 import { act } from 'react-dom/test-utils';
 import { MemoryRouter } from 'react-router-dom';
-
 import '@testing-library/jest-dom';
+
 import InformCard from './index';
 
 type INFORM_CARD_TYPE = 'ANNOUNCEMENT' | 'GRADUATION';

src/components/Card/InformCard/index.tsx

@@ -1,6 +1,5 @@
-import Icon from '@components/Icon';
+import Icon from '@components/Common/Icon';
 import { MODAL_BUTTON_MESSAGE, MODAL_MESSAGE } from '@constants/modal-messages';
-import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import useMajor from '@hooks/useMajor';
 import useModals, { modals } from '@hooks/useModals';

src/components/Button/Toggle/index.tsx → src/components/Common/Button/Toggle/index.tsx

@@ -8,11 +8,6 @@ interface Props {
   animation: boolean;
 }
 
-interface Circle {
-  isOn: boolean;
-  animation: boolean;
-}
-
 const ToggleButton = (props: Props) => {
   const { isOn, changeState, animation } = props;
 
@@ -25,6 +20,11 @@ const ToggleButton = (props: Props) => {
 
 export default ToggleButton;
 
+// chore : Circle interface 위치 수정
+interface Circle {
+  isOn: boolean;
+  animation: boolean;
+}
 const Button = styled.button<Circle>`
   position: relative;
   border: none;

src/components/Modal/AlertModal/index.tsx → src/components/Common/Modal/AlertModal/index.tsx

@@ -1,5 +1,5 @@
-import Button from '@components/Button';
-import Icon from '@components/Icon';
+import Button from '@components/Common/Button';
+import Icon from '@components/Common/Icon';
 import { css } from '@emotion/react';
 import { THEME } from '@styles/ThemeProvider/theme';
 import { IconKind } from '@type/styles/icon';

src/components/Modal/ConfirmModal/index.tsx → src/components/Common/Modal/ConfirmModal/index.tsx

@@ -1,4 +1,4 @@
-import Button from '@components/Button';
+import Button from '@components/Common/Button';
 import { css } from '@emotion/react';
 import { THEME } from '@styles/ThemeProvider/theme';
 import React from 'react';

src/components/Modal/SuggestionModal/index.tsx → src/components/Common/Modal/SuggestionModal/index.tsx

@@ -1,6 +1,6 @@
 import http from '@apis/http';
-import Button from '@components/Button';
-import Icon from '@components/Icon';
+import Button from '@components/Common/Button';
+import Icon from '@components/Common/Icon';
 import { SERVER_URL } from '@config/index';
 import { MODAL_BUTTON_MESSAGE, MODAL_MESSAGE } from '@constants/modal-messages';
 import PLCACEHOLDER_MESSAGES from '@constants/placeholder-message';

src/components/FooterTab/index.tsx

@@ -1,9 +1,9 @@
-import Icon from '@components/Icon';
+import Icon from '@components/Common/Icon';
 import styled from '@emotion/styled';
 import useRouter from '@hooks/useRouter';
 import { THEME } from '@styles/ThemeProvider/theme';
 
-const footerTabs = [
+const FOOTER_TABS = [
   { kind: 'map', label: '지도', path: '/map' },
   { kind: 'home', label: '홈', path: '/' },
   { kind: 'accountCircle', label: '마이', path: '/my' },
@@ -16,7 +16,7 @@ const FooterTab = () => {
 
   return (
     <Footer>
-      {footerTabs.map(({ kind, label, path }) => (
+      {FOOTER_TABS.map(({ kind, label, path }) => (
         <TabButton
           role="button"
           key={kind}

src/components/Header/index.tsx

@@ -1,14 +1,19 @@
-import Icon from '@components/Icon';
+import Icon from '@components/Common/Icon';
 import SideBar from '@components/SideBar';
 import SideBarContent from '@components/SideBar/Content';
 import styled from '@emotion/styled';
 import useRoter from '@hooks/useRouter';
 import { THEME } from '@styles/ThemeProvider/theme';
 import { useState } from 'react';
+import { useLocation } from 'react-router-dom';
 
 const Header = () => {
   const { routerTo, goBack } = useRoter();
   const [open, setOpen] = useState<boolean>(false);
+  const location = useLocation();
+
+  if (location.pathname === '/map') return <></>;
+
   return (
     <HeaderContainer>
       <HeaderWrapper>

src/components/Card/AnnounceCard/Skeleton.tsx → src/components/List/AnnounceList/Skeleton.tsx

@@ -2,11 +2,11 @@ import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import SkeletomItem from '@styles/Skeleton/SkeletonItem';
 
-interface AnnounceCardSkeletonProps {
+interface AnnounceListSkeletonProps {
   length: number;
 }
 
-const AnnounceCardSkeleton = ({ length }: AnnounceCardSkeletonProps) => {
+const AnnounceListSkeleton = ({ length }: AnnounceListSkeletonProps) => {
   return (
     <>
       {Array.from({ length }, (_, idx) => (
@@ -28,7 +28,7 @@ const AnnounceCardSkeleton = ({ length }: AnnounceCardSkeletonProps) => {
   );
 };
 
-export default AnnounceCardSkeleton;
+export default AnnounceListSkeleton;
 
 const Card = styled.div`
   height: 28px;

src/components/Card/AnnounceCard/AnnounceList/index.tsx → src/components/List/AnnounceList/index.tsx

@@ -6,7 +6,7 @@ import { AnnounceItemList, AnnouncementType } from '@type/announcement';
 import { AxiosError, AxiosResponse } from 'axios';
 import { Fragment } from 'react';
 
-import AnnounceCard from '..';
+import AnnounceCard from '../../Card/AnnounceCard';
 
 type Resource =
   | AxiosResponse<AnnounceItemList>

src/components/List/CollegeList/CollegeItem.tsx

@@ -1,4 +1,4 @@
-import Icon from '@components/Icon';
+import Icon from '@components/Common/Icon';
 import styled from '@emotion/styled';
 import useRouter from '@hooks/useRouter';
 import { THEME } from '@styles/ThemeProvider/theme';
@@ -54,8 +54,4 @@ const ListWrapper = styled.div`
     transform: scale(0.95);
     opacity: 0.6;
   }
-
-  &: hover {
-    cursor: pointer;
-  }
 `;

src/components/List/Skeleton/college.tsx → src/components/List/CollegeList/Skeleton.tsx

@@ -3,11 +3,11 @@ import SkeletomItem from '@styles/Skeleton/SkeletonItem';
 import { THEME } from '@styles/ThemeProvider/theme';
 import React from 'react';
 
-interface CollegeSkeletonProps {
+interface CollegeListSkeletonProps {
   length: number;
 }
 
-const CollegeSkeleton = ({ length }: CollegeSkeletonProps) => {
+const CollegeListSkeleton = ({ length }: CollegeListSkeletonProps) => {
   return (
     <>
       {Array.from({ length }, (_, idx) => (
@@ -20,7 +20,7 @@ const CollegeSkeleton = ({ length }: CollegeSkeletonProps) => {
   );
 };
 
-export default CollegeSkeleton;
+export default CollegeListSkeleton;
 
 const ListWrapper = styled.div`
   display: flex;

src/components/List/CollegeList/index.tsx

@@ -4,7 +4,7 @@ import { THEME } from '@styles/ThemeProvider/theme';
 import React, { Suspense } from 'react';
 
 import CollegeItem from './CollegeItem';
-import CollegeSkeleton from '../Skeleton/college';
+import CollegeSkeleton from './Skeleton';
 
 const CollegeList = () => {
   return (

src/components/List/DepartmentList/DepartmentItem.tsx

@@ -1,6 +1,6 @@
 import http from '@apis/http';
-import Button from '@components/Button';
-import Icon from '@components/Icon';
+import Button from '@components/Common/Button';
+import Icon from '@components/Common/Icon';
 import { SERVER_URL } from '@config/index';
 import { MODAL_BUTTON_MESSAGE, MODAL_MESSAGE } from '@constants/modal-messages';
 import { css } from '@emotion/react';
@@ -115,10 +115,6 @@ const ListWrapper = styled.div`
     transform: scale(0.95);
     opacity: 0.6;
   }
-
-  &: hover {
-    cursor: pointer;
-  }
 `;
 
 const ButtonContainer = styled.div`

src/components/List/Skeleton/department.tsx → src/components/List/DepartmentList/Skeleton.tsx

@@ -1,15 +1,15 @@
-import Button from '@components/Button';
+import Button from '@components/Common/Button';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import SkeletomItem from '@styles/Skeleton/SkeletonItem';
 import { THEME } from '@styles/ThemeProvider/theme';
 import React from 'react';
 
-interface DepartmentSkeletonProps {
+interface DepartmentListSkeletonProps {
   length: number;
 }
 
-const DepartmentSkeleton = ({ length }: DepartmentSkeletonProps) => {
+const DepartmentListSkeleton = ({ length }: DepartmentListSkeletonProps) => {
   return (
     <>
       <div
@@ -31,7 +31,7 @@ const DepartmentSkeleton = ({ length }: DepartmentSkeletonProps) => {
   );
 };
 
-export default DepartmentSkeleton;
+export default DepartmentListSkeleton;
 
 const ListWrapper = styled.div`
   display: flex;

src/components/List/DepartmentList/index.test.tsx

@@ -1,7 +1,7 @@
+import ConfirmModal from '@components/Common/Modal/ConfirmModal';
 import DepartmentList from '@components/List/DepartmentList';
-import MajorProvider from '@components/MajorProvider';
-import ConfirmModal from '@components/Modal/ConfirmModal';
-import ModalsProvider from '@components/ModalsProvider';
+import MajorProvider from '@components/Providers/MajorProvider';
+import ModalsProvider from '@components/Providers/ModalsProvider';
 import { MODAL_MESSAGE } from '@constants/modal-messages';
 import useMajor from '@hooks/useMajor';
 import useModals from '@hooks/useModals';

src/components/List/DepartmentList/index.tsx

@@ -6,7 +6,7 @@ import React, { Suspense } from 'react';
 import { useParams } from 'react-router-dom';
 
 import DepartmentItem from './DepartmentItem';
-import DepartmentSkeleton from '../Skeleton/department';
+import DepartmentSkeleton from './Skeleton';
 
 const DepartmentList = () => {
   const { college } = useParams();

src/pages/Map/Provider/index.tsx → src/components/Providers/OverlayProvider/index.tsx

@@ -4,9 +4,9 @@ import useUserLocation from '@hooks/useUserLocation';
 import React from 'react';
 import { Outlet } from 'react-router-dom';
 
-import { CustomOverlay } from '../handlers';
+import CustomOverlay from './overlay';
 
-const MapProvider = () => {
+const OverlayProvider = () => {
   const { openModal, closeModal } = useModals();
   const userLocation = useUserLocation();
   const customOverlay = new CustomOverlay(openModal, closeModal, userLocation);
@@ -18,4 +18,4 @@ const MapProvider = () => {
   );
 };
 
-export default MapProvider;
+export default OverlayProvider;

src/components/Provider/Toast/index.tsx → src/components/Providers/ToastsProvider/index.tsx

@@ -6,7 +6,7 @@ interface ToastProviderProps {
   children: React.ReactNode;
 }
 
-const ToastProvider = ({ children }: ToastProviderProps) => {
+const ToastsProvider = ({ children }: ToastProviderProps) => {
   const [toasts, setToasts] = useState<ToastState[]>([]);
 
   return (
@@ -18,4 +18,4 @@ const ToastProvider = ({ children }: ToastProviderProps) => {
   );
 };
 
-export default ToastProvider;
+export default ToastsProvider;

src/components/Providers/index.ts

@@ -0,0 +1,4 @@
+export { default as MajorProvider } from './MajorProvider/index';
+export { default as ModalsProvider } from './ModalsProvider/index';
+export { default as ToastsProvider } from './ToastsProvider/index';
+export { default as OverlayProvider } from './OverlayProvider/index';

src/components/SideBar/Content/index.tsx

@@ -1,4 +1,4 @@
-import Icon from '@components/Icon';
+import Icon from '@components/Common/Icon';
 import SIDEBAR_CONTENT from '@constants/sidebar';
 import styled from '@emotion/styled';
 import useRouter from '@hooks/useRouter';

src/components/SideBar/index.tsx

@@ -1,5 +1,5 @@
-import Icon from '@components/Icon';
-import Image from '@components/Image';
+import Icon from '@components/Common/Icon';
+import Image from '@components/Common/Image';
 import ASSET_PATH from '@constants/assets-path';
 import { css, keyframes } from '@emotion/react';
 import styled from '@emotion/styled';

src/hooks/useModals.ts

@@ -1,6 +1,6 @@
-import AlertModal from '@components/Modal/AlertModal';
-import ConfirmModal from '@components/Modal/ConfirmModal';
-import SuggestionModal from '@components/Modal/SuggestionModal';
+import AlertModal from '@components/Common/Modal/AlertModal';
+import ConfirmModal from '@components/Common/Modal/ConfirmModal';
+import SuggestionModal from '@components/Common/Modal/SuggestionModal';
 import ModalsContext from '@contexts/modals';
 import {
   ComponentProps,

src/main.tsx

@@ -1,8 +1,10 @@
-import MajorProvider from '@components/MajorProvider';
-import Modals from '@components/Modal/Modals';
-import ModalsProvider from '@components/ModalsProvider';
-import ToastProvider from '@components/Provider/Toast';
-import Toasts from '@components/Toast/Toasts';
+import Modals from '@components/Common/Modal/Modals';
+import Toasts from '@components/Common/Toast/Toasts';
+import {
+  MajorProvider,
+  ModalsProvider,
+  ToastsProvider,
+} from '@components/Providers';
 import ThemeProvider from '@styles/ThemeProvider';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
@@ -29,11 +31,11 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
       <ThemeProvider>
         <MajorProvider>
           <ModalsProvider>
-            <ToastProvider>
+            <ToastsProvider>
               <Modals />
               <Toasts />
               <App />
-            </ToastProvider>
+            </ToastsProvider>
           </ModalsProvider>
         </MajorProvider>
       </ThemeProvider>