From c414a274f301186cb7261249b30b92234849ebec Mon Sep 17 00:00:00 2001
From: LimHeeJung <acb4287@gmail.com>
Date: Thu, 25 Jul 2024 22:49:59 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8feat:=20=EC=9E=90=EC=9E=98=ED=95=9C=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/@types/Retrospectives.ts              |  2 +-
 src/components/Main/Contact.tsx               |  5 +--
 .../createRetro/modal/CreateModal.tsx         | 37 +++++++++--------
 src/components/home/MainDesign.tsx            |  2 +-
 src/components/layout/parts/PageSideBar.tsx   | 40 +++++++++++--------
 src/pages/CreateRetroPage.tsx                 |  8 ++--
 src/pages/SurveyPage.tsx                      |  1 -
 .../createRetro/modal/CreateModal.style.ts    |  2 +
 8 files changed, 53 insertions(+), 44 deletions(-)

diff --git a/src/api/@types/Retrospectives.ts b/src/api/@types/Retrospectives.ts
index 330cd2c..26a9423 100644
--- a/src/api/@types/Retrospectives.ts
+++ b/src/api/@types/Retrospectives.ts
@@ -63,7 +63,7 @@ export interface PostRetrospectivesRequest {
   title: string;
   type: keyof TRetrospective;
   userId: number;
-  templateId: number;
+  templateId: number | null;
   status: keyof TStatus;
   thumbnail: string | null;
   startDate: Date | string;
diff --git a/src/components/Main/Contact.tsx b/src/components/Main/Contact.tsx
index 6a95285..ed37956 100644
--- a/src/components/Main/Contact.tsx
+++ b/src/components/Main/Contact.tsx
@@ -19,14 +19,13 @@ const Contact: React.FC = () => {
   const handleSend = async () => {
     console.log({ email, subject, content, mailStatus });
     try {
-      const MailRequest = await PostMail({
+      await PostMail({
         from: email,
         subject: subject,
         content: content,
         mailStatus: mailStatus,
       });
-      console.log('메일 전송 성공', MailRequest);
-      alert('문의가 전송되었습니다.');
+      alert('문의가 정상적으로 전송되었습니다. 입력하신 이메일로 빠른 시일 내에 답변 드리도록 하겠습니다');
     } catch (error) {
       console.error('실패입니다.', error);
     }
diff --git a/src/components/createRetro/modal/CreateModal.tsx b/src/components/createRetro/modal/CreateModal.tsx
index 44e1594..a2ccbdf 100644
--- a/src/components/createRetro/modal/CreateModal.tsx
+++ b/src/components/createRetro/modal/CreateModal.tsx
@@ -20,6 +20,7 @@ import ImageUpload from '@/components/createRetro/modal/ImageUpload';
 import StartDateCalendar from '@/components/createRetro/modal/StartDateCalender';
 import TemplateSelect from '@/components/createRetro/modal/TemplateSelect';
 import TitleInput from '@/components/createRetro/modal/TitleInput';
+import { useCustomToast } from '@/hooks/useCustomToast';
 import * as S from '@/styles/createRetro/modal/CreateModal.style';
 
 interface CreateModalProps {
@@ -34,28 +35,33 @@ interface CreateModalProps {
 const CreateModal: React.FC<CreateModalProps> = ({ isOpen, onClose, templateId, type, status, name }) => {
   const size = 'xl';
   const navigate = useNavigate();
+  const toast = useCustomToast();
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+  const [image, setImage] = useState<Blob | null>(null);
   const [requestData, setRequestData] = useState<PostRetrospectivesRequest>({
     title: '',
     type: type,
     userId: 1,
-    templateId: templateId || 1,
+    templateId: templateId || null,
     status: status,
     thumbnail: null,
     startDate: new Date(),
     description: '',
   });
-  const [image, setImage] = useState<Blob | null>(null);
 
   useEffect(() => {
     setRequestData(prevData => ({
       ...prevData,
-      templateId: templateId || 1, // templateId가 변경될 때마다 업데이트
+      templateId: templateId || null, // templateId가 변경될 때마다 업데이트
       type: type,
       status: status,
     }));
   }, [templateId, type, status]);
 
   const handleCreateClick = async () => {
+    if (isSubmitting) return; // 이미 제출 중이면 종료
+
+    setIsSubmitting(true);
     try {
       if (!requestData.title) {
         // 회고 제목이 비어 있다면 사용자에게 알림을 표시함
@@ -71,6 +77,11 @@ const CreateModal: React.FC<CreateModalProps> = ({ isOpen, onClose, templateId,
         return;
       }
 
+      if (requestData.templateId === null) {
+        alert('회고 템플릿을 선택해주세요.');
+        return;
+      }
+
       let calculatedStatus: keyof TStatus = 'NOT_STARTED'; // 기본값은 'NOT_STARTED'로 설정
 
       // startDate 값이 오늘 이전이면 'IN_PROGRESS'로 설정
@@ -82,10 +93,9 @@ const CreateModal: React.FC<CreateModalProps> = ({ isOpen, onClose, templateId,
       }
 
       const isoDateString = startedDate.toISOString();
-      // console.log(isoDateString);
 
       // 회고 생성 요청 전송
-      const retrospectiveResponse = await postRetrospective({
+      await postRetrospective({
         ...requestData,
         startDate: isoDateString,
         status: calculatedStatus, // 계산된 status 값으로 설정
@@ -98,28 +108,22 @@ const CreateModal: React.FC<CreateModalProps> = ({ isOpen, onClose, templateId,
           filename: requestData.thumbnail, // imageUUID를 filename으로 설정
           method: 'PUT',
         });
-        console.log('사진 S3 업로드 성공 및 url 확인', imageResponse.data.preSignedUrl);
 
         const imageUrl = imageResponse.data.preSignedUrl;
-
-        const uploadResponse = await axios.put(imageUrl, image, {
+        await axios.put(imageUrl, image, {
           headers: {
             'Content-Type': image?.type,
           },
         });
-
-        if (uploadResponse.status === 200) {
-          console.log('사진 form-data 성공', uploadResponse);
-        } else {
-          console.error('사진 업로드 실패');
-        }
       }
 
-      console.log('회고 생성 성공', retrospectiveResponse);
       onClose(); // 모달 닫기
+      toast.success('회고 생성에 성공하였습니다.');
       navigate('/retrolist'); // 회고 목록 페이지로 이동
     } catch (error) {
       console.error('회고 생성 실패', error);
+    } finally {
+      setIsSubmitting(false);
     }
   };
 
@@ -131,7 +135,6 @@ const CreateModal: React.FC<CreateModalProps> = ({ isOpen, onClose, templateId,
     console.log('startDate:', startDate); // startDate를 콘솔에 출력
     setRequestData({ ...requestData, startDate }); // startDate 상태 업데이트
   };
-  console.log(name);
 
   return (
     <Modal isOpen={isOpen} size={size} onClose={onClose}>
@@ -168,7 +171,7 @@ const CreateModal: React.FC<CreateModalProps> = ({ isOpen, onClose, templateId,
         </S.BottomModalBody>
 
         <ModalFooter>
-          <Button colorScheme="blue" mr={3} onClick={handleCreateClick} id={name}>
+          <Button colorScheme="blue" mr={3} onClick={handleCreateClick} id={name} disabled={isSubmitting}>
             Create
           </Button>
         </ModalFooter>
diff --git a/src/components/home/MainDesign.tsx b/src/components/home/MainDesign.tsx
index 90ad4da..cd12da5 100644
--- a/src/components/home/MainDesign.tsx
+++ b/src/components/home/MainDesign.tsx
@@ -25,7 +25,7 @@ const MainDesign = () => {
         >
           Moving Forward from the Past
         </Text> */}
-      <Image src={main} width={{ base: '70%', md: '50%' }} margin="0 auto" marginTop={100} />
+      <Image src={main} width={{ base: '70%', md: '40%' }} margin="0 auto" marginTop={100} />
       <Flex
         padding="0 auto"
         margin={{ md: '20px auto', base: '10px' }}
diff --git a/src/components/layout/parts/PageSideBar.tsx b/src/components/layout/parts/PageSideBar.tsx
index 8cf8932..56d4981 100644
--- a/src/components/layout/parts/PageSideBar.tsx
+++ b/src/components/layout/parts/PageSideBar.tsx
@@ -2,7 +2,7 @@ import { FC, useEffect, useState } from 'react';
 import { PeopleFill, Person, PersonFill, PlusCircleFill } from 'react-bootstrap-icons';
 import { IoIosListBox } from 'react-icons/io';
 import { RiFolder6Fill } from 'react-icons/ri';
-import { Link, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import {
   Accordion,
   AccordionButton,
@@ -214,24 +214,30 @@ const PageSideBar: FC<Props> = ({ onClose }) => {
         </AccordionItem>
 
         <AccordionItem border="1px solid gray">
-          <Link to="/create">
-            <AccordionButton>
-              <Flex alignItems="center" padding="2px 10px">
-                <PlusCircleFill style={{ marginRight: '5px' }} />
-                <a style={{ color: '#111b47', textDecoration: 'none' }}>Create New Retrospective</a>
-              </Flex>
-            </AccordionButton>
-          </Link>
+          <AccordionButton
+            onClick={() => {
+              navigate('/create');
+              onClose();
+            }}
+          >
+            <Flex alignItems="center" padding="2px 10px">
+              <PlusCircleFill style={{ marginRight: '5px' }} />
+              <a style={{ color: '#111b47', textDecoration: 'none' }}>Create New Retrospective</a>
+            </Flex>
+          </AccordionButton>
         </AccordionItem>
         <AccordionItem borderBottom="1px solid gray">
-          <Link to="/retrolist">
-            <AccordionButton>
-              <Flex alignItems="center" padding="2px 10px">
-                <IoIosListBox style={{ marginRight: '5px' }} />
-                <a style={{ color: '#111b47', textDecoration: 'none' }}>Retrospect List</a>
-              </Flex>
-            </AccordionButton>
-          </Link>
+          <AccordionButton
+            onClick={() => {
+              navigate('/retrolist');
+              onClose();
+            }}
+          >
+            <Flex alignItems="center" padding="2px 10px">
+              <IoIosListBox style={{ marginRight: '5px' }} />
+              <a style={{ color: '#111b47', textDecoration: 'none' }}>Retrospect List</a>
+            </Flex>
+          </AccordionButton>
         </AccordionItem>
       </Accordion>
     </S.SideBarBGContainer>
diff --git a/src/pages/CreateRetroPage.tsx b/src/pages/CreateRetroPage.tsx
index 98a56ce..ec7f5c4 100644
--- a/src/pages/CreateRetroPage.tsx
+++ b/src/pages/CreateRetroPage.tsx
@@ -16,7 +16,7 @@ const CreateRetroPage: React.FC = () => {
   const [status, setStatus] = useState<keyof TStatus>('NOT_STARTED');
 
   const handleTeamButtonClick = () => {
-    setTemplateId(1); // KPT를 초기값으로 함
+    setTemplateId(null); // KPT를 초기값으로 함
     setType('TEAM'); // TEAM으로 type 설정
     setStatus('NOT_STARTED'); // 초기 상태
     onOpen();
@@ -24,7 +24,7 @@ const CreateRetroPage: React.FC = () => {
 
   const handlePersonalButtonClick = () => {
     // setTemplateId(2); // Kudos를 초기 값으로 함
-    setTemplateId(1); // KPT를 초기값으로 함
+    setTemplateId(null); // KPT를 초기값으로 함
     setType('PERSONAL'); // PERSONAL로 type 설정
     setStatus('NOT_STARTED'); // 초기 상태
     onOpen();
@@ -39,7 +39,7 @@ const CreateRetroPage: React.FC = () => {
           </S.SpacedButton>
           <D.SpacedLeft>
             <D.DescriptionTitle backgroundColor="#111b47">
-              <span style={{ fontWeight: 'bold' }}>팀 회고 템플릿 소개</span>
+              <span style={{ fontWeight: 'bold' }}>팀 회고 템플릿 </span>
             </D.DescriptionTitle>
             <TeamRetroDescription />
           </D.SpacedLeft>
@@ -50,7 +50,7 @@ const CreateRetroPage: React.FC = () => {
           </S.SpacedButton>
           <D.SpacedRight>
             <D.DescriptionTitle color="#111b47">
-              <span style={{ fontWeight: 'bold' }}>개인 회고 템플릿 소개</span>
+              <span style={{ fontWeight: 'bold' }}>개인 회고 템플릿 </span>
             </D.DescriptionTitle>
             <PersonalRetroDescription />
           </D.SpacedRight>
diff --git a/src/pages/SurveyPage.tsx b/src/pages/SurveyPage.tsx
index 209f54f..3e85ec7 100644
--- a/src/pages/SurveyPage.tsx
+++ b/src/pages/SurveyPage.tsx
@@ -59,7 +59,6 @@ const SurveyPage: React.FC = () => {
       navigate('/create');
     } catch (error) {
       toast.error(error);
-      console.error('실패입니다.', error);
     }
   };
 
diff --git a/src/styles/createRetro/modal/CreateModal.style.ts b/src/styles/createRetro/modal/CreateModal.style.ts
index 259acf6..07c8279 100644
--- a/src/styles/createRetro/modal/CreateModal.style.ts
+++ b/src/styles/createRetro/modal/CreateModal.style.ts
@@ -5,6 +5,8 @@ export const CustomModalBody = styled(ModalBody)`
   display: flex;
   justify-content: space-between;
   width: 100%;
+  overflow: auto;
+  max-height: 300px;
 
   @media (max-width: 800px) {
     min-width: 95vh;