미션 카드 크기 반응형 조정 (issue #724) (#727)

* design: 미션, 풀이 리스트 반응형 조정 * design: 줄 수 조정
woowacourse-teams · Oct 23, 2024 · 798ccee · 798ccee
1 parent 7845d11
commit 798ccee
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 30 deletions.
diff --git a/frontend/src/components/MissionList/MissionList.styled.ts b/frontend/src/components/MissionList/MissionList.styled.ts
@@ -28,11 +28,12 @@ const show = keyframes`
 `;
 
 export const MissionList = styled.ul`
-  flex-wrap: wrap;
-
-  display: flex;
-  justify-content: space-between;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(12rem, 30rem));
+  justify-content: center;
+  justify-items: center;
   row-gap: 3.6rem;
+  column-gap: 2rem;
 
   animation: ${show} 0.5s;
   transition: 0.5s;
@@ -43,7 +44,9 @@ export const MissionList = styled.ul`
     `}
 `;
 
-export const MissionItemWrapper = styled.li``;
+export const MissionItemWrapper = styled.li`
+  max-width: 30rem;
+`;
 
 export const MissionItemContainer = styled.article`
   width: 35rem;

diff --git a/frontend/src/components/SolutionList/SolutionList.styled.ts b/frontend/src/components/SolutionList/SolutionList.styled.ts
@@ -12,12 +12,12 @@ const show = keyframes`
 `;
 
 export const SolutionList = styled.div`
-  display: flex;
-  max-width: 100rem;
-
-  justify-content: space-between;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(12rem, 30rem));
+  justify-content: center;
+  justify-items: center;
   row-gap: 3.6rem;
-  flex-wrap: wrap;
+  column-gap: 2rem;
 
   animation: ${show} 0.5s;
   transition: 0.5s;
@@ -27,3 +27,7 @@ export const SolutionList = styled.div`
     column-gap: 3rem;
     `}
 `;
+
+export const SolutionItemWrapper = styled.div`
+  max-width: 30rem;
+`;
diff --git a/frontend/src/components/SolutionList/index.tsx b/frontend/src/components/SolutionList/index.tsx
@@ -57,16 +57,18 @@ export default function SolutionList({ selectedMission, selectedHashTag }: Solut
         <S.SolutionList>
           {solutionSummaries.length > 0 ? (
             solutionSummaries.map(({ id, thumbnail, title, description, hashTags }) => (
-              <Link key={id} to={`${ROUTES.solutions}/${id}`}>
-                <InfoCard
-                  id={id}
-                  thumbnailSrc={thumbnail}
-                  title={title}
-                  hashTags={hashTags}
-                  description={description}
-                  thumbnailFallbackText="Solution"
-                />
-              </Link>
+              <S.SolutionItemWrapper key={id}>
+                <Link to={`${ROUTES.solutions}/${id}`} draggable={false}>
+                  <InfoCard
+                    id={id}
+                    thumbnailSrc={thumbnail}
+                    title={title}
+                    hashTags={hashTags}
+                    description={description}
+                    thumbnailFallbackText="Solution"
+                  />
+                </Link>
+              </S.SolutionItemWrapper>
             ))
           ) : (
             <NoContentWithoutButton type="solution" />

diff --git a/frontend/src/components/common/Card/Card.styled.ts b/frontend/src/components/common/Card/Card.styled.ts
@@ -2,7 +2,6 @@ import media from '@/styles/mediaQueries';
 import styled from 'styled-components';
 
 export const CardContainer = styled.div`
-  width: 30rem;
   box-shadow: ${(props) => props.theme.boxShadow.shadow04};
   border-radius: 0 0 0.8rem 0.8rem;
   cursor: pointer;
@@ -12,23 +11,25 @@ export const CardContainer = styled.div`
     transform: scale(1.04);
   }
 
-  ${media.small`
-      width: 28rem;
+  ${media.medium`
+      width: 100%;
     `}
 `;
 
 export const Thumbnail = styled.img`
-  width: 30rem;
+  width: -webkit-fill-available;
   height: 21.9rem;
   object-fit: cover;
   border-radius: 0.8rem 0.8rem 0 0;
-
-  ${media.small`
-      width: 28rem;
-    `}
 `;
 
 export const Content = styled.div`
   padding: 2.5rem;
-  height: 20rem;
+  min-height: 20rem;
+  display: flex;
+  justify-content: space-between;
+
+  ${media.medium`
+    min-height: 15rem;
+    `}
 `;
diff --git a/frontend/src/components/common/InfoCard/InfoCard.styled.ts b/frontend/src/components/common/InfoCard/InfoCard.styled.ts
@@ -1,10 +1,11 @@
+import media from '@/styles/mediaQueries';
 import styled from 'styled-components';
 
 export const InfoCardContainer = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  height: 100%;
+  gap: 1rem;
 `;
 
 export const TitleWrapper = styled.div`
@@ -31,6 +32,10 @@ export const Description = styled.div`
   color: ${(props) => props.theme.colors.grey500};
   margin-top: 0.5rem;
   ${(props) => props.theme.font.body}
+
+  ${media.medium`
+    -webkit-line-clamp: 2;
+    `}
 `;
 
 export const TagWrapper = styled.ul`