Merge pull request #23 from Seol-JY/feat/medal-design

[FEAT] 3등 이내 UI 변경

Author: Seol-JY

client/public/img/bronze-medal.png

@@ -634,6 +634,10 @@ ul {
   transition: all 0.3s;
 }
 
+.sidebarsection-rank-items-high {
+  height: 60px;
+}
+
 .sidebarsection-rank p {
   margin: 0;
   padding: 0;

client/public/img/gold-medal.png

@@ -21,6 +21,12 @@ export default function Editor({
 
   useEffect(() => {
     setTextSplit(getFilecontents(file).content);
+    if (fileForCompare !== file) {
+      // 파일 변경 시 내용 초기화
+      setFileForCompare(file);
+      setUserInput("");
+    }
+    // eslint-disable-next-line
   }, [file]);
 
   useEffect(() => {
@@ -92,15 +98,6 @@ export default function Editor({
     setUserInput(event.currentTarget.value); // replace(/[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/g,'')
   };
 
-  useEffect(() => {
-    if (fileForCompare !== file) {
-      // 파일 변경 시 내용 초기화
-      setFileForCompare(file);
-      setUserInput("");
-    }
-    // eslint-disable-next-line
-  }, [file]);
-
   useEffect(() => {
     if (sectionForCompare !== section) {
       // Section 변경 시 내용 초기화

client/public/img/silver-medal.png

@@ -1,5 +1,37 @@
 export default function LeaderBoard({ s }) {
-  return (
+  return s.rank >= 1 && s.rank <= 3 ? (
+    <div className="sidebarsection-rank-items sidebarsection-rank-items-high">
+      <ul>
+        {s.rank === 1 && (
+          <img
+            style={{ objectFit: "cover", height: "40px" }}
+            src="/img/gold-medal.png"
+            alt="Gold Medal"
+          />
+        )}
+        {s.rank === 2 && (
+          <img
+            style={{ objectFit: "cover", height: "40px" }}
+            src="/img/silver-medal.png"
+            alt="Silver Medal"
+          />
+        )}
+        {s.rank === 3 && (
+          <img
+            style={{ objectFit: "cover", height: "40px" }}
+            src="/img/bronze-medal.png"
+            alt="Bronze Medal"
+          />
+        )}
+        <p>CPM:{s.cpm}</p>
+      </ul>
+      <ul>
+        <p>{s.name}</p>
+        <p>{s.message}</p>
+        <p>{s.file}</p>
+      </ul>
+    </div>
+  ) : (
     <div className="sidebarsection-rank-items">
       <ul>
         <p>