통계페이지 등 전체 스타일 수정하기_Feat/#123 (#132)

* chore: msw 오류를 해결하기 위한 msw 1.2.3 버전으로 업그레이드

* feat: (#123) 라우팅 경로 추가

* feat: (#123) 웹용 헤더 로고 누르면 메인 페이지로 이동

* test: (#123) 웹용 헤더 기능 추가에 따른 테스트 변경

* design: (#123) 데스크탑용 리스트 가로길이 변경(500px->700px)

* refactor: (#123) 중복되는 기능 함수 합치기

* refactor: (#123) 레이아웃 컴포넌트와 동일 기능을 하는 스타일드 컴포넌트 삭제

* feat: (#123) 홈페이지를 제외한 페이지 컴포넌트에 레이아웃 컴포넌트 적용

* style: (#123) 불필요한 파일 삭제

* design: (#123) 헤더 상단 고정

* design: (#123) 검색바 svg 버튼색을 헤더색으로 설정

* design: (#123) 모바일버전 main 태그 상단margin 추가

* design: (#123) 선택지 margin 줄이기

* refactor: (#123) 레이아웃의 프롭스 정보를 컴포넌트 안에서 만들도록 수정

- 정보: 유저정보, 카테고리 목록, 카테고리 선호목록, 선호 카테고리 추가/삭제 이벤트

* test: (#123) 프롭스 수정에 따른 테스트 수정

* feat: (#123) 게시글 작성/수정 페이지에 레이아웃 컴포넌트 적용

* design: (#123) 글작성 폼 중앙정렬

* design: (#123) 게시글 내 정보(제목, 작성자 등)간 간격 넓히기

* refactor: (#123) 팀 코드 컨벤션에 맞게 클릭 함수명 수정

* test: (#123) 함수명/프롭스명 수정에 따른 테스트코드 변경

* design: (#123) 사이드바 Drawer 세로 일부 공백 제거

* refactor: (#123) 다른 pr과 충돌을 방지하기 위해 라우터 초기화

frontend/package.json

@@ -18,6 +18,7 @@
  "dependencies": {
  "@tanstack/react-query": "^4.29.19",
  "dotenv": "^16.3.1",
+ "msw": "^1.2.3",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-router-dom": "^6.14.1"
@@ -55,7 +56,6 @@
  "html-webpack-plugin": "^5.5.3",
  "jest": "^29.6.0",
  "jest-environment-jsdom": "^29.6.0",
- "msw": "^1.2.2",
  "msw-storybook-addon": "^1.8.0",
  "prettier": "^2.8.8",
  "storybook": "^7.0.26",

frontend/public/mockServiceWorker.js

@@ -2,7 +2,7 @@
 /* tslint:disable */
 
 /**
- * Mock Service Worker (1.2.2).
+ * Mock Service Worker (1.2.3).
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
  * - Please do NOT serve this file on production.

frontend/src/components/PostForm/style.ts

@@ -3,8 +3,10 @@ import { styled } from 'styled-components';
 import { theme } from '@styles/theme';
 
 export const HeaderWrapper = styled.div`
- position: fixed;
  width: 100%;
+
+ position: fixed;
+
  z-index: ${theme.zIndex.header};
 
  @media (min-width: ${theme.breakpoint.sm}) {
@@ -31,6 +33,7 @@ export const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: start;
+ align-items: center;
  gap: 40px;
 
  position: relative;

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

@@ -7,7 +7,7 @@ export const Dialog = styled.dialog<{
  $placement: 'left' | 'right';
 }>`
  width: ${({ $width }) => $width};
- height: 100%;
+ min-height: 100%;
 
  position: fixed;
  top: 0;

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

@@ -1,9 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import type { User } from '@type/user';
-
-import { MOCK_FAVORITE_CATEGORIES } from '@mocks/mockData/category';
-
 import Skeleton from '../Skeleton';
 
 import Layout from '.';
@@ -15,22 +11,9 @@ const meta: Meta<typeof Layout> = {
 export default meta;
 type Story = StoryObj<typeof Layout>;
 
-const MOCK_USER_INFO: User = {
- nickname: '우아한 코끼리',
- postCount: 4,
- voteCount: 128,
- userPoint: 200,
-};
-
 export const VisibleCategory: Story = {
  render: () => (
- <Layout
- isSidebarVisible={true}
- userInfo={MOCK_USER_INFO}
- categoryList={MOCK_FAVORITE_CATEGORIES}
- handleFavoriteClick={() => {}}
- handleLogoutClick={() => {}}
- >
+ <Layout isSidebarVisible={true}>
  <Skeleton />
  <Skeleton />
  <Skeleton />
@@ -47,12 +30,7 @@ export const VisibleCategory: Story = {
 
 export const HiddenCategory: Story = {
  render: () => (
- <Layout
- isSidebarVisible={false}
- categoryList={MOCK_FAVORITE_CATEGORIES}
- handleFavoriteClick={() => {}}
- handleLogoutClick={() => {}}
- >
+ <Layout isSidebarVisible={false}>
  <Skeleton />
  <Skeleton />
  <Skeleton />

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

@@ -1,35 +1,35 @@
-import React, { PropsWithChildren } from 'react';
-
-import type { Category } from '@type/category';
-import type { User } from '@type/user';
+import { PropsWithChildren } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import Dashboard from '@components/common/Dashboard';
 import WideHeader from '@components/common/WideHeader';
 
+import { MOCK_FAVORITE_CATEGORIES } from '@mocks/mockData/category';
+
 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) {
+export default function Layout({ children, isSidebarVisible }: LayoutProps) {
+ const navigate = useNavigate();
+
+ //추후 구현 예정
+ const userInfo = undefined;
+ const categoryList = MOCK_FAVORITE_CATEGORIES;
+ const selectedCategory = undefined;
+ const handleFavoriteClick = () => {};
+ const handleLogoutClick = () => {};
+
+ const movePostListPage = () => {
+ navigate('/');
+ };
+
  return (
  <S.Container>
  <S.WideHeaderWrapper>
- <WideHeader />
+ <WideHeader handleLogoClick={movePostListPage} />
  </S.WideHeaderWrapper>
  <S.ContentContainer>
  {isSidebarVisible && (

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

@@ -21,6 +21,8 @@ export const WideHeaderWrapper = styled.div`
  position: fixed;
  top: 0;
 
+ z-index: ${theme.zIndex.header};
+
  @media (max-width: ${theme.breakpoint.sm}) {
  display: none;
  visibility: hidden;
@@ -43,13 +45,16 @@ export const MainContainer = styled.main<{ $isSidebarVisible: boolean }>`
  display: flex;
  justify-content: center;
 
+ margin-top: 15px;
  width: 100%;
+
  @media (min-width: ${theme.breakpoint.sm}) {
+ margin-top: 0;
  padding-left: ${({ $isSidebarVisible }) => $isSidebarVisible && '225px'};
  }
 `;
 
 export const ChildrenWrapper = styled.div<{ $isSidebarVisible: boolean }>`
  width: 100%;
- max-width: ${({ $isSidebarVisible }) => $isSidebarVisible && '500px'};
+ max-width: ${({ $isSidebarVisible }) => $isSidebarVisible && '700px'};
 `;

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

@@ -10,7 +10,7 @@ export const Container = styled.div`
  height: 55px;
  padding: 0 20px;
 
- position: absolute;
+ position: fixed;
  top: 0;
 
  background-color: var(--header);

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

@@ -10,7 +10,7 @@ export const Container = styled.div`
  height: 55px;
  padding: 0 20px;
 
- position: absolute;
+ position: fixed;
  top: 0;
 
  background-color: var(--header);

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

@@ -5,10 +5,6 @@ import { styled } from 'styled-components';
 import { theme } from '@styles/theme';
 
 export const Container = styled.li`
- display: flex;
- flex-direction: column;
- gap: 10px;
-
  font: var(--text-small);
  letter-spacing: 0.5px;
  line-height: 1.5;
@@ -79,5 +75,9 @@ export const Content = styled.p<{ $isPreview: boolean }>`
 `;
 
 export const DetailLink = styled(Link)<{ $isPreview: boolean }>`
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+
  pointer-events: ${({ $isPreview }) => !$isPreview && 'none'};
 `;

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

@@ -10,5 +10,5 @@ export default meta;
 type Story = StoryObj<typeof WideHeader>;
 
 export const Primary: Story = {
- render: () => <WideHeader />,
+ render: () => <WideHeader handleLogoClick={() => {}} />,
 };

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

@@ -3,10 +3,10 @@ import SearchBar from '../SearchBar';
 
 import * as S from './style';
 
-export default function WideHeader() {
+export default function WideHeader({ handleLogoClick }: { handleLogoClick: () => void }) {
  return (
  <S.Container>
- <LogoButton content="full" />
+ <LogoButton content="full" onClick={handleLogoClick} />
  <SearchBar size="sm" />
  </S.Container>
  );

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

@@ -8,7 +8,7 @@ export const Container = styled.div`
  width: 100%;
  height: 70px;
 
- position: absolute;
+ position: fixed;
  top: 0;
 
  background-color: var(--header);

frontend/src/components/optionList/WrittenVoteOptionList/WrittenVoteOption/style.ts

@@ -9,27 +9,28 @@ export const Container = styled.li<{ $isSelected: boolean }>`
  border: ${({ $isSelected }) =>
  $isSelected ? '2px solid var(--primary-color)' : '1px solid rgba(0, 0, 0, 0.1)'};
  border-radius: 4px;
- padding: 15px 20px;
+ padding: 10px 15px;
 
  color: #5b5b5b;
 
  cursor: pointer;
 
  @media (min-width: ${theme.breakpoint.md}) {
- padding: 20px 30px;
+ padding: 15px 25px;
  }
 `;
 
 export const Image = styled.img`
  border-radius: 4px;
- margin-bottom: 12px;
+ margin-bottom: 10px;
 
  width: 100%;
 
  aspect-ratio: 1/1;
  object-fit: cover;
+
  @media (min-width: ${theme.breakpoint.md}) {
- margin-bottom: 24px;
+ margin-bottom: 20px;
  }
 `;
 

frontend/src/components/post/PostListPage/PostListPage.stories.tsx

@@ -1,8 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { MOCK_FAVORITE_CATEGORIES } from '@mocks/mockData/category';
-import { MOCK_USER_INFO } from '@mocks/mockData/user';
-
 import PostListPage from '.';
 
 const meta: Meta<typeof PostListPage> = {
@@ -13,12 +10,5 @@ export default meta;
 type Story = StoryObj<typeof PostListPage>;
 
 export const Default: Story = {
- render: () => (
- <PostListPage
- userInfo={MOCK_USER_INFO}
- categoryList={MOCK_FAVORITE_CATEGORIES}
- handleFavoriteClick={() => {}}
- handleLogoutClick={() => {}}
- />
- ),
+ render: () => <PostListPage />,
 };

frontend/src/components/post/PostListPage/index.tsx

@@ -1,7 +1,4 @@
-import React, { Suspense } from 'react';
-
-import { Category } from '@type/category';
-import { User } from '@type/user';
+import { Suspense } from 'react';
 
 import { useDrawer } from '@hooks/useDrawer';
 
@@ -15,23 +12,19 @@ import PostList from '@components/post/PostList';
 
 import { PATH } from '@constants/path';
 
-import * as S from './style';
+import { MOCK_FAVORITE_CATEGORIES } from '@mocks/mockData/category';
 
-interface PostListPageProps {
- userInfo?: User;
- categoryList: Category[];
- handleFavoriteClick: (categoryId: number) => void;
- handleLogoutClick: () => void;
-}
+import * as S from './style';
 
-export default function PostListPage({
- categoryList,
- userInfo,
- handleFavoriteClick,
- handleLogoutClick,
-}: PostListPageProps) {
+export default function PostListPage() {
  const { drawerRef, closeDrawer, openDrawer } = useDrawer('left');
 
+ //추후 구현 예정
+ const categoryList = MOCK_FAVORITE_CATEGORIES;
+ const userInfo = undefined;
+ const handleFavoriteClick = () => {};
+ const handleLogoutClick = () => {};
+
  const scrollToTop = () => {
  window.scroll({ top: 0, behavior: 'smooth' });
  };

frontend/src/hooks/useFetch.ts

@@ -1,28 +1,30 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 export const useFetch = <T>(fetchFn: () => Promise<T>) => {
- const [data, setData] = useState<T>();
- const [errorMessage, setErrorMessage] = useState<string>();
+ const [data, setData] = useState<T | null>(null);
+ const [errorMessage, setErrorMessage] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState(true);
 
- useEffect(() => {
+ const refetch = useCallback(() => {
+ setIsLoading(true);
+ setData(null);
+ setErrorMessage(null);
+
  fetchFn()
  .then(res => {
  setData(res);
  })
- .catch(rej => {
- setErrorMessage(rej.message);
+ .catch(error => {
+ setErrorMessage(error.message);
  })
  .finally(() => {
  setIsLoading(false);
  });
+ }, [fetchFn]);
 
- return (() => {
- setData(undefined);
- setIsLoading(true);
- setErrorMessage(undefined);
- })();
+ useEffect(() => {
+ refetch();
  }, []);
 
- return { data, errorMessage, isLoading };
+ return { data, errorMessage, isLoading, refetch };
 };