feat(pages): ListPage 작업

src/components/CardList/CardList.jsx

@@ -17,6 +17,11 @@ const CardList = ({
 }) => {
   const backgroundImage = getBackgroundImage(backgroundColor);
 
+  const maxVisible = 3;
+  const visibleProfiles = profileSection.slice(0, maxVisible);
+  let extraCount = totalUsers - maxVisible;
+  if (extraCount < 0) extraCount = 0;
+
   return (
     <div
       className={styles.card}
@@ -31,7 +36,18 @@ const CardList = ({
     >
       <div className={styles.cardMessage}>{message}</div>
 
-      <div className={styles.sprofileWrapper}>{profileSection}</div>
+      <div className={styles.profileWrapper}>
+        {visibleProfiles.map((profile, index) => (
+          <div key={index} className={styles.profileImage}>
+            {profile}
+          </div>
+        ))}
+        {extraCount > 0 && (
+          <div className={`${styles.profileImage} ${styles.extraCount}`}>
+            +{extraCount}
+          </div>
+        )}
+      </div>
 
       <div className={styles.userCount}>
         <span className={styles.userCountNumber}>{totalUsers}</span>
@@ -41,7 +57,9 @@ const CardList = ({
       <div className={styles.reactionsWrapper}>
         <div className={styles.reactionsContainer}>
           {badges.map((badge, index) => (
-            <div key={index} {...badge} />
+            <div key={index} {...badge} className={styles.badge}>
+              {badge.text} {badge.count}
+            </div>
           ))}
         </div>
       </div>

src/components/CardList/CardList.module.css

@@ -13,6 +13,7 @@
   position: relative;
   background-size: cover;
   background-position: center;
+  padding: 1.875rem 1.5rem 1.25rem 1.5rem;
 }
 
 .cardBackground {
@@ -31,10 +32,50 @@
 .profileWrapper {
   display: flex;
   justify-content: flex-start;
+  align-items: center;
+  position: relative;
+}
+
+.profileImage {
+  width: 1.9375rem;
+  height: 1.9375rem;
+  border-radius: 50%;
+  border: 0.09375rem solid white;
+  overflow: hidden;
+  position: relative;
+  z-index: 1;
+  margin-left: -0.8125rem;
+}
+
+.profileImage img {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.profileImage:first-child {
+  margin-left: 0;
+}
+
+.extraCount {
+  width: 1.875rem;
+  height: 1.75rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: white;
+  color: #555555;
+  font-weight: var(--font-weight-regular);
+  font-size: 0.75rem; /* 전역 css에 없어서 이렇게 사용 */
+  line-height: 1.125rem;
+  position: relative;
+  z-index: 2;
+  border-radius: 1.875rem;
 }
 
 .reactionsWrapper {
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  border-top: 0.0625rem solid rgba(0, 0, 0, 0.1);
   padding-top: 1.3rem;
   margin-top: 0.75rem;
   display: flex;
@@ -49,6 +90,36 @@
   gap: 0.5rem;
 }
 
+.badge {
+  width: 4.0625rem;
+  height: 2.25rem;
+  border-radius: 2rem;
+  background: rgba(0, 0, 0, 0.54);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #ffffff;
+}
+
+.userCount {
+  font-size: 1rem;
+  font-weight: var(--font-weight-regular);
+  color: var(--color-gray-700);
+  margin-top: 0.5rem;
+  margin-top: 1.5rem;
+  margin-top: 0.25rem;
+}
+
+.userCountNumber {
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-16);
+}
+
+.cardMessage {
+  font-size: var(--font-size-24);
+  font-weight: var(--font-weight-bold);
+}
+
 @media (max-width: 1024px) {
   .card-container {
     display: grid;
@@ -64,6 +135,34 @@
     grid-template-columns: repeat(2, 1fr);
     gap: 0.75rem;
   }
+  .card {
+    width: 13rem;
+    max-width: 100%;
+    height: 14.5rem;
+    border-radius: 1rem;
+    overflow: hidden;
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    justify-content: space-between;
+    position: relative;
+    background-size: cover;
+    background-position: center;
+    padding: 1.875rem 1.5rem 1.25rem 1.5rem;
+  }
+  .reactionsContainer {
+    display: flex;
+    gap: 0.25rem;
+  }
+  .badge {
+    width: 3.4375rem;
+    height: 2rem;
+  }
+  .cardMessage {
+    font-size: var(--font-size-24);
+    font-weight: var(--font-weight-bold);
+  }
 }
 
 @media (max-width: 480px) {

src/components/Modal/Modal.module.css

@@ -82,7 +82,7 @@
 
 ::-webkit-scrollbar {
   width: 0.25rem;
-  height: 6.25rem;
+  height: 0.25rem;
 }
 
 ::-webkit-scrollbar-thumb {
@@ -108,3 +108,29 @@
 .button:hover {
   background-color: var(--color-purple-700);
 }
+
+@media (max-width: 768px) {
+  .modal {
+    width: 23.125rem;
+    height: 22rem;
+    padding: 1.5rem;
+  }
+
+  .bodyText {
+    width: 100%;
+    height: 10rem;
+    overflow-y: auto;
+  }
+
+  .img {
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+
+  .button {
+    margin-top: 1rem;
+    width: 6.25rem;
+    height: 2.25rem;
+    font-size: 0.875rem;
+  }
+}