From 3c261ad08547fc1bacdfdc62927a8233dce7162a Mon Sep 17 00:00:00 2001
From: navyjeongs <wjdtjr8649@naver.com>
Date: Mon, 9 Oct 2023 16:20:37 +0900
Subject: [PATCH] =?UTF-8?q?Feat:=20=EB=8C=80=ED=9A=8C=20=EC=A0=95=EB=B3=B4?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?=
 =?UTF-8?q?=ED=95=84=EC=9A=94=20=EC=97=86=EB=8A=94=20props=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0=20=EB=B0=8F=20useQuery=20=EC=82=AC=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Modal/ModifyChannel/ModifyChannel.tsx     | 28 +++++++++++++------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/components/Modal/ModifyChannel/ModifyChannel.tsx b/src/components/Modal/ModifyChannel/ModifyChannel.tsx
index 432faf7..537116d 100644
--- a/src/components/Modal/ModifyChannel/ModifyChannel.tsx
+++ b/src/components/Modal/ModifyChannel/ModifyChannel.tsx
@@ -1,30 +1,41 @@
+import authAPI from '@apis/authAPI';
 import Icon from '@components/Icon';
 import BasicInfoChannel from '@components/ModifyChannel/BasicInfoChannel';
 import BracketInfoChannel from '@components/ModifyChannel/BracketInfoChannel';
 import styled from '@emotion/styled';
+import { useQuery } from '@tanstack/react-query';
 import { useState } from 'react';
+
 interface ModifyChannelProps {
   channelLink: string;
-  leagueTitle: string;
-  maxPlayer: number;
-  onClose: (leagueTitle?: string, maxPlayer?: number) => void;
+  onClose: () => void;
 }
 
 type MenuList = 'basicInfo' | 'bracketInfo';
 
-const ModifyChannel = ({ channelLink, leagueTitle, maxPlayer, onClose }: ModifyChannelProps) => {
+const fetchChannelInfo = async (channelLink: string) => {
+  const res = await authAPI({ method: 'get', url: `/api/channel/${channelLink}` });
+  return res.data;
+};
+
+const ModifyChannel = ({ channelLink, onClose }: ModifyChannelProps) => {
   const [selectedMenu, setSelectedMenu] = useState<MenuList>('basicInfo');
 
   const handleSelectedMenu = (menu: MenuList) => {
     setSelectedMenu(menu);
   };
 
+  const { data, isSuccess, isError, isLoading } = useQuery(['channelInfo', channelLink], () => {
+    return fetchChannelInfo(channelLink);
+  });
+
   return (
     <Container>
       <Sidebar>
         <SidebarContent onClick={() => handleSelectedMenu('basicInfo')}>
           대회 기본 정보 수정
         </SidebarContent>
+
         <SidebarContent onClick={() => handleSelectedMenu('bracketInfo')}>
           대진표 수정
         </SidebarContent>
@@ -33,8 +44,8 @@ const ModifyChannel = ({ channelLink, leagueTitle, maxPlayer, onClose }: ModifyC
         {selectedMenu === 'basicInfo' && (
           <BasicInfoChannel
             channelLink={channelLink}
-            leagueTitle={leagueTitle}
-            maxPlayer={maxPlayer}
+            leagueTitle={data?.leagueTitle}
+            maxPlayer={data?.maxPlayer}
           />
         )}
         {selectedMenu === 'bracketInfo' && <BracketInfoChannel />}
@@ -49,11 +60,12 @@ const ModifyChannel = ({ channelLink, leagueTitle, maxPlayer, onClose }: ModifyC
 export default ModifyChannel;
 
 const Container = styled.div`
-  width: 100vw;
-  height: 100vh;
+  width: 80rem;
+  height: 60rem;
   background-color: white;
 
   display: flex;
+  position: relative;
 `;
 
 const Sidebar = styled.div`