diff --git a/app/components/CustomModal/CustomModal.tsx b/app/components/CustomModal/CustomModal.tsx
deleted file mode 100644
index 01880d97..00000000
--- a/app/components/CustomModal/CustomModal.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from "react";
-
-import CustomModalView from "./CustomModalView";
-import { CustomTypeModalProps } from "./CustomModal.type";
-
-function CustomModal(props: CustomTypeModalProps) {
- const {
- open = false,
- handleClose = () => {
- return;
- },
- id = "",
- content = {} as CustomTypeModalProps["content"],
- } = props;
- return (
-
- );
-}
-
-export default CustomModal;
diff --git a/app/components/CustomModal/CustomModal.type.ts b/app/components/CustomModal/CustomModal.type.ts
deleted file mode 100644
index 16d09e24..00000000
--- a/app/components/CustomModal/CustomModal.type.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export interface CustomTypeModalProps {
- id: string;
- content: {
- title: string;
- describe: string;
- btnName: string;
- handleModal: () => void;
- };
- open: boolean;
- handleClose: () => void;
-}
diff --git a/app/components/CustomModal/CustomModalView.styled.ts b/app/components/CustomModal/CustomModalView.styled.ts
deleted file mode 100644
index ed6b3d19..00000000
--- a/app/components/CustomModal/CustomModalView.styled.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { styled } from "styled-components";
-import { Grid } from "@mui/material";
-
-export const Container = styled.div`
- display: flex;
- padding: 30px 0;
- justify-content: center;
- flex-direction: column;
- background-color: #fff;
-`;
-
-export const Title = styled.div`
- font-size: 1.75rem;
- font-weight: 400;
- margin: 32px auto;
-`;
-
-export const Description = styled.div`
- font-size: 1rem;
- font-weight: 400;
- margin: 32px auto;
-`;
-
-export const ContentsWrapper = styled.div`
- display: flex;
- justify-content: center;
-`;
-
-export const GridItem = styled(Grid)<{ margin?: string }>`
- margin-bottom: 30px;
- ${({ margin }) => `margin: ${margin};`}
-`;
diff --git a/app/components/CustomModal/CustomModalView.tsx b/app/components/CustomModal/CustomModalView.tsx
deleted file mode 100644
index ae4d5698..00000000
--- a/app/components/CustomModal/CustomModalView.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from "react";
-import { Button, Modal } from "@mui/material";
-
-import * as S from "./CustomModalView.styled";
-import { CustomTypeModalProps } from "./CustomModal.type";
-
-function CustomModalView(props: CustomTypeModalProps) {
- const { open, content, handleClose } = props;
-
- return (
-
-
- {content.title}
- {content.describe}
-
-
-
-
-
-
-
-
- );
-}
-
-export default CustomModalView;
diff --git a/app/components/DeleteHintDialog/DeleteHintDialog.tsx b/app/components/DeleteHintDialog/DeleteHintDialog.tsx
deleted file mode 100644
index 1527d240..00000000
--- a/app/components/DeleteHintDialog/DeleteHintDialog.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { useDeleteHint } from "@/mutations/deleteHint";
-
-import { useIsOpenDeleteDialogState } from "../atoms/hints.atom";
-
-import DeleteHintDialogView from "./DeleteHintDialogView";
-
-function DeleteHintDialog() {
- const [isOpenDeleteDialogState, setIsOpenDeleteDialogState] =
- useIsOpenDeleteDialogState();
- const { isOpen, id } = isOpenDeleteDialogState;
- const { mutateAsync: deleteHint } = useDeleteHint();
-
- const handleClose = () => {
- setIsOpenDeleteDialogState({ isOpen: false, id: 0 });
- };
-
- const handleDelete = () => {
- deleteHint({ id });
- handleClose();
- };
-
- const DeleteHintDialogProps = {
- open: isOpen,
- handleClose,
- handleDelete,
- };
-
- return
;
-}
-
-export default DeleteHintDialog;
diff --git a/app/components/DeleteHintDialog/DeleteHintDialogView.tsx b/app/components/DeleteHintDialog/DeleteHintDialogView.tsx
deleted file mode 100644
index e1f59c88..00000000
--- a/app/components/DeleteHintDialog/DeleteHintDialogView.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import {
- Button,
- Dialog,
- DialogActions,
- DialogContent,
- DialogContentText,
- DialogTitle,
-} from "@mui/material";
-import React from "react";
-
-interface Props {
- open: boolean;
- handleClose: () => void;
- handleDelete: () => void;
-}
-
-const CANCEL = "취소";
-const DELETE = "삭제하기";
-
-function DeleteHintDialogView(props: Props) {
- const { open, handleClose, handleDelete } = props;
- return (
-
- );
-}
-
-export default DeleteHintDialogView;
diff --git a/app/components/DeleteHintDialog/index.ts b/app/components/DeleteHintDialog/index.ts
deleted file mode 100644
index c4a8f0a2..00000000
--- a/app/components/DeleteHintDialog/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as DeleteHintDialog } from "./DeleteHintDialog";
-export { default as DeleteHintDialogView } from "./DeleteHintDialogView";
diff --git a/app/components/DeleteThemeDialog/DeleteThemeDialog.tsx b/app/components/DeleteThemeDialog/DeleteThemeDialog.tsx
deleted file mode 100644
index c41fe947..00000000
--- a/app/components/DeleteThemeDialog/DeleteThemeDialog.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { useDeleteTheme } from "@/mutations/deleteTheme";
-
-import DeleteThemeDialogView from "./DeleteThemeDialogView";
-
-interface Props {
- open: boolean;
- handleSnackOpen: () => void;
- handleClose: () => void;
- id: number;
-}
-
-function DeleteThemeDialog(props: Props) {
- const { open, handleSnackOpen, handleClose, id } = props;
- const { mutateAsync: deleteTheme } = useDeleteTheme();
-
- const handleDelete = () => {
- deleteTheme({ id });
- handleSnackOpen();
- handleClose();
- };
-
- const DeleteThemeDialogProps = {
- open,
- handleClose,
- handleDelete,
- };
-
- return
;
-}
-
-export default DeleteThemeDialog;
diff --git a/app/components/DeleteThemeDialog/DeleteThemeDialogView.tsx b/app/components/DeleteThemeDialog/DeleteThemeDialogView.tsx
deleted file mode 100644
index cb418c6f..00000000
--- a/app/components/DeleteThemeDialog/DeleteThemeDialogView.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import {
- Button,
- Dialog,
- DialogActions,
- DialogContent,
- DialogContentText,
- DialogTitle,
-} from "@mui/material";
-import React from "react";
-
-interface Props {
- open: boolean;
- handleClose: () => void;
- handleDelete: () => void;
-}
-
-const CANCEL = "취소";
-const DELETE = "삭제하기";
-
-function DeleteThemeDialogView(props: Props) {
- const { open, handleClose, handleDelete } = props;
- return (
-
- );
-}
-
-export default DeleteThemeDialogView;
diff --git a/app/components/DeleteThemeDialog/index.ts b/app/components/DeleteThemeDialog/index.ts
deleted file mode 100644
index ccc029e4..00000000
--- a/app/components/DeleteThemeDialog/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as DeleteThemeDialog } from "./DeleteThemeDialog";
-export { default as DeleteThemeDialogView } from "./DeleteThemeDialogView";
diff --git a/app/components/HintItem/HintItem.tsx b/app/components/HintItem/HintItem.tsx
deleted file mode 100644
index f58603be..00000000
--- a/app/components/HintItem/HintItem.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from "react";
-
-import HintItemView from "./HintItemView";
-
-type Props = {
- id: number;
- hintCode: string;
- contents: string;
- answer: string;
- progress: number;
- onClick: () => void;
-};
-
-export type HintData = {
- progress: number;
- hintCode: string;
- contents: string;
- answer: string;
-};
-
-function HintItem(props: Props) {
- const { id, hintCode, contents, answer, progress, onClick } = props;
-
- const hintData = {
- progress,
- hintCode,
- contents,
- answer,
- };
-
- const HintManageListItemProps = {
- id,
- hintData,
- onClick,
- };
-
- return
;
-}
-
-export default HintItem;
diff --git a/app/components/HintItem/HintItemView.styled.ts b/app/components/HintItem/HintItemView.styled.ts
deleted file mode 100644
index 0bdeaaf3..00000000
--- a/app/components/HintItem/HintItemView.styled.ts
+++ /dev/null
@@ -1,105 +0,0 @@
-import { Stack } from "@mui/material";
-import { styled } from "styled-components";
-
-export const SummaryStack = styled(Stack)`
- width: 100%;
- align-items: center;
-`;
-
-export const CodeProgressWrapper = styled.div`
- display: flex;
- align-items: center;
- width: 360px;
- height: 30px;
-`;
-
-export const IconText = styled.div`
- display: flex;
- width: 168px;
- justify-content: baseline;
- align-items: center;
- color: #6750a4;
-
- svg {
- margin-right: 15px;
- fill: #6750a4;
- }
-`;
-
-export const SummaryText = styled.div`
- display: flex;
- width: 100%;
- max-width: 600px;
- align-items: center;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-`;
-
-export const DetailIconText = styled.div`
- display: flex;
- flex: 30px auto;
- width: 100%;
- margin: 15px 0;
-
- font-size: 14px;
- font-weight: 400;
- line-height: 24px;
-
- svg {
- display: block;
- margin-right: 25px;
- fill: #aea9b1;
- }
-
- & + & {
- margin-top: 30px;
- }
-`;
-
-export const ButtonsStack = styled(Stack)`
- justify-content: end;
- align-items: center;
-`;
-
-export const ItemWrapper = styled.div`
- display: flex;
-
- width: 100%;
- min-height: 48px;
- gap: 8px;
-
- font-size: ${({ theme }) => theme.fontSize.sm};
- font-weight: ${({ theme }) => theme.fontWeight.medium};
- color: ${({ theme }) => theme.color.white70};
- line-height: 16.71px;
-
- border-bottom: 1px solid ${({ theme }) => theme.color.white20};
-
- &:hover {
- cursor: pointer;
- background-color: ${({ theme }) => theme.color.white10};
- }
-
- .numberBox {
- display: flex;
- align-items: center;
- min-width: 96px;
- color: ${({ theme }) => theme.color.white};
- }
-
- .textBox {
- display: flex;
- flex: 1;
- align-items: center;
- /* width: 448px; */
- padding: 12px 0;
- white-space: nowrap;
- overflow: hidden;
-
- span {
- overflow: hidden;
- text-overflow: ellipsis;
- }
- }
-`;
diff --git a/app/components/HintItem/HintItemView.tsx b/app/components/HintItem/HintItemView.tsx
deleted file mode 100644
index 01dac6c0..00000000
--- a/app/components/HintItem/HintItemView.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from "react";
-
-import * as S from "./HintItemView.styled";
-import { HintData } from "./HintItem";
-
-type Props = {
- id: number;
- hintData: HintData;
- onClick: () => void;
-};
-
-function HintItemView(props: Props) {
- const { hintData, id, onClick } = props;
-
- return (
-
- {hintData.hintCode}
- {hintData.progress}%
-
- {hintData.contents}
-
-
- {hintData.answer}
-
-
- );
-}
-
-export default HintItemView;
diff --git a/app/components/HintItem/index.ts b/app/components/HintItem/index.ts
deleted file mode 100644
index 105e828e..00000000
--- a/app/components/HintItem/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as HintItem } from "./HintItem";
-export { default as HintItemView } from "./HintItemView";
diff --git a/app/components/HintList/HintList.styled.ts b/app/components/HintList/HintList.styled.ts
deleted file mode 100644
index 129f5c65..00000000
--- a/app/components/HintList/HintList.styled.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-import { Button } from "@mui/material";
-import { css, keyframes, styled } from "styled-components";
-
-export const HintListWrapper = styled.div`
- margin-top: 60px !important;
-`;
-
-export const Header = styled.div`
- display: flex;
- font-size: ${(props) => props.theme.fontSize.xs};
- font-weight: ${(props) => props.theme.fontWeight.medium};
- color: #ffffff60;
- height: 34px;
- gap: 8px;
-
- .smallHeader {
- min-width: 96px;
- }
-
- .largeHeader {
- /* width: calc(((100% - (96px * 2)) / 2) - 8px); */
- /* width: 448px; */
- flex: 1;
- }
-`;
-
-export const Empty = styled.button`
- display: flex;
- justify-content: center;
- align-items: center;
- width: 100%;
- height: 230px;
- color: ${(props) => props.theme.color.white};
- font-size: ${(props) => props.theme.fontSize.sm};
- background-color: #ffffff10;
- border: 0;
- cursor: pointer;
-
- img {
- margin-right: 8px;
- }
-`;
-
-const riseUpAnimation = keyframes`
- from {
- bottom: -100px;
- }
- to {
- bottom: 40px;
- }
-`;
-
-const downAnimation = keyframes`
-
- from {
- bottom: 40px;
- }
- to {
- bottom: -100px;
- }
-`;
-
-export const FloatButton = styled(Button)<{ active?: boolean }>`
- position: fixed !important;
- color: #000 !important;
- background-color: #fff !important;
- font-weight: 600 !important;
- width: 183px;
- height: 40px;
- bottom: -100px;
- left: calc((100% - 360px) / 2 + 360px);
- transform: translateX(-50%);
- font-weight: 600;
- width: 215px;
-
- ${(props) =>
- props.active
- ? css`
- animation: ${riseUpAnimation} 300ms forwards 300ms ease-out;
- bottom: -100px;
- `
- : css`
- animation: ${downAnimation} 300ms forwards 300ms ease-out;
- bottom: 0px;
- `}
-`;
diff --git a/app/components/HintList/HintList.tsx b/app/components/HintList/HintList.tsx
deleted file mode 100644
index 31f7e9ea..00000000
--- a/app/components/HintList/HintList.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-import React, { useEffect, useMemo, useState, useCallback } from "react";
-import Image from "next/image";
-import { ListItemIcon, ListItemText } from "@mui/material";
-import AddIcon from "@mui/icons-material/Add";
-
-import { useGetHintList } from "@/queries/getHintList";
-
-import { HintItem } from "../HintItem";
-import HintManager from "../HintManager/HintManager";
-import { DeleteHintDialog } from "../DeleteHintDialog";
-import { useSelectedThemeValue } from "../atoms/selectedTheme.atom";
-import { useActiveHintState } from "../atoms/activeHint.atom";
-import Dialog from "../common/Dialog/Dialog";
-import Loader from "../Loader/Loader";
-
-import * as S from "./HintList.styled";
-
-function HintList() {
- const [isMakeEnabled, setIsMakeEnabled] = useState
(false);
- const [isModifyEnableds, setIsModifyEnableds] = useState([]);
- const { id: themeId } = useSelectedThemeValue();
- const { data: hints = [], isLoading = false } = useGetHintList({ themeId });
- const hintsLength = hints.length;
- const [activeHint, setActiveHint] = useActiveHintState();
- const [dialogOpen, setDialogOpen] = useState(false);
-
- useEffect(() => {
- setIsModifyEnableds([]);
- setIsMakeEnabled(false);
- }, [themeId]);
-
- const getOpenedModify = (id: number) =>
- !!isModifyEnableds.find((modifyEnables) => modifyEnables === id);
-
- const closeModify = (id: number) => {
- const enableds = isModifyEnableds.filter((prevId) => prevId !== id);
- setActiveHint({ isOpen: false, type: "put" });
- setIsModifyEnableds(enableds);
- };
-
- const handleCreateHint = useCallback(() => {
- if (activeHint.isOpen) {
- setDialogOpen(true);
- } else {
- setIsMakeEnabled(true);
- }
- }, [activeHint]);
-
- const handleModify = (id: number) => {
- if (getOpenedModify(id)) {
- setActiveHint({ isOpen: false, type: "put" });
- closeModify(id);
- } else {
- setIsModifyEnableds((prev) => [...prev, id]);
- setActiveHint({ isOpen: true, type: "put" });
- }
- };
-
- const $AddHintButton = useMemo(() => {
- if (hintsLength > 0 || isMakeEnabled) {
- return null;
- }
-
- return (
- setIsMakeEnabled(true)}>
-
- 새로운 힌트 추가하기
-
- );
- }, [hintsLength, isMakeEnabled]);
-
- const $AddHintFloatingButton = useMemo(
- () => (
- 0 && !isMakeEnabled}
- >
-
-
-
- 새로운 힌트 추가하기
-
- ),
- [handleCreateHint, hintsLength, isMakeEnabled]
- );
-
- if (isLoading) {
- return ;
- }
-
- return (
-
-
- 힌트코드
- 진행률
- 힌트 내용
- 정답
-
- {$AddHintButton}
- {$AddHintFloatingButton}
- setIsMakeEnabled(false)}
- type="make"
- />
- {[...hints]
- .reverse()
- .map(({ id, hintCode, contents, answer, progress }) => (
-
- handleModify(id)}
- />
- closeModify(id)}
- type="modify"
- hintData={{ hintCode, contents, answer, progress }}
- />
-
- ))}
-
-
- );
-}
-
-export default HintList;
diff --git a/app/components/HintManager/HintManager.tsx b/app/components/HintManager/HintManager.tsx
deleted file mode 100644
index c78745f8..00000000
--- a/app/components/HintManager/HintManager.tsx
+++ /dev/null
@@ -1,325 +0,0 @@
-import _ from "lodash";
-import React, { useEffect, useRef, useState } from "react";
-import { SubmitHandler, useForm } from "react-hook-form";
-
-import { usePutHint } from "@/mutations/putHint";
-import { usePostHint } from "@/mutations/postHint";
-
-import { useSelectedThemeValue } from "../atoms/selectedTheme.atom";
-import {
- useIsActiveHintItemState,
- useIsOpenDeleteDialogStateWrite,
-} from "../atoms/hints.atom";
-import Dialog from "../common/Dialog/Dialog";
-
-import HintManagerView from "./HintManagerView";
-
-const MAKE = "make";
-
-type Props = {
- active: boolean;
- close: () => void;
- type: "make" | "modify";
- id?: number;
- hintData?: FormValues;
- // dialogOpen: () => void;
-};
-
-interface FormValues {
- progress: number;
- hintCode: string;
- contents: string;
- answer: string;
-}
-
-function HintManager(props: Props) {
- const { id, active, close, type, hintData } = props;
- const [open, setOpen] = useState(false);
-
- const [submitDisable, setSubmitDisable] = useState(false);
- const {
- register,
- handleSubmit,
- reset,
- setValue,
- watch,
- formState: { errors },
- } = useForm();
-
- const { mutateAsync: postHint } = usePostHint();
- const { mutateAsync: putHint } = usePutHint();
- const { id: themeId } = useSelectedThemeValue();
- const formRef = useRef(null);
-
- const setIsOpenDeleteDialogState = useIsOpenDeleteDialogStateWrite();
-
- const [errorMsg, setErrorMsg] = useState("");
- const [isActiveHintItemState, setIsActiveHintItemState] =
- useIsActiveHintItemState();
-
- useEffect(() => {
- if (!hintData) return;
- const { progress, hintCode, contents, answer } = hintData;
-
- const previousValues: FormValues = { hintCode, contents, answer, progress };
- const names = Object.keys(previousValues) as (keyof FormValues)[];
-
- names.forEach((name) => {
- const value = previousValues[name];
- if (value) {
- setValue(name, value);
- }
- });
- }, [hintData, setValue]);
-
- useEffect(() => {
- if (!hintData) return;
- const { progress, hintCode, contents, answer } = hintData;
-
- const subscription = watch((value) => {
- const {
- progress: inputProgress = "",
- hintCode: inputHintCode = "",
- contents: inputContents = "",
- answer: inputAnswer = "",
- } = value;
- if (
- progress !== inputProgress ||
- hintCode !== inputHintCode ||
- contents !== inputContents ||
- answer !== inputAnswer
- ) {
- // setSubmitDisable(false);
- } else {
- // setSubmitDisable(true);
- }
- });
-
- return () => subscription.unsubscribe();
- }, [hintData, watch]);
-
- useEffect(() => {
- if (!open) {
- setErrorMsg("");
- }
- }, [open, reset]);
-
- const formValue = watch();
- useEffect(() => {
- if (
- !formValue.progress ||
- !(formValue.hintCode.length === 4) ||
- !formValue.contents.trim() ||
- !formValue.answer.trim()
- ) {
- setSubmitDisable(true);
- } else {
- setSubmitDisable(false);
- }
- }, [formValue]);
-
- const openDeleteDialog = () => {
- if (!id) return;
- setIsOpenDeleteDialogState({ isOpen: true, id });
- };
-
- const key = `${type}-${id}`;
-
- const onSubmit: SubmitHandler = _.debounce((data: any) => {
- const { progress, hintCode, contents, answer } = data;
-
- if (!(progress && hintCode && contents && answer)) {
- // TODO: add error message
-
- console.error("please check code");
- return;
- }
-
- if (type === MAKE) {
- postHint({
- progress: Number(progress),
- hintCode,
- contents,
- answer,
- themeId,
- });
- } else {
- putHint({
- progress: Number(progress),
- hintCode,
- contents,
- answer,
- id: Number(id),
- });
- }
- reset();
- close();
- }, 300);
-
- const isCurrentHintActive = isActiveHintItemState === id;
-
- const activateForm = (event: React.MouseEvent) => {
- event.stopPropagation();
- if (!id) return;
-
- setIsActiveHintItemState(id);
- };
-
- const stopEvent = (event: React.MouseEvent) => {
- event.stopPropagation();
- };
-
- const cancelInput = (event: React.MouseEvent) => {
- event.stopPropagation();
-
- if (
- type !== MAKE &&
- hintData &&
- hintData.progress === formValue.progress &&
- hintData.hintCode === formValue.hintCode &&
- hintData.contents === formValue.contents &&
- hintData.answer === formValue.answer
- ) {
- close();
- } else {
- setOpen(true);
- }
- };
-
- const deactivateForm = (event: MouseEvent) => {
- const isOutsideForm =
- formRef.current && !formRef.current.contains(event.target as Node);
-
- if (isOutsideForm && isCurrentHintActive) {
- setIsActiveHintItemState(0);
- }
- };
-
- useEffect(() => {
- document.addEventListener("click", deactivateForm);
-
- return () => {
- document.removeEventListener("click", deactivateForm);
- };
- }, []);
-
- const formProps = {
- active,
- key,
- component: "form",
- noValidate: true,
- autoComplete: "off",
- onSubmit: handleSubmit(onSubmit),
- onClick: activateForm,
- ref: formRef,
- };
-
- const progressInputProps = {
- placeholder: hintData?.progress || "진행률",
- type: "number",
- helperText: errors?.progress && errors?.progress.message,
- error: Boolean(errors?.progress),
- onClick: activateForm,
- ...register("progress", {
- pattern: {
- value: /^(100|[1-9][0-9]?|0)$/,
- message: "1부터 100까지의 정수만 입력 가능합니다.",
- },
- }),
- onBlur: (e: React.FocusEvent) => {
- if (!/^(100|[1-9][0-9]?|0)$/.test(e.target.value)) {
- setErrorMsg("1부터 100까지의 정수만 입력 가능합니다.");
- } else {
- setErrorMsg("");
- }
- },
- endAdornment: <>%>,
- };
-
- const hintCodeInputProps = {
- placeholder: hintData?.hintCode || "힌트코드",
- helperText: errors?.hintCode && errors?.hintCode.message,
- type: "number",
- onClick: activateForm,
-
- ...register("hintCode", {
- pattern: {
- value: /^\d{4}$/,
- message: "4자리 숫자만 입력 가능합니다.",
- },
- onBlur: (e: React.FocusEvent) => {
- if (!/^\d{4}$/.test(e.target.value)) {
- setErrorMsg("힌트 코드는 4자리 숫자만 입력 가능합니다.");
- } else {
- setErrorMsg("");
- }
- },
- }),
- };
-
- const contentsInputProps = {
- placeholder: hintData?.contents || "힌트내용",
- multiline: true,
- onClick: activateForm,
- rows: 5,
- ...register("contents"),
- };
-
- const answerInputProps = {
- placeholder: hintData?.answer || "정답",
- multiline: true,
- onClick: activateForm,
- rows: 5,
- ...register("answer"),
- };
-
- const deleteButtonProps = {
- variant: "text",
- onClick: (event: React.MouseEvent) => {
- event.stopPropagation();
- if (type === MAKE) {
- close();
- } else {
- openDeleteDialog();
- }
- },
- };
-
- const makeHintButtonProps = {
- type: "submit",
- variant: "contained",
- disabled: submitDisable,
- onClick: stopEvent,
- };
-
- const wrapperProps = {
- onClick: cancelInput,
- };
-
- const makeHintProps = {
- answerInputProps,
- contentsInputProps,
- progressInputProps,
- hintCodeInputProps,
- formProps,
- deleteButtonProps,
- makeHintButtonProps,
- isCurrentHintActive,
- wrapperProps,
- errorMsg,
- };
-
- return (
- <>
-
-