({
+ key: "modalState",
+ default: { isOpen: false, type: "post" },
+});
+
+export const useModalState = () => useRecoilState(modalState);
+export const useModalStateValue = () => useRecoilValue(modalState);
+export const useModalStateWrite = () => useSetRecoilState(modalState);
diff --git a/app/components/atoms/modals.atom.ts b/app/components/atoms/modals.atom.ts
index 01298de0..ed2f1445 100644
--- a/app/components/atoms/modals.atom.ts
+++ b/app/components/atoms/modals.atom.ts
@@ -1,19 +1,23 @@
+// modals.atom.ts
import {
atom,
- useRecoilValue,
useRecoilState,
+ useRecoilValue,
useSetRecoilState,
} from "recoil";
+import React from "react";
-interface Modal {
- isOpen: boolean;
- type: "post" | "put";
+interface ModalComponentProps {
+ Component: React.FC
;
+ props?: P;
+ id: string; // 각 모달에 고유 ID 추가
}
-const modalState = atom({
- key: "modalState",
- default: { isOpen: false, type : "post" },
+
+export const modalsState = atom({
+ key: "modalsState",
+ default: [],
});
-export const useModalState = () => useRecoilState(modalState);
-export const useModalStateValue = () => useRecoilValue(modalState);
-export const useModalStateWrite = () => useSetRecoilState(modalState);
+export const useModalState = () => useRecoilState(modalsState);
+export const useModalStateValue = () => useRecoilValue(modalsState);
+export const useModalStateWrite = () => useSetRecoilState(modalsState);
diff --git a/app/components/atoms/selectedHint.atom.ts b/app/components/atoms/selectedHint.atom.ts
new file mode 100644
index 00000000..422dfd29
--- /dev/null
+++ b/app/components/atoms/selectedHint.atom.ts
@@ -0,0 +1,37 @@
+import {
+ atom,
+ useRecoilValue,
+ useRecoilState,
+ useSetRecoilState,
+ useResetRecoilState,
+} from "recoil";
+
+export interface SelectedHintType {
+ id: number;
+ hintCode: string;
+ progress: number;
+ contents: string;
+ answer: string;
+ hintImageUrlList: string[];
+ answerImageUrlList: string[];
+}
+
+export const InitialSelectedHint: SelectedHintType = {
+ id: 0,
+ hintCode: "",
+ contents: "",
+ answer: "",
+ progress: 0,
+ hintImageUrlList: [],
+ answerImageUrlList: [],
+};
+
+const selectedHintState = atom({
+ key: "selectedHint",
+ default: InitialSelectedHint,
+});
+export const useSelectedHint = () => useRecoilState(selectedHintState);
+export const useSelectedHintValue = () => useRecoilValue(selectedHintState);
+export const useSelectedHintWrite = () => useSetRecoilState(selectedHintState);
+export const useSelectedHintReset = () =>
+ useResetRecoilState(selectedHintState);
diff --git a/app/components/atoms/selectedTheme.atom.ts b/app/components/atoms/selectedTheme.atom.ts
index efde1659..118ed5c2 100644
--- a/app/components/atoms/selectedTheme.atom.ts
+++ b/app/components/atoms/selectedTheme.atom.ts
@@ -3,6 +3,7 @@ import {
useRecoilValue,
useRecoilState,
useSetRecoilState,
+ useResetRecoilState,
} from "recoil";
interface SelectedTheme {
@@ -23,8 +24,9 @@ const selectedThemeState = atom({
key: "selectedTheme",
default: InitialSelectedTheme,
});
-
export const useSelectedTheme = () => useRecoilState(selectedThemeState);
export const useSelectedThemeValue = () => useRecoilValue(selectedThemeState);
export const useSelectedThemeWrite = () =>
useSetRecoilState(selectedThemeState);
+export const useSelectedThemeReset = () =>
+ useResetRecoilState(selectedThemeState);
diff --git a/app/components/atoms/toast.atom.ts b/app/components/atoms/toast.atom.ts
new file mode 100644
index 00000000..d850cb24
--- /dev/null
+++ b/app/components/atoms/toast.atom.ts
@@ -0,0 +1,20 @@
+import {
+ atom,
+ useRecoilValue,
+ useRecoilState,
+ useSetRecoilState,
+} from "recoil";
+
+interface ToastType {
+ isOpen: boolean;
+ title: string;
+ text: string;
+}
+const toast = atom({
+ key: "toast",
+ default: { isOpen: false, title: "", text: "" },
+});
+
+export const useToastInfo = () => useRecoilState(toast);
+export const useToastValue = () => useRecoilValue(toast);
+export const useToastWrite = () => useSetRecoilState(toast);
diff --git a/app/components/common/ActiveInput/ActiveInput.tsx b/app/components/common/ActiveInput/ActiveInput.tsx
index 8c32f8da..ce9504cf 100644
--- a/app/components/common/ActiveInput/ActiveInput.tsx
+++ b/app/components/common/ActiveInput/ActiveInput.tsx
@@ -1,15 +1,12 @@
import React, { useState } from "react";
import { UseFormRegisterReturn } from "react-hook-form";
+
import * as S from "./ActiveInput.styled";
export interface ActiveInputProps {
- // eslint-disable-next-line react/require-default-props
type?: string;
- // eslint-disable-next-line react/require-default-props
placeholder?: string | number;
- // eslint-disable-next-line react/require-default-props, react/no-unused-prop-types
multiline?: boolean;
- // eslint-disable-next-line react/require-default-props
register: UseFormRegisterReturn;
}
function ActiveInput(props: ActiveInputProps) {
diff --git a/app/components/common/ActiveInput/index.ts b/app/components/common/ActiveInput/index.ts
index 4961c7e5..cab3e533 100644
--- a/app/components/common/ActiveInput/index.ts
+++ b/app/components/common/ActiveInput/index.ts
@@ -1,2 +1 @@
-// eslint-disable-next-line import/prefer-default-export
export { default as ActiveInput } from "./ActiveInput";
diff --git a/app/components/common/DeleteDialog/DeleteDialog.tsx b/app/components/common/DeleteDialog/DeleteDialog.tsx
index bde6afdb..ed1f4acc 100644
--- a/app/components/common/DeleteDialog/DeleteDialog.tsx
+++ b/app/components/common/DeleteDialog/DeleteDialog.tsx
@@ -1,7 +1,9 @@
import { useRouter } from "next/navigation";
+
import { useDeleteTheme } from "@/mutations/deleteTheme";
import { useDeleteHint } from "@/mutations/deleteHint";
import { useCurrentTheme } from "@/components/atoms/currentTheme.atom";
+
import DeleteDialogView from "./DeleteDialogView";
type ContentType = "hintDelete" | "themeDelete";
diff --git a/app/components/common/DeleteDialog/DeleteDialogView.tsx b/app/components/common/DeleteDialog/DeleteDialogView.tsx
index 2410acb9..fd43ef52 100644
--- a/app/components/common/DeleteDialog/DeleteDialogView.tsx
+++ b/app/components/common/DeleteDialog/DeleteDialogView.tsx
@@ -11,7 +11,7 @@ import React from "react";
interface Props {
open: boolean;
handleDialogClose: () => void;
- content:any;
+ content: any;
}
const CANCEL = "취소";
@@ -19,7 +19,7 @@ const DELETE = "삭제하기";
function DeleteDialogView(props: Props) {
const { open, handleDialogClose, content } = props;
-
+
return (