feat(#23): 버튼 공통 컴포넌트 제작

Kusitms-28th-Meetup-D · Nov 10, 2023 · ccec135 · ccec135
1 parent dd536f8
commit ccec135
Showing 1 changed file with 25 additions and 0 deletions.
diff --git a/src/components/common/Button.tsx b/src/components/common/Button.tsx
@@ -0,0 +1,25 @@
+import { styled } from 'styled-components';
+
+interface ButtonProps {
+  children: React.ReactNode;
+  onClick?: () => void;
+}
+
+const Button = ({ children, onClick }: ButtonProps) => {
+  return <ButtonBox onClick={onClick}>{children}</ButtonBox>;
+};
+
+export default Button;
+
+const ButtonBox = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  background: ${({ theme }) => theme.colors.primary60};
+  color: ${({ theme }) => theme.colors.white};
+  ${({ theme }) => theme.fonts.buttonL};
+  border-radius: 36px;
+  padding: 1.4rem 7.5rem;
+  cursor: pointer;
+`;