design: 리뷰 목록의 카드 디자인 수정

woowacourse-teams · Oct 15, 2024 · 8848bef · 8848bef
1 parent ce8f85c
commit 8848bef
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 25 deletions.
diff --git a/frontend/src/components/ReviewCard/index.tsx b/frontend/src/components/ReviewCard/index.tsx
@@ -12,8 +12,9 @@ interface ReviewCardProps {
 const ReviewCard = ({ createdAt, contentPreview, categories, handleClick }: ReviewCardProps) => {
   return (
     <S.Layout onClick={handleClick}>
-      <S.LeftLineBorder />
-
+      <S.Header>
+        <S.Date>{createdAt}</S.Date>
+      </S.Header>
       <S.Main>
         <S.ContentPreview>{contentPreview}</S.ContentPreview>
         <S.Footer>
@@ -22,7 +23,6 @@ const ReviewCard = ({ createdAt, contentPreview, categories, handleClick }: Revi
               <div key={category.optionId}>{category.content}</div>
             ))}
           </S.Keyword>
-          <S.Date>{createdAt}</S.Date>
         </S.Footer>
       </S.Main>
     </S.Layout>

diff --git a/frontend/src/components/ReviewCard/styles.ts b/frontend/src/components/ReviewCard/styles.ts
@@ -4,6 +4,7 @@ import media from '@/utils/media';
 
 export const Layout = styled.div`
   display: flex;
+  flex-direction: column;
   border: 0.1rem solid ${({ theme }) => theme.colors.lightGray};
   border-radius: 1rem;
 
@@ -17,36 +18,23 @@ export const Layout = styled.div`
   }
 `;
 
-export const LeftLineBorder = styled.div`
-  width: 2.5rem;
-  background-color: ${({ theme }) => theme.colors.lightGray};
-  border-radius: 1rem 0 0 1rem;
-`;
+export const Header = styled.div`
+  display: flex;
+  align-items: center;
 
-export const Title = styled.div`
-  font-size: 1.6rem;
-  font-weight: 700;
+  width: 100%;
+  height: 3.8rem;
+
+  background-color: ${({ theme }) => theme.colors.lightGray};
+  border-radius: 1rem 1rem 0 0;
 `;
 
 export const Date = styled.p`
   height: fit-content;
-  padding: 0 1rem;
+  padding: 0 3rem;
   font-size: 1.3rem;
 `;
 
-export const Visibility = styled.div`
-  display: flex;
-  gap: 0.6rem;
-  align-items: center;
-
-  font-size: 1.6rem;
-  font-weight: 700;
-
-  img {
-    width: 2rem;
-  }
-`;
-
 export const Main = styled.div`
   display: flex;
   flex-direction: column;