레이아웃 컴포넌트 구현

frontend/src/components/common/Dashboard/style.ts

@@ -1,5 +1,7 @@
 import { styled } from 'styled-components';
 
+import { theme } from '@styles/theme';
+
 export const Container = styled.div`
  display: flex;
  flex-direction: column;
@@ -9,6 +11,10 @@ export const Container = styled.div`
  height: 100vh;
  padding: 20px;
  border-right: 2px solid var(--gray);
+
+ @media (min-width: ${theme.breakpoint.sm}) {
+ height: 100%;
+ }
 `;
 
 export const ContentContainer = styled.div`

frontend/src/components/common/Layout/Layout.stories.tsx

@@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Category } from '@type/category';
+import type { User } from '@type/user';
+
+import Skeleton from '../Skeleton';
+
+import Layout from '.';
+
+const meta: Meta<typeof Layout> = {
+ component: Layout,
+};
+
+export default meta;
+type Story = StoryObj<typeof Layout>;
+
+const MOCK_USER_INFO: User = {
+ nickname: '우아한 코끼리',
+ postCount: 4,
+ voteCount: 128,
+ userPoint: 200,
+};
+
+const MOCK_FAVORITE_CATEGORIES: Category[] = [
+ { id: 12312, name: '음식', isFavorite: false },
+ { id: 12, name: '연애', isFavorite: true },
+ { id: 13, name: '패션', isFavorite: true },
+ { id: 14, name: '금융', isFavorite: false },
+ { id: 12312, name: '음식', isFavorite: false },
+ { id: 12, name: '연애', isFavorite: true },
+ { id: 13, name: '패션', isFavorite: true },
+ { id: 14, name: '금융', isFavorite: false },
+ { id: 12312, name: '음식', isFavorite: false },
+ { id: 12, name: '연애', isFavorite: true },
+ { id: 13, name: '패션', isFavorite: true },
+ { id: 14, name: '금융', isFavorite: false },
+ { id: 12312, name: '음식', isFavorite: false },
+ { id: 12, name: '연애', isFavorite: true },
+ { id: 13, name: '패션', isFavorite: true },
+ { id: 14, name: '금융', isFavorite: false },
+];
+
+export const VisibleCategory: Story = {
+ render: () => (
+ <Layout
+ isSidebarVisible={true}
+ userInfo={MOCK_USER_INFO}
+ categoryList={MOCK_FAVORITE_CATEGORIES}
+ handleFavoriteClick={() => {}}
+ handleLogoutClick={() => {}}
+ >
+ <Skeleton />
+ <Skeleton />
+ <Skeleton />
+ <Skeleton />
+ <Skeleton />
+ <Skeleton />
+ <Skeleton />
+ <Skeleton />
+ <Skeleton />
+ <Skeleton />
+ </Layout>
+ ),
+};
+
+export const HiddenCategory: Story = {
+ render: () => (
+ <Layout
+ isSidebarVisible={false}
+ categoryList={MOCK_FAVORITE_CATEGORIES}
+ handleFavoriteClick={() => {}}
+ handleLogoutClick={() => {}}
+ >
+ <Skeleton />
+ <Skeleton />
+ <Skeleton />
+ <Skeleton />
+ <Skeleton />
+ <Skeleton />
+ <Skeleton />
+ <Skeleton />
+ <Skeleton />
+ <Skeleton />
+ </Layout>
+ ),
+};

frontend/src/components/common/Layout/index.tsx

@@ -0,0 +1,52 @@
+import React, { PropsWithChildren } from 'react';
+
+import type { Category } from '@type/category';
+import type { User } from '@type/user';
+
+import Dashboard from '@components/common/Dashboard';
+import WideHeader from '@components/common/WideHeader';
+
+import * as S from './style';
+
+interface LayoutProps extends PropsWithChildren {
+ userInfo?: User;
+ categoryList: Category[];
+ selectedCategory?: string;
+ isSidebarVisible: boolean;
+ handleFavoriteClick: (categoryId: number) => void;
+ handleLogoutClick: () => void;
+}
+
+export default function Layout({
+ userInfo,
+ categoryList,
+ selectedCategory,
+ isSidebarVisible,
+ handleFavoriteClick,
+ handleLogoutClick,
+ children,
+}: LayoutProps) {
+ return (
+ <S.Container>
+ <S.WideHeaderWrapper>
+ <WideHeader />
+ </S.WideHeaderWrapper>
+ <S.ContentContainer>
+ {isSidebarVisible && (
+ <S.DashboardWrapper>
+ <Dashboard
+ userInfo={userInfo}
+ categoryList={categoryList}
+ selectedCategory={selectedCategory}
+ handleFavoriteClick={handleFavoriteClick}
+ handleLogoutClick={handleLogoutClick}
+ />
+ </S.DashboardWrapper>
+ )}
+ <S.MainContainer $isSidebarVisible={isSidebarVisible}>
+ <S.ChildrenWrapper $isSidebarVisible={isSidebarVisible}>{children}</S.ChildrenWrapper>
+ </S.MainContainer>
+ </S.ContentContainer>
+ </S.Container>
+ );
+}

frontend/src/components/common/Layout/style.ts

@@ -0,0 +1,55 @@
+import { styled } from 'styled-components';
+
+import { theme } from '@styles/theme';
+
+export const Container = styled.div`
+ height: 100vh;
+`;
+
+export const ContentContainer = styled.div`
+ display: flex;
+ justify-content: space-between;
+
+ @media (min-width: ${theme.breakpoint.sm}) {
+ padding-top: 70px;
+ }
+`;
+
+export const WideHeaderWrapper = styled.div`
+ width: 100%;
+
+ position: fixed;
+ top: 0;
+
+ @media (max-width: ${theme.breakpoint.sm}) {
+ display: none;
+ visibility: hidden;
+ }
+`;
+
+export const DashboardWrapper = styled.aside`
+ height: 90vh;
+
+ position: fixed;
+ left: 0;
+
+ @media (max-width: ${theme.breakpoint.sm}) {
+ display: none;
+ visibility: hidden;
+ }
+`;
+
+export const MainContainer = styled.main<{ $isSidebarVisible: boolean }>`
+ display: flex;
+ justify-content: center;
+
+ width: 100%;
+ @media (min-width: ${theme.breakpoint.sm}) {
+ padding-left: ${({ $isSidebarVisible }) => $isSidebarVisible && '225px'};
+ }
+`;
+
+export const ChildrenWrapper = styled.div<{ $isSidebarVisible: boolean }>`
+ width: 100%;
+ max-width: ${({ $isSidebarVisible }) => $isSidebarVisible && '500px'};
+`;