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/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` 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;