[Feat/Admin/#100] Admin 페이지 문제 페이지 관련 Issue Fix

apps/admin/src/components/common/Inputs/AnswerInput.tsx

@@ -1,20 +1,21 @@
 import { Input } from '@components';
 import { ProblemAnswerType } from '@types';
-import { forwardRef } from 'react';
+import { forwardRef, InputHTMLAttributes } from 'react';
 
 const AnswerTypeList = ['MULTIPLE_CHOICE', 'SHORT_ANSWER'];
 const AnswerTypeName = {
   MULTIPLE_CHOICE: '객',
   SHORT_ANSWER: '주',
 };
 
-interface AnswerTypeSectionProps {
+interface AnswerTypeSectionProps extends InputHTMLAttributes<HTMLInputElement> {
   selectedAnswerType: ProblemAnswerType | undefined;
 }
 
-interface AnswerInputSectionProps {
+interface AnswerInputSectionProps extends InputHTMLAttributes<HTMLInputElement> {
   selectedAnswerType: ProblemAnswerType | undefined;
   selectedAnswer: number | undefined;
+  isError: boolean;
 }
 
 const AnswerInput = ({ children }: { children: React.ReactNode }) => {
@@ -27,10 +28,17 @@ const AnswerTypeSection = forwardRef<HTMLInputElement, AnswerTypeSectionProps>(
       <div className='flex gap-200'>
         {AnswerTypeList.map((answerType) => (
           <label key={answerType}>
-            <input type='radio' className='hidden' ref={ref} value={answerType} {...props} />
+            <input
+              type='radio'
+              className='hidden'
+              ref={ref}
+              value={answerType}
+              checked={answerType === selectedAnswerType}
+              {...props}
+            />
             <div
-              className={`rounded-100 flex h-[5.6rem] w-[5.6rem] cursor-pointer items-center justify-center ${answerType === selectedAnswerType ? 'bg-midgray200 text-white' : 'bg-lightgray300 text-lightgray500'} `}>
-              <span className='font-medium-24'>
+              className={`rounded-200 flex h-[5.6rem] w-[5.6rem] cursor-pointer items-center justify-center ${answerType === selectedAnswerType ? 'bg-midgray200 text-white' : 'bg-lightgray300 text-lightgray500'} `}>
+              <span className='font-medium-18'>
                 {AnswerTypeName[answerType as ProblemAnswerType]}
               </span>
             </div>
@@ -42,21 +50,30 @@ const AnswerTypeSection = forwardRef<HTMLInputElement, AnswerTypeSectionProps>(
 );
 
 const AnswerInputSection = forwardRef<HTMLInputElement, AnswerInputSectionProps>(
-  ({ selectedAnswerType, selectedAnswer, ...props }, ref) => {
+  ({ selectedAnswerType, selectedAnswer, isError, ...props }, ref) => {
     return (
       <>
-        {selectedAnswerType === 'SHORT_ANSWER' && <Input ref={ref} {...props} />}
+        {selectedAnswerType === 'SHORT_ANSWER' && (
+          <Input ref={ref} {...props} className={`${isError ? 'border-red' : ''}`} type='number' />
+        )}
         {selectedAnswerType === 'MULTIPLE_CHOICE' && (
-          <div className='flex items-center justify-between gap-400'>
+          <div className='flex items-center justify-between gap-200'>
             {Array.from({ length: 5 }, (_, i) => i + 1).map((num) => (
               <label key={num}>
-                <input type='radio' className='hidden' value={num} ref={ref} {...props} />
+                <input
+                  type='radio'
+                  className='hidden'
+                  value={num}
+                  ref={ref}
+                  checked={Number(selectedAnswer) === num}
+                  {...props}
+                />
                 <div
                   className={`flex h-[5.6rem] w-[5.6rem] cursor-pointer items-center justify-center rounded-full ${
                     Number(selectedAnswer) === num
                       ? 'bg-darkgray100 text-white'
                       : 'border-lightgray500 border bg-white text-black'
-                  }`}>
+                  } ${isError ? 'border-red' : ''}`}>
                   <span className='font-bold-18'>{num}</span>
                 </div>
               </label>

apps/admin/src/components/common/Inputs/Input.tsx

@@ -1,12 +1,12 @@
 import { InputHTMLAttributes, forwardRef } from 'react';
 
 const Input = forwardRef<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>>(
-  ({ ...props }, ref) => {
+  ({ className, ...rest }, ref) => {
     return (
       <input
         ref={ref}
-        className={`placeholder:text-lightgray500 disabled:text-lightgray500 font-bold-18 border-lightgray500 rounded-400 h-[5.2rem] w-full border bg-white px-400 text-black ${props.className}`}
-        {...props}
+        {...rest}
+        className={`placeholder:text-lightgray500 disabled:text-lightgray500 font-bold-18 border-lightgray500 rounded-400 h-[5.2rem] w-full border bg-white px-400 text-black ${className ?? ''}`}
       />
     );
   }

apps/admin/src/components/common/Modals/EditCategoryModal.tsx

@@ -0,0 +1,37 @@
+import { Button, SearchInput } from '@components';
+import { useForm } from 'react-hook-form';
+
+interface Props {
+  onClose: () => void;
+  onSubmit: (data: { name: string }) => void;
+  defaultName?: string;
+}
+
+const EditCategoryModal = ({ onClose, onSubmit, defaultName }: Props) => {
+  const { register, handleSubmit } = useForm<{ name: string }>({
+    defaultValues: { name: defaultName ?? '' },
+  });
+  return (
+    <div className='w-4xl px-1600 py-1200'>
+      <h2 className='font-bold-24 text-black'>대분류 제목 수정</h2>
+      <form className='mt-16 flex flex-col gap-800' onSubmit={handleSubmit(onSubmit)}>
+        <SearchInput
+          sizeType='full'
+          label='제목'
+          placeholder='입력해주세요'
+          {...register('name', { required: true })}
+        />
+        <div className='mt-[5.6rem] flex justify-end gap-400'>
+          <Button type='button' variant='light' onClick={onClose}>
+            취소
+          </Button>
+          <Button type='submit' variant='dark'>
+            수정
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default EditCategoryModal;

apps/admin/src/components/common/Modals/ProblemSearchModal.tsx

@@ -4,7 +4,7 @@ import { useModal } from '@hooks';
 import { components } from '@schema';
 import { IcDown } from '@svg';
 import { GetProblemsSearchParams } from '@types';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import PulseLoader from 'react-spinners/PulseLoader';
 
@@ -20,7 +20,35 @@ const ProblemSearchModal = ({ onClickCard }: ProblemSearchModalProps) => {
   const [searchQuery, setSearchQuery] = useState<GetProblemsSearchParams>({});
   const [selectedTagList, setSelectedTagList] = useState<number[]>([]);
 
-  const { register, handleSubmit, reset } = useForm<GetProblemsSearchParams>();
+  const { register, handleSubmit, reset, watch } = useForm<GetProblemsSearchParams>();
+
+  const watchedCustomId = watch('customId');
+  const watchedTitle = watch('title');
+
+  useEffect(() => {
+    const debounceTimer = setTimeout(() => {
+      const trimmedCustomId = (watchedCustomId ?? '').toString().trim();
+      const trimmedTitle = (watchedTitle ?? '').toString().trim();
+
+      setSearchQuery((prev) => {
+        const nextQuery: GetProblemsSearchParams = {
+          ...prev,
+          customId: trimmedCustomId || undefined,
+          title: trimmedTitle || undefined,
+        };
+
+        const cleaned = Object.fromEntries(
+          Object.entries(nextQuery).filter(([, value]) =>
+            Array.isArray(value) ? value.length > 0 : Boolean(value)
+          )
+        ) as GetProblemsSearchParams;
+
+        return cleaned;
+      });
+    }, 300);
+
+    return () => clearTimeout(debounceTimer);
+  }, [watchedCustomId, watchedTitle]);
 
   const { data: problemList, isLoading } = getProblemsSearch(searchQuery);
   const { data: tagsData } = getConcept();
@@ -63,24 +91,24 @@ const ProblemSearchModal = ({ onClickCard }: ProblemSearchModalProps) => {
   return (
     <>
       <div className='h-[90dvh] w-[90dvw] px-1600 py-1200'>
-        <h2 className='font-bold-24 text-black'>문항 검색</h2>
+        <h2 className='font-bold-24 text-black'>문제 검색</h2>
         <form
           className='mt-800 flex items-end justify-between'
           onSubmit={handleSubmit(handleClickSearch)}>
           <div className='flex gap-600'>
             <SearchInput
-              label='문항 ID'
+              label='문제 ID'
               placeholder='입력해주세요.'
               {...register('customId', { required: false })}
             />
             <SearchInput
-              label='문항 타이틀'
+              label='문제 타이틀'
               sizeType='long'
               placeholder='입력해주세요.'
               {...register('title', { required: false })}
             />
             <div className='flex flex-col gap-300'>
-              <span className='font-medium-18 text-black'>문항 개념 태그</span>
+              <span className='font-medium-18 text-black'>문제 개념 태그</span>
               <div
                 className='border-lightgray500 rounded-400 flex h-[5.6rem] w-[42.4rem] cursor-pointer items-center justify-between border bg-white px-400 py-200'
                 onClick={() => {
@@ -130,9 +158,9 @@ const ProblemSearchModal = ({ onClickCard }: ProblemSearchModalProps) => {
                   onClick={() => onClickCard(problem)}>
                   <ProblemCard>
                     <ProblemCard.TextSection>
-                      <ProblemCard.Info label='문항 ID' content={customId} />
-                      <ProblemCard.Info label='문항 타이틀' content={title} />
-                      <ProblemCard.Info label='문항 메모' content={memo} />
+                      <ProblemCard.Info label='문제 ID' content={customId} />
+                      <ProblemCard.Info label='문제 타이틀' content={title} />
+                      <ProblemCard.Info label='문제 메모' content={memo} />
                     </ProblemCard.TextSection>
 
                     <ProblemCard.CardImage src={mainProblemImageUrl ?? ''} height={'34.4rem'} />

apps/admin/src/components/common/Modals/TagSelectModal.tsx

@@ -41,7 +41,7 @@ const TagSelectModal = ({ onClose, selectedTagList, handleChangeTagList }: TagSe
 
   return (
     <div className='flex w-[70dvw] flex-col gap-800 px-1600 py-1200'>
-      <h2 className='font-bold-24 text-black'>문항 개념 태그 검색</h2>
+      <h2 className='font-bold-24 text-black'>문제 개념 태그 검색</h2>
       <div className='flex w-full items-center justify-between'>
         <div className='w-[42.4rem]'>
           <Input {...register('searchInput')} placeholder='개념 태그를 입력해주세요.' />

apps/admin/src/components/common/Modals/index.ts

@@ -3,21 +3,33 @@ import BaseModalTemplate from './templates/BaseModalTemplate';
 import ErrorModalTemplate from './templates/ErrorModalTemplate';
 import OneButtonModalTemplate from './templates/OneButtonModalTemplate';
 import TwoButtonModalTemplate from './templates/TwoButtonModalTemplate';
-import TagSelectModal from './TagSelectModal';
-import ProblemSearchModal from './ProblemSearchModal';
 import CreateNoticeModal from './CreateNoticeModal';
+import CreatePracticeTestModal from './CreatePracticeTestModal';
+import EditCategoryModal from './EditCategoryModal';
+import EditConceptModal from './EditConceptModal';
+import EditTeacherModal from './EditTeacherModal';
 import NoticeListModal from './NoticeListModal';
+import ProblemSearchModal from './ProblemSearchModal';
 import ProgressModal from './ProgressModal';
+import SelectStudentModal from './SelectStudentModal';
+import StudentSearchModal from './StudentSearchModal';
+import TagSelectModal from './TagSelectModal';
 
 export {
   Modal,
   BaseModalTemplate,
   ErrorModalTemplate,
   OneButtonModalTemplate,
   TwoButtonModalTemplate,
-  TagSelectModal,
-  ProblemSearchModal,
   CreateNoticeModal,
+  CreatePracticeTestModal,
+  EditCategoryModal,
+  EditConceptModal,
+  EditTeacherModal,
   NoticeListModal,
+  ProblemSearchModal,
   ProgressModal,
+  SelectStudentModal,
+  StudentSearchModal,
+  TagSelectModal,
 };

apps/admin/src/components/common/ProblemCard.tsx

@@ -58,7 +58,7 @@ const CardEmptyView = ({ onClick }: { onClick: () => void }) => {
       className='flex h-full w-full cursor-pointer items-center justify-center'
       onClick={onClick}
       onPointerDown={(e) => e.stopPropagation()}>
-      <span className='font-bold-24 text-lightgray500 text-center whitespace-pre-line'>{`여기를 클릭해\n문항을 추가해주세요.`}</span>
+      <span className='font-bold-24 text-lightgray500 text-center whitespace-pre-line'>{`여기를 클릭해\n문제을 추가해주세요.`}</span>
     </div>
   );
 };

apps/admin/src/components/common/ProblemPreview.tsx

@@ -24,8 +24,8 @@ const ProblemPreview = ({ title, memo, imgSrc }: ProblemPreviewProps) => {
   return (
     <div className='flex w-[48rem] min-w-[28rem] flex-col gap-400'>
       <div className='flex flex-col gap-200'>
-        <LabelAndText label='문항 타이틀' text={title} />
-        <LabelAndText label='문항 메모' text={memo} />
+        <LabelAndText label='문제 타이틀' text={title} />
+        <LabelAndText label='문제 메모' text={memo} />
       </div>
       <div>
         <img

apps/admin/src/components/problem/LevelSelect.tsx

@@ -7,7 +7,7 @@ interface LevelSelectProps {
 
 const LevelSelect = ({ selectedLevel, onChange }: LevelSelectProps) => {
   return (
-    <div className='flex items-center gap-400'>
+    <div className='flex items-center gap-200'>
       {Array.from({ length: 10 }, (_, i) => (i + 1) as LevelType).map((num) => (
         <label key={num} className='flex cursor-pointer items-center'>
           <input
@@ -19,7 +19,7 @@ const LevelSelect = ({ selectedLevel, onChange }: LevelSelectProps) => {
           />
           <div
             className={`rounded-200 flex h-[5.6rem] w-[5.6rem] cursor-pointer items-center justify-center ${selectedLevel === num ? 'bg-midgray200 text-white' : 'bg-lightgray300 text-lightgray500'}`}>
-            <span className='font-medium-24'>{num}</span>
+            <span className='font-medium-18'>{num}</span>
           </div>
         </label>
       ))}