update: 바텀시트 bottom 값 조정 및 카드 UI수정

JoStar33 · Aug 20, 2024 · ec24c5f · ec24c5f
1 parent dd241d0
commit ec24c5f
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/src/components/common/BottomSheet.tsx b/src/components/common/BottomSheet.tsx
@@ -38,7 +38,7 @@ const S = {
     left: 50%;
     border-radius: 20px 20px 0 0;
     width: 100%;
-    bottom: 0px;
+    bottom: 80px;
     overflow: hidden;
     background-color: ${(props) => props.theme.colors.white};
     padding: 0 10px;

diff --git a/src/components/contents/ContentCard.tsx b/src/components/contents/ContentCard.tsx
@@ -14,8 +14,9 @@ export default function ContentCard({ element }: IProps) {
         <Dimmed />
       </div>
       <div className="content-card__main-info">
-        <h3>{element.title}</h3>
-        <p></p>
+        <h3 className="content-card__main-info__title">{element.title}</h3>
+        <p className="content-card__main-info__day">작성일: {element.createdAt}</p>
+        <p className="content-card__main-info__description">{element.description}</p>
       </div>
     </S.ContentCard>
   );
@@ -25,11 +26,15 @@ const S = {
   ContentCard: styled.div`
     display: flex;
     gap: 20px;
+    box-shadow: rgb(0 0 0 / 10%) 0px 4px 16px 0px;
+    padding: 10px;
+    border-radius: 10px;
+    cursor: pointer;
     .content-card {
       &__image-wrapper {
         position: relative;
         overflow: hidden;
-        width: 150px;
+        min-width: 150px;
         height: 150px;
         border-radius: 10px;
         img {
@@ -41,6 +46,13 @@ const S = {
         display: flex;
         flex-direction: column;
         padding: 10px 0;
+        gap: 10px;
+        &__title {
+          font-weight: 600;
+        }
+        &__day {
+          font-size: 14px;
+        }
       }
     }
   `,