Merge pull request #134 from cskime/Next-김참솔-sprint10

[김참솔] Sprint 10

Author: kiJu2

my-app/components/button/button-type.js

@@ -0,0 +1,5 @@
+export enum ButtonType {
+  add = "add",
+  edit = "edit",
+  delete = "delete",
+}

my-app/components/button/button-type.ts

@@ -8,7 +8,6 @@
   font-size: 16px;
   font-weight: 700;
   line-height: 100%;
-  cursor: pointer;
   display: flex;
   align-items: center;
   gap: 4px;
@@ -22,17 +21,20 @@
   width: 100%;
   height: 100%;
 }
+.button:not(:disabled) {
+  cursor: pointer;
+}
 
-.button.add:active {
+.button.add:not(:disabled) {
   color: white;
   background-color: var(--color-violet-600);
 }
-.button.add:active img {
+.button.add:not(:disabled) img {
   filter: invert(100%) sepia(14%) saturate(1801%) hue-rotate(190deg)
     brightness(116%) contrast(101%);
 }
 
-.button.edit:active {
+.button.edit:not(:disabled) {
   background-color: var(--color-lime-300);
 }
 

my-app/components/button/button.jsx

@@ -0,0 +1,37 @@
+import { ButtonHTMLAttributes, ReactNode } from "react";
+import { ButtonType } from "./button-type";
+import styles from "./button.module.css";
+
+const className: {
+  [key in keyof typeof ButtonType]: string;
+} = {
+  [ButtonType.add]: `${styles.button} ${styles.add}`,
+  [ButtonType.edit]: `${styles.button} ${styles.edit}`,
+  [ButtonType.delete]: `${styles.button} ${styles.delete}`,
+};
+
+const leadingIcon: {
+  [key in keyof typeof ButtonType]: string;
+} = {
+  [ButtonType.add]: "/icons/ic-plus.svg",
+  [ButtonType.edit]: "/icons/ic-check.svg",
+  [ButtonType.delete]: "/icons/ic-xmark-white.svg",
+};
+
+interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children: ReactNode;
+  buttonType: keyof typeof ButtonType;
+}
+
+function Button({ children, buttonType = ButtonType.add, ...props }: Props) {
+  return (
+    <button className={className[buttonType]} {...props}>
+      <div className={styles.trailingIcon}>
+        <img src={leadingIcon[buttonType]} alt={buttonType} />
+      </div>
+      {children}
+    </button>
+  );
+}
+
+export default Button;

my-app/components/button/button.module.css

@@ -0,0 +1,7 @@
+export enum ColorName {
+  state = "state",
+  violet = "violet",
+  rose = "rose",
+  lime = "lime",
+  amber = "amber",
+}

my-app/components/button/button.tsx

@@ -1,9 +1,13 @@
-function colorVariable(name, shade) {
+import { ColorName } from "./color-name";
+
+function colorVariable(name: string, shade: number) {
   return `var(--color-${name}-${Math.max(100, Math.min(900, shade))})`;
 }
 
-const Colors = {
-  state: {
+const Colors: {
+  [key in keyof typeof ColorName]: { [key: number]: string };
+} = {
+  [ColorName.state]: {
     100: colorVariable("state", 100),
     200: colorVariable("state", 200),
     300: colorVariable("state", 300),
@@ -12,17 +16,17 @@ const Colors = {
     800: colorVariable("state", 800),
     900: colorVariable("state", 900),
   },
-  violet: {
+  [ColorName.violet]: {
     100: colorVariable("violet", 100),
     600: colorVariable("violet", 600),
   },
-  rose: {
+  [ColorName.rose]: {
     500: colorVariable("rose", 500),
   },
-  lime: {
+  [ColorName.lime]: {
     300: colorVariable("lime", 300),
   },
-  amber: {
+  [ColorName.amber]: {
     800: colorVariable("amber", 800),
   },
 };

my-app/components/color/color-name.ts

@@ -1,6 +1,9 @@
+import { InputHTMLAttributes } from "react";
 import styles from "./search-input.module.css";
 
-function SearchInput({ ...props }) {
+interface Props extends InputHTMLAttributes<HTMLInputElement> {}
+
+function SearchInput({ ...props }: Props) {
   return (
     <div className={styles.searchInput}>
       <input type="text" {...props} />

my-app/components/color/color.js renamed to my-app/components/color/color.ts

@@ -1,8 +1,12 @@
-import { useEffect, useState } from "react";
+import { ReactNode, useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 
-function Portal({ children }) {
-  const [container, setContainer] = useState(null);
+interface Props {
+  children: ReactNode;
+}
+
+function Portal({ children }: Props) {
+  const [container, setContainer] = useState<HTMLElement | null>(null);
 
   useEffect(() => {
     // setContainer(document.getElementById("portal"));