feat : apply responsive design spec

DaleStudy · Jan 12, 2025 · 9adbb7d · 9adbb7d
1 parent 5e7081b
commit 9adbb7d
Show file tree

Hide file tree

Showing 5 changed files with 128 additions and 50 deletions.
diff --git a/src/components/Sidebar/Sidebar.module.css b/src/components/Sidebar/Sidebar.module.css
@@ -1,13 +1,21 @@
 aside {
-  position: sticky;
-  top: 87px;
+  display: flex;
   z-index: var(--z-index-aside);
-  max-width: 203px;
+  flex-direction: column-reverse;
+  @media (min-width: 1080px) {
+    position: sticky;
+    top: 87px;
+    flex-direction: column;
+    max-width: 203px;
+  }
 }
 
 .cohort {
-  display: flex;
-  justify-content: flex-end;
+  display: none;
+  @media (min-width: 1080px) {
+    display: flex;
+    justify-content: flex-end;
+  }
 }
 
 .container {
@@ -24,7 +32,11 @@ aside {
 .profile {
   position: relative;
   text-align: center;
+  margin-top: 30px;
   margin-bottom: 25px;
+  @media (min-width: 1080px) {
+    margin-top: 22.5px;
+  }
 }
 
 .avatar {
@@ -67,39 +79,62 @@ aside {
 .username {
   font-size: 14px;
   color: var(--text-secondary);
+  margin-bottom: 20px;
+  font-weight: var(var(--font-weight-regular));
+  @media (min-width: 1080px) {
+    margin-bottom: 25px;
+  }
 }
 
 .currentStatus {
   display: flex;
   justify-content: center;
   margin-bottom: 35px;
-  padding-bottom: 31px;
-  border-bottom: 2px solid var(--primary);
+  @media (min-width: 1080px) {
+    padding-bottom: 31px;
+    border-bottom: 2px solid var(--primary);
+  }
 }
 
 .currentStatus img {
-  width: 80px;
-  height: 103px;
+  width: 70px;
+  height: 85px;
+  @media (min-width: 1080px) {
+    width: 80px;
+    height: 103px;
+  }
 }
 
 .taskCounts {
   display: flex;
-  flex-direction: column;
   justify-content: center;
-  margin-top: 50px;
-  margin-bottom: 35px;
-  gap: 35px;
-  font-size: 20px;
-  font-weight: var(--font-weight-bold);
+  gap: 10px;
+  margin-bottom: 30px;
+  @media (min-width: 1080px) {
+    flex-direction: column;
+    margin-top: 50px;
+    gap: 35px;
+    font-weight: var(--font-weight-bold);
+  }
 }
 
 .task {
   display: flex;
   flex-direction: column;
   align-items: center;
-  font-size: 14px;
+  font-size: 18px;
   font-weight: var(--font-weight-bold);
   gap: 5px;
+  @media (min-width: 1080px) {
+    font-size: 20px;
+  }
+}
+
+.progress {
+  font-size: 12px;
+  @media (min-width: 1080px) {
+    font-size: 14px;
+  }
 }
 
 .easy {
@@ -127,16 +162,23 @@ aside {
 
 .returnButtonLink {
   display: block;
-  width: 80%;
+  margin-bottom: 15px;
+  align-self: flex-end;
+  width: 47%;
   padding: 10px 0;
   border: 1px solid var(--bg-400);
   border-radius: 10px;
   color: var(--bg-400) !important;
-  font-size: 14px;
+  font-size: 12px;
   text-align: center;
-  margin-top: 20px;
-  margin-left: auto;
-  margin-right: auto;
+
+  @media (min-width: 1080px) {
+    width: 80%;
+    font-size: 14px;
+    margin-top: 20px;
+    margin-left: auto;
+    margin-right: auto;
+  }
 
   &:hover {
     background-color: var(--bg-400);
@@ -153,12 +195,13 @@ aside {
 
 .problemButtonLink {
   display: block;
+  width: 135px;
   padding: 10px 0;
   background-color: var(--bg-400);
   border: 1px solid var(--bg-400);
   border-radius: 10px;
   color: white !important;
-  font-size: 14px;
+  font-size: 11px;
   font-weight: var(--font-weight-bold);
   text-align: center;
   margin-top: 20px;

diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
@@ -80,7 +80,7 @@ export default function Sidebar(props: SidebarProps) {
             <span className={styles.gradientText}>{solvedProblems} </span>
             <span className={styles.solidText}> 문제</span>
           </div>
-          <div className={styles.progress}>
+          <div>
             <a
               className={styles.problemButtonLink}
               href={`https://github.com/DaleStudy/leetcode-study/pulls?q=is%3Apr+author%3A${githubUsername}`}
@@ -105,7 +105,7 @@ export default function Sidebar(props: SidebarProps) {
           {taskProgress.map(({ label, progress, className }) => (
             <div key={label} className={styles.task}>
               <span className={className}>{label}</span>
-              <span>{progress}</span>
+              <span className={styles.progress}>{progress}</span>
             </div>
           ))}
         </section>

diff --git a/src/components/Table/Table.module.css b/src/components/Table/Table.module.css
@@ -4,16 +4,25 @@ table {
 }
 
 th {
-  height: 48px;
   background-color: var(--bg-100);
-  font-size: 18px;
   font-weight: var(--font-weight-bold);
   text-align: center;
+  height: 35px;
+  font-size: 13px;
+  @media (min-width: 1080px) {
+    height: 48px;
+    font-size: 18px;
+  }
 }
 
 /* Row & Cell Styles */
 td {
-  height: 48px;
+  height: 35px;
+  font-size: 10px;
+  @media (min-width: 1080px) {
+    height: 48px;
+    font-size: 16px;
+  }
 }
 
 tr:nth-child(odd) {
@@ -60,6 +69,25 @@ tr:nth-child(even) {
   color: #e0284b;
 }
 
+.completedIcon {
+  width: 10px;
+  height: 7.5px;
+  @media (min-width: 1080px) {
+    width: 18px;
+    height: 13.5px;
+  }
+}
+
+.incompleteIcon {
+  width: 8px;
+  height: 8px;
+  opacity: 0.4;
+  @media (min-width: 1080px) {
+    width: 15px;
+    height: 15px;
+  }
+}
+
 /* Status column */
 .statusHeading,
 .statusData {

diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
@@ -90,24 +90,18 @@ export function Table({
 }
 
 function getTaskIcon(completed: boolean) {
-  if (completed) {
-    return (
-      <img
-        src="/completed-status-icon.svg"
-        alt="완료 문제 상태 아이콘"
-        aria-label="완료 문제"
-      ></img>
-    );
-  } else {
-    return (
-      <img
-        src="/incomplete-status-icon.svg"
-        alt="미완료 문제 상태 아이콘"
-        aria-label="미완료 문제"
-        style={{ opacity: 0.4 }}
-      />
-    );
-  }
+  const iconClass = completed ? styles.completedIcon : styles.incompleteIcon;
+
+  return (
+    <img
+      src={
+        completed ? "/completed-status-icon.svg" : "/incomplete-status-icon.svg"
+      }
+      alt={completed ? "완료 문제 상태 아이콘" : "미완료 문제 상태 아이콘"}
+      aria-label={completed ? "완료 문제" : "미완료 문제"}
+      className={iconClass}
+    />
+  );
 }
 
 function getDifficultyClass(difficulty: string) {

diff --git a/src/pages/Progress/Progress.module.css b/src/pages/Progress/Progress.module.css
@@ -6,20 +6,33 @@
 }
 
 h1 {
-  font-size: 24px;
+  font-size: 20px;
+  margin-bottom: 15px;
+  @media (min-width: 1080px) {
+    font-size: 24px;
+  }
 }
 
 .container {
   display: flex;
-  justify-content: space-between;
-  margin-top: 30px;
+  flex-direction: column;
   gap: 20px;
+  @media (min-width: 1080px) {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin-top: 30px;
+  }
 }
 
 .sideBar {
-  width: 30%;
+  @media (min-width: 1080px) {
+    width: 30%;
+  }
 }
 
 .problemTableWrapper {
-  width: 75%;
+  @media (min-width: 1080px) {
+    width: 75%;
+  }
 }