Design: 채널바 height 수정

__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]));
+  }),
   rest.post(SERVER_URL + '/api/channel/:channelLink', (req, res, ctx) => {
     return res(ctx.status(200), ctx.json({}));
   }),

__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.skip('채널 추가 테스트', () => {
+describe('채널 추가 테스트', () => {
+  const queryClient = new QueryClient();
+
+  const mockFn = jest.fn();
+
   it('초기에는 대회 개최 버튼과 대회 참여 버튼이 있다.', () => {
     render(
-      <Modal>
-        <SelectChannelType
-          handleModal={() => {
-            return;
-          }}
-        />
-      </Modal>,
+      <QueryClientProvider client={queryClient}>
+        <ChannelsProvider>
+          <SelectChannelType
+            handleModal={() => {
+              return;
+            }}
+          />
+        </ChannelsProvider>
+      </QueryClientProvider>,
     );
 
     const btns = screen.getAllByRole('button');
@@ -25,13 +33,15 @@ describe.skip('채널 추가 테스트', () => {
 
   it('대회 개최하기 버튼을 누르면 make-channel 페이지로 이동한다.', async () => {
     render(
-      <Modal>
-        <SelectChannelType
-          handleModal={() => {
-            return;
-          }}
-        />
-      </Modal>,
+      <QueryClientProvider client={queryClient}>
+        <ChannelsProvider>
+          <SelectChannelType
+            handleModal={() => {
+              return;
+            }}
+          />
+        </ChannelsProvider>
+      </QueryClientProvider>,
     );
 
     const makeBtn = screen.getByText('대회 개최');
@@ -42,13 +52,15 @@ describe.skip('채널 추가 테스트', () => {
 
   it('대회 참여하기 버튼을 누르면 참여 코드를 입력하는 input이 표시된다.', async () => {
     render(
-      <Modal>
-        <SelectChannelType
-          handleModal={() => {
-            return;
-          }}
-        />
-      </Modal>,
+      <QueryClientProvider client={queryClient}>
+        <ChannelsProvider>
+          <SelectChannelType
+            handleModal={() => {
+              return;
+            }}
+          />
+        </ChannelsProvider>
+      </QueryClientProvider>,
     );
 
     const enterBtn = screen.getByText('대회 참여');

src/components/Sidebar/ChannelBar/ChannelBar.tsx

@@ -88,6 +88,7 @@ const ChannelbarContainer = styled.div`
 
   padding: 2rem 0;
   width: 10rem;
+
   height: 100vh;
 
   background-color: #141c24;

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<number>(0);
 
+  const [channelInput, setChannelInput] = useState<string>();
+
   const handleRouter = () => {
     handleModal();
     router.push('/make-channel');
   };
 
+  const fetchEnterNewChannel = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    try {
+      const res = await authAPI<ChannelCircleProps>({
+        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<HTMLInputElement>) => {
+    setChannelInput(e.target.value);
+  };
+
   return (
     <Container>
       {curIdx === 0 ? (
@@ -46,8 +84,8 @@ const SelectChannelType = (props: Props) => {
           <ModalSubTitle>대회에 참여하여 우승해보세요!</ModalSubTitle>
           <Content2>
             <FormConatiner>
-              <ChannelForm>
-                <ChannelInput required />
+              <ChannelForm onSubmit={fetchEnterNewChannel}>
+                <ChannelInput required value={channelInput} onChange={handleChannelInput} />
                 <Button width={10} height={4} type='submit'>
                   참여 하기
                 </Button>
@@ -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: '참여 코드 입력' };

src/components/layout.tsx

@@ -39,7 +39,7 @@ const Layout = ({ children }: PropsWithChildren) => {
         </SidebarWrapper>
         <Wrapper>
           <Header />
-          <main>{children}</main>
+          <Main>{children}</Main>
         </Wrapper>
       </CommonLayout>
     </>
@@ -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;

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