+
- {isDefault ? (
-
- ) : (
-
- )}
+
+
+
+ {children}
+
);
};
diff --git a/src/components/ThumbnailEmpty.tsx b/src/components/ThumbnailEmpty.tsx
new file mode 100644
index 00000000..b8b55f75
--- /dev/null
+++ b/src/components/ThumbnailEmpty.tsx
@@ -0,0 +1,38 @@
+import Image from "next/image";
+import { ChangeEvent } from "react";
+import PlustIcon from "@/assets/icons/PlusIcon.svg";
+
+interface EmptyThumbnailProps {
+ onChange: (e: ChangeEvent
) => void;
+}
+
+const ThumbnailEmpty = ({ onChange }: EmptyThumbnailProps) => {
+ return (
+
+ );
+};
+
+export default ThumbnailEmpty;
diff --git a/src/components/ThumbnailImage.tsx b/src/components/ThumbnailImage.tsx
new file mode 100644
index 00000000..fb4a954e
--- /dev/null
+++ b/src/components/ThumbnailImage.tsx
@@ -0,0 +1,42 @@
+import Image from "next/image";
+import { ChangeEvent } from "react";
+
+interface ImageThumbnailProps {
+ onChange: (e: ChangeEvent) => void;
+ image: string;
+}
+const ThumbnailImage = ({ onChange, image }: ImageThumbnailProps) => {
+ return (
+
+ );
+};
+export default ThumbnailImage;
diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx
new file mode 100644
index 00000000..696564bc
--- /dev/null
+++ b/src/components/Toast/Toast.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { useToastStore } from "@/store/toastStore";
+import { useEffect } from "react";
+
+interface ToastType {
+ message: string;
+}
+
+const DEFAULT_DURATION = 500;
+const DEFAULT_DELAY = 3000;
+
+const Toast = ({ message }: ToastType) => {
+ const deleteToast = useToastStore((state) => state.deleteToast);
+
+ useEffect(() => {
+ const TIMER = setTimeout(() => {
+ deleteToast();
+ }, DEFAULT_DELAY + DEFAULT_DURATION);
+
+ return () => {
+ clearTimeout(TIMER);
+ };
+ }, [deleteToast]);
+ return (
+
+ {message}
+
+ );
+};
+
+export default Toast;
diff --git a/src/components/Toast/ToastContainer.tsx b/src/components/Toast/ToastContainer.tsx
new file mode 100644
index 00000000..51e851eb
--- /dev/null
+++ b/src/components/Toast/ToastContainer.tsx
@@ -0,0 +1,21 @@
+"use client";
+import Toast from "@/components/Toast/Toast";
+import { useToastStore } from "@/store/toastStore";
+import { createPortal } from "react-dom";
+
+const ToastContainer = () => {
+ const toast = useToastStore((state) => state.toast);
+
+ console.log(toast);
+
+ const portalTarget = document.body;
+
+ return createPortal(
+
+ {toast && }
+
,
+ portalTarget
+ );
+};
+
+export default ToastContainer;
diff --git a/src/features/todo/components/TodoAddForm.tsx b/src/features/todo/components/TodoAddForm.tsx
index 4e8d47dc..03c9ad1b 100644
--- a/src/features/todo/components/TodoAddForm.tsx
+++ b/src/features/todo/components/TodoAddForm.tsx
@@ -1,29 +1,28 @@
"use client";
-import { ChangeEvent, useActionState, useEffect, useState } from "react";
+import { ChangeEvent, FormEvent, useState } from "react";
-import { createTodoItemAction } from "@/app/actions";
import Button from "@/components/Button";
+import useCreateTodo from "@/hooks/useCreateTodo";
const TodoAddForm = () => {
- const [state, formAction, isPending] = useActionState(
- createTodoItemAction,
- null
- );
const [todoText, setTodoText] = useState("");
+
+ const { mutate, isPending } = useCreateTodo();
const isValid = todoText.trim().length === 0 || isPending;
- const handleChange = (e: ChangeEvent) =>
- setTodoText(e.target.value);
+ const handleSubmit = (e: FormEvent) => {
+ e.preventDefault();
+ mutate(todoText);
+ setTodoText("");
+ };
- useEffect(() => {
- if (state) {
- setTodoText("");
- }
- }, [state]);
+ const handleChange = (e: ChangeEvent) => {
+ setTodoText(e.target.value);
+ };
return (
-