[Feat] Button 컴포넌트 구현

src/designs/Button.ts

@@ -0,0 +1,149 @@
+import styled from '@emotion/styled';
+import { Link } from 'react-router-dom';
+import {
+  BRAND_COLOR,
+  GRAY_800,
+  PRIMARY,
+  SECONDARY,
+} from '@/foundations/colors';
+import { BORDER_RADIUS_STYLE, BORDER_STYLE } from '@/foundations/border';
+
+interface ButtonProps {
+  colorTheme?: 'brand' | 'primary' | 'secondary';
+  borderTheme?: 'none' | 'dashed'; // 추후 dashed 추가될 수 있음. 기본 solid
+  size?: 'large' | 'medium' | 'small' | 'fit-content';
+  disable?: boolean;
+}
+
+const backgroundMapper = {
+  brand: BRAND_COLOR,
+  primary: PRIMARY,
+  secondary: SECONDARY,
+};
+
+const hoverColorMapper = {
+  brand: 'tomato',
+  primary: '#3c5997',
+  secondary: '#aaaaaa',
+};
+
+const sizeMapper = {
+  large: '8rem',
+  medium: '6rem',
+  small: '4.5rem',
+};
+
+const fontSizeMapper = {
+  large: '1.1rem',
+  medium: '1rem',
+  small: '0.8rem',
+};
+
+export const Button = styled.button<ButtonProps>`
+  width: ${({ size }) =>
+    size === 'fit-content' ? undefined : size && sizeMapper[size]};
+  height: 2.5rem;
+
+  border: ${BORDER_STYLE} ${GRAY_800};
+  border-style: ${({ borderTheme }) => borderTheme};
+  border-radius: ${BORDER_RADIUS_STYLE};
+
+  color: ${({ colorTheme }) => (colorTheme === 'primary' ? 'white' : 'black')};
+  font-size: ${({ size }) =>
+    size === 'fit-content' ? undefined : size && fontSizeMapper[size]};
+
+  background-color: ${({ colorTheme }) =>
+    colorTheme && backgroundMapper[colorTheme]};
+  opacity: ${({ disable }) => (disable ? `0.8` : `1`)};
+
+  &:hover {
+    background-color: ${({ colorTheme, disable }) =>
+      !disable && colorTheme && hoverColorMapper[colorTheme]};
+  }
+  cursor: ${({ disable }) => (disable ? `not-allowed` : `pointer`)};
+`;
+
+interface CustomButtonProps {
+  width?: string;
+  backgroundColor?: string;
+  hoverBackgroundColor?: string;
+  hoverTextColor?: string;
+
+  color?: string;
+  borderTheme?: 'none' | 'dashed'; // 추후 dashed 추가될 수 있음. 기본 solid
+  isSquare?: boolean;
+  disable?: boolean;
+}
+
+export const CustomButton = styled.button<CustomButtonProps>`
+  height: 2.5rem;
+  width: ${({ width }) => width};
+
+  color: ${({ color }) => color};
+  background-color: ${({ backgroundColor }) => backgroundColor};
+  &:hover {
+    background-color: ${({ hoverBackgroundColor, disable }) =>
+      !disable && `${hoverBackgroundColor}`};
+    color: ${({ hoverTextColor }) => hoverTextColor};
+  }
+
+  border: ${BORDER_STYLE} ${GRAY_800};
+  border-style: ${({ borderTheme }) => borderTheme};
+  border-radius: ${({ isSquare }) => (isSquare ? 0 : BORDER_RADIUS_STYLE)};
+
+  opacity: ${({ disable }) => (disable ? `0.8` : `1`)};
+  cursor: ${({ disable }) => (disable ? `not-allowed` : `pointer`)};
+`;
+
+export const ButtonLink = styled(Link)<ButtonProps>`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+
+  width: ${({ size }) =>
+    size === 'fit-content' ? undefined : size && sizeMapper[size]};
+  height: 2.5rem;
+
+  border: ${BORDER_STYLE} ${GRAY_800};
+  border-style: ${({ borderTheme }) => borderTheme};
+  border-radius: ${BORDER_RADIUS_STYLE};
+
+  color: ${({ colorTheme }) => (colorTheme === 'primary' ? 'white' : 'black')};
+  font-size: ${({ size }) =>
+    size === 'fit-content' ? undefined : size && fontSizeMapper[size]};
+  text-decoration: none;
+
+  background-color: ${({ colorTheme }) =>
+    colorTheme && backgroundMapper[colorTheme]};
+  opacity: ${({ disable }) => (disable ? `0.8` : `1`)};
+
+  &:hover {
+    background-color: ${({ colorTheme, disable }) =>
+      !disable && colorTheme && hoverColorMapper[colorTheme]};
+  }
+  cursor: ${({ disable }) => (disable ? `not-allowed` : `pointer`)};
+`;
+export const CustomButtonLink = styled(Link)<CustomButtonProps>`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  text-decoration: none;
+
+  height: 2.5rem;
+  width: ${({ width }) => width};
+
+  color: ${({ color }) => color};
+  background-color: ${({ backgroundColor }) => backgroundColor};
+  &:hover {
+    background-color: ${({ hoverBackgroundColor, disable }) =>
+      !disable && `${hoverBackgroundColor}`};
+    color: ${({ hoverTextColor }) => hoverTextColor};
+  }
+
+  border: ${BORDER_STYLE} ${GRAY_800};
+  border-style: ${({ borderTheme }) => borderTheme};
+  border-radius: ${({ isSquare }) => (isSquare ? 0 : BORDER_RADIUS_STYLE)};
+
+  opacity: ${({ disable }) => (disable ? `0.8` : `1`)};
+  cursor: ${({ disable }) => (disable ? `not-allowed` : `pointer`)};
+`;

src/pages/DesignPage/index.tsx

@@ -0,0 +1,94 @@
+import {
+  Button,
+  ButtonLink,
+  CustomButton,
+  CustomButtonLink,
+} from '@/designs/Button';
+
+function DesignPage() {
+  return (
+    <div>
+      <h1>버튼 디자인 시스템</h1>
+      <h1>colorTheme: brand</h1>
+      <Button colorTheme="brand" size="small">
+        댓글 쓰기
+      </Button>
+      <Button colorTheme="brand" size="medium">
+        댓글 쓰기
+      </Button>
+      <Button colorTheme="brand" size="large">
+        댓글 쓰기
+      </Button>
+      <br />
+      <h1>colorTheme: primary</h1>
+      <Button colorTheme="primary" size="small">
+        댓글 쓰기
+      </Button>
+      <Button colorTheme="primary" size="medium">
+        댓글 쓰기
+      </Button>
+      <Button colorTheme="primary" size="large">
+        댓글 쓰기
+      </Button>
+      <br />
+      <h1>colorTheme: secondary</h1>
+      <Button colorTheme="secondary" size="small">
+        댓글 쓰기
+      </Button>
+      <Button colorTheme="secondary" size="medium">
+        댓글 쓰기
+      </Button>
+      <Button colorTheme="secondary" size="large">
+        댓글 쓰기
+      </Button>
+      <br />
+      <h1>borderTheme과 buttonSize: fit-content</h1>
+      <Button colorTheme="secondary" size="medium" borderTheme="dashed">
+        댓글 쓰기
+      </Button>
+      <Button colorTheme="secondary" size="fit-content">
+        아주 긴 버튼을 만들 때, 내부 값에 따라서 크기가 정해집니다.
+      </Button>
+      <br />
+      <h1>button에 disable 상태 줄 때 모습</h1>
+      <Button colorTheme="brand" size="large" disable>
+        비활성화
+      </Button>
+      <Button colorTheme="primary" size="large" disable>
+        비활성화
+      </Button>
+      <Button colorTheme="secondary" size="large" disable>
+        비활성화
+      </Button>
+      <h1>커스텀 버튼</h1>
+      <CustomButton
+        isSquare
+        borderTheme="none"
+        color="white"
+        backgroundColor="tomato"
+        hoverBackgroundColor="antiqueWhite"
+        hoverTextColor="brown"
+      >
+        커스텀 버튼
+      </CustomButton>
+      <h1>버튼-링크</h1>
+      <ButtonLink to="/" colorTheme="secondary" size="large">
+        버튼링크
+      </ButtonLink>
+      <ButtonLink to="/" colorTheme="brand" size="medium" disable>
+        버튼링크
+      </ButtonLink>
+      <CustomButtonLink
+        to="/"
+        color="white"
+        backgroundColor="royalblue"
+        hoverBackgroundColor="tomato"
+        width="300px"
+      >
+        커스텀버튼링크
+      </CustomButtonLink>
+    </div>
+  );
+}
+
+export default DesignPage;

src/routes/Router.tsx

@@ -10,6 +10,7 @@ import Ranking from '@/pages/RankingPage';
 import Error from '@/pages/ErrorPage';
 
 import AuthRoute from '@/routes/AuthRoute';
+import DesignPage from '@/pages/DesignPage';
 
 function Routers() {
   return (
@@ -21,6 +22,7 @@ function Routers() {
         <AuthRoute exact path="/ranking" component={Ranking} />
         <AuthRoute path="/user/:userId" component={UserInfoPage} />
         <AuthRoute path="/error" component={Error} />
+        <AuthRoute exact path="/test/design" component={DesignPage} />
         <AuthRoute exact path="/" component={Home} />
         <AuthRoute path="*" render={() => <Redirect to="/error" />} />
       </Switch>