feat(SCRUM-411): 의견 남기기 페이지 체크리스트 기능 추가

src/components/Mypage/FeedbackBox.tsx

@@ -9,7 +9,7 @@ const FeedbackBox: React.FC<FeedbackBoxProps> = ({ value, onChange }) => {
   const maxLength = 6000;
 
   return (
-    <div className="flex flex-col gap-[12px] font-pretendard px-[8px]">
+    <div className="flex flex-col gap-[12px] font-pretendard">
       <div className="flex text-main-gray justify-between font-semibold">
         <div className="h-[18px] font-semibold">
           <span className="text-black font-semibold text-title-sb-button">

src/components/Mypage/FeedbackCheckList.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import CheckboxIcon from '@/assets/svgs/review/checkbox.svg';
+import UncheckedIcon from '@/assets/svgs/review/unchecked-box.svg';
+
+interface FeedbackCheckListProps {
+  options: string[];
+  value: string[];
+  onChange: (next: string[]) => void;
+  className?: string;
+}
+
+const FeedbackCheckList: React.FC<FeedbackCheckListProps> = ({
+  options,
+  value,
+  onChange,
+  className,
+}) => {
+  const handleToggle = (label: string) => {
+    const exists = value.includes(label);
+    const next = exists ? value.filter((v) => v !== label) : [...value, label];
+    onChange(next);
+  };
+
+  return (
+    <ul className={`flex flex-col gap-[12px] ${className ?? ''}`}>
+      {options.map((opt, idx) => {
+        const id = `feedback-issue-${idx}`;
+        const checked = value.includes(opt);
+        return (
+          <li key={id} className="flex items-start gap-[8px]">
+            <button
+              type="button"
+              aria-pressed={checked}
+              onClick={() => handleToggle(opt)}
+              className="mt-[2px] w-[20px] h-[20px]"
+            >
+              <img
+                src={checked ? CheckboxIcon : UncheckedIcon}
+                alt={checked ? '선택됨' : '선택 안 됨'}
+                className="w-full h-full"
+              />
+            </button>
+            <button
+              type="button"
+              onClick={() => handleToggle(opt)}
+              className="text-left leading-[24px] text-[#212121] text-[14px] font-body-md-title font-normal font-pretendard"
+            >
+              {opt}
+            </button>
+          </li>
+        );
+      })}
+    </ul>
+  );
+};
+
+export default FeedbackCheckList;

src/pages/mypage/FeedbackPage.tsx

@@ -6,6 +6,7 @@ import Star from '@/components/StoreReview/Star';
 import FeedbackBox from '@/components/Mypage/FeedbackBox';
 import ConfirmToast from '@/components/common/ConfirmToast';
 import axiosInstance from '@/api/axiosInstance';
+import FeedbackCheckList from '@/components/Mypage/FeedbackCheckList';
 
 const FeedbackPage = () => {
   const navigate = useNavigate();
@@ -19,6 +20,14 @@ const FeedbackPage = () => {
   const [showToast, setShowToast] = useState(false);
   const userId = localStorage.getItem('nickname');
 
+  // 선택형 체크박스: 불편 사항 옵션 및 선택 상태
+  const ISSUE_OPTIONS = [
+    '메인페이지에서 가게 이름을 검색해도 결과가 안 나와요',
+    '메인페이지에서 음식 이름을 검색해도 결과가 안 나와요',
+    '커뮤니티에서 검색 결과가 안 보여요',
+  ];
+  const [selectedIssues, setSelectedIssues] = useState<string[]>([]);
+
   const handleSubmit = async () => {
     try {
       await axiosInstance.post('/api/v1/feedback', {
@@ -44,7 +53,7 @@ const FeedbackPage = () => {
         onBack={() => (returnTo ? navigate(returnTo) : navigate(-1))}
       />
 
-      <div className="flex flex-col gap-[44px] px-[20px] font-pretendard text-[16px] font-semibold leading-[20px]">
+      <div className="flex flex-col gap-[36px] px-[20px] font-pretendard text-[16px] font-semibold leading-[20px]">
         <div className="border-b border-sub-gray">
           <div className="flex flex-col h-[44px] justify-between mt-[24px]">
             <p>
@@ -58,11 +67,23 @@ const FeedbackPage = () => {
           </p>
         </div>
 
-        <div className="flex flex-col px-[8px] gap-[16px] font-semibold">
+        <div className="flex flex-col gap-[16px] font-semibold">
           <p>얼마나 만족스럽게 사용하고 계신가요?</p>
           <Star value={value} onChange={onChange} />
         </div>
 
+        <div className="flex flex-col gap-[12px] font-semibold">
+          <p>
+            다음 사항 중 불편함이 있었나요?{' '}
+            <span className="text-main-gray">(선택)</span>
+          </p>
+          <FeedbackCheckList
+            options={ISSUE_OPTIONS}
+            value={selectedIssues}
+            onChange={setSelectedIssues}
+          />
+        </div>
+
         <FeedbackBox value={feedback} onChange={setFeedback} />
       </div>