fix :: 배너 캡쳐시 height 길이 늘리기

Team-return · Aug 9, 2024 · 309eac2 · 309eac2
1 parent bf213d3
commit 309eac2
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 39 deletions.
diff --git 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,
 		}
 	);
-};
+};
diff --git 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<PresignedUrlResponse>(`/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
@@ -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}
 							></_.Input>
 						</_.InputWrapper>
-						<_.LogoUpload>
-							<_.FileInputContainer>
-								{logoPreview ? (
-									<img
-										src={logoPreview}
-										alt="로고 미리보기"
-										style={{
-											width: '100%',
-											height: '100%',
-											borderRadius: '12px',
-										}}
-									/>
-								) : (
-									<>로고를 업로드 해주세요.</>
-								)}
-								<_.FileInput
-									type="file"
-									onChange={handleFileChange}
+						<_.FileInputContainer>
+							{logoPreview ? (
+								<img
+									src={logoPreview}
+									alt="로고 미리보기"
+									style={{
+										width: '100%',
+										height: '100%',
+										borderRadius: '12px',
+									}}
 								/>
-							</_.FileInputContainer>
-						</_.LogoUpload>
+							) : (
+								<>로고를 업로드 해주세요.</>
+							)}
+							<_.FileInput
+								type="file"
+								onChange={handleFileChange}
+							/>
+						</_.FileInputContainer>
 					</_.CaptureWrapper>
 				</_.CreateWrapper>
 				<_.MovePage>

diff --git a/src/Components/CreateBanner/styled.ts b/src/Components/CreateBanner/styled.ts
@@ -40,21 +40,20 @@ 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;
 `;
 
 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;