From 76e9a483cf9dcf79531507815a58ba8dfac441a7 Mon Sep 17 00:00:00 2001
From: sterdsterd <sterdsterd@icloud.com>
Date: Tue, 19 Aug 2025 19:23:56 +0900
Subject: [PATCH 1/4] refactor: Comment out unused component in
 MainProblemSection for cleaner code

---
 apps/admin/src/components/problem/MainProblemSection.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/admin/src/components/problem/MainProblemSection.tsx b/apps/admin/src/components/problem/MainProblemSection.tsx
index 6b21403a..db73a1da 100644
--- a/apps/admin/src/components/problem/MainProblemSection.tsx
+++ b/apps/admin/src/components/problem/MainProblemSection.tsx
@@ -299,7 +299,7 @@ export const MainProblemSection = ({
         </ComponentWithLabel>
 
         <div className='grid grid-cols-2 gap-1200'>
-          <div>
+          {/* <div>
             <ComponentWithLabel label='메인 문제 분석 선택' direction='column'>
               <Controller
                 control={control}
@@ -334,7 +334,7 @@ export const MainProblemSection = ({
                 )}
               />
             </ComponentWithLabel>
-          </div>
+          </div> */}
           <div>
             <ComponentWithLabel label='포인팅 질문' labelWidth='15.4rem' direction='column'>
               <Button

From b1fc8c45d1e910e53cf5e498ffe735ea05b3c335 Mon Sep 17 00:00:00 2001
From: sterdsterd <sterdsterd@icloud.com>
Date: Tue, 19 Aug 2025 22:57:50 +0900
Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=EB=A9=94=EC=9D=B8=20=EB=AC=B8?=
 =?UTF-8?q?=EC=A0=9C=20=ED=8F=AC=EC=9D=B8=ED=8C=85=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../problem/ChildProblemSection.tsx           |   3 +-
 .../components/problem/MainProblemSection.tsx | 497 +++++++++++-------
 .../_GNBLayout/problem/$problemId/index.tsx   |  19 +-
 3 files changed, 339 insertions(+), 180 deletions(-)

diff --git a/apps/admin/src/components/problem/ChildProblemSection.tsx b/apps/admin/src/components/problem/ChildProblemSection.tsx
index f9ef5b89..b5fa997a 100644
--- a/apps/admin/src/components/problem/ChildProblemSection.tsx
+++ b/apps/admin/src/components/problem/ChildProblemSection.tsx
@@ -108,7 +108,7 @@ export const ChildProblemSection = ({
       };
 
       return {
-        // id: blockData.id || 0,
+        // id: blockData.id ?? 0,
         rank: index,
         type: blockData.type,
         data: blockData.data || blockData.content,
@@ -291,6 +291,7 @@ export const ChildProblemSection = ({
                     <AnswerInput.AnswerInputSection
                       selectedAnswerType={watchedAnswerType}
                       selectedAnswer={watchedAnswer}
+                      isError={false}
                       {...register(`childProblems.${index}.answer`, { valueAsNumber: true })}
                     />
                   </AnswerInput>
diff --git a/apps/admin/src/components/problem/MainProblemSection.tsx b/apps/admin/src/components/problem/MainProblemSection.tsx
index db73a1da..3eef89a3 100644
--- a/apps/admin/src/components/problem/MainProblemSection.tsx
+++ b/apps/admin/src/components/problem/MainProblemSection.tsx
@@ -1,5 +1,14 @@
 import { useState, ChangeEvent } from 'react';
-import { AnswerInput, ComponentWithLabel, Input, SectionCard, Tag, Button } from '@components';
+import {
+  AnswerInput,
+  ComponentWithLabel,
+  Input,
+  SectionCard,
+  Tag,
+  Button,
+  Modal,
+  TagSelectModal,
+} from '@components';
 import {
   Controller,
   Control,
@@ -10,8 +19,10 @@ import {
 } from 'react-hook-form';
 import { components } from '@schema';
 import EditorModal from '@repo/pointer-editor/EditorModal';
+import { IcDelete, IcPlus } from '@svg';
+import { useModal } from '@hooks';
 
-import { ImageUpload, LevelSelect, TextArea } from '@/components/problem';
+import { LevelSelect, TextArea } from '@/components/problem';
 import { ProblemAnswerType } from '@/types/component';
 
 type ProblemUpdateRequest = components['schemas']['ProblemUpdateRequest'];
@@ -46,17 +57,26 @@ export const MainProblemSection = ({
   const [isEditorModalOpen, setIsEditorModalOpen] = useState(false);
   const [isPointingQuestionModalOpen, setIsPointingQuestionModalOpen] = useState(false);
   const [isPointingCommentModalOpen, setIsPointingCommentModalOpen] = useState(false);
+  const [currentPointingIndex, setCurrentPointingIndex] = useState<number | null>(null);
 
   // 임시로 수정된 블록들을 저장하는 상태
   const [tempMainProblemBlocks, setTempMainProblemBlocks] = useState<unknown[] | null>(
     fetchedProblemData?.problemContent?.blocks || null
   );
-  const [tempPointingQuestionBlocks, setTempPointingQuestionBlocks] = useState<unknown[] | null>(
-    fetchedProblemData?.pointings?.[0]?.questionContent?.blocks || null
-  );
-  const [tempPointingCommentBlocks, setTempPointingCommentBlocks] = useState<unknown[] | null>(
-    fetchedProblemData?.pointings?.[0]?.commentContent?.blocks || null
-  );
+  const [tempPointingQuestionBlocks, setTempPointingQuestionBlocks] = useState<
+    Record<number, unknown[] | null>
+  >({});
+  const [tempPointingCommentBlocks, setTempPointingCommentBlocks] = useState<
+    Record<number, unknown[] | null>
+  >({});
+
+  // Tag modal for main pointings
+  const {
+    isOpen: isMainPointingTagModalOpen,
+    openModal: openMainPointingTagModal,
+    closeModal: closeMainPointingTagModal,
+  } = useModal();
+  const [currentMainPointingTagList, setCurrentMainPointingTagList] = useState<number[]>([]);
 
   const handleOpenEditorModal = () => {
     setIsEditorModalOpen(true);
@@ -66,7 +86,8 @@ export const MainProblemSection = ({
     setIsEditorModalOpen(false);
   };
 
-  const handleOpenPointingQuestionModal = () => {
+  const handleOpenPointingQuestionModal = (index: number) => {
+    setCurrentPointingIndex(index);
     setIsPointingQuestionModalOpen(true);
   };
 
@@ -74,7 +95,8 @@ export const MainProblemSection = ({
     setIsPointingQuestionModalOpen(false);
   };
 
-  const handleOpenPointingCommentModal = () => {
+  const handleOpenPointingCommentModal = (index: number) => {
+    setCurrentPointingIndex(index);
     setIsPointingCommentModalOpen(true);
   };
 
@@ -101,6 +123,18 @@ export const MainProblemSection = ({
   const minutes = Math.floor((watchedRecommendedTimeSec || 0) / 60);
   const seconds = Math.max(0, (watchedRecommendedTimeSec || 0) % 60);
 
+  type MainPointing = components['schemas']['PointingUpdateRequest'];
+  const watchedPointings = useWatch<ProblemUpdateRequest>({
+    control,
+    name: 'pointings',
+  }) as MainPointing[] | undefined;
+
+  const pointingList = (
+    Array.isArray(watchedPointings)
+      ? watchedPointings
+      : (fetchedProblemData?.pointings as unknown as MainPointing[] | undefined) || []
+  ) as MainPointing[];
+
   const handleChangeMinutes = (e: ChangeEvent<HTMLInputElement>) => {
     const raw = e.target.value.trim();
     const nextMinutes = raw === '' ? 0 : Math.max(0, Number(raw));
@@ -120,14 +154,14 @@ export const MainProblemSection = ({
   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,
@@ -144,83 +178,128 @@ export const MainProblemSection = ({
   };
 
   const handleSavePointingQuestion = (blocks: unknown[]) => {
+    if (currentPointingIndex === null) return;
     const formattedBlocks = formatBlocks(blocks);
-    setValue('pointings.0.questionContent.blocks', formattedBlocks);
-    setTempPointingQuestionBlocks(blocks); // 임시 상태에 원본 블록 저장
+    setValue(`pointings.${currentPointingIndex}.questionContent.blocks`, formattedBlocks);
+    setTempPointingQuestionBlocks((prev) => ({ ...prev, [currentPointingIndex!]: blocks }));
     console.log('Updated pointing question blocks:', formattedBlocks);
     setIsPointingQuestionModalOpen(false);
   };
 
   const handleSavePointingComment = (blocks: unknown[]) => {
+    if (currentPointingIndex === null) return;
     const formattedBlocks = formatBlocks(blocks);
-    setValue('pointings.0.commentContent.blocks', formattedBlocks);
-    setTempPointingCommentBlocks(blocks); // 임시 상태에 원본 블록 저장
+    setValue(`pointings.${currentPointingIndex}.commentContent.blocks`, formattedBlocks);
+    setTempPointingCommentBlocks((prev) => ({ ...prev, [currentPointingIndex!]: blocks }));
     console.log('Updated pointing comment blocks:', formattedBlocks);
     setIsPointingCommentModalOpen(false);
   };
+
+  const handleAddPointing = () => {
+    const current = (pointingList || []).filter(Boolean) as MainPointing[];
+    const newPointing = {
+      // id: undefined,
+      no: current.length + 1,
+      questionContent: { blocks: [] },
+      commentContent: { blocks: [] },
+      concepts: [],
+    };
+    setValue('pointings', [...current, newPointing], { shouldDirty: true, shouldValidate: true });
+  };
+
+  const handleDeletePointing = (index: number) => {
+    const current = (pointingList || []).filter(Boolean) as MainPointing[];
+    const updated = current.filter((_, i) => i !== index).map((p, i) => ({ ...p, no: i + 1 }));
+    setValue('pointings', updated, { shouldDirty: true, shouldValidate: true });
+  };
+
+  const hasPointingBlocks = (type: 'question' | 'comment', index: number): boolean => {
+    if (type === 'question') {
+      const temp = tempPointingQuestionBlocks[index];
+      const fetched = fetchedProblemData?.pointings?.[index]?.questionContent?.blocks;
+      return Boolean((temp && temp.length > 0) || (fetched && fetched.length > 0));
+    }
+    const temp = tempPointingCommentBlocks[index];
+    const fetched = fetchedProblemData?.pointings?.[index]?.commentContent?.blocks;
+    return Boolean((temp && temp.length > 0) || (fetched && fetched.length > 0));
+  };
+
+  const handleOpenMainPointingTagModal = (index: number, concepts: number[]) => {
+    setCurrentPointingIndex(index);
+    setCurrentMainPointingTagList(concepts || []);
+    openMainPointingTagModal();
+  };
+
+  const handleChangeMainPointingTagList = (tagList: number[]) => {
+    if (currentPointingIndex === null) return;
+    setValue(`pointings.${currentPointingIndex}.concepts`, [...tagList], {
+      shouldDirty: true,
+      shouldValidate: true,
+    });
+  };
   return (
-    <SectionCard>
-      <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', { 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>
-        <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)}
+    <div>
+      <h3 className='font-bold-32 mb-600 text-black'>메인 문제 입력</h3>
+      <SectionCard>
+        <div className='flex flex-col gap-800'>
+          <ComponentWithLabel label='타이틀' labelWidth='10rem'>
+            <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>
+          <ComponentWithLabel label='개념 태그' labelWidth='10rem'>
+            <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='10rem'>
+            <div className='rounded-400 w-full'>
+              <AnswerInput>
+                <AnswerInput.AnswerTypeSection
+                  selectedAnswerType={selectedAnswerType}
+                  {...answerTypeRegister}
+                  onChange={(e) => {
+                    answerTypeRegister.onChange(e);
+                  }}
+                />
+                <AnswerInput.AnswerInputSection
+                  selectedAnswerType={selectedAnswerType}
+                  selectedAnswer={watchedAnswer}
+                  isError={Boolean(errors?.answer)}
+                  {...register('answer', {
+                    valueAsNumber: true,
+                    required: '필수 입력 항목입니다.',
+                  })}
                 />
-              ))}
-            <Tag label='태그 추가하기' onClick={onOpenTagModal} color='lightgray' />
-            {concepts && concepts?.length === 0 && (
-              <p className='font-medium-14 text-red mt-200'>태그를 추가해주세요.</p>
+              </AnswerInput>
+            </div>
+            {(errors?.answerType || errors?.answer) && (
+              <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}
-                {...answerTypeRegister}
-                onChange={(e) => {
-                  answerTypeRegister.onChange(e);
-                }}
-              />
-              <AnswerInput.AnswerInputSection
-                selectedAnswerType={selectedAnswerType}
-                selectedAnswer={watchedAnswer}
-                isError={Boolean(errors?.answer)}
-                {...register('answer', {
-                  valueAsNumber: true,
-                  required: '필수 입력 항목입니다.',
-                })}
-              />
-            </AnswerInput>
-          </div>
-          {(errors?.answerType || errors?.answer) && (
-            <p className='font-medium-14 text-red mt-200'>필수 입력 항목입니다.</p>
-          )}
-        </ComponentWithLabel>
+          </ComponentWithLabel>
 
-        <div className='flex w-full items-center justify-between'>
-          <ComponentWithLabel label='메인 문제 난도 선택' labelWidth='15.4rem'>
+          <ComponentWithLabel label='난이도' labelWidth='10rem'>
             <div className={`${errors?.difficulty ? 'border-red rounded-400 border p-400' : ''}`}>
               <Controller
                 control={control}
@@ -237,68 +316,71 @@ export const MainProblemSection = ({
               </p>
             )}
           </ComponentWithLabel>
-          <div>
-            <ComponentWithLabel label='권장 시간 입력'>
-              <div className='flex gap-600'>
-                <div className='flex items-center gap-400'>
-                  <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}
-                    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)) ||
-                        '필수 입력 항목입니다.',
-                    })}
-                  />
-                </div>
+          <ComponentWithLabel label='권장 시간' labelWidth='10rem'>
+            <div className='flex gap-600'>
+              <div className='flex items-center gap-400'>
+                <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}
+                  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)) ||
+                      '필수 입력 항목입니다.',
+                  })}
+                />
               </div>
-              {errors?.recommendedTimeSec && (
-                <p className='font-medium-14 text-red mt-200'>
-                  {(errors.recommendedTimeSec as { message?: string })?.message ||
-                    '필수 입력 항목입니다.'}
-                </p>
-              )}
-            </ComponentWithLabel>
-          </div>
-        </div>
-        <ComponentWithLabel label='메인 문제 입력' labelWidth='15.4rem' direction='column'>
-          <Button
-            type='button'
-            variant={tempMainProblemBlocks && tempMainProblemBlocks?.length > 0 ? 'dark' : 'light'}
-            sizeType='full'
-            onClick={handleOpenEditorModal}>
-            {tempMainProblemBlocks && tempMainProblemBlocks?.length > 0
-              ? '입력 확인 및 수정하기'
-              : '입력 바로가기'}
-          </Button>
-        </ComponentWithLabel>
-
-        <div className='grid grid-cols-2 gap-1200'>
+            </div>
+            {errors?.recommendedTimeSec && (
+              <p className='font-medium-14 text-red mt-200'>
+                {(errors.recommendedTimeSec as { message?: string })?.message ||
+                  '필수 입력 항목입니다.'}
+              </p>
+            )}
+          </ComponentWithLabel>
+
+          <ComponentWithLabel label='문제 내용' labelWidth='10rem'>
+            <Button
+              type='button'
+              variant={
+                tempMainProblemBlocks && tempMainProblemBlocks?.length > 0 ? 'dark' : 'light'
+              }
+              sizeType='full'
+              onClick={handleOpenEditorModal}>
+              {tempMainProblemBlocks && tempMainProblemBlocks?.length > 0
+                ? '입력 확인 및 수정하기'
+                : '입력 바로가기'}
+            </Button>
+          </ComponentWithLabel>
+
+          <ComponentWithLabel label='메모 작성' labelWidth='10rem'>
+            <TextArea placeholder={'여기에 메모를 작성해주세요.'} {...register('memo')} />
+          </ComponentWithLabel>
+
           {/* <div>
             <ComponentWithLabel label='메인 문제 분석 선택' direction='column'>
               <Controller
@@ -335,45 +417,93 @@ export const MainProblemSection = ({
               />
             </ComponentWithLabel>
           </div> */}
-          <div>
-            <ComponentWithLabel label='포인팅 질문' labelWidth='15.4rem' direction='column'>
-              <Button
-                type='button'
-                variant={
-                  tempPointingQuestionBlocks && tempPointingQuestionBlocks?.length > 0
-                    ? 'dark'
-                    : 'light'
-                }
-                sizeType='full'
-                onClick={handleOpenPointingQuestionModal}>
-                {tempPointingQuestionBlocks && tempPointingQuestionBlocks?.length > 0
-                  ? '입력 확인 및 수정하기'
-                  : '입력 바로가기'}
-              </Button>
-            </ComponentWithLabel>
-          </div>
-          <div>
-            <ComponentWithLabel label='포인팅 처방' labelWidth='15.4rem' direction='column'>
-              <Button
-                type='button'
-                variant={
-                  tempPointingCommentBlocks && tempPointingCommentBlocks?.length > 0
-                    ? 'dark'
-                    : 'light'
-                }
-                sizeType='full'
-                onClick={handleOpenPointingCommentModal}>
-                {tempPointingCommentBlocks && tempPointingCommentBlocks?.length > 0
-                  ? '입력 확인 및 수정하기'
-                  : '입력 바로가기'}
-              </Button>
-            </ComponentWithLabel>
-          </div>
         </div>
+      </SectionCard>
+      <h3 className='font-bold-32 mt-1200 mb-600 text-black'>메인 문제 포인팅</h3>
+      <div className='flex flex-col gap-800'>
+        {pointingList.map((pointing, index) => {
+          const concepts = ((pointing && pointing.concepts) || []) as number[];
+          return (
+            <div
+              key={index}
+              className='border-lightgray500 rounded-400 flex flex-col gap-800 border bg-white p-800'>
+              <div className='flex items-center justify-between'>
+                <h1 className='font-bold-20 text-black'>{index + 1}번 포인팅</h1>
+                {index > 0 && (
+                  <button
+                    type='button'
+                    onClick={() => handleDeletePointing(index)}
+                    className='font-medium-16 text-red flex items-center gap-100 rounded-full border border-red-300 bg-red-100 py-200 pr-400 pl-300 break-keep whitespace-nowrap transition-colors duration-200 hover:bg-red-200/70'>
+                    <IcDelete className='h-[2.4rem] w-[2.4rem] scale-70' />
+                    포인팅 삭제
+                  </button>
+                )}
+              </div>
+              <ComponentWithLabel label='개념 태그'>
+                <div className='flex flex-wrap gap-200'>
+                  {concepts &&
+                    concepts.length > 0 &&
+                    concepts.map((tag) => (
+                      <Tag
+                        key={tag}
+                        label={tagsNameMap[tag] ?? ''}
+                        removable
+                        color='dark'
+                        onClick={() =>
+                          setValue(
+                            `pointings.${index}.concepts`,
+                            concepts.filter((t) => t !== tag),
+                            { shouldDirty: true, shouldValidate: true }
+                          )
+                        }
+                      />
+                    ))}
+                  <Tag
+                    label='태그 추가하기'
+                    onClick={() => handleOpenMainPointingTagModal(index, concepts || [])}
+                    color='lightgray'
+                  />
+                </div>
+              </ComponentWithLabel>
+              <div className='grid grid-cols-2 gap-1200'>
+                <div>
+                  <ComponentWithLabel label='질문' labelWidth='10rem' direction='column'>
+                    <Button
+                      type='button'
+                      variant={hasPointingBlocks('question', index) ? 'dark' : 'light'}
+                      sizeType='full'
+                      onClick={() => handleOpenPointingQuestionModal(index)}>
+                      {hasPointingBlocks('question', index)
+                        ? '입력 확인 및 수정하기'
+                        : '입력 바로가기'}
+                    </Button>
+                  </ComponentWithLabel>
+                </div>
+                <div>
+                  <ComponentWithLabel label='처방' labelWidth='10rem' direction='column'>
+                    <Button
+                      type='button'
+                      variant={hasPointingBlocks('comment', index) ? 'dark' : 'light'}
+                      sizeType='full'
+                      onClick={() => handleOpenPointingCommentModal(index)}>
+                      {hasPointingBlocks('comment', index)
+                        ? '입력 확인 및 수정하기'
+                        : '입력 바로가기'}
+                    </Button>
+                  </ComponentWithLabel>
+                </div>
+              </div>
+            </div>
+          );
+        })}
 
-        <ComponentWithLabel label='메모 작성' direction='column'>
-          <TextArea placeholder={'여기에 메모를 작성해주세요.'} {...register('memo')} />
-        </ComponentWithLabel>
+        <button
+          type='button'
+          onClick={handleAddPointing}
+          className='font-medium-18 mx-auto flex items-center gap-300 rounded-full border bg-gray-700 px-600 py-400 break-keep whitespace-nowrap text-white transition-colors duration-200 hover:bg-gray-600'>
+          <IcPlus className='h-[2.4rem] w-[2.4rem] scale-80' />
+          포인팅 추가하기
+        </button>
       </div>
 
       {/* EditorModal - 메인 문제 */}
@@ -389,8 +519,9 @@ export const MainProblemSection = ({
       {isPointingQuestionModalOpen && (
         <EditorModal
           blocks={
-            tempPointingQuestionBlocks ||
-            fetchedProblemData?.pointings?.[0]?.questionContent?.blocks ||
+            (currentPointingIndex !== null &&
+              (tempPointingQuestionBlocks[currentPointingIndex] ||
+                fetchedProblemData?.pointings?.[currentPointingIndex]?.questionContent?.blocks)) ||
             []
           }
           onSave={handleSavePointingQuestion}
@@ -402,14 +533,24 @@ export const MainProblemSection = ({
       {isPointingCommentModalOpen && (
         <EditorModal
           blocks={
-            tempPointingCommentBlocks ||
-            fetchedProblemData?.pointings?.[0]?.commentContent?.blocks ||
+            (currentPointingIndex !== null &&
+              (tempPointingCommentBlocks[currentPointingIndex] ||
+                fetchedProblemData?.pointings?.[currentPointingIndex]?.commentContent?.blocks)) ||
             []
           }
           onSave={handleSavePointingComment}
           onClose={handleClosePointingCommentModal}
         />
       )}
-    </SectionCard>
+
+      {/* TagSelectModal - 메인 포인팅 */}
+      <Modal isOpen={isMainPointingTagModalOpen} onClose={closeMainPointingTagModal}>
+        <TagSelectModal
+          onClose={closeMainPointingTagModal}
+          selectedTagList={currentMainPointingTagList}
+          handleChangeTagList={handleChangeMainPointingTagList}
+        />
+      </Modal>
+    </div>
   );
 };
diff --git a/apps/admin/src/routes/_GNBLayout/problem/$problemId/index.tsx b/apps/admin/src/routes/_GNBLayout/problem/$problemId/index.tsx
index 2597c00c..b66b675d 100644
--- a/apps/admin/src/routes/_GNBLayout/problem/$problemId/index.tsx
+++ b/apps/admin/src/routes/_GNBLayout/problem/$problemId/index.tsx
@@ -124,6 +124,23 @@ function RouteComponent() {
       // 이미지 ID가 undefined인 경우 명시적으로 undefined로 설정 (삭제 의미)
       mainAnalysisImageId: data.mainAnalysisImageId ?? undefined,
       mainHandAnalysisImageId: data.mainHandAnalysisImageId ?? undefined,
+      // 메인 포인팅 정규화 (id/answer 등 가공 및 no 재정렬)
+      pointings: (data.pointings || [])
+        .filter((p) => p)
+        .map((p, idx) => ({
+          ...p,
+          // id: p?.id && typeof p.id === 'string' ? undefined : p?.id,
+          no: idx + 1,
+          questionContent: {
+            // id: p?.questionContent?.id ?? undefined,
+            blocks: p?.questionContent?.blocks || [],
+          },
+          commentContent: {
+            // id: p?.commentContent?.id ?? undefined,
+            blocks: p?.commentContent?.blocks || [],
+          },
+          concepts: p?.concepts || [],
+        })),
       childProblems: data.childProblems?.map((child) => ({
         ...child,
         id: child.id && typeof child.id === 'string' ? undefined : child.id, // 새로 생성되는 경우 undefined로 명시
@@ -215,7 +232,7 @@ function RouteComponent() {
     // 현재 pointings 배열을 가져와서 새로운 pointing 추가 (id 보존)
     const currentPointings = watch(`childProblems.${childProblemIndex}.pointings`) || [];
     const newPointing: components['schemas']['PointingUpdateRequest'] = {
-      id: undefined, // 새로 생성되는 경우 undefined
+      // id: undefined, // 새로 생성되는 경우 undefined
       no: currentPointings.length + 1,
       questionContent: { blocks: [] },
       commentContent: { blocks: [] },

From 50d1d343a24a85beffc77ea433baedc8d04ef3a8 Mon Sep 17 00:00:00 2001
From: sterdsterd <sterdsterd@icloud.com>
Date: Tue, 19 Aug 2025 22:59:20 +0900
Subject: [PATCH 3/4] fix: Comment out warning message in ChildProblemSection
 and add padding to form in problem edit layout

---
 apps/admin/src/components/problem/ChildProblemSection.tsx     | 4 ++--
 apps/admin/src/routes/_GNBLayout/problem/$problemId/index.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/admin/src/components/problem/ChildProblemSection.tsx b/apps/admin/src/components/problem/ChildProblemSection.tsx
index b5fa997a..73418da9 100644
--- a/apps/admin/src/components/problem/ChildProblemSection.tsx
+++ b/apps/admin/src/components/problem/ChildProblemSection.tsx
@@ -233,9 +233,9 @@ export const ChildProblemSection = ({
     <SectionCard>
       <div className='flex items-baseline gap-[1.6rem]'>
         <h3 className='font-bold-32 text-black'>새끼 문제 등록</h3>
-        <p className='font-medium-14 text-lightgray500'>
+        {/* <p className='font-medium-14 text-lightgray500'>
           새끼 문제은 저장 후 항목 추가가 불가능해요
-        </p>
+        </p> */}
       </div>
 
       <div className='mt-800 flex flex-col gap-1600'>
diff --git a/apps/admin/src/routes/_GNBLayout/problem/$problemId/index.tsx b/apps/admin/src/routes/_GNBLayout/problem/$problemId/index.tsx
index b66b675d..97658dad 100644
--- a/apps/admin/src/routes/_GNBLayout/problem/$problemId/index.tsx
+++ b/apps/admin/src/routes/_GNBLayout/problem/$problemId/index.tsx
@@ -289,7 +289,7 @@ function RouteComponent() {
           fontSize: '1.6rem',
         }}
       />
-      <form onSubmit={handleSubmit(handleSubmitUpdate)}>
+      <form onSubmit={handleSubmit(handleSubmitUpdate)} className='pb-[10rem]'>
         <Header title='문제 수정' deleteButton='문제 삭제' onClickDelete={openDeleteModal} />
         <ProblemEssentialInput>
           <Controller

From 232f54b681df8e7f4d74ba058639bc7e3052c25c Mon Sep 17 00:00:00 2001
From: sterdsterd <sterdsterd@icloud.com>
Date: Tue, 19 Aug 2025 23:02:31 +0900
Subject: [PATCH 4/4] fix: Add bottom padding to form layout in problem
 registration for improved spacing

---
 apps/admin/src/routes/_GNBLayout/problem/register/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/admin/src/routes/_GNBLayout/problem/register/index.tsx b/apps/admin/src/routes/_GNBLayout/problem/register/index.tsx
index 75a28339..c972d1ed 100644
--- a/apps/admin/src/routes/_GNBLayout/problem/register/index.tsx
+++ b/apps/admin/src/routes/_GNBLayout/problem/register/index.tsx
@@ -286,7 +286,7 @@ function RouteComponent() {
 
         {showDetailSections && (
           <>
-            <div className='mt-[4.8rem] flex flex-col gap-[4.8rem]'>
+            <div className='mt-[4.8rem] flex flex-col gap-[4.8rem] pb-[10rem]'>
               <MainProblemSection
                 control={control}
                 register={register}