Merge pull request #99 from IT-Cotato/fix/homework-materials

[Fix] 파일 있는 경우, UI 수정
IT-Cotato · Feb 20, 2025 · a56da09 · a56da09
2 parents 92f4390 + 75255d4
commit a56da09
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 67 deletions.
diff --git a/src/components/AddFile.tsx b/src/components/AddFile.tsx
@@ -1,5 +1,6 @@
 import { ChangeEvent, useState } from 'react';
 import AddIcon from '../assets/images/File_dock_add.svg?react';
+import FileDetail from './FileDetail';
 
 interface AddFileProps {
   setFileList: (value: File[]) => void;
@@ -57,18 +58,10 @@ const AddFile = ({ setFileList, fileList }: AddFileProps) => {
         </label>
       </div>
       {fileList.length > 0 && (
-        <div className="text-center text-gray-700">
-          <p>추가된 파일 목록:</p>
-          <ul>
-            {fileList.map((file, index) => (
-              <li key={index} className="font-bold">
-                {file.name}
-                <button onClick={() => handleDeleteFile(index)} className="text-red-500 hover:underline ml-4">
-                  삭제
-                </button>
-              </li>
-            ))}
-          </ul>
+        <div className="text-center text-gray-700 gap-2 flex flex-col">
+          {fileList.map((file, index) => (
+            <FileDetail key={index} title={file.name} onDelete={() => handleDeleteFile(index)} />
+          ))}
         </div>
       )}
     </>

diff --git a/src/components/FileDetail.tsx b/src/components/FileDetail.tsx
@@ -0,0 +1,39 @@
+import { FaRegFileAlt } from 'react-icons/fa';
+import vector_gray from '../assets/images/vector_gray.png';
+import { RiDownloadLine } from 'react-icons/ri';
+import { getAllLectureFile } from '../api/materials.api';
+import { downloadFile } from '../utils/DownloadFiles';
+import { useParams } from 'react-router-dom';
+import { FiTrash2 } from 'react-icons/fi';
+
+interface FileDetailProps {
+  title: string;
+  fileUrl?: string;
+  onDelete?: () => void;
+}
+
+const FileDetail = ({ title, fileUrl, onDelete }: FileDetailProps) => {
+  return (
+    <div className="p-4 flex gap-3 items-center bg-gray-100 rounded-lg">
+      <div className="p-1">
+        <FaRegFileAlt size={24} fill="#242421" />
+      </div>
+      <div className="flex gap-4 items-center flex-1">
+        <img src={vector_gray} className="w-[3px] h-[24px]" />
+        <div className="tracking-[-0.048px] flex flex-col items-start">
+          <p className="text-body3 font-semibold leading-7 text-gray-900">{title}</p>
+          <p className="text-body4 font-normal leading-[25px] text-gray-500">7.5B</p>
+        </div>
+      </div>
+      <div>
+        {fileUrl ? (
+          <RiDownloadLine size={22} fill="#242421" onClick={() => downloadFile(fileUrl)} />
+        ) : (
+          <FiTrash2 size={22} onClick={onDelete} />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default FileDetail;
diff --git a/src/pages/Homework/EditHomework.tsx b/src/pages/Homework/EditHomework.tsx
@@ -7,6 +7,7 @@ import { useEffect, useState } from 'react';
 import { getHomeworkInfo, patchHomework } from '../../api/homework.api';
 import { HomeworkFile, HomeworkFileBoxDetail } from '../../models/homework.model';
 import { downloadFile } from '../../utils/DownloadFiles';
+import FileDetail from '../../components/FileDetail';
 
 const EditHomework = () => {
   const { roomId, homeworkId } = useParams<{ roomId: string; homeworkId: string }>();
@@ -81,24 +82,19 @@ const EditHomework = () => {
         </div>
         <PickDate deadline={deadline} setDeadline={setDeadline} isAble={isAble} text="숙제 마감 날짜를 선택하세요." />
       </div>
+      {fileList.length > 0 && (
+        <div className="text-center text-gray-700 gap-2 flex flex-col">
+          {fileList.map((file, index) => (
+            <FileDetail key={index} title={file.originalName} onDelete={() => handleFileDelete(file, index)} />
+          ))}
+        </div>
+      )}
       {/* 파일첨부 */}
       <div className="py-4 gap-6 flex flex-col">
         {/* 파일 리스트 정하는 거: 생성에서는 전체였고 수정에서는 받아와서 이름을 비교해야하나? 이건 그냥 File[]임*/}
         <AddFile setFileList={setAddList} fileList={addList} />
       </div>
-      <div>
-        <p>기존 파일</p>
-        <div>
-          {fileList.map((file, index) => (
-            <div className="flex gap-2" key={file.homeworkFileId}>
-              <li onClick={() => downloadFile(file.fileUrl)}>{file.originalName}</li>
-              <button className="text-red-500" onClick={() => handleFileDelete(file, index)}>
-                삭제
-              </button>
-            </div>
-          ))}
-        </div>
-      </div>
+
       {/* 버튼 */}
       <div className="py-6 mt-auto">
         <LongButton enable={!!(description.length > 0 && deadline.length > 0)} onClick={handleSubmit} text={text} />

diff --git a/src/pages/Homework/HomeworkDetail.tsx b/src/pages/Homework/HomeworkDetail.tsx
@@ -9,6 +9,7 @@ import Button from '../../components/Button';
 import Modal from '../../components/Modal/Modal';
 import RoomDeleteModal from '../../components/Modal/RoomDeleteModal';
 import useDeleteStore from '../../store/useDeleteStore';
+import FileDetail from '../../components/FileDetail';
 
 const HomeworkDetail = () => {
   const { roomId, homeworkId } = useParams<{ roomId: string; homeworkId: string }>();
@@ -54,28 +55,22 @@ const HomeworkDetail = () => {
         </div>
         <p className="text-body4 font-normal leading-7 tracking-[-0.048px] text-gray-600">마감날짜 {detail.deadline}</p>
       </div>
-      <div className="bg-gray-100 h-[100px] rounded-lg mt-2 mb-6 mx-4">
-        <ul>
-          {detail.teacherFiles?.map((file) => (
-            <li onClick={() => downloadFile(file.fileUrl)} key={file.homeworkFileId}>
-              {file.originalName}
-            </li>
-          ))}
-        </ul>
+      <div className=" rounded-lg mt-2 mb-4 mx-4 gap-2 flex flex-col">
+        {detail.teacherFiles?.map((file) => (
+          <div>
+            <FileDetail title={file.originalName} fileUrl={file.fileUrl} key={file.homeworkFileId} />
+          </div>
+        ))}
       </div>
       <div className="py-4 px-4 border-t-2 border-gray-100">
         <p className="text-heading6 font-bold leading-10 text-gray-900">제출한 숙제</p>
         <p className="text-body4 font-normal leading-7 tracking-[-0.048px] text-gray-600">학생이 업로드한 숙제예요.</p>
       </div>
-      <div className="bg-gray-100 h-[100px] rounded-lg mt-2 mb-6 mx-4">
-        <ul>
-          {detail.studentFiles?.map((file) => (
-            <li onClick={() => downloadFile(file.fileUrl)} key={file.homeworkFileId}>
-              {file.originalName}
-            </li>
-          ))}
-        </ul>
-      </div>
+      {detail.studentFiles?.map((file) => (
+        <>
+          <FileDetail title={file.originalName} fileUrl={file.fileUrl} key={file.homeworkFileId} />
+        </>
+      ))}
       {userRole !== 'TEACHER' ? <Button text={text} onClick={() => nav('edit')} /> : ''}
       {modalOpen && (
         <Modal onClose={() => setModalOpen(false)}>

diff --git a/src/pages/Material/EditMaterial.tsx b/src/pages/Material/EditMaterial.tsx
@@ -7,6 +7,7 @@ import AddFile from '../../components/AddFile';
 import { downloadFile } from '../../utils/DownloadFiles';
 import LongButton from '../../components/LongButton';
 import Loading from '../Loading';
+import FileDetail from '../../components/FileDetail';
 
 const EditMaterial = () => {
   const { roomId, materialId } = useParams<{ roomId: string; materialId: string }>();
@@ -45,11 +46,7 @@ const EditMaterial = () => {
 
   //  수정
   const handleSubmit = async () => {
-    const payload = {
-      lectureFileBoxName: desc,
-      addLectureFiles: addList,
-      removeLectureFiles: removeList,
-    };
+    const payload = { lectureFileBoxName: desc, addLectureFiles: addList, removeLectureFiles: removeList };
 
     try {
       const data = await patchLectureFile(roomId!, materialId!, payload);
@@ -67,20 +64,20 @@ const EditMaterial = () => {
   return (
     <div className="px-4 flex flex-col h-full pt-4 gap-6">
       <Input setDesc={setDesc} desc={desc} name="자료명" placeholder="자료명을 입력해주세요" isAble={true} />
-      <AddFile setFileList={setAddList} fileList={addList} />
       <div>
-        <p>기존 파일</p>
-        <div>
-          {fileList.map((file, index) => (
-            <div className="flex gap-2" key={file.lectureFileId}>
-              <li onClick={() => downloadFile(file.fileUrl)}>{file.originalName}</li>
-              <button className="text-red-500" onClick={() => handleFileDelete(file, index)}>
-                삭제
-              </button>
-            </div>
-          ))}
-        </div>
+        {fileList.length > 0 && (
+          <div className="text-center text-gray-700 gap-2 flex flex-col">
+            {fileList.map((file, index) => (
+              <FileDetail
+                key={file.lectureFileId}
+                title={file.originalName}
+                onDelete={() => handleFileDelete(file, index)}
+              />
+            ))}
+          </div>
+        )}
       </div>
+      <AddFile setFileList={setAddList} fileList={addList} />
       {/* 버튼 */}
       <div className="py-6 mt-auto">
         <LongButton enable={!!(desc.length > 0)} onClick={handleSubmit} text="수정 완료" />

diff --git a/src/pages/Material/MaterialDetail.tsx b/src/pages/Material/MaterialDetail.tsx
@@ -8,6 +8,7 @@ import Loading from '../Loading';
 import Modal from '../../components/Modal/Modal';
 import RoomDeleteModal from '../../components/Modal/RoomDeleteModal';
 import useDeleteStore from '../../store/useDeleteStore';
+import FileDetail from '../../components/FileDetail';
 
 const MaterialDetail = () => {
   const nav = useNavigate();
@@ -54,14 +55,12 @@ const MaterialDetail = () => {
           업로드 날짜 {lectureFiles.updatedAt}
         </p>
       </div>
-      <div className="bg-gray-100 h-[100px] rounded-lg mt-2 mb-6 mx-4">
-        <ul>
-          {lectureFiles.lectureFiles.map((file) => (
-            <li onClick={() => downloadFile(file.fileUrl)} key={file.lectureFileId}>
-              {file.originalName}
-            </li>
-          ))}
-        </ul>
+      <div className="mx-4 flex flex-col gap-2">
+        {lectureFiles.lectureFiles.map((file) => (
+          <div>
+            <FileDetail title={file.originalName} fileUrl={file.fileUrl} key={file.lectureFileId} />
+          </div>
+        ))}
       </div>
       {modalOpen && (
         <Modal onClose={() => setModalOpen(false)}>