문의 이미지 미반영 및 multipart 인터셉터 버그 수정

src/api/client/axios.ts

@@ -20,7 +20,7 @@
 // multipart 요청용
 export const axiosInstanceForMultipart = axios.create({
   baseURL: `${process.env.NEXT_PUBLIC_API_BASE_URL}/api/v1/`,
-  timeout: 10000,
+  timeout: 60000, // 파일 업로드 전용 — 클라이언트→백엔드 전송 + 백엔드→S3 처리 여유
   headers: {
     // JS에서 formData 를 넘길땐 Content-Type 생략해야 자동으로 multipart/form-data + boundary 설정됨
   },
@@ -43,7 +43,7 @@
 axiosInstanceForMultipart.interceptors.request.use(onRequestClient);
 
 // refresh token을 사용해서 access token을 재갱신하는 함수
 const refreshAccessToken = async (): Promise<string | null> => {
   try {
     const response = await axios.get<{ content: { accessToken: string } }>(
       `${process.env.NEXT_PUBLIC_API_BASE_URL}/api/v1/auth/access-token/refresh`,
@@ -205,7 +205,7 @@
               if (originalRequest) {
                 originalRequest.headers.Authorization = `Bearer ${token}`;
 
-                return axiosInstance(originalRequest);
+                return axiosInstanceForMultipart(originalRequest);
               }
             })
             .catch((err) => {
@@ -224,7 +224,7 @@
             if (originalRequest) {
               originalRequest.headers.Authorization = `Bearer ${newAccessToken}`;
 
-              return axiosInstance(originalRequest);
+              return axiosInstanceForMultipart(originalRequest);
             }
           } else {
             processFailedQueue(new Error('토큰 갱신 실패'));

src/app/(service)/(my)/my-study-review/_components/completed-study-review-page.tsx

@@ -40,6 +40,15 @@ interface StudyRoleSectionProps {
   onMemberClick?: (study: MemberStudyItem) => void;
 }
 
+const REVIEW_PERIOD_DAYS = 7;
+
+const isWithinReviewPeriod = (endTime: string) => {
+  const deadline = dayjs(endTime).add(REVIEW_PERIOD_DAYS, 'day');
+  const now = dayjs();
+
+  return now.isBefore(deadline) || now.isSame(deadline);
+};
+
 function StudyRoleSection({
   title,
   studies,
@@ -156,6 +165,10 @@ export default function CompletedStudyReviewPage({
       return;
     }
 
+    if (!isWithinReviewPeriod(study.endTime)) {
+      return;
+    }
+
     setReviewStudy(study);
   };
 

src/app/global.css

@@ -462,6 +462,10 @@ https://velog.io/@oneook/tailwindcss-4.0-%EB%AC%B4%EC%97%87%EC%9D%B4-%EB%8B%AC%E
   min-height: 200px;
 }
 
+@utility min-h-150 {
+  min-height: 150px;
+}
+
 @utility h-study-card {
   height: 244px;
 }
@@ -478,10 +482,19 @@ https://velog.io/@oneook/tailwindcss-4.0-%EB%AC%B4%EC%97%87%EC%9D%B4-%EB%8B%AC%E
   max-width: 1164px;
 }
 
+@utility max-w-500 {
+  max-width: 500px;
+}
+
 @utility max-h-modal {
   max-height: 90vh;
 }
 
+@utility size-icon {
+  width: 36px;
+  height: 36px;
+}
+
 @utility grid-cols-content-sidebar-360 {
   grid-template-columns: minmax(0, 1fr) 360px;
 }

src/components/common/modals/question-modal.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useQueryClient } from '@tanstack/react-query';
 import { XIcon } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
@@ -94,6 +95,7 @@ export default function QuestionModal({
   const [isImageRemoved, setIsImageRemoved] = useState(false);
   const [isFinalizingSubmission, setIsFinalizingSubmission] = useState(false);
 
+  const queryClient = useQueryClient();
   const isEditMode = mode === 'edit' && !!questionId;
   const initialTitle = initialValues?.title ?? '';
   const initialContent = initialValues?.content ?? '';
@@ -203,8 +205,6 @@ export default function QuestionModal({
     variant: 'success' | 'info' = 'success',
   ) => {
     showToast(message, variant);
-    reset(DEFAULT_FORM_VALUES);
-    resetImageState();
     handleOpenChange(false);
 
     if (onAfterSubmit) {
@@ -242,6 +242,13 @@ export default function QuestionModal({
 
     try {
       await uploadImage(imageUploadUrl, imageFile);
+      // S3 업로드 완료 후 재무효화: 훅의 onSuccess가 업로드 전에 실행되므로
+      // 이 시점에 다시 무효화해야 이미지가 포함된 최신 데이터를 가져올 수 있다.
+      if (isEditMode && questionId) {
+        await queryClient.invalidateQueries({
+          queryKey: ['question', studyId, questionId],
+        });
+      }
       finalizeSubmission(successMessage);
     } catch (error) {
       console.error('문의 이미지 업로드 오류:', error);
@@ -305,7 +312,7 @@ export default function QuestionModal({
     <Modal.Root open={open} onOpenChange={handleOpenChange}>
       <Modal.Portal>
         <Modal.Overlay />
-        <Modal.Content size="medium" className="w-full sm:w-[500px]">
+        <Modal.Content size="medium" className="w-full sm:max-w-500">
           <Modal.Header className="border-border-default flex items-center justify-between border-b">
             <Modal.Title className="font-designer-20b text-text-strong">
               {isEditMode ? '스터디 문의 수정하기' : '스터디 문의하기'}
@@ -357,7 +364,7 @@ export default function QuestionModal({
                   <TextAreaInput
                     placeholder="내용을 입력하세요"
                     maxLength={QUESTION_CONTENT_MAX_LENGTH}
-                    className="font-designer-16m text-text-default h-auto min-h-[150px]"
+                    className="font-designer-16m text-text-default h-auto min-h-150"
                   />
                 </FormField>
                 <div className="flex flex-col gap-100">

src/components/common/ui/image-upload-input.tsx

@@ -15,7 +15,7 @@ const dropzoneVariants = cva(
     variants: {
       dragging: {
         true: 'border-border-brand bg-fill-brand-subtle-hover',
-        false: 'border-gray-300 border-dashed',
+        false: 'border-border-default border-dashed',
       },
     },
     defaultVariants: {
@@ -57,13 +57,13 @@ export default function ImageUploadInput({
     fileInputRef.current?.click();
   };
 
-  const handleDragEnter = (e: React.DragEvent<HTMLDivElement>) => {
+  const handleDragEnter = (e: DragEvent<HTMLDivElement>) => {
     e.preventDefault();
     e.stopPropagation();
     setIsDragging(true);
   };
 
-  const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
+  const handleDragLeave = (e: DragEvent<HTMLDivElement>) => {
     e.preventDefault();
     e.stopPropagation();
     setIsDragging(false);
@@ -98,7 +98,7 @@ export default function ImageUploadInput({
   };
 
   return (
-    <div className="flex flex-col gap-1">
+    <div className="flex flex-col gap-50">
       <div
         onDrop={handleDrop}
         onDragEnter={handleDragEnter}
@@ -118,6 +118,9 @@ export default function ImageUploadInput({
               <span className="font-designer-18m text-text-default">
                 드래그하여 파일 업로드
               </span>
+              <span className="font-designer-14r text-text-assistive">
+                이미지 파일 · 최대 {(maxSizeBytes / 1024 / 1024).toFixed(0)}MB
+              </span>
             </div>
             <input
               ref={fileInputRef}
@@ -142,20 +145,22 @@ export default function ImageUploadInput({
               alt="preview"
               width={240}
               height={180}
-              className="rounded-lg object-cover"
+              className="rounded-100 object-cover"
             />
             <button
               type="button"
               onClick={handleRemove}
               aria-label="이미지 삭제"
-              className="bg-background-dimmer border-border-inverse text-text-inverse absolute top-0 right-0 flex h-[36px] w-[36px] translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border"
+              className="bg-background-dimmer border-border-inverse text-text-inverse absolute top-0 right-0 flex size-icon translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border"
             >
               ✕
             </button>
           </div>
         )}
       </div>
-      {sizeError && <p className="text-text-danger text-sm">{sizeError}</p>}
+      {sizeError && (
+        <p className="font-designer-14r text-text-error">{sizeError}</p>
+      )}
     </div>
   );
 }