사이드바 기능구현 (#24)

* ✨ 의존성 모듈 변경 반영

* ✨ 인기언어 쿼리 작성

* ✨ 인기 언어 API 연결

* 🗑️ MockData 삭제

* ✨ 리뷰어 랭킹 팀원 링크 연결

* ✨ 팀원 새창 열리게 수정

* 🐛 로딩상태 jsx로 수정

* 🐛 Github 링크 수정

src/entities/reviewer/ui/reviewer.ui.tsx

@@ -4,20 +4,23 @@ import { Icon } from "~/shared/icons";
 
 interface ReviewerProps {
   reviewerName: string;
+  url: string;
 }
 
-const Item = styled.div`
+const Item = styled.a`
   width: 100%;
   height: 21px;
   display: flex;
   justify-content: flex-start;
   align-items: center;
   gap: 16px;
+  text-decoration: none;
+  color: ${({ theme }) => theme.colors.white};
 `;
 
-export const Reviewer = ({ reviewerName }: ReviewerProps) => {
+export const Reviewer = ({ reviewerName, url }: ReviewerProps) => {
   return (
-    <Item>
+    <Item href={url} target="_blank">
       <Icon.Crown />
       {reviewerName}
     </Item>

src/widgets/language-rank/api/language-rank.key.ts

@@ -0,0 +1,5 @@
+import { ENV } from "~/shared/environment";
+
+export const LANGUAGE_RANK_ENDPOINT = `${ENV.baseUrl}/api/category/popular`;
+
+export const LANGUAGE_RANK_KEY = ["language-rank"];

src/widgets/language-rank/api/use-language-rank.query.ts

@@ -0,0 +1,16 @@
+import { UseQueryResult, useQuery } from "@tanstack/react-query";
+
+import { LanguageRankType } from "../model/language-rank.type";
+import { LANGUAGE_RANK_ENDPOINT, LANGUAGE_RANK_KEY } from "./language-rank.key";
+
+export const useLanguageRankQuery = (): UseQueryResult<LanguageRankType[]> => {
+  const languageRank = useQuery<LanguageRankType[]>({
+    queryKey: LANGUAGE_RANK_KEY,
+    queryFn: async () => {
+      const response = await fetch(LANGUAGE_RANK_ENDPOINT);
+      const json = await response.json();
+      return json;
+    },
+  });
+  return languageRank;
+};

src/widgets/language-rank/model/language-rank.type.ts

@@ -0,0 +1,5 @@
+export interface LanguageRankType {
+  id: number;
+  name: string;
+  count: number;
+}

src/widgets/language-rank/ui/language-rank.ui.tsx

@@ -3,7 +3,7 @@ import styled from "styled-components";
 import { Language } from "~/entities/language/ui/language";
 import { Sidebar } from "~/entities/sidebar";
 
-import { mockData } from "../model/language-rank.model";
+import { useLanguageRankQuery } from "../api/use-language-rank.query";
 
 const LanguageList = styled.div`
   width: 100%;
@@ -15,8 +15,15 @@ const LanguageList = styled.div`
 `;
 
 export const LanguageRank = () => {
-  const listElements = mockData.map(({ id, language }) => <Language key={id} language={language} />);
+  const { data, isPending, isError } = useLanguageRankQuery();
+  const listElements = data?.slice(0, 10).map(({ id, name }) => <Language key={id} language={name} />);
 
+  if (isPending) {
+    return <div>...loading</div>;
+  }
+  if (isError) {
+    return null;
+  }
   return (
     <Sidebar title="인기 언어">
       <LanguageList>{listElements}</LanguageList>

src/widgets/reviewer-rank/model/reviewer-rank.model.tsx

@@ -1,11 +1,10 @@
 export const mockData = [
-  { id: 0, username: "Xion" },
-  { id: 1, username: "Xion" },
-  { id: 2, username: "Xion" },
-  { id: 3, username: "Xion" },
-  { id: 4, username: "Xion" },
-  { id: 5, username: "Xion" },
-  { id: 6, username: "Xion" },
-  { id: 7, username: "Xion" },
-  { id: 8, username: "Xion" },
+  { id: 0, username: "하늘", url: "https://github.com/Leedo02" },
+  { id: 1, username: "로키", url: "https://github.com/rookedsysc" },
+  { id: 2, username: "르미", url: "/ruemi" },
+  { id: 3, username: "미오", url: "https://github.com/Jaeeun98" },
+  { id: 4, username: "삽사리", url: "https://github.com/Sang-minKIM" },
+  { id: 5, username: "시온", url: "https://github.com/XionWCFM" },
+  { id: 6, username: "운터", url: "https://github.com/anveloper" },
+  { id: 7, username: "준", url: "https://github.com/Yongveloper" },
 ];

src/widgets/reviewer-rank/ui/reviewer-rank.ui.tsx

@@ -15,7 +15,7 @@ const ReviewerList = styled.div`
 `;
 
 export const ReviewerRank = () => {
-  const listElements = mockData.map(({ id, username }) => <Reviewer key={id} reviewerName={username} />);
+  const listElements = mockData.map(({ id, username, url }) => <Reviewer key={id} url={url} reviewerName={username} />);
 
   return (
     <Sidebar title="리뷰어 랭킹">