Merge pull request #152 from nori-dongsan/community/#146

Community/#146
nori-dongsan · Jul 22, 2022 · f53ac7d · f53ac7d
2 parents 75ed990 + 528666b
commit f53ac7d
Show file tree

Hide file tree

Showing 4 changed files with 116 additions and 70 deletions.
diff --git a/components/common/WriteHeader.tsx b/components/common/WriteHeader.tsx
@@ -32,15 +32,19 @@ export default function WriteHeader() {
       });
 
     const res = await postCommunity(formData);
+
     const {
-      data: { data, status },
+      data: { status },
     } = res;
-    setNewPostInfo({
-      category: '후기',
-      title: '',
-      content: '',
-    });
-    if (status === 201) router.push(`/community/${data.boardId}`);
+
+    if (status === 201) {
+      setNewPostInfo({
+        category: '후기',
+        title: '',
+        content: '',
+      });
+      router.push(`/community/${res.data.data.boardId}`);
+    }
   };
 
   const handleCancel = () => {
@@ -61,31 +65,58 @@ export default function WriteHeader() {
       isChangeContent,
       isChangeImageList,
     } = isChangeCommunity;
+
     const updatePostInfo: PutCommunityBody = {};
+    const formData = new FormData();
+
+    if (isChangeCategory) formData.append('category', category);
+    if (isChangeTitle) {
+      formData.append('title', title);
+      updatePostInfo.title = title;
+    }
+    if (isChangeContent) {
+      formData.append('content', content);
+      updatePostInfo.content = content;
+    }
+    if (isChangeImageList) {
+      if (imageList)
+        imageList.map((image) => {
+          formData.append('imageList', image.file);
+        });
+    }
 
-    if (isChangeCategory) updatePostInfo.category = category;
-    if (isChangeTitle) updatePostInfo.title = title;
-    if (isChangeContent) updatePostInfo.content = content;
-    if (isChangeImageList) updatePostInfo.imageList = imageList;
+    console.log('==check==');
+    console.log(formData.get('title'));
+    console.log(formData.get('content'));
+    console.log(formData.get('category'));
+    // console.log(imageList);
 
     if (updatePostInfo.title === '' || updatePostInfo.content === '') {
       alert('내용을 입력해주세요.');
       return;
     }
 
-    const data = await putCommunity(String(query.cid), updatePostInfo);
-    setNewPostInfo({
-      category: '후기',
-      title: '',
-      content: '',
-    });
-    setIsChangeCommunity({
-      isChangeCategory: false,
-      isChangeTitle: false,
-      isChangeContent: false,
-      isChangeImageList: false,
-    });
-    router.push(`/community/${data.id}`);
+    const res = await putCommunity(String(query.cid), formData);
+    const {
+      data: { status },
+    } = res;
+
+    console.log('== check 수정 ==');
+    console.log(res);
+    if (status === 200) {
+      setNewPostInfo({
+        category: '후기',
+        title: '',
+        content: '',
+      });
+      setIsChangeCommunity({
+        isChangeCategory: false,
+        isChangeTitle: false,
+        isChangeContent: false,
+        isChangeImageList: false,
+      });
+      router.push(`/community/${res.data.data.boardId}`);
+    }
   };
 
   return (

diff --git a/core/api/community.ts b/core/api/community.ts
@@ -37,13 +37,12 @@ export const deleteCommunity = async (id: string) => {
   }
 };
 
-export const putCommunity = async (id: string, body: PutCommunityBody) => {
-  try {
-    const { data } = await baseInstance.put(`/board/${id}`, body);
-    return data;
-  } catch (e) {
-    console.log(e);
-  }
+export const putCommunity = (id: string, body: FormData) => {
+  return baseInstance.put(`/board/${id}`, body, {
+    headers: {
+      'Content-Type': 'multipart/form-data',
+    },
+  });
 };
 
 export const postReply = async (body: PostCommentBody) => {

diff --git a/pages/community/[cid].tsx b/pages/community/[cid].tsx
@@ -50,7 +50,7 @@ export default function CommunityDetail({
 
     if (val && cid) {
       const status = await deleteCommunity(cid);
-      if (status === 200) router.push('/community');
+      if (status === 200) router.replace('/community');
     }
   };
 
@@ -120,7 +120,13 @@ export default function CommunityDetail({
       <DetailFloatingBtn heartNum={0} replyNum={replyCount} />
       {isExpanded && (
         <StExpandedImgWrapper onClick={() => handleExpanded()}>
-          <StExpandedImg src={expandedImg} alt="expanded" />
+          <StExpandedImg
+            src={
+              'https://nori-community.s3.ap-northeast-2.amazonaws.com/' +
+              expandedImg
+            }
+            alt="expanded"
+          />
         </StExpandedImgWrapper>
       )}
     </StCommunityMain>
@@ -138,6 +144,8 @@ export const getServerSideProps: GetServerSideProps<Props, Params> = async ({
   params,
 }) => {
   const res = await getCommunityDetail(params!.cid);
+  console.log('==커뮤니티 디테일==');
+  console.log(res);
   return {
     props: {
       data: { ...res.data.data, id: params!.cid },
@@ -308,3 +316,13 @@ const StExpandedImg = styled.img`
   left: 50%;
   transform: translate(-50%, -50%);
 `;
+
+// decodeURIComponent(
+//   'https://nori-image.s3.ap-northeast-2.amazonaws.com/장난감점빵/[대여](미개봉새상품) 타이니러브 수더앤그루브 프린세스테일즈모빌 (흑백+칼라+거치대+건전지포함) 플러스패키지.jpg',
+// )
+
+// encodeURIComponent(
+//   'https://nori-image.s3.ap-northeast-2.amazonaws.com/장난감점빵/[대여](미개봉새상품) 타이니러브 수더앤그루브 프린세스테일즈모빌 (흑백%2b칼라%2b거치대%2b건전지포함) 플러스패키지.jpg',
+// )
+
+// let replaced_str = str.replace(/\+/g, '%2b');
diff --git a/pages/write/[cid].tsx b/pages/write/[cid].tsx
@@ -28,28 +28,30 @@ export default function UpdateForm({
     setTitle(data.title);
 
     const imageList: ImgData[] = [];
-    data.imageList.forEach(async (image, index) => {
-      const file = await convertURLtoFile(image);
-      setImagesSize((prev) => prev + file.size);
-      imageList.push({
-        id: index,
-        src: image,
-        file: file,
-      });
-    });
+    // data.imageList.forEach(async (image, index) => {
+    //   const file = await convertURLtoFile(
+    //     'https://nori-community.s3.ap-northeast-2.amazonaws.com/' + image,
+    //   );
+    //   setImagesSize((prev) => prev + file.size);
+    //   imageList.push({
+    //     id: index,
+    //     src: image,
+    //     file: file,
+    //   });
+    // });
     setImages(imageList);
   }, []);
 
   const menu = ['후기', '질문', '정보 공유'];
 
-  const convertURLtoFile = async (url: string) => {
-    const response = await fetch(url);
-    const data = await response.blob();
-    const ext = url.split('.').pop(); // url 구조에 맞게 수정할 예정
-    const filename = url.split('/').pop(); // url 구조에 맞게 수정할 예정
-    const metadata = { type: `image/${ext}` };
-    return new File([data], filename!, metadata);
-  };
+  // const convertURLtoFile = async (url: string) => {
+  //   const response = await fetch(url);
+  //   const data = await response.blob();
+  //   const ext = url.split('.').pop(); // url 구조에 맞게 수정할 예정
+  //   const filename = url.split('/').pop(); // url 구조에 맞게 수정할 예정
+  //   const metadata = { type: `image/${ext}` };
+  //   return new File([data], filename!, metadata);
+  // };
 
   const handleIsCategory = () => {
     setIsCategory((prev) => !prev);
@@ -90,18 +92,13 @@ export default function UpdateForm({
       return;
     }
     setImagesSize(totalImagesSize);
-
-    const formData = new FormData();
-    images.map((image) => formData.append(image.id + '', image.file));
-    imageList.map((image) => formData.append(image.id + '', image.file));
-
     setIsChangeCommunity({
       ...isChangeCommunity,
       isChangeImageList: true,
     });
     setNewPostInfo({
       ...newPostInfo,
-      imageList: formData,
+      imageList,
     });
     setImages([...images, ...imageList]);
   };
@@ -111,16 +108,13 @@ export default function UpdateForm({
     const delImg = images.filter((image) => image.id === id);
 
     setImagesSize((prev) => prev - delImg[0].file.size);
-
-    const formData = new FormData();
-    imgDelData.map((image) => formData.append(image.id + '', image.file));
     setIsChangeCommunity({
       ...isChangeCommunity,
       isChangeImageList: true,
     });
     setNewPostInfo({
       ...newPostInfo,
-      imageList: formData,
+      imageList: imgDelData,
     });
     setImages(imgDelData);
   };
@@ -212,7 +206,13 @@ export default function UpdateForm({
               {images.length > 0 &&
                 images.map((image) => (
                   <StPreviewImgWrapper key={image.id}>
-                    <StPreviewImg src={image.src} alt={String(image.id)} />
+                    <StPreviewImg
+                      src={
+                        'https://nori-community.s3.ap-northeast-2.amazonaws.com/' +
+                        image.src
+                      }
+                      alt={String(image.id)}
+                    />
                     <StIcDelete onClick={() => handleDeleteImg(image.id)} />
                   </StPreviewImgWrapper>
                 ))}
@@ -234,18 +234,16 @@ interface Params extends ParsedUrlQuery {
 export const getServerSideProps: GetServerSideProps<Props, Params> = async ({
   params,
 }) => {
-  const data = await getCommunityDetail(params!.cid);
+  const res = await getCommunityDetail(params!.cid);
+  console.log('==커뮤니티 디테일 수정==');
+  console.log(res);
   return {
     props: {
       data: {
-        title: '장난감 후기 알려드립니다.',
-        category: '정보 공유',
-        content:
-          '군인 또는 군무원이 아닌 국민은 대한민국의 영역안에서는 중대한 군사상 기밀·초병·초소·유독음식물공급·포로·군용물에 관한 죄중 법률이 정한 경우와 비상계엄이 선포된 경우를 제외하고는 군사법원의 재판을 받지 아니한다.\n 선거에 관한 경비는 법률이 정하는 경우....경우와 비상계엄이 선포된 경우를 제외하고는 군사법원의 재판을 받지 아니한다.\n 선거에 관한 경비는 법률이 정하는 경우....',
-        imageList: [
-          'https://img.huffingtonpost.com/asset/5d703563250000ad0003e5bd.jpeg?ops=scalefit_630_noupscale',
-          'http://image.auction.co.kr/itemimage/24/af/15/24af15b716.jpg',
-        ],
+        title: res.data.data.title,
+        category: res.data.data.category,
+        content: res.data.data.content,
+        imageList: res.data.data.imageList,
       },
     },
   };