Merge pull request #626 from sparcs-kaist/#620-home-2023-fall

#620 `Button` 와 `WhiteContainer` Component에 `css` props 추가
sparcs-kaist · Sep 8, 2023 · 0fe8f5f · 0fe8f5f
2 parents f285d83 + ab0dee3
commit 0fe8f5f
Show file tree

Hide file tree

Showing 34 changed files with 309 additions and 199 deletions.
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -1,33 +1,25 @@
-import { ReactNode } from "react";
+import { HTMLProps, ReactNode } from "react";
 
 import useHoverProps from "hooks/theme/useHoverProps";
 
-import theme, { Font } from "tools/theme";
+import theme from "tools/theme";
 
 type ButtonType = "purple" | "purple_inset" | "gray" | "white";
 
 type ButtonProps = {
   type?: ButtonType;
   disabled?: boolean;
-  width?: string;
-  padding?: string | number;
-  radius?: number;
-  font?: Font;
-  onClick?: () => void;
   className?: string;
   children?: ReactNode;
-};
+} & HTMLProps<HTMLDivElement>;
 
 const Button = ({
   type,
   disabled = false,
-  width,
-  padding,
-  radius,
-  font,
-  onClick,
   className,
   children,
+  onClick,
+  ...divProps
 }: ButtonProps) => {
   const [hoverProps, isHover, isClicked] = useHoverProps();
 
@@ -71,23 +63,20 @@ const Button = ({
     }
   };
 
-  const style: CSS = {
-    ...font,
-    width: width,
-    padding: padding,
-    borderRadius: radius,
+  const style = {
     transitionDuration: theme.duration,
+    textAlign: "center" as const,
     ...theme.cursor(disabled),
-    textAlign: "center",
     ...getColor(),
   };
 
   return (
     <div
-      onClick={disabled ? undefined : onClick}
-      style={style}
+      css={style}
       className={className}
+      onClick={disabled ? undefined : onClick}
       {...hoverProps}
+      {...divProps}
     >
       {children}
     </div>

diff --git a/src/components/ModalPopup/Body/BodyChatReportDone.tsx b/src/components/ModalPopup/Body/BodyChatReportDone.tsx
@@ -23,9 +23,11 @@ const BodyChatReportDone = ({ onChangeIsOpen }: BodyChatReportDoneProps) => {
       </div>
       <Button
         type="purple_inset"
-        padding="10px 0 9px"
-        radius={8}
-        font={theme.font14_bold}
+        css={{
+          padding: "10px 0 9px",
+          borderRadius: "8px",
+          ...theme.font14_bold,
+        }}
         onClick={() => onChangeIsOpen?.(false)}
       >
         확인

diff --git a/src/components/ModalPopup/Body/BodyChatReportSelectType.tsx b/src/components/ModalPopup/Body/BodyChatReportSelectType.tsx
@@ -222,20 +222,24 @@ const BodyChatReportSelectType = ({
       <div css={styleButtons}>
         <Button
           type="gray"
-          width="calc(50% - 5px)"
-          padding="10px 0 9px"
-          radius={8}
-          font={theme.font14}
+          css={{
+            width: "calc(50% - 5px)",
+            padding: "10px 0 9px",
+            borderRadius: "8px",
+            ...theme.font14,
+          }}
           onClick={clearReportedId}
         >
           이전
         </Button>
         <Button
           type="purple_inset"
-          width="calc(50% - 5px)"
-          padding="10px 0 9px"
-          radius={8}
-          font={theme.font14_bold}
+          css={{
+            width: "calc(50% - 5px)",
+            padding: "10px 0 9px",
+            borderRadius: "8px",
+            ...theme.font14_bold,
+          }}
           onClick={handleSubmit}
           disabled={!!inValidMessage}
         >

diff --git a/src/components/ModalPopup/Body/BodyChatReportSelectUser.tsx b/src/components/ModalPopup/Body/BodyChatReportSelectUser.tsx
@@ -104,20 +104,24 @@ const BodyChatReportSelectUser = ({
       <div css={styleButtons}>
         <Button
           type="gray"
-          width="calc(50% - 5px)"
-          padding="10px 0 9px"
-          radius={8}
-          font={theme.font14}
+          css={{
+            width: "calc(50% - 5px)",
+            padding: "10px 0 9px",
+            borderRadius: "8px",
+            ...theme.font14,
+          }}
           onClick={() => onChangeIsOpen?.(false)}
         >
           돌아가기
         </Button>
         <Button
           type="purple_inset"
-          width="calc(50% - 5px)"
-          padding="10px 0 9px"
-          radius={8}
-          font={theme.font14_bold}
+          css={{
+            width: "calc(50% - 5px)",
+            padding: "10px 0 9px",
+            borderRadius: "8px",
+            ...theme.font14_bold,
+          }}
           onClick={() => setReportedId(selectedUser)}
           disabled={!selectedUser}
         >

diff --git a/src/components/ModalPopup/Body/BodyRoomSelection.tsx b/src/components/ModalPopup/Body/BodyRoomSelection.tsx
@@ -204,9 +204,11 @@ const BodyRoomSelection = ({ roomInfo }: BodyRoomSelectionProps) => {
         <Button
           type="purple"
           disabled={isRoomFull || isDepart || isAlreadyPart || isMaxPart}
-          padding="10px 0 9px"
-          radius={8}
-          font={theme.font14_bold}
+          css={{
+            padding: "10px 0 9px",
+            borderRadius: "8px",
+            ...theme.font14_bold,
+          }}
           onClick={requestJoin}
         >
           {isAlreadyPart
@@ -223,9 +225,11 @@ const BodyRoomSelection = ({ roomInfo }: BodyRoomSelectionProps) => {
         <LinkLogin redirect={`/home/${roomInfo?._id}`}>
           <Button
             type="purple"
-            padding="10px 0 9px"
-            radius={8}
-            font={theme.font14_bold}
+            css={{
+              padding: "10px 0 9px",
+              borderRadius: "8px",
+              ...theme.font14_bold,
+            }}
           >
             로그인 후 참여 신청
           </Button>

diff --git a/src/components/ModalPopup/ModalChatCancel.tsx b/src/components/ModalPopup/ModalChatCancel.tsx
@@ -87,20 +87,24 @@ const ModalChatCancel = ({ roomId, ...modalProps }: ModalChatCancelProps) => {
       >
         <Button
           type="gray"
-          width="calc(50% - 5px)"
-          padding="10px 0 9px"
-          radius={8}
-          font={theme.font14}
+          css={{
+            width: "calc(50% - 5px)",
+            padding: "10px 0 9px",
+            borderRadius: "8px",
+            ...theme.font14,
+          }}
           onClick={() => modalProps?.onChangeIsOpen?.(false)}
         >
           돌아가기
         </Button>
         <Button
           type="purple_inset"
-          width="calc(50% - 5px)"
-          padding="10px 0 9px"
-          radius={8}
-          font={theme.font14_bold}
+          css={{
+            width: "calc(50% - 5px)",
+            padding: "10px 0 9px",
+            borderRadius: "8px",
+            ...theme.font14_bold,
+          }}
           onClick={onClickOk}
         >
           취소하기

diff --git a/src/components/ModalPopup/ModalChatPayment.tsx b/src/components/ModalPopup/ModalChatPayment.tsx
@@ -177,20 +177,24 @@ const ModalChatSettlement = ({
       >
         <Button
           type="gray"
-          width="calc(50% - 5px)"
-          padding="10px 0 9px"
-          radius={8}
-          font={theme.font14}
+          css={{
+            width: "calc(50% - 5px)",
+            padding: "10px 0 9px",
+            borderRadius: "8px",
+            ...theme.font14,
+          }}
           onClick={() => modalProps.onChangeIsOpen?.(false)}
         >
           돌아가기
         </Button>
         <Button
           type="purple_inset"
-          width="calc(50% - 5px)"
-          padding="10px 0 9px"
-          radius={8}
-          font={theme.font14_bold}
+          css={{
+            width: "calc(50% - 5px)",
+            padding: "10px 0 9px",
+            borderRadius: "8px",
+            ...theme.font14_bold,
+          }}
           onClick={onClickOk}
           disabled={settlementStatusForMe !== "send-required"}
         >

diff --git a/src/components/ModalPopup/ModalChatSaveAccount.tsx b/src/components/ModalPopup/ModalChatSaveAccount.tsx
@@ -99,20 +99,24 @@ const ModalChatSaveAcount = ({
       >
         <Button
           type="gray"
-          width="calc(50% - 5px)"
-          padding="10px 0 9px"
-          radius={8}
-          font={theme.font14}
+          css={{
+            width: "calc(50% - 5px)",
+            padding: "10px 0 9px",
+            borderRadius: "8px",
+            ...theme.font14,
+          }}
           onClick={() => modalProps.onChangeIsOpen?.(false)}
         >
           돌아가기
         </Button>
         <Button
           type="purple_inset"
-          width="calc(50% - 5px)"
-          padding="10px 0 9px"
-          radius={8}
-          font={theme.font14_bold}
+          css={{
+            width: "calc(50% - 5px)",
+            padding: "10px 0 9px",
+            borderRadius: "8px",
+            ...theme.font14_bold,
+          }}
           onClick={onSubmit}
         >
           저장하기

diff --git a/src/components/ModalPopup/ModalChatSettlement.tsx b/src/components/ModalPopup/ModalChatSettlement.tsx
@@ -140,20 +140,24 @@ const ModalChatSettlement = ({
       <div css={styleButtons}>
         <Button
           type="gray"
-          width="calc(50% - 5px)"
-          padding="10px 0 9px"
-          radius={8}
-          font={theme.font14}
+          css={{
+            width: "calc(50% - 5px)",
+            padding: "10px 0 9px",
+            borderRadius: "8px",
+            ...theme.font14,
+          }}
           onClick={() => modalProps.onChangeIsOpen?.(false)}
         >
           돌아가기
         </Button>
         <Button
           type="purple_inset"
-          width="calc(50% - 5px)"
-          padding="10px 0 9px"
-          radius={8}
-          font={theme.font14_bold}
+          css={{
+            width: "calc(50% - 5px)",
+            padding: "10px 0 9px",
+            borderRadius: "8px",
+            ...theme.font14_bold,
+          }}
           onClick={onClickOk}
           disabled={!isValidAccount}
         >

diff --git a/src/components/ModalPopup/ModalMypageModify.tsx b/src/components/ModalPopup/ModalMypageModify.tsx
@@ -250,10 +250,12 @@ const ModalMypageModify = ({
       <div css={styleButton}>
         <Button
           type="gray"
-          width="calc(50% - 5px)"
-          padding="10px 0 9px"
-          radius={8}
-          font={theme.font14}
+          css={{
+            width: "calc(50% - 5px)",
+            padding: "10px 0 9px",
+            borderRadius: "8px",
+            ...theme.font14,
+          }}
           onClick={() => modalProps.onChangeIsOpen?.(false)}
         >
           {t("page_modify.cancel")}
@@ -264,10 +266,12 @@ const ModalMypageModify = ({
             !isEditable ||
             (nickname === loginInfo?.nickname && account === loginInfo?.account)
           }
-          width="calc(50% - 5px)"
-          padding="10px 0 9px"
-          radius={8}
-          font={theme.font14_bold}
+          css={{
+            width: "calc(50% - 5px)",
+            padding: "10px 0 9px",
+            borderRadius: "8px",
+            ...theme.font14_bold,
+          }}
           onClick={handleEditProfile}
         >
           {t("page_modify.modify")}