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 (
-
+ <>
{missions.length > 0 ? (
- missions.map(({ id, thumbnail, title, hashTags, summary }) => (
-
-
-
-
-
- ))
+
+ {missions.map(({ id, thumbnail, title, hashTags, summary }) => (
+
+
+
+
+
+ ))}
+
) : (
)}
-
+ >
);
}
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 (
<>
-
- {solutionSummaries.length > 0 ? (
- solutionSummaries.map(({ id, thumbnail, title, description, hashTags }) => (
+ {solutionSummaries.length > 0 ? (
+
+ {solutionSummaries.map(({ id, thumbnail, title, description, hashTags }) => (
- ))
- ) : (
-
- )}
-
+ ))}
+
+ ) : (
+
+ )}
{solutionSummaries.length > 0 && (