Merge pull request #296 from GDSC-PKNU-Official/refactor/#293

Refactor/#293: 모달 합성 컴포넌트 적용 && 지도 페이지 의존성 주입 Context API 적용

src/@types/modals.ts

@@ -1,8 +1,5 @@
-import { modals } from '@hooks/useModals';
-
 export type Modals =
   | Array<{
-      Component: (typeof modals)[keyof typeof modals];
-      props: object;
+      Component: React.ReactElement<{ chidren: React.ReactNode }>;
     }>
   | [];

src/App.tsx

@@ -5,14 +5,12 @@ import Announcement from '@pages/Announcement';
 import FAQPage from '@pages/FAQ';
 import Home from '@pages/Home';
 import MajorDecision from '@pages/MajorDecision';
-import Map from '@pages/Map';
+import MapPage from '@pages/Map';
 import My from '@pages/My';
 import Tip from '@pages/Tip';
 import RouteChangeTracker from '@utils/routeChangeTracker';
 import { Routes, Route } from 'react-router-dom';
 
-import { OverlayProvider } from './components/Providers';
-
 const App = () => {
   RouteChangeTracker();
 
@@ -28,9 +26,7 @@ const App = () => {
           <Route path="/tip/:type" element={<Tip />} />
           <Route path="/FAQ" element={<FAQPage />} />
         </Route>
-        <Route element={<OverlayProvider />}>
-          <Route path="/map" element={<Map />} />
-        </Route>
+        <Route path="/map" element={<MapPage />} />
       </Routes>
       <FooterTab />
     </>

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

@@ -1,6 +1,6 @@
-import AlertModal from '@components/Common/Modal/AlertModal';
+import Modal from '@components/Common/Modal';
 import ModalsProvider from '@components/Providers/ModalsProvider';
-import { MODAL_MESSAGE } from '@constants/modal-messages';
+import { MODAL_BUTTON_MESSAGE, MODAL_MESSAGE } from '@constants/modal-messages';
 import MajorContext from '@contexts/major';
 import useModals from '@hooks/useModals';
 import { render, screen } from '@testing-library/react';
@@ -140,13 +140,16 @@ describe('InformCard 컴포넌트 테스트', () => {
       await userEvent.click(card);
     });
 
-    expect(useModals().openModal).toHaveBeenCalledWith(AlertModal, {
-      message: MODAL_MESSAGE.ALERT.SET_MAJOR,
-      buttonMessage: '전공선택하러 가기',
-      iconKind: 'plus',
-      onClose: expect.any(Function),
-      routerTo: expect.any(Function),
-    });
+    expect(useModals().openModal).toHaveBeenCalledWith(
+      <Modal>
+        <Modal.ModalTitle title={MODAL_MESSAGE.ALERT.SET_MAJOR} />
+        <Modal.ModalButton
+          text={MODAL_BUTTON_MESSAGE.SET_MAJOR}
+          iconKind="plus"
+          onClick={expect.any(Function)}
+        />
+      </Modal>,
+    );
   });
 
   it('전역상태가 설정 됐을 경우, 졸업요건 클릭 시 페이지 이동 테스트', async () => {

src/components/Card/InformCard/index.tsx

@@ -1,8 +1,9 @@
 import Icon from '@components/Common/Icon';
+import Modal from '@components/Common/Modal';
 import { MODAL_BUTTON_MESSAGE, MODAL_MESSAGE } from '@constants/modal-messages';
 import styled from '@emotion/styled';
 import useMajor from '@hooks/useMajor';
-import useModals, { modals } from '@hooks/useModals';
+import useModals from '@hooks/useModals';
 import useRouter from '@hooks/useRouter';
 import { THEME } from '@styles/ThemeProvider/theme';
 import { IconKind } from '@type/styles/icon';
@@ -22,7 +23,7 @@ const InformCard = ({
 }: InformCardProps) => {
   const { major } = useMajor();
   const { routerTo } = useRouter();
-  const { openModal, closeModal } = useModals();
+  const { openModal } = useModals();
 
   const routeToMajorDecisionPage = () => routerTo('/major-decision');
 
@@ -31,42 +32,39 @@ const InformCard = ({
       onClick();
       return;
     }
-    openModal<typeof modals.alert>(modals.alert, {
-      message: MODAL_MESSAGE.ALERT.SET_MAJOR,
-      buttonMessage: MODAL_BUTTON_MESSAGE.SET_MAJOR,
-      iconKind: 'plus',
-      onClose: () => closeModal(modals.alert),
-      routerTo: () => {
-        closeModal(modals.alert);
-        routeToMajorDecisionPage();
-      },
-    });
+
+    openModal(
+      <Modal>
+        <Modal.ModalTitle title={MODAL_MESSAGE.ALERT.SET_MAJOR} />
+        <Modal.ModalButton
+          text={MODAL_BUTTON_MESSAGE.SET_MAJOR}
+          iconKind="plus"
+          onClick={routeToMajorDecisionPage}
+        />
+      </Modal>,
+    );
   };
 
   return (
-    <>
-      <Card data-testid="card" onClick={handleMajorModal}>
-        <IconContainer>
-          <Icon kind={icon} color={THEME.TEXT.WHITE} />
-        </IconContainer>
-        <TextContainer>
-          <span>{title}</span>
-          <span>{title} 보러가기</span>
-        </TextContainer>
-      </Card>
-    </>
+    <Card data-testid="card" onClick={handleMajorModal}>
+      <IconContainer>
+        <Icon kind={icon} color={THEME.TEXT.WHITE} />
+      </IconContainer>
+      <TextContainer>
+        <span>{title}</span>
+        <span>{title} 보러가기</span>
+      </TextContainer>
+    </Card>
   );
 };
 
 export default InformCard;
 
 const Card = styled.div`
-  display: flex;
-  align-items: center;
   padding: 3% 1% 2% 0;
   height: 4rem;
-
-  transition: all 0.2s ease-in-out;
+  display: flex;
+  align-items: center;
 
   span:nth-of-type(1) {
     font-size: 12px;
@@ -78,6 +76,8 @@ const Card = styled.div`
     font-weight: bold;
     color: ${THEME.TEXT.BLACK};
   }
+
+  transition: all 0.2s ease-in-out;
 `;
 
 const TextContainer = styled.div`
@@ -93,7 +93,6 @@ const IconContainer = styled.div`
   justify-content: center;
   align-items: center;
   margin-right: 10px;
-
   border-radius: 50%;
   background-color: ${THEME.PRIMARY};
 `;

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

@@ -20,11 +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/Common/Modal/ModalButton.tsx

@@ -0,0 +1,37 @@
+import { css } from '@emotion/react';
+import useModals from '@hooks/useModals';
+import { THEME } from '@styles/ThemeProvider/theme';
+import { IconKind } from '@type/styles/icon';
+import React from 'react';
+
+import Button from '../Button';
+import Icon from '../Icon';
+
+interface ModalButtonProps {
+  text: string;
+  iconKind?: IconKind & 'plus';
+  onClick?: () => void;
+}
+
+const ModalButton = ({ text, iconKind, onClick }: ModalButtonProps) => {
+  const { closeModal } = useModals();
+
+  const onButtonClick = () => {
+    closeModal();
+    onClick && onClick();
+  };
+
+  return (
+    <Button
+      onClick={onButtonClick}
+      css={css`
+        font-size: 0.8rem;
+      `}
+    >
+      {iconKind && <Icon kind={iconKind} color={THEME.TEXT.WHITE} />}
+      {text}
+    </Button>
+  );
+};
+
+export default ModalButton;

src/components/Common/Modal/ModalTitle.tsx

@@ -0,0 +1,22 @@
+import styled from '@emotion/styled';
+import { THEME } from '@styles/ThemeProvider/theme';
+import React from 'react';
+
+interface ModalTitleProps {
+  title: string;
+}
+
+const ModalTitle = ({ title }: ModalTitleProps) => {
+  return <Title>{title}</Title>;
+};
+
+export default ModalTitle;
+
+const Title = styled.span`
+  padding: 20px 0 20px 0;
+  text-align: center;
+  line-height: 1.3;
+  font-weight: bold;
+  white-space: pre-line;
+  color: ${THEME.TEXT.GRAY};
+`;

src/components/Common/Modal/Modals/index.tsx

@@ -7,8 +7,8 @@ const Modals = () => {
   return (
     <>
       {modals &&
-        modals.map(({ Component, props }, idx) => {
-          return <Component key={idx} {...(props as any)} />;
+        modals.map(({ Component }, idx) => {
+          return <React.Fragment key={idx}>{Component}</React.Fragment>;
         })}
     </>
   );