From 3009696a7b63c616dcb74f4df56105b6f238fad5 Mon Sep 17 00:00:00 2001
From: Yamyam-code <rnffjt@gmail.com>
Date: Tue, 7 Nov 2023 18:42:51 +0900
Subject: [PATCH] =?UTF-8?q?Feat:=20rate=20=EC=A0=95=EB=A0=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/game/rating/Rating.tsx | 28 +++++++++++++++++++--------
 src/components/game/rating/sorting.ts |  8 ++++++++
 2 files changed, 28 insertions(+), 8 deletions(-)
 create mode 100644 src/components/game/rating/sorting.ts

diff --git a/src/components/game/rating/Rating.tsx b/src/components/game/rating/Rating.tsx
index 861a425f..8d815012 100644
--- a/src/components/game/rating/Rating.tsx
+++ b/src/components/game/rating/Rating.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
+import sorting from './sorting';
 
 const RatingWrapper = styled.div`
   flex: 1;
@@ -9,19 +10,30 @@ const RatingWrapper = styled.div`
 `;
 
 export default function Rating() {
-  const [peoples, setPeoples] = useState(['']);
+  const [peoples, setPeoples] = useState([
+    { id: 'dd', correct: 2 },
+    { id: 'bb', correct: 2 },
+    { id: 'cc', correct: 15 },
+    { id: 'aa', correct: 15 },
+  ]);
+  const [finish, setFinish] = useState(0);
   useEffect(() => {
-    setPeoples(['aa', 'bb']);
-  }, []);
+    setPeoples(sorting(peoples));
+    setFinish(1);
+  }, [peoples]);
 
   return (
     <RatingWrapper>
       <h1>Rating</h1>
-      {peoples.map((el, i) => (
-        <h2>
-          {i + 1}. {el}
-        </h2>
-      ))}
+      {{ finish } ? (
+        peoples.map((el, i) => (
+          <h2>
+            {i + 1}. {el.id} X {el.correct}
+          </h2>
+        ))
+      ) : (
+        <div>X</div>
+      )}
     </RatingWrapper>
   );
 }
diff --git a/src/components/game/rating/sorting.ts b/src/components/game/rating/sorting.ts
new file mode 100644
index 00000000..2865e127
--- /dev/null
+++ b/src/components/game/rating/sorting.ts
@@ -0,0 +1,8 @@
+export interface Id {
+  id: string;
+  correct: number;
+}
+
+const sorting = (idArray: Id[]) => idArray.sort((a, b) => b.correct - a.correct || a.id.localeCompare(b.id));
+
+export default sorting;