Skip to content
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

Jump to bottom

글작성 폼 이미지 파일 잘못 전달되는 오류 수정 및 mock 카테고리 id가 전달되는 오류 수정_Feat/#210 #213

Merged
merged 3 commits into from
Aug 2, 2023
Merged

글작성 폼 이미지 파일 잘못 전달되는 오류 수정 및 mock 카테고리 id가 전달되는 오류 수정_Feat/#210 #213

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2fc93f4
fix: (#210) 본문 사진 input 사라짐에 따라 발생하는 오류 수정
chsua Aug 2, 2023
113d5a5
feat: (#210) 이미지가 없는 경우 undefined이 아닌 임의의 파일로 전달.
chsua Aug 2, 2023
53f6bd6
feat: (#205) 선택한 카테고리 아이디 리스트 api에 보내기
chsua Aug 2, 2023
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
8 changes: 5 additions & 3 deletions frontend/src/components/PostForm/ContentImageSection/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,19 +19,21 @@ export default function ContentImageSection({ contentImageHook, size }: ContentI

return (
<>
{contentImage ? (
{contentImage && (
<S.ContentImageContainer>
<OptionCancelButton onClick={removeImage} />
<S.ContentImageWrapper $size={size}>
<S.ContentImage src={contentImage} alt="본문에 포함된 사진" />
</S.ContentImageWrapper>
</S.ContentImageContainer>
) : (
)}
{
<S.FileInputContainer>
<S.Label
htmlFor="content-image-upload"
aria-label="본문 이미지 업로드 버튼"
title="이미지 업로드"
$isVisible={!!contentImage}
>
본문에 사진 넣기
</S.Label>
Expand All @@ -42,7 +44,7 @@ export default function ContentImageSection({ contentImageHook, size }: ContentI
onChange={handleUploadImage}
/>
</S.FileInputContainer>
)}
}
</>
);
}
4 changes: 2 additions & 2 deletions frontend/src/components/PostForm/ContentImageSection/style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,11 +37,10 @@ export const FileInput = styled.input`
visibility: hidden;
`;

export const Label = styled.label`
export const Label = styled.label<{ $isVisible: boolean }>`
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
border: 2px solid var(--primary-color);
Expand All @@ -54,5 +53,6 @@ export const Label = styled.label`
font: var(--text-body);
text-align: center;
visibility: ${props => (props.$isVisible ? 'hidden' : '')};
cursor: pointer;
`;
20 changes: 12 additions & 8 deletions frontend/src/components/PostForm/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,10 @@ export default function PostForm({ data, mutate, isError, error }: PostFormProps

const { text: writingTitle, handleTextChange: handleTitleChange } = useText(title ?? '');
const { text: writingContent, handleTextChange: handleContentChange } = useText(content ?? '');
const { selectedOptionList, handleOptionAdd, handleOptionDelete } = useMultiSelect(
categoryIds ?? [],
CATEGORY_COUNT_LIMIT
);

const handleDeadlineButtonClick = (option: string) => {
setTime(formatTimeWithOption(option));
Expand Down Expand Up @@ -96,8 +100,13 @@ export default function PostForm({ data, mutate, isError, error }: PostFormProps
const contentImageFileList: File[] = [];
const optionImageFileList: File[] = [];
fileInputList.forEach((item, index) => {
if (imageUrlList[index] === '') item.value = '';
if (item.files) {
if (!item.files) return;

if (imageUrlList[index] === '') {
index === 0
? contentImageFileList.push(new File(['없는사진'], '없는사진.jpg'))
: optionImageFileList.push(new File(['없는사진'], '없는사진.jpg'));
} else {
index === 0
? contentImageFileList.push(item.files[0])
: optionImageFileList.push(item.files[0]);
Expand All @@ -112,7 +121,7 @@ export default function PostForm({ data, mutate, isError, error }: PostFormProps
});

const updatedPostTexts = {
categoryIds: [1, 2], // 다중 선택 컴포넌트 구현 후 수정 예정
categoryIds: selectedOptionList.map(option => option.id),
title: writingTitle ?? '',
imageUrl: imageUrl ?? '',
content: writingContent ?? '',
Expand Down Expand Up @@ -164,11 +173,6 @@ export default function PostForm({ data, mutate, isError, error }: PostFormProps
return `${timeMessage.join(' ')} 후에 마감됩니다.`;
};

const { selectedOptionList, handleOptionAdd, handleOptionDelete } = useMultiSelect(
categoryIds ?? [],
CATEGORY_COUNT_LIMIT
);

return (
<>
<S.HeaderWrapper>
Expand Down