본문과 내용에 사진을 추가할 때 안될 때가 있다 (#398)

* fix: (#280) 본문사진 등록-삭제 후 동일한 사진 업드시 업로드되지 않는 문제 해결 * feat: mock url 실제 서버 url로 수정
woowacourse-teams · Sep 12, 2023 · 88f998c · 88f998c
1 parent d91a455
commit 88f998c
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 7 deletions.
diff --git a/frontend/src/api/post.ts b/frontend/src/api/post.ts
@@ -10,7 +10,6 @@ import {
 } from '@utils/fetch';
 
 const BASE_URL = process.env.VOTOGETHER_BASE_URL ?? '';
-const MOCK_URL = process.env.VOTOGETHER_MOCKING_URL;
 
 export const transformPostResponse = (post: PostInfoResponse): PostInfo => {
  return {
@@ -75,7 +74,7 @@ export const editPost = async (postId: number, updatedPost: FormData) => {
 };
 
 export const deletePost = async (postId: number) => {
- return await deleteFetch(`${MOCK_URL}/posts/${postId}`);
+ return await deleteFetch(`${BASE_URL}/posts/${postId}`);
 };
 
 export const setEarlyClosePost = async (postId: number) => {

diff --git a/frontend/src/api/report.ts b/frontend/src/api/report.ts
@@ -2,7 +2,7 @@ import { ReportRequest } from '@type/report';
 
 import { postFetch } from '@utils/fetch';
 
-const BASE_URL = process.env.VOTOGETHER_MOCKING_URL;
+const BASE_URL = process.env.VOTOGETHER_BASE_URL;
 
 export const reportContent = async (reportData: ReportRequest) => {
  return await postFetch(`${BASE_URL}/report`, reportData);

diff --git a/frontend/src/components/PostForm/ContentImageSection/index.tsx b/frontend/src/components/PostForm/ContentImageSection/index.tsx
@@ -1,4 +1,4 @@
-import { ChangeEvent } from 'react';
+import { ChangeEvent, MutableRefObject } from 'react';
 
 import { Size } from '@type/style';
 
@@ -10,12 +10,13 @@ interface ContentImageSectionProps {
  size: Size;
  contentImageHook: {
  contentImage: string;
+ contentInputRef: MutableRefObject<HTMLInputElement | null>;
  removeImage: () => void;
  handleUploadImage: (event: ChangeEvent<HTMLInputElement>) => void;
  };
 }
 export default function ContentImageSection({ contentImageHook, size }: ContentImageSectionProps) {
- const { contentImage, removeImage, handleUploadImage } = contentImageHook;
+ const { contentImage, contentInputRef, removeImage, handleUploadImage } = contentImageHook;
 
  return (
  <>
@@ -39,6 +40,7 @@ export default function ContentImageSection({ contentImageHook, size }: ContentI
  </S.Label>
  <S.FileInput
  id="content-image-upload"
+ ref={contentInputRef}
  type="file"
  accept="image/*"
  onChange={handleUploadImage}

diff --git a/frontend/src/hooks/useContentImage.ts b/frontend/src/hooks/useContentImage.ts
@@ -1,12 +1,14 @@
-import { ChangeEvent, useState } from 'react';
+import { ChangeEvent, useRef, useState } from 'react';
 
 import { MAX_FILE_SIZE } from '@components/PostForm/constants';
 
 export const useContentImage = (imageUrl: string = '') => {
  const [contentImage, setContentImage] = useState(imageUrl);
+ const contentInputRef = useRef<HTMLInputElement | null>(null);
 
  const removeImage = () => {
  setContentImage('');
+ if (contentInputRef.current) contentInputRef.current.value = '';
  };
 
  const handleUploadImage = (event: ChangeEvent<HTMLInputElement>) => {
@@ -34,5 +36,5 @@ export const useContentImage = (imageUrl: string = '') => {
  };
  };
 
- return { contentImage, removeImage, handleUploadImage };
+ return { contentImage, contentInputRef, removeImage, handleUploadImage };
 };