Merge pull request #121 from TheUpperPart/Feat/#120

Feat/#120: 관리자는 채널정보를 수정할 수 있는 모달 및 기능 추가

__mocks__/handlers/channelHandlers.ts

@@ -64,6 +64,9 @@ const channelHandlers = [
   rest.post(SERVER_URL + '/api/channel', (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({}));
+  }),
 ];
 
 export default channelHandlers;

src/components/Modal/JoinLeague/JoinLeague.tsx

@@ -1,5 +1,4 @@
 import Icon from '@components/Icon';
-import Modal from '@components/Modal';
 import { SERVER_URL } from '@config/index';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
@@ -8,11 +7,11 @@ import axios from 'axios';
 import { useState, MouseEventHandler, useEffect, useRef } from 'react';
 
 interface JoinLeagueProps {
-  onClose: MouseEventHandler<HTMLElement>;
   channelLink: string;
+  onClose: () => void;
 }
 
-const JoinLeague = ({ onClose }: JoinLeagueProps) => {
+const JoinLeague = ({ onClose, channelLink }: JoinLeagueProps) => {
   const [nickname, setNickname] = useState<string | null>(null);
   const [gameId, setGameId] = useState<string>('');
   const [tier, setTier] = useState<string | null>(null);

src/components/Modal/ModifyChannel/ModifyChannel.tsx

@@ -0,0 +1,136 @@
+import authAPI from '@apis/authAPI';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { useRef } from 'react';
+
+interface ModifyChannelProps {
+  channelLink: string;
+  leagueTitle: string;
+  maxPlayer: number;
+  onClose: (leagueTitle?: string, maxPlayer?: number) => void;
+}
+
+const ModifyChannel = ({ channelLink, leagueTitle, maxPlayer, onClose }: ModifyChannelProps) => {
+  const leagueTitleRef = useRef<HTMLInputElement>(null);
+  const maxPlayerRef = useRef<HTMLInputElement>(null);
+
+  const onClickSubmit = async () => {
+    console.log(leagueTitleRef.current?.value, maxPlayerRef.current?.value);
+    if (!leagueTitleRef.current || !maxPlayerRef.current) return;
+    const updatedLeagueTitle = leagueTitleRef.current.value;
+    const updatedMaxPlayer = parseInt(maxPlayerRef.current.value, 10);
+    if (isNaN(updatedMaxPlayer)) {
+      alert('최대인원수를 숫자로 입력해주세요');
+      return;
+    }
+    if (!confirm('리그를 수정하시겠습니까?')) return;
+    const res = await authAPI({
+      method: 'post',
+      url: `/api/channel/${channelLink}`,
+      data: {
+        title: updatedLeagueTitle,
+        maxPlayer: updatedMaxPlayer,
+      },
+    });
+    if (res.status !== 200) return;
+    alert('정보가 수정되었습니다');
+    onClose(updatedLeagueTitle, updatedMaxPlayer);
+  };
+
+  return (
+    <Container>
+      <Wrapper
+        css={css`
+          padding-bottom: 3rem;
+        `}
+      >
+        <h1>리그 수정하기</h1>
+      </Wrapper>
+      <Wrapper>
+        <FlexWrapper>리그 제목</FlexWrapper>
+        <FlexWrapper>
+          <Input
+            type='text'
+            placeholder='리그 제목을 입력해주세요'
+            ref={leagueTitleRef}
+            defaultValue={leagueTitle}
+          />
+        </FlexWrapper>
+      </Wrapper>
+      <Wrapper>
+        <FlexWrapper>최대 참여자 인원</FlexWrapper>
+        <FlexWrapper>
+          <Input
+            type='text'
+            placeholder='최대 인원을 설정해주세요'
+            ref={maxPlayerRef}
+            defaultValue={maxPlayer}
+          />
+        </FlexWrapper>
+      </Wrapper>
+      <ButtonWrapper>
+        <SubmitButton onClick={() => onClose()}>취소</SubmitButton>
+        <SubmitButton onClick={onClickSubmit}>수정하기</SubmitButton>
+      </ButtonWrapper>
+    </Container>
+  );
+};
+
+export default ModifyChannel;
+
+const Container = styled.div`
+  color: black;
+  padding: 5%;
+`;
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 1rem;
+  font-size: 1.7rem;
+  font-weight: bold;
+  min-height: 7rem;
+`;
+
+const FlexWrapper = styled.div`
+  flex: 1;
+  justify-content: flex-start;
+`;
+
+const ButtonWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 1rem;
+  font-size: 1.7rem;
+  font-weight: bold;
+  min-height: 7rem;
+`;
+
+const Input = styled.input`
+  width: 80%;
+  height: 4rem;
+  border: none;
+  border-radius: 0.6rem;
+  padding: 0.6rem;
+`;
+
+const SubmitButton = styled.button`
+  width: 10rem;
+  height: 6rem;
+  background-color: #344051;
+  border: none;
+  border-radius: 0.5rem;
+  color: white;
+  margin: 0 6rem 0 6rem;
+  &:hover {
+    cursor: pointer;
+  }
+  &:disabled {
+    background-color: #d3d3d3;
+    cursor: not-allowed;
+  }
+`;

src/components/Sidebar/BoardBar/BoardBar.tsx

@@ -21,6 +21,12 @@ const BoardBar = ({ channelLink }: { channelLink: string }) => {
     cacheTime: Infinity,
   });
 
+  const updateChannelData = (leagueTitle: string, maxPlayer: number) => {
+    if (!data) return;
+    data.leagueTitle = leagueTitle;
+    data.maxPlayer = maxPlayer;
+  };
+
   const { setCurrentChannel, setChannelPermission } = useChannels();
 
   useEffect(() => {
@@ -41,11 +47,14 @@ const BoardBar = ({ channelLink }: { channelLink: string }) => {
             />
             <BoardBody channelLink={channelLink} />
           </ContentContainer>
-          {data.permission === 2 && (
-            <FooterContainer>
-              <BoardFooter channelLink={channelLink} />
-            </FooterContainer>
-          )}
+          <FooterContainer>
+            <BoardFooter
+              channelLink={channelLink}
+              leagueTitle={data.leagueTitle}
+              maxPlayer={data.maxPlayer}
+              updateChannelData={updateChannelData}
+            />
+          </FooterContainer>
         </>
       )}
     </Container>

src/components/Sidebar/BoardBar/BoardFooter.tsx

@@ -1,23 +1,76 @@
 import Modal from '@components/Modal';
 import JoinLeague from '@components/Modal/JoinLeague/JoinLeague';
+import ModifyChannel from '@components/Modal/ModifyChannel/ModifyChannel';
 import styled from '@emotion/styled';
+import useChannels from '@hooks/useChannels';
 import useModals from '@hooks/useModals';
 
-const BoardFooter = ({ channelLink }: { channelLink: string }) => {
+interface BoardFooterProps {
+  channelLink: string;
+  leagueTitle: string;
+  maxPlayer: number;
+  updateChannelData: (leagueTitle: string, maxPlayer: number) => void;
+}
+
+const BoardFooter = ({
+  channelLink,
+  leagueTitle,
+  maxPlayer,
+  updateChannelData,
+}: BoardFooterProps) => {
+  const { channelPermission } = useChannels();
   const { openModal, closeModal } = useModals();
 
-  return (
-    <Container
-      onClick={() =>
-        openModal(Modal, {
-          onClose: () => closeModal(Modal),
-          children: <JoinLeague onClose={() => closeModal(Modal)} channelLink={channelLink} />,
-        })
-      }
-    >
-      리그 참여하기
-    </Container>
-  );
+  const updateChannel = (leagueTitle?: string, maxPlayer?: number) => {
+    if (leagueTitle && maxPlayer) updateChannelData(leagueTitle, maxPlayer);
+
+    closeModal(Modal);
+    return;
+  };
+
+  const renderLeagueButton = () => {
+    switch (channelPermission) {
+      case 0:
+        return (
+          <div
+            onClick={() =>
+              openModal(Modal, {
+                onClose: () => closeModal(Modal),
+                children: (
+                  <ModifyChannel
+                    channelLink={channelLink}
+                    leagueTitle={leagueTitle}
+                    maxPlayer={maxPlayer}
+                    onClose={updateChannel}
+                  />
+                ),
+              })
+            }
+          >
+            리그 수정하기
+          </div>
+        );
+      case 1:
+        return <div>리그 나가기</div>;
+      case 2:
+        return (
+          <div
+            onClick={() =>
+              openModal(Modal, {
+                onClose: () => closeModal(Modal),
+                children: (
+                  <JoinLeague channelLink={channelLink} onClose={() => closeModal(Modal)} />
+                ),
+              })
+            }
+          >
+            리그 참여하기
+          </div>
+        );
+    }
+  };
+
+  return <Container>{renderLeagueButton()}</Container>;
 };
 
 const Container = styled.div`