feat: add sample hook call in pages

DaleStudy · Nov 14, 2024 · c8141ed · c8141ed
1 parent d0de9b7
commit c8141ed
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 8 deletions.
diff --git a/src/components/Certificate/Certificate.tsx b/src/components/Certificate/Certificate.tsx
@@ -1,8 +1,15 @@
-import styles from "./Certificate.module.css";
-import Header from "../Header/Header";
+import { getMembers } from "../../api/services/store/storeService";
+import useMembers from "../../hooks/useMembers";
+
 import Footer from "../Footer/Footer";
+import Header from "../Header/Header";
+
+import styles from "./Certificate.module.css";
 
 export default function Certificate() {
+  const { members, isLoading, error } = useMembers({ getMembers });
+  console.log({ members, isLoading, error });
+
   const member = new URL(location.href).searchParams.get("member");
 
   /**

diff --git a/src/components/Leaderboard/Leaderboard.tsx b/src/components/Leaderboard/Leaderboard.tsx
@@ -1,9 +1,15 @@
-import styles from "./Leaderboard.module.css";
-import Header from "../Header/Header";
 import Footer from "../Footer/Footer";
+import Header from "../Header/Header";
 
+import { getMembers } from "../../api/services/store/storeService";
+import useMembers from "../../hooks/useMembers";
+
+import styles from "./Leaderboard.module.css";
 export default function Leaderboard() {
-  const members = [
+  const { members, isLoading, error } = useMembers({ getMembers });
+  console.log({ members, isLoading, error });
+
+  const mockMembers = [
     { name: "DaleSeo", solved: 71, rank: "새싹" },
     { name: "sounmind", solved: 69, rank: "나무" },
     { name: "yolophg", solved: 65, rank: "새싹" },
@@ -20,7 +26,7 @@ export default function Leaderboard() {
       <article aria-labelledby="leaderboard">
         <h2 id="leaderboard">Members List</h2>
         <ul>
-          {members.map((member) => (
+          {mockMembers.map((member) => (
             <li key={member.name}>
               <div>등급: {member.rank}</div>
               <div>진행 상황: {member.solved}</div>

diff --git a/src/components/Progress/Progress.tsx b/src/components/Progress/Progress.tsx
@@ -1,8 +1,15 @@
-import styles from "./Progress.module.css";
-import Header from "../Header/Header";
 import Footer from "../Footer/Footer";
+import Header from "../Header/Header";
+
+import { getMembers } from "../../api/services/store/storeService";
+import useMembers from "../../hooks/useMembers";
+
+import styles from "./Progress.module.css";
 
 export default function Progress() {
+  const { members, isLoading, error } = useMembers({ getMembers });
+  console.log({ members, isLoading, error });
+
   const tasks = [
     { id: 128, title: "Longest Consecutive Sequence", difficulty: "Med." },
     { id: 1, title: "Two Sum", difficulty: "Easy" },