Merge branch 'refactor/#749' of https://github.com/woowacourse-teams/…

…2024-devel-up into refactor/#749
woowacourse-teams · Oct 24, 2024 · 3a3bfa9 · 3a3bfa9
2 parents d517831 + e95ec32
commit 3a3bfa9
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 26 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 && (