Merge branch 'develop' of https://github.com/prgrms-web-devcourse-final-project/WEB2_3_9crops_FE into 5-design-write

Author: wldnjs990

src/App.tsx

@@ -1,6 +1,7 @@
 import { Route, Routes } from 'react-router';
 
 import useViewport from './hooks/useViewport';
+import Header from './layouts/Header';
 import Home from './pages/Home';
 import LetterBoardPage from './pages/LetterBoard';
 import LetterBoardDetailPage from './pages/LetterBoardDetail';
@@ -34,7 +35,7 @@ const App = () => {
           <Route path="letter/:id" element={<LetterBoardDetailPage />} />
           <Route path="rolling/:id" element={<RollingPaperPage />} />
         </Route>
-        <Route path="mypage">
+        <Route path="mypage" element={<Header />}>
           <Route index element={<MyPage />} />
           <Route path="notifications" element={<NotificationsPage />} />
         </Route>

src/assets/icons/alarm.svg

@@ -0,0 +1,5 @@
+import AlarmIcon from './alarm.svg?react';
+import ArrowLeftIcon from './arrow-left.svg?react';
+import PersonIcon from './person.svg?react';
+
+export { AlarmIcon, PersonIcon, ArrowLeftIcon };

src/assets/icons/arrow-left.svg

@@ -0,0 +1,58 @@
+import ModalBg from '@/assets/images/yellow-modal.png';
+
+import ModalOverlay from './ModalOverlay';
+
+interface ConfirmModalProps {
+  title: string;
+  description: string;
+  cancelText: string;
+  confirmText: string;
+  children?: React.ReactNode;
+  onCancel: () => void;
+  onConfirm: () => void;
+}
+
+const ConfirmModal = ({
+  title,
+  description,
+  cancelText,
+  confirmText,
+  children,
+  onCancel,
+  onConfirm,
+}: ConfirmModalProps) => {
+  // TODO: 배경 이미지 삽입
+  // TODO: 전역 상태로 관리해야하는지 고민
+  return (
+    <ModalOverlay>
+      <div className="w-73">
+        <section className="relative mb-12 overflow-hidden rounded-lg p-5">
+          <img src={ModalBg} className="absolute inset-0 z-[-10] h-full w-full" />
+          <div className="flex flex-col gap-1">
+            <p className="body-m text-gray-80">{title}</p>
+            <p className="caption-r text-black">{description}</p>
+          </div>
+          {children}
+        </section>
+        <section className="flex items-center gap-6">
+          <button
+            type="button"
+            className="body-m secondary-btn h-10 flex-1 basis-1/2"
+            onClick={onCancel}
+          >
+            {cancelText}
+          </button>
+          <button
+            type="button"
+            className="primary-btn body-m h-10 flex-1 basis-1/2"
+            onClick={onConfirm}
+          >
+            {confirmText}
+          </button>
+        </section>
+      </div>
+    </ModalOverlay>
+  );
+};
+
+export default ConfirmModal;

src/assets/icons/index.ts

@@ -0,0 +1,13 @@
+interface ModalOverlayProps {
+  children: React.ReactElement;
+}
+
+const ModalOverlay = ({ children }: ModalOverlayProps) => {
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60">
+      {children}
+    </div>
+  );
+};
+
+export default ModalOverlay;

src/assets/icons/person.svg

@@ -3,8 +3,8 @@ import { useEffect } from 'react';
 function useViewport() {
   useEffect(() => {
     const setViewport = () => {
-      const vh = window.innerHeight * 0.00999;
-      const vw = document.documentElement.clientWidth * 0.00999;
+      const vh = window.innerHeight * 0.01;
+      const vw = document.documentElement.clientWidth * 0.01;
       document.documentElement.style.setProperty('--vh', `${vh}px`);
       document.documentElement.style.setProperty('--vw', `${vw}px`);
     };