Merge pull request #57 from KWcapstone/56-feat-파일-다운로드

Eunjin03 · web-flow · commit 2ce9bb2a3ceb · 2025-10-11T01:05:36.000+09:00
56 feat 파일 다운로드
diff --git a/src/types/conferanceData.ts b/src/types/conferanceData.ts
@@ -2,7 +2,7 @@ export interface conferenceData {
   projectId: string;
   projectName: string;
   imageUrl: string;
-  updateAt: string;
+  updatedAt: string;
   scriptions?: scriptionsData[];
   summary?: summarysWithTitleData;
 }
diff --git a/src/views/main/components/DwnModal.tsx b/src/views/main/components/DwnModal.tsx
@@ -1,49 +1,161 @@
+// style
 import "@/views/main/style/dwn-modal.sass";
+
+// components
 import Modal from "@/views/components/modal";
 
+// libraries
+import { useEffect, useMemo, useState } from "react";
+
+// apis
+import { getFileDwn } from "@/api/main/fileDwn";
+import { downloadAs } from "@/utils/download";
+
+type FileKind = "MINDMAP" | "RECORDING" | "SUMMARY";
+type FileFormat = "jpg" | "png" | "zip" | "txt";
+
 interface DwnModalProps {
   onCloseModal: () => void;
+  projectId: string;
+  projectName: string;
 }
 
-const DwnModal = ({
+const KIND_FORMAT_OPTIONS: Record<
+  FileKind,
+  { value: FileFormat; label: string }[]
+> = {
+  MINDMAP: [
+    { value: "jpg", label: "JPG 이미지(.jpg)" },
+    { value: "png", label: "PNG 이미지(.png)" },
+  ],
+  RECORDING: [{ value: "zip", label: "ZIP(.zip)" }],
+  SUMMARY: [{ value: "txt", label: "텍스트(.txt)" }],
+};
+
+export default function DwnModal({
   onCloseModal,
-}: DwnModalProps) => {
+  projectId,
+  projectName,
+}: DwnModalProps) {
+  const [kind, setKind] = useState<FileKind | "">("");
+  const [format, setFormat] = useState<FileFormat>("jpg");
+
+  const canSubmit = !!kind;
+
+  // 현재 kind에 따른 형식 옵션
+  const formatOptions = useMemo(() => {
+    return kind ? KIND_FORMAT_OPTIONS[kind as FileKind] : [];
+  }, [kind]);
+
+  // kind 바뀌면 해당 kind의 첫 옵션으로 format 동기화
+  useEffect(() => {
+    if (!kind) return;
+    const first = KIND_FORMAT_OPTIONS[kind as FileKind][0]?.value;
+    if (first && format !== first) setFormat(first);
+  }, [kind]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!canSubmit) return;
+
+    await getFileDwn(projectId, kind).then((res) => {
+      const url = res.data.data.projectUrl;
+      downloadAs(url, `${projectName}.${format}`);
+    });
+  };
+
   return (
     <Modal onCloseModal={onCloseModal}>
       <p className="modal-title">다운로드</p>
-      <div className="modal-wrap">
+
+      <form className="modal-wrap" onSubmit={handleSubmit}>
+        {/* 파일 종류 선택 */}
         <div className="file-wrap">
           <h3>파일 선택</h3>
           <div className="radio-container">
-            <div className="radio-wrap mind-map">
-              <div className="img"></div>
-              <input type="radio" name="file" id="mind-map" value="1"/>
+            <label
+              className={`radio-wrap mind-map ${
+                kind === "MINDMAP" ? "active" : ""
+              }`}
+              htmlFor="mind-map"
+            >
+              <div className="img" />
+              <input
+                type="radio"
+                name="file"
+                id="mind-map"
+                value="MINDMAP"
+                checked={kind === "MINDMAP"}
+                onChange={() => setKind("MINDMAP")}
+                required
+              />
               <div className="radio-title">마인드맵</div>
-            </div>
-            <div className="radio-wrap record">
-              <div className="img"></div>
-              <input type="radio" name="file" id="record" value="2"/>
+            </label>
+
+            <label
+              className={`radio-wrap record ${
+                kind === "RECORDING" ? "active" : ""
+              }`}
+              htmlFor="record"
+            >
+              <div className="img" />
+              <input
+                type="radio"
+                name="file"
+                id="record"
+                value="RECORDING"
+                checked={kind === "RECORDING"}
+                onChange={() => setKind("RECORDING")}
+                required
+              />
               <div className="radio-title">음성・스크립트</div>
-            </div>
-            <div className="radio-wrap summary">
-              <div className="img"></div>
-              <input type="radio" name="file" id="summary" value="3"/>
+            </label>
+
+            <label
+              className={`radio-wrap summary ${
+                kind === "SUMMARY" ? "active" : ""
+              }`}
+              htmlFor="summary"
+            >
+              <div className="img" />
+              <input
+                type="radio"
+                name="file"
+                id="summary"
+                value="SUMMARY"
+                checked={kind === "SUMMARY"}
+                onChange={() => setKind("SUMMARY")}
+                required
+              />
               <div className="radio-title">요약본</div>
-            </div>
+            </label>
           </div>
         </div>
+
+        {/* 형식 선택 */}
         <div className="type-wrap">
           <h3>형식 선택</h3>
           <div className="select-wrap">
-            <select>
-              <option>JPG 이미지(.jpg)</option>
-              <option>PNG 이미지(.png)</option>
+            <select
+              aria-label="파일 형식"
+              value={format}
+              onChange={(e) => setFormat(e.target.value as FileFormat)}
+              disabled={!kind} // 종류 선택 전엔 비활성화
+            >
+              {!kind && <option value="">다운로드 파일을 선택하세요</option>}
+              {formatOptions.map((opt) => (
+                <option key={opt.value} value={opt.value}>
+                  {opt.label}
+                </option>
+              ))}
             </select>
           </div>
         </div>
-      </div>
+
+        <button type="submit" className="btn-primary" disabled={!canSubmit}>
+          다운로드
+        </button>
+      </form>
     </Modal>
   );
-};
-
-export default DwnModal;
+}
diff --git a/src/views/main/components/SideBar.tsx b/src/views/main/components/SideBar.tsx
@@ -22,8 +22,6 @@ import PasswordChangeModal from "@/views/main/components/ChangePWModal";
 import News from "@/views/main/components/News";
 
 const SideBar = ({ haveUnreadNews, setHaveUnreadNews }: sideBarPropsOfNews) => {
-  console.log("SideBar Rendered: ", haveUnreadNews);
-
   const [sort, setSort] = useState<string>("/");
   const navigate = useNavigate();
   const { pathname } = useLocation();
@@ -56,8 +54,6 @@ const SideBar = ({ haveUnreadNews, setHaveUnreadNews }: sideBarPropsOfNews) => {
       } else {
         setHaveUnreadNews(false);
       }
-
-      console.log("Unread News Num:", res.data.data.num);
     });
   }, [newsUnreadResponse]);
 
@@ -92,8 +88,6 @@ const SideBar = ({ haveUnreadNews, setHaveUnreadNews }: sideBarPropsOfNews) => {
             b.noticeId.timestamp - a.noticeId.timestamp
         );
 
-      console.log("All News:", allNews);
-      console.log("Unread News:", unreadNews);
       let message = "";
       if (allNews.length == 0) {
         message = "소식이 없습니다.";
diff --git a/src/views/main/components/UserModal.tsx b/src/views/main/components/UserModal.tsx
@@ -86,7 +86,6 @@ const UserModal = ({ onCloseModal, onOpenChangePW }: UserModalProps) => {
                     name: newName,
                     imageUrl: profile?.imageUrl ?? "",
                   } as profileData).then(() => {
-                    // console.log("프로필 변경 성공");
                     setProfile((prev) => prev && { ...prev, name: newName });
                     window.location.reload();
                   });
diff --git a/src/views/main/page/ProjectPage.tsx b/src/views/main/page/ProjectPage.tsx
@@ -40,6 +40,7 @@ const ProjectPage = () => {
   type ModalType = "dwn" | "share" | null;
   const [modalType, setModalType] = useState<ModalType>(null);
   const [projectId, setProjectId] = useState<string>("");
+  const [projectName, setProjectName] = useState<string>("");
   const closeModal = () => setModalType(null);
 
   // function
@@ -96,8 +97,6 @@ const ProjectPage = () => {
       } else {
         setIsHaveUnreadNews(false);
       }
-
-      console.log("Unread News Num:", res.data.data.num);
     });
   }, []);
 
@@ -246,6 +245,7 @@ const ProjectPage = () => {
                         setModalType("dwn");
                         setOpenMenuId(null);
                         setProjectId(list.projectId);
+                        setProjectName(list.projectName);
                       }}
                     >
                       다운로드하기
@@ -258,6 +258,7 @@ const ProjectPage = () => {
                         setModalType("share");
                         setOpenMenuId(null);
                         setProjectId(list.projectId);
+                        setProjectName(list.projectName);
                       }}
                     >
                       공유하기
@@ -270,6 +271,7 @@ const ProjectPage = () => {
                         clickProjectDelete(list.projectId);
                         setOpenMenuId(null);
                         setProjectId(list.projectId);
+                        setProjectName(list.projectName);
                       }}
                     >
                       삭제하기
@@ -332,7 +334,11 @@ const ProjectPage = () => {
             }
           }}
         >
-          <DwnModal onCloseModal={closeModal} />
+          <DwnModal
+            onCloseModal={closeModal}
+            projectId={projectId}
+            projectName={projectName}
+          />
         </div>
       )}
       {modalType === "share" && (
diff --git a/src/views/main/page/ProjrctViewPage.tsx b/src/views/main/page/ProjrctViewPage.tsx
@@ -20,7 +20,7 @@ export default function ProjectViewPage() {
     projectId: "",
     projectName: "",
     imageUrl: "",
-    updateAt: "",
+    updatedAt: "",
     scriptions: [],
     summary: { title: "", content: "" },
   });
diff --git a/src/views/main/page/RecordPage.tsx b/src/views/main/page/RecordPage.tsx
@@ -7,6 +7,7 @@ import arrowDown from "@/assets/imgs/icon/arrow_down_black.svg";
 import { getSearch } from "@/api/common/common";
 import { getRecord } from "@/api/main/record";
 import { getNewsNum } from "@/api/main/news";
+import { getFileDwn } from "@/api/main/fileDwn";
 
 // component
 import SideBar from "@/views/main/components/SideBar";
@@ -17,6 +18,7 @@ import { Link } from "react-router-dom";
 
 // type
 import { recordData } from "@/types/recordData";
+import { downloadAs } from "@/utils/download";
 
 const RecordPage = () => {
   // value
@@ -104,7 +106,6 @@ const RecordPage = () => {
       }));
       setRecord(dataWithSelection);
     });
-    // console.log(record)
   };
 
   useEffect(() => {
@@ -137,8 +138,6 @@ const RecordPage = () => {
       } else {
         setIsHaveUnreadNews(false);
       }
-
-      console.log("Unread News Num:", res.data.data.num);
     });
   }, []);
 
@@ -237,15 +236,34 @@ const RecordPage = () => {
                   <th>
                     <div className="craft-wrap">
                       <div>{checkCount}개 선택됨</div>
-                      <button className="dwn">다운로드 하기</button>
+                      <button
+                        className="dwn"
+                        onClick={async () => {
+                          await getFileDwn(
+                            record
+                              .filter((row) => row.selected)
+                              .map((row) => row.recordId)
+                              .join(","),
+                            "RECORDING"
+                          ).then((res) => {
+                            console.log(res);
+                            downloadAs(
+                              res.data.data.projectUrl,
+                              record.filter((row) => row.selected)[0].name
+                            );
+                          });
+                        }}
+                      >
+                        다운로드 하기
+                      </button>
                       <button className="del">삭제하기</button>
                       <button
                         className="cancel"
-                        onClick={() =>
+                        onClick={async () => {
                           setRecord(
                             record.map((row) => ({ ...row, selected: false }))
-                          )
-                        }
+                          );
+                        }}
                       >
                         취소
                       </button>
diff --git a/src/views/main/page/SummaryPage.tsx b/src/views/main/page/SummaryPage.tsx
@@ -97,7 +97,6 @@ const SummaryPage = () => {
       }));
       setSummary(dataWithSelection);
     });
-    // console.log(summary)
   };
 
   useEffect(() => {
@@ -130,8 +129,6 @@ const SummaryPage = () => {
       } else {
         setIsHaveUnreadNews(false);
       }
-
-      console.log("Unread News Num:", res.data.data.num);
     });
   }, []);
 
diff --git a/src/views/main/style/dwn-modal.sass b/src/views/main/style/dwn-modal.sass
diff --git a/src/views/meeting/components/SideBar.tsx b/src/views/meeting/components/SideBar.tsx
diff --git a/src/views/meeting/page/MeetingPage.tsx b/src/views/meeting/page/MeetingPage.tsx
diff --git a/src/views/meeting/style/side-bar.sass b/src/views/meeting/style/side-bar.sass

Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@ export interface conferenceData {`
`2`	`2`	`projectId: string;`
`3`	`3`	`projectName: string;`
`4`	`4`	`imageUrl: string;`
`5`		`- updateAt: string;`
	`5`	`+ updatedAt: string;`
`6`	`6`	`scriptions?: scriptionsData[];`
`7`	`7`	`summary?: summarysWithTitleData;`
`8`	`8`	`}`