diff --git a/frontend/web/src/atom.tsx b/frontend/web/src/atom.tsx
index 5a9851c..eb8e86b 100644
--- a/frontend/web/src/atom.tsx
+++ b/frontend/web/src/atom.tsx
@@ -4,7 +4,7 @@ export const dayDetailModalState = atom({
     key: 'dayDetailModal',
     default: {
         visible: false,
-        date: new Date(),
+        date: '0000-00-00',
     },
 });
 
@@ -13,6 +13,24 @@ export const meetingAddModalVisibleState = atom({
     default: false,
 });
 
+export const meetingModifyModalState = atom({
+    key: 'meetingModifyModal',
+    default: {
+        visible: false,
+        meeting: {
+            title: '',
+            date: '0000-00-00',
+            startTime: '00:00',
+            endTime: '00:00',
+            repeat: 'none',
+            content: '',
+            meetingId: -9999,
+            roomId: -9999,
+        },
+        participants: [{ slackId: '', name: '', email: '', groupId: -9999, role: '' }],
+    },
+});
+
 export const signUpModalVisibleState = atom({
     key: 'signUpModalVisible',
     default: false,
diff --git a/frontend/web/src/components/atoms/drop_down.tsx b/frontend/web/src/components/atoms/drop_down.tsx
index efedeb4..d5f4e2b 100644
--- a/frontend/web/src/components/atoms/drop_down.tsx
+++ b/frontend/web/src/components/atoms/drop_down.tsx
@@ -26,6 +26,7 @@ type dropDownProps = {
     width?: number;
     id?: string;
     disabled?: boolean;
+    defaultValue?: string;
     onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
 };
 
@@ -38,6 +39,7 @@ const DropDown: React.FC<dropDownProps> = ({
     width,
     id,
     disabled = false,
+    defaultValue = 'default',
     onChange,
 }: dropDownProps) => {
     return (
@@ -48,8 +50,9 @@ const DropDown: React.FC<dropDownProps> = ({
             width={width}
             onChange={onChange}
             id={id}
-            defaultValue='default'
+            defaultValue={defaultValue}
             disabled={disabled}
+            key={defaultValue}
         >
             <option value='default' hidden style={{ color: `${theme.inputColor}` }}>
                 {placeholder}
diff --git a/frontend/web/src/components/atoms/input.tsx b/frontend/web/src/components/atoms/input.tsx
index 3cd40f5..a424b34 100644
--- a/frontend/web/src/components/atoms/input.tsx
+++ b/frontend/web/src/components/atoms/input.tsx
@@ -7,9 +7,9 @@ type inputProps = {
     width?: string;
     letterSpacing?: string | number;
     marginTop?: string;
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     min?: string;
     disabled?: boolean;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 };
 const Input: React.FC<inputProps> = ({
     type = 'text',
@@ -19,9 +19,9 @@ const Input: React.FC<inputProps> = ({
     width = '100%',
     letterSpacing = 'normal',
     marginTop = '0vh',
-    onChange,
     min,
     disabled = false,
+    onChange,
 }: inputProps) => {
     switch (type) {
         case 'text':
diff --git a/frontend/web/src/components/molecules/day_detail_modal_content.tsx b/frontend/web/src/components/molecules/day_detail_modal_content.tsx
index 9529bdb..d655016 100644
--- a/frontend/web/src/components/molecules/day_detail_modal_content.tsx
+++ b/frontend/web/src/components/molecules/day_detail_modal_content.tsx
@@ -1,6 +1,9 @@
 import React from 'react';
+import { useRecoilState, useRecoilValue } from 'recoil';
 import styled from 'styled-components';
+import { meetingModifyModalState, userState } from '../../atom';
 import { participants, rooms, users } from '../../temp_db';
+import { meetingType, userType } from '../../types';
 import Text from '../atoms/text';
 import FlexRow from './flex_row';
 
@@ -14,24 +17,27 @@ const ContentContainer = styled.div`
     padding-top: 0.5rem;
 `;
 
-type Meeting = {
-    meetingId: number;
-    roomId: number;
-    date: Date;
-    startTime: string;
-    endTime: string;
-    title: string;
-    content: string;
-    repeat: string;
-};
-
 type dayDetailModalContentProps = {
-    meeting: Meeting;
+    meeting: meetingType;
 };
 
 const DayDetailModalContent: React.FC<dayDetailModalContentProps> = ({
     meeting,
 }: dayDetailModalContentProps) => {
+    const [meetingModifyModal, setMeetingModifyModal] = useRecoilState(meetingModifyModalState);
+    const [pu, setPu] = React.useState<userType[]>([]);
+    const user = useRecoilValue(userState);
+
+    React.useEffect(() => {
+        setPu(
+            participants.map((p) => {
+                return users.find((u) => {
+                    return p.meetingId === meeting.meetingId && u.slackId === p.slackId;
+                });
+            }) as userType[],
+        );
+    }, [meeting]);
+
     return (
         <Container>
             <FlexRow>
@@ -48,18 +54,15 @@ const DayDetailModalContent: React.FC<dayDetailModalContentProps> = ({
             </FlexRow>
             <FlexRow>
                 <div>
-                    {participants.map((p) => {
-                        const pu = users.find((u) => {
-                            return p.meetingId === meeting.meetingId && u.slackId === p.slackId;
-                        });
-                        if (pu !== undefined) {
+                    {pu[0] &&
+                        pu.length > 0 &&
+                        pu.map((p) => {
                             return (
-                                <Text fontSize={0.8} fontWeight={400} key={pu?.slackId}>
-                                    {`${pu?.name} `}
+                                <Text fontSize={0.8} fontWeight={400} key={p.slackId}>
+                                    {`${p.name} `}
                                 </Text>
                             );
-                        }
-                    })}
+                        })}
                 </div>
                 <Text fontSize={0.8} fontWeight={300}>
                     {meeting.repeat}
@@ -69,10 +72,29 @@ const DayDetailModalContent: React.FC<dayDetailModalContentProps> = ({
             <FlexRow>
                 <div />
                 <div>
-                    <Text fontSize={0.8} fontWeight={300} onClick={() => {}}>
+                    <Text
+                        fontSize={0.8}
+                        fontWeight={300}
+                        onClick={() => {
+                            return user.email.length > 0 && user.name.length > 0
+                                ? setMeetingModifyModal({
+                                      visible: !meetingModifyModal.visible,
+                                      meeting: meeting,
+                                      participants: pu,
+                                  })
+                                : alert('로그인이 필요합니다.');
+                        }}
+                    >
                         수정
                     </Text>
-                    <Text fontSize={0.8} fontWeight={300} onClick={() => {}}>
+                    <Text
+                        fontSize={0.8}
+                        fontWeight={300}
+                        onClick={() => {
+                            console.log(meeting);
+                            console.log(pu);
+                        }}
+                    >
                         삭제
                     </Text>
                 </div>
@@ -81,4 +103,4 @@ const DayDetailModalContent: React.FC<dayDetailModalContentProps> = ({
     );
 };
 
-export default DayDetailModalContent;
+export default React.memo(DayDetailModalContent);
diff --git a/frontend/web/src/components/molecules/day_detail_modal_contents.tsx b/frontend/web/src/components/molecules/day_detail_modal_contents.tsx
index 5b9c377..9da3300 100644
--- a/frontend/web/src/components/molecules/day_detail_modal_contents.tsx
+++ b/frontend/web/src/components/molecules/day_detail_modal_contents.tsx
@@ -15,7 +15,7 @@ const Container = styled.div`
 const DayDetailModalContents: React.FC = () => {
     const dayDetailModal = useRecoilValue(dayDetailModalState);
     const filteredMeeting = meetings.filter((meeting) => {
-        return meeting.date.getTime() === dayDetailModal.date.getTime();
+        return meeting.date === dayDetailModal.date;
     });
     return (
         <Container>
diff --git a/frontend/web/src/components/molecules/day_detail_modal_header.tsx b/frontend/web/src/components/molecules/day_detail_modal_header.tsx
index 6298329..7ee1576 100644
--- a/frontend/web/src/components/molecules/day_detail_modal_header.tsx
+++ b/frontend/web/src/components/molecules/day_detail_modal_header.tsx
@@ -1,19 +1,19 @@
 import React from 'react';
 import { IoMdClose } from 'react-icons/io';
-import { useRecoilState } from 'recoil';
+import { useResetRecoilState } from 'recoil';
 import { dayDetailModalState } from '../../atom';
 import { getFullDate } from '../../utils/date';
 import Text from '../atoms/text';
 import FlexRow from '../molecules/flex_row';
 
 const DayDetailModalHeader: React.FC = () => {
-    const [dayDetailModal, setDayDetailModal] = useRecoilState(dayDetailModalState);
+    const resetState = useResetRecoilState(dayDetailModalState);
     const date = getFullDate();
     return (
         <FlexRow>
             <IoMdClose
                 onClick={() => {
-                    setDayDetailModal({ visible: !dayDetailModal.visible, date: new Date() });
+                    resetState();
                 }}
                 size={50}
                 style={{ cursor: 'pointer' }}
diff --git a/frontend/web/src/components/molecules/logo.tsx b/frontend/web/src/components/molecules/logo.tsx
index 2936d77..d980895 100644
--- a/frontend/web/src/components/molecules/logo.tsx
+++ b/frontend/web/src/components/molecules/logo.tsx
@@ -13,4 +13,4 @@ const Logo: React.FC<LogoProps> = ({ onClick = () => {} }: LogoProps) => {
     );
 };
 
-export default Logo;
+export default React.memo(Logo);
diff --git a/frontend/web/src/components/molecules/modal_close_button.tsx b/frontend/web/src/components/molecules/modal_close_button.tsx
index ff64534..898fc2f 100644
--- a/frontend/web/src/components/molecules/modal_close_button.tsx
+++ b/frontend/web/src/components/molecules/modal_close_button.tsx
@@ -1,21 +1,21 @@
 import React from 'react';
 import { IoClose } from 'react-icons/io5';
-import { RecoilState, useSetRecoilState } from 'recoil';
+import { RecoilState, useResetRecoilState } from 'recoil';
 import theme from '../../styles/theme';
 import FlexRow from './flex_row';
 
 type modalCloseButtonProps = {
-    setState: RecoilState<boolean>;
+    state: RecoilState<boolean | object>;
 };
 
-const ModalCloseButton: React.FC<modalCloseButtonProps> = ({ setState }: modalCloseButtonProps) => {
-    const setModalOpen = useSetRecoilState(setState);
+const ModalCloseButton: React.FC<modalCloseButtonProps> = ({ state }: modalCloseButtonProps) => {
+    const resetState = useResetRecoilState(state);
 
     return (
         <FlexRow>
             <div />
             <IoClose
-                onClick={() => setModalOpen(false)}
+                onClick={() => resetState()}
                 strokeWidth={50}
                 size={40}
                 color={theme.inputColor}
diff --git a/frontend/web/src/components/molecules/modal_header.tsx b/frontend/web/src/components/molecules/modal_header.tsx
index 1df94ed..9ec3e97 100644
--- a/frontend/web/src/components/molecules/modal_header.tsx
+++ b/frontend/web/src/components/molecules/modal_header.tsx
@@ -18,4 +18,4 @@ const ModalHeader: React.FC<modalHeaderProps> = ({ children }: modalHeaderProps)
         </FlexColumn>
     );
 };
-export default ModalHeader;
+export default React.memo(ModalHeader);
diff --git a/frontend/web/src/components/organisms/meeting_add_modal.tsx b/frontend/web/src/components/organisms/meeting_modal.tsx
similarity index 73%
rename from frontend/web/src/components/organisms/meeting_add_modal.tsx
rename to frontend/web/src/components/organisms/meeting_modal.tsx
index cd8fa64..f227cb2 100644
--- a/frontend/web/src/components/organisms/meeting_add_modal.tsx
+++ b/frontend/web/src/components/organisms/meeting_modal.tsx
@@ -2,7 +2,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable jsx-a11y/label-has-associated-control */
 import React from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilValue, useResetRecoilState } from 'recoil';
 import { AiOutlineCalendar, AiOutlineClockCircle } from 'react-icons/ai';
 import { BsPeople } from 'react-icons/bs';
 import { FiRepeat } from 'react-icons/fi';
@@ -10,10 +10,10 @@ import { GrTextAlignFull } from 'react-icons/gr';
 import { IoMdClose } from 'react-icons/io';
 import { IoBusinessOutline } from 'react-icons/io5';
 import styled from 'styled-components';
-import { meetingAddModalVisibleState, userState } from '../../atom';
+import { meetingAddModalVisibleState, meetingModifyModalState, userState } from '../../atom';
 import theme from '../../styles/theme';
 import { groups, rooms, users } from '../../temp_db';
-import { meetingType, userType } from '../../types';
+import { meetingInputType, userType } from '../../types';
 import { minsToStr, strToMins, toStringDateByFormatting } from '../../utils/date';
 import CustomButton from '../atoms/custom_button';
 import DropDown from '../atoms/drop_down';
@@ -178,36 +178,59 @@ const AutoSearchData = styled.li`
     }
 `;
 
-const MeetingAddModal: React.FC = () => {
+const MeetingModal: React.FC = () => {
     if (groups[0].groupName !== 'All') groups.unshift({ groupName: 'All', groupId: -1 });
-    const [meetingAddModalVisible, setMeetingAddModalVisible] = useRecoilState(
-        meetingAddModalVisibleState,
-    );
+    const meetingAddModalVisible = useRecoilValue(meetingAddModalVisibleState);
+    const resetMeetingAddModal = useResetRecoilState(meetingAddModalVisibleState);
+    const meetingModifyModal = useRecoilValue(meetingModifyModalState);
+    const resetMeetingModifyModal = useResetRecoilState(meetingModifyModalState);
+
     const user = useRecoilValue(userState);
     const today = new Date();
     const minDate = toStringDateByFormatting(today);
     const minTime = today.toLocaleTimeString('en-US', { hour12: false }).substring(0, 5);
     const [validation, setValidation] = React.useState(false);
-    const [input, setInput] = React.useState<meetingType>({
-        title: '',
-        date: minDate,
-        startTime: minTime,
-        endTime: minTime,
-        repeat: 'none',
-        content: '',
-        participants: [],
-        room: '',
-        participateGroups: [],
-        keyword: '',
-        keyItems: [],
-    });
-    const [currentUser, setCurrentUser] = React.useState<userType>({
-        slackId: '',
-        name: '',
-        email: '',
-        groupId: -1000,
-        role: '',
-    });
+    const [keyword, setKeyword] = React.useState<string>('');
+    const [keyItems, setKeyItems] = React.useState<userType[]>([]);
+    const [input, setInput] = React.useState<meetingInputType>(
+        meetingAddModalVisible
+            ? {
+                  title: '',
+                  date: minDate,
+                  startTime: minTime,
+                  endTime:
+                      minsToStr(strToMins(minTime) + strToMins('01:00')) > '24:00'
+                          ? '23:59'
+                          : minsToStr(strToMins(minTime) + strToMins('01:00')),
+                  repeat: '반복 없음',
+                  content: '',
+                  participants: [
+                      users.find((u) => {
+                          return u.email === user.email;
+                      }) as userType,
+                  ],
+                  room: '',
+                  participateGroups: [],
+              }
+            : {
+                  title: meetingModifyModal.meeting.title,
+                  date: meetingModifyModal.meeting.date,
+                  startTime: meetingModifyModal.meeting.startTime,
+                  endTime: meetingModifyModal.meeting.endTime,
+                  repeat: meetingModifyModal.meeting.repeat,
+                  content: meetingModifyModal.meeting.content,
+                  participants: [
+                      users.find((u) => {
+                          return u.email === user.email;
+                      }) as userType,
+                      ...meetingModifyModal.participants.filter((p) => {
+                          return p.email !== user.email;
+                      }),
+                  ],
+                  room: rooms[meetingModifyModal.meeting.roomId].roomName,
+                  participateGroups: [],
+              },
+    );
 
     const handleChangeData = (key: string, value: string | string[] | userType[]) => {
         setInput((prev) => ({ ...prev, [key]: value }));
@@ -219,47 +242,73 @@ const MeetingAddModal: React.FC = () => {
             : users.filter((u) => {
                   if (input.participants.includes(u)) return;
                   return (
-                      u.name.includes(input.keyword) &&
-                      !input.participateGroups.includes(groups[u.groupId].groupName) &&
-                      u.slackId !== currentUser.slackId
+                      u.name.includes(keyword) &&
+                      !input.participateGroups.includes(groups[u.groupId + 1].groupName)
                   );
               });
-        handleChangeData('keyItems', filteredUsers);
+        setKeyItems(filteredUsers);
     };
 
     React.useEffect(() => {
         const debounce = setTimeout(() => {
-            if (input.keyword) updateData();
+            if (keyword) updateData();
         }, 200);
         return () => {
             clearTimeout(debounce);
         };
-    }, [input.keyword]);
-
-    React.useEffect(() => {
-        setCurrentUser(
-            users.find((u) => {
-                return u.email === user.email;
-            }) as userType,
-        );
-    }, []);
+    }, [keyword]);
 
     const validateSubmit = () => {
-        return !(
+        const participateUsers: userType[] = [];
+        if (input.participateGroups.length > 0) {
+            if (input.participateGroups.includes('All')) {
+                users.map((u) => {
+                    participateUsers.push(u);
+                });
+            } else {
+                input.participateGroups.map((pg) => {
+                    users
+                        .filter((u) => {
+                            return groups[u.groupId + 1].groupName === pg;
+                        })
+                        .map((pu) => {
+                            participateUsers.push(pu);
+                        });
+                });
+            }
+        }
+        input.participants.map((p) => participateUsers.push(p));
+
+        const defaultValidation =
             input.title.length >= 2 &&
             input.title.length <= 20 &&
             input.content.length >= 2 &&
             input.content.length <= 500 &&
-            (input.participants.length > 0 || input.participateGroups.length > 0) &&
+            participateUsers.length > 0 &&
             input.room !== '' &&
             input.date !== '' &&
             input.startTime !== '' &&
-            input.endTime !== ''
-        );
+            input.endTime !== '';
+        return meetingAddModalVisible
+            ? defaultValidation
+            : defaultValidation &&
+                  !(
+                      input.title === meetingModifyModal.meeting.title &&
+                      input.date === meetingModifyModal.meeting.date &&
+                      input.startTime === meetingModifyModal.meeting.startTime &&
+                      input.endTime === meetingModifyModal.meeting.endTime &&
+                      input.repeat === meetingModifyModal.meeting.repeat &&
+                      input.room === rooms[meetingModifyModal.meeting.roomId].roomName &&
+                      input.content === meetingModifyModal.meeting.content &&
+                      !meetingModifyModal.participants
+                          .map((p) => {
+                              return participateUsers.includes(p);
+                          })
+                          .includes(false)
+                  );
     };
 
     React.useEffect(() => {
-        console.log(111);
         const debounce = setTimeout(() => {
             setValidation(validateSubmit());
         }, 200);
@@ -270,7 +319,11 @@ const MeetingAddModal: React.FC = () => {
 
     return (
         <CenteredModal width={35} height={37}>
-            <ModalCloseButton setState={meetingAddModalVisibleState} />
+            <ModalCloseButton
+                state={
+                    meetingAddModalVisible ? meetingAddModalVisibleState : meetingModifyModalState
+                }
+            />
             <Container>
                 <FlexColumn>
                     <Input
@@ -290,7 +343,6 @@ const MeetingAddModal: React.FC = () => {
                                 type='date'
                                 fontSize={1.1}
                                 value={input.date}
-                                min={minDate}
                                 onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                                     handleChangeData('date', e.target.value);
                                 }}
@@ -305,15 +357,10 @@ const MeetingAddModal: React.FC = () => {
                                     type='time'
                                     fontSize={1.1}
                                     value={input.startTime}
-                                    min={minTime}
                                     onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                                        if (e.target.value < minTime) {
-                                            handleChangeData('startTime', minTime);
-                                        } else {
-                                            handleChangeData('startTime', e.target.value);
-                                            if (e.target.value > input.endTime)
-                                                handleChangeData('endTime', e.target.value);
-                                        }
+                                        handleChangeData('startTime', e.target.value);
+                                        if (e.target.value > input.endTime)
+                                            handleChangeData('endTime', e.target.value);
                                     }}
                                 />
                             </label>
@@ -414,48 +461,48 @@ const MeetingAddModal: React.FC = () => {
                         <RepeatContainer>
                             <input
                                 type='radio'
-                                id='none'
+                                id='반복 없음'
                                 name='repeat'
-                                value='none'
-                                checked={input.repeat === 'none'}
+                                value='반복 없음'
+                                checked={input.repeat === '반복 없음'}
                                 onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                                     handleChangeData('repeat', e.target.value);
                                 }}
                             />
-                            <label htmlFor='none'>없음</label>
+                            <label htmlFor='반복 없음'>없음</label>
                             <input
                                 type='radio'
-                                id='daily'
+                                id='매일 반복'
                                 name='repeat'
-                                value='daily'
-                                checked={input.repeat === 'daily'}
+                                value='매일 반복'
+                                checked={input.repeat === '매일 반복'}
                                 onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                                     handleChangeData('repeat', e.target.value);
                                 }}
                             />
-                            <label htmlFor='daily'>매일</label>
+                            <label htmlFor='매일 반복'>매일</label>
                             <input
                                 type='radio'
-                                id='weekly'
+                                id='매주 반복'
                                 name='repeat'
-                                value='weekly'
-                                checked={input.repeat === 'weekly'}
+                                value='매주 반복'
+                                checked={input.repeat === '매주 반복'}
                                 onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                                     handleChangeData('repeat', e.target.value);
                                 }}
                             />
-                            <label htmlFor='weekly'>매주</label>
+                            <label htmlFor='매주 반복'>매주</label>
                             <input
                                 type='radio'
-                                id='monthly'
+                                id='매월 반복'
                                 name='repeat'
-                                value='monthly'
-                                checked={input.repeat === 'monthly'}
+                                value='매월 반복'
+                                checked={input.repeat === '매월 반복'}
                                 onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                                     handleChangeData('repeat', e.target.value);
                                 }}
                             />
-                            <label htmlFor='monthly'>매월</label>
+                            <label htmlFor='매월 반복'>매월</label>
                         </RepeatContainer>
                     </InputContainer>
                     <div style={{ width: '100%' }}>
@@ -468,26 +515,26 @@ const MeetingAddModal: React.FC = () => {
                                         placeholder='참석자'
                                         letterSpacing={0.15}
                                         fontSize={1}
-                                        value={input.keyword}
+                                        value={keyword}
                                         disabled={input.participateGroups.includes('All')}
                                         onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                                            handleChangeData('keyword', e.currentTarget.value);
+                                            setKeyword(e.currentTarget.value);
                                         }}
                                     />
-                                    {input.keyItems.length > 0 && input.keyword && (
+                                    {keyItems.length > 0 && keyword && (
                                         <AutoSearchContainer>
                                             <AutoSearchWrap>
-                                                {input.keyItems.map((search) => {
+                                                {keyItems.map((search) => {
                                                     return (
                                                         <AutoSearchData
                                                             key={search.slackId}
                                                             onClick={() => {
-                                                                handleChangeData('keyword', '');
+                                                                setKeyword('');
                                                                 handleChangeData('participants', [
                                                                     ...input.participants,
                                                                     search,
                                                                 ]);
-                                                                handleChangeData('keyItems', []);
+                                                                setKeyItems([]);
                                                             }}
                                                         >
                                                             <a href='#'>{search.name}</a>
@@ -514,7 +561,7 @@ const MeetingAddModal: React.FC = () => {
                                                 'participants',
                                                 input.participants.filter((p) => {
                                                     return (
-                                                        groups[p.groupId].groupName !==
+                                                        groups[p.groupId + 1].groupName !==
                                                         e.target.value
                                                     );
                                                 }),
@@ -540,14 +587,6 @@ const MeetingAddModal: React.FC = () => {
                         <InputContainer>
                             <div style={{ marginRight: '3.5rem' }} />
                             <ParticipantsContainer>
-                                {currentUser && (
-                                    <ParticipantContainer key={currentUser.slackId}>
-                                        <Text letterSpacing={0.01} fontSize={0.8}>
-                                            {currentUser.name}
-                                        </Text>
-                                    </ParticipantContainer>
-                                )}
-
                                 {input.participants.map((p) => {
                                     return (
                                         <ParticipantContainer key={p.slackId}>
@@ -606,6 +645,7 @@ const MeetingAddModal: React.FC = () => {
                             onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
                                 handleChangeData('room', e.target.value);
                             }}
+                            defaultValue={input.room}
                             placeholder='회의실'
                             letterSpacing={0.15}
                             fontSize={1}
@@ -644,14 +684,56 @@ const MeetingAddModal: React.FC = () => {
                                 width={40}
                                 verticalPadding={0.5}
                                 marginRight={0}
-                                bgColor={!validation ? theme.submitBtnColor : theme.cancelBtnColor}
-                                disabled={validation}
+                                bgColor={validation ? theme.submitBtnColor : theme.cancelBtnColor}
+                                disabled={!validation}
                                 onClick={() => {
                                     // todo: 회의실 예약 api call
-                                    setMeetingAddModalVisible(!meetingAddModalVisible);
+                                    const slackIds = ['team@lucentblock.com'];
+                                    if (input.participateGroups.length > 0) {
+                                        if (input.participateGroups.includes('All')) {
+                                            users.map((u) => {
+                                                slackIds.push(u.slackId);
+                                            });
+                                        } else {
+                                            input.participateGroups.map((pg) => {
+                                                users
+                                                    .filter((u) => {
+                                                        return (
+                                                            groups[u.groupId + 1].groupName === pg
+                                                        );
+                                                    })
+                                                    .map((pu) => {
+                                                        slackIds.push(pu.slackId);
+                                                    });
+                                            });
+                                        }
+                                    }
+                                    input.participants.map((p) => slackIds.push(p.slackId));
+                                    const roomId = rooms.find((r) => {
+                                        return r.roomName === input.room;
+                                    })?.roomId;
+                                    const data = {
+                                        roomId: roomId,
+                                        date: input.date,
+                                        startTime: input.startTime,
+                                        endTime: input.endTime,
+                                        title: input.title,
+                                        content: input.content,
+                                        repeat: input.repeat,
+                                        slackId: slackIds,
+                                    };
+                                    if (meetingModifyModal.visible) {
+                                        Object.assign(data, {
+                                            meetingId: meetingModifyModal.meeting.meetingId,
+                                        });
+                                    }
+                                    console.log(data);
+                                    return meetingAddModalVisible
+                                        ? resetMeetingAddModal()
+                                        : resetMeetingModifyModal();
                                 }}
                             >
-                                예약
+                                {meetingAddModalVisible ? '추가' : '수정'}
                             </CustomButton>
                             <CustomButton
                                 fontSize={1.2}
@@ -661,7 +743,9 @@ const MeetingAddModal: React.FC = () => {
                                 marginRight={0}
                                 bgColor={theme.cancelBtnColor}
                                 onClick={() => {
-                                    setMeetingAddModalVisible(!meetingAddModalVisible);
+                                    return meetingAddModalVisible
+                                        ? resetMeetingAddModal()
+                                        : resetMeetingModifyModal();
                                 }}
                             >
                                 취소
@@ -674,4 +758,4 @@ const MeetingAddModal: React.FC = () => {
     );
 };
 
-export default MeetingAddModal;
+export default MeetingModal;
diff --git a/frontend/web/src/components/organisms/signup_modal.tsx b/frontend/web/src/components/organisms/signup_modal.tsx
index b22676d..58699e6 100644
--- a/frontend/web/src/components/organisms/signup_modal.tsx
+++ b/frontend/web/src/components/organisms/signup_modal.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 /* eslint-disable no-restricted-syntax */
 import React, { useState } from 'react';
-import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
+import { useRecoilState, useSetRecoilState } from 'recoil';
 import {
     GoogleLogin,
     GoogleLoginResponse,
@@ -61,7 +61,7 @@ const SignupModal: React.FC = () => {
     };
     return (
         <CenteredModal width={34} height={34}>
-            <ModalCloseButton setState={signUpModalVisibleState} />
+            <ModalCloseButton state={signUpModalVisibleState} />
             <FlexColumn>
                 <ModalHeader>회원가입</ModalHeader>
                 <FlexColumn justifyContent='center'>
diff --git a/frontend/web/src/pages/meeting.tsx b/frontend/web/src/pages/meeting.tsx
index 09645d7..1fcd79e 100644
--- a/frontend/web/src/pages/meeting.tsx
+++ b/frontend/web/src/pages/meeting.tsx
@@ -2,9 +2,9 @@
 import { DateClickArg } from '@fullcalendar/interaction';
 import { EventClickArg } from '@fullcalendar/react';
 import React from 'react';
-import { useRecoilState } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 import styled from 'styled-components';
-import { dayDetailModalState, meetingAddModalVisibleState } from '../atom';
+import { dayDetailModalState, meetingAddModalVisibleState, userState } from '../atom';
 import Calendar from '../templates/calendar';
 import { meetings, rooms } from '../temp_db';
 import { toStringDateByFormatting } from '../utils/date';
@@ -18,6 +18,7 @@ const Meeting: React.FC = () => {
     const [meetingAddModalVisible, setMeetingAddModalVisible] = useRecoilState(
         meetingAddModalVisibleState,
     );
+    const user = useRecoilValue(userState);
 
     return (
         <Container>
@@ -26,7 +27,9 @@ const Meeting: React.FC = () => {
                     addMeeting: {
                         text: '미팅 추가',
                         click: () => {
-                            setMeetingAddModalVisible(!meetingAddModalVisible);
+                            return user.name.length > 0 && user.email.length > 0
+                                ? setMeetingAddModalVisible(!meetingAddModalVisible)
+                                : alert('로그인이 필요합니다.');
                         },
                     },
                 }}
@@ -39,17 +42,15 @@ const Meeting: React.FC = () => {
                     return info.jsEvent.type === 'mouseup'
                         ? setDayDetailModal({
                               visible: !dayDetailModal.visible,
-                              date: (info as DateClickArg).date,
+                              date: toStringDateByFormatting((info as DateClickArg).date),
                           })
                         : setDayDetailModal({
                               visible: !dayDetailModal.visible,
-                              date: new Date(
-                                  (info as EventClickArg).event.start!.setHours(0, 0, 0, 0),
-                              ),
+                              date: toStringDateByFormatting((info as EventClickArg).event.start!),
                           });
                 }}
                 events={meetings.map((meeting) => {
-                    const meetingDate = toStringDateByFormatting(meeting.date);
+                    const meetingDate = meeting.date;
                     return {
                         title: meeting.title,
                         start: `${meetingDate}T${meeting.startTime}`,
diff --git a/frontend/web/src/router.tsx b/frontend/web/src/router.tsx
index fd17738..f424962 100644
--- a/frontend/web/src/router.tsx
+++ b/frontend/web/src/router.tsx
@@ -6,25 +6,27 @@ import {
     signUpModalVisibleState,
     logInModalVisibleState,
     meetingAddModalVisibleState,
+    meetingModifyModalState,
 } from './atom';
 
 import Header from './components/organisms/header';
 import SignupModal from './components/organisms/signup_modal';
 import Meeting from './pages/meeting';
 import LoginModal from './components/organisms/login_modal';
-import MeetingAddModal from './components/organisms/meeting_add_modal';
+import MeetingModal from './components/organisms/meeting_modal';
 
 const Router: React.FC = () => {
     const signUpModalOpen = useRecoilValue(signUpModalVisibleState);
     const loginModalOpen = useRecoilValue(logInModalVisibleState);
     const meetingAddModalVisible = useRecoilValue(meetingAddModalVisibleState);
+    const meetingModifyModalVisible = useRecoilValue(meetingModifyModalState).visible;
     return (
         <BrowserRouter>
             <DayDetailModal />
             <Header />
             {signUpModalOpen && <SignupModal />}
             {loginModalOpen && <LoginModal />}
-            {meetingAddModalVisible && <MeetingAddModal />}
+            {(meetingAddModalVisible || meetingModifyModalVisible) && <MeetingModal />}
             <Routes>
                 <Route path='/' element={<Meeting />} />
             </Routes>
diff --git a/frontend/web/src/temp_db.tsx b/frontend/web/src/temp_db.tsx
index 33399d0..681e773 100644
--- a/frontend/web/src/temp_db.tsx
+++ b/frontend/web/src/temp_db.tsx
@@ -2,24 +2,23 @@ export const meetings = [
     {
         meetingId: 0,
         roomId: 0,
-        date: new Date('Wed Aug 10 2022 00:00:00 GMT+0900'),
-
-        startTime: '08:00',
-        endTime: '09:00',
+        date: '2022-08-19',
+        startTime: '17:10',
+        endTime: '18:00',
         title: 'Dummy 1 title',
         content: 'Dummy 1 content',
-        repeat: 'daily',
+        repeat: '매일 반복',
     },
     {
         meetingId: 1,
         roomId: 0,
-        date: new Date('Wed Aug 10 2022 00:00:00 GMT+0900'),
+        date: '2022-08-19',
         startTime: '08:00',
         endTime: '09:00',
         title: 'Dummy 2 title',
         content:
             'Dummy 1 contentDummy 1 contentDummy 1 contentDummy 1 contentDummy 1 contentDummy 1 contentDummy 1 contentDummy 1 contentDummy 1 contentDummy 1 contentDummy 1 contentDummy 1 contentDummy 1 contentDummy 1 contentDummy 1 contentDummy 1 contentDummy 1 contentDummy 1 contentDummy 1 contentDummy 1 contentDummy 1 contentDummy 1 contentDummy 1 contentDummy 1 contentDummy 1 contentDummy 1 contentDummy 1 contentDummy 1 contentDummy 1 contentDummy 1 contentDummy 1 contentDummy 1 contentDummy 1 contentDummy 1 contentDummy 1 contentDummy 1 contentDummy 1 contentDummy 1 contentDummy 1 contentDummy 1 contentDummy 1 contentDummy 1 contentDummy 1 contentDummy 1 contentDummy 1 contentDummy 1 contentDummy 1 contentDummy 1 contentDummy 1 contentDummy 1 content',
-        repeat: 'daily',
+        repeat: '매일 반복',
     },
 ];
 
diff --git a/frontend/web/src/types.tsx b/frontend/web/src/types.tsx
index 9520240..bfa12d7 100644
--- a/frontend/web/src/types.tsx
+++ b/frontend/web/src/types.tsx
@@ -6,7 +6,7 @@ export type userType = {
     role: string;
 };
 
-export type meetingType = {
+export type meetingInputType = {
     title: string;
     date: string;
     startTime: string;
@@ -16,6 +16,22 @@ export type meetingType = {
     participants: userType[];
     room: string;
     participateGroups: string[];
-    keyword: string;
-    keyItems: userType[];
+    // keyword: string;
+    // keyItems: userType[];
+};
+
+export type meetingType = {
+    title: string;
+    date: string;
+    startTime: string;
+    endTime: string;
+    repeat: string;
+    content: string;
+    meetingId: number;
+    roomId: number;
+};
+
+export type participantType = {
+    slackId: string;
+    meetingId: number;
 };
diff --git a/frontend/web/src/utils/date.tsx b/frontend/web/src/utils/date.tsx
index 2c052d4..2867fb5 100644
--- a/frontend/web/src/utils/date.tsx
+++ b/frontend/web/src/utils/date.tsx
@@ -13,11 +13,11 @@ const leftPad: leftPadType = (value) => {
 const days = ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'];
 export const getFullDate = (): string => {
     const dayDetailModal = useRecoilValue(dayDetailModalState);
-
-    const year = dayDetailModal.date.getFullYear();
-    const month = dayDetailModal.date.getMonth() + 1;
-    const date = dayDetailModal.date.getDate();
-    const day = days[dayDetailModal.date.getDay()];
+    const fullDate = new Date(dayDetailModal.date);
+    const year = fullDate.getFullYear();
+    const month = fullDate.getMonth() + 1;
+    const date = fullDate.getDate();
+    const day = days[fullDate.getDay()];
 
     return `${year}년 ${month}월 ${date}일 ${day}`;
 };
@@ -40,8 +40,8 @@ export const strToMins: strToMinsType = (value) => {
 type minsToStrType = (str: number) => string;
 export const minsToStr: minsToStrType = (value) => {
     // console.log(`00${value % 60}`);
-    const min = `00${Math.abs(value % 60)}`.slice(-2);
-    const val = `${Math.trunc(value / 60)}:${min}`;
+    const min = Number(`00${Math.abs(value % 60)}`.slice(-2));
+    const val = `${leftPad(Math.trunc(value / 60))}:${leftPad(min)}`;
     // console.log(val);
     return value < 0 ? `-${val}` : val;
     // return val;