fix: resolve conflicts

#44
lucent-intern-org · Aug 22, 2022 · dd434f7 · dd434f7
2 parents cbfcc97 + 89610a5
commit dd434f7
Show file tree

Hide file tree

Showing 26 changed files with 27,215 additions and 26,218 deletions.
diff --git a/frontend/web/package-lock.json b/frontend/web/package-lock.json
diff --git a/frontend/web/package.json b/frontend/web/package.json
@@ -15,7 +15,9 @@
     "@types/node": "^16.11.47",
     "@types/react": "^18.0.16",
     "@types/react-dom": "^18.0.6",
+    "bootstrap": "^5.2.0",
     "react": "^18.2.0",
+    "react-bootstrap": "^2.5.0",
     "react-dom": "^18.2.0",
     "react-google-button": "^0.7.2",
     "react-icons": "^4.4.0",
@@ -25,6 +27,7 @@
     "recoil": "^0.7.4",
     "styled-components": "^5.3.5",
     "typescript": "^4.7.4",
+    "typescript-dom-lib-generator": "^0.0.1-security",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/frontend/web/public/index.html b/frontend/web/public/index.html
@@ -5,6 +5,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta name="theme-color" content="#000000" />
         <meta name="description" content="Meeting management system" />
+
         <title>Meeting management system</title>
     </head>
     <body>

diff --git a/frontend/web/src/atom.tsx b/frontend/web/src/atom.tsx
@@ -33,7 +33,10 @@ export const meetingModifyModalState = atom({
 
 export const signUpModalVisibleState = atom({
     key: 'signUpModalVisible',
-    default: false,
+    default: {
+        visible: false,
+        signUpUser: { slackId: '', name: '', email: '', groupId: -1000, role: '' },
+    },
 });
 
 export const logInModalVisibleState = atom({
@@ -53,6 +56,29 @@ export const userState = atom({
         name: '',
     },
 });
+
 export const loginState = atom({ key: 'login', default: false });
 
 export const isAdminState = atom({ key: 'isAdmin', default: false });
+
+export const adminPageState = atom({ key: 'adminPage', default: 'users' });
+
+export const addUserModalVisibleState = atom({ key: 'addUserModalVisible', default: false });
+
+export const modifyUserModalVisibleState = atom({
+    key: 'modifyUserModalVisible',
+    default: {
+        visible: false,
+        modifyUser: { slackId: '', name: '', email: '', groupId: -1000, role: '' },
+    },
+});
+
+export const deleteUserModalVisibleState = atom({
+    key: 'deleteUserModalVisible',
+    default: {
+        visible: false,
+        deleteUser: { slackId: '', name: '', email: '', groupId: -1000, role: '' },
+    },
+});
+
+export const logoutModalVisibleState = atom({ key: 'logoutModalVisible', default: false });
diff --git a/frontend/web/src/components/atoms/custom_button.tsx b/frontend/web/src/components/atoms/custom_button.tsx
@@ -62,4 +62,5 @@ const CustomButton: React.FC<CustomButtonProps> = ({
         </button>
     );
 };
+
 export default CustomButton;
diff --git a/frontend/web/src/components/atoms/input.tsx b/frontend/web/src/components/atoms/input.tsx
@@ -37,6 +37,7 @@ const Input: React.FC<inputProps> = ({
                         letterSpacing: `${letterSpacing}rem`,
                         width: width,
                         marginTop: marginTop,
+                        backgroundColor: 'white',
                     }}
                 />
             );

diff --git a/frontend/web/src/components/atoms/text.tsx b/frontend/web/src/components/atoms/text.tsx
@@ -30,6 +30,7 @@ const Text: React.FC<textProps> = ({
                 fontFamily: 'inter',
                 color: color,
                 paddingRight: 0,
+                paddingLeft: 0,
                 marginTop: marginTop,
             }}
             onClick={onClick}

diff --git a/frontend/web/src/components/molecules/admin_header.tsx b/frontend/web/src/components/molecules/admin_header.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { useRecoilState } from 'recoil';
+import styled from 'styled-components';
+import { adminPageState } from '../../atom';
+import theme from '../../styles/theme';
+import Text from '../atoms/text';
+
+const ButtonStyle = styled.div`
+    padding: 0 0.5rem 0.5rem 0.5rem;
+`;
+
+const Container = styled.div<{ page: string }>`
+    font-family: 'inter';
+    display: flex;
+    justify-content: space-around;
+    padding-top: 0.5rem;
+    .users {
+        border-bottom: ${(props) =>
+            props.page === 'users' ? `4px solid ${theme.primaryColor}` : 0};
+    }
+    .rooms {
+        border-bottom: ${(props) =>
+            props.page === 'rooms' ? `4px solid ${theme.primaryColor}` : 0};
+    }
+`;
+
+const AdminHeader: React.FC = () => {
+    const [adminPage, setAdminPage] = useRecoilState(adminPageState);
+
+    return (
+        <Container page={adminPage}>
+            <ButtonStyle className='users'>
+                <Text
+                    fontSize={1.1}
+                    fontWeight={900}
+                    onClick={() => {
+                        setAdminPage('users');
+                    }}
+                >
+                    사용자
+                </Text>
+            </ButtonStyle>
+            <ButtonStyle className='rooms'>
+                <Text
+                    fontSize={1.1}
+                    fontWeight={900}
+                    onClick={() => {
+                        setAdminPage('rooms');
+                    }}
+                >
+                    회의실
+                </Text>
+            </ButtonStyle>
+        </Container>
+    );
+};
+
+export default AdminHeader;
diff --git a/frontend/web/src/components/molecules/flex_column.tsx b/frontend/web/src/components/molecules/flex_column.tsx
@@ -1,24 +1,44 @@
 import React, { ReactNode } from 'react';
 import styled from 'styled-components';
 
-const Container = styled.div<{ justifyContent: string }>`
+const Container = styled.div<{
+    justifyContent: string;
+    horizontalPadding: number;
+    verticalPadding: number;
+}>`
     display: flex;
     justify-content: ${(props) => props.justifyContent};
     align-items: center;
     flex-direction: column;
     height: 90%;
+    padding-left: ${(props) => `${props.horizontalPadding}rem`};
+    padding-right: ${(props) => `${props.horizontalPadding}rem`};
+    padding-top: ${(props) => `${props.verticalPadding}rem`};
+    padding-bottom: ${(props) => `${props.verticalPadding}rem`};
 `;
 
 type FlexColumnProps = {
     children: ReactNode;
     justifyContent?: string;
+    horizontalPadding?: number;
+    verticalPadding?: number;
 };
 
 const FlexColumn: React.FC<FlexColumnProps> = ({
     children,
     justifyContent = 'space-between',
+    horizontalPadding = 0,
+    verticalPadding = 0,
 }: FlexColumnProps) => {
-    return <Container justifyContent={justifyContent}>{children}</Container>;
+    return (
+        <Container
+            justifyContent={justifyContent}
+            horizontalPadding={horizontalPadding}
+            verticalPadding={verticalPadding}
+        >
+            {children}
+        </Container>
+    );
 };
 
 export default FlexColumn;
diff --git a/frontend/web/src/components/molecules/flex_row.tsx b/frontend/web/src/components/molecules/flex_row.tsx
@@ -1,9 +1,9 @@
 import React, { ReactNode } from 'react';
 import styled from 'styled-components';
 
-const Container = styled.div<{ needMargin: boolean }>`
+const Container = styled.div<{ needMargin: boolean; justifyContent: string }>`
     display: flex;
-    justify-content: space-between;
+    justify-content: ${(props) => props.justifyContent};
     align-items: center;
     flex-direction: row;
     margin-top: ${(props) => (props.needMargin ? '2rem' : 0)};
@@ -14,10 +14,19 @@ const Container = styled.div<{ needMargin: boolean }>`
 type FlexRowProps = {
     children: ReactNode;
     needMargin?: boolean;
+    justifyContent?: string;
 };
 
-const FlexRow: React.FC<FlexRowProps> = ({ children, needMargin = false }: FlexRowProps) => {
-    return <Container needMargin={needMargin}>{children}</Container>;
+const FlexRow: React.FC<FlexRowProps> = ({
+    children,
+    needMargin = false,
+    justifyContent = 'space-between',
+}: FlexRowProps) => {
+    return (
+        <Container needMargin={needMargin} justifyContent={justifyContent}>
+            {children}
+        </Container>
+    );
 };
 
 export default FlexRow;
diff --git a/frontend/web/src/components/molecules/modal_close_button.tsx b/frontend/web/src/components/molecules/modal_close_button.tsx
@@ -19,7 +19,7 @@ const ModalCloseButton: React.FC<modalCloseButtonProps> = ({ state }: modalClose
                 strokeWidth={50}
                 size={40}
                 color={theme.inputColor}
-                cursor='pointer'
+                style={{ cursor: 'pointer' }}
             />
         </FlexRow>
     );

diff --git a/frontend/web/src/components/molecules/nav.tsx b/frontend/web/src/components/molecules/nav.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import { useRecoilState, useRecoilValue } from 'recoil';
 import styled from 'styled-components';
@@ -7,6 +8,7 @@ import {
     logInModalVisibleState,
     loginState,
     isAdminState,
+    logoutModalVisibleState,
 } from '../../atom';
 import Text from '../atoms/text';
 import FlexRow from './flex_row';
@@ -18,17 +20,13 @@ const Li = styled.li`
 const Nav: React.FC = () => {
     const [signUpModalVisible, setSignUpModalVisible] = useRecoilState(signUpModalVisibleState);
     const [logInModalVisible, setLogInModalVisible] = useRecoilState(logInModalVisibleState);
-    const [isLogIn, setIsLogIn] = useRecoilState(loginState);
+    const isLogIn = useRecoilValue(loginState);
     const isAdmin = useRecoilValue(isAdminState);
-    const removeInfo = () => {
-        localStorage.removeItem('token');
-        setIsLogIn(false);
-    };
+    const [logoutModalVisible, setLogoutModalVisible] = useRecoilState(logoutModalVisibleState);
+    const navigate = useNavigate();
 
-    const logoutEvent = () => {
-        if (window.confirm('로그아웃 하시겠습니까?')) {
-            removeInfo();
-        }
+    const showLogoutModal = () => {
+        setLogoutModalVisible(!logoutModalVisible);
     };
 
     return (
@@ -37,11 +35,11 @@ const Nav: React.FC = () => {
                 <FlexRow>
                     {isAdmin && (
                         <Li>
-                            <Text onClick={() => console.log('관리자 페이지')}>관리자</Text>
+                            <Text onClick={() => navigate('/admin')}>관리자</Text>
                         </Li>
                     )}
                     <Li>
-                        <Text onClick={logoutEvent}>로그아웃</Text>
+                        <Text onClick={showLogoutModal}>로그아웃</Text>
                     </Li>
                 </FlexRow>
             ) : (
@@ -50,7 +48,14 @@ const Nav: React.FC = () => {
                         <Text onClick={() => setLogInModalVisible(!logInModalVisible)}>로그인</Text>
                     </Li>
                     <Li>
-                        <Text onClick={() => setSignUpModalVisible(!signUpModalVisible)}>
+                        <Text
+                            onClick={() =>
+                                setSignUpModalVisible((prev) => ({
+                                    ...prev,
+                                    visible: !signUpModalVisible.visible,
+                                }))
+                            }
+                        >
                             회원가입
                         </Text>
                     </Li>
-Original file line number
+Diff line change
@@ Expand Up / @@ -62,4 +62,5 @@ const CustomButton: React.FC<CustomButtonProps> = ({ @@
             </button>
         );
     };
     export default CustomButton;