✨ Feat: webpack proxy 설정, axiosConfig 추가, api 추가

src/api/@types/@asConst.ts

@@ -4,8 +4,9 @@ export const Order = {
 } as const;
 
 export const Status = {
-  RECENTLY: 'RECENTLY',
-  PREVIOUSLY: 'PREVIOUSLY',
+  NOT_STARTED: 'NOT_STARTED',
+  IN_PROGRESS: 'IN_PROGRESS',
+  COMPLETED: 'COMPLETED',
 } as const;
 
 export type TStatus = typeof Status;

src/api/@types/Retrospectives.ts

@@ -22,9 +22,10 @@ export interface PostRetrospectivesRequest {
   teamId: number;
   userId: number;
   templateId: number;
-  status: TStatus;
+  status: keyof TStatus;
   thumbnail: string;
-  startedDate: string;
+  startDate: string;
+  description: string;
 }
 
 export interface PostRetrospectivesResponse {
@@ -33,8 +34,9 @@ export interface PostRetrospectivesResponse {
   teamId: number;
   userId: number;
   templateId: number;
-  status: TStatus;
+  status: keyof TStatus;
   thumbnail: string;
+  description: string;
 }
 
 //delete

src/api/__mock__/retrospective.ts

@@ -7,7 +7,7 @@ export function MockRetrospective(Status: TStatus) {
     teamId: 0,
     userId: 0,
     templateId: 0,
-    status: Status.RECENTLY,
+    status: Status.NOT_STARTED,
     isBookmarked: true,
     thumbnail: '3fa85f64',
   };

src/api/axiosConfig.tsx

@@ -0,0 +1,11 @@
+import Axios from 'axios';
+
+export const axiosInstance = Axios.create({
+  // baseURL: 'http://-forward-load-balancer-1892345872.us-west-2.elb.amazonaws.com/',
+  baseURL: '/api',
+  headers: {
+    'Content-Type': 'application/json;charset=UTF-8',
+  },
+});
+
+export default axiosInstance;

src/api/retrospectivesApi.tsx

@@ -0,0 +1,15 @@
+import axiosInstance from './axiosConfig';
+import { PostRetrospectivesRequest, PostRetrospectivesResponse } from '@/api/@types/Retrospectives';
+
+// post 요청
+const createRetrospective = async (requestData: PostRetrospectivesRequest): Promise<PostRetrospectivesResponse> => {
+  try {
+    const response = await axiosInstance.post<PostRetrospectivesResponse>('/api/retrospectives', requestData);
+    console.log('회고 생성 성공', response.data);
+    return response.data;
+  } catch (error) {
+    throw new Error('회고 생성 실패');
+  }
+};
+
+export default createRetrospective;

src/components/createRetro/modal/CreateModal.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import {
   Modal,
@@ -9,10 +9,13 @@ import {
   ModalCloseButton,
   Button,
 } from '@chakra-ui/react';
+import { Status } from '@/api/@types/@asConst';
+import { PostRetrospectivesRequest } from '@/api/@types/Retrospectives';
+import createRetrospective from '@/api/retrospectivesApi';
 import DescriptionInput from '@/components/createRetro/modal/DescriptionInput';
 import ImageUpload from '@/components/createRetro/modal/ImageUpload';
 import StartDateCalendar from '@/components/createRetro/modal/StartDateCalender';
-import TemlplateSelect from '@/components/createRetro/modal/TemplateSelect';
+import TemplateSelect from '@/components/createRetro/modal/TemplateSelect';
 import TitleInput from '@/components/createRetro/modal/TitleInput';
 import * as S from '@/styles/createRetro/modal/CreateModal.style';
 
@@ -24,9 +27,29 @@ interface CreateModalProps {
 const CreateModal: React.FC<CreateModalProps> = ({ isOpen, onClose }) => {
   const size = 'xl';
   const navigate = useNavigate();
-  const handleCreateClick = () => {
-    onClose();
-    navigate('/invite');
+  const [requestData, setRequestData] = useState<PostRetrospectivesRequest>({
+    title: '',
+    teamId: 1,
+    userId: 1,
+    templateId: 0,
+    status: Status.NOT_STARTED,
+    thumbnail: '',
+    startDate: '',
+    description: '',
+  });
+
+  const handleCreateClick = async () => {
+    try {
+      const response = await createRetrospective({
+        ...requestData,
+        status: Status.NOT_STARTED,
+      });
+      console.log('생성', response);
+      onClose();
+      navigate('/invite');
+    } catch (error) {
+      console.error('실패', error);
+    }
   };
 
   return (
@@ -38,17 +61,17 @@ const CreateModal: React.FC<CreateModalProps> = ({ isOpen, onClose }) => {
 
         <S.CustomModalBody>
           <S.LeftColumn>
-            <ImageUpload />
+            <ImageUpload onChange={thumbnail => setRequestData({ ...requestData, thumbnail })} />
           </S.LeftColumn>
           <S.RightColumn>
-            <TitleInput />
-            <TemlplateSelect />
-            <StartDateCalendar />
+            <TitleInput onChange={title => setRequestData({ ...requestData, title })} />
+            <TemplateSelect onChange={templateId => setRequestData({ ...requestData, templateId })} />
+            <StartDateCalendar onChange={startDate => setRequestData({ ...requestData, startDate })} />
           </S.RightColumn>
         </S.CustomModalBody>
         <S.BottomModalBody>
           <div>회고 설명</div>
-          <DescriptionInput />
+          <DescriptionInput onChange={description => setRequestData({ ...requestData, description })} />
         </S.BottomModalBody>
 
         <ModalFooter>

src/components/createRetro/modal/DescriptionInput.tsx

@@ -1,10 +1,18 @@
 import React from 'react';
 import { Input } from '@chakra-ui/react';
 
-const DescriptionInput: React.FC = () => {
+interface DescriptionInputProps {
+  onChange: (description: string) => void;
+}
+
+const DescriptionInput: React.FC<DescriptionInputProps> = ({ onChange }) => {
   return (
     <>
-      <Input placeholder="회고에 대한 설명을 입력해주세요." variant="flushed"></Input>
+      <Input
+        placeholder="회고에 대한 설명을 입력해주세요."
+        variant="flushed"
+        onChange={e => onChange(e.target.value)}
+      ></Input>
     </>
   );
 };

src/components/createRetro/modal/ImageUpload.tsx

@@ -1,18 +1,23 @@
 import React, { ChangeEvent, useState } from 'react';
 import { Input, Box, Image, Button, Center } from '@chakra-ui/react';
 
-const ImageUpload: React.FC = () => {
+interface ImageUploadProps {
+  onChange: (image: string) => void; // 이미지 파일의 URL을 외부로 전달하는 함수
+}
+
+const ImageUpload: React.FC<ImageUploadProps> = ({ onChange }) => {
   const [imagePreview, setImagePreview] = useState<string | null>(null);
 
-  // 파일이 선택되면 실행되는 함수
   const handleImageChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0]; // 첫 번째 파일만 선택
+    const file = event.target.files?.[0];
     if (file) {
       const reader = new FileReader();
       reader.onloadend = () => {
-        setImagePreview(reader.result as string); // 이미지 미리보기 업데이트
+        const result = reader.result as string;
+        setImagePreview(result); // 이미지 미리보기 업데이트
+        onChange(result); // 외부로 이미지 URL 전달
       };
-      reader.readAsDataURL(file); // 파일을 읽어서 base64 형식으로 변환하여 미리보기에 사용
+      reader.readAsDataURL(file);
     }
   };
 

src/components/createRetro/modal/StartDateCalender.tsx

@@ -4,18 +4,28 @@ import { ko } from 'date-fns/locale/ko';
 import * as S from '@/styles/createRetro/modal/StartDateCalendar.style';
 import '@/styles/createRetro/modal/Calendar.css';
 
-const StartDateCalendar: React.FC = () => {
+const StartDateCalendar: React.FC<{ onChange: (startedDate: string) => void }> = ({ onChange }) => {
   const [selectedDate, setSelectedDate] = useState<Date | null>(null);
 
+  const handleDateChange = (date: Date | null) => {
+    setSelectedDate(date);
+    onChange(date ? date.toISOString() : ''); // ISO 8601 형식으로 변환
+  };
+
+  const formatDateForDisplay = (date: Date | null) => {
+    return date ? date.toLocaleDateString('ko-KR') : ''; // 화면에 보여질 형식은 지역화된 날짜 형식을 사용합니다.
+  };
+
   return (
     <>
       <div>Start Date</div>
       <S.DateInput
         selected={selectedDate}
-        onChange={(date: Date | null) => setSelectedDate(date)}
+        onChange={handleDateChange}
         locale={ko}
         dateFormat="yyyy-MM-dd"
         showPopperArrow={false}
+        value={formatDateForDisplay(selectedDate)}
       />
     </>
   );

src/components/createRetro/modal/TemplateSelect.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
 import { Select } from '@chakra-ui/react';
 
-const TemlplateSelect: React.FC = () => {
+const TemplateSelect: React.FC<{ onChange: (templateId: number) => void }> = ({ onChange }) => {
   return (
     <>
       <div>Template</div>
-      <Select placeholder="Select option">
-        <option value="KUDOS">KUDOS ver</option>
-        <option value="KPT">KPT ver</option>
+      <Select placeholder="Select option" onChange={e => onChange(Number(e.target.value))}>
+        <option value="1">KUDOS ver</option>
+        <option value="2">KPT ver</option>
       </Select>
     </>
   );
 };
 
-export default TemlplateSelect;
+export default TemplateSelect;

src/components/createRetro/modal/TitleInput.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { Input } from '@chakra-ui/react';
 
-const TitleInput: React.FC = () => {
+const TitleInput: React.FC<{ onChange: (title: string) => void }> = ({ onChange }) => {
   return (
     <>
-      <Input placeholder="Retrospect Name" variant="flushed"></Input>
+      <Input placeholder="Retrospect Name" variant="flushed" onChange={e => onChange(e.target.value)}></Input>
     </>
   );
 };

webpack.config.js

@@ -19,6 +19,12 @@ module.exports = (env, argv) => {
       port: 3000,
       hot: true,
       historyApiFallback: true,
+      proxy: [
+        {
+          context: ['/api'],
+          target: 'http://past-forward-load-balancer-1892345872.us-west-2.elb.amazonaws.com/',
+        },
+      ],
     },
     resolve: {
       extensions: ['.js', '.jsx', '.ts', '.tsx'],