공통 버튼 컴포넌트 구현

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

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import AddButton from '.';
+
+const meta: Meta<typeof AddButton> = {
+ component: AddButton,
+};
+
+export default meta;
+type Story = StoryObj<typeof AddButton>;
+
+export const size_S: Story = {
+ render: () => <AddButton size="sm" />,
+};
+
+export const size_M: Story = {
+ render: () => <AddButton size="md" />,
+};
+
+export const size_L: Story = {
+ render: () => <AddButton size="lg" />,
+};

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

@@ -0,0 +1,19 @@
+import { ButtonHTMLAttributes } from 'react';
+
+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}>
+ +
+ </S.Button>
+ );
+}

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

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

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

@@ -0,0 +1 @@
+export type Size = 'sm' | 'md' | 'lg';

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

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import HeaderTextButton from '.';
+
+const meta: Meta<typeof HeaderTextButton> = {
+ component: HeaderTextButton,
+};
+
+export default meta;
+type Story = StoryObj<typeof HeaderTextButton>;
+
+export const defaultButton: Story = {
+ render: () => <HeaderTextButton>확 인</HeaderTextButton>,
+};

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

@@ -0,0 +1,14 @@
+import { ButtonHTMLAttributes } from 'react';
+
+import * as S from './style';
+
+interface HeaderTextButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+ children: string;
+}
+
+/* 헤더에 포함되어 취소, 확인, 신고 등 사용될 버튼
+ * props로 s/m/l 크기를 받음
+ */
+export default function HeaderTextButton({ children, ...rest }: HeaderTextButtonProps) {
+ return <S.Button {...rest}>{children}</S.Button>;
+}

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

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

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

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import IconButton from '.';
+
+const meta: Meta<typeof IconButton> = {
+ component: IconButton,
+ decorators: [storyFn => <div style={{ backgroundColor: 'black' }}>{storyFn()}</div>],
+};
+
+export default meta;
+type Story = StoryObj<typeof IconButton>;
+
+export const category: Story = {
+ render: () => <IconButton category="category" />,
+};
+
+export const back: Story = {
+ render: () => <IconButton category="back" />,
+};
+
+export const search: Story = {
+ render: () => <IconButton category="search" />,
+};

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

@@ -0,0 +1,41 @@
+import { ButtonHTMLAttributes } from 'react';
+
+import backIcon from '@assets/back.svg';
+import categoryIcon from '@assets/category.svg';
+import searchIcon from '@assets/search.svg';
+
+import * as S from './style';
+
+type IconCategory = 'category' | 'back' | 'search';
+
+const iconCategory: { [key in IconCategory]: { name: string; url: string } } = {
+ category: {
+ name: '카테고리',
+ url: categoryIcon,
+ },
+ back: {
+ name: '뒤로가기',
+ url: backIcon,
+ },
+ search: {
+ name: '검색',
+ url: searchIcon,
+ },
+};
+
+interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+ category: IconCategory;
+}
+
+/* 뒤로가기, 카테고리 열기 등에 사용될 아이콘 버튼
+ */
+export default function IconButton({ category, ...rest }: IconButtonProps) {
+ const src = iconCategory[category].url;
+ const ariaLabelText = iconCategory[category].name;
+
+ return (
+ <S.Button aria-label={ariaLabelText} {...rest}>
+ <img src={src} alt={`${ariaLabelText} 버튼`} />
+ </S.Button>
+ );
+}

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

@@ -0,0 +1,7 @@
+import { styled } from 'styled-components';
+
+export const Button = styled.button`
+ background-color: rgba(0, 0, 0, 0);
+
+ cursor: pointer;
+`;

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

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import SquareButton from '.';
+
+const meta: Meta<typeof SquareButton> = {
+ component: SquareButton,
+ decorators: [storyFn => <div style={{ width: '100px', height: '50px' }}>{storyFn()}</div>],
+};
+
+export default meta;
+type Story = StoryObj<typeof SquareButton>;
+
+export const color_blank: Story = {
+ render: () => <SquareButton theme="blank">확 인</SquareButton>,
+};
+
+export const color_fill: Story = {
+ render: () => <SquareButton theme="fill">버 튼</SquareButton>,
+};

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

@@ -0,0 +1,20 @@
+import { ButtonHTMLAttributes } from 'react';
+
+import * as S from './style';
+
+interface SquareButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+ theme: 'blank' | 'fill';
+ children: string;
+}
+
+/* 마감시간, 확인, 취소 등 사용될 버튼
+ * 부모에서 크기를 조절, 내용(children) 전달
+ * props로 테마를 받음
+ */
+export default function SquareButton({ theme, children, ...rest }: SquareButtonProps) {
+ return (
+ <S.Button theme={theme} {...rest}>
+ {children}
+ </S.Button>
+ );
+}

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

@@ -0,0 +1,21 @@
+import { styled } from 'styled-components';
+
+interface ButtonProps {
+ theme: 'blank' | 'fill';
+}
+
+export const Button = styled.button<ButtonProps>`
+ display: block;
+
+ width: 100%;
+ height: 100%;
+ border: 2px solid #ff7877;
+ border-radius: 5px;
+
+ background-color: ${props => (props.theme === 'blank' ? 'rgba(0,0,0,0)' : '#ff7877')};
+ color: ${props => (props.theme === 'blank' ? '#ff7877' : '#ffffff')};
+
+ font-size: 16px;
+
+ cursor: pointer;
+`;

frontend/src/svg.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+ const content: any;
+ export default content;
+}

frontend/tsconfig.json

@@ -32,6 +32,6 @@
  },
  "outDir": "./dist"
  },
- "include": ["src"],
+ "include": ["src", "src/custom.d.ts"],
  "exclude": ["node_modules"]
 }