diff --git a/next.config.js b/next.config.js index 93f6a95..176d75f 100644 --- a/next.config.js +++ b/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; \ No newline at end of file +module.exports = nextConfig; 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(); + const { matchFormat, handleMatchFormat, @@ -18,8 +23,34 @@ const SelectRule = () => { handleIsUseCustomRule, customRule, handleCustomRule, + handleImgUrl, } = useMakeGame(); + const inputRef = useRef(null); + + const fetchUploadChannelImage = async (e: React.ChangeEvent) => { + 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 ( @@ -87,6 +118,10 @@ const SelectRule = () => { )} + + + {imageUrl && channelImage} + ); diff --git a/src/components/providers/MakeGameProvider.tsx b/src/components/providers/MakeGameProvider.tsx index d311740..3206227 100644 --- a/src/components/providers/MakeGameProvider.tsx +++ b/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(initCurrentStep); @@ -41,7 +41,7 @@ const MakeGameProvider = ({ children }: MakeGameProps) => { const [basicInfo, setBasicInfo] = useState(initBasicInfo); const [isUseCustomRule, setIsUseCustomRule] = useState(initIsUseCustomRule); const [customRule, setCustomRule] = useState(initCustomRule); - + const [channelImgUrl, setChannelImgUrl] = useState(''); const handleCurrentStep = () => { if (currentStep < 3) { setCurrentStep((prev) => prev + 1); @@ -72,6 +72,10 @@ const MakeGameProvider = ({ children }: MakeGameProps) => { setCustomRule({ ...customRule, [type]: value }); }; + const handleImgUrl = (url: string) => { + setChannelImgUrl(url); + }; + const resetState = () => { setCurrentStep(initCurrentStep); setGameCategory(initCategory); @@ -79,6 +83,7 @@ const MakeGameProvider = ({ children }: MakeGameProps) => { setBasicInfo(initBasicInfo); setIsUseCustomRule(initIsUseCustomRule); setCustomRule(initCustomRule); + setChannelImgUrl(initChannelImgUrl); }; const isHaveBlankValue = () => { @@ -108,6 +113,8 @@ const MakeGameProvider = ({ children }: MakeGameProps) => { handleCustomRule, resetState, isHaveBlankValue, + channelImgUrl, + handleImgUrl, }; return {children}; diff --git a/src/constants/MakeGame.ts b/src/constants/MakeGame.ts index 00f5eee..cb2da37 100644 --- a/src/constants/MakeGame.ts +++ b/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: '', }; diff --git a/src/contexts/MakeGameContext.tsx b/src/contexts/MakeGameContext.tsx index a857046..e53c2be 100644 --- a/src/contexts/MakeGameContext.tsx +++ b/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(null); diff --git a/src/pages/make-channel.tsx b/src/pages/make-channel.tsx index 4623cd1..d425763 100644 --- a/src/pages/make-channel.tsx +++ b/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();