[김참솔] Sprint 10

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

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

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

@@ -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.tsx

@@ -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/color/color-name.ts

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

my-app/components/color/color.js → my-app/components/color/color.ts

@@ -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/input/search-input.jsx → my-app/components/input/search-input.tsx

@@ -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/portal/portal.jsx → my-app/components/portal/portal.tsx

@@ -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"));

my-app/components/todo/todo-detail-image-button.module.css

@@ -0,0 +1,25 @@
+.editButton {
+  right: 16px;
+  bottom: 16px;
+  width: 64px;
+  height: 64px;
+  border-radius: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.editButtonImg {
+  width: 24px;
+  height: 24px;
+}
+
+.editButton.add {
+  background-color: var(--color-state-200);
+}
+
+.editButton.edit {
+  border: 2px solid var(--color-state-900);
+  background-color: #0f172a80;
+}

my-app/components/todo/todo-detail-image-button.tsx

@@ -0,0 +1,49 @@
+import { ChangeEvent } from "react";
+import styles from "./todo-detail-image-button.module.css";
+
+interface Props {
+  className?: string;
+  buttonType: "add" | "edit";
+  onChange: (file: File | null, reset: () => void) => void;
+}
+
+const icon = {
+  add: "/icons/ic-plus-gray.svg",
+  edit: "/icons/ic-pencil.svg",
+};
+
+const typeClassName = {
+  add: styles.add,
+  edit: styles.edit,
+};
+
+export default function TodoDetailImageButton({
+  className,
+  buttonType,
+  onChange,
+}: Props) {
+  const classNames = `${styles.editButton} ${typeClassName[buttonType]} ${className}`;
+
+  const handleImageChange = (event: ChangeEvent<HTMLInputElement>) => {
+    onChange(event.target.files?.[0] ?? null, () => {
+      event.target.value = "";
+    });
+  };
+
+  return (
+    <label htmlFor="image-input" className={classNames}>
+      <img
+        className={styles.editButtonImg}
+        src={icon[buttonType]}
+        alt={buttonType}
+      />
+      <input
+        id="image-input"
+        type="file"
+        accept="image/*"
+        hidden
+        onChange={handleImageChange}
+      />
+    </label>
+  );
+}

my-app/components/todo/todo-detail-image-preview.module.css

@@ -0,0 +1,32 @@
+.preview {
+  border-radius: 24px;
+  overflow: hidden;
+  height: 100%;
+  position: relative;
+}
+
+.previewImageContainer {
+  width: 100%;
+  height: 100%;
+}
+
+.previewImage {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.previewEmptyIcon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 64px;
+  height: 64px;
+  transform: translate(-50%, -50%);
+}
+
+.button {
+  position: absolute;
+  right: 16px;
+  bottom: 16px;
+}

my-app/components/todo/todo-detail-image-preview.tsx

@@ -0,0 +1,72 @@
+import { useEffect, useMemo, useState } from "react";
+import TodoDetailImageButton from "./todo-detail-image-button";
+import styles from "./todo-detail-image-preview.module.css";
+
+export default function TodoDetailImagePreview({
+  imageUrl,
+  onChange,
+}: {
+  imageUrl?: string;
+  onChange: (file: File) => void;
+}) {
+  const [previewUrl, setPreviewUrl] = useState<string | undefined | null>(
+    imageUrl
+  );
+
+  const hasPreview = useMemo(() => {
+    return previewUrl !== "" && previewUrl != null;
+  }, [previewUrl]);
+
+  const handlePreviewChanged = (file: File | null, reset: () => void) => {
+    if (!file) return;
+
+    const maxSize = 5 * 1024 * 1024;
+    if (file.size > maxSize) {
+      alert("파일 크기는 5MB 이하여야 합니다.");
+      reset();
+      return;
+    }
+
+    if (previewUrl) {
+      URL.revokeObjectURL(previewUrl);
+    }
+
+    const newPreviewUrl = URL.createObjectURL(file);
+    setPreviewUrl(newPreviewUrl);
+    onChange(file);
+  };
+
+  useEffect(() => {
+    return () => {
+      if (previewUrl) {
+        URL.revokeObjectURL(previewUrl);
+      }
+    };
+  }, [previewUrl]);
+
+  return (
+    <div className={styles.preview}>
+      <div className={styles.previewImageContainer}>
+        <img
+          className={styles.previewImage}
+          src={
+            hasPreview ? previewUrl! : "/images/image-preview-background.svg"
+          }
+          alt="Preview image"
+        />
+        {hasPreview || (
+          <img
+            className={styles.previewEmptyIcon}
+            src="/icons/ic-image.svg"
+            alt="empty preview logo"
+          />
+        )}
+      </div>
+      <TodoDetailImageButton
+        className={styles.button}
+        buttonType={previewUrl ? "edit" : "add"}
+        onChange={handlePreviewChanged}
+      />
+    </div>
+  );
+}