From dad1da798dff94989d2f74f4389b216ff0cb64c3 Mon Sep 17 00:00:00 2001 From: navyjeongs Date: Sat, 9 Sep 2023 23:31:33 +0900 Subject: [PATCH 1/9] =?UTF-8?q?Test:=20=EC=B1=84=EB=84=90=20=EC=B0=B8?= =?UTF-8?q?=EA=B0=80=20mock=20api=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- __mocks__/handlers/channelHandlers.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/__mocks__/handlers/channelHandlers.ts b/__mocks__/handlers/channelHandlers.ts index dec07e4..2a6a519 100644 --- a/__mocks__/handlers/channelHandlers.ts +++ b/__mocks__/handlers/channelHandlers.ts @@ -64,6 +64,10 @@ const channelHandlers = [ rest.post(SERVER_URL + '/api/channel', (req, res, ctx) => { return res(ctx.json(postChannels[0])); }), + + rest.post(SERVER_URL + '/api/:channelLink/participant/observer', (req, res, ctx) => { + return res(ctx.json(postChannels[0])); + }), ]; export default channelHandlers; From 613a605a101636df53e75411960e3694dbfa700d Mon Sep 17 00:00:00 2001 From: navyjeongs Date: Sat, 9 Sep 2023 23:32:12 +0900 Subject: [PATCH 2/9] =?UTF-8?q?Test:=20=ED=85=8C=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EC=BD=94=EB=93=9C=EC=97=90=20react-query=20client=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ChannelBar/SelectChannelType.test.tsx | 58 ++++++++++++------- 1 file changed, 37 insertions(+), 21 deletions(-) diff --git a/__test__/components/Sidebar/ChannelBar/SelectChannelType.test.tsx b/__test__/components/Sidebar/ChannelBar/SelectChannelType.test.tsx index a54c7a8..66d3818 100644 --- a/__test__/components/Sidebar/ChannelBar/SelectChannelType.test.tsx +++ b/__test__/components/Sidebar/ChannelBar/SelectChannelType.test.tsx @@ -3,19 +3,27 @@ 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')); describe('채널 추가 테스트', () => { + const queryClient = new QueryClient(); + it('초기에는 대회 개최 버튼과 대회 참여 버튼이 있다.', () => { render( - - { - return; - }} - /> - , + + + + { + return; + }} + /> + + + , ); const btns = screen.getAllByRole('button'); @@ -25,13 +33,17 @@ describe('채널 추가 테스트', () => { it('대회 개최하기 버튼을 누르면 make-channel 페이지로 이동한다.', async () => { render( - - { - return; - }} - /> - , + + + + { + return; + }} + /> + + + , ); const makeBtn = screen.getByText('대회 개최'); @@ -42,13 +54,17 @@ describe('채널 추가 테스트', () => { it('대회 참여하기 버튼을 누르면 참여 코드를 입력하는 input이 표시된다.', async () => { render( - - { - return; - }} - /> - , + + + + { + return; + }} + /> + + + , ); const enterBtn = screen.getByText('대회 참여'); From 192ab6246f41388683e583770fe71b89a8370565 Mon Sep 17 00:00:00 2001 From: navyjeongs Date: Sat, 9 Sep 2023 23:33:35 +0900 Subject: [PATCH 3/9] =?UTF-8?q?Feat:=20=EC=B1=84=EB=84=90=20=EC=B0=B8?= =?UTF-8?q?=EA=B0=80=ED=95=98=EB=8A=94=20=EC=BD=94=EB=93=9C=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Sidebar/ChannelBar/SelectChannelType.tsx | 48 ++++++++++++++++++- 1 file changed, 46 insertions(+), 2 deletions(-) diff --git a/src/components/Sidebar/ChannelBar/SelectChannelType.tsx b/src/components/Sidebar/ChannelBar/SelectChannelType.tsx index 3afbf66..377191e 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 styled from '@emotion/styled'; +import useChannels from '@hooks/useChannels'; +import { ChannelCircleProps } from '@type/channelCircle'; +import { AxiosError } from 'axios'; import { useRouter } from 'next/router'; import { useState } from 'react'; @@ -12,13 +16,47 @@ const SelectChannelType = (props: Props) => { const router = useRouter(); + const channels = useChannels(); + const [curIdx, setCurIdx] = useState(0); + const [channelInput, setChannelInput] = useState(); + const handleRouter = () => { handleModal(); router.push('/make-channel'); }; + const fetchEnterNewChannel = async (event: React.FormEvent) => { + event.preventDefault(); + + try { + const res = await authAPI({ + method: 'post', + url: `/api/${channelInput}/participant/observer`, + }); + + const newChannel: ChannelCircleProps = { + channelLink: res.data.channelLink, + title: res.data.title, + category: res.data.category, + imgSrc: res.data?.imgSrc, + customChannelIndex: res.data.customChannelIndex, + }; + + channels.addChannel(newChannel); + handleModal(); + } catch (error) { + if (error instanceof AxiosError) { + alert(error.response?.data.message); + } + } + }; + + const handleChannelInput = (e: React.ChangeEvent) => { + setChannelInput(e.target.value); + }; + return ( {curIdx === 0 ? ( @@ -46,8 +84,8 @@ const SelectChannelType = (props: Props) => { 대회에 참여하여 우승해보세요! - - + + @@ -122,5 +160,11 @@ const ChannelInput = styled.input` width: 25rem; height: 5rem; border: none; + + background-color: #f1f0e8; + + border-radius: 1rem; + + color: #61677a; `; ChannelInput.defaultProps = { placeholder: '참여 코드 입력' }; From 93f184a772d2c0394d0f1e5fdb90b96f00460b4d 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?= Date: Sun, 10 Sep 2023 18:42:24 +0900 Subject: [PATCH 4/9] =?UTF-8?q?Design:=20=EC=B1=84=EB=84=90=EB=B0=94=20hei?= =?UTF-8?q?ght=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Sidebar/ChannelBar/ChannelBar.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/Sidebar/ChannelBar/ChannelBar.tsx b/src/components/Sidebar/ChannelBar/ChannelBar.tsx index 6a7c6aa..5679619 100644 --- a/src/components/Sidebar/ChannelBar/ChannelBar.tsx +++ b/src/components/Sidebar/ChannelBar/ChannelBar.tsx @@ -88,7 +88,9 @@ const ChannelbarContainer = styled.div` padding: 2rem 0; width: 10rem; - height: 100vh; + + min-height: 100vh; + height: 100%; background-color: #141c24; float: left; From 5b2ba416058deea6dbe204fee83c2d2bf3eeee8c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EC=A0=95=EC=84=9D?= <100738049+navyjeongs@users.noreply.github.com> Date: Sun, 10 Sep 2023 22:06:46 +0900 Subject: [PATCH 5/9] =?UTF-8?q?"Fix:=20=EC=B1=84=EB=84=90=20=ED=83=80?= =?UTF-8?q?=EC=9E=85=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- __mocks__/handlers/channelHandlers.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/__mocks__/handlers/channelHandlers.ts b/__mocks__/handlers/channelHandlers.ts index 32e16ab..390e002 100644 --- a/__mocks__/handlers/channelHandlers.ts +++ b/__mocks__/handlers/channelHandlers.ts @@ -2,7 +2,7 @@ import { rest } from 'msw'; import { SERVER_URL } from '@config/index'; import { ChannelCircleProps } from '@type/channelCircle'; -const getChannels: ChannelCi rcleProps[][] = [ +const getChannels: ChannelCircleProps[][] = [ [ { channelLink: '123', From 71c693a17ec13ddb3727cc77a1a4ee4249a3a437 Mon Sep 17 00:00:00 2001 From: navyjeongs Date: Sun, 10 Sep 2023 22:14:35 +0900 Subject: [PATCH 6/9] =?UTF-8?q?Test:=20=ED=85=8C=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ChannelBar/SelectChannelType.test.tsx | 38 +++++++++---------- 1 file changed, 17 insertions(+), 21 deletions(-) diff --git a/__test__/components/Sidebar/ChannelBar/SelectChannelType.test.tsx b/__test__/components/Sidebar/ChannelBar/SelectChannelType.test.tsx index 66d3818..5bdaec4 100644 --- a/__test__/components/Sidebar/ChannelBar/SelectChannelType.test.tsx +++ b/__test__/components/Sidebar/ChannelBar/SelectChannelType.test.tsx @@ -11,17 +11,17 @@ jest.mock('next/router', () => require('next-router-mock')); describe('채널 추가 테스트', () => { const queryClient = new QueryClient(); + const mockFn = jest.fn(); + it('초기에는 대회 개최 버튼과 대회 참여 버튼이 있다.', () => { render( - - { - return; - }} - /> - + { + return; + }} + /> , ); @@ -35,13 +35,11 @@ describe('채널 추가 테스트', () => { render( - - { - return; - }} - /> - + { + return; + }} + /> , ); @@ -56,13 +54,11 @@ describe('채널 추가 테스트', () => { render( - - { - return; - }} - /> - + { + return; + }} + /> , ); From 328be230920a3b35c83001494a524c5066f349a1 Mon Sep 17 00:00:00 2001 From: navyjeongs Date: Thu, 14 Sep 2023 23:38:01 +0900 Subject: [PATCH 7/9] =?UTF-8?q?Style:=20=EC=B1=84=EB=84=90=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=B5=9C=EB=8C=80=20?= =?UTF-8?q?height=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/make-channel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/make-channel.tsx b/src/pages/make-channel.tsx index 4623cd1..385de4e 100644 --- a/src/pages/make-channel.tsx +++ b/src/pages/make-channel.tsx @@ -97,7 +97,7 @@ export const fadeIn = keyframes` const Container = styled.div` width: 100%; - min-height: calc(100vh - 5.5rem); + height: calc(100vh - 5.5rem); position: relative; `; From 02f01279c4b51072593337bd41181fca90b49f49 Mon Sep 17 00:00:00 2001 From: navyjeongs Date: Thu, 14 Sep 2023 23:38:47 +0900 Subject: [PATCH 8/9] =?UTF-8?q?Style:=20vh=EB=A5=BC=20=EB=84=98=EC=96=B4?= =?UTF-8?q?=EA=B0=80=EB=A9=B4=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20=ED=91=9C?= =?UTF-8?q?=EC=8B=9C=20=EB=B0=8F=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EB=94=94?= =?UTF-8?q?=EC=9E=90=EC=9D=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/layout.tsx | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/src/components/layout.tsx b/src/components/layout.tsx index 16b7cb6..0d054cb 100644 --- a/src/components/layout.tsx +++ b/src/components/layout.tsx @@ -39,7 +39,7 @@ const Layout = ({ children }: PropsWithChildren) => {
-
{children}
+
{children}
@@ -52,10 +52,27 @@ const CommonLayout = styled.div` const Wrapper = styled.div` width: 100%; + height: 100vh; `; const SidebarWrapper = styled.div` flex: 0 0; `; +const Main = styled.main` + overflow-y: auto; + + ::-webkit-scrollbar { + width: 1rem; + } + ::-webkit-scrollbar-thumb { + background-color: #202b37; + border-radius: 1rem; + } + ::-webkit-scrollbar-track { + background-color: #344051; + border-radius: 1rem; + } +`; + export default Layout; From 24a2b08971deb1dc3be06d6ab9eeed59838c7172 Mon Sep 17 00:00:00 2001 From: navyjeongs Date: Thu, 14 Sep 2023 23:40:02 +0900 Subject: [PATCH 9/9] =?UTF-8?q?Style:=20height=EB=A5=BC=20=EB=8B=A4?= =?UTF-8?q?=EC=8B=9C=20100vh=EB=A1=9C=20=EB=90=98=EB=8F=8C=EB=A6=AC?= =?UTF-8?q?=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Sidebar/ChannelBar/ChannelBar.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Sidebar/ChannelBar/ChannelBar.tsx b/src/components/Sidebar/ChannelBar/ChannelBar.tsx index 5679619..7fa29da 100644 --- a/src/components/Sidebar/ChannelBar/ChannelBar.tsx +++ b/src/components/Sidebar/ChannelBar/ChannelBar.tsx @@ -89,8 +89,7 @@ const ChannelbarContainer = styled.div` padding: 2rem 0; width: 10rem; - min-height: 100vh; - height: 100%; + height: 100vh; background-color: #141c24; float: left;