design: 마이페이지 퍼블리싱 (#8)

* design: 마이페이지 에셋 추가

* design: 마이페이지 퍼블리싱

* design: ConfirmModal 컴포넌트 구현 및 탈퇴 모달 적용

* design: 모달 배경 이미지 적용

* design: 모달 컴포넌트 버튼 비율 동일하도록 수정

* refactor: 중복되는 버튼 디자인 스타일 클래스로 분리

* design: 배경 오버레이 이미지 추가

* fix: useViewport 계산 상수 수정

* feat: 온도에 맞는 텍스트 보여주는 함수 추가

* refactor: hn 태그 적용

* refactor: Header 컴포넌트를 공통 레이아웃으로 분리

* refactor: 모달 오버레이 공통 컴포넌트로 분리

Author: AAminha

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;