공통된 타입/데이터/상수/페이지 등 파일 정리 및 코드 리팩토링

frontend/src/api/sua/post.ts → frontend/src/api/post.ts

@@ -1,6 +1,6 @@
 import { PostInfo } from '@type/post';
 
-import { getFetch, patchFetch, postFetch } from '@utils/fetch';
+import { getFetch, patchFetch, postFetch, multiPutFetch, multiPostFetch } from '@utils/fetch';
 
 export const votePost = async (postId: number, optionId: number) => {
  return await postFetch(`/posts/${postId}/options/${optionId}`, '');
@@ -20,3 +20,11 @@ export const changeVotedOption = async (postId: number, optionData: OptionData)
 export const getVoteDetail = async (postId: number): Promise<PostInfo> => {
  return await getFetch<PostInfo>(`/posts/${postId}`);
 };
+
+export const createPost = async (newPost: FormData) => {
+ return await multiPostFetch('/posts', newPost);
+};
+
+export const editPost = async (postId: number, updatedPost: FormData) => {
+ return await multiPutFetch(`/posts/${postId}`, updatedPost);
+};

frontend/src/components/PostForm/style.ts

@@ -44,14 +44,14 @@ export const Wrapper = styled.div`
 export const Title = styled.input`
  color: gray;
 
- font-size: 2rem;
+ font: var(--text-title);
 `;
 
 export const Content = styled.textarea`
  height: 300px;
  color: gray;
 
- font-size: 1.4rem;
+ font: var(--text-caption);
  font-family: 'Raleway', sans-serif;
 
  @media (min-width: 576px) {
@@ -95,15 +95,15 @@ export const OptionListWrapper = styled.div`
 `;
 
 export const Deadline = styled.p`
- font-size: 1.5rem;
+ font: var(--text-body);
  font-weight: bold;
  text-align: center;
 `;
 
 export const Description = styled.div`
  color: gray;
 
- font-size: 1.2rem;
+ font: var(--text-small);
 `;
 
 export const ButtonWrapper = styled.div`
@@ -125,7 +125,7 @@ export const ModalHeader = styled.div`
  border-bottom: 1px solid #f6f6f6;
  padding: 10px;
 
- font-size: 1.5rem;
+ font: var(--text-body);
  font-weight: bold;
 `;
 
@@ -135,7 +135,7 @@ export const CloseButton = styled.button`
 
  background: white;
 
- font-size: 1.6rem;
+ font: var(--text-body);
 
  cursor: pointer;
 `;
@@ -148,7 +148,7 @@ export const ModalBody = styled.div`
 
  padding: 10px 0;
 
- font-size: 1.4rem;
+ font: var(--text-caption);
 `;
 
 export const ResetButtonWrapper = styled.div`

frontend/src/components/VoteStatistics/GraphStyle.ts

@@ -1,10 +1,10 @@
 import { styled } from 'styled-components';
 
-import { Size } from '@components/common/AddButton/type';
+import { Size } from '@type/style';
 
 import { theme } from '@styles/theme';
 
-const size: { [key in Size]: { height: string; linePositionTop: string } } = {
+const size: Record<Size, { height: string; linePositionTop: string }> = {
  sm: { height: '200px', linePositionTop: '165px' },
  md: { height: '230px', linePositionTop: '194px' },
  lg: { height: '260px', linePositionTop: '224px' },
@@ -17,10 +17,10 @@ export const GraphContainer = styled.div<{ $size: Size }>`
 
  position: relative;
 
- font-size: 1.2rem;
+ font: var(--text-small);
 
  @media (min-width: ${theme.breakpoint.sm}) {
- font-size: 1.4rem;
+ font: var(--text-caption);
  }
 `;
 

frontend/src/components/VoteStatistics/OneLineGraph/OneLineGraph.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { mockVoteResult } from '../mockData';
+import { MOCK_VOTE_RESULT } from '@mocks/mockData/voteResult';
 
 import OneLineGraph from '.';
 
@@ -12,13 +12,13 @@ export default meta;
 type Story = StoryObj<typeof OneLineGraph>;
 
 export const SizeSm: Story = {
- render: () => <OneLineGraph size="sm" voteResult={mockVoteResult} />,
+ render: () => <OneLineGraph size="sm" voteResult={MOCK_VOTE_RESULT} />,
 };
 
 export const SizeMd: Story = {
- render: () => <OneLineGraph size="md" voteResult={mockVoteResult} />,
+ render: () => <OneLineGraph size="md" voteResult={MOCK_VOTE_RESULT} />,
 };
 
 export const SizeLg: Story = {
- render: () => <OneLineGraph size="lg" voteResult={mockVoteResult} />,
+ render: () => <OneLineGraph size="lg" voteResult={MOCK_VOTE_RESULT} />,
 };

frontend/src/components/VoteStatistics/OneLineGraph/style.ts

@@ -1,6 +1,6 @@
 import { styled } from 'styled-components';
 
-import { Size } from '@components/common/AddButton/type';
+import { Size } from '@type/style';
 
 import { theme } from '@styles/theme';
 
@@ -30,5 +30,5 @@ export const OptionLength = styled.div<{ $amount: number }>`
  width: 40%;
  border-radius: 5px 5px 0 0;
 
- background-color: #f27676;
+ background-color: var(--primary-color);
 `;

frontend/src/components/VoteStatistics/TwoLineGraph/TwoLineGraph.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { mockVoteResult } from '../mockData';
+import { MOCK_VOTE_RESULT } from '@mocks/mockData/voteResult';
 
 import TwoLineGraph from '.';
 
@@ -12,13 +12,13 @@ export default meta;
 type Story = StoryObj<typeof TwoLineGraph>;
 
 export const SizeSm: Story = {
- render: () => <TwoLineGraph size="sm" voteResult={mockVoteResult} />,
+ render: () => <TwoLineGraph size="sm" voteResult={MOCK_VOTE_RESULT} />,
 };
 
 export const SizeMd: Story = {
- render: () => <TwoLineGraph size="md" voteResult={mockVoteResult} />,
+ render: () => <TwoLineGraph size="md" voteResult={MOCK_VOTE_RESULT} />,
 };
 
 export const SizeLg: Story = {
- render: () => <TwoLineGraph size="lg" voteResult={mockVoteResult} />,
+ render: () => <TwoLineGraph size="lg" voteResult={MOCK_VOTE_RESULT} />,
 };

frontend/src/components/VoteStatistics/TwoLineGraph/style.ts

@@ -1,6 +1,6 @@
 import { styled } from 'styled-components';
 
-import { Size } from '@components/common/AddButton/type';
+import { Size } from '@type/style';
 
 import { theme } from '@styles/theme';
 
@@ -59,5 +59,6 @@ export const OptionLength = styled.div<{ $amount: number; $gender: 'female' | 'm
  width: 100%;
  border-radius: 5px 5px 0 0;
 
- background-color: ${props => (props.$gender === 'female' ? '#853DE1' : '#5AEAA5')};
+ background-color: ${props =>
+ props.$gender === 'female' ? 'var(--graph-color-purple)' : 'var(--graph-color-green)'};
 `;

frontend/src/components/VoteStatistics/VoteStatistics.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { mockVoteResult } from './mockData';
+import { MOCK_VOTE_RESULT } from '@mocks/mockData/voteResult';
 
 import VoteStatistics from '.';
 
@@ -12,13 +12,13 @@ export default meta;
 type Story = StoryObj<typeof VoteStatistics>;
 
 export const SizeSm: Story = {
- render: () => <VoteStatistics size="sm" voteResult={mockVoteResult} />,
+ render: () => <VoteStatistics size="sm" voteResult={MOCK_VOTE_RESULT} />,
 };
 
 export const SizeMd: Story = {
- render: () => <VoteStatistics size="md" voteResult={mockVoteResult} />,
+ render: () => <VoteStatistics size="md" voteResult={MOCK_VOTE_RESULT} />,
 };
 
 export const SizeLg: Story = {
- render: () => <VoteStatistics size="lg" voteResult={mockVoteResult} />,
+ render: () => <VoteStatistics size="lg" voteResult={MOCK_VOTE_RESULT} />,
 };

frontend/src/components/VoteStatistics/style.ts

@@ -8,10 +8,10 @@ export const Container = styled.div`
  align-items: center;
  gap: 15px;
 
- font-size: 1.2rem;
+ font: var(--text-small);
 
  @media (min-width: ${theme.breakpoint.sm}) {
- font-size: 1.4rem;
+ font: var(--text-caption);
  }
 `;
 

frontend/src/components/VoteStatistics/type.ts

@@ -1,4 +1,4 @@
-import { Size } from '@components/common/AddButton/type';
+import { Size } from '@type/style';
 
 export interface GraphProps {
  voteResult: VoteResult;

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

@@ -13,10 +13,10 @@ export const SizeS: Story = {
  render: () => <AddButton size="sm" />,
 };
 
-export const sizeM: Story = {
+export const SizeM: Story = {
  render: () => <AddButton size="md" />,
 };
 
-export const sizeL: Story = {
+export const SizeL: Story = {
  render: () => <AddButton size="lg" />,
 };

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

@@ -1,15 +1,13 @@
 import { ButtonHTMLAttributes } from 'react';
 
+import { Size } from '@type/style';
+
 import * as S from './style';
-import { Size } from './type';
 
 interface AddButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  size: Size;
 }
 
-/* 글쓰기 버튼, 선택지 추가 버튼 등 크기가 다른 용도로 사용할 예정이기 때문에
- * props로 s/m/l 크기를 받음
- */
 export default function AddButton({ size, ...rest }: AddButtonProps) {
  return (
  <S.Button size={size} aria-label="더하기" {...rest}>

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

@@ -1,12 +1,12 @@
 import { styled } from 'styled-components';
 
-import { Size } from './type';
+import { Size } from '@type/style';
 
 interface ButtonProps {
  size: Size;
 }
 
-const size = {
+const SIZE = {
  sm: { button: '25px', font: '13px' },
  md: { button: '40px', font: '30px' },
  lg: { button: '60px', font: '50px' },
@@ -15,14 +15,14 @@ const size = {
 export const Button = styled.button<ButtonProps>`
  display: block;
 
- width: ${props => size[props.size].button};
- height: ${props => size[props.size].button};
+ width: ${props => SIZE[props.size].button};
+ height: ${props => SIZE[props.size].button};
  border-radius: 50%;
 
- background-color: #ff7877;
- color: #ffffff;
+ background-color: var(--primary-color);
+ color: var(--white);
 
- font-size: ${props => size[props.size].font};
+ font-size: ${props => SIZE[props.size].font};
 
  cursor: pointer;
 `;

frontend/src/components/common/Dashboard/UserProfile/index.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
-import { BASE_PATH } from '@constants/path';
-
 import { User } from '@type/user';
 
+import { BASE_PATH } from '@constants/path';
+
 import * as PS from '../profileStyle';
 
 import * as S from './style';

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

@@ -10,7 +10,7 @@ export const ProfileContainer = styled.div`
  padding: 16px 12px;
  border-radius: 4px;
 
- font-size: 1.6rem;
+ font: var(--text-body);
 
  background-color: var(--gray);
 `;

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

@@ -3,7 +3,7 @@ import { styled } from 'styled-components';
 export const Button = styled.button`
  background-color: rgba(0, 0, 0, 0);
 
- font-size: 14px;
+ font: var(--text-caption);
  font-weight: 500;
 
  cursor: pointer;

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

@@ -8,7 +8,7 @@ import * as S from './style';
 
 type IconCategory = 'category' | 'back' | 'search';
 
-const iconCategory: { [key in IconCategory]: { name: string; url: string } } = {
+const ICON_CATEGORY: Record<IconCategory, { name: string; url: string }> = {
  category: {
  name: '카테고리',
  url: categoryIcon,
@@ -30,8 +30,8 @@ interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 /* 뒤로가기, 카테고리 열기 등에 사용될 아이콘 버튼
  */
 export default function IconButton({ category, ...rest }: IconButtonProps) {
- const src = iconCategory[category].url;
- const ariaLabelText = iconCategory[category].name;
+ const src = ICON_CATEGORY[category].url;
+ const ariaLabelText = ICON_CATEGORY[category].name;
 
  return (
  <S.Button aria-label={ariaLabelText} {...rest}>

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

@@ -13,10 +13,10 @@ export const SizeS: Story = {
  render: () => <LoadingSpinner size="sm" />,
 };
 
-export const sizeM: Story = {
+export const SizeM: Story = {
  render: () => <LoadingSpinner size="md" />,
 };
 
-export const sizeL: Story = {
+export const SizeL: Story = {
  render: () => <LoadingSpinner size="lg" />,
 };