From 7b5cc54d7897c098421559e16bf89a88cab0743a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=B0=95=ED=95=9C=EC=98=81=28Ryan=29?=
 <phanyoung@naver.com>
Date: Thu, 24 Oct 2024 21:59:36 +0900
Subject: [PATCH] =?UTF-8?q?=EC=B9=B4=EB=93=9C=20=EC=A0=95=EB=A0=AC=20?=
 =?UTF-8?q?=EB=B0=8F=20=EB=94=94=EC=8A=A4=EC=BB=A4=EC=85=98=20=EC=84=9C?=
 =?UTF-8?q?=EC=8A=A4=ED=8E=9C=EC=8A=A4=20=EC=B2=98=EB=A6=AC=20(#750)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DiscussionList/DiscussionListContent.tsx  | 22 ++++++++++--
 .../MissionList/MissionList.styled.ts         |  2 +-
 frontend/src/components/MissionList/index.tsx | 34 ++++++++++---------
 .../SolutionList/SolutionList.styled.ts       |  2 +-
 .../src/components/SolutionList/index.tsx     | 16 ++++-----
 .../src/pages/DiscussionListPage/index.tsx    | 18 +++++-----
 6 files changed, 55 insertions(+), 39 deletions(-)

diff --git a/frontend/src/components/DiscussionList/DiscussionListContent.tsx b/frontend/src/components/DiscussionList/DiscussionListContent.tsx
index 4c67740d..4868a06f 100644
--- a/frontend/src/components/DiscussionList/DiscussionListContent.tsx
+++ b/frontend/src/components/DiscussionList/DiscussionListContent.tsx
@@ -2,13 +2,29 @@ import * as S from './DiscussionList.styled';
 import DiscussionListItem from './DiscussionListItem';
 import { Link } from 'react-router-dom';
 import NoContentWithoutButton from '../common/NoContent/NoContentWithoutButton';
-import type { Discussion } from '@/types';
+import useDiscussions from '@/hooks/useDiscussions';
+import { HASHTAGS } from '@/constants/hashTags';
 
 interface DiscussionListContentProps {
-  discussions: Discussion[];
+  selectedMission?: string;
+  selectedHashTag?: string;
+  page: number;
+  onPageInfoUpdate?: (totalPage: number) => void;
 }
 
-export default function DiscussionListContent({ discussions }: DiscussionListContentProps) {
+export default function DiscussionListContent({
+  selectedMission,
+  selectedHashTag,
+  page,
+  onPageInfoUpdate,
+}: DiscussionListContentProps) {
+  const { discussions } = useDiscussions({
+    mission: selectedMission ?? HASHTAGS.all,
+    hashTag: selectedHashTag ?? HASHTAGS.all,
+    page,
+    onPageInfoUpdate,
+  });
+
   return (
     <S.ContentContainer>
       {discussions.length ? (
diff --git a/frontend/src/components/MissionList/MissionList.styled.ts b/frontend/src/components/MissionList/MissionList.styled.ts
index f180e765..187090df 100644
--- a/frontend/src/components/MissionList/MissionList.styled.ts
+++ b/frontend/src/components/MissionList/MissionList.styled.ts
@@ -30,7 +30,7 @@ const show = keyframes`
 export const MissionList = styled.ul`
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(12rem, 30rem));
-  justify-content: center;
+  justify-content: start;
   justify-items: center;
   row-gap: 3.6rem;
   column-gap: 2rem;
diff --git a/frontend/src/components/MissionList/index.tsx b/frontend/src/components/MissionList/index.tsx
index 8911e80b..87741216 100644
--- a/frontend/src/components/MissionList/index.tsx
+++ b/frontend/src/components/MissionList/index.tsx
@@ -10,25 +10,27 @@ interface MissionListProps {
 
 export default function MissionList({ missions }: MissionListProps) {
   return (
-    <S.MissionList>
+    <>
       {missions.length > 0 ? (
-        missions.map(({ id, thumbnail, title, hashTags, summary }) => (
-          <S.MissionItemWrapper key={id}>
-            <Link to={`/missions/${id}`} draggable={false}>
-              <InfoCard
-                id={id}
-                thumbnailSrc={thumbnail}
-                title={title}
-                hashTags={hashTags}
-                description={summary}
-                thumbnailFallbackText="Mission"
-              />
-            </Link>
-          </S.MissionItemWrapper>
-        ))
+        <S.MissionList>
+          {missions.map(({ id, thumbnail, title, hashTags, summary }) => (
+            <S.MissionItemWrapper key={id}>
+              <Link to={`/missions/${id}`} draggable={false}>
+                <InfoCard
+                  id={id}
+                  thumbnailSrc={thumbnail}
+                  title={title}
+                  hashTags={hashTags}
+                  description={summary}
+                  thumbnailFallbackText="Mission"
+                />
+              </Link>
+            </S.MissionItemWrapper>
+          ))}
+        </S.MissionList>
       ) : (
         <NoContentWithoutButton type="mission" />
       )}
-    </S.MissionList>
+    </>
   );
 }
diff --git a/frontend/src/components/SolutionList/SolutionList.styled.ts b/frontend/src/components/SolutionList/SolutionList.styled.ts
index bde3d8bf..d9f27923 100644
--- a/frontend/src/components/SolutionList/SolutionList.styled.ts
+++ b/frontend/src/components/SolutionList/SolutionList.styled.ts
@@ -14,7 +14,7 @@ const show = keyframes`
 export const SolutionList = styled.div`
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(12rem, 30rem));
-  justify-content: center;
+  justify-content: start;
   justify-items: center;
   row-gap: 3.6rem;
   column-gap: 2rem;
diff --git a/frontend/src/components/SolutionList/index.tsx b/frontend/src/components/SolutionList/index.tsx
index f83ffd35..0e1007f6 100644
--- a/frontend/src/components/SolutionList/index.tsx
+++ b/frontend/src/components/SolutionList/index.tsx
@@ -54,9 +54,9 @@ export default function SolutionList({ selectedMission, selectedHashTag }: Solut
   return (
     <>
       <SpinnerSuspense>
-        <S.SolutionList>
-          {solutionSummaries.length > 0 ? (
-            solutionSummaries.map(({ id, thumbnail, title, description, hashTags }) => (
+        {solutionSummaries.length > 0 ? (
+          <S.SolutionList>
+            {solutionSummaries.map(({ id, thumbnail, title, description, hashTags }) => (
               <S.SolutionItemWrapper key={id}>
                 <Link to={`${ROUTES.solutions}/${id}`} draggable={false}>
                   <InfoCard
@@ -69,11 +69,11 @@ export default function SolutionList({ selectedMission, selectedHashTag }: Solut
                   />
                 </Link>
               </S.SolutionItemWrapper>
-            ))
-          ) : (
-            <NoContentWithoutButton type="solution" />
-          )}
-        </S.SolutionList>
+            ))}
+          </S.SolutionList>
+        ) : (
+          <NoContentWithoutButton type="solution" />
+        )}
       </SpinnerSuspense>
 
       {solutionSummaries.length > 0 && (
diff --git a/frontend/src/pages/DiscussionListPage/index.tsx b/frontend/src/pages/DiscussionListPage/index.tsx
index e395c34a..66d334e6 100644
--- a/frontend/src/pages/DiscussionListPage/index.tsx
+++ b/frontend/src/pages/DiscussionListPage/index.tsx
@@ -10,7 +10,6 @@ import type { SelectedMissionType } from '@/types/mission';
 import { usePagination } from '@/hooks/usePagination';
 import { HASHTAGS } from '@/constants/hashTags';
 import PageButtons from '@/components/common/PageButtons';
-import useDiscussions from '@/hooks/useDiscussions';
 import SpinnerSuspense from '@/components/common/SpinnerSuspense';
 
 export default function DiscussionListPage() {
@@ -41,14 +40,6 @@ export default function DiscussionListPage() {
     prevHashTagRef.current = selectedHashTag;
   }, [selectedMission, selectedHashTag, handleInitializePage]);
 
-  const { discussions } = useDiscussions({
-    mission: selectedMission?.title ?? HASHTAGS.all,
-    hashTag: selectedHashTag?.name ?? HASHTAGS.all,
-    page: currentPage,
-    onPageInfoUpdate: (totalPagesFromServer: number) => {
-      setTotalPages(totalPagesFromServer);
-    },
-  });
   const { data: allHashTags } = useHashTags();
 
   const { missions } = useMissions();
@@ -72,7 +63,14 @@ export default function DiscussionListPage() {
         />
       </S.TagListWrapper>
       <SpinnerSuspense>
-        <DiscussionListContent discussions={discussions} />
+        <DiscussionListContent
+          selectedMission={selectedMission?.title ?? HASHTAGS.all}
+          selectedHashTag={selectedHashTag?.name ?? HASHTAGS.all}
+          page={currentPage}
+          onPageInfoUpdate={(totalPagesFromServer: number) => {
+            setTotalPages(totalPagesFromServer);
+          }}
+        />
       </SpinnerSuspense>
       {totalPages > 0 && (
         <PageButtons