Merge branch 'main' into SKRF-131-kakao-login-error

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/components/SearchInputForm/SearchInputForm.style.ts

@@ -0,0 +1,38 @@
+import Theme from '@/styles/Theme';
+import styled from '@emotion/styled';
+
+const SearchInputContainerStyled = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 60%;
+  height: 100%;
+`;
+
+const SearchBarStyled = styled.div`
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  width: 90%;
+  height: 60%;
+  border: 0.05rem solid ${Theme.color.lineColor};
+  border-radius: 1rem;
+`;
+
+const SearchInputStyled = styled.input`
+  flex-grow: 1;
+  height: 70%;
+  margin: 0 1rem;
+  outline: none;
+  border: none;
+`;
+
+const IconContainerStyled = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 0.5rem;
+  color: ${Theme.color.lineColor};
+`;
+
+export { SearchInputContainerStyled, SearchBarStyled, SearchInputStyled, IconContainerStyled };

src/components/SearchInputForm/SearchInputForm.tsx

@@ -0,0 +1,23 @@
+import { CiSearch } from 'react-icons/ci';
+
+import {
+  IconContainerStyled,
+  SearchBarStyled,
+  SearchInputContainerStyled,
+  SearchInputStyled,
+} from './SearchInputForm.style';
+
+const SearchInputForm = () => {
+  return (
+    <SearchInputContainerStyled>
+      <SearchBarStyled>
+        <SearchInputStyled />
+        <IconContainerStyled>
+          <CiSearch size="1.5rem" />
+        </IconContainerStyled>
+      </SearchBarStyled>
+    </SearchInputContainerStyled>
+  );
+};
+
+export default SearchInputForm;

src/components/common/Banner/Banner.style.ts

@@ -0,0 +1,22 @@
+import styled from '@emotion/styled';
+
+interface BannerProps {
+  bannerImageSrc?: string;
+  width: number;
+  height: number;
+}
+
+const BannerContainerStyled = styled.div<BannerProps>`
+  width: ${({ width }) => `${width}rem`};
+  height: ${({ height }) => `${height}rem`};
+  border-radius: 10px;
+  overflow: hidden;
+`;
+
+const BannerImageStyled = styled.img`
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+`;
+
+export { BannerContainerStyled, BannerImageStyled };

src/components/common/Banner/Banner.tsx

@@ -0,0 +1,24 @@
+import { BannerContainerStyled, BannerImageStyled } from './Banner.style';
+
+interface BannerProps {
+  bannerImageSrc?: string;
+  width: number;
+  height: number;
+}
+
+const Banner = ({ bannerImageSrc, width, height }: BannerProps) => {
+  return (
+    <BannerContainerStyled width={width} height={height}>
+      {bannerImageSrc ? (
+        <BannerImageStyled src={bannerImageSrc} alt="배너 이미지" />
+      ) : (
+        <BannerImageStyled
+          src="https://picsum.photos/200/300"
+          alt="이 부분은 배너 기본 이미지를 생성 전까진 임시입니다"
+        />
+      )}
+    </BannerContainerStyled>
+  );
+};
+
+export default Banner;

src/components/common/Header/Header.style.ts

@@ -0,0 +1,32 @@
+import Theme from '@/styles/Theme';
+import styled from '@emotion/styled';
+
+const HeaderLayoutStyled = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  width: 100%;
+  height: 15vh;
+  min-height: 4rem;
+`;
+
+const HeaderContainerStyled = styled.div`
+  display: flex;
+  width: 80%;
+  min-width: 60rem;
+  border-bottom: 0.07rem solid ${Theme.color.lineColor};
+`;
+
+const LogoWrapperStyled = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const ChildrenContainerStyled = styled.div`
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+`;
+
+export { HeaderLayoutStyled, HeaderContainerStyled, LogoWrapperStyled, ChildrenContainerStyled };

src/components/common/Header/Header.tsx

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+
+import SpaceClubHomeLogo from '../SpaceClubHomeLogo/SpaceClubHomeLogo';
+import {
+  ChildrenContainerStyled,
+  HeaderContainerStyled,
+  HeaderLayoutStyled,
+  LogoWrapperStyled,
+} from './Header.style';
+
+interface HeaderProps {
+  children?: ReactNode;
+}
+
+const Header = ({ children }: HeaderProps) => {
+  return (
+    <HeaderLayoutStyled>
+      <HeaderContainerStyled>
+        <LogoWrapperStyled>
+          <SpaceClubHomeLogo />
+        </LogoWrapperStyled>
+        <ChildrenContainerStyled>{children}</ChildrenContainerStyled>
+      </HeaderContainerStyled>
+    </HeaderLayoutStyled>
+  );
+};
+
+export default Header;

src/components/common/SpaceClubHomeLogo/SpaceClubHomeLogo.style.ts

@@ -5,7 +5,7 @@ const ContainerStyled = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 15rem;
+  width: 10rem;
   height: 4rem;
 `;
 

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

@@ -9,6 +9,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();
@@ -32,6 +47,14 @@ export const userHandlers = [
     return HttpResponse.json({
       token: 'test token',
       isNewMember: false,
-    });
+    }),
+
+  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/pages/MainPage.tsx

@@ -1,5 +1,14 @@
+import SearchInputForm from '@/components/SearchInputForm/SearchInputForm';
+import Header from '@/components/common/Header/Header';
+
 const MainPage = () => {
-  return <div>main</div>;
+  return (
+    <div>
+      <Header>
+        <SearchInputForm />
+      </Header>
+    </div>
+  );
 };
 
 export default MainPage;

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