+
+
+);
+
+export default CommentSkeleton;
diff --git a/mission/chapter08/mission01/src/components/ConfirmModal.tsx b/mission/chapter08/mission01/src/components/ConfirmModal.tsx
new file mode 100644
index 00000000..3fdb823a
--- /dev/null
+++ b/mission/chapter08/mission01/src/components/ConfirmModal.tsx
@@ -0,0 +1,38 @@
+interface Props {
+ message: string;
+ confirmLabel?: string;
+ onConfirm: () => void;
+ onCancel: () => void;
+ isPending?: boolean;
+}
+
+const ConfirmModal = ({ message, confirmLabel = '예', onConfirm, onCancel, isPending }: Props) => (
+
+
+
+
+
+
+
+);
+
+export default ConfirmModal;
diff --git a/mission/chapter08/mission01/src/components/Header.tsx b/mission/chapter08/mission01/src/components/Header.tsx
new file mode 100644
index 00000000..a5a313be
--- /dev/null
+++ b/mission/chapter08/mission01/src/components/Header.tsx
@@ -0,0 +1,70 @@
+import { useNavigate } from 'react-router-dom';
+import { useMutation } from '@tanstack/react-query';
+import { useAuth } from '../contexts/authContextCore';
+import { signout } from '../apis/authApi';
+
+interface Props {
+ onMenuClick: () => void;
+}
+
+const Header = ({ onMenuClick }: Props) => {
+ const navigate = useNavigate();
+ const { isLoggedIn, user, logout } = useAuth();
+
+ const logoutMutation = useMutation({
+ mutationFn: signout,
+ onSettled: () => {
+ logout();
+ navigate('/');
+ },
+ });
+
+ return (
+ e.stopPropagation()}
+ >
+
+ {message}
+
+
+
+
+
+ {isLoggedIn ? (
+ <>
+ {user?.name}님 반갑습니다.
+
+
+ ) : (
+ <>
+
+
+
+ )}
+
+
+ setSidebarOpen(prev => !prev)} />
+ setSidebarOpen(false)} />
+
+
+
+
+ );
+};
+
+export default Layout;
diff --git a/mission/chapter08/mission01/src/components/LpCard.tsx b/mission/chapter08/mission01/src/components/LpCard.tsx
new file mode 100644
index 00000000..79415bd9
--- /dev/null
+++ b/mission/chapter08/mission01/src/components/LpCard.tsx
@@ -0,0 +1,39 @@
+import { useNavigate } from 'react-router-dom';
+import type { Lp } from '../types';
+import { formatRelativeTime } from '../utils/time';
+
+const LpCard = ({ lp }: { lp: Lp }) => {
+ const navigate = useNavigate();
+
+ return (
+ navigate(`/lps/${lp.id}`)}
+ className="group relative aspect-square cursor-pointer overflow-hidden bg-zinc-900"
+ >
+ {lp.thumbnail ? (
+ 
+ ) : (
+
+ );
+};
+
+export default LpCard;
diff --git a/mission/chapter08/mission01/src/components/LpCardSkeleton.tsx b/mission/chapter08/mission01/src/components/LpCardSkeleton.tsx
new file mode 100644
index 00000000..4f5db88f
--- /dev/null
+++ b/mission/chapter08/mission01/src/components/LpCardSkeleton.tsx
@@ -0,0 +1,5 @@
+const LpCardSkeleton = () => (
+
+);
+
+export default LpCardSkeleton;
diff --git a/mission/chapter08/mission01/src/components/LpFormModal.tsx b/mission/chapter08/mission01/src/components/LpFormModal.tsx
new file mode 100644
index 00000000..8f30985c
--- /dev/null
+++ b/mission/chapter08/mission01/src/components/LpFormModal.tsx
@@ -0,0 +1,195 @@
+import { useState, useRef, useEffect } from 'react';
+
+interface LpFormData {
+ title: string;
+ content: string;
+ thumbnail?: string;
+ tags: string[];
+}
+
+interface Props {
+ isOpen: boolean;
+ onClose: () => void;
+ modalTitle: string;
+ initialData?: LpFormData;
+ onSubmit: (data: LpFormData) => void;
+ isPending: boolean;
+}
+
+const LpFormContent = ({ onClose, modalTitle, initialData, onSubmit, isPending }: Omit
+ ♪
+
+ )}
+
+
+
+ {lp.title}
+
+ {formatRelativeTime(lp.createdAt)}
+ ♥ {lp.likes.length}
+
+
+
e.stopPropagation()}
+ >
+
+
+
+ {modalTitle}
+ +
+
+
+ setTitle(e.target.value)}
+ placeholder="LP 제목을 입력해주세요"
+ className="w-full rounded-xl border border-zinc-700 bg-zinc-800 px-4 py-2.5 text-sm text-white placeholder-zinc-600 outline-none focus:border-rose-500 transition"
+ />
+
+
+
+
+