create :: Button

team-xquare · Apr 17, 2024 · fb9f4cf · fb9f4cf
1 parent 7c1ac3e
commit fb9f4cf
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 9 deletions.
diff --git a/src/components/Main/firstContainer.tsx b/src/components/Main/firstContainer.tsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import MainImg from '@/assets/Main.svg';
-// import { Button } from '../common/Button';
+import { Button } from '../common/Button';
 
 export const FirstContainer = () => {
   return (
@@ -15,9 +15,9 @@ export const FirstContainer = () => {
           배포하는 경험을 할 수 있습니다.
         </div>
         <div>스퀘어는 보다 쉬운 방법으로 배포할 수 있고 쉽게 모니터링 할 수 있습니다.</div>
-        {/* <Button width={190} height={64} buttonColor="white" buttonStyle="ghost" onClick={() => console.log('click!!')}>
+        <Button width={190} height={64} buttonColor="white" buttonStyle="ghost" onClick={() => console.log('click!!')}>
           자세히 보기
-        </Button> */}
+        </Button>
       </MainContainer>
     </Container>
   );

diff --git a/src/components/common/Button.tsx b/src/components/common/Button.tsx
@@ -0,0 +1,63 @@
+import { ReactNode } from 'react';
+import styled from '@emotion/styled';
+
+type ButtonStyleType = 'solid' | 'ghost';
+type ButtonColorType = 'black' | 'white';
+
+type ButtonPropsType = {
+  buttonStyle: ButtonStyleType;
+  buttonColor: ButtonColorType;
+  width: number;
+  height: number;
+  children: ReactNode;
+  isBold?: boolean;
+  font?: number;
+  onClick: () => void;
+};
+
+export const Button = ({
+  buttonStyle,
+  buttonColor,
+  width,
+  height,
+  children,
+  onClick,
+  font = 16,
+  isBold = false,
+}: ButtonPropsType) => {
+  return (
+    <Wrapper
+      width={width}
+      height={height}
+      buttonStyle={buttonStyle}
+      buttonColor={buttonColor}
+      onClick={onClick}
+      font={font}
+      isBold={isBold}
+    >
+      {children}
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div<Omit<ButtonPropsType, 'children' | 'onClick'>>`
+  cursor: pointer;
+  width: ${({ width }) => width + 'px'};
+  height: ${({ height }) => height + 'px'};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 6px;
+  transition: 0.2s linear;
+  font-size: ${({ font }) => `${font}px`};
+  font-weight: ${({ isBold }) => (isBold ? 700 : 500)};
+  color: ${({ buttonColor, buttonStyle }) =>
+    buttonStyle === 'ghost' ? buttonColor : buttonColor === 'black' ? 'white' : 'black'};
+  border: 1px ${({ buttonColor }) => buttonColor} solid;
+  background-color: ${({ buttonColor, buttonStyle }) => (buttonStyle === 'ghost' ? 'rgba(0,0,0,0)' : buttonColor)};
+  &:hover {
+    color: ${({ buttonColor, buttonStyle }) =>
+      buttonStyle === 'ghost' ? (buttonColor === 'black' ? 'white' : 'black') : buttonColor};
+    background-color: ${({ buttonColor, buttonStyle }) => (buttonStyle === 'ghost' ? buttonColor : 'rgba(0,0,0,0)')};
+  }
+`;
diff --git a/src/components/common/header/index.tsx b/src/components/common/header/index.tsx
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import LogoImg from '@/assets/Logo.svg';
 import { useEffect, useState } from 'react';
-// import { Button } from '@/components/common/Button';
+import { Button } from '@/components/common/Button';
 import { useLocation } from 'react-router-dom';
 import { css } from '@emotion/react';
 
@@ -36,7 +36,7 @@ export const Header = () => {
               <span>고객 지원</span>
             </Center>
             <RightSide>
-              {/* <Button
+              <Button
                 width={164}
                 height={40}
                 buttonStyle="ghost"
@@ -46,7 +46,7 @@ export const Header = () => {
                 }}
               >
                 무료로 시작하기
-              </Button> */}
+              </Button>
             </RightSide>
           </>
         )}

diff --git a/src/pages/Main.tsx b/src/pages/Main.tsx
@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 import { FirstContainer } from '@/components/Main/firstContainer';
 import { SecondContainer } from '@/components/Main/secondContainer';
 import { ThirdContainer } from '@/components/Main/thirdContainer';
-// import { Button } from '@/components/common/Button';
+import { Button } from '@/components/common/Button';
 
 export const Main = () => {
   return (
@@ -16,9 +16,9 @@ export const Main = () => {
           대마고 학생이라면 <b>‘스퀘어 인프라’</b> 를<br />
           <b>무료</b>로 사용할 수 있습니다.
         </div>
-        {/* <Button width={188} height={56} buttonColor="white" buttonStyle="solid" onClick={() => console.log('click!!')}>
+        <Button width={188} height={56} buttonColor="white" buttonStyle="solid" onClick={() => console.log('click!!')}>
           무료로 사용하기
-        </Button> */}
+        </Button>
       </SubFooter>
     </Wrapper>
   );