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