[#47] Feat CheckSignUpPage

potato-club · Jul 25, 2023 · 7cfa222 · 7cfa222
1 parent 9779207
commit 7cfa222
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 5 deletions.
diff --git a/src/components/adminPage/AdminDetailPage.tsx b/src/components/adminPage/AdminDetailPage.tsx
@@ -10,9 +10,6 @@ import { useQueryGetSignUpDetail } from "../../hooks/query/adminSignUp/useQueryG
 export const AdminDetailPage = () => {
   const { id } = Router.query;
   const { isLoading, data } = useQueryGetSignUpDetail(Number(id));
-
-  console.log(data);
-
   return (
     <Wrapper>
       <WrapperInner>
@@ -36,6 +33,7 @@ export const AdminDetailPage = () => {
           page={data?.page}
           login={data?.login}
           database={data?.database}
+          files={data?.files}
           etc={data?.etc}
           meeting={data?.meeting}
           isLoading={isLoading}

diff --git a/src/components/adminPage/SignUpAddInfo.tsx b/src/components/adminPage/SignUpAddInfo.tsx
@@ -1,16 +1,17 @@
 import styled from "styled-components";
 import { MdTune } from "react-icons/md";
-import { useEffect, useState } from "react";
 import { customColor } from "../customColor";
 import { TwoRadioBoxs } from "./components/TwoRadioBoxs";
 import { ColorPalette } from "./components/ColorPalette";
+import { saveAs } from "file-saver";
 
 interface Props {
   mainColor: string[] | undefined;
   subColor: string[] | undefined;
   page: number | undefined;
   login: boolean | undefined;
   database: boolean | undefined;
+  files: { fileName: string; id: number; s3Url: string }[] | undefined;
   etc: string | undefined;
   meeting: string | undefined;
   isLoading: boolean;
@@ -20,6 +21,17 @@ export const SignUpAddInfo = (props: Props) => {
   const daysOfWeek = ["일", "월", "화", "수", "목", "금", "토"];
   const date = props.meeting?.split("T");
   const time = new Date(props.meeting!);
+
+  const handleDownload = (url: string) => {
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = "downloaded_image.jpg";
+    link.target = "_blank"; // Optional: 이미지를 새 탭에서 열기
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
   return (
     <Content>
       <Lbel>
@@ -57,7 +69,14 @@ export const SignUpAddInfo = (props: Props) => {
         </BoxItem>
         <BoxItem>
           <BoxItemLabel>사이트 컨셉 참고자료 첨부</BoxItemLabel>
-          <BoxItemContent>&[수정필요]&</BoxItemContent>
+          <BoxItemContent>
+            {date !== undefined &&
+              props.files?.map((i, id) => (
+                <FileButton key={id} onClick={() => handleDownload(i.s3Url)}>
+                  {i.fileName}
+                </FileButton>
+              ))}
+          </BoxItemContent>
         </BoxItem>
         <BoxItem>
           <BoxItemLabel>기타사항</BoxItemLabel>
@@ -104,6 +123,7 @@ const BoxItem = styled.div`
   display: flex;
   flex-direction: column;
   position: relative;
+  width: 100%;
   gap: 6px 0;
 `;
 const BoxItemLabel = styled.div`
@@ -127,3 +147,16 @@ const BoxItemContent = styled.div`
   border-top-right-radius: 20px;
   border-bottom-right-radius: 20px;
 `;
+const FileButton = styled.button`
+  display: block;
+  width: calc(100vw - 402px);
+  font-size: 14px;
+  color: ${customColor.white};
+  letter-spacing: -1px;
+  text-decoration: underline;
+  cursor: pointer;
+  text-align: start;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+`;
diff --git a/src/hooks/query/adminSignUp/useQueryGetSignUpDetail.ts b/src/hooks/query/adminSignUp/useQueryGetSignUpDetail.ts
@@ -1,3 +1,4 @@
+import { FieldErrors } from "react-hook-form";
 import { useCallback } from "react";
 import { useQuery } from "react-query";
 import { AdminSignUpAPI } from "../../../apis/controller/adminSignUp.api";
@@ -17,6 +18,7 @@ export interface ResponseType {
   siteName: string;
   subColor: string[];
   subLine: string;
+  files: { fileName: string; id: number; s3Url: string }[];
 }
 
 export const useQueryGetSignUpDetail = (id: number) => {
@@ -37,6 +39,7 @@ export const useQueryGetSignUpDetail = (id: number) => {
       siteName: response.siteName,
       subColor: response.subColor,
       subLine: response.subLine,
+      files: response.files,
     };
     return signUpsRes;
   }, []);