Merge pull request #45 from lucent-intern-org/feat/#44

feat: 미팅 수정 기능 구현
lucent-intern-org · Aug 22, 2022 · 1cac0f9 · 1cac0f9
2 parents 89610a5 + 5231dda
commit 1cac0f9
Show file tree

Hide file tree

Showing 17 changed files with 26,738 additions and 26,604 deletions.
diff --git a/frontend/web/package-lock.json b/frontend/web/package-lock.json
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: {
@@ -31,14 +49,6 @@ export const userSignUpInfoState = atom({
     default: { slackId: '', name: '', email: '', groupId: -1000, role: '' },
 });
 
-export const userState = atom({
-    key: 'user',
-    default: {
-        email: '',
-        name: '',
-    },
-});
-
 export const loginState = atom({ key: 'login', default: false });
 
 export const isAdminState = atom({ key: 'isAdmin', default: false });

diff --git a/frontend/web/src/components/atoms/drop_down.tsx b/frontend/web/src/components/atoms/drop_down.tsx
@@ -52,6 +52,7 @@ const DropDown: React.FC<dropDownProps> = ({
             id={id}
             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/atoms/text.tsx b/frontend/web/src/components/atoms/text.tsx
@@ -7,6 +7,7 @@ type textProps = {
     letterSpacing?: string | number;
     color?: string;
     marginTop?: string;
+    paddingLeft?: number;
     onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 };
 
@@ -17,7 +18,7 @@ const Text: React.FC<textProps> = ({
     color = 'black',
     letterSpacing = 'normal',
     marginTop = '0vh',
-
+    paddingLeft = 0.4,
     onClick,
 }: textProps) => {
     return onClick ? (
@@ -30,7 +31,7 @@ const Text: React.FC<textProps> = ({
                 fontFamily: 'inter',
                 color: color,
                 paddingRight: 0,
-                paddingLeft: 0,
+                paddingLeft: `${paddingLeft}rem`,
                 marginTop: marginTop,
             }}
             onClick={onClick}

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 } from 'recoil';
 import styled from 'styled-components';
+import { meetingModifyModalState } 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 = { email: localStorage.getItem('email'), name: localStorage.getItem('name') };
+
+    React.useEffect(() => {
+        setPu(
+            participants.map((p) => {
+                return users.find((u) => {
+                    return p.meetingId === meeting.meetingId && u.slackId === p.slackId;
+                });
+            }) as userType[],
+        );
+    }, [meeting.meetingId]);
+
     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 && user.name
+                                ? 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_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/login_modal.tsx b/frontend/web/src/components/organisms/login_modal.tsx
@@ -54,6 +54,8 @@ const LoginModal: React.FC = () => {
 
             if (keepLogIn) {
                 localStorage.setItem('token', token);
+                localStorage.setItem('name', name);
+                localStorage.setItem('email', email);
             }
         } else {
             alert('LUCETBLOCK의 회원이 아닙니다');
-Original file line number
+Diff line change
@@ Expand Up @@
         );
     };
-    export default Logo;
+    export default React.memo(Logo);