diff --git a/src/api/@types/Retrospectives.ts b/src/api/@types/Retrospectives.ts index 0514f96..f32c722 100644 --- a/src/api/@types/Retrospectives.ts +++ b/src/api/@types/Retrospectives.ts @@ -90,7 +90,7 @@ export interface PutTeamRetrospectiveRequest { title: string; teamId?: number; description: string; - status: keyof TStatus; + status: string; thumbnail?: string; } @@ -98,7 +98,7 @@ 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 index 3cb52ff..c9e0256 100644 --- 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 */} + + + + + + Move to the List + + + + diff --git a/src/components/writeRetro/revise/RetroImageUploader.tsx b/src/components/writeRetro/revise/RetroImageUploader.tsx index 5510765..79deb90 100644 --- 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 = ({ image, setImage }) => { +const RetroImageUploader: FC = ({ image, onChange }) => { const [preview, setPreview] = useState(null); const [_, setImageUUID] = useState(null); // 상태를 활용할 수 있도록 수정 @@ -22,8 +22,11 @@ const RetroImageUploader: FC = ({ 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 = ({ image, setImage }) => { const DeleteImage: MouseEventHandler = () => { 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 index 3512719..3405b9c 100644 --- 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 = ({ retro, status, setStatus }) => { const query = search.split(/[=,&]/); const retrospectiveId = Number(query[1]); const teamId = Number(query[3]); - const [isChecked, setIsChecked] = useState(false); - - const [image, setImage] = useState(retro.thumbnail); + const [image, setImage] = useState(null); + const [imageURL, setImageURL] = useState(); const [title, setTitle] = useState(''); const [templateName, setTemplateName] = useState(); const [description, setDescription] = useState(''); @@ -54,7 +54,7 @@ const ReviseSetting: FC = ({ 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 = ({ 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 = ({ retro, status, setStatus }) => { return ( +
+

회고 제목, 회고 상세 설명을 반드시 입력해야 회고 수정이 가능합니다 :)

+
{ - setImage(imageUUID); + image={imageURL} + onChange={(files, imageUUID) => { + imageUUID && setImageURL(imageUUID); + setImage(files); }} /> {/* 회고명 */} @@ -203,14 +205,18 @@ const ReviseSetting: FC = ({ retro, status, setStatus }) => { {/* 최종완료 */} - 회고 최종완료 + 회고 진행 단계 - - - - 회고가 최종 완료 단계로 처리되며 더이상 수정이 불가합니다. - - + + + + + 진행 전 + 진행 중 + 진행 완료 + + + {/* 회고 삭제 */} diff --git a/src/pages/RevisePage.tsx b/src/pages/RevisePage.tsx index 35d86d6..2738a72 100644 --- 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(); const [members, setMembers] = useState(); - const [status, setStatus] = useState(); + const [status, setStatus] = useState('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 index f9e2229..4327402 100644 --- 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 (