From 309eac2a96286bca78f8eed0ec5eb3b8f3bde550 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=80=EC=A7=80?= Date: Fri, 9 Aug 2024 10:52:27 +0900 Subject: [PATCH 1/2] =?UTF-8?q?fix=20::=20=EB=B0=B0=EB=84=88=20=EC=BA=A1?= =?UTF-8?q?=EC=B3=90=EC=8B=9C=20height=20=EA=B8=B8=EC=9D=B4=20=EB=8A=98?= =?UTF-8?q?=EB=A6=AC=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Apis/File/index.ts | 5 ++-- src/Apis/Files/index.ts | 18 ++++++------- src/Components/CreateBanner/index.tsx | 39 +++++++++++++-------------- src/Components/CreateBanner/styled.ts | 11 ++++---- 4 files changed, 34 insertions(+), 39 deletions(-) diff --git a/src/Apis/File/index.ts b/src/Apis/File/index.ts index 5a5bc56..584bb9f 100644 --- a/src/Apis/File/index.ts +++ b/src/Apis/File/index.ts @@ -55,17 +55,16 @@ export const useFileUpload = (file: File, options: MutationOptions) => { ); }; - /** 선생님 모집의뢰 상태 변경 */ export const useUpload = (files: File[], options: MutationOptions) => { const formData = new FormData(); files.forEach((file) => { formData.append('file', file); - }) + }); return useMutation( async () => instance.post(`${router}?type=EXTENSION_FILE`, formData), { ...options, } ); -}; \ No newline at end of file +}; diff --git a/src/Apis/Files/index.ts b/src/Apis/Files/index.ts index 8bc216e..cbfbc42 100644 --- a/src/Apis/Files/index.ts +++ b/src/Apis/Files/index.ts @@ -7,34 +7,32 @@ const EXTENSION_FILE = 'EXTENSION_FILE'; export const usePresignedUrl = () => { return useMutation( - async (attachments: File[]) => { - const files = attachments.map((item) => ({ + async (files: File[]) => { + const body = files.map((item) => ({ type: EXTENSION_FILE, file_name: item.name, })); const { data: presignedUrls } = await instance.post(`/files/pre-signed`, { - files, + files: body, }); - return { presignedUrls, attachments }; + return { presignedUrls, files }; }, { onSuccess: async ({ presignedUrls, - attachments, + files, }: { presignedUrls: PresignedUrlResponse; - attachments: File[]; + files: File[]; }) => { const uploadPromises = presignedUrls.urls.map( // eslint-disable-next-line ({ pre_signed_url }, idx) => { (async () => - await axios.put( - pre_signed_url, - attachments[idx] - ))(); + await axios.put(pre_signed_url, files[idx]))(); + console.log(pre_signed_url); } ); await Promise.all(uploadPromises); diff --git a/src/Components/CreateBanner/index.tsx b/src/Components/CreateBanner/index.tsx index 1955dbe..0f9161f 100644 --- a/src/Components/CreateBanner/index.tsx +++ b/src/Components/CreateBanner/index.tsx @@ -130,6 +130,7 @@ export function CreateBanner({ date, setDate }: PropType) { `${process.env.REACT_APP_FILE_URL}` + response?.presignedUrls.urls[0].file_path || '' ); + console.log(getPresignedUrl); navigator('/banner'); } }; @@ -293,27 +294,25 @@ export function CreateBanner({ date, setDate }: PropType) { onChange={handleChange} > - <_.LogoUpload> - <_.FileInputContainer> - {logoPreview ? ( - 로고 미리보기 - ) : ( - <>로고를 업로드 해주세요. - )} - <_.FileInput - type="file" - onChange={handleFileChange} + <_.FileInputContainer> + {logoPreview ? ( + 로고 미리보기 - - + ) : ( + <>로고를 업로드 해주세요. + )} + <_.FileInput + type="file" + onChange={handleFileChange} + /> + <_.MovePage> diff --git a/src/Components/CreateBanner/styled.ts b/src/Components/CreateBanner/styled.ts index 7a6f085..f8ba43c 100644 --- a/src/Components/CreateBanner/styled.ts +++ b/src/Components/CreateBanner/styled.ts @@ -40,7 +40,7 @@ export const CreateWrapper = styled.div` flex-direction: column; gap: 28px; width: 1080px; - height: 460px; + height: 570px; background-color: white; border-radius: 4px; padding: 28px 0px 0px 40px; @@ -48,13 +48,12 @@ export const CreateWrapper = styled.div` export const BannerImg = styled.img` width: 1000px; - height: 320px; - z-index: 0; + height: 450px; `; export const CaptureWrapper = styled.div` width: 1000px; - height: 320px; + height: 450px; `; export const InputWrapper = styled.div<{ @@ -66,7 +65,7 @@ export const InputWrapper = styled.div<{ }; }>` position: absolute; - top: 35%; + top: 40%; left: 90px; display: flex; flex-direction: column; @@ -116,7 +115,7 @@ export const LogoUpload = styled.div``; export const FileInputContainer = styled.div` position: absolute; - top: 35%; + top: 40%; left: 400px; display: flex; justify-content: center; From 903786b38f9b3a11f31d518455837ac592e659d7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=80=EC=A7=80?= Date: Fri, 9 Aug 2024 20:14:44 +0900 Subject: [PATCH 2/2] =?UTF-8?q?fix=20::=20=EB=B0=B0=EB=84=88=20=EB=B3=B4?= =?UTF-8?q?=EC=97=AC=EC=A7=88=20=EB=95=8C=20=ED=81=AC=EA=B8=B0=20=EB=A7=9E?= =?UTF-8?q?=EC=B6=94=EA=B8=B0=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Components/Banner/BannerDetail.tsx/style.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/Components/Banner/BannerDetail.tsx/style.ts b/src/Components/Banner/BannerDetail.tsx/style.ts index 31fe0f6..8f13e81 100644 --- a/src/Components/Banner/BannerDetail.tsx/style.ts +++ b/src/Components/Banner/BannerDetail.tsx/style.ts @@ -36,10 +36,13 @@ export const Wrapper = styled.div` display: flex; justify-content: space-between; `; - -export const BannerImg = styled.img` +export const BannerImg = styled.div<{ src: string }>` width: 1000px; height: 300px; + background-image: url(${(props) => props.src}); + background-position: center center; + background-repeat: no-repeat; + background-size: cover; `; export const TextWrapper = styled.div`