Design, Refactor: Board 컴포넌트 디자인 변경 및 리팩토링

src/components/Sidebar/BoardBar/BoardBar.tsx

@@ -1,79 +1,52 @@
-import { useQuery } from '@tanstack/react-query';
+import { useEffect } from 'react';
 import styled from '@emotion/styled';
+import { useRouter } from 'next/router';
+import { useQuery } from '@tanstack/react-query';
 
-import BoardFooter from '@components/Sidebar/BoardBar/BoardFooter';
-import BoardHeader from '@components/Sidebar/BoardBar/BoardHeader';
-import BoardBody from '@components/Sidebar/BoardBar/BoardBody';
-import { useEffect } from 'react';
 import useChannels from '@hooks/useChannels';
-import MainHeader from '@components/MainHeader/MainHeader';
 import { fetchChannelInfo } from '@apis/channels';
+import ChannelBar from './ChannelBar';
+import MainBar from './MainBar';
+
+const BoardBar = () => {
+  const router = useRouter();
+  const { channelLink } = router.query;
 
-const BoardBar = ({ channelLink }: { channelLink: string }) => {
   const { data } = useQuery({
     queryKey: ['getBoard', channelLink],
-    queryFn: () => fetchChannelInfo(channelLink),
-    gcTime: Infinity,
-    enabled: channelLink !== 'main',
+    queryFn: () => fetchChannelInfo(channelLink as string),
+    enabled: channelLink !== '',
   });
 
-  const updateChannelData = (leagueTitle: string, maxPlayer: number) => {
-    if (!data) return;
-    data.leagueTitle = leagueTitle;
-    data.maxPlayer = maxPlayer;
-  };
-
   const { setCurrentChannel, setChannelPermission } = useChannels();
 
   useEffect(() => {
-    setCurrentChannel(channelLink);
-    setChannelPermission(data?.permission);
+    if (typeof channelLink === 'string') {
+      setCurrentChannel(channelLink || 'main');
+      setChannelPermission(data?.permission);
+    }
   }, [data]);
 
   return (
     <Container>
-      {data ? (
-        <>
-          <ContentContainer>
-            <BoardHeader
-              hostname={data.hostName}
-              leagueTitle={data.leagueTitle}
-              gameCategory={data.gameCategory}
-              participateNum={data.currentPlayer}
-            />
-            <BoardBody channelLink={channelLink} />
-          </ContentContainer>
-          <FooterContainer>
-            <BoardFooter
-              channelLink={channelLink}
-              leagueTitle={data.leagueTitle}
-              maxPlayer={data.maxPlayer}
-              updateChannelData={updateChannelData}
-            />
-          </FooterContainer>
-        </>
-      ) : (
-        <ContentContainer>
-          <MainHeader />
-        </ContentContainer>
-      )}
+      <ContentContainer>{data ? <ChannelBar {...data} /> : <MainBar />}</ContentContainer>
     </Container>
   );
 };
 
 const Container = styled.div`
-  width: 20.4rem;
-  height: 100vh;
-  background-color: #f1f1f1;
-  overflow: auto;
+  width: 28rem;
+  height: inherit;
+  margin-left: 0.5rem;
+  margin-right: 2rem;
+
   position: relative;
-  padding-top: 1.6rem;
+
+  border-radius: 1rem;
+  background-color: ${({ theme }) => theme['bg-80']};
+  overflow: auto;
 `;
 
 const ContentContainer = styled.div``;
 
-const FooterContainer = styled.div`
-  width: 20.4rem;
-`;
-
 export default BoardBar;