From e95ec32848075ca07529c85bc296e3fb6c29e4e0 Mon Sep 17 00:00:00 2001
From: bmj0053 <bmj05378@gmail.com>
Date: Thu, 24 Oct 2024 19:47:23 +0900
Subject: [PATCH] =?UTF-8?q?design:=20=EB=AF=B8=EC=85=98,=20=ED=92=80?=
 =?UTF-8?q?=EC=9D=B4=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EC=A0=95=EB=A0=AC=20?=
 =?UTF-8?q?=EC=A1=B0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../MissionList/MissionList.styled.ts         |  2 +-
 frontend/src/components/MissionList/index.tsx | 34 ++++++++++---------
 .../SolutionList/SolutionList.styled.ts       |  2 +-
 .../src/components/SolutionList/index.tsx     | 16 ++++-----
 4 files changed, 28 insertions(+), 26 deletions(-)

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 && (