Feat/149 studyreportapi

src/components/studyReport/RecordFileUpload.tsx

@@ -8,27 +8,28 @@ import {
   X,
   Paperclip,
 } from 'lucide-react'
-import 'react-toastify/dist/ReactToastify.css'
 import { toast } from 'react-toastify'
+import 'react-toastify/dist/ReactToastify.css'
 
 interface RecordFileUploadProps {
   files: File[]
+  existingFiles?: { id: number; name: string }[]
   onFilesChange: (files: File[]) => void
+  onExistingFilesChange?: (files: { id: number; name: string }[]) => void
 }
 
 const MAX_TOTAL_SIZE = 10 * 1024 * 1024 // 10MB
 
 export const RecordFileUpload = ({
   files,
+  existingFiles = [],
   onFilesChange,
+  onExistingFilesChange,
 }: RecordFileUploadProps) => {
   const [dragActive, setDragActive] = useState(false)
   const inputRef = useRef<HTMLInputElement | null>(null)
-
-  // 모바일 환경 감지
   const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent)
 
-  // 파일 선택 (클릭/탭)
   const handleFileSelect = (e: ChangeEvent<HTMLInputElement>) => {
     const selected = e.target.files ? Array.from(e.target.files) : []
     const totalSize =
@@ -42,7 +43,6 @@ export const RecordFileUpload = ({
     toast.success(`${selected.length}개의 파일이 추가되었습니다.`)
   }
 
-  // 드래그 앤 드롭 (데스크톱 전용)
   const handleDrop = (e: DragEvent<HTMLDivElement>) => {
     e.preventDefault()
     e.stopPropagation()
@@ -64,9 +64,14 @@ export const RecordFileUpload = ({
     toast.info(`파일 "${name}"이 삭제되었습니다.`)
   }
 
-  // 파일 아이콘 결정
-  const getFileIcon = (file: File) => {
-    const type = file.type
+  const handleRemoveExistingFile = (id: number, name: string) => {
+    if (!onExistingFilesChange) return
+    onExistingFilesChange(existingFiles.filter((f) => f.id !== id))
+    toast.info(`파일 "${name}"이 삭제되었습니다.`)
+  }
+
+  const getFileIcon = (file: File | { name: string }) => {
+    const type = 'type' in file ? file.type : ''
     const ext = file.name.split('.').pop()?.toLowerCase()
 
     if (type.startsWith('image/'))
@@ -100,7 +105,6 @@ export const RecordFileUpload = ({
     <div>
       <label className="mb-2 block font-semibold">첨부 파일</label>
 
-      {/* 업로드 영역 */}
       <div
         className={`cursor-pointer rounded-xl border-2 border-dashed py-10 text-center transition-colors ${
           dragActive
@@ -148,20 +152,18 @@ export const RecordFileUpload = ({
           type="file"
           multiple
           accept="image/*,video/*,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.csv,.json,.html"
-          capture="environment"
           className="hidden"
           onChange={handleFileSelect}
         />
       </div>
 
-      {/* 파일 리스트 */}
+      {/* 새 파일 리스트 */}
       {files.length > 0 && (
         <div className="mt-5 rounded-lg border border-gray-200 bg-gray-50 p-4">
           <div className="mb-3 flex items-center gap-2 font-medium">
-            <Paperclip className="text-gray-700" size={16} />
-            첨부 파일 ({files.length}개)
+            <Paperclip className="text-gray-700" size={16} />새 첨부 파일 (
+            {files.length}개)
           </div>
-
           <div className="grid gap-2 sm:grid-cols-2">
             {files.map((file) => (
               <div
@@ -185,6 +187,37 @@ export const RecordFileUpload = ({
           </div>
         </div>
       )}
+
+      {/* 기존 파일 리스트 */}
+      {existingFiles.length > 0 && (
+        <div className="mt-3 rounded-lg border border-gray-200 bg-gray-50 p-4">
+          <div className="mb-3 flex items-center gap-2 font-medium">
+            <Paperclip className="text-gray-700" size={16} />
+            기존 첨부 파일 ({existingFiles.length}개)
+          </div>
+          <div className="grid gap-2 sm:grid-cols-2">
+            {existingFiles.map((file) => (
+              <div
+                key={file.id}
+                className="flex items-center justify-between rounded-lg border border-gray-200 bg-white px-4 py-3 shadow-sm hover:shadow"
+              >
+                <div className="flex min-w-0 items-center gap-2 text-sm text-gray-700">
+                  {getFileIcon(file)}
+                  <span className="max-w-[180px] truncate overflow-hidden whitespace-nowrap">
+                    {file.name}
+                  </span>
+                </div>
+                <button
+                  onClick={() => handleRemoveExistingFile(file.id, file.name)}
+                  className="cursor-pointer text-gray-400 hover:text-gray-600"
+                >
+                  <X size={16} />
+                </button>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
     </div>
   )
 }

src/hooks/api/mutations/useStudyRecordMutation.ts

@@ -6,13 +6,13 @@ import { api } from '@/api/api'
 
 interface CreateStudyRecordParams {
   startDate?: string
-  endDate?: string  
+  endDate?: string
 }
 
 export const useStudyRecordMutation = (groupId: string) => {
   const createRecordMutation = useMutation({
     mutationFn: (params: CreateStudyRecordParams) =>
-      api.v1.studies.groups(groupId).schedules.GET(undefined,{params}),
+      api.v1.studies.groups(groupId).schedules.GET(undefined, { params }),
     onSuccess: () => {
       // 스터디 기록 목록 새로고침
       queryClient.invalidateQueries({
@@ -28,4 +28,4 @@ export const useStudyRecordMutation = (groupId: string) => {
   return {
     createRecordMutation,
   }
-}
+}

src/pages/study-groups/StudyRecord/StudyRecord.tsx

@@ -6,25 +6,21 @@ import { RecordFileUpload } from '@/components/studyReport/RecordFileUpload'
 import { RecordActionButtons } from '@/components/studyReport/RecordActionButtons'
 import { RecordBreadcrumb } from '@/components/breadcrumb/RecordBreadcrumb'
 import { toast } from 'react-toastify'
-
-const MOCK_RECORD = {
-  title: '예시 스터디 기록 제목',
-  content: '여기에 학습 내용을 작성해보세요.',
-  files: [],
-}
+import { api } from '@/api/api'
 
 export const StudyRecord = () => {
   const [title, setTitle] = useState('')
   const [content, setContent] = useState('')
   const [files, setFiles] = useState<File[]>([])
   const [mode, setMode] = useState<'create' | 'edit'>('create')
+  const [loading, setLoading] = useState(false)
+
   const navigate = useNavigate()
   const { studyGroupId, studyRecordId } = useParams<{
     studyGroupId: string
     studyRecordId: string
   }>()
 
-  // 드래그 앤 드롭 방지
   useEffect(() => {
     const preventDefault = (e: DragEvent) => {
       e.preventDefault()
@@ -40,23 +36,35 @@ export const StudyRecord = () => {
     }
   }, [])
 
-  // 기록 데이터 불러오기
-  const loadStudyRecord = async (groupId: string, recordId: string) => {
-    console.log(`(MOCK) 그룹 ${groupId} 기록 ${recordId} 불러오기`)
-    await new Promise((resolve) => setTimeout(resolve, 300))
-    setTitle(MOCK_RECORD.title)
-    setContent(MOCK_RECORD.content)
-    setFiles(MOCK_RECORD.files)
+  /** 기록 불러오기 */
+  const loadStudyRecord = async (recordId: string) => {
+    try {
+      setLoading(true)
+
+      const res = await api.v1.studies.notes(Number(recordId)).GET()
+      const data = res.data
+
+      if (!data) {
+        toast.error('기록 정보를 찾을 수 없습니다.')
+        return
+      }
+      setFiles([])
+    } catch {
+      toast.error('기록 정보를 불러오는 중 오류가 발생했습니다.')
+    } finally {
+      setLoading(false)
+    }
   }
 
+  /** 기록 수정 모드일 경우 데이터 불러오기 */
   useEffect(() => {
-    if (studyGroupId && studyRecordId) {
+    if (studyRecordId) {
       setMode('edit')
-      loadStudyRecord(studyGroupId, studyRecordId)
+      loadStudyRecord(studyRecordId)
     } else if (window.location.pathname.includes('edit')) {
       setMode('edit')
     }
-  }, [studyGroupId, studyRecordId])
+  }, [studyRecordId])
 
   const handleFilesChange = (newFiles: File[]) => setFiles(newFiles)
 
@@ -67,24 +75,58 @@ export const StudyRecord = () => {
     toast.info('작성 중인 내용이 초기화되었습니다.')
   }
 
+  /** 저장 / 수정 */
   const handleSave = async () => {
-    // 내용이 없으면 토스트로 안내하고 저장 막기
+    if (!studyGroupId) {
+      toast.error('잘못된 접근입니다. 그룹 정보가 없습니다.')
+      return
+    }
+
     if (title.trim() === '' || content.trim() === '') {
       toast.warn('제목과 내용을 모두 입력해야 저장할 수 있습니다.')
       return
     }
 
-    const recordData = { title, content, files }
-    console.log('(MOCK) 저장 데이터:', recordData)
-    await new Promise((resolve) => setTimeout(resolve, 300))
-
-    if (mode === 'edit') {
-      toast.success('스터디 기록이 성공적으로 수정되었습니다.')
-    } else {
-      toast.success('새 스터디 기록이 성공적으로 저장되었습니다.')
+    try {
+      setLoading(true)
+
+      const attachments: [] = [] // 파일 업로드 시 여기서 대체됨
+
+      if (mode === 'edit' && studyRecordId) {
+        const res = await api.v1.studies.notes(Number(studyRecordId)).PATCH({
+          title,
+          content_md: content,
+          attachments,
+        })
+
+        if (!res.data) {
+          toast.error('기록을 수정할 수 없습니다.')
+          return
+        }
+
+        toast.success('스터디 기록이 성공적으로 수정되었습니다.')
+      } else {
+        const res = await api.v1.studies.notes.POST({
+          group_id: studyGroupId,
+          title,
+          content_md: content,
+          attachments,
+        })
+
+        if (!res.data) {
+          toast.error('새 기록을 저장할 수 없습니다.')
+          return
+        }
+
+        toast.success('새 스터디 기록이 성공적으로 저장되었습니다.')
+      }
+
+      navigate(`/study_group_detail/${studyGroupId}`)
+    } catch {
+      toast.error('저장 중 오류가 발생했습니다.')
+    } finally {
+      setLoading(false)
     }
-
-    if (studyGroupId) navigate(`/study_group_detail/${studyGroupId}`)
   }
 
   return (
@@ -102,9 +144,15 @@ export const StudyRecord = () => {
       </div>
 
       <div className="w-full max-w-3xl rounded-2xl border border-gray-200 bg-white p-[25px]">
-        <RecordTitleInput title={title} setTitle={setTitle} />
-        <RecordMarkdownEditor content={content} setContent={setContent} />
-        <RecordFileUpload files={files} onFilesChange={handleFilesChange} />
+        {loading ? (
+          <p className="text-center text-gray-400">불러오는 중...</p>
+        ) : (
+          <>
+            <RecordTitleInput title={title} setTitle={setTitle} />
+            <RecordMarkdownEditor content={content} setContent={setContent} />
+            <RecordFileUpload files={files} onFilesChange={handleFilesChange} />
+          </>
+        )}
       </div>
 
       <div className="mt-6 flex w-full max-w-3xl justify-between">