style: 리더보드 페이지 반응형 디자인

DaleStudy · Jan 11, 2025 · 25cb191 · 25cb191
1 parent dcbc658
commit 25cb191
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 55 deletions.
diff --git a/src/components/Card/Card.module.css b/src/components/Card/Card.module.css
@@ -1,42 +1,74 @@
 .item {
-  padding: 25px 35px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  column-gap: 35px;
+  padding: 20px;
+  width: 100%;
+
+  @media screen and (min-width: 550px) {
+    flex-direction: row;
+    align-items: center;
+    column-gap: 35px;
+    padding: 25px 35px;
+  }
+
   background-color: var(--bg-300);
   border-radius: 10px;
+}
+
+.content {
   display: flex;
-  column-gap: 35px;
-  align-items: flex-end;
-
-  > section {
-    > section {
-      display: flex;
-      align-items: center;
-      column-gap: 8px;
-
-      > div {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 24px;
-        height: 24px;
-        border-radius: 50%;
-        background-color: var(--primary);
-      }
-
-      > span {
-        font-size: 14px;
-        font-weight: var(--font-weight-medium);
-      }
-    }
-
-    > section:nth-child(2) {
-      margin-top: 15px;
-    }
+  flex-direction: column;
+  align-items: center;
+  column-gap: 8px;
+
+  @media screen and (min-width: 550px) {
+    align-items: flex-start;
   }
 }
 
-.link {
-  margin-top: 20px;
+.nameCohortWrapper {
+  display: flex;
+  column-gap: 10px;
+  margin-top: 13px;
+
+  @media screen and (min-width: 550px) {
+    flex-direction: column;
+    align-items: flex-start;
+    row-gap: 15px;
+  }
+
+  section {
+    display: flex;
+    align-items: center;
+    column-gap: 5px;
+  }
+
+  span {
+    font-size: 14px;
+    font-weight: var(--font-weight-medium);
+  }
+}
+
+.iconWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: var(--primary);
+}
+
+.links {
+  margin-top: 10px;
   display: flex;
   gap: 10px;
+  font-size: 11px;
   color: var(--bg-100);
+
+  @media screen and (min-width: 550px) {
+    margin-top: 20px;
+  }
 }
diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
@@ -23,20 +23,25 @@ export default function Card({
   return (
     <article className={styles.item}>
       <GradeImage grade={grade} width={105} height={128} />
-      <section>
-        <section aria-label={name}>
-          <div>
-            <img src="/github-icon-in-card.svg" alt="깃허브 아이콘" />
-          </div>
-          <span>{name}</span>
-        </section>
-        <section aria-label={`${cohortString}기`}>
-          <div>
-            <img src="/flag-icon.svg" alt="깃발 아이콘" />
-          </div>
-          <span>{cohortString}기</span>
-        </section>
-        <section className={styles.link} aria-label={`카드-네비게이션-${id}`}>
+
+      <section className={styles.content}>
+        <div className={styles.nameCohortWrapper}>
+          <section aria-label={name}>
+            <div className={styles.iconWrapper}>
+              <img src="/github-icon-in-card.svg" alt="깃허브 아이콘" />
+            </div>
+            <span>{name}</span>
+          </section>
+
+          <section aria-label={`${cohortString}기`}>
+            <div className={styles.iconWrapper}>
+              <img src="/flag-icon.svg" alt="깃발 아이콘" />
+            </div>
+            <span>{cohortString}기</span>
+          </section>
+        </div>
+
+        <section className={styles.links} aria-label={`카드-네비게이션-${id}`}>
           <Link href={`/progress?member=${id}`} variant="primaryButton">
             풀이 현황
           </Link>

diff --git a/src/components/Link/Link.module.css b/src/components/Link/Link.module.css
@@ -26,7 +26,7 @@
   justify-content: center;
   align-items: center;
   padding: 10px 40px;
-  min-width: 132px;
+  min-width: 125px;
   max-height: 30px;
   border-radius: 10px;
 

diff --git a/src/components/SearchBar/SearchBar.module.css b/src/components/SearchBar/SearchBar.module.css
@@ -6,7 +6,7 @@
   border: 2px solid #846de9;
   border-radius: 10px;
 
-  width: max-content;
+  width: 304px;
   height: 40px;
   padding: 13px 15px;
 

diff --git a/src/pages/Leaderboard/Leaderboard.module.css b/src/pages/Leaderboard/Leaderboard.module.css
@@ -9,21 +9,23 @@
 
 .contentWrapper {
   width: 100%;
+  min-width: 306px;
   max-width: 1080px;
-  margin-top: 100px;
+  margin-top: 83px;
 
   ul {
     display: grid;
     grid-template-columns: 1fr;
-    row-gap: 20px;
+    row-gap: 15px;
+    width: 100%;
 
-    @media (min-width: 1080px) {
+    @media (min-width: 1100px) {
       grid-template-columns: 1fr 1fr;
       column-gap: 25px;
     }
 
-    margin-top: 30px;
-    margin-bottom: 60px;
+    margin-top: 20px;
+    margin-bottom: 40px;
   }
 }
 
@@ -34,16 +36,17 @@
   row-gap: 10px;
 
   width: 100%;
-  margin-bottom: 30px;
+  margin: 20px 0;
 
-  @media (min-width: 768px) {
+  @media (min-width: 500px) {
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
   }
 
   h1 {
-    font-size: 24px;
+    font-size: 20px;
+    font-weight: var(--font-weight-medium);
   }
 }