diff --git a/apps/admin/src/components/common/Inputs/AnswerInput.tsx b/apps/admin/src/components/common/Inputs/AnswerInput.tsx
index a616d4d4..0d21eae0 100644
--- a/apps/admin/src/components/common/Inputs/AnswerInput.tsx
+++ b/apps/admin/src/components/common/Inputs/AnswerInput.tsx
@@ -1,6 +1,6 @@
 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 = {
@@ -8,13 +8,14 @@ const AnswerTypeName = {
   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>
diff --git a/apps/admin/src/components/common/Inputs/Input.tsx b/apps/admin/src/components/common/Inputs/Input.tsx
index 569bdc71..5a43ead4 100644
--- a/apps/admin/src/components/common/Inputs/Input.tsx
+++ b/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 ?? ''}`}
       />
     );
   }
diff --git a/apps/admin/src/components/common/Modals/EditCategoryModal.tsx b/apps/admin/src/components/common/Modals/EditCategoryModal.tsx
new file mode 100644
index 00000000..33c86338
--- /dev/null
+++ b/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;
diff --git a/apps/admin/src/components/common/Modals/ProblemSearchModal.tsx b/apps/admin/src/components/common/Modals/ProblemSearchModal.tsx
index 4ed7a9b9..9da976ea 100644
--- a/apps/admin/src/components/common/Modals/ProblemSearchModal.tsx
+++ b/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'} />
diff --git a/apps/admin/src/components/common/Modals/TagSelectModal.tsx b/apps/admin/src/components/common/Modals/TagSelectModal.tsx
index 520eeb0b..a9cee22a 100644
--- a/apps/admin/src/components/common/Modals/TagSelectModal.tsx
+++ b/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='개념 태그를 입력해주세요.' />
diff --git a/apps/admin/src/components/common/Modals/index.ts b/apps/admin/src/components/common/Modals/index.ts
index f4cf8f40..02dd02dc 100644
--- a/apps/admin/src/components/common/Modals/index.ts
+++ b/apps/admin/src/components/common/Modals/index.ts
@@ -3,11 +3,17 @@ 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,
@@ -15,9 +21,15 @@ export {
   ErrorModalTemplate,
   OneButtonModalTemplate,
   TwoButtonModalTemplate,
-  TagSelectModal,
-  ProblemSearchModal,
   CreateNoticeModal,
+  CreatePracticeTestModal,
+  EditCategoryModal,
+  EditConceptModal,
+  EditTeacherModal,
   NoticeListModal,
+  ProblemSearchModal,
   ProgressModal,
+  SelectStudentModal,
+  StudentSearchModal,
+  TagSelectModal,
 };
diff --git a/apps/admin/src/components/common/ProblemCard.tsx b/apps/admin/src/components/common/ProblemCard.tsx
index 1d15f0d4..87371a73 100644
--- a/apps/admin/src/components/common/ProblemCard.tsx
+++ b/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>
   );
 };
diff --git a/apps/admin/src/components/common/ProblemPreview.tsx b/apps/admin/src/components/common/ProblemPreview.tsx
index 69658ac4..62c88b0a 100644
--- a/apps/admin/src/components/common/ProblemPreview.tsx
+++ b/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
diff --git a/apps/admin/src/components/problem/LevelSelect.tsx b/apps/admin/src/components/problem/LevelSelect.tsx
index c47d0b68..3fd1e67c 100644
--- a/apps/admin/src/components/problem/LevelSelect.tsx
+++ b/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>
       ))}
diff --git a/apps/admin/src/components/problem/MainProblemSection.tsx b/apps/admin/src/components/problem/MainProblemSection.tsx
index accb73aa..6b21403a 100644
--- a/apps/admin/src/components/problem/MainProblemSection.tsx
+++ b/apps/admin/src/components/problem/MainProblemSection.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, ChangeEvent } from 'react';
 import { AnswerInput, ComponentWithLabel, Input, SectionCard, Tag, Button } from '@components';
 import {
   Controller,
@@ -6,6 +6,7 @@ import {
   UseFormRegister,
   FieldErrors,
   UseFormSetValue,
+  useWatch,
 } from 'react-hook-form';
 import { components } from '@schema';
 import EditorModal from '@repo/pointer-editor/EditorModal';
@@ -24,7 +25,6 @@ interface MainProblemSectionProps {
   setValue: UseFormSetValue<ProblemUpdateRequest>;
   concepts?: number[] | undefined;
   selectedAnswerType?: ProblemAnswerType;
-  selectedAnswer?: number;
   tagsNameMap?: Record<number, string>;
   fetchedProblemData?: ProblemInfoResp;
   onRemoveTag?: (tag: number) => void;
@@ -34,11 +34,10 @@ interface MainProblemSectionProps {
 export const MainProblemSection = ({
   control,
   register,
-  errors: _errors,
+  errors,
   setValue,
   concepts,
   selectedAnswerType,
-  selectedAnswer,
   tagsNameMap = {},
   fetchedProblemData,
   onRemoveTag,
@@ -83,17 +82,52 @@ export const MainProblemSection = ({
     setIsPointingCommentModalOpen(false);
   };
 
+  // answerType 변경 시 사용자 상호작용에서만 answer 초기화하도록 onChange에 훅을 건다
+  const answerTypeRegister = register('answerType', {
+    required: '필수 입력 항목입니다.',
+  });
+
+  const watchedAnswer = useWatch({
+    control,
+    name: 'answer',
+    defaultValue: fetchedProblemData?.answer ?? 1,
+  });
+  const watchedRecommendedTimeSec = useWatch({
+    control,
+    name: 'recommendedTimeSec',
+    defaultValue: fetchedProblemData?.recommendedTimeSec ?? 0,
+  });
+
+  const minutes = Math.floor((watchedRecommendedTimeSec || 0) / 60);
+  const seconds = Math.max(0, (watchedRecommendedTimeSec || 0) % 60);
+
+  const handleChangeMinutes = (e: ChangeEvent<HTMLInputElement>) => {
+    const raw = e.target.value.trim();
+    const nextMinutes = raw === '' ? 0 : Math.max(0, Number(raw));
+    const nextTotal = nextMinutes * 60 + seconds;
+    setValue('recommendedTimeSec', nextTotal, { shouldDirty: true, shouldValidate: true });
+  };
+
+  const handleChangeSeconds = (e: ChangeEvent<HTMLInputElement>) => {
+    const raw = e.target.value.trim();
+    let nextSeconds = raw === '' ? 0 : Math.max(0, Number(raw));
+    if (!Number.isFinite(nextSeconds)) nextSeconds = 0;
+    if (nextSeconds > 59) nextSeconds = 59;
+    const nextTotal = minutes * 60 + nextSeconds;
+    setValue('recommendedTimeSec', nextTotal, { shouldDirty: true, shouldValidate: true });
+  };
+
   const formatBlocks = (blocks: unknown[]): ContentBlockUpdateRequest[] => {
     return blocks.map((block, index) => {
       const blockData = block as {
-        // id?: number;
+        id?: number;
         type?: 'TEXT' | 'IMAGE';
         data?: string;
         content?: string;
       };
 
       return {
-        // id: blockData.id || 0,
+        id: blockData.id ?? 0,
         rank: index,
         type: blockData.type,
         data: blockData.data || blockData.content,
@@ -129,64 +163,126 @@ export const MainProblemSection = ({
       <h3 className='font-bold-32 mb-12 text-black'>메인 문제 등록</h3>
       <div className='flex flex-col gap-800'>
         <ComponentWithLabel label='메인 문제 타이틀 입력' labelWidth='15.4rem'>
-          <Input {...register('title')} />
+          <Input
+            {...register('title', { required: '필수 입력 항목입니다.' })}
+            className={`${errors?.title ? 'border-red focus:border-red' : ''}`}
+          />
+          {errors?.title && (
+            <p className='font-medium-14 text-red mt-200'>
+              {(errors.title as { message?: string })?.message || '필수 입력 항목입니다.'}
+            </p>
+          )}
         </ComponentWithLabel>
-        {concepts !== undefined && onRemoveTag && onOpenTagModal && (
-          <ComponentWithLabel label='메인 문제 개념 태그' labelWidth='15.4rem'>
-            <div className='flex flex-wrap gap-200'>
-              {concepts &&
-                concepts?.length > 0 &&
-                concepts.map((tag) => (
-                  <Tag
-                    key={tag}
-                    label={tagsNameMap[tag] ?? ''}
-                    removable
-                    color='dark'
-                    onClick={() => onRemoveTag(tag)}
-                  />
-                ))}
-              <Tag label='태그 추가하기' onClick={onOpenTagModal} color='lightgray' />
-            </div>
-          </ComponentWithLabel>
-        )}
-        {selectedAnswerType !== undefined && selectedAnswer !== undefined && (
-          <ComponentWithLabel label='메인 문제 답 입력' labelWidth='15.4rem'>
+        <ComponentWithLabel label='메인 문제 개념 태그' labelWidth='15.4rem'>
+          <div className='flex flex-wrap gap-200'>
+            {concepts &&
+              concepts?.length > 0 &&
+              concepts.map((tag) => (
+                <Tag
+                  key={tag}
+                  label={tagsNameMap[tag] ?? ''}
+                  removable
+                  color='dark'
+                  onClick={() => onRemoveTag?.(tag)}
+                />
+              ))}
+            <Tag label='태그 추가하기' onClick={onOpenTagModal} color='lightgray' />
+            {concepts && concepts?.length === 0 && (
+              <p className='font-medium-14 text-red mt-200'>태그를 추가해주세요.</p>
+            )}
+          </div>
+        </ComponentWithLabel>
+
+        <ComponentWithLabel label='메인 문제 답 입력' labelWidth='15.4rem'>
+          <div className='rounded-400 w-full'>
             <AnswerInput>
               <AnswerInput.AnswerTypeSection
                 selectedAnswerType={selectedAnswerType}
-                {...register('answerType')}
+                {...answerTypeRegister}
+                onChange={(e) => {
+                  answerTypeRegister.onChange(e);
+                }}
               />
               <AnswerInput.AnswerInputSection
                 selectedAnswerType={selectedAnswerType}
-                selectedAnswer={selectedAnswer}
-                {...register('answer', { valueAsNumber: true })}
+                selectedAnswer={watchedAnswer}
+                isError={Boolean(errors?.answer)}
+                {...register('answer', {
+                  valueAsNumber: true,
+                  required: '필수 입력 항목입니다.',
+                })}
               />
             </AnswerInput>
-          </ComponentWithLabel>
-        )}
+          </div>
+          {(errors?.answerType || errors?.answer) && (
+            <p className='font-medium-14 text-red mt-200'>필수 입력 항목입니다.</p>
+          )}
+        </ComponentWithLabel>
+
         <div className='flex w-full items-center justify-between'>
           <ComponentWithLabel label='메인 문제 난도 선택' labelWidth='15.4rem'>
-            <Controller
-              control={control}
-              name='difficulty'
-              render={({ field }) => (
-                <LevelSelect selectedLevel={field.value} onChange={field.onChange} />
-              )}
-            />
+            <div className={`${errors?.difficulty ? 'border-red rounded-400 border p-400' : ''}`}>
+              <Controller
+                control={control}
+                name='difficulty'
+                rules={{ required: '필수 입력 항목입니다.' }}
+                render={({ field }) => (
+                  <LevelSelect selectedLevel={field.value} onChange={field.onChange} />
+                )}
+              />
+            </div>
+            {errors?.difficulty && (
+              <p className='font-medium-14 text-red mt-200'>
+                {(errors.difficulty as { message?: string })?.message || '필수 입력 항목입니다.'}
+              </p>
+            )}
           </ComponentWithLabel>
           <div>
             <ComponentWithLabel label='권장 시간 입력'>
               <div className='flex gap-600'>
                 <div className='flex items-center gap-400'>
                   <input
-                    className='font-bold-18 border-lightgray500 rounded-400 h-[5.6rem] w-[5.6rem] border bg-white px-400 py-200'
+                    className={`font-bold-18 rounded-400 h-[5.6rem] w-[5.6rem] border bg-white px-400 py-200 ${
+                      errors?.recommendedTimeSec
+                        ? 'border-red focus:border-red'
+                        : 'border-lightgray500'
+                    } [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0`}
+                    type='number'
+                    min={0}
+                    value={Number.isFinite(minutes) ? minutes : 0}
+                    onChange={handleChangeMinutes}
+                  />
+                  <span className='font-medium-18 text-black'>분</span>
+                  <input
+                    className={`font-bold-18 rounded-400 h-[5.6rem] w-[5.6rem] border bg-white px-400 py-200 ${
+                      errors?.recommendedTimeSec
+                        ? 'border-red focus:border-red'
+                        : 'border-lightgray500'
+                    } [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0`}
+                    type='number'
+                    min={0}
+                    max={59}
+                    value={Number.isFinite(seconds) ? seconds : 0}
+                    onChange={handleChangeSeconds}
+                  />
+                  <span className='font-medium-18 text-black'>초</span>
+                  <input
+                    type='hidden'
                     {...register('recommendedTimeSec', {
                       valueAsNumber: true,
+                      validate: (v) =>
+                        (v !== undefined && v !== null && !Number.isNaN(v)) ||
+                        '필수 입력 항목입니다.',
                     })}
                   />
-                  <span className='font-medium-18 text-black'>초</span>
                 </div>
               </div>
+              {errors?.recommendedTimeSec && (
+                <p className='font-medium-14 text-red mt-200'>
+                  {(errors.recommendedTimeSec as { message?: string })?.message ||
+                    '필수 입력 항목입니다.'}
+                </p>
+              )}
             </ComponentWithLabel>
           </div>
         </div>
diff --git a/apps/admin/src/components/problem/PracticeTestSelect.tsx b/apps/admin/src/components/problem/PracticeTestSelect.tsx
index 7dd9f065..9898a790 100644
--- a/apps/admin/src/components/problem/PracticeTestSelect.tsx
+++ b/apps/admin/src/components/problem/PracticeTestSelect.tsx
@@ -50,13 +50,15 @@ const PracticeTestSelect = ({ practiceTest, handlePracticeTest }: PracticeTestSe
     <div className='relative h-[5.6rem] w-full'>
       <div
         className={`border-lightgray500 rounded-400 absolute z-30 min-h-[5.6rem] w-full border bg-white px-400 py-200`}>
-        <div className='flex justify-between gap-[0.9rem]'>
+        <div className='flex min-h-[4rem] items-center justify-between gap-[0.9rem]'>
           {practiceTest ? (
-            <div className='font-bold-24 w-full'>{practiceTestName}</div>
+            <div className='font-bold-18 w-full cursor-pointer' onClick={toggleOpen}>
+              {practiceTestName}
+            </div>
           ) : (
             <input
               {...register('search')}
-              className='font-bold-24 w-full outline-none'
+              className='font-bold-18 w-full outline-none'
               placeholder={'입력해주세요'}
               onFocus={() => setIsOpen(true)}
             />
@@ -65,13 +67,13 @@ const PracticeTestSelect = ({ practiceTest, handlePracticeTest }: PracticeTestSe
           <div className='flex items-center gap-200'>
             {practiceTest && (
               <div onClick={(e) => handleSelectPracticeTest(e, undefined)}>
-                <IcCloseCircle width={24} height={24} />
+                <IcCloseCircle width={24} height={24} className='cursor-pointer' />
               </div>
             )}
             {isOpen ? (
-              <IcUp className='mt-150' width={24} height={24} onClick={toggleOpen} />
+              <IcUp className='cursor-pointer' width={24} height={24} onClick={toggleOpen} />
             ) : (
-              <IcDown className='mt-150' width={24} height={24} onClick={toggleOpen} />
+              <IcDown className='cursor-pointer' width={24} height={24} onClick={toggleOpen} />
             )}
           </div>
         </div>
diff --git a/apps/admin/src/components/problem/ProblemEssentialInput.tsx b/apps/admin/src/components/problem/ProblemEssentialInput.tsx
index d97b0461..bf274a41 100644
--- a/apps/admin/src/components/problem/ProblemEssentialInput.tsx
+++ b/apps/admin/src/components/problem/ProblemEssentialInput.tsx
@@ -1,6 +1,6 @@
 import { Button, ComponentWithLabel, Input, SectionCard } from '@components';
 import { ProblemType } from '@types';
-import { forwardRef } from 'react';
+import { forwardRef, useState } from 'react';
 
 import PracticeTestSelect from './PracticeTestSelect';
 
@@ -59,7 +59,7 @@ const PracticeTestSection = ({ children }: { children: React.ReactNode }) => {
 
 const PracticeTest = ({ practiceTest, handlePracticeTest }: PracticeTestProps) => {
   return (
-    <ComponentWithLabel label='메인 문항 모의고사 '>
+    <ComponentWithLabel label='메인 문제 모의고사 '>
       <PracticeTestSelect practiceTest={practiceTest} handlePracticeTest={handlePracticeTest} />
     </ComponentWithLabel>
   );
@@ -68,12 +68,13 @@ const PracticeTest = ({ practiceTest, handlePracticeTest }: PracticeTestProps) =
 const PraticeTestNumber = forwardRef<HTMLInputElement>(({ ...props }, ref) => {
   return (
     <div className='flex'>
-      <ComponentWithLabel label='메인 문항 번호 입력'>
+      <ComponentWithLabel label='메인 문제 번호 입력'>
         <Input ref={ref} placeholder={'입력해주세요'} {...props} />
       </ComponentWithLabel>
     </div>
   );
 });
+
 interface ProblemErrorProps {
   isError: boolean;
   errorMessage: string;
@@ -83,10 +84,199 @@ const ProblemError = ({ isError, errorMessage }: ProblemErrorProps) => {
   return isError && <p className='text-red font-medium-18 mt-[2rem]'>{errorMessage}</p>;
 };
 
+const ProblemID = forwardRef<HTMLInputElement>(({ ...props }, ref) => {
+  const [isTableVisible, setIsTableVisible] = useState(false);
+
+  const toggleTable = () => {
+    setIsTableVisible(!isTableVisible);
+  };
+
+  return (
+    <div className='mt-600 flex flex-col'>
+      <ComponentWithLabel label='문제 ID'>
+        <Input ref={ref} placeholder={'입력해주세요'} {...props} />
+      </ComponentWithLabel>
+      <button
+        type='button'
+        onClick={toggleTable}
+        className='font-bold-18 mt-600 flex cursor-pointer items-center gap-200 text-black transition-colors hover:text-gray-700'>
+        ⓘ 문제 ID 입력 가이드
+        <svg
+          className={`h-[1.6rem] w-[1.6rem] transition-transform duration-200 ${
+            isTableVisible ? 'rotate-180' : ''
+          }`}
+          fill='none'
+          stroke='currentColor'
+          viewBox='0 0 24 24'>
+          <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M19 9l-7 7-7-7' />
+        </svg>
+      </button>
+      {isTableVisible && (
+        <table className='font-medium-16 rounded-400 mt-400 border-collapse overflow-hidden border border-gray-500'>
+          <thead>
+            <tr className='bg-gray-50'>
+              <th className='font-semibold-16 border border-gray-300 px-400 py-300 text-left text-gray-900'>
+                학년
+              </th>
+              <th className='font-semibold-16 border border-gray-300 px-400 py-300 text-left text-gray-900'>
+                문제 ID
+              </th>
+              <th className='font-semibold-16 w-[7rem] border border-gray-300 px-400 py-300 text-center text-gray-900'>
+                1
+              </th>
+              <th className='font-semibold-16 w-[7rem] border border-gray-300 px-400 py-300 text-center text-gray-900'>
+                2
+              </th>
+              <th className='font-semibold-16 w-[7rem] border border-gray-300 px-400 py-300 text-center text-gray-900'>
+                3
+              </th>
+              <th className='font-semibold-16 w-[7rem] border border-gray-300 px-400 py-300 text-center text-gray-900'>
+                4
+              </th>
+              <th className='font-semibold-16 w-[7rem] border border-gray-300 px-400 py-300 text-center text-gray-900'>
+                5
+              </th>
+              <th className='font-semibold-16 w-[7rem] border border-gray-300 px-400 py-300 text-center text-gray-900'>
+                6
+              </th>
+              <th className='font-semibold-16 w-[7rem] border border-gray-300 px-400 py-300 text-center text-gray-900'>
+                7
+              </th>
+              <th className='font-semibold-16 w-[7rem] border border-gray-300 px-400 py-300 text-center text-gray-900'>
+                8
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr className='hover:bg-gray-25 transition-colors'>
+              <td className='border border-gray-300 px-400 py-300 text-gray-800'>고1</td>
+              <td className='text-blue border border-gray-300 px-400 py-300 font-mono tracking-wider'>
+                11YYMMNN
+              </td>
+              <td className='border border-gray-300 px-400 py-300 text-center text-gray-700'>1</td>
+              <td className='border border-gray-300 px-400 py-300 text-center text-gray-700'>1</td>
+              <td
+                colSpan={2}
+                className='border border-gray-300 px-400 py-300 text-center text-gray-700'>
+                연도
+              </td>
+              <td
+                colSpan={2}
+                className='border border-gray-300 px-400 py-300 text-center text-gray-700'>
+                월
+              </td>
+              <td
+                colSpan={2}
+                className='border border-gray-300 px-400 py-300 text-center text-gray-700'>
+                문제 번호
+              </td>
+            </tr>
+            <tr className='hover:bg-gray-25 transition-colors'>
+              <td className='border border-gray-300 px-400 py-300 text-gray-800'>고2</td>
+              <td className='text-blue border border-gray-300 px-400 py-300 font-mono tracking-wider'>
+                12YYMMNN
+              </td>
+              <td className='border border-gray-300 px-400 py-300 text-center text-gray-700'>1</td>
+              <td className='border border-gray-300 px-400 py-300 text-center text-gray-700'>2</td>
+              <td
+                colSpan={2}
+                className='border border-gray-300 px-400 py-300 text-center text-gray-700'>
+                연도
+              </td>
+              <td
+                colSpan={2}
+                className='border border-gray-300 px-400 py-300 text-center text-gray-700'>
+                월
+              </td>
+              <td
+                colSpan={2}
+                className='border border-gray-300 px-400 py-300 text-center text-gray-700'>
+                문제 번호
+              </td>
+            </tr>
+            <tr className='hover:bg-gray-25 transition-colors'>
+              <td className='border border-gray-300 px-400 py-300 text-gray-800'>고3(가형)(B형)</td>
+              <td className='text-blue border border-gray-300 px-400 py-300 font-mono tracking-wider'>
+                13YYMMNN
+              </td>
+              <td className='border border-gray-300 px-400 py-300 text-center text-gray-700'>1</td>
+              <td className='border border-gray-300 px-400 py-300 text-center text-gray-700'>3</td>
+              <td
+                colSpan={2}
+                className='border border-gray-300 px-400 py-300 text-center text-gray-700'>
+                연도
+              </td>
+              <td
+                colSpan={2}
+                className='border border-gray-300 px-400 py-300 text-center text-gray-700'>
+                월
+              </td>
+              <td
+                colSpan={2}
+                className='border border-gray-300 px-400 py-300 text-center text-gray-700'>
+                문제 번호
+              </td>
+            </tr>
+            <tr className='hover:bg-gray-25 transition-colors'>
+              <td className='border border-gray-300 px-400 py-300 text-gray-800'>고3(나형)(A형)</td>
+              <td className='text-blue border border-gray-300 px-400 py-300 font-mono tracking-wider'>
+                14YYMMNN
+              </td>
+              <td className='border border-gray-300 px-400 py-300 text-center text-gray-700'>1</td>
+              <td className='border border-gray-300 px-400 py-300 text-center text-gray-700'>4</td>
+              <td
+                colSpan={2}
+                className='border border-gray-300 px-400 py-300 text-center text-gray-700'>
+                연도
+              </td>
+              <td
+                colSpan={2}
+                className='border border-gray-300 px-400 py-300 text-center text-gray-700'>
+                월
+              </td>
+              <td
+                colSpan={2}
+                className='border border-gray-300 px-400 py-300 text-center text-gray-700'>
+                문제 번호
+              </td>
+            </tr>
+            <tr className='hover:bg-gray-25 transition-colors'>
+              <td className='border border-gray-300 px-400 py-300 text-gray-800'>변형</td>
+              <td className='text-blue border border-gray-300 px-400 py-300 font-mono tracking-wider'>
+                2GYYMMNN
+              </td>
+              <td className='border border-gray-300 px-400 py-300 text-center text-gray-700'>2</td>
+              <td className='border border-gray-300 px-400 py-300 text-center text-gray-700'>
+                학년
+              </td>
+              <td
+                colSpan={2}
+                className='border border-gray-300 px-400 py-300 text-center text-gray-700'>
+                연도
+              </td>
+              <td
+                colSpan={2}
+                className='border border-gray-300 px-400 py-300 text-center text-gray-700'>
+                월
+              </td>
+              <td
+                colSpan={2}
+                className='border border-gray-300 px-400 py-300 text-center text-gray-700'>
+                문제 번호
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      )}
+    </div>
+  );
+});
+
 ProblemEssentialInput.ProblemTypeSection = ProblemTypeSection;
 ProblemEssentialInput.PracticeTestSection = PracticeTestSection;
 ProblemEssentialInput.PracticeTest = PracticeTest;
 ProblemEssentialInput.PraticeTestNumber = PraticeTestNumber;
 ProblemEssentialInput.ProblemError = ProblemError;
+ProblemEssentialInput.ProblemID = ProblemID;
 
 export default ProblemEssentialInput;
diff --git a/apps/admin/src/routes/_GNBLayout/concept-tags/index.tsx b/apps/admin/src/routes/_GNBLayout/concept-tags/index.tsx
index 41d6622a..a1bceb53 100644
--- a/apps/admin/src/routes/_GNBLayout/concept-tags/index.tsx
+++ b/apps/admin/src/routes/_GNBLayout/concept-tags/index.tsx
@@ -1,15 +1,23 @@
 import { createFileRoute } from '@tanstack/react-router';
-import { useState } from 'react';
-import { Button, FloatingButton, Header, Input, Modal, TwoButtonModalTemplate } from '@components';
+import { useEffect, useState } from 'react';
+import {
+  Button,
+  EditCategoryModal,
+  EditConceptModal,
+  FloatingButton,
+  Header,
+  Input,
+  Modal,
+  TwoButtonModalTemplate,
+} from '@components';
 import { useForm } from 'react-hook-form';
 import { Divider } from '@repo/pointer-design-system/components';
 import { IcPencil } from '@svg';
-import { getConcept, getConceptCategory, deleteConcept } from '@apis';
+import { getConcept, getConceptCategory, deleteConcept, putConceptCategory } from '@apis';
 import { useModal, useInvalidate } from '@hooks';
 
-import type { components } from '@/types/api/schema';
 import { ConceptTagCard } from '@/components/conceptTags';
-import EditConceptModal from '@/components/common/Modals/EditConceptModal';
+import type { components } from '@/types/api/schema';
 
 export const Route = createFileRoute('/_GNBLayout/concept-tags/')({
   component: RouteComponent,
@@ -22,6 +30,9 @@ function RouteComponent() {
   const [selectedConceptForEdit, setSelectedConceptForEdit] = useState<
     components['schemas']['ConceptResp'] | null
   >(null);
+  const [selectedCategoryForEdit, setSelectedCategoryForEdit] = useState<
+    components['schemas']['ConceptCategoryResp'] | null
+  >(null);
   const [isMultipleDelete, setIsMultipleDelete] = useState<boolean>(false);
   const {
     isOpen: isDeleteModalOpen,
@@ -33,10 +44,16 @@ function RouteComponent() {
     openModal: openEditConceptModal,
     closeModal: closeEditConceptModal,
   } = useModal();
+  const {
+    isOpen: isEditCategoryModalOpen,
+    openModal: openEditCategoryModal,
+    closeModal: closeEditCategoryModal,
+  } = useModal();
 
   // api
   const { data: concepts } = getConcept({ query: searchQuery });
   const { data: conceptCategories } = getConceptCategory();
+  const { mutateAsync: updateCategoryAsync } = putConceptCategory();
   const { invalidateAll } = useInvalidate();
   const deleteConceptMutation = deleteConcept();
 
@@ -46,10 +63,19 @@ function RouteComponent() {
     );
   };
 
-  const { register, handleSubmit } = useForm<{
+  const { register, handleSubmit, watch } = useForm<{
     query: string;
   }>();
 
+  const watchedQuery = watch('query');
+  useEffect(() => {
+    const debounceTimer = setTimeout(() => {
+      setSearchQuery((watchedQuery ?? '').trim());
+    }, 300);
+
+    return () => clearTimeout(debounceTimer);
+  }, [watchedQuery]);
+
   const handleClickSearch = (data: { query: string }) => {
     setSearchQuery(data.query.trim());
     setSelectedTag([]);
@@ -130,7 +156,15 @@ function RouteComponent() {
             <article>
               <div className='mb-[4rem] flex items-center gap-300'>
                 <h4 className='font-bold-24 text-black'>{category.name}</h4>
-                <IcPencil className='cursor-pointer' width={24} height={24} onClick={() => {}} />
+                <IcPencil
+                  className='cursor-pointer'
+                  width={24}
+                  height={24}
+                  onClick={() => {
+                    setSelectedCategoryForEdit(category);
+                    openEditCategoryModal();
+                  }}
+                />
               </div>
               <div className='grid grid-cols-3 gap-[4rem]'>
                 {concepts?.data
@@ -204,6 +238,32 @@ function RouteComponent() {
           concept={selectedConceptForEdit}
         />
       </Modal>
+      <Modal
+        isOpen={isEditCategoryModalOpen}
+        onClose={() => {
+          closeEditCategoryModal();
+          setSelectedCategoryForEdit(null);
+        }}>
+        <EditCategoryModal
+          onClose={() => {
+            closeEditCategoryModal();
+            setSelectedCategoryForEdit(null);
+          }}
+          defaultName={selectedCategoryForEdit ? selectedCategoryForEdit.name : undefined}
+          onSubmit={async ({ name }) => {
+            if (!selectedCategoryForEdit) return;
+            await updateCategoryAsync({
+              params: {
+                path: { categoryId: selectedCategoryForEdit.id },
+              },
+              body: { name },
+            });
+            closeEditCategoryModal();
+            setSelectedCategoryForEdit(null);
+            invalidateAll();
+          }}
+        />
+      </Modal>
     </>
   );
 }
diff --git a/apps/admin/src/routes/_GNBLayout/problem-set/$problemSetId/index.tsx b/apps/admin/src/routes/_GNBLayout/problem-set/$problemSetId/index.tsx
index efbb3e9a..c718210a 100644
--- a/apps/admin/src/routes/_GNBLayout/problem-set/$problemSetId/index.tsx
+++ b/apps/admin/src/routes/_GNBLayout/problem-set/$problemSetId/index.tsx
@@ -166,7 +166,7 @@ function RouteComponent() {
   };
 
   const createModifyError = () => {
-    setErrorMessage('컨펌된 세트는 문항을 수정할 수 없어요');
+    setErrorMessage('컨펌된 세트는 문제을 수정할 수 없어요');
     openErrorModal();
   };
 
@@ -260,7 +260,7 @@ function RouteComponent() {
 
   const handleAddProblemSummary = (index: number, problemMeta: ProblemMetaResp) => {
     if (problemSummaries.map((item) => item.problem.id).includes(problemMeta.id)) {
-      setErrorMessage('이미 추가된 문항이에요');
+      setErrorMessage('이미 추가된 문제이에요');
       openErrorModal();
       return;
     }
@@ -279,7 +279,7 @@ function RouteComponent() {
 
   const handleClickSave = async (data: ProblemSetUpdateRequest) => {
     if (problemSummaries.length === 0) {
-      setErrorMessage('적어도 1개의 문항을 등록해주세요');
+      setErrorMessage('적어도 1개의 문제을 등록해주세요');
       openErrorModal();
       return;
     }
@@ -397,7 +397,7 @@ function RouteComponent() {
       />
       <Header
         title='세트 수정하기'
-        description={`문항을 잡고 드래그해서 순서를 바꿀 수 있어요\n컨펌된 세트도 타이틀 수정이 가능해요`}
+        description={`문제을 잡고 드래그해서 순서를 바꿀 수 있어요\n컨펌된 세트도 타이틀 수정이 가능해요`}
         deleteButton='세트 삭제'
         onClickDelete={handleClickSetDelete}
       />
@@ -454,10 +454,10 @@ function RouteComponent() {
                   ) : (
                     <>
                       <ProblemCard.TextSection>
-                        <ProblemCard.Title title={`문항 ${index + 1}`} />
-                        <ProblemCard.Info label='문항 ID' content={problem.customId} />
-                        <ProblemCard.Info label='문항 타이틀' content={problem.title} />
-                        <ProblemCard.Info label='문항 메모' content={problem.memo} />
+                        <ProblemCard.Title title={`문제 ${index + 1}`} />
+                        <ProblemCard.Info label='문제 ID' content={problem.customId} />
+                        <ProblemCard.Info label='문제 타이틀' content={problem.title} />
+                        <ProblemCard.Info label='문제 메모' content={problem.memo} />
                         <ProblemCard.TagSection>
                           {problem.concepts?.map((concept, tagIndex) => {
                             return <Tag key={`${concept.name}-${tagIndex}`} label={concept.name} />;
@@ -504,7 +504,7 @@ function RouteComponent() {
       </Modal>
       <Modal isOpen={isProblemDeleteModalOpen} onClose={closeProblemDeleteModal}>
         <TwoButtonModalTemplate
-          text='문항을 세트에서 제외할까요??'
+          text='문제을 세트에서 제외할까요??'
           leftButtonText='아니오'
           rightButtonText='예'
           handleClickLeftButton={closeProblemDeleteModal}
diff --git a/apps/admin/src/routes/_GNBLayout/problem-set/index.tsx b/apps/admin/src/routes/_GNBLayout/problem-set/index.tsx
index 6a8dfdcd..f459baf6 100644
--- a/apps/admin/src/routes/_GNBLayout/problem-set/index.tsx
+++ b/apps/admin/src/routes/_GNBLayout/problem-set/index.tsx
@@ -13,7 +13,7 @@ import {
 import { useInvalidate, useModal } from '@hooks';
 import { createFileRoute, Link, useRouter } from '@tanstack/react-router';
 import { GetProblemSetSearchParams } from '@types';
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useForm } from 'react-hook-form';
 
 export const Route = createFileRoute('/_GNBLayout/problem-set/')({
@@ -25,7 +25,7 @@ function RouteComponent() {
   const { navigate } = useRouter();
 
   const [searchQuery, setSearchQuery] = useState<GetProblemSetSearchParams>({});
-  const { register, handleSubmit, reset } = useForm<GetProblemSetSearchParams>();
+  const { register, handleSubmit, reset, watch } = useForm<GetProblemSetSearchParams>();
   const {
     isOpen: isDeleteModalOpen,
     openModal: openDeleteModal,
@@ -38,6 +38,33 @@ function RouteComponent() {
   const { mutate: mutatePostProblemSet } = postProblemSet();
   const { mutate: mutateDeleteProblemSet } = deleteProblemSet();
 
+  const watchedSetTitle = watch('setTitle');
+  const watchedProblemTitle = watch('problemTitle');
+  useEffect(() => {
+    const debounceTimer = setTimeout(() => {
+      const trimmedSetTitle = (watchedSetTitle ?? '').toString().trim();
+      const trimmedProblemTitle = (watchedProblemTitle ?? '').toString().trim();
+
+      setSearchQuery((prev) => {
+        const nextQuery: GetProblemSetSearchParams = {
+          ...prev,
+          setTitle: trimmedSetTitle || undefined,
+          problemTitle: trimmedProblemTitle || undefined,
+        };
+
+        const cleaned = Object.fromEntries(
+          Object.entries(nextQuery).filter(([, value]) =>
+            Array.isArray(value) ? value.length > 0 : Boolean(value)
+          )
+        ) as GetProblemSetSearchParams;
+
+        return cleaned;
+      });
+    }, 300);
+
+    return () => clearTimeout(debounceTimer);
+  }, [watchedSetTitle, watchedProblemTitle]);
+
   const handleClickSearch = (data: GetProblemSetSearchParams) => {
     const filteredData = Object.fromEntries(
       Object.entries(data).filter(([_, value]) => Boolean(value))
@@ -91,7 +118,7 @@ function RouteComponent() {
           />
           <SearchInput
             sizeType='long'
-            label='문항 타이틀'
+            label='문제 타이틀'
             placeholder='입력해주세요.'
             {...register('problemTitle', { required: false })}
           />
diff --git a/apps/admin/src/routes/_GNBLayout/problem-set/register/index.tsx b/apps/admin/src/routes/_GNBLayout/problem-set/register/index.tsx
index 4d5f1001..94521aae 100644
--- a/apps/admin/src/routes/_GNBLayout/problem-set/register/index.tsx
+++ b/apps/admin/src/routes/_GNBLayout/problem-set/register/index.tsx
@@ -266,10 +266,10 @@ function RouteComponent() {
                   ) : problem ? (
                     <>
                       <ProblemCard.TextSection>
-                        <ProblemCard.Title title={`문항 ${index + 1}`} />
-                        <ProblemCard.Info label='문항 ID' content={problem.customId} />
-                        <ProblemCard.Info label='문항 타이틀' content={problem.title} />
-                        <ProblemCard.Info label='문항 메모' content={problem.memo} />
+                        <ProblemCard.Title title={`문제 ${index + 1}`} />
+                        <ProblemCard.Info label='문제 ID' content={problem.customId} />
+                        <ProblemCard.Info label='문제 타이틀' content={problem.title} />
+                        <ProblemCard.Info label='문제 메모' content={problem.memo} />
                         <ProblemCard.TagSection>
                           {problem.concepts?.map((concept: { name: string }, tagIndex: number) => {
                             return <Tag key={`${concept.name}-${tagIndex}`} label={concept.name} />;
diff --git a/apps/admin/src/routes/_GNBLayout/problem/$problemId/index.tsx b/apps/admin/src/routes/_GNBLayout/problem/$problemId/index.tsx
index 4bf6ba70..2597c00c 100644
--- a/apps/admin/src/routes/_GNBLayout/problem/$problemId/index.tsx
+++ b/apps/admin/src/routes/_GNBLayout/problem/$problemId/index.tsx
@@ -75,17 +75,18 @@ function RouteComponent() {
     watch,
     setValue,
     reset,
+    trigger,
     clearErrors,
-    formState: { errors },
+    formState: { errors, isValid },
   } = useForm({
+    mode: 'onChange',
+    reValidateMode: 'onChange',
     defaultValues: transformToProblemUpdateRequest({} as ProblemInfoResp),
   });
 
-  const problemCustomId = fetchedProblemData?.customId ?? '';
   const problemType = watch('problemType');
   const concepts = watch('concepts');
   const selectedAnswerType = watch('answerType');
-  const selectedAnswer = watch('answer');
 
   const {
     fields: childProblems,
@@ -163,7 +164,7 @@ function RouteComponent() {
               (error as { response?: { data?: unknown } }).response?.data
             );
           }
-          toast.error('저장에 실패했습니다');
+          toast.error((error as { message?: string })?.message || '저장에 실패했습니다');
         },
       }
     );
@@ -249,6 +250,8 @@ function RouteComponent() {
   useEffect(() => {
     if (fetchedProblemData) {
       reset(transformToProblemUpdateRequest(fetchedProblemData));
+      // API에서 불러온 기본값으로 폼을 초기화한 뒤 유효성 검사를 트리거하여 저장 버튼 활성화 상태 반영
+      trigger();
     }
   }, [fetchedProblemData]);
 
@@ -270,11 +273,7 @@ function RouteComponent() {
         }}
       />
       <form onSubmit={handleSubmit(handleSubmitUpdate)}>
-        <Header
-          title={`문제 ID : ${problemCustomId}`}
-          deleteButton='문제 삭제'
-          onClickDelete={openDeleteModal}
-        />
+        <Header title='문제 수정' deleteButton='문제 삭제' onClickDelete={openDeleteModal} />
         <ProblemEssentialInput>
           <Controller
             control={control}
@@ -327,6 +326,12 @@ function RouteComponent() {
             isError={Boolean(errors.practiceTestId || errors.practiceTestNo)}
             errorMessage='모의고사와 문제 번호는 필수 입력 항목입니다.'
           />
+
+          <ProblemEssentialInput.ProblemID
+            {...register('customId', {
+              required: '문제 ID는 필수 입력 항목입니다.',
+            })}
+          />
         </ProblemEssentialInput>
         <div className='mt-1200 flex flex-col gap-1200'>
           <MainProblemSection
@@ -336,7 +341,6 @@ function RouteComponent() {
             setValue={setValue}
             concepts={concepts}
             selectedAnswerType={selectedAnswerType}
-            selectedAnswer={selectedAnswer}
             tagsNameMap={tagsNameMap}
             fetchedProblemData={fetchedProblemData}
             onRemoveTag={handleRemoveTag}
@@ -368,7 +372,7 @@ function RouteComponent() {
           />
           <TipSection setValue={setValue} fetchedProblemData={fetchedProblemData} />
         </div>
-        <FloatingButton>저장하기</FloatingButton>
+        <FloatingButton disabled={!isValid}>저장하기</FloatingButton>
       </form>
       <Modal isOpen={isTagModalOpen} onClose={closeTagModal}>
         <TagSelectModal
diff --git a/apps/admin/src/routes/_GNBLayout/problem/index.tsx b/apps/admin/src/routes/_GNBLayout/problem/index.tsx
index 8de49723..71411238 100644
--- a/apps/admin/src/routes/_GNBLayout/problem/index.tsx
+++ b/apps/admin/src/routes/_GNBLayout/problem/index.tsx
@@ -15,7 +15,7 @@ import { useInvalidate, useModal } from '@hooks';
 import { IcDown } from '@svg';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { GetProblemsSearchParams } from '@types';
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import PulseLoader from 'react-spinners/PulseLoader';
 
@@ -38,7 +38,7 @@ function RouteComponent() {
   const [searchQuery, setSearchQuery] = useState<GetProblemsSearchParams>({});
   const [selectedTagList, setSelectedTagList] = useState<number[]>([]);
 
-  const { register, handleSubmit, reset } = useForm<GetProblemsSearchParams>();
+  const { register, handleSubmit, reset, watch } = useForm<GetProblemsSearchParams>();
 
   const { data: problemList, isLoading } = getProblemsSearch(searchQuery);
   const { mutate: mutateDeleteProblem } = deleteProblem();
@@ -46,6 +46,33 @@ function RouteComponent() {
   const allTagList = tagsData?.data || [];
   const tagsNameMap = Object.fromEntries(allTagList.map((tag) => [tag.id, tag.name]));
 
+  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 handleClickDelete = (e: React.MouseEvent<HTMLButtonElement>, problemId: string) => {
     e.stopPropagation();
     e.preventDefault();
@@ -109,24 +136,24 @@ function RouteComponent() {
 
   return (
     <>
-      <Header title='문항 목록' />
+      <Header title='문제 목록' />
       <form
         className='mt-1200 flex items-end justify-between gap-400'
         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 w-full 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-full max-w-[42.4rem] cursor-pointer items-center justify-between border bg-white px-400 py-200'
               onClick={() => {
@@ -181,9 +208,9 @@ function RouteComponent() {
                   params={{ problemId: problemId.toString() }}>
                   <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.ButtonSection>
@@ -212,7 +239,7 @@ function RouteComponent() {
 
       <FloatingButton>
         <Link to='/problem/register' className='flex h-full w-full items-center justify-center'>
-          새로운 문항 등록하기
+          새로운 문제 등록하기
         </Link>
       </FloatingButton>
       <Modal isOpen={isOpen} onClose={closeModal}>
@@ -224,7 +251,7 @@ function RouteComponent() {
       </Modal>
       <Modal isOpen={isDeleteModalOpen} onClose={closeDeleteModal}>
         <TwoButtonModalTemplate
-          text='문항을 삭제할까요?'
+          text='문제을 삭제할까요?'
           leftButtonText='아니오'
           rightButtonText='예'
           handleClickLeftButton={closeDeleteModal}
diff --git a/apps/admin/src/routes/_GNBLayout/problem/register/index.tsx b/apps/admin/src/routes/_GNBLayout/problem/register/index.tsx
index 69a0a088..75a28339 100644
--- a/apps/admin/src/routes/_GNBLayout/problem/register/index.tsx
+++ b/apps/admin/src/routes/_GNBLayout/problem/register/index.tsx
@@ -70,11 +70,9 @@ function RouteComponent() {
   } = useForm({
     defaultValues: transformToProblemUpdateRequest({} as ProblemInfoResp),
   });
-  const { data: customIdData } = getCustomId();
   const problemType = watch('problemType');
   const concepts = watch('concepts');
   const selectedAnswerType = watch('answerType');
-  const selectedAnswer = watch('answer');
 
   const {
     fields: childProblems,
@@ -90,11 +88,8 @@ function RouteComponent() {
   };
 
   const handleClickSave = (data: ProblemPostRequest) => {
-    const customId = customIdData?.customId || 'temp-id';
-
     const completeData: ProblemPostRequest = {
       ...data,
-      customId: customId,
       // answer 필드를 숫자로 변환 (메인 문제)
       answer: typeof data.answer === 'string' ? parseInt(data.answer, 10) : data.answer,
       // childProblems의 answer 필드도 숫자로 변환
@@ -118,7 +113,7 @@ function RouteComponent() {
         },
         onError: (error: unknown) => {
           console.error('생성 실패 상세:', error);
-          toast.error('생성에 실패했습니다');
+          toast.error((error as { message?: string })?.message || '생성에 실패했습니다');
         },
       }
     );
@@ -217,11 +212,7 @@ function RouteComponent() {
         }}
       />
       <form onSubmit={handleSubmit(handleClickSave)}>
-        {showDetailSections ? (
-          <Header title={`문제 ID : ${customIdData?.customId}`} />
-        ) : (
-          <Header title='문항 등록' />
-        )}
+        <Header title='문제 등록' />
         <ProblemEssentialInput>
           <Controller
             control={control}
@@ -246,7 +237,7 @@ function RouteComponent() {
                 control={control}
                 name='practiceTestId'
                 rules={{
-                  required: '모의고사와 문항 번호는 필수 입력 항목입니다.',
+                  required: '모의고사와 문제 번호는 필수 입력 항목입니다.',
                 }}
                 render={({ field }) => (
                   <ProblemEssentialInput.PracticeTest
@@ -265,14 +256,19 @@ function RouteComponent() {
               <ProblemEssentialInput.PraticeTestNumber
                 {...register('practiceTestNo', {
                   valueAsNumber: true,
-                  required: '모의고사와 문항 번호는 필수 입력 항목입니다.',
+                  required: '모의고사와 문제 번호는 필수 입력 항목입니다.',
                 })}
               />
             </ProblemEssentialInput.PracticeTestSection>
           )}
           <ProblemEssentialInput.ProblemError
             isError={Boolean(errors.practiceTestId || errors.practiceTestNo)}
-            errorMessage='모의고사와 문항 번호는 필수 입력 항목입니다.'
+            errorMessage='모의고사와 문제 번호는 필수 입력 항목입니다.'
+          />
+          <ProblemEssentialInput.ProblemID
+            {...register('customId', {
+              required: '문제 ID는 필수 입력 항목입니다.',
+            })}
           />
         </ProblemEssentialInput>
 
@@ -298,7 +294,6 @@ function RouteComponent() {
                 setValue={setValue}
                 concepts={concepts}
                 selectedAnswerType={selectedAnswerType}
-                selectedAnswer={selectedAnswer}
                 tagsNameMap={tagsNameMap}
                 fetchedProblemData={undefined}
                 onRemoveTag={handleRemoveTag}
diff --git a/apps/admin/src/routes/_GNBLayout/publish/register/$publishDate/$studentId/index.tsx b/apps/admin/src/routes/_GNBLayout/publish/register/$publishDate/$studentId/index.tsx
index 780288b5..56dd2a3c 100644
--- a/apps/admin/src/routes/_GNBLayout/publish/register/$publishDate/$studentId/index.tsx
+++ b/apps/admin/src/routes/_GNBLayout/publish/register/$publishDate/$studentId/index.tsx
@@ -11,7 +11,7 @@ import {
 import { useInvalidate } from '@hooks';
 import { createFileRoute, Link, useRouter } from '@tanstack/react-router';
 import { GetProblemSetSearchParams } from '@types';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { Slide, toast, ToastContainer } from 'react-toastify';
 
@@ -36,7 +36,34 @@ function RouteComponent() {
   const { data: problemSetList } = getProblemSetSearch(searchQuery);
   const { mutate: mutatePostPublish } = postPublish();
 
-  const { register, handleSubmit, reset } = useForm<GetProblemSetSearchParams>();
+  const { register, handleSubmit, reset, watch } = useForm<GetProblemSetSearchParams>();
+
+  const watchedSetTitle = watch('setTitle');
+  const watchedProblemTitle = watch('problemTitle');
+  useEffect(() => {
+    const debounceTimer = setTimeout(() => {
+      const trimmedSetTitle = (watchedSetTitle ?? '').toString().trim();
+      const trimmedProblemTitle = (watchedProblemTitle ?? '').toString().trim();
+
+      setSearchQuery((prev) => {
+        const nextQuery: GetProblemSetSearchParams = {
+          ...prev,
+          setTitle: trimmedSetTitle || undefined,
+          problemTitle: trimmedProblemTitle || undefined,
+        };
+
+        const cleaned = Object.fromEntries(
+          Object.entries(nextQuery).filter(([, value]) =>
+            Array.isArray(value) ? value.length > 0 : Boolean(value)
+          )
+        ) as GetProblemSetSearchParams;
+
+        return cleaned;
+      });
+    }, 300);
+
+    return () => clearTimeout(debounceTimer);
+  }, [watchedSetTitle, watchedProblemTitle]);
 
   const handleClickSearch = (data: GetProblemSetSearchParams) => {
     const filteredData = Object.fromEntries(
@@ -108,7 +135,7 @@ function RouteComponent() {
           />
           <SearchInput
             sizeType='long'
-            label='문항 타이틀'
+            label='문제 타이틀'
             placeholder='입력해주세요.'
             {...register('problemTitle', { required: false })}
           />
diff --git a/apps/admin/src/routes/_GNBLayout/teacher/index.tsx b/apps/admin/src/routes/_GNBLayout/teacher/index.tsx
index 6472ea8a..464a3d2b 100644
--- a/apps/admin/src/routes/_GNBLayout/teacher/index.tsx
+++ b/apps/admin/src/routes/_GNBLayout/teacher/index.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { createFileRoute } from '@tanstack/react-router';
 import { Button, FloatingButton, Header, Input, Modal, TwoButtonModalTemplate } from '@components';
 import { useForm } from 'react-hook-form';
@@ -31,7 +31,7 @@ function RouteComponent() {
     openModal: openDeleteModal,
     closeModal: closeDeleteModal,
   } = useModal();
-  const { register, handleSubmit } = useForm<{
+  const { register, handleSubmit, watch } = useForm<{
     query: string;
   }>();
 
@@ -40,6 +40,15 @@ function RouteComponent() {
   const { mutateAsync: deleteTeacherMutateAsync } = deleteTeacher();
   const queryClient = useQueryClient();
 
+  const watchedQuery = watch('query');
+  useEffect(() => {
+    const debounceTimer = setTimeout(() => {
+      setSearchQuery((watchedQuery ?? '').trim());
+    }, 300);
+
+    return () => clearTimeout(debounceTimer);
+  }, [watchedQuery]);
+
   const handleClickSearch = (data: { query: string }) => {
     setSearchQuery(data.query.trim());
   };
diff --git a/packages/pointer-editor/libs/components/EditorModal.jsx b/packages/pointer-editor/libs/components/EditorModal.jsx
index b05b2433..24b52ec4 100644
--- a/packages/pointer-editor/libs/components/EditorModal.jsx
+++ b/packages/pointer-editor/libs/components/EditorModal.jsx
@@ -1,4 +1,4 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useRef, useEffect } from 'react';
 import { Box, Paper, Typography, Button, IconButton, Divider } from '@mui/material';
 import {
   TextFields,
@@ -49,9 +49,10 @@ function SortableBlock({ id, block, onUpdate, onDelete }) {
     <Paper
       ref={setNodeRef}
       style={style}
+      data-block-id={id}
       sx={{
-        mb: 2,
-        p: 2,
+        mb: { xs: 1, md: 2 },
+        p: { xs: 1, md: 2 },
         position: 'relative',
         border: isDragging ? '2px dashed #1976d2' : '1px solid #e0e0e0',
       }}>
@@ -91,16 +92,39 @@ function SortableBlock({ id, block, onUpdate, onDelete }) {
 // 블럭 에디터 (Context 없이 상태/props만)
 function LocalDraggableBlockEditor({ blocks, setBlocks }) {
   const [, setAnchorEl] = useState(null);
+  const lastAddedBlockId = useRef(null);
+  const editorContainerRef = useRef(null);
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
     useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
   );
 
+  const scrollToNewBlock = useCallback((blockId) => {
+    setTimeout(() => {
+      const blockElement = document.querySelector(`[data-block-id="${blockId}"]`);
+      if (blockElement) {
+        blockElement.scrollIntoView({
+          behavior: 'smooth',
+          block: 'center',
+          inline: 'nearest',
+        });
+
+        blockElement.style.transition = 'box-shadow 0.3s ease';
+        blockElement.style.boxShadow = '0 0 0 3px rgba(25, 118, 210, 0.3)';
+
+        setTimeout(() => {
+          blockElement.style.boxShadow = '';
+        }, 2000);
+      }
+    }, 100);
+  }, []);
+
   // 블럭 추가
   const handleAddBlock = useCallback(
     (type) => {
+      const newBlockId = Date.now() + Math.random();
       const newBlock = {
-        id: Date.now() + Math.random(),
+        id: newBlockId,
         isNew: true,
         type,
         data: '',
@@ -108,10 +132,12 @@ function LocalDraggableBlockEditor({ blocks, setBlocks }) {
           type === 'TEXT' ? 'text-align: left; padding: 16px;' : 'text-align: center; width: 50%;',
         rank: blocks.length,
       };
+      lastAddedBlockId.current = newBlockId;
       setBlocks((prev) => [...prev, newBlock]);
       setAnchorEl(null);
+      scrollToNewBlock(newBlockId);
     },
-    [setBlocks, blocks.length]
+    [setBlocks, blocks.length, scrollToNewBlock]
   );
 
   // 블럭 수정
@@ -170,56 +196,91 @@ function LocalDraggableBlockEditor({ blocks, setBlocks }) {
 
   return (
     <Box
+      ref={editorContainerRef}
       sx={{
-        p: 2,
-        minHeight: 500,
+        p: { xs: 1, md: 2 },
+        minHeight: { xs: '40vh', md: '50vh' },
         background: '#fafbfc',
         borderRadius: 3,
         border: '1px solid #eee',
         height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
       }}>
-      <Typography variant='h6' sx={{ mb: 2 }}>
-        블록 추가
-      </Typography>
-      <Box sx={{ display: 'flex', gap: 2, mb: 2 }}>
-        <Button
-          variant='outlined'
-          startIcon={<TextFields />}
-          onClick={() => handleAddBlock('TEXT')}>
-          텍스트 블록 추가
-        </Button>
-        <Button
-          variant='contained'
-          startIcon={<ImageIcon />}
-          onClick={() => handleAddBlock('IMAGE')}>
-          이미지 블록 추가
-        </Button>
-      </Box>
-      <Divider sx={{ mb: 2 }} />
-      {blocks.length === 0 ? (
-        <Typography color='text.secondary' align='center' sx={{ mt: 10 }}>
-          블록을 추가해주세요
+      <Box sx={{ flexShrink: 0 }}>
+        <Typography
+          variant='h6'
+          sx={{
+            mb: { xs: 1, md: 2 },
+            fontSize: { xs: '1rem', md: '1.25rem' },
+          }}>
+          블록 추가
         </Typography>
-      ) : (
-        <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
-          <SortableContext items={blockIds} strategy={verticalListSortingStrategy}>
-            {blocks.map((block) => (
-              <SortableBlock
-                key={block.id}
-                id={block.id}
-                block={block}
-                onUpdate={handleUpdateBlock}
-                onDelete={handleDeleteBlock}
-              />
-            ))}
-          </SortableContext>
-        </DndContext>
-      )}
+        <Box
+          sx={{
+            display: 'flex',
+            gap: { xs: 1, md: 2 },
+            mb: { xs: 1, md: 2 },
+            flexDirection: { xs: 'column', sm: 'row' },
+          }}>
+          <Button
+            variant='outlined'
+            startIcon={<TextFields />}
+            onClick={() => handleAddBlock('TEXT')}>
+            텍스트 블록 추가
+          </Button>
+          <Button
+            variant='contained'
+            startIcon={<ImageIcon />}
+            onClick={() => handleAddBlock('IMAGE')}>
+            이미지 블록 추가
+          </Button>
+        </Box>
+        <Divider sx={{ mb: 2 }} />
+      </Box>
+      <Box
+        sx={{
+          flex: 1,
+          overflow: 'auto',
+          minHeight: 0,
+        }}>
+        {blocks.length === 0 ? (
+          <Typography color='text.secondary' align='center' sx={{ mt: 10 }}>
+            블록을 추가해주세요
+          </Typography>
+        ) : (
+          <DndContext
+            sensors={sensors}
+            collisionDetection={closestCenter}
+            onDragEnd={handleDragEnd}>
+            <SortableContext items={blockIds} strategy={verticalListSortingStrategy}>
+              {blocks.map((block) => (
+                <SortableBlock
+                  key={block.id}
+                  id={block.id}
+                  block={block}
+                  onUpdate={handleUpdateBlock}
+                  onDelete={handleDeleteBlock}
+                />
+              ))}
+            </SortableContext>
+          </DndContext>
+        )}
+      </Box>
     </Box>
   );
 }
 
 function EditorModal({ blocks, onClose, onSave }) {
+  // body 스크롤 방지
+  useEffect(() => {
+    document.body.style.overflow = 'hidden';
+
+    return () => {
+      document.body.style.overflow = '';
+    };
+  }, []);
+
   // props로 받은 데이터를 내부 상태로 관리하고, id가 없는 블록들에 대해 자동으로 id 생성
   const [internalBlocks, setInternalBlocks] = useState(() => {
     return (blocks || []).map((block) => ({
@@ -272,9 +333,9 @@ function EditorModal({ blocks, onClose, onSave }) {
       }}>
       <Paper
         sx={{
-          width: '90vw',
-          height: '90vh',
-          p: 4,
+          width: { xs: '95vw', md: '90vw', lg: '85vw' },
+          height: { xs: '95vh', md: '90vh' },
+          p: { xs: 2, md: 4 },
           display: 'flex',
           flexDirection: 'column',
           gap: 2,
@@ -282,7 +343,14 @@ function EditorModal({ blocks, onClose, onSave }) {
         <Typography variant='h5' sx={{ mb: 2 }}>
           문제 입력
         </Typography>
-        <Box sx={{ display: 'flex', gap: 4, flex: 1, minHeight: 0 }}>
+        <Box
+          sx={{
+            display: 'flex',
+            gap: { xs: 2, md: 4 },
+            flex: 1,
+            minHeight: 0,
+            flexDirection: 'row',
+          }}>
           {/* 좌측: 블럭 에디터 */}
           <Box
             sx={{
@@ -298,18 +366,25 @@ function EditorModal({ blocks, onClose, onSave }) {
           {/* 우측: 미리보기 */}
           <Box
             sx={{
-              flex: 1.5,
+              flex: { xs: 1, sm: 1.5 },
               minWidth: 0,
               bgcolor: '#f7f7f7',
               borderRadius: 3,
-              p: 3,
+              p: { xs: 2, md: 3 },
               overflow: 'auto',
               height: '100%',
             }}>
             <ProblemViewer problem={problem} />
           </Box>
         </Box>
-        <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 2, mt: 2 }}>
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'flex-end',
+            gap: { xs: 1, md: 2 },
+            mt: { xs: 1, md: 2 },
+            flexDirection: { xs: 'column', sm: 'row' },
+          }}>
           <Button variant='outlined' onClick={onClose}>
             취소
           </Button>
diff --git a/packages/pointer-editor/libs/components/editor/text-block/TextBlockEditor.jsx b/packages/pointer-editor/libs/components/editor/text-block/TextBlockEditor.jsx
index 026fc671..092d523e 100644
--- a/packages/pointer-editor/libs/components/editor/text-block/TextBlockEditor.jsx
+++ b/packages/pointer-editor/libs/components/editor/text-block/TextBlockEditor.jsx
@@ -662,8 +662,19 @@ const TextBlockEditor = memo(
             </Box>
           </Box>
 
-          <Box sx={{ display: 'flex', gap: 2, alignItems: 'center', mb: 2 }}>
+          <Box
+            sx={{
+              display: 'flex',
+              gap: 1,
+              alignItems: 'center',
+              mb: 2,
+              width: '100%',
+            }}>
             <Button
+              sx={{
+                flex: 1,
+                minWidth: 0,
+              }}
               variant={state.isBold ? 'contained' : 'outlined'}
               size='small'
               onClick={() => {
@@ -675,6 +686,10 @@ const TextBlockEditor = memo(
               <BoldIcon width={10} height={14} />
             </Button>
             <Button
+              sx={{
+                flex: 1,
+                minWidth: 0,
+              }}
               variant={state.isItalic ? 'contained' : 'outlined'}
               size='small'
               onClick={() => {
@@ -686,6 +701,10 @@ const TextBlockEditor = memo(
               <ItalicIcon width={10} height={12} />
             </Button>
             <Button
+              sx={{
+                flex: 1,
+                minWidth: 0,
+              }}
               variant={state.isUnderline ? 'contained' : 'outlined'}
               size='small'
               onClick={() => {
@@ -697,12 +716,20 @@ const TextBlockEditor = memo(
               <UnderlineIcon width={16} height={16} />
             </Button>
             <Button
+              sx={{
+                flex: 1,
+                minWidth: 0,
+              }}
               variant={state.hasColor ? 'contained' : 'outlined'}
               size='small'
               onClick={handleColor}>
               <ColorIcon width={16} height={16} />
             </Button>
             <Button
+              sx={{
+                flex: 1,
+                minWidth: 0,
+              }}
               variant={state.hasBorder ? 'contained' : 'outlined'}
               size='small'
               onClick={() => {