From 7a51745f12405300aaa2bd00c7c001350ca675a3 Mon Sep 17 00:00:00 2001 From: h_h__jj <138123134+heejung0413@users.noreply.github.com> Date: Sun, 21 Apr 2024 01:09:30 +0900 Subject: [PATCH] =?UTF-8?q?[Fix]api=20connection=20-=20=EC=A3=BC=EB=A1=9C?= =?UTF-8?q?=20revise=20=ED=8E=98=EC=9D=B4=EC=A7=80=20(#195)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * πŸ›Fix: revise νŽ˜μ΄μ§€ put api 연동 * πŸ’„Design: μ‚¬μ΄λ“œλ°” μˆ˜μ • --- src/api/@types/Retrospectives.ts | 4 +- src/components/layout/parts/PageSideBar.tsx | 11 +++ .../writeRetro/revise/RetroImageUploader.tsx | 13 +-- .../writeRetro/revise/ReviseSetting.tsx | 88 ++++++++++--------- src/pages/RevisePage.tsx | 5 +- src/pages/SectionPage.tsx | 2 +- 6 files changed, 71 insertions(+), 52 deletions(-) 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 (