From f7c46849c3fb04f7f1f493f7b3ef340f44fdb681 Mon Sep 17 00:00:00 2001
From: chacha <chacha@sparcs.org>
Date: Wed, 2 Oct 2024 15:32:51 +0900
Subject: [PATCH 1/5] feat: make new Button folder and combine Button and
 IconButton into Button

---
 packages/web/src/app/page.tsx                 | 16 +++++-
 .../{Forms => Button}/IconButton.tsx          |  2 +-
 .../components/{ => Button}/TextButton.tsx    |  0
 .../{Button.tsx => Button/index.tsx}          | 49 +++++++++++++++++--
 .../Modal/CancellableModalContent.tsx         |  2 +-
 .../components/Modal/ConfirmModalContent.tsx  |  2 +-
 .../components/Table/TableButtonCell.tsx      |  2 +-
 7 files changed, 65 insertions(+), 8 deletions(-)
 rename packages/web/src/common/components/{Forms => Button}/IconButton.tsx (96%)
 rename packages/web/src/common/components/{ => Button}/TextButton.tsx (100%)
 rename packages/web/src/common/components/{Button.tsx => Button/index.tsx} (56%)

diff --git a/packages/web/src/app/page.tsx b/packages/web/src/app/page.tsx
index 539821c..932fa1e 100644
--- a/packages/web/src/app/page.tsx
+++ b/packages/web/src/app/page.tsx
@@ -1,4 +1,18 @@
 "use client";
 
-const Home = () => <div>Welcome to SPARCS Students!</div>;
+import Typography from "../common/components/Typography";
+import Button from "../common/components/Button";
+
+const Home = () => (
+  <>
+    <Typography color="PINK.600" fs={32}>
+      Welcome to SPARCS Students!
+    </Typography>
+    <Button iconType="check" />
+    <Button iconType="check" buttonText="Check" />
+    <Button buttonText="Check" />
+    <Button>Children!</Button>
+    <Button />
+  </>
+);
 export default Home;
diff --git a/packages/web/src/common/components/Forms/IconButton.tsx b/packages/web/src/common/components/Button/IconButton.tsx
similarity index 96%
rename from packages/web/src/common/components/Forms/IconButton.tsx
rename to packages/web/src/common/components/Button/IconButton.tsx
index 22e7cbd..a8031db 100644
--- a/packages/web/src/common/components/Forms/IconButton.tsx
+++ b/packages/web/src/common/components/Button/IconButton.tsx
@@ -1,6 +1,6 @@
 import React, { HTMLAttributes } from "react";
 import styled from "styled-components";
-import Button from "../Button";
+import Button from ".";
 import Typography from "../Typography";
 import Icon from "../Icon";
 
diff --git a/packages/web/src/common/components/TextButton.tsx b/packages/web/src/common/components/Button/TextButton.tsx
similarity index 100%
rename from packages/web/src/common/components/TextButton.tsx
rename to packages/web/src/common/components/Button/TextButton.tsx
diff --git a/packages/web/src/common/components/Button.tsx b/packages/web/src/common/components/Button/index.tsx
similarity index 56%
rename from packages/web/src/common/components/Button.tsx
rename to packages/web/src/common/components/Button/index.tsx
index 869b0ac..a1667ac 100644
--- a/packages/web/src/common/components/Button.tsx
+++ b/packages/web/src/common/components/Button/index.tsx
@@ -2,10 +2,14 @@
 
 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 +55,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>
   );
 };
diff --git a/packages/web/src/common/components/Modal/CancellableModalContent.tsx b/packages/web/src/common/components/Modal/CancellableModalContent.tsx
index 0a665b3..5cc826b 100644
--- a/packages/web/src/common/components/Modal/CancellableModalContent.tsx
+++ b/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/Button/index";
 import React from "react";
 import styled from "styled-components";
 import Typography from "../Typography";
diff --git a/packages/web/src/common/components/Modal/ConfirmModalContent.tsx b/packages/web/src/common/components/Modal/ConfirmModalContent.tsx
index f68a5a9..a13cf5c 100644
--- a/packages/web/src/common/components/Modal/ConfirmModalContent.tsx
+++ b/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/Button/index";
 import React from "react";
 import styled from "styled-components";
 import Typography from "../Typography";
diff --git a/packages/web/src/common/components/Table/TableButtonCell.tsx b/packages/web/src/common/components/Table/TableButtonCell.tsx
index 1c93990..761db89 100644
--- a/packages/web/src/common/components/Table/TableButtonCell.tsx
+++ b/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 "../Button/TextButton";
 
 interface TableButtonCellProps {
   text: string[];

From 723dc69ff11568ac549d218ee4cc9e73bb9d949d Mon Sep 17 00:00:00 2001
From: chacha <chacha@sparcs.org>
Date: Sat, 5 Oct 2024 10:18:28 +0900
Subject: [PATCH 2/5] feat: add foldunfoldbutton

---
 packages/web/src/app/page.tsx                 | 16 +-------------
 .../{Button/index.tsx => Buttons/Button.tsx}  |  0
 .../components/Buttons/FoldUnfoldButton.tsx   | 21 +++++++++++++++++++
 .../{Button => Buttons}/IconButton.tsx        |  2 +-
 .../{Button => Buttons}/TextButton.tsx        |  0
 .../Modal/CancellableModalContent.tsx         |  2 +-
 .../components/Modal/ConfirmModalContent.tsx  |  2 +-
 .../common/components/Modal/ModalExample.tsx  |  2 +-
 .../components/NavTools/MobileNavMenu.tsx     |  2 +-
 .../components/Table/TableButtonCell.tsx      |  2 +-
 10 files changed, 28 insertions(+), 21 deletions(-)
 rename packages/web/src/common/components/{Button/index.tsx => Buttons/Button.tsx} (100%)
 create mode 100644 packages/web/src/common/components/Buttons/FoldUnfoldButton.tsx
 rename packages/web/src/common/components/{Button => Buttons}/IconButton.tsx (96%)
 rename packages/web/src/common/components/{Button => Buttons}/TextButton.tsx (100%)

diff --git a/packages/web/src/app/page.tsx b/packages/web/src/app/page.tsx
index 932fa1e..539821c 100644
--- a/packages/web/src/app/page.tsx
+++ b/packages/web/src/app/page.tsx
@@ -1,18 +1,4 @@
 "use client";
 
-import Typography from "../common/components/Typography";
-import Button from "../common/components/Button";
-
-const Home = () => (
-  <>
-    <Typography color="PINK.600" fs={32}>
-      Welcome to SPARCS Students!
-    </Typography>
-    <Button iconType="check" />
-    <Button iconType="check" buttonText="Check" />
-    <Button buttonText="Check" />
-    <Button>Children!</Button>
-    <Button />
-  </>
-);
+const Home = () => <div>Welcome to SPARCS Students!</div>;
 export default Home;
diff --git a/packages/web/src/common/components/Button/index.tsx b/packages/web/src/common/components/Buttons/Button.tsx
similarity index 100%
rename from packages/web/src/common/components/Button/index.tsx
rename to packages/web/src/common/components/Buttons/Button.tsx
diff --git a/packages/web/src/common/components/Buttons/FoldUnfoldButton.tsx b/packages/web/src/common/components/Buttons/FoldUnfoldButton.tsx
new file mode 100644
index 0000000..4055d5d
--- /dev/null
+++ b/packages/web/src/common/components/Buttons/FoldUnfoldButton.tsx
@@ -0,0 +1,21 @@
+import TextButton from "@sparcs-students/web/common/components/Buttons/TextButton";
+
+interface FoldUnfoldButtonProps {
+  folded: boolean;
+  setFolded: (isFold: boolean) => void;
+  disabled?: boolean;
+}
+
+const FoldUnfoldButton = ({
+  folded,
+  setFolded,
+  disabled = false,
+}: FoldUnfoldButtonProps) => (
+  <TextButton
+    disabled={disabled}
+    text={folded ? `펼치기` : `접기`}
+    onClick={() => setFolded(!folded)}
+  />
+);
+
+export default FoldUnfoldButton;
diff --git a/packages/web/src/common/components/Button/IconButton.tsx b/packages/web/src/common/components/Buttons/IconButton.tsx
similarity index 96%
rename from packages/web/src/common/components/Button/IconButton.tsx
rename to packages/web/src/common/components/Buttons/IconButton.tsx
index a8031db..d26e83b 100644
--- a/packages/web/src/common/components/Button/IconButton.tsx
+++ b/packages/web/src/common/components/Buttons/IconButton.tsx
@@ -1,6 +1,6 @@
 import React, { HTMLAttributes } from "react";
 import styled from "styled-components";
-import Button from ".";
+import Button from "./Button";
 import Typography from "../Typography";
 import Icon from "../Icon";
 
diff --git a/packages/web/src/common/components/Button/TextButton.tsx b/packages/web/src/common/components/Buttons/TextButton.tsx
similarity index 100%
rename from packages/web/src/common/components/Button/TextButton.tsx
rename to packages/web/src/common/components/Buttons/TextButton.tsx
diff --git a/packages/web/src/common/components/Modal/CancellableModalContent.tsx b/packages/web/src/common/components/Modal/CancellableModalContent.tsx
index 5cc826b..e7bec89 100644
--- a/packages/web/src/common/components/Modal/CancellableModalContent.tsx
+++ b/packages/web/src/common/components/Modal/CancellableModalContent.tsx
@@ -1,4 +1,4 @@
-import Button from "@sparcs-students/web/common/components/Button/index";
+import Button from "@sparcs-students/web/common/components/Buttons/Button";
 import React from "react";
 import styled from "styled-components";
 import Typography from "../Typography";
diff --git a/packages/web/src/common/components/Modal/ConfirmModalContent.tsx b/packages/web/src/common/components/Modal/ConfirmModalContent.tsx
index a13cf5c..53397f3 100644
--- a/packages/web/src/common/components/Modal/ConfirmModalContent.tsx
+++ b/packages/web/src/common/components/Modal/ConfirmModalContent.tsx
@@ -1,4 +1,4 @@
-import Button from "@sparcs-students/web/common/components/Button/index";
+import Button from "@sparcs-students/web/common/components/Buttons/Button";
 import React from "react";
 import styled from "styled-components";
 import Typography from "../Typography";
diff --git a/packages/web/src/common/components/Modal/ModalExample.tsx b/packages/web/src/common/components/Modal/ModalExample.tsx
index 4663459..35d4971 100644
--- a/packages/web/src/common/components/Modal/ModalExample.tsx
+++ b/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`
diff --git a/packages/web/src/common/components/NavTools/MobileNavMenu.tsx b/packages/web/src/common/components/NavTools/MobileNavMenu.tsx
index 84b2d2a..fb69282 100644
--- a/packages/web/src/common/components/NavTools/MobileNavMenu.tsx
+++ b/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";
 
diff --git a/packages/web/src/common/components/Table/TableButtonCell.tsx b/packages/web/src/common/components/Table/TableButtonCell.tsx
index 761db89..b334d1c 100644
--- a/packages/web/src/common/components/Table/TableButtonCell.tsx
+++ b/packages/web/src/common/components/Table/TableButtonCell.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import TextButton from "../Button/TextButton";
+import TextButton from "../Buttons/TextButton";
 
 interface TableButtonCellProps {
   text: string[];

From 6acba2035d5299b6a7fcb26dfedace7f62dff49e Mon Sep 17 00:00:00 2001
From: chacha <chacha@sparcs.org>
Date: Mon, 7 Oct 2024 14:41:46 +0900
Subject: [PATCH 3/5] feat: remove FoldUnfoldButton

---
 .../components/Buttons/FoldUnfoldButton.tsx   | 21 -------------------
 1 file changed, 21 deletions(-)
 delete mode 100644 packages/web/src/common/components/Buttons/FoldUnfoldButton.tsx

diff --git a/packages/web/src/common/components/Buttons/FoldUnfoldButton.tsx b/packages/web/src/common/components/Buttons/FoldUnfoldButton.tsx
deleted file mode 100644
index 4055d5d..0000000
--- a/packages/web/src/common/components/Buttons/FoldUnfoldButton.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import TextButton from "@sparcs-students/web/common/components/Buttons/TextButton";
-
-interface FoldUnfoldButtonProps {
-  folded: boolean;
-  setFolded: (isFold: boolean) => void;
-  disabled?: boolean;
-}
-
-const FoldUnfoldButton = ({
-  folded,
-  setFolded,
-  disabled = false,
-}: FoldUnfoldButtonProps) => (
-  <TextButton
-    disabled={disabled}
-    text={folded ? `펼치기` : `접기`}
-    onClick={() => setFolded(!folded)}
-  />
-);
-
-export default FoldUnfoldButton;

From 974eb8ff5b29bc6a62cce2f022194b787308f21d Mon Sep 17 00:00:00 2001
From: chacha <chacha@sparcs.org>
Date: Mon, 7 Oct 2024 14:47:19 +0900
Subject: [PATCH 4/5] feat: add explanation to Button

---
 packages/web/src/common/components/Buttons/Button.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/web/src/common/components/Buttons/Button.tsx b/packages/web/src/common/components/Buttons/Button.tsx
index a1667ac..7a59fb1 100644
--- a/packages/web/src/common/components/Buttons/Button.tsx
+++ b/packages/web/src/common/components/Buttons/Button.tsx
@@ -1,3 +1,12 @@
+/*
+사용법
+
+IconButton으로 쓰고자 하면, iconType prop 전달
+Button으로 쓰고자 하면, iconType prop 전달X
+Custom Children을 넣고자 하면, iconType, buttonText 전달X
+
+*/
+
 "use client";
 
 import React, { HTMLAttributes } from "react";

From b3378017fd149fc10b16e89e440bffcbb544ed44 Mon Sep 17 00:00:00 2001
From: chacha <chacha@sparcs.org>
Date: Mon, 7 Oct 2024 18:56:38 +0900
Subject: [PATCH 5/5] feat: remove IconButton

---
 .../common/components/Buttons/IconButton.tsx  | 37 -------------------
 1 file changed, 37 deletions(-)
 delete mode 100644 packages/web/src/common/components/Buttons/IconButton.tsx

diff --git a/packages/web/src/common/components/Buttons/IconButton.tsx b/packages/web/src/common/components/Buttons/IconButton.tsx
deleted file mode 100644
index bf6f5aa..0000000
--- a/packages/web/src/common/components/Buttons/IconButton.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React, { HTMLAttributes } from "react";
-import styled from "styled-components";
-import Button from "./Button";
-import Typography from "../Typography";
-import Icon from "../Icon";
-
-// TODO: 나중에 Buttons 폴더로 묶으면 어떨지
-export interface IconButtonProps extends HTMLAttributes<HTMLDivElement> {
-  type: "default" | "disabled" | "outlined";
-  buttonText: string;
-  iconType: string;
-}
-
-const ButtonInner = styled.div`
-  width: 100%;
-  height: 100%;
-  justify-content: center;
-  align-items: center;
-  gap: 4px;
-  display: inline-flex;
-`;
-
-const IconButton: React.FC<IconButtonProps> = ({
-  type = "default",
-  buttonText = "",
-  iconType = "",
-  ...props
-}) => (
-  <Button type={type} {...props}>
-    <ButtonInner>
-      <Icon type={iconType} size={16} color="white" />
-      <Typography>{buttonText}</Typography>
-    </ButtonInner>
-  </Button>
-);
-
-export default IconButton;