+ 
+
+ );
+};
+
+export default LpCard;
diff --git a/Week8/src/components/Cards/LpCardListSkeleton.tsx b/Week8/src/components/Cards/LpCardListSkeleton.tsx
new file mode 100644
index 00000000..e4e31a94
--- /dev/null
+++ b/Week8/src/components/Cards/LpCardListSkeleton.tsx
@@ -0,0 +1,17 @@
+import LpCardSkeleton from "./LpCardSkeleton";
+
+interface LpCardListSkeletonProps {
+ count: number;
+}
+
+const LpCardListSkeleton = ({ count }: LpCardListSkeletonProps) => {
+ return (
+ <>
+ {new Array(count).fill(0).map((_, idx) => (
+
+
+ {title}
+{updatedAt.slice(0, 10)}
+❤️ {likes.length}
+
+ {/* 이미지 영역 */}
+
+
+ {/* 텍스트 영역 */}
+
+ );
+};
+
+export default LpCardSkeleton;
diff --git a/Week8/src/components/Comment/CommentItem.tsx b/Week8/src/components/Comment/CommentItem.tsx
new file mode 100644
index 00000000..b0f21c13
--- /dev/null
+++ b/Week8/src/components/Comment/CommentItem.tsx
@@ -0,0 +1,98 @@
+import { commentDetailDto } from "../../types/lp";
+import { HiPencil, HiTrash, HiCheck, HiX } from "react-icons/hi";
+import { ResponseMyInfoDto } from "../../types/auth";
+
+export interface CommentItemProps {
+ comment: commentDetailDto;
+ isEditing: boolean;
+ editText: string;
+ myInfo: ResponseMyInfoDto;
+ onEditClick: (comment: commentDetailDto) => void;
+ onDeleteClick: (commentId: number) => void;
+ onEditChange: (text: string) => void;
+ onEditCancel: () => void;
+ onEditSubmit: () => void;
+}
+
+const CommentItem: React.FC
+
+
+
+
+
+
+ 
+
+
+ {comment.author.name} +
+ {isEditing ? ( +