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

Card, Badge 컴포넌트 클래스 네임 BEM 방식으로 변경 및 파일 위치 변경

Author: Yun-Jinwoo

src/components/common/Badge/Badge.jsx …c/pages/Posts/components/Badge/Badge.jsxsrc/components/common/Badge/Badge.jsx renamed to src/pages/Posts/components/Badge/Badge.jsx src/components/common/Badge/Badge.jsx renamed to src/pages/Posts/components/Badge/Badge.jsx

@@ -9,7 +9,7 @@ const relationship = {
 
 export default function Badge({ relation }) {
   return (
-    <div className={`${styles.Badge} ${styles[relation]}`}>
+    <div className={`${styles.badge} ${styles[relation]}`}>
       {relationship[relation]}
     </div>
   );

…omponents/common/Badge/Badge.module.scss …Posts/components/Badge/Badge.module.scsssrc/components/common/Badge/Badge.module.scss renamed to src/pages/Posts/components/Badge/Badge.module.scss src/components/common/Badge/Badge.module.scss renamed to src/pages/Posts/components/Badge/Badge.module.scss

@@ -1,6 +1,6 @@
-@use '../../../assets/styles/variables.scss' as *;
+@use '../../../../assets/styles/variables.scss' as *;
 
-.Badge {
+.badge {
   display: inline-block;
   padding: 0 8px;
   border-radius: 4px;

src/components/common/Card/Card.jsx src/pages/Posts/components/Card/Card.jsxsrc/components/common/Card/Card.jsx renamed to src/pages/Posts/components/Card/Card.jsx

@@ -1,5 +1,5 @@
-import deleteIcon from '../../../assets/images/delete.svg';
-import plus from '../../../assets/images/plus.svg';
+import deleteIcon from '../../../../assets/images/delete.svg';
+import plus from '../../../../assets/images/plus.svg';
 import Badge from '../Badge/Badge';
 import styles from './Card.module.scss';
 
@@ -9,42 +9,42 @@ export default function Card({
   relationship,
   content,
   createdAt,
-  empty,
+  empty = false,
 }) {
   return (
-    <article className={`${styles.Card} ${empty ? styles['empty-card'] : ''}`}>
+    <article className={`${styles.card} ${empty ? styles['card--empty'] : ''}`}>
       {empty ? (
-        <div className={styles.empty}>
+        <div>
           <img src={plus} alt="추가하기" />
         </div>
       ) : (
         <>
-          <header className={styles['Card-Header']}>
-            <div className={styles['profile-img']}>
+          <header className={styles['card__header']}>
+            <div className={styles['card__profile-img']}>
               <img src={image} alt="프로필 이미지" />
             </div>
-            <div className={styles['user-info']}>
-              <div className={styles['profile-name']}>
+            <div className={styles['card__user-info']}>
+              <div className={styles['card__profile-name']}>
                 <p>
                   From. <span>{sender}</span>
                 </p>
               </div>
-              <div className={styles['relation-badge']}>
+              <div className={styles['card__relation-badge']}>
                 <Badge relation={relationship} />
               </div>
             </div>
-            <div className={styles['delete-button']}>
+            <div className={styles['card__delete-button']}>
               <button>
                 <img src={deleteIcon} alt="쓰레기통 아이콘" />
               </button>
             </div>
           </header>
-          <div className={styles['Card-Body']}>
-            <div className={styles.content}>
+          <div className={styles['card__body']}>
+            <div className={styles['card__content']}>
               <p>{content}</p>
             </div>
           </div>
-          <footer className={styles['Card-Footer']}>{createdAt}</footer>
+          <footer className={styles['card__footer']}>{createdAt}</footer>
         </>
       )}
     </article>

…/components/common/Card/Card.module.scss …s/Posts/components/Card/Card.module.scsssrc/components/common/Card/Card.module.scss renamed to src/pages/Posts/components/Card/Card.module.scss src/components/common/Card/Card.module.scss renamed to src/pages/Posts/components/Card/Card.module.scss

@@ -1,6 +1,6 @@
-@use '../../../assets/styles/variables.scss' as *;
+@use '../../../../assets/styles/variables.scss' as *;
 
-.Card {
+.card {
   display: flex;
   flex-direction: column;
   width: 384px;
@@ -11,7 +11,7 @@
   background: $white;
   gap: 16px;
 
-  &.empty-card {
+  &.card--empty {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -22,14 +22,14 @@
     }
   }
 
-  .Card-Header {
+  &__header {
     display: flex;
     gap: 14px;
     justify-content: space-between;
     padding-bottom: 16px;
     border-bottom: 1px solid $gray-200;
 
-    .profile-img {
+    .card__profile-img {
       position: relative;
       width: 56px;
       height: 56px;
@@ -45,13 +45,13 @@
       }
     }
 
-    .user-info {
+    .card__user-info {
       display: flex;
       flex: 1;
       flex-direction: column;
       gap: 6px;
 
-      .profile-name {
+      .card__profile-name {
         @include font-20-regular;
 
         span {
@@ -60,7 +60,7 @@
       }
     }
 
-    .delete-button {
+    .card__delete-button {
       button {
         display: flex;
         justify-content: center;
@@ -73,10 +73,11 @@
     }
   }
 
-  .Card-Body {
+  &__body {
+    height: 280px;
     padding: 16px 0;
 
-    .content {
+    .card__content {
       display: -webkit-box;
       -webkit-box-orient: vertical;
       overflow: hidden;
@@ -88,7 +89,7 @@
     }
   }
 
-  .Card-Footer {
+  &__footer {
     @include font-12-regular;
     color: $gray-400;
   }