Skip to content

배너 사이즈 수정 #60

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: develop
Choose a base branch
from
Open

배너 사이즈 수정 #60

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
309eac2
fix :: 배너 캡쳐시 height 길이 늘리기
Aug 9, 2024
903786b
fix :: 배너 보여질 때 크기 맞추기 수정
Aug 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions src/Apis/File/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
}
);
};
};
18 changes: 8 additions & 10 deletions src/Apis/Files/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
7 changes: 5 additions & 2 deletions src/Components/Banner/BannerDetail.tsx/style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand Down
39 changes: 19 additions & 20 deletions src/Components/CreateBanner/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
}
};
Expand Down Expand Up @@ -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>
Expand Down
11 changes: 5 additions & 6 deletions src/Components/CreateBanner/styled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<{
Expand All @@ -66,7 +65,7 @@ export const InputWrapper = styled.div<{
};
}>`
position: absolute;
top: 35%;
top: 40%;
left: 90px;
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -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;
Expand Down