Merge pull request #19 from DevKor-github/feat/#11/button

feat: 버튼 구현

Author: jw0202058

src/common/components/Button/index.tsx

@@ -0,0 +1,16 @@
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+import * as s from './style.css';
+
+interface Props extends PropsWithChildren {
+  color?: 'gray' | 'main' | 'softgray' | 'deemedgray';
+  onClick?: () => void;
+  style? : HTMLAttributes<HTMLDivElement>['style'];
+}
+const Btn = ({ children, color = 'softgray', onClick, style }: Props) => {
+  return (
+    <div className={s.Button({ color })} style={style} onClick={onClick}>
+      {children}
+    </div>
+  );
+};
+export default Btn;

src/common/components/Button/style.css.ts

@@ -0,0 +1,40 @@
+import { cva } from '@styled-system/css';
+
+export const Button = cva({
+  base: {
+    display: 'flex',
+    gap: '0.625rem',
+    flexShrink: '0',
+    justifyContent: 'center',
+    padding: '0.625rem',
+    borderRadius: '0.375rem',
+    width: '100%',
+    height: '3.125rem',
+    fontFamily: 'Pretendard',
+    fontSize: '1.25rem',
+    fontStyle: 'normal',
+    fontWeight: '500',
+    lineHeight: 'normal',
+    letterSpacing: '-0.05rem'
+  },
+  variants: {
+    color: {
+      main: {
+        backgroundColor: 'main',
+        color: '100',
+      },
+      gray: {
+        backgroundColor: 'systemGray5',
+        color: '100'
+      },
+      softgray: {
+        backgroundColor: 'systemGray5',
+        color: '80'
+      },
+      deemedgray: {
+        backgroundColor: 'systemGray5',
+        color: '54'
+      }
+    }
+  }
+})

src/pages/HomePage/index.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import type { ActivityComponentType } from '@stackflow/react';
+import Btn from '@/common/components/Button';
 import { useFlow } from '@/libs/routes/stack';
 
 // CSS 사용하는 컴포넌트에서는 이런 식으로 불러오기
@@ -11,6 +12,7 @@ import SelectButton from '@/common/components/SelectButton';
 import TestAPIButton from '@/common/components/TestAPIButton';
 import useGetIsLogin from '@/common/hooks/apis/useGetIsLogin';
 
+
 const HomePage: ActivityComponentType = () => {
   const { push } = useFlow();
   const { data: isLogin } = useGetIsLogin();
@@ -24,17 +26,26 @@ const HomePage: ActivityComponentType = () => {
         {isLogin ? (
           <TestAPIButton />
         ) : (
-          <div className={s.LoginBtn}>
+          <div className={s.LoginBtn} style={{margin: '1rem'}}>
             <a href={`${import.meta.env.VITE_API_URL}/oauth2/authorization/kakao`}>카카오톡 로그인</a>
             <a href={`${import.meta.env.VITE_API_URL}/oauth2/authorization/google`}>구글 로그인</a>
+            <i className={s.Container}>백엔드에몽 로그인 고쳐줘</i>
+            <button onClick={() => push('PostPage', {})}>이동</button>
           </div>
         )}
-        <button onClick={() => push('PostPage', {})}>이동</button>
       </div>
       <Chip color="main">축구</Chip>
       <SelectButton active={active} onClick={() => setActive(!active)}>
         종목
       </SelectButton>
+      <div style={{display: 'flex', justifyContent: 'space-evenly'}}>
+        <Btn color = 'softgray' style = {{width : '5.875rem'}}>ㅇ 채팅</Btn>
+        <Btn color='main' style = {{width: '15.8125rem'}} >대여일자선택</Btn>
+      </div>
+      <div style={{display: 'flex', flexDirection:'column', marginTop: '1rem', gap: '0.5rem'}}>
+        <Btn color='gray'>안녕하세요</Btn>
+        <Btn color='deemedgray'>반가워요...</Btn>
+      </div>
     </AppScreenWithSafeArea>
   );
 };

src/pages/HomePage/style.css.ts

@@ -8,6 +8,6 @@ export const Title = css({
   color: 'main',
 });
 
-export const LoginBtn = css({ display: 'flex', flexDirection: 'column', gap: '1rem' });
+export const LoginBtn = css({ display: 'flex', flexDirection: 'column', gap: '1rem', alignItems: 'center' });
 
 export const Container = css({ color: 'systemGray' });