feat: 미팅 수정 기능 구현

- 미팅 추가 모달 재사용 - mock 데이터 바인딩 - 각 입력 validation - 전체 참가자 추가 구현 - todo: api 호출 #44
lucent-intern-org · Aug 22, 2022 · 22d561e · 22d561e
1 parent d0c0b62
commit 22d561e
Show file tree

Hide file tree

Showing 16 changed files with 306 additions and 161 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -18,4 +18,4 @@ const ModalHeader: React.FC<modalHeaderProps> = ({ children }: modalHeaderProps)
         </FlexColumn>
     );
 };
-export default ModalHeader;
+export default React.memo(ModalHeader);
-Original file line number
+Diff line change
@@ Expand Up @@
         );
     };
-    export default Logo;
+    export default React.memo(Logo);