chore: Add a problem management page

src/pages/help/components/HelpSection.tsx

@@ -7,12 +7,20 @@ interface Props {
 }
 
 const HelpSection = forwardRef<HTMLElement, Props>(({ step }, ref) => {
+  const imageUrls = Array.isArray(step.imageUrl)
+    ? step.imageUrl
+    : step.imageUrl
+      ? [step.imageUrl]
+      : [];
+
   return (
     <section id={step.id} className={styles.section} ref={ref}>
       <h3 className={styles.title}>{step.title}</h3>
-      {step.imageUrl && (
+      {imageUrls.length > 0 && (
         <div className={styles.imageWrap}>
-          <img src={step.imageUrl} alt={step.title} className={styles.image} />
+          {imageUrls.map((url, idx) => (
+            <img key={idx} src={url} alt={`${step.title} ${idx + 1}`} className={styles.image} />
+          ))}
         </div>
       )}
       <p className={styles.description}>{step.description}</p>

src/pages/help/constants/management.ts

@@ -13,35 +13,41 @@ export const management: HelpCategory = {
     },
     {
       id: 'management-compact',
-      title: '빠른 문제 작성 — 콤팩트 모드 & 단축키',
+      title: '빠른 문제 작성 — 콤팩트 모드 & 확장형 모드',
       description:
-        '문제를 한 번에 여러 개 만들어야 할 때는 콤팩트 모드와 키보드 단축키를 활용하면 훨씬 빠릅니다. 모달은 기본적으로 콤팩트 모드로 열리며, 화면을 많이 차지하지 않는 작은 창에서 핵심 입력만 빠르게 처리할 수 있습니다. Tab 키로 다음 입력 필드로 이동하고 Enter 키로 문제를 저장하면, 제목 입력 후 Tab으로 이동하고 Enter로 저장하는 흐름만 익숙해지면 문제 하나를 5초 안에 만들 수 있습니다. 설명을 길게 쓰거나 이미지를 첨부할 때처럼 모달이 좁게 느껴진다면 모달 상단의 확장 버튼을 눌러 전체 화면 크기로 넓혀서 작업하세요.',
+        '문제를 한 번에 여러 개 만들어야 할 때는 콤팩트 모드를 활용하면 훨씬 빠릅니다. 모달은 기본적으로 콤팩트 모드로 열리며, 화면을 많이 차지하지 않는 작은 창에서 핵심 입력만 빠르게 처리할 수 있습니다. 설명을 길게 쓰거나 이미지를 첨부할 때처럼 모달이 좁게 느껴진다면 모달 상단의 확장 버튼을 눌러 전체 화면 크기로 넓혀서 작업하세요.',
+      imageUrl: 'https://d2ab13l3eziju4.cloudfront.net/frontend/expand.webp',
     },
     {
       id: 'management-image',
       title: '이미지 업로드',
       description:
         '그림이나 도표가 있어야 문제의 의미가 완전해지는 경우가 있습니다. 회로도 문제, 지도 문제, 코드 스크린샷처럼 이미지가 문제 자체인 경우에 유용합니다. 이미지 영역을 클릭하면 파일 탐색기가 열려 파일을 선택할 수 있고, 이미지 파일을 모달 위로 직접 드래그 앤 드롭해도 됩니다. 첨부된 이미지는 문제 풀이 화면에서도 그대로 표시되며, 이미지를 클릭하면 확대해서 볼 수 있어 세밀한 그림이나 긴 코드 스크린샷도 문제로 만들기 어렵지 않습니다.',
+      imageUrl: 'https://d2ab13l3eziju4.cloudfront.net/frontend/image.webp',
     },
     {
       id: 'management-edit',
       title: '문제 수정 & 삭제',
       description:
         '만들어둔 문제의 내용을 바꾸고 싶다면 목록에서 해당 문제를 클릭하세요. 수정 모달에는 기존에 입력했던 내용이 모두 자동으로 채워져 있어, 바꾸고 싶은 부분만 수정하고 저장하면 됩니다. 제목, 선택지, 정답, 태그, 이미지, 설명 모두 수정할 수 있으며 유형을 객관식에서 주관식으로 변경하는 것도 가능합니다. 삭제할 때는 문제 왼쪽의 체크박스를 선택한 뒤 삭제 버튼을 누릅니다. 여러 문제를 한꺼번에 선택해 일괄 삭제할 수 있고, 목록 최상단의 전체 선택 체크박스를 누르면 현재 보이는 문제를 한 번에 선택할 수 있습니다. 삭제 전에 확인 메시지가 나타나므로 실수로 눌러도 바로 취소할 수 있습니다.',
+      imageUrl: [
+        'https://d2ab13l3eziju4.cloudfront.net/frontend/modify.webp',
+        'https://d2ab13l3eziju4.cloudfront.net/frontend/delete.webp',
+      ],
     },
     {
       id: 'management-tag',
       title: '태그로 문제 분류하기',
       description:
         '문제가 많아질수록 태그의 중요성이 커집니다. 처음부터 태그를 잘 정해두면 나중에 원하는 문제를 찾거나 특정 주제만 골라서 풀 때 매우 편리합니다. 화면 왼쪽의 태그 사이드바에서 태그를 클릭하면 해당 태그가 붙은 문제만 목록에 표시됩니다. 여러 태그를 동시에 선택하면 선택한 태그 중 하나라도 포함된 문제가 모두 표시되고, 사이드바가 화면 공간을 차지한다면 접기 버튼으로 숨길 수 있습니다. 태그는 과목이나 챕터 단위, 난이도, 문제 출처, 개념 키워드 등 자신만의 체계로 구성해두면 좋습니다. 태그는 문제 풀이 화면에서 풀 문제를 고르는 기준이 되기도 합니다.',
-      imageUrl: 'https://d2ab13l3eziju4.cloudfront.net/frontend/문제생성.png',
+      imageUrl: 'https://d2ab13l3eziju4.cloudfront.net/frontend/tagselect.webp',
     },
     {
       id: 'management-export',
       title: '문제 가져오기 & 내보내기',
       description:
         '내가 만든 문제를 ZIP 파일로 내보내 다른 기기로 옮기거나 스터디원과 공유할 수 있습니다. 내보낼 때는 원하는 문제의 체크박스를 선택한 뒤 내보내기 버튼을 누르면 ZIP 파일이 다운로드됩니다. 아무것도 선택하지 않으면 현재 목록의 전체 문제가 대상이 됩니다. 가져올 때는 가져오기 버튼을 누른 뒤 이전에 내보낸 ZIP 파일을 선택하면 됩니다. 가져오기를 하면 기존 문제가 지워지는 것이 아니라 기존 목록에 추가되므로, 스터디원이 만든 문제를 받아서 내 문제와 함께 쓰거나 백업 용도로 보관하는 데도 활용할 수 있습니다.',
-      imageUrl: 'https://d2ab13l3eziju4.cloudfront.net/frontend/문제생성.png',
+      imageUrl: 'https://d2ab13l3eziju4.cloudfront.net/frontend/export.webp',
     },
   ],
 };

src/pages/help/types.ts

@@ -2,7 +2,7 @@ export interface HelpStep {
   id: string;
   title: string;
   description: string;
-  imageUrl?: string;
+  imageUrl?: string | string[];
 }
 
 export interface HelpCategory {