From 8848bef001f46720b586aff802dba5c2e43d7892 Mon Sep 17 00:00:00 2001
From: ImxYJL <allensain14@gmail.com>
Date: Tue, 15 Oct 2024 10:27:57 +0900
Subject: [PATCH] =?UTF-8?q?design:=20=EB=A6=AC=EB=B7=B0=20=EB=AA=A9?=
 =?UTF-8?q?=EB=A1=9D=EC=9D=98=20=EC=B9=B4=EB=93=9C=20=EB=94=94=EC=9E=90?=
 =?UTF-8?q?=EC=9D=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/ReviewCard/index.tsx |  6 ++--
 frontend/src/components/ReviewCard/styles.ts | 32 ++++++--------------
 2 files changed, 13 insertions(+), 25 deletions(-)

diff --git a/frontend/src/components/ReviewCard/index.tsx b/frontend/src/components/ReviewCard/index.tsx
index 2aba2880d..92baf19a9 100644
--- 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
index b250ad6bc..5d333823e 100644
--- 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;