Merge pull request #24 from codeit-maso/feature/Yun

이미지 파일 svg로 변경 및 Card 컴포넌트 props 속성 수정

Author: Yun-Jinwoo

src/assets/images/plus.png

@@ -1,9 +1,16 @@
 import deleteIcon from '../../../assets/images/delete.svg';
-import plus from '../../../assets/images/plus.png';
+import plus from '../../../assets/images/plus.svg';
 import Badge from '../Badge/Badge';
 import styles from './Card.module.scss';
 
-export default function Card({ image, name, relation, content, date, empty }) {
+export default function Card({
+  image,
+  sender,
+  relationship,
+  content,
+  createdAt,
+  empty,
+}) {
   return (
     <article className={`${styles.Card} ${empty ? styles['empty-card'] : ''}`}>
       {empty ? (
@@ -19,11 +26,11 @@ export default function Card({ image, name, relation, content, date, empty }) {
             <div className={styles['user-info']}>
               <div className={styles['profile-name']}>
                 <p>
-                  From. <span>{name}</span>
+                  From. <span>{sender}</span>
                 </p>
               </div>
               <div className={styles['relation-badge']}>
-                <Badge relation={relation} />
+                <Badge relation={relationship} />
               </div>
             </div>
             <div className={styles['delete-button']}>
@@ -37,7 +44,7 @@ export default function Card({ image, name, relation, content, date, empty }) {
               <p>{content}</p>
             </div>
           </div>
-          <footer className={styles['Card-Footer']}>{date}</footer>
+          <footer className={styles['Card-Footer']}>{createdAt}</footer>
         </>
       )}
     </article>

src/assets/images/plus.svg

@@ -27,13 +27,13 @@
     gap: 14px;
     justify-content: space-between;
     padding-bottom: 16px;
-    border-bottom: 1px solid $grayscale-200;
+    border-bottom: 1px solid $gray-200;
 
     .profile-img {
       position: relative;
       width: 56px;
       height: 56px;
-      border: 1px solid $grayscale-200;
+      border: 1px solid $gray-200;
       border-radius: 100px;
       overflow: hidden;
 
@@ -66,7 +66,7 @@
         justify-content: center;
         align-items: center;
         padding: 8px;
-        border: 1px solid $grayscale-300;
+        border: 1px solid $gray-300;
         border-radius: 6px;
         background-color: $white;
       }
@@ -84,12 +84,12 @@
       line-clamp: 3;
       word-break: break-word;
       @include font-18-regular;
-      color: $grayscale-600;
+      color: $gray-600;
     }
   }
 
   .Card-Footer {
     @include font-12-regular;
-    color: $grayscale-400;
+    color: $gray-400;
   }
 }