feat : add png files

DaleStudy · Dec 1, 2024 · 7e7b4e1 · 7e7b4e1
1 parent b30d052
commit 7e7b4e1
Show file tree

Hide file tree

Showing 10 changed files with 259 additions and 107 deletions.
diff --git a/public/Logo.png b/public/Logo.png
diff --git a/public/SampleImg.png b/public/SampleImg.png
diff --git a/src/assets/Github.png b/src/assets/Github.png
diff --git a/src/components/Aside/Aside.module.css b/src/components/Aside/Aside.module.css
@@ -1,11 +1,10 @@
 aside {
-  position: sticky; /* Make the aside sticky */
-  top: 20px; /* Adjust this value to control when the sidebar becomes sticky */
-  width: 250px; /* Adjust the width as needed */
-  height: calc(
-    100vh - 40px
-  ); /* Full viewport height minus top/bottom padding */
-  overflow-y: auto; /* Allow vertical scrolling inside the aside */
+  position: sticky;
+  top: 87px;
+  width: 260px;
+  height: calc(100vh - 40px);
+  overflow-y: auto;
+  align-items: center;
 }
 
 .cohort {
@@ -17,13 +16,14 @@ aside {
   top: 230px;
   left: 20px;
   width: 250px;
-  height: 550px;
   padding: 20px 35px;
   background-color: var(--bg-200);
   border-radius: 10px;
-  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1);
 }
 
+
+
 .profile {
   position: relative;
   text-align: center;
@@ -76,19 +76,24 @@ aside {
   display: flex;
   justify-content: center;
   margin-bottom: 35px;
+  padding-bottom: 31px;
+  border-bottom: 2px solid #846de9;
 }
 
 .currentStatus img {
-  width: 64px;
-  height: 64px;
+  width: 80px;
+  height: 103px;
 }
 
 .taskCounts {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  gap: 35px;
+  margin-top: 50px;
   margin-bottom: 35px;
+  gap: 35px;
+  font-size: 20px;
+  font-weight: var(--font-weight-bold);
 }
 
 .task {
@@ -112,20 +117,77 @@ aside {
   color: #f63737;
 }
 
-.buttonLink {
+.gradientText {
+  background: linear-gradient(to right, #24faca, #846de9);
+  color: transparent;
+  background-clip: text;
+  font-size: 17px;
+}
+
+.solidText {
+  font-size: 13px;
+}
+
+.returnButtonLink {
   display: block;
-  width: 100%;
+  width: 80%;
   padding: 10px 0;
-  background-color: var(--bg-200);
   border: 1px solid var(--primary);
   border-radius: 10px;
-  color: var(--primary);
+  color: var(--primary) !important;
   font-size: 14px;
-  font-weight: bold;
   text-align: center;
+  margin-top: 20px;
+  margin-left: auto;
+  margin-right: auto;
+
+  &:hover {
+    background-color: var(--primary);
+    color: white !important;
+  }
+
+  &:active {
+    font-weight: var(--font-weight-bold);
+    color: var(--primary) !important;
+    background-color: white;
+    text-decoration: underline;
+  }
 }
 
-.returnButton:hover {
+.problemButtonLink {
+  display: block;
+  padding: 10px 0;
   background-color: var(--primary);
-  color: var(--bg-100);
+  border: 1px solid var(--primary);
+  border-radius: 10px;
+  color: white !important;
+  font-size: 14px;
+  font-weight: bold;
+  text-align: center;
+  margin-top: 20px;
+  margin-left: auto;
+  margin-right: auto;
+
+  &:hover {
+    background-color: var(--tertiary);
+    color: white !important;
+  }
+
+  &:active {
+    background-color: var(--primary);
+    font-weight: var(--font-weight-bold);
+    text-decoration: underline;
+  }
+}
+
+.githubLinkWrapper {
+  margin-top: 10px;
+
+  .githubLink {
+    margin-top: 10px;
+    align-items: center;
+    img {
+      transform: translateY(8px);
+    }
+  }
 }
diff --git a/src/components/Aside/Aside.stories.tsx b/src/components/Aside/Aside.stories.tsx
@@ -11,9 +11,9 @@ export default meta;
 export const Default: StoryObj<typeof meta> = {
   args: {
     githubUsername: "testuser",
-    easyTasks: "5/10",
-    mediumTasks: "8/10",
-    hardTasks: "3/5",
+    easyProgress: "5/10",
+    mediumProgress: "8/10",
+    hardProgress: "3/5",
     solvedTasks: 16,
     totalTasks: 25,
     profile_url: "https://example.com/profile.jpg", // Provide a valid URL or mock
@@ -27,19 +27,19 @@ export const HighProgress: StoryObj<typeof meta> = {
     ...Default.args,
     solvedTasks: 28,
     totalTasks: 30,
-    easyTasks: "10/10",
-    mediumTasks: "10/10",
-    hardTasks: "8/10",
+    easyProgress: "10/10",
+    mediumProgress: "10/10",
+    hardProgress: "8/10",
     grade: Grade.BIG_TREE, // Higher grade for more progress
   },
 };
 
 export const NoTasks: StoryObj<typeof meta> = {
   args: {
     ...Default.args,
-    easyTasks: "0/0",
-    mediumTasks: "0/0",
-    hardTasks: "0/0",
+    easyProgress: "0/0",
+    mediumProgress: "0/0",
+    hardProgress: "0/0",
     solvedTasks: 0,
     totalTasks: 0,
     grade: Grade.SEED, // Minimal grade due to no tasks solved

diff --git a/src/components/Aside/Aside.test.tsx b/src/components/Aside/Aside.test.tsx
@@ -7,9 +7,9 @@ test("renders the Aside component", () => {
   render(
     <Aside
       githubUsername="testuser"
-      easyTasks="10/15"
-      mediumTasks="5/10"
-      hardTasks="2/5"
+      easyProgress="10/15"
+      mediumProgress="5/10"
+      hardProgress="2/5"
       solvedTasks={17}
       totalTasks={30}
       profile_url="https://example.com/profile.jpg"
@@ -26,9 +26,9 @@ test("displays the username", () => {
   render(
     <Aside
       githubUsername="testuser"
-      easyTasks="10/15"
-      mediumTasks="5/10"
-      hardTasks="2/5"
+      easyProgress="10/15"
+      mediumProgress="5/10"
+      hardProgress="2/5"
       solvedTasks={17}
       totalTasks={30}
       profile_url="https://example.com/profile.jpg"
@@ -45,9 +45,9 @@ test("renders the button link with the text", () => {
   render(
     <Aside
       githubUsername="testuser"
-      easyTasks="10/15"
-      mediumTasks="5/10"
-      hardTasks="2/5"
+      easyProgress="10/15"
+      mediumProgress="5/10"
+      hardProgress="2/5"
       solvedTasks={17}
       totalTasks={30}
       profile_url="https://example.com/profile.jpg"

diff --git a/src/components/Aside/Aside.tsx b/src/components/Aside/Aside.tsx
@@ -4,13 +4,14 @@ import Seed from "../../assets/Seed.png";
 import Sprout from "../../assets/Sprout.png";
 import YoungTree from "../../assets/YoungTree.png";
 import LargeTree from "../../assets/LargeTree.png";
+import Github from "../../assets/Github.png";
 import { Grade } from "../../api/services/common/types.ts";
 
 interface AsideProps {
   githubUsername: string;
-  easyTasks: string;
-  mediumTasks: string;
-  hardTasks: string;
+  easyProgress: string;
+  mediumProgress: string;
+  hardProgress: string;
   solvedTasks: number;
   totalTasks: number;
   profile_url: string;
@@ -27,9 +28,9 @@ const imageTable = {
 
 export default function Aside({
   githubUsername,
-  easyTasks,
-  mediumTasks,
-  hardTasks,
+  easyProgress,
+  mediumProgress,
+  hardProgress,
   solvedTasks,
   totalTasks,
   profile_url,
@@ -45,6 +46,12 @@ export default function Aside({
     );
   }, [progressPercent]);
 
+  const taskProgress = [
+    { label: "EASY", progress: easyProgress, className: styles.easy },
+    { label: "MEDIUM", progress: mediumProgress, className: styles.medium },
+    { label: "HARD", progress: hardProgress, className: styles.hard },
+  ];
+
   return (
     <aside>
       <div className={styles.container}>
@@ -54,17 +61,26 @@ export default function Aside({
             <div className={styles["progress-circle"]}></div>
             <img src={profile_url} alt="User's profile picture" />
           </div>
+          <div>
+            <span className={styles.gradientText}>{solvedTasks} </span>
+            <span className={styles.solidText}> 문제</span>
+          </div>
           <div className={styles.progress}>
             <a
+              className={styles.problemButtonLink}
               href={`https://github.com/DaleStudy/leetcode-study/pulls?q=is%3Apr+author%3A${githubUsername}`}
             >
               풀이 보기
             </a>
           </div>
-          <a href={`https://github.com/${githubUsername}`}>
-            {" "}
-            {githubUsername}{" "}
-          </a>
+          <div className={styles.githubLinkWrapper}>
+            <a
+              className={styles.githubLink}
+              href={`https://github.com/${githubUsername}`}
+            >
+              <img src={Github} alt="github"></img> {githubUsername}
+            </a>
+          </div>
         </section>
 
         <section className={styles.currentStatus}>
@@ -73,21 +89,15 @@ export default function Aside({
           </figure>
         </section>
         <section className={styles.taskCounts}>
-          <div className={styles.task}>
-            <span className={styles.easy}>EASY</span>
-            <span>{easyTasks}</span>
-          </div>
-          <div className={styles.task}>
-            <span className={styles.medium}>MEDIUM</span>
-            <span>{mediumTasks}</span>
-          </div>
-          <div className={styles.task}>
-            <span className={styles.hard}>HARD</span>
-            <span>{hardTasks}</span>
-          </div>
+          {taskProgress.map(({ label, progress, className }) => (
+            <div key={label} className={styles.task}>
+              <span className={className}>{label}</span>
+              <span>{progress}</span>
+            </div>
+          ))}
         </section>
       </div>
-      <a href="../Leaderboard/Leaderboard.tsx" className={styles.buttonLink}>
+      <a href="../" className={styles.returnButtonLink}>
         리더보드로 돌아가기
       </a>
     </aside>