From 4eb903017c8b46a62e4cbcb6ed5af3ccbda545ef Mon Sep 17 00:00:00 2001
From: ssu-it-support <ssudeveloper2024@gmail.com>
Date: Thu, 10 Oct 2024 00:23:44 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=A9=94=EC=9D=B8=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EB=B6=84=EC=8B=A4=EB=AC=BC=20=EA=B2=8C=EC=8B=9C?=
 =?UTF-8?q?=ED=8C=90=20=EC=8D=B8=EB=84=A4=EC=9D=BC=20=EC=A7=80=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../main/containers/LostArticleSection.tsx    | 69 ++++++++++++-------
 1 file changed, 45 insertions(+), 24 deletions(-)

diff --git a/src/pages/main/containers/LostArticleSection.tsx b/src/pages/main/containers/LostArticleSection.tsx
index d38125fc..b4490af2 100644
--- a/src/pages/main/containers/LostArticleSection.tsx
+++ b/src/pages/main/containers/LostArticleSection.tsx
@@ -18,6 +18,30 @@ const LostArticleSection = () => {
 
   const navigate = useNavigate();
 
+  // PostCard 컴포넌트화
+  const PostCardWrapper = ({
+    postId,
+    title,
+    subtitle,
+    imgUrl,
+    date,
+  }: {
+    postId: number;
+    title: string;
+    subtitle: string;
+    imgUrl: string;
+    date: string;
+  }) => (
+    <PostCardMissing
+      key={postId}
+      title={title}
+      subtitle={subtitle}
+      imgUrl={imgUrl ? imgUrl : `image/default/thumbnail/default_thumbnail.png`}
+      date={formatYYYYMMDDHHMM(date)}
+      onClick={() => navigate(`/lost-article/${postId}`, { state: { postId } })}
+    />
+  );
+
   return (
     <section>
       <div className="flex items-center">
@@ -33,59 +57,56 @@ const LostArticleSection = () => {
         />
       </div>
       <Spacing size={18} direction="vertical" />
+
       {/* xs */}
-      {width < 390 ? (
+      {width < 390 && (
         <div className="flex w-[calc(100dvw-3.125rem)] gap-[1.063rem] overflow-x-scroll pr-[1.063rem] scrollbar-hide">
           {data?.data.postListResDto.map((item) => (
-            <PostCardMissing
+            <PostCardWrapper
               key={item.postId}
-              size={Size.view}
+              postId={item.postId}
               title={item.title}
               subtitle={item.content}
               imgUrl={item.thumbNail}
-              date={formatYYYYMMDDHHMM(item.date)}
-              onClick={() => navigate(`/lost-article/${item.postId}`, { state: { postId: item.postId } })}
-            ></PostCardMissing>
+              date={item.date}
+            />
           ))}
         </div>
-      ) : null}
+      )}
+
       {/* sm, md */}
-      {width < 1080 && width >= 390 ? (
+      {width >= 390 && width < 1080 && (
         <div className="flex w-[calc(100dvw-3.125rem)] gap-[1.063rem] overflow-x-scroll pr-[1.063rem] scrollbar-hide">
           {data?.data.postListResDto.map((item) => (
-            <PostCardMissing
+            <PostCardWrapper
               key={item.postId}
+              postId={item.postId}
               title={item.title}
               subtitle={item.content}
               imgUrl={item.thumbNail}
-              date={formatYYYYMMDDHHMM(item.date)}
-              onClick={() => navigate(`/lost-article/${item.postId}`, { state: { postId: item.postId } })}
-            ></PostCardMissing>
+              date={item.date}
+            />
           ))}
         </div>
-      ) : null}
+      )}
+
       {/* xxl, xl, lg */}
-      {width >= 1080 ? (
+      {width >= 1080 && (
         <div className="flex w-[calc(100dvw-3.125rem)] gap-[1.063rem] overflow-x-scroll pr-[1.063rem] scrollbar-hide">
           {data?.data.postListResDto.map((item) => (
-            <PostCardMissing
+            <PostCardWrapper
               key={item.postId}
+              postId={item.postId}
               title={item.title}
               subtitle={item.content}
               imgUrl={item.thumbNail}
-              date={formatYYYYMMDDHHMM(item.date)}
-              onClick={() => navigate(`/lost-article/${item.postId}`, { state: { postId: item.postId } })}
-            ></PostCardMissing>
+              date={item.date}
+            />
           ))}
         </div>
-      ) : null}
+      )}
     </section>
   );
-  // function EmptyPost() {
-  //   return (
-  //     <p className="flex h-[24.25rem] w-full items-center justify-center text-gray-600">등록된 게시물이 없습니다.</p>
-  //   );
-  // }
 };
 
 export default LostArticleSection;