feat: Button 컴포넌트 수정 (#122)

* fix: Button 컴포넌트에 outlined prop 추가

* style: 탈퇴하기 폼 버튼 스타일링 반영

* fix: 리뷰 반영 - boxShadow로 수정

Co-authored-by: Jungwoo LEE <[email protected]>

* fix: 온클릭 이벤트 누락 추가 및 css 수정

---------

Co-authored-by: Jungwoo LEE <[email protected]>

Author: juheehasaeyo

src/app/delete-account/delete-account.css.ts

@@ -84,3 +84,11 @@ export const fixedButtonWrapper = style({
 
   padding: "0 2rem",
 });
+
+export const deleteButton = style({
+  flex: 1,
+});
+
+export const continueButton = style({
+  flex: 2,
+});

src/app/delete-account/page.tsx

@@ -51,8 +51,10 @@ export default function page() {
       </article>
 
       <div className={styles.fixedButtonWrapper}>
-        <Button onClick={handleClickDeleteAccount}>탈퇴하기</Button>
-        <Button>계속 이용하기</Button>
+        <Button className={styles.deleteButton} outlined onClick={handleClickDeleteAccount}>
+          탈퇴하기
+        </Button>
+        <Button className={styles.continueButton}>계속 이용하기</Button>
       </div>
     </>
   );

src/components/Common/Button/Button.tsx

@@ -1,15 +1,16 @@
 import { type ButtonHTMLAttributes, ReactNode, memo } from "react";
 
 import clsx from "clsx";
-import { buttonStyle } from "./button.css";
+import { buttonStyle, outlinedStyle } from "./button.css";
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   children: ReactNode;
+  outlined?: boolean;
 }
 
-function Button({ children, className, ...buttonElementProps }: ButtonProps) {
+function Button({ children, className, outlined, ...buttonElementProps }: ButtonProps) {
   return (
-    <button className={clsx(buttonStyle, className)} {...buttonElementProps}>
+    <button className={clsx(buttonStyle, outlined && outlinedStyle, className)} {...buttonElementProps}>
       {children}
     </button>
   );

src/components/Common/Button/button.css.ts

@@ -1,4 +1,4 @@
-import { style } from '@vanilla-extract/css';
+import { style } from "@vanilla-extract/css";
 import { vars } from "@/styles/theme.css";
 
 export const buttonStyle = style({
@@ -18,4 +18,10 @@ export const buttonStyle = style({
       color: vars.color.grey_6,
     },
   },
-});
+});
+
+export const outlinedStyle = style({
+  background: vars.color.white,
+  boxShadow: `inset 0 0 0 1px ${vars.color.grey_4}`,
+  color: vars.color.grey_6,
+});