Merge pull request Next-Room#83 from Next-Room/feat/hint-qa-finish

Feat/hint qa finish

Author: lgrin-byte

app/(shared)/(ThemeTextField)/Container.tsx

@@ -23,7 +23,7 @@ export default function ThemeTextField({
     inputRef,
     handleInputChange,
     handleInputBlur,
-  } = useTextField({ id, content, checkErrorText });
+  } = useTextField({ id, content, inputType, checkErrorText });
 
   return (
     <div tabIndex={isFocus ? -1 : tabIndex} onFocus={() => setIsFocus(true)}>
@@ -54,7 +54,7 @@ export default function ThemeTextField({
             className={classNames("theme-textfield-input", {
               error: errorText,
             })}
-            type={inputType}
+            type="text"
             value={inputValue}
             placeholder={inputPlaceholder}
             onChange={handleInputChange}

app/(shared)/(ThemeTextField)/TextFieldType.ts

@@ -6,7 +6,7 @@ export type ThemeInfoTextFieldType = {
   title?: string;
   content: string;
   infoText?: string;
-  inputType?: string;
+  inputType?: "text" | "number";
   inputPlaceholder?: string;
   checkErrorText?: ValidationFunction<unknown>;
 };

app/(shared)/(ThemeTextField)/useTextField.tsx

@@ -8,6 +8,7 @@ import { ThemeInfoTextFieldType } from "./TextFieldType";
 const useTextField = ({
   id,
   content,
+  inputType,
   checkErrorText,
 }: ThemeInfoTextFieldType) => {
   const [inputValue, setInputValue] = useState<string>(content || "");
@@ -39,9 +40,11 @@ const useTextField = ({
 
   const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
     const cur = e.target.value;
-    if (cur.length > 1 && cur.length === cur.split("0").length - 1) {
-      setInputValue("0");
-      return;
+    if (inputType === "number") {
+      if (cur.length > 1 && cur.length === cur.split("0").length - 1) {
+        setInputValue("0");
+        return;
+      }
     }
     const error = checkErrorText ? checkErrorText(cur) : "";
     if (error) {

app/admin-new/(components)/CreateTheme/createTheme.ts

@@ -56,7 +56,7 @@ export const timeTextFieldProps: ThemeInfoTextFieldType = {
   title: "탈출 제한 시간(분)",
   content: "",
   infoText: "",
-  inputType: "text",
+  inputType: "number",
   inputPlaceholder: "분 단위 숫자로 입력해 주세요",
   checkErrorText: timeValidations,
 };
@@ -67,7 +67,7 @@ export const hintCountTextFieldProps: ThemeInfoTextFieldType = {
   title: "사용 가능한 힌트 수",
   content: "",
   infoText: "",
-  inputType: "text",
+  inputType: "number",
   inputPlaceholder: "숫자로 입력해 주세요",
   checkErrorText: hintValidations,
 };

app/admin-new/(components)/Sidebar.tsx

@@ -14,6 +14,7 @@ import {
   getSelectedThemeId,
   getStatus,
   removeAccessToken,
+  removeThemeId,
 } from "@/utils/localStorage";
 import { useSelectedThemeReset } from "@/components/atoms/selectedTheme.atom";
 import { useIsLoggedInWrite } from "@/components/atoms/account.atom";
@@ -64,7 +65,13 @@ export default function Sidebar(props: Props) {
   };
   const handleSelectTheme = (theme: Theme) => {
     if (drawer.isOpen && !drawer.isSameHint) {
-      open(HintDialog, { type: "put", fn: () => handleClickSelected(theme) });
+      open(HintDialog, {
+        type: "put",
+        fn: () => {
+          handleClickSelected(theme);
+          setDrawer({ ...drawer, isOpen: false });
+        },
+      });
     } else {
       setDrawer({ ...drawer, isOpen: false });
       handleClickSelected(theme);
@@ -75,6 +82,7 @@ export default function Sidebar(props: Props) {
     if (drawer.isOpen && !drawer.isSameHint) {
       open(HintDialog, { type: "put", fn: navigateToNewTheme });
     } else {
+      removeThemeId();
       setDrawer({ ...drawer, isOpen: false });
       navigateToNewTheme();
     }

app/admin-new/(components)/ThemeDrawer/Container.tsx

@@ -14,11 +14,7 @@ import {
 import { DrawerType } from "./types/themeDrawerTypes";
 import useEditHint from "./hooks/useEditHint";
 
-const ThemeDrawer = ({
-  onCloseDrawer,
-  hintType,
-  handleHintCreate,
-}: DrawerType) => {
+const ThemeDrawer = ({ hintType, handleHintCreate }: DrawerType) => {
   const [selectedHint] = useSelectedHint();
   const {
     handleSubmit,
@@ -31,7 +27,7 @@ const ThemeDrawer = ({
     isImcomplete,
     deleteHintBtn,
     handleOpenHintModal,
-  } = useEditHint({ onCloseDrawer, hintType, handleHintCreate });
+  } = useEditHint({ hintType, handleHintCreate });
 
   return (
     <form
@@ -116,4 +112,4 @@ const ThemeDrawer = ({
     </form>
   );
 };
-export default ThemeDrawer;
+export default ThemeDrawer;

app/admin-new/(components)/ThemeDrawer/consts/themeDrawerProps.ts

@@ -22,7 +22,7 @@ export const rateTextFieldProps: ThemeInfoTextFieldType = {
   title: "문제 진행률(%)",
   content: "",
   infoText: "",
-  inputType: "text",
+  inputType: "number",
   inputPlaceholder: "",
   checkErrorText: progressValidations,
 };

app/admin-new/(components)/ThemeDrawer/helpers/textFieldHelpers.ts

@@ -8,6 +8,9 @@ export const codeValidations = (value: unknown) => {
   ) {
     return "숫자로 입력해 주세요.";
   }
+  if (strValue.length > 4) {
+    return "네자리만 사용할 수 있습니다.";
+  }
   if (numValue > 9999) {
     return "네자리만 사용할 수 있습니다.";
   }

app/admin-new/(components)/ThemeDrawer/hooks/useEditHint.ts

@@ -5,6 +5,7 @@ import {
   InitialSelectedHint,
   SelectedHintType,
   useSelectedHint,
+  useSelectedHintReset,
 } from "@/components/atoms/selectedHint.atom";
 import { useSelectedThemeValue } from "@/components/atoms/selectedTheme.atom";
 import { useCreateHint } from "@/components/atoms/createHint.atom";
@@ -17,11 +18,7 @@ import { useDrawerState } from "@/components/atoms/drawer.atom";
 
 import { DrawerType } from "../types/themeDrawerTypes";
 
-const useEditHint = ({
-  onCloseDrawer,
-  hintType,
-  handleHintCreate,
-}: DrawerType) => {
+const useEditHint = ({ hintType, handleHintCreate }: DrawerType) => {
   const { id: themeId } = useSelectedThemeValue();
 
   const selectedTheme = useSelectedThemeValue();
@@ -32,6 +29,7 @@ const useEditHint = ({
   const [answerImages, setAnswerImages] = useState<File[]>([]);
 
   const [isDisabled, setIsDisabled] = useState<boolean>(true);
+  const resetSelectedHint = useSelectedHintReset();
 
   const drawerRef = useRef<HTMLFormElement>(null);
 
@@ -53,6 +51,16 @@ const useEditHint = ({
     createHint.answer
   );
 
+  const onCloseDrawer = () => {
+    const element = document.querySelector(".theme-info-modal.delete");
+    if (element) {
+      setDrawer({ ...drawer, isOpen: true });
+    } else {
+      setDrawer({ ...drawer, isOpen: false });
+      resetSelectedHint();
+    }
+  };
+
   const isSameHint =
     String(createHint.hintCode) === String(selectedHint.hintCode) &&
     Number(createHint.progress) === Number(selectedHint.progress) &&
@@ -66,23 +74,11 @@ const useEditHint = ({
     Boolean(!answerImages.length);
 
   useEffect(() => {
-    const isSameHint =
-      String(createHint.hintCode) === String(selectedHint.hintCode) &&
-      Number(createHint.progress) === Number(selectedHint.progress) &&
-      String(createHint.contents) === String(selectedHint.contents) &&
-      String(createHint.answer) === String(selectedHint.answer) &&
-      // 서버에 올라간 사진 삭제 여부를 비교
-      createHint.hintImageUrlList === selectedHint.hintImageUrlList &&
-      createHint.answerImageUrlList === selectedHint.answerImageUrlList &&
-      // 로컬 업로드 사진 하나라도 있으면 변경된 것
-      Boolean(!hintImages.length) &&
-      Boolean(!answerImages.length);
-
     setDrawer((prevDrawer) => ({
       ...prevDrawer,
       isSameHint,
     }));
-  }, [createHint, selectedHint]);
+  }, [isSameHint, createHint, selectedHint]);
 
   useEffect(() => {
     if (drawer.hintType === "Add") {
@@ -112,10 +108,8 @@ const useEditHint = ({
       ...prev,
       contents: selectedHint.contents,
       answer: selectedHint.answer,
-      answerImageUrlList: selectedHint.answerImageUrlList,
-      hintImageUrlList: selectedHint.hintImageUrlList,
     }));
-  }, [hintType, selectedHint]);
+  }, [hintType, selectedHint, setCreateHint]);
 
   const { handleProcess } = useHintUpload();
   const handleSubmit = async (e: FormEvent) => {

app/admin-new/(components)/ThemeDrawer/types/themeDrawerTypes.ts

@@ -1,10 +1,6 @@
-export interface OnCloseDrawerType {
-  onCloseDrawer: () => void;
-}
-
 type HintType = {
   hintType: string;
   handleHintCreate: (type: string) => void;
 };
 
-export type DrawerType = OnCloseDrawerType & HintType;
+export type DrawerType = HintType;