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

* fix: (#210) 본문 사진 input 사라짐에 따라 발생하는 오류 수정 * feat: (#210) 이미지가 없는 경우 undefined이 아닌 임의의 파일로 전달. * feat: (#205) 선택한 카테고리 아이디 리스트 api에 보내기
woowacourse-teams · Aug 2, 2023 · 840bf54 · 840bf54
1 parent 3f712ae
commit 840bf54
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 13 deletions.
diff --git a/frontend/src/components/PostForm/ContentImageSection/index.tsx b/frontend/src/components/PostForm/ContentImageSection/index.tsx
@@ -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>
@@ -42,7 +44,7 @@ export default function ContentImageSection({ contentImageHook, size }: ContentI
  onChange={handleUploadImage}
  />
  </S.FileInputContainer>
- )}
+ }
  </>
  );
 }
diff --git a/frontend/src/components/PostForm/ContentImageSection/style.ts b/frontend/src/components/PostForm/ContentImageSection/style.ts
@@ -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);
@@ -54,5 +53,6 @@ export const Label = styled.label`
  font: var(--text-body);
  text-align: center;
 
+ visibility: ${props => (props.$isVisible ? 'hidden' : '')};
  cursor: pointer;
 `;
diff --git a/frontend/src/components/PostForm/index.tsx b/frontend/src/components/PostForm/index.tsx
@@ -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));
@@ -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]);
@@ -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 ?? '',
@@ -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>