[Fix]api connection - 주로 revise 페이지 (#195)

* 🐛Fix: revise 페이지 put api 연동 * 💄Design: 사이드바 수정
donga-it-club · Apr 20, 2024 · 7a51745 · 7a51745
1 parent a20ebee
commit 7a51745
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 52 deletions.
diff --git a/src/api/@types/Retrospectives.ts b/src/api/@types/Retrospectives.ts
@@ -90,15 +90,15 @@ export interface PutTeamRetrospectiveRequest {
   title: string;
   teamId?: number;
   description: string;
-  status: keyof TStatus;
+  status: string;
   thumbnail?: string;
 }
 
 export interface PutPersonalRetrospectiveRequest {
   retrospectiveId: number;
   title: string;
   description: string;
-  status: keyof TStatus;
+  status: string;
   thumbnail?: string;
 }
 

diff --git a/src/components/layout/parts/PageSideBar.tsx b/src/components/layout/parts/PageSideBar.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { PeopleFill, Person, PersonCircle, PersonFill, PlusCircleFill } from 'react-bootstrap-icons';
+import { IoArrowUndoSharp } from 'react-icons/io5';
 import { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Flex } from '@chakra-ui/react';
 import { useRecoilState } from 'recoil';
 import Search_SideBar from './Search_SideBar';
@@ -92,6 +93,16 @@ const PageSideBar = () => {
 
           {/* Create New Retro */}
         </AccordionItem>
+        <AccordionItem border="1px solid gray">
+          <AccordionButton>
+            <Flex alignItems="center" padding="2px 10px">
+              <IoArrowUndoSharp style={{ marginRight: '10px' }} size={15} />
+              <a href="/retrolist" style={{ color: '#111b47', textDecoration: 'none' }}>
+                Move to the List
+              </a>
+            </Flex>
+          </AccordionButton>
+        </AccordionItem>
         <AccordionItem border="1px solid gray">
           <AccordionButton>
             <Flex alignItems="center" padding="2px 10px">

diff --git a/src/components/writeRetro/revise/RetroImageUploader.tsx b/src/components/writeRetro/revise/RetroImageUploader.tsx
@@ -4,11 +4,11 @@ import { Button, Image } from '@chakra-ui/react';
 import { v4 as uuidv4 } from 'uuid';
 
 interface Props {
-  image: string;
-  setImage: (image: File | null, uuid: string) => void;
+  image: string | undefined;
+  onChange: (image: File | null, uuid: string) => void;
 }
 
-const RetroImageUploader: FC<Props> = ({ image, setImage }) => {
+const RetroImageUploader: FC<Props> = ({ image, onChange }) => {
   const [preview, setPreview] = useState<string | null>(null);
   const [_, setImageUUID] = useState<string | null>(null); // 상태를 활용할 수 있도록 수정
 
@@ -22,8 +22,11 @@ const RetroImageUploader: FC<Props> = ({ image, setImage }) => {
 
     if (files) {
       const reader = new FileReader();
+      // const imageUrl = URL.createObjectURL(files);
+      // const imageUrlString: string = imageUrl;
       const uuid = uuidv4();
-      setImage(files, uuid);
+      // const fix_uuid = uuid.replace(/\n/gi, '\\n');
+      onChange(files, uuid);
 
       reader.onloadend = () => {
         const result = reader.result as string;
@@ -37,7 +40,7 @@ const RetroImageUploader: FC<Props> = ({ image, setImage }) => {
   const DeleteImage: MouseEventHandler<HTMLButtonElement> = () => {
     setPreview(null);
     setImageUUID(null);
-    setImage(null, '');
+    onChange(null, '');
   };
 
   return (

diff --git a/src/components/writeRetro/revise/ReviseSetting.tsx b/src/components/writeRetro/revise/ReviseSetting.tsx
@@ -1,7 +1,6 @@
 import { FC, useEffect, useState } from 'react';
 import { BsPersonCircle } from 'react-icons/bs';
 import { FaCheck } from 'react-icons/fa';
-import { IoIosInformationCircle } from 'react-icons/io';
 import { IoClose } from 'react-icons/io5';
 import { MdModeEdit } from 'react-icons/md';
 import { useLocation, useNavigate } from 'react-router-dom';
@@ -13,12 +12,14 @@ import {
   EditablePreview,
   Flex,
   FormControl,
-  FormLabel,
   IconButton,
   Input,
-  Switch,
+  Radio,
+  RadioGroup,
+  Stack,
   useEditableControls,
 } from '@chakra-ui/react';
+import axios from 'axios';
 import DeleteRetrospective from './DeleteRetrospective';
 import RetroImageUploader from './RetroImageUploader';
 import { RetrospectiveData } from '@/api/@types/Retrospectives';
@@ -32,7 +33,7 @@ import * as S from '@/styles/writeRetroStyles/ReviseLayout.style';
 
 interface Props {
   retro: RetrospectiveData;
-  status: string | undefined;
+  status: string;
   setStatus: (status: string) => void;
 }
 
@@ -41,9 +42,8 @@ const ReviseSetting: FC<Props> = ({ retro, status, setStatus }) => {
   const query = search.split(/[=,&]/);
   const retrospectiveId = Number(query[1]);
   const teamId = Number(query[3]);
-  const [isChecked, setIsChecked] = useState<boolean>(false);
-
-  const [image, setImage] = useState<string>(retro.thumbnail);
+  const [image, setImage] = useState<Blob | null>(null);
+  const [imageURL, setImageURL] = useState<string>();
   const [title, setTitle] = useState<string>('');
   const [templateName, setTemplateName] = useState<TemplateNameData[]>();
   const [description, setDescription] = useState<string>('');
@@ -54,7 +54,7 @@ const ReviseSetting: FC<Props> = ({ retro, status, setStatus }) => {
     if (retro) {
       try {
         const data = await postImageToS3({ filename: retro.thumbnail, method: 'GET' });
-        setImage(data.data.preSignedUrl);
+        setImageURL(data.data.preSignedUrl);
       } catch (e) {
         toast.error(e);
       }
@@ -76,47 +76,45 @@ const ReviseSetting: FC<Props> = ({ retro, status, setStatus }) => {
     try {
       if (teamId) {
         const data = await RetrospectiveService.putTeam({
-          retrospectiveId: 102,
+          retrospectiveId: retro.retrospectiveId,
           title: title ?? retro.title,
           teamId: teamId,
           description: description ?? retro.description,
-          thumbnail: image ?? retro.thumbnail,
-          status: 'COMPLETED',
+          thumbnail: imageURL ?? retro.thumbnail,
+          status: status,
         });
         console.log('put data', data);
         navigate('/retrolist');
         toast.info('회고 수정이 정상 처리되었습니다.');
       } else {
         const data = await RetrospectiveService.putPersonal({
-          retrospectiveId: 102,
+          retrospectiveId: retro.retrospectiveId,
           title: title ?? retro.title,
           description: description ?? retro.description,
-          thumbnail: image ?? retro.thumbnail,
-          status: 'COMPLETED',
+          thumbnail: imageURL ?? retro.thumbnail,
+          status: status,
         });
         console.log('put data', data);
         navigate('/retrolist');
         toast.info('회고 수정이 정상 처리되었습니다.');
       }
-    } catch (e) {
-      toast.error(e);
-    }
-  };
 
-  const SwitchStatus = () => {
-    setIsChecked(true);
-    if (retro) {
-      if (isChecked) {
-        toast.info('회고 완료 처리를 취소하였습니다.');
-        setStatus('COMPLETED');
-        setIsChecked(false);
-        console.log(status);
-      } else {
-        toast.success('해당 회고는 최종 완료 처리되었습니다.');
-        setStatus(retro.status);
-        console.log(status);
-        setIsChecked(true);
+      if (imageURL && retro.thumbnail !== imageURL) {
+        const response = await postImageToS3({
+          filename: imageURL,
+          method: 'PUT',
+        });
+
+        const uploadResponse = await axios.put(response.data.preSignedUrl, image, {
+          headers: {
+            'Content-Type': image?.type,
+          },
+        });
+
+        console.log(uploadResponse.status);
       }
+    } catch {
+      toast.error('회고 수정이 정상 처리되지 않았습니다.');
     }
   };
 
@@ -144,10 +142,14 @@ const ReviseSetting: FC<Props> = ({ retro, status, setStatus }) => {
 
   return (
     <S.SettingContainer>
+      <div style={{ margin: '0 auto' }}>
+        <p>회고 제목, 회고 상세 설명을 반드시 입력해야 회고 수정이 가능합니다 :)</p>
+      </div>
       <RetroImageUploader
-        image={image}
-        setImage={(file, imageUUID) => {
-          setImage(imageUUID);
+        image={imageURL}
+        onChange={(files, imageUUID) => {
+          imageUUID && setImageURL(imageUUID);
+          setImage(files);
         }}
       />
       {/* 회고명 */}
@@ -203,14 +205,18 @@ const ReviseSetting: FC<Props> = ({ retro, status, setStatus }) => {
         </Editable>
 
         {/* 최종완료 */}
-        <L.reviseTitleText>회고 최종완료</L.reviseTitleText>
+        <L.reviseTitleText>회고 진행 단계</L.reviseTitleText>
         <S.SettingLine />
-        <FormControl display="flex" alignItems="center" onChange={SwitchStatus}>
-          <FormLabel htmlFor="email-alerts" mb="0" margin="20px 10px" display="flex">
-            <IoIosInformationCircle color="#FF4646" size={20} style={{ margin: 'auto 0' }} />
-            <S.SettingDetailText>회고가 최종 완료 단계로 처리되며 더이상 수정이 불가합니다.</S.SettingDetailText>
-          </FormLabel>
-          <Switch colorScheme="orange" size="lg" isRequired isInvalid={isChecked} />
+        <FormControl display="flex" alignItems="center" flexDirection="column" margin="20px auto">
+          <Flex>
+            <RadioGroup onChange={setStatus} value={status} colorScheme="brand">
+              <Stack direction="row" spacing="24px">
+                <Radio value="NOT_STARTED">진행 전</Radio>
+                <Radio value="IN_PROGRESS">진행 중</Radio>
+                <Radio value="COMPLETED">진행 완료</Radio>
+              </Stack>
+            </RadioGroup>
+          </Flex>
         </FormControl>
 
         {/* 회고 삭제 */}

diff --git a/src/pages/RevisePage.tsx b/src/pages/RevisePage.tsx
@@ -20,16 +20,15 @@ const RetroRevisePage = () => {
   const teamId = Number(query[3]);
   const [retro, setRetro] = useState<RetrospectiveData>();
   const [members, setMembers] = useState<TeamMembersData[]>();
-  const [status, setStatus] = useState<string>();
+  const [status, setStatus] = useState<string>('NOT_STARTED');
   const toast = useCustomToast();
 
   const FetchRetrospective = async () => {
     try {
       const data = await RetrospectiveService.onlyGet({ retrospectiveId: retrospectiveId });
       setRetro(data.data);
-      console.log(retro);
       if (retro) {
-        setStatus(retro.status.toString);
+        setStatus(retro.status);
       }
     } catch (e) {
       toast.error(e);

diff --git a/src/pages/SectionPage.tsx b/src/pages/SectionPage.tsx
@@ -67,7 +67,7 @@ const RetroTeamPage = () => {
     fetchSection();
     fetchRetrospective();
     fetchTemplate();
-  }, [retro?.status, template?.values, section]);
+  }, [retro?.status, template?.values]);
 
   return (
     <S.Container>