From f325861e30f422d84b7957c941c9eac86b7cbecf Mon Sep 17 00:00:00 2001 From: navyjeongs Date: Mon, 2 Oct 2023 23:54:31 +0900 Subject: [PATCH 1/7] =?UTF-8?q?Feat:=20=EB=8C=80=ED=9A=8C=20=EA=B0=9C?= =?UTF-8?q?=EC=B5=9C=EB=B0=8F=20=EC=B0=B8=EC=97=AC=EB=A5=BC=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=9D=B4=EB=8F=99=20=EB=B0=A9=EC=8B=9D?= =?UTF-8?q?=EC=97=90=EC=84=9C=20=EB=AA=A8=EB=8B=AC=20=EB=B0=A9=EC=8B=9D?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 대회를 개최하거나 참여할 때 페이지 이동을 하지 않고 모달 창으로 할 수 있도록 변경하기위해 기존의 make-channel 페이지를 삭제했어요. --- src/pages/make-channel.tsx | 115 ------------------------------------- 1 file changed, 115 deletions(-) delete mode 100644 src/pages/make-channel.tsx diff --git a/src/pages/make-channel.tsx b/src/pages/make-channel.tsx deleted file mode 100644 index 34662e6..0000000 --- a/src/pages/make-channel.tsx +++ /dev/null @@ -1,115 +0,0 @@ -import { keyframes } from '@emotion/react'; -import { useRouter } from 'next/router'; -import styled from '@emotion/styled'; -import { useEffect } from 'react'; - -import SelectGame from '@components/MakeChannel/SelectGame'; -import SelectRule from '@components/MakeChannel/SelectRule'; -import { ChannelCircleProps } from '@type/channelCircle'; -import Button from '@components/Button/index'; -import useMakeGame from '@hooks/useMakeGame'; -import useChannels from '@hooks/useChannels'; -import authAPI from '@apis/authAPI'; - -const MakeChannel = () => { - const router = useRouter(); - - const { - currentStep, - gameCategory, - matchFormat, - basicInfo, - isUseCustomRule, - customRule, - resetState, - isHaveBlankValue, - channelImgUrl, - } = useMakeGame(); - - const { addChannel } = useChannels(); - - const fetchMakeGame = async () => { - if (isHaveBlankValue()) { - alert('빈 값이 있어요. 확인부탁드립니다'); - return; - } - - try { - const res = await authAPI({ - method: 'post', - url: '/api/channel', - data: { - gameCategory, - matchFormat, - title: basicInfo.title, - maxPlayer: basicInfo.participationNum, - tier: isUseCustomRule.tierMax || isUseCustomRule.tierMin, - tierMax: customRule.tierMax, - tierMin: customRule.tierMin, - playCount: isUseCustomRule.playCount, - playCountMin: customRule.playCountMin, - channelImageUrl: channelImgUrl, - }, - }); - resetState(); - router.push('/'); - addChannel(res.data); - } catch (error) { - console.log(error); - } - }; - - useEffect(() => { - if (currentStep === 1) { - if (!confirm('이전에 작성하시던 정보가 있습니다. 이어서 작성하시겠습니까?')) { - resetState(); - } - } - }, []); - - return ( - - - {currentStep === 0 && } - {currentStep === 1 && } - - - {currentStep === 1 && ( - - )} - - - ); -}; - -export default MakeChannel; - -export const fadeIn = keyframes` - 0% { - opacity: 0; - transform: translateY(10px); - } - 100% { - opacity: 1; - transform: translateY(0); - } -`; - -const Container = styled.div` - width: 100%; - height: calc(100vh - 5.5rem); - position: relative; -`; - -const Wrapper = styled.div` - padding: 5rem; - transition: 0.3s ease; -`; - -const StepBtnContainer = styled.div` - position: absolute; - bottom: 5rem; - right: 5rem; -`; From ec7b82fe01d25de38f5af24915973b6d96b8d0d7 Mon Sep 17 00:00:00 2001 From: navyjeongs Date: Mon, 2 Oct 2023 23:56:08 +0900 Subject: [PATCH 2/7] =?UTF-8?q?Feat:=20=ED=98=84=EC=9E=AC=20=EB=8C=80?= =?UTF-8?q?=ED=9A=8C=20=EA=B0=9C=EC=B5=9C/=EC=B0=B8=EC=97=AC=20=EC=83=81?= =?UTF-8?q?=ED=83=9C=EB=A5=BC=20=ED=99=95=EC=9D=B8=ED=95=98=EB=8A=94=20enu?= =?UTF-8?q?m=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/constants/MakeGame.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/constants/MakeGame.ts b/src/constants/MakeGame.ts index cb2da37..b0b829f 100644 --- a/src/constants/MakeGame.ts +++ b/src/constants/MakeGame.ts @@ -1,5 +1,12 @@ import { BasicInfo, CustomRule, IsUseCustomRule } from '@components/providers/MakeGameProvider'; +export enum MakeChannelStep { + 'MakeOrJoin', + 'SelectGame', + 'SettingRule', + 'JoinGame', +} + export enum GameEnum { 'TFT', 'LOL', @@ -13,7 +20,6 @@ export enum GameMethod { } interface TFTInitial { - initCurrentStep: number; initCategory: number; initMatchFormat: number; initBasicInfo: BasicInfo; @@ -23,7 +29,6 @@ interface TFTInitial { } export const TFTInitialValue: TFTInitial = { - initCurrentStep: 0, initCategory: -1, initMatchFormat: 0, initBasicInfo: { From 8b5f41849dc9caa55f2f33313d21c3e847b683c5 Mon Sep 17 00:00:00 2001 From: navyjeongs Date: Wed, 4 Oct 2023 23:35:28 +0900 Subject: [PATCH 3/7] =?UTF-8?q?Feat:=20=EC=B1=84=EB=84=90=20Context?= =?UTF-8?q?=EC=97=90=EC=84=9C=20=EB=8B=A8=EA=B3=84=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/contexts/MakeGameContext.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/contexts/MakeGameContext.tsx b/src/contexts/MakeGameContext.tsx index e53c2be..dd0ba19 100644 --- a/src/contexts/MakeGameContext.tsx +++ b/src/contexts/MakeGameContext.tsx @@ -2,8 +2,6 @@ import { BasicInfo, CustomRule, IsUseCustomRule } from '@components/providers/Ma import { ChangeEvent, createContext } from 'react'; interface MakeGameState { - currentStep: number; - handleCurrentStep: () => void; gameCategory: number; handleSelectGameCategory: (category: number) => void; basicInfo: BasicInfo; From 410fb65752deedb354ae6f9514159b533eebecbd Mon Sep 17 00:00:00 2001 From: navyjeongs Date: Thu, 5 Oct 2023 20:03:34 +0900 Subject: [PATCH 4/7] =?UTF-8?q?Feat:=20=EB=8C=80=ED=9A=8C=20=EA=B0=9C?= =?UTF-8?q?=EC=B5=9C.=EC=B0=B8=EC=97=AC=20=EB=8B=A8=EA=B2=8C=20state=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 대회 개최 단계를 저장하는 것을 Context에서 삭제하고 useState로 관리 --- .../ChannelBar/SelectChannelType.test.tsx | 55 +++++++------- .../Sidebar/ChannelBar/SelectChannelType.tsx | 76 ++++++++++++++----- 2 files changed, 86 insertions(+), 45 deletions(-) diff --git a/__test__/components/Sidebar/ChannelBar/SelectChannelType.test.tsx b/__test__/components/Sidebar/ChannelBar/SelectChannelType.test.tsx index 5bdaec4..266abfd 100644 --- a/__test__/components/Sidebar/ChannelBar/SelectChannelType.test.tsx +++ b/__test__/components/Sidebar/ChannelBar/SelectChannelType.test.tsx @@ -1,45 +1,45 @@ -import Modal from '@components/Modal'; import SelectChannelType from '@components/Sidebar/ChannelBar/SelectChannelType'; import { render, screen } from '@testing-library/react'; -import mockRouter from 'next-router-mock'; import userEvent from '@testing-library/user-event'; import ChannelsProvider from '@components/providers/ChannelsProvider'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; - -jest.mock('next/router', () => require('next-router-mock')); +import MakeGameProvider from '@components/providers/MakeGameProvider'; describe('채널 추가 테스트', () => { const queryClient = new QueryClient(); - const mockFn = jest.fn(); - it('초기에는 대회 개최 버튼과 대회 참여 버튼이 있다.', () => { render( - { - return; - }} - /> + + { + return; + }} + /> + , ); const btns = screen.getAllByRole('button'); + expect(btns[0].innerHTML).toBe('대회 개최'); - expect(btns[1].innerHTML).toBe('대회 참여'); + expect(btns[1].innerHTML).toBe('채널 참여'); }); - it('대회 개최하기 버튼을 누르면 make-channel 페이지로 이동한다.', async () => { + it('대회 개최하기 버튼을 누르면 게임을 선택하는 화면이 나타난다..', async () => { render( - { - return; - }} - /> + + { + return; + }} + /> + , ); @@ -47,23 +47,26 @@ describe('채널 추가 테스트', () => { const makeBtn = screen.getByText('대회 개최'); await userEvent.click(makeBtn); - expect(mockRouter.asPath).toBe('/make-channel'); + const title = screen.getByText('개최하실 게임을 선택해주세요.'); + expect(title).toBeInTheDocument(); }); - it('대회 참여하기 버튼을 누르면 참여 코드를 입력하는 input이 표시된다.', async () => { + it('채널 참여하기 버튼을 누르면 참여 코드를 입력하는 input이 표시된다.', async () => { render( - { - return; - }} - /> + + { + return; + }} + /> + , ); - const enterBtn = screen.getByText('대회 참여'); + const enterBtn = screen.getByText('채널 참여'); await userEvent.click(enterBtn); const input = screen.getByPlaceholderText('참여 코드 입력'); diff --git a/src/components/Sidebar/ChannelBar/SelectChannelType.tsx b/src/components/Sidebar/ChannelBar/SelectChannelType.tsx index e48bf6d..1035621 100644 --- a/src/components/Sidebar/ChannelBar/SelectChannelType.tsx +++ b/src/components/Sidebar/ChannelBar/SelectChannelType.tsx @@ -1,5 +1,9 @@ import authAPI from '@apis/authAPI'; import Button from '@components/Button'; +import SelectGame from '@components/MakeChannel/SelectGame'; +import SelectRule from '@components/MakeChannel/SelectRule'; +import { MakeChannelStep } from '@constants/MakeGame'; +import { keyframes } from '@emotion/react'; import styled from '@emotion/styled'; import useChannels from '@hooks/useChannels'; import { ChannelCircleProps } from '@type/channelCircle'; @@ -14,17 +18,14 @@ interface Props { const SelectChannelType = (props: Props) => { const { handleModal } = props; - const router = useRouter(); - const channels = useChannels(); - const [curIdx, setCurIdx] = useState(0); + const [currentModalStep, setCurrentModalStep] = useState(MakeChannelStep['MakeOrJoin']); const [channelInput, setChannelInput] = useState(); - const handleRouter = () => { - handleModal(); - router.push('/make-channel'); + const handleCurrentModalStep = (step: keyof typeof MakeChannelStep) => { + setCurrentModalStep(MakeChannelStep[step]); }; const fetchEnterNewChannel = async (event: React.FormEvent) => { @@ -59,40 +60,49 @@ const SelectChannelType = (props: Props) => { return ( - {curIdx === 0 ? ( + {currentModalStep === MakeChannelStep.MakeOrJoin && ( <> - 대회 개최하기 - 대회를 만들고 시작해보세요! + 채널 추가하기 + 채널을 추가하고 시작해보세요! - 대회 개최하기 - - 대회 참여하기 - - ) : ( + )} + {currentModalStep === MakeChannelStep.SelectGame && ( + + )} + + {currentModalStep === MakeChannelStep.SettingRule && ( + + )} + + {currentModalStep === MakeChannelStep.JoinGame && ( <> - 대회 참여하기 - 대회에 참여하여 우승해보세요! + 채널 참여하기 + 채널에 참여하여 대회를 확인해보세요! - @@ -106,7 +116,24 @@ const SelectChannelType = (props: Props) => { export default SelectChannelType; const Container = styled.div` + width: 50rem; + max-height: 80rem; padding: 3rem; + + overflow-y: auto; + overflow-x: hidden; + + ::-webkit-scrollbar { + width: 1rem; + } + ::-webkit-scrollbar-thumb { + background-color: #202b37; + border-radius: 1rem; + } + ::-webkit-scrollbar-track { + background-color: #344051; + border-radius: 1rem; + } `; const ModalTitle = styled.h1` @@ -168,3 +195,14 @@ const ChannelInput = styled.input` color: #61677a; `; ChannelInput.defaultProps = { placeholder: '참여 코드 입력' }; + +export const fadeIn = keyframes` + 0% { + opacity: 0; + transform: translateY(10px); + } + 100% { + opacity: 1; + transform: translateY(0); + } +`; From 3ae883a47aeac7f1ea824e0e94d9e422184ced73 Mon Sep 17 00:00:00 2001 From: navyjeongs Date: Thu, 5 Oct 2023 20:05:22 +0900 Subject: [PATCH 5/7] =?UTF-8?q?Feat:=20currentStep=EC=9D=84=20context?= =?UTF-8?q?=EC=97=90=EC=84=9C=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/providers/MakeGameProvider.tsx | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/src/components/providers/MakeGameProvider.tsx b/src/components/providers/MakeGameProvider.tsx index 3206227..86c4534 100644 --- a/src/components/providers/MakeGameProvider.tsx +++ b/src/components/providers/MakeGameProvider.tsx @@ -26,7 +26,6 @@ export interface CustomRule { const MakeGameProvider = ({ children }: MakeGameProps) => { const { - initCurrentStep, initCategory, initMatchFormat, initBasicInfo, @@ -35,22 +34,15 @@ const MakeGameProvider = ({ children }: MakeGameProps) => { initChannelImgUrl, } = TFTInitialValue; - const [currentStep, setCurrentStep] = useState(initCurrentStep); const [gameCategory, setGameCategory] = useState(initCategory); const [matchFormat, setMatchFormat] = useState(initMatchFormat); 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); - } - }; const handleSelectGameCategory = (category: number) => { setGameCategory(category); - handleCurrentStep(); }; const handleMatchFormat = (type: number) => { @@ -77,7 +69,6 @@ const MakeGameProvider = ({ children }: MakeGameProps) => { }; const resetState = () => { - setCurrentStep(initCurrentStep); setGameCategory(initCategory); setMatchFormat(initMatchFormat); setBasicInfo(initBasicInfo); @@ -99,8 +90,6 @@ const MakeGameProvider = ({ children }: MakeGameProps) => { }; const contextValue = { - currentStep, - handleCurrentStep, gameCategory, handleSelectGameCategory, basicInfo, From 71bf1d8afc84f0f43ee3c2f0efc09562de39261f Mon Sep 17 00:00:00 2001 From: navyjeongs Date: Thu, 5 Oct 2023 20:06:27 +0900 Subject: [PATCH 6/7] =?UTF-8?q?Feat:=20=EB=8C=80=ED=9A=8C=20=EA=B0=9C?= =?UTF-8?q?=EC=B5=9C=20=EB=B0=A9=EC=8B=9D=20=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=EC=97=90=EC=84=9C=20=EB=AA=A8=EB=8B=AC=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD=20=EB=B0=8F=20=ED=85=8C=EC=8A=A4=ED=8A=B8=20=EC=BD=94?= =?UTF-8?q?=EB=93=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MakeChannel/SelectGame.test.tsx | 11 +- .../MakeChannel/SelectRule.test.tsx | 48 ++++++-- src/components/MakeChannel/SelectGame.tsx | 41 +++++-- src/components/MakeChannel/SelectRule.tsx | 103 ++++++++++++++++-- 4 files changed, 166 insertions(+), 37 deletions(-) diff --git a/__test__/components/MakeChannel/SelectGame.test.tsx b/__test__/components/MakeChannel/SelectGame.test.tsx index a77a576..4173a9c 100644 --- a/__test__/components/MakeChannel/SelectGame.test.tsx +++ b/__test__/components/MakeChannel/SelectGame.test.tsx @@ -1,25 +1,26 @@ import SelectGame from '@components/MakeChannel/SelectGame'; import MakeGameProvider from '@components/providers/MakeGameProvider'; import { render, screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; describe('대회 개최 게임 테스트', () => { - it('총 4개의 게임이 화면에 나타난다.', () => { + const mockFn = jest.fn(); + + it('총 5개의 버튼(게임 종류 4개의 버튼과 뒤로가기 버튼)이 화면에 나타난다.', () => { render( - + , ); const btnsEl = screen.getAllByRole('button'); - expect(btnsEl.length).toBe(4); + expect(btnsEl.length).toBe(5); }); it('TFT 버튼이 화면에 있다.', () => { render( - + , ); diff --git a/__test__/components/MakeChannel/SelectRule.test.tsx b/__test__/components/MakeChannel/SelectRule.test.tsx index a8a7575..126d6e4 100644 --- a/__test__/components/MakeChannel/SelectRule.test.tsx +++ b/__test__/components/MakeChannel/SelectRule.test.tsx @@ -1,14 +1,26 @@ import SelectRule from '@components/MakeChannel/SelectRule'; +import ChannelsProvider from '@components/providers/ChannelsProvider'; import MakeGameProvider from '@components/providers/MakeGameProvider'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; +import mockRouter from 'next-router-mock'; +jest.mock('next/router', () => require('next-router-mock')); describe('룰 작성 컴포넌트 테스트', () => { + const queryClient = new QueryClient(); + + const mockFn = jest.fn(); + it('대회 방식을 선택하는 버튼이 있다.', () => { render( - - - , + + + + + + + , ); const ruleBtnEl = screen.getByText('프리포올'); @@ -18,9 +30,13 @@ describe('룰 작성 컴포넌트 테스트', () => { it('참여자 수 Input에는 숫자를 입력할 수 있다.', async () => { render( - - - , + + + + + + + , ); const inputEl: HTMLInputElement = screen.getByPlaceholderText('참여자 수 ex) 32'); @@ -31,9 +47,13 @@ describe('룰 작성 컴포넌트 테스트', () => { it('참여자 수 Input에는 숫자를 제외한 문자를 입력할 수 없다.', async () => { render( - - - , + + + + + + + , ); const inputEl: HTMLInputElement = screen.getByPlaceholderText('참여자 수 ex) 32'); @@ -44,9 +64,13 @@ describe('룰 작성 컴포넌트 테스트', () => { it('최대 티어를 설정하는 컴포넌트는 최초에 보이지 않는다.', () => { render( - - - , + + + + + + + , ); const selectEl = screen.queryByRole('combobox'); diff --git a/src/components/MakeChannel/SelectGame.tsx b/src/components/MakeChannel/SelectGame.tsx index de88934..da1ed22 100644 --- a/src/components/MakeChannel/SelectGame.tsx +++ b/src/components/MakeChannel/SelectGame.tsx @@ -1,21 +1,36 @@ -import { GameEnum } from '@constants/MakeGame'; +import Button from '@components/Button'; +import { GameEnum, MakeChannelStep } from '@constants/MakeGame'; import { keyframes } from '@emotion/react'; import styled from '@emotion/styled'; import useMakeGame from '@hooks/useMakeGame'; -const SelectGame = () => { +interface Props { + handleCurrentModalStep: (step: keyof typeof MakeChannelStep) => void; +} + +const SelectGame = ({ handleCurrentModalStep }: Props) => { const { handleSelectGameCategory } = useMakeGame(); + const handleSelectGame = (category: keyof typeof GameEnum) => { + handleSelectGameCategory(GameEnum[category]); + handleCurrentModalStep('SettingRule'); + }; + return ( 개최하실 게임을 선택해주세요. - handleSelectGameCategory(GameEnum.TFT)}>TFT - handleSelectGameCategory(GameEnum.LOL)}>L.O.L - handleSelectGameCategory(GameEnum.HSS)}>하스스톤 - handleSelectGameCategory(GameEnum.FIFA)}>FIFA + handleSelectGame('TFT')}>TFT + handleSelectGame('LOL')}>L.O.L + handleSelectGame('HSS')}>하스스톤 + handleSelectGame('FIFA')}>FIFA + + + ); @@ -35,7 +50,6 @@ export const fadeIn = keyframes` `; const Container = styled.div` - height: calc(100vh - 15.5rem); min-height: inherit; display: flex; align-items: center; @@ -49,7 +63,7 @@ const Wrapper = styled.div``; const Title = styled.h1` text-align: center; font-size: 3rem; - margin: 5rem 0; + margin: 3rem 0; `; const GameContainer = styled.div` @@ -57,15 +71,22 @@ const GameContainer = styled.div` align-items: center; column-gap: 2rem; justify-content: center; + flex-direction: column; + + row-gap: 2rem; `; const GameBtn = styled.button` background-color: #202b37; - width: 20rem; - height: 12.5rem; + width: 100%; + height: 8rem; border-radius: 1rem; color: #f9fafb; border: none; font-size: 3rem; cursor: pointer; `; + +const BtnContainer = styled.div` + margin-top: 2rem; +`; diff --git a/src/components/MakeChannel/SelectRule.tsx b/src/components/MakeChannel/SelectRule.tsx index fcaa111..aa8a7fb 100644 --- a/src/components/MakeChannel/SelectRule.tsx +++ b/src/components/MakeChannel/SelectRule.tsx @@ -5,16 +5,28 @@ import Button from '@components/Button/index'; import ToggleButton from '@components/Button/Toggle/index'; import useMakeGame from '@hooks/useMakeGame'; -import { GameMethod } from '@constants/MakeGame'; +import { GameMethod, MakeChannelStep } from '@constants/MakeGame'; import CustomRule from './CustomRule'; import { useRef, useState } from 'react'; import authAPI from '@apis/authAPI'; import Image from 'next/image'; +import { ChannelCircleProps } from '@type/channelCircle'; +import useChannels from '@hooks/useChannels'; +import { useRouter } from 'next/router'; + +interface Props { + handleCurrentModalStep: (step: keyof typeof MakeChannelStep) => void; +} + +const SelectRule = ({ handleCurrentModalStep }: Props) => { + const inputRef = useRef(null); + + const router = useRouter(); -const SelectRule = () => { const [imageUrl, setImageUrl] = useState(); const { + gameCategory, matchFormat, handleMatchFormat, basicInfo, @@ -24,9 +36,43 @@ const SelectRule = () => { customRule, handleCustomRule, handleImgUrl, + channelImgUrl, + resetState, + isHaveBlankValue, } = useMakeGame(); - const inputRef = useRef(null); + const { addChannel } = useChannels(); + + const fetchMakeGame = async () => { + if (isHaveBlankValue()) { + alert('빈 값이 있어요. 확인부탁드립니다'); + return; + } + + try { + const res = await authAPI({ + method: 'post', + url: '/api/channel', + data: { + gameCategory, + matchFormat, + title: basicInfo.title, + maxPlayer: basicInfo.participationNum, + tier: isUseCustomRule.tierMax || isUseCustomRule.tierMin, + tierMax: customRule.tierMax, + tierMin: customRule.tierMin, + playCount: isUseCustomRule.playCount, + playCountMin: customRule.playCountMin, + channelImageUrl: channelImgUrl, + }, + }); + resetState(); + router.push('/'); + addChannel(res.data); + } catch (error) { + console.log(error); + } + }; const fetchUploadChannelImage = async (e: React.ChangeEvent) => { if (!e.target.files) { @@ -81,9 +127,10 @@ const SelectRule = () => { value={basicInfo.participationNum === 0 ? '' : basicInfo.participationNum} onChange={(e) => handleBasicInfo('participationNum', e)} /> - *입력한 참여자 수의 75%가 참여해야 대회를 시작할 수 있습니다. + *참여자 수의 75%가 참여해야 대회를 시작할 수 있습니다. + 3. 커스텀 룰 @@ -119,9 +166,23 @@ const SelectRule = () => { - + 4. 대회 이미지(선택) + {imageUrl && channelImage} + + + + ); @@ -147,10 +208,11 @@ const Container = styled.div` const Wrapper = styled.div``; const Rule = styled.div` - margin: 3rem 0; + margin: 2rem 0; `; const RuleTitle = styled.h2` - font-size: 3rem; + font-size: 2.4rem; + text-align: left; `; const CustomContainer = styled.div` @@ -164,6 +226,7 @@ const InputContainer = styled.div` display: flex; flex-direction: column; row-gap: 2rem; + margin: 2rem 0; `; const BtnContainer = styled.div` @@ -171,17 +234,17 @@ const BtnContainer = styled.div` `; const RuleInput = styled.input` - width: 40rem; + width: 20rem; height: 6rem; margin: 0; border: 0.1rem solid black; border-radius: 1rem; - font-size: 2rem; + font-size: 1.6rem; padding: 1rem; `; const RuleInfo = styled.span` - font-size: 1.8rem; + font-size: 1.5rem; `; const RuleBtn = styled(Button)<{ isSelected: boolean }>` @@ -191,3 +254,23 @@ const RuleBtn = styled(Button)<{ isSelected: boolean }>` const CustomTitle = styled.h3` font-size: 2rem; `; + +const StepBtnContainer = styled.div` + display: flex; + align-items: center; + justify-content: center; + + flex-direction: column; + row-gap: 2rem; +`; + +const ImageUploadInput = styled.input` + position: absolute; + width: 0; + height: 0; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; +`; From a17a96323a8c5e463bd63cb86966b9e1bed173ee Mon Sep 17 00:00:00 2001 From: navyjeongs Date: Thu, 5 Oct 2023 20:10:24 +0900 Subject: [PATCH 7/7] =?UTF-8?q?Feat:=20=EB=AA=A8=EB=8B=AC=EC=9D=84=20?= =?UTF-8?q?=EB=8B=AB=EC=9C=BC=EB=A9=B4=20=EC=9E=85=EB=A0=A5=20=EB=82=B4?= =?UTF-8?q?=EC=9A=A9=20=EC=B4=88=EA=B8=B0=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Sidebar/ChannelBar/ChannelBar.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/Sidebar/ChannelBar/ChannelBar.tsx b/src/components/Sidebar/ChannelBar/ChannelBar.tsx index b913762..b845ffa 100644 --- a/src/components/Sidebar/ChannelBar/ChannelBar.tsx +++ b/src/components/Sidebar/ChannelBar/ChannelBar.tsx @@ -9,6 +9,7 @@ import useChannels from '@hooks/useChannels'; import Modal from '@components/Modal'; import Icon from '@components/Icon'; import useModals from '@hooks/useModals'; +import useMakeGame from '@hooks/useMakeGame'; interface ChannelBarProps { channels: ChannelCircleProps[]; @@ -19,6 +20,8 @@ const ChannelBar = ({ channels, updateSelectedChannel }: ChannelBarProps) => { const { dragAndDropChannels } = useChannels(); const { openModal, closeModal } = useModals(); + const { resetState } = useMakeGame(); + const dragEnd = ({ source, destination }: DropResult) => { if (!destination) { return; @@ -78,7 +81,10 @@ const ChannelBar = ({ channels, updateSelectedChannel }: ChannelBarProps) => { openModal(Modal, { - onClose: () => closeModal(Modal), + onClose: () => { + closeModal(Modal); + resetState(); + }, children: closeModal(Modal)} />, }) }