Feat/#224 LeagueHub Circle 기능 추가

src/@types/mainPage.ts

@@ -0,0 +1,5 @@
+export interface MainPageNoticeData {
+  noticeLink: string;
+  noticeTitle: string;
+  noticeInfo: string;
+}

src/components/Header/Header.tsx

@@ -57,14 +57,18 @@ const Header = () => {
     <Headers>
       <Container>
         <ContentsWrapper>
-          <Content onClick={copyInviteCode}>
-            <ContentText>초대코드</ContentText>
-            <Icon kind='mail' size={20} />
-          </Content>
-          <Content>
-            <ContentText>문의</ContentText>
-            <Icon kind='message' size={20} />
-          </Content>
+          {router.pathname.startsWith('/contents') && (
+            <>
+              <Content onClick={copyInviteCode}>
+                <ContentText>초대코드</ContentText>
+                <Icon kind='mail' size={20} />
+              </Content>
+              <Content>
+                <ContentText>문의</ContentText>
+                <Icon kind='message' size={20} />
+              </Content>
+            </>
+          )}
         </ContentsWrapper>
         <MyInfo>
           {profileContext?.profile && (

src/components/MainHeader/MainHeader.tsx

@@ -0,0 +1,91 @@
+import styled from '@emotion/styled';
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+
+const MainHeader = () => {
+  const router = useRouter();
+
+  const [selectedItem, setSelectedItem] = useState<string>('');
+
+  const movePage = (item: string) => {
+    router.push(`?selected=${item}`);
+    setSelectedItem(item);
+  };
+
+  useEffect(() => {
+    if (router.query.selected) {
+      setSelectedItem(router.query.selected as string);
+    } else {
+      setSelectedItem('main');
+    }
+  }, [router.query.selected as string]);
+
+  return (
+    <Container>
+      <Title>LeagueHub</Title>
+      <Boards>
+        <BoardTitle>공지사항</BoardTitle>
+        <BoardContainer isSelected={selectedItem === 'main'} onClick={() => movePage('main')}>
+          공지사항
+        </BoardContainer>
+        <BoardContainer isSelected={selectedItem === 'tft'} onClick={() => movePage('tft')}>
+          TFT 패치노트
+        </BoardContainer>
+        <BoardContainer isSelected={selectedItem === 'lol'} onClick={() => movePage('lol')}>
+          LOL 패치노트
+        </BoardContainer>
+        <BoardContainer isSelected={selectedItem === 'fc'} onClick={() => movePage('fc')}>
+          FC 패치노트
+        </BoardContainer>
+        <BoardContainer isSelected={selectedItem === 'hos'} onClick={() => movePage('hos')}>
+          HOS 패치노트
+        </BoardContainer>
+      </Boards>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+`;
+
+const BoardContainer = styled.li<{ isSelected: boolean }>`
+  width: 19.2rem;
+  height: 4.8rem;
+  display: flex;
+  align-items: center;
+
+  &:hover {
+    background-color: #ff4655;
+    color: white;
+  }
+
+  background-color: #ffffff;
+  font-size: 1.4rem;
+  cursor: pointer;
+  color: #000000;
+  border-radius: 6px;
+  padding-left: 1rem;
+
+  ${({ isSelected }) => isSelected && `background-color: #FF4655; color:white;`}
+`;
+
+const Boards = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  row-gap: 2rem;
+`;
+
+const BoardTitle = styled.div`
+  font-size: 1.6rem;
+`;
+const Title = styled.h2`
+  margin-bottom: 3rem;
+`;
+
+export default MainHeader;

src/components/Sidebar/BoardBar/BoardBar.tsx

@@ -8,6 +8,7 @@ import { BoardInfo } from '@type/board';
 import authAPI from '@apis/authAPI';
 import { useEffect } from 'react';
 import useChannels from '@hooks/useChannels';
+import MainHeader from '@components/MainHeader/MainHeader';
 
 const fetchData = async (channelLink: string) => {
   const res = await authAPI<BoardInfo>({ method: 'get', url: '/api/channel/' + channelLink });
@@ -19,6 +20,7 @@ const BoardBar = ({ channelLink }: { channelLink: string }) => {
   const { data } = useQuery(['getBoard', channelLink], () => fetchData(channelLink), {
     staleTime: Infinity,
     cacheTime: Infinity,
+    enabled: channelLink !== 'main',
   });
 
   const updateChannelData = (leagueTitle: string, maxPlayer: number) => {
@@ -36,7 +38,7 @@ const BoardBar = ({ channelLink }: { channelLink: string }) => {
 
   return (
     <Container>
-      {data && (
+      {data ? (
         <>
           <ContentContainer>
             <BoardHeader
@@ -56,6 +58,10 @@ const BoardBar = ({ channelLink }: { channelLink: string }) => {
             />
           </FooterContainer>
         </>
+      ) : (
+        <ContentContainer>
+          <MainHeader />
+        </ContentContainer>
       )}
     </Container>
   );

src/components/Sidebar/ChannelBar/ChannelBar.tsx

@@ -39,7 +39,7 @@ const ChannelBar = ({ channels, updateSelectedChannel }: ChannelBarProps) => {
     <ChannelbarContainer>
       <ScrollContainer>
         <MainCircleContainer>
-          <MainChannelCircle />
+          <MainChannelCircle updateSelectedChannel={updateSelectedChannel} />
           <Line>
             <svg
               width='60'

src/components/Sidebar/ChannelCircle/MainChannelCircle.tsx

@@ -2,11 +2,20 @@ import styled from '@emotion/styled';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 
-const MainChannelCircle = () => {
+interface Props {
+  updateSelectedChannel: (channelLink: string) => void;
+}
+
+const MainChannelCircle = ({ updateSelectedChannel }: Props) => {
   const router = useRouter();
 
+  const hanleClick = () => {
+    updateSelectedChannel('main');
+    router.push('/');
+  };
+
   return (
-    <ChannelBtn onClick={() => router.push('/')}>
+    <ChannelBtn onClick={hanleClick}>
       <Image src={'/img/logo/logo-circle.png'} width={58} height={38} alt='circle-logo' />
     </ChannelBtn>
   );

src/components/layout.tsx

@@ -9,8 +9,10 @@ import useChannels from '@hooks/useChannels';
 import useProfile from '@hooks/useProfile';
 import NoAuthMain from './Main/NoAuthMain';
 import Loading from './Loading/Loading';
+import { useRouter } from 'next/router';
 
 const Layout = ({ children }: PropsWithChildren) => {
+  const router = useRouter();
   const { channels } = useChannels();
   const [selectedChannelLink, setSelectedChannelLink] = useState<string | null>(null);
 
@@ -21,9 +23,16 @@ const Layout = ({ children }: PropsWithChildren) => {
   };
 
   useEffect(() => {
-    // 새로고침시 첫 번째 채널 보여주도록 설정
-    if (channels && status === 'success') {
-      channels.length !== 0 && setSelectedChannelLink(channels[0].channelLink);
+    // 특정 채널에서 새로고침
+    if (router.pathname.startsWith('/content') && channels && status === 'success') {
+      const findIndex = channels.findIndex(
+        (chanel) => chanel.channelLink === (router.query.channelLink as string),
+      );
+      channels.length !== 0 && setSelectedChannelLink(channels[findIndex].channelLink);
+    }
+    // 그 이외
+    else {
+      setSelectedChannelLink('main');
     }
   }, [channels]);
 
@@ -89,7 +98,7 @@ const SidebarWrapper = styled.div`
 
 const Main = styled.main`
   overflow-y: auto;
-
+  max-height: calc(100vh - 5.5rem);
   ::-webkit-scrollbar {
     width: 1rem;
   }

src/pages/index.tsx

@@ -1,9 +1,79 @@
+import authAPI from '@apis/authAPI';
 import styled from '@emotion/styled';
+import { useQuery } from '@tanstack/react-query';
+import { MainPageNoticeData } from '@type/mainPage';
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+
+const fetchNotice = async (board: string) => {
+  const res = await authAPI<Array<MainPageNoticeData>>({
+    method: 'get',
+    url: `/api/notice/${board}`,
+  });
+  return res.data;
+};
 
 export default function Home() {
-  return <Main>LeagueHub의 공지사항입니다. 2023. 10. 29 패치노트</Main>;
+  const router = useRouter();
+  const [selectedBoard, setSelectedBoard] = useState<string>('');
+
+  const { data } = useQuery({
+    queryKey: ['notice', router.query.selected as string],
+    queryFn: () => fetchNotice(router.query.selected as string),
+    enabled: selectedBoard !== '',
+  });
+
+  useEffect(() => {
+    if (router.query.selected) {
+      setSelectedBoard(router.query.selected as string);
+    } else {
+      setSelectedBoard('main');
+    }
+  }, [router.query.selected as string]);
+
+  return (
+    <Main>
+      <List>
+        {data?.map((notice, index) => {
+          return (
+            <Item>
+              <ItemHeader key={index}>
+                <ItemIndex>{index + 1}.</ItemIndex>
+                <ItemLink href={notice.noticeLink} target='_blank'>
+                  {notice.noticeTitle}
+                </ItemLink>
+              </ItemHeader>
+              <span>{notice.noticeInfo.length ? `- ${notice.noticeInfo}` : ''}</span>
+            </Item>
+          );
+        })}
+      </List>
+    </Main>
+  );
 }
 
 const Main = styled.div`
   font-size: 2rem;
+  margin: 3rem;
+`;
+
+const List = styled.ul``;
+const Item = styled.li`
+  list-style: none;
+  padding: 2rem 0;
+  border-bottom: 0.2rem solid gray;
+`;
+
+const ItemHeader = styled.div`
+  display: flex;
+  margin: 1rem 0;
+  font-size: 2.3rem;
+`;
+
+const ItemIndex = styled.div`
+  width: 3rem;
+`;
+const ItemLink = styled.a`
+  color: black;
+  text-decoration: none;
 `;