Feat/#131 채널 생성 시 이미지 업로드 구현

next.config.js

@@ -1,9 +1,9 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   images: {
-    domains: ['localhost', 'k.kakaocdn.net', 's3.ap-northeast-2.amazonaws.com'],
+    domains: ['localhost', 'k.kakaocdn.net', 'league-hub-s3.s3.ap-northeast-2.amazonaws.com'],
   },
   reactStrictMode: true,
 };
 
-module.exports = nextConfig;
+module.exports = nextConfig;

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>
   );

src/components/providers/MakeGameProvider.tsx

@@ -10,7 +10,6 @@ interface MakeGameProps {
 export interface BasicInfo {
   title: string;
   participationNum: number;
-  channelImageUrl: string;
 }
 
 export interface IsUseCustomRule {
@@ -33,6 +32,7 @@ const MakeGameProvider = ({ children }: MakeGameProps) => {
     initBasicInfo,
     initIsUseCustomRule,
     initCustomRule,
+    initChannelImgUrl,
   } = TFTInitialValue;
 
   const [currentStep, setCurrentStep] = useState<number>(initCurrentStep);
@@ -41,7 +41,7 @@ const MakeGameProvider = ({ children }: MakeGameProps) => {
   const [basicInfo, setBasicInfo] = useState<BasicInfo>(initBasicInfo);
   const [isUseCustomRule, setIsUseCustomRule] = useState<IsUseCustomRule>(initIsUseCustomRule);
   const [customRule, setCustomRule] = useState<CustomRule>(initCustomRule);
-
+  const [channelImgUrl, setChannelImgUrl] = useState<string>('');
   const handleCurrentStep = () => {
     if (currentStep < 3) {
       setCurrentStep((prev) => prev + 1);
@@ -72,13 +72,18 @@ const MakeGameProvider = ({ children }: MakeGameProps) => {
     setCustomRule({ ...customRule, [type]: value });
   };
 
+  const handleImgUrl = (url: string) => {
+    setChannelImgUrl(url);
+  };
+
   const resetState = () => {
     setCurrentStep(initCurrentStep);
     setGameCategory(initCategory);
     setMatchFormat(initMatchFormat);
     setBasicInfo(initBasicInfo);
     setIsUseCustomRule(initIsUseCustomRule);
     setCustomRule(initCustomRule);
+    setChannelImgUrl(initChannelImgUrl);
   };
 
   const isHaveBlankValue = () => {
@@ -108,6 +113,8 @@ const MakeGameProvider = ({ children }: MakeGameProps) => {
     handleCustomRule,
     resetState,
     isHaveBlankValue,
+    channelImgUrl,
+    handleImgUrl,
   };
 
   return <MakeGameContext.Provider value={contextValue}>{children}</MakeGameContext.Provider>;

src/constants/MakeGame.ts

@@ -19,6 +19,7 @@ interface TFTInitial {
   initBasicInfo: BasicInfo;
   initIsUseCustomRule: IsUseCustomRule;
   initCustomRule: CustomRule;
+  initChannelImgUrl: string;
 }
 
 export const TFTInitialValue: TFTInitial = {
@@ -28,7 +29,6 @@ export const TFTInitialValue: TFTInitial = {
   initBasicInfo: {
     title: '',
     participationNum: 0,
-    channelImageUrl: '',
   },
   initIsUseCustomRule: {
     tierMax: false,
@@ -40,4 +40,5 @@ export const TFTInitialValue: TFTInitial = {
     tierMin: 0,
     playCountMin: 50,
   },
+  initChannelImgUrl: '',
 };

src/contexts/MakeGameContext.tsx

@@ -16,6 +16,8 @@ interface MakeGameState {
   handleCustomRule: (type: keyof CustomRule, value: number) => void;
   resetState: () => void;
   isHaveBlankValue: () => boolean;
+  channelImgUrl: string;
+  handleImgUrl: (url: string) => void;
 }
 
 const MakeGameContext = createContext<MakeGameState | null>(null);

src/pages/make-channel.tsx

@@ -23,6 +23,7 @@ const MakeChannel = () => {
     customRule,
     resetState,
     isHaveBlankValue,
+    channelImgUrl,
   } = useMakeGame();
 
   const { addChannel } = useChannels();
@@ -47,6 +48,7 @@ const MakeChannel = () => {
           tierMin: customRule.tierMin,
           playCount: isUseCustomRule.playCount,
           playCountMin: customRule.playCountMin,
+          channelImageUrl: channelImgUrl,
         },
       });
       resetState();