Merge pull request #13 from academic-relations/11-refactor-and-organi…

…ze-various-button-components

Refactor and organize Button Components

packages/web/src/common/components/Button.tsx → packages/web/src/common/components/Buttons/Button.tsx

@@ -1,11 +1,24 @@
+/*
+사용법
+
+IconButton으로 쓰고자 하면, iconType prop 전달
+Button으로 쓰고자 하면, iconType prop 전달X
+Custom Children을 넣고자 하면, iconType, buttonText 전달X
+
+*/
+
 "use client";
 
 import React, { HTMLAttributes } from "react";
 import styled from "styled-components";
+import Icon from "@sparcs-students/web/common/components/Icon";
+import Typography from "@sparcs-students/web/common/components/Typography";
 
 type ButtonProps = {
   type?: keyof typeof ButtonTypeInner;
-  children: React.ReactNode;
+  children?: React.ReactNode;
+  iconType?: string;
+  buttonText?: string;
 } & HTMLAttributes<HTMLDivElement>;
 
 const ButtonInner = styled.div`
@@ -51,14 +64,53 @@ const ButtonTypeInner = {
   disabled: ButtonDisabledInner,
 };
 
-const Button = ({ type = "default", children, ...divProps }: ButtonProps) => {
+const ButtonWithTextInner = styled.div`
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  display: inline-flex;
+`;
+
+const ButtonWithIconAndText = (iconType: string, buttonText: string) => (
+  <ButtonWithTextInner>
+    <Icon type={iconType} size={16} color="white" />
+    <Typography>{buttonText}</Typography>
+  </ButtonWithTextInner>
+);
+
+const ButtonWithText = (buttonText: string) => (
+  <ButtonWithTextInner>
+    <Typography>{buttonText}</Typography>
+  </ButtonWithTextInner>
+);
+
+const ButtonWithChildren = (children: React.ReactNode) => (
+  <ButtonWithTextInner>{children}</ButtonWithTextInner>
+);
+
+const Button = ({
+  type = "default",
+  children = undefined,
+  iconType = "",
+  buttonText = "",
+  ...divProps
+}: ButtonProps) => {
   const ButtonChosenInner = ButtonTypeInner[type];
+
+  const ButtonContent = () => {
+    if (iconType !== "") return ButtonWithIconAndText(iconType, buttonText);
+    if (buttonText !== "") return ButtonWithText(buttonText);
+    return ButtonWithChildren(children);
+  };
+
   return (
     <ButtonChosenInner
       {...divProps}
       onClick={type === "disabled" ? undefined : divProps.onClick}
     >
-      {children}
+      <ButtonContent />
     </ButtonChosenInner>
   );
 };

packages/web/src/common/components/Modal/CancellableModalContent.tsx

@@ -1,4 +1,4 @@
-import Button from "@sparcs-students/web/common/components/Button";
+import Button from "@sparcs-students/web/common/components/Buttons/Button";
 import React from "react";
 import styled from "styled-components";
 import Typography from "../Typography";

packages/web/src/common/components/Modal/ConfirmModalContent.tsx

@@ -1,4 +1,4 @@
-import Button from "@sparcs-students/web/common/components/Button";
+import Button from "@sparcs-students/web/common/components/Buttons/Button";
 import React from "react";
 import styled from "styled-components";
 import Typography from "../Typography";

packages/web/src/common/components/Modal/ModalExample.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import styled from "styled-components";
 
-import Button from "../Button";
+import Button from "../Buttons/Button";
 import Modal from ".";
 
 const ModalBody = styled.div`

packages/web/src/common/components/NavTools/MobileNavMenu.tsx

@@ -6,7 +6,7 @@ import styled from "styled-components";
 import paths, { Paths } from "@sparcs-students/web/constants/paths";
 import { usePathname } from "next/navigation";
 
-import Button from "../Button";
+import Button from "../Buttons/Button";
 import Icon from "../Icon";
 import MobileNavItem from "./MobileNavItem";
 

packages/web/src/common/components/Table/TableButtonCell.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import TextButton from "../TextButton";
+import TextButton from "../Buttons/TextButton";
 
 interface TableButtonCellProps {
   text: string[];