design: layout ui 적용 (#24)

* design: layout ui 적용

* fix: Layout Content margin

* SKRF-146 local storage 기능 추가 (#21)

* feat : 스토리지 키 상수 저장

* feat : 로컬스토리지 관련 함수 추가

* fix : localStorage 에러 상황 변경

* msw 초기설정 & 초기설정 페이지 api 구현 (#23)

* chore: msw 라이브러리 설치

* feat: 초기설정 페이지 API 구현

* style: api res객체 통일

* fix: msw 서버 문제 잠시 해결

* fix: 코드리뷰 반영

* SKRF-139 design banner component (#25)

* design: 배너 공통 컴포넌트 구현

* design: 배너 컴포넌트 구현

* rename: import 파일 이름 변경

* SKRF-142 design: 헤더 레이아웃 공통 컴포넌트 구현 (#20)

* design: 헤더 레이아웃 공통 컴포넌트 구현

* design: 헤더 레이아웃 설정 및 children컨테이너 수정

* 코드 충돌1

* fix: 코드리뷰 반영1

* fix: 코드리뷰 반영

* fix: App.tsx react-queryclient 삭제

---------

Co-authored-by: hyesung99 <[email protected]>
Co-authored-by: chaeyeon LEE <[email protected]>

src/apis/users/getMyClub.ts

@@ -0,0 +1,20 @@
+import { END_POINTS } from '@/constants/api';
+
+import { axiosClient } from '../axiosClient';
+
+interface getMyClub {
+  id: string;
+}
+interface Club {
+  //추후 수정 필요
+  id: string;
+  src: string;
+}
+
+const getMyClub = async ({ id }: getMyClub) => {
+  const { data } = await axiosClient.get<Club[]>(END_POINTS.MY_CLUB, { params: { id } });
+
+  return data;
+};
+
+export default getMyClub;

src/constants/api.ts

@@ -5,6 +5,7 @@ const NETWORK_TIMEOUT = 10000;
 const END_POINTS = {
   KAKAO_LOGIN: '/login/kakao',
   REGISTER: '/users',
+  MY_CLUB: '/myclub', // API 명세서 나올시, 수정 필요
 };
 
 export { SPACECLUB_BASE_URL, NETWORK_TIMEOUT, END_POINTS };

src/mocks/users.ts

@@ -8,6 +8,21 @@ interface member {
 
 const members: member[] = [];
 
+const club = [
+  {
+    id: 1,
+    src: 'https://picsum.photos/200/301',
+  },
+  {
+    id: 2,
+    src: 'https://picsum.photos/200/302',
+  },
+  {
+    id: 3,
+    src: 'https://picsum.photos/200/303',
+  },
+];
+
 export const userHandlers = [
   http.post(END_POINTS.REGISTER, async ({ request }) => {
     const reader = request.body?.getReader();
@@ -26,4 +41,13 @@ export const userHandlers = [
 
     return HttpResponse.json({ status: 201 });
   }),
+
+  http.get(END_POINTS.MY_CLUB, async ({ request }) => {
+    const url = new URL(request.url);
+
+    const userId = url.searchParams.get('id');
+    console.log(userId);
+
+    return HttpResponse.json(club, { status: 201 });
+  }),
 ];

src/pages/Layout/Layout.style.ts

@@ -0,0 +1,12 @@
+import styled from '@emotion/styled';
+
+export const Container = styled.div`
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+`;
+
+export const Content = styled.div`
+  flex-grow: 1;
+  margin: 0 8rem;
+`;

src/pages/Layout/Layout.tsx

@@ -0,0 +1,17 @@
+import { Outlet } from 'react-router-dom';
+
+import { Container, Content } from './Layout.style';
+import SideNav from './SideNav';
+
+const Layout = () => {
+  return (
+    <Container>
+      <SideNav />
+      <Content>
+        <Outlet />
+      </Content>
+    </Container>
+  );
+};
+
+export default Layout;

src/pages/Layout/SideNav.style.ts

@@ -0,0 +1,37 @@
+import Theme from '@/styles/Theme';
+import { css } from '@emotion/css';
+import styled from '@emotion/styled';
+
+export const Container = styled.div`
+  position: fixed;
+  width: 7rem;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  padding-bottom: 1rem;
+  box-sizing: border-box;
+  background: ${Theme.color.logo_2};
+  color: ${Theme.color.gray};
+`;
+
+export const AvatarGroup = styled.div`
+  overflow: auto;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  width: 100%;
+
+  &:first-child {
+    padding-top: 1rem;
+  }
+`;
+export const iconStyle = css`
+  display: block;
+  width: 2rem;
+  height: 2rem;
+  cursor: pointer;
+`;

src/pages/Layout/SideNav.tsx

@@ -0,0 +1,36 @@
+import getMyClub from '@/apis/users/getMyClub';
+import Avatar from '@/components/common/Avatar/Avatar';
+
+import { FaBell, FaHome, FaPlusCircle } from 'react-icons/fa';
+import { Link, useNavigate } from 'react-router-dom';
+
+import { useQuery } from '@tanstack/react-query';
+
+import { AvatarGroup, Container, iconStyle } from './SideNav.style';
+
+const SideNav = () => {
+  const { data: clubs } = useQuery(['myclubs', 'userid'], () => getMyClub({ id: '1' }), {
+    refetchInterval: false,
+  }); //userid에 받는 방식 고려 후, 리팩토링
+  const navigate = useNavigate();
+
+  return (
+    <Container>
+      <AvatarGroup>
+        {clubs?.map((club) => (
+          <Link to={`/club/home/${club.id}`}>
+            <Avatar key={club.id} avatarShape="normal" profileImageSrc={club.src}></Avatar>
+          </Link>
+        ))}
+      </AvatarGroup>
+      <FaPlusCircle className={iconStyle} onClick={() => navigate('/club/create')} />
+      <FaHome className={iconStyle} onClick={() => navigate('/')} />
+      <FaBell className={iconStyle} onClick={() => alert('알림페이지 준비 중')} />
+      <Link to={`/profile`}>
+        <Avatar avatarShape="rectangle" />
+      </Link>
+    </Container>
+  );
+};
+
+export default SideNav;

src/routes/index.tsx

@@ -1,5 +1,5 @@
 import App from '@/App';
-import Layout from '@/pages/Layout';
+import Layout from '@/pages/Layout/Layout';
 import LoginPage from '@/pages/LoginPage/LoginPage';
 import MainPage from '@/pages/MainPage';
 import NotFoundPage from '@/pages/NotFoundPage';

src/styles/Theme.ts

@@ -10,7 +10,8 @@ const color = {
   gray: '#d9d9d9',
   indigo: '#003949',
   logoTextColor: '#fafafa',
-  lineColor: '#3D186C',
+  lineColor: '#261359',
+  logo_2: 'linear-gradient(175deg, #031f2b -19.45%, #486282 55.68%, #9458b5 117.93%)',
 } as const;
 
 const componentStyle = {