From 899f76f31e7cc29f495f0d1615e83890c64c1a35 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=87=E1=85=A1=E1=86=A8=E1=84=8C=E1=85=A5=E1=86=BC?=
 =?UTF-8?q?=E1=84=89=E1=85=A5=E1=86=A8?= <wjdtjr8649@Naver.com>
Date: Sun, 10 Sep 2023 17:50:30 +0900
Subject: [PATCH] =?UTF-8?q?Feat:=EC=B1=84=EB=84=90=20=EC=83=9D=EC=84=B1?=
 =?UTF-8?q?=EC=8B=9C=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=97=85=EB=A1=9C?=
 =?UTF-8?q?=EB=93=9C=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/MakeChannel/SelectRule.tsx | 35 +++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/src/components/MakeChannel/SelectRule.tsx b/src/components/MakeChannel/SelectRule.tsx
index 2b0f671..fcaa111 100644
--- a/src/components/MakeChannel/SelectRule.tsx
+++ b/src/components/MakeChannel/SelectRule.tsx
@@ -7,8 +7,13 @@ import ToggleButton from '@components/Button/Toggle/index';
 import useMakeGame from '@hooks/useMakeGame';
 import { GameMethod } from '@constants/MakeGame';
 import CustomRule from './CustomRule';
+import { useRef, useState } from 'react';
+import authAPI from '@apis/authAPI';
+import Image from 'next/image';
 
 const SelectRule = () => {
+  const [imageUrl, setImageUrl] = useState<string>();
+
   const {
     matchFormat,
     handleMatchFormat,
@@ -18,8 +23,34 @@ const SelectRule = () => {
     handleIsUseCustomRule,
     customRule,
     handleCustomRule,
+    handleImgUrl,
   } = useMakeGame();
 
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  const fetchUploadChannelImage = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!e.target.files) {
+      return;
+    }
+
+    const formData = new FormData();
+    formData.append('uploadImage', e.target.files[0]);
+
+    try {
+      const res = await authAPI<{ imgUrl: string }>({
+        method: 'post',
+        url: `/api/image`,
+        data: formData,
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      });
+
+      setImageUrl(res.data.imgUrl);
+      handleImgUrl(res.data.imgUrl);
+    } catch (error) {}
+  };
+
   return (
     <Container>
       <Wrapper>
@@ -87,6 +118,10 @@ const SelectRule = () => {
             )}
           </CustomContainer>
         </Rule>
+        <Rule>
+          <input type='file' accept='image/*' ref={inputRef} onChange={fetchUploadChannelImage} />
+          {imageUrl && <Image width={50} height={50} src={imageUrl} alt='channelImage' />}
+        </Rule>
       </Wrapper>
     </Container>
   );