feat: (#15) 네모버튼 구현

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

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

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

@@ -0,0 +1,19 @@
+import { styled } from 'styled-components';
+
+interface ButtonProps {
+ theme: 'blank' | 'fill';
+}
+
+export const Button = styled.button<ButtonProps>`
+ display: block;
+
+ width: 100%;
+ height: 100%;
+ outline: 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;
+`;