Merge pull request #20 from lucent-intern-org/feat/#19-modal-componen…

…tization

feat: 모달 분리

frontend/web/src/components/atoms/button.tsx

@@ -0,0 +1,16 @@
+import React, { ReactNode } from 'react';
+
+type ButtonProps = {
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    children?: ReactNode;
+};
+
+const Button: React.FC<ButtonProps> = ({ onClick, children }: ButtonProps) => {
+    return (
+        <button type='button' onClick={onClick} style={{ padding: 0 }}>
+            {children}
+        </button>
+    );
+};
+
+export default Button;

frontend/web/src/components/atoms/drop_down.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import theme from '../../theme';
 
 const DropDownBox = styled.select<{ letterSpace?: string | number }>`
     border-top: 0;
@@ -27,7 +28,13 @@ const DropDown: React.FC<dropDownProps> = ({
 }: dropDownProps) => {
     return (
         <DropDownBox letterSpace={letterSpacing} onChange={onChange} defaultValue='default'>
-            <option key='0' value='default' disabled hidden style={{ color: '#808080' }}>
+            <option
+                key='0'
+                value='default'
+                disabled
+                hidden
+                style={{ color: `${theme.inputColor}` }}
+            >
                 {placeholder}
             </option>
             {options.map((option) => (

frontend/web/src/components/molecules/modal_close_button.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { IoMdClose } from 'react-icons/io';
+import { RecoilState, useSetRecoilState } from 'recoil';
+import theme from '../../theme';
+import Button from '../atoms/button';
+import FlexRow from './flex_row';
+
+type modalCloseButtonProps = {
+    setState: RecoilState<boolean>;
+};
+
+const ModalCloseButton: React.FC<modalCloseButtonProps> = ({ setState }: modalCloseButtonProps) => {
+    const setModalOpen = useSetRecoilState(setState);
+
+    return (
+        <FlexRow>
+            <div />
+            <Button onClick={() => setModalOpen(false)}>
+                <IoMdClose size={50} color={theme.inputColor} />
+            </Button>
+        </FlexRow>
+    );
+};
+
+export default ModalCloseButton;

frontend/web/src/components/molecules/modal_header.tsx

@@ -1,27 +1,17 @@
 import React from 'react';
-import { IoMdClose } from 'react-icons/io';
-import { RecoilState, useSetRecoilState } from 'recoil';
-
+import { RecoilState } from 'recoil';
 import Text from '../atoms/text';
-import FlexRow from './flex_row';
+import ModalCloseButton from './modal_close_button';
 
 type modalHeaderProps = {
     children: string;
     setState: RecoilState<boolean>;
 };
 
 const ModalHeader: React.FC<modalHeaderProps> = ({ children, setState }: modalHeaderProps) => {
-    const setModalOpen = useSetRecoilState(setState);
-
     return (
         <div>
-            <FlexRow>
-                <div />
-                <button type='button' onClick={() => setModalOpen(false)} style={{ padding: 0 }}>
-                    <IoMdClose size={50} color='#808080' />
-                </button>
-            </FlexRow>
-
+            <ModalCloseButton setState={setState} />
             <div style={{ marginTop: '1vh' }}>
                 <Text fontSize={1.7} fontWeight={900} letterSpacing='0.15'>
                     LUCENTBLOCK

frontend/web/src/components/organisms/centered_modal.tsx

@@ -0,0 +1,47 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import React, { ReactNode } from 'react';
+import styled from 'styled-components';
+import ReactDOM from 'react-dom';
+
+const Background = styled.div`
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: fixed;
+    left: 0;
+    top: 0;
+    background: rgb(0, 0, 0, 0.5);
+    z-index: 10000;
+`;
+
+const Container = styled.div<{ width: number; height: number }>`
+    width: ${(props) => `${props.width}rem`};
+    height: ${(props) => `${props.height}rem`};
+    position: relative;
+    border-radius: 2%;
+    text-align: center;
+    padding: 2vh;
+    background-color: white;
+    box-shadow: 1px 1px 13px #4a4848;
+`;
+
+type centeredModalProps = { children: ReactNode; width: number; height: number };
+
+const CenteredModal: React.FC<centeredModalProps> = ({
+    children,
+    width,
+    height,
+}: centeredModalProps) => {
+    return ReactDOM.createPortal(
+        <Background>
+            <Container width={width} height={height}>
+                {children}
+            </Container>
+        </Background>,
+        document.getElementById('modal-root')!,
+    );
+};
+
+export default CenteredModal;

frontend/web/src/components/organisms/login_modal.tsx

@@ -3,7 +3,7 @@
 /* eslint-disable react/jsx-boolean-value */
 import React, { useState } from 'react';
 import styled from 'styled-components';
-import ReactDOM from 'react-dom';
+
 import { useSetRecoilState } from 'recoil';
 import {
     GoogleLogin,
@@ -15,29 +15,8 @@ import Text from '../atoms/text';
 import { signUpModalVisibleState, logInModalVisibleState, LogInState } from '../../atom';
 import ModalHeader from '../molecules/modal_header';
 import { users } from '../../temp_db';
-
-const Background = styled.div`
-    height: 100%;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: fixed;
-    left: 0;
-    top: 0;
-    background: rgb(0, 0, 0, 0.5);
-`;
-
-const Container = styled.div`
-    width: 33vw;
-    height: 50vh;
-    position: relative;
-    border-radius: 2%;
-    text-align: center;
-    padding: 2vh;
-    background-color: white;
-    box-shadow: 1px 1px 13px #4a4848;
-`;
+import theme from '../../theme';
+import CenteredModal from './centered_modal';
 
 const MarginTop = styled.div`
     margin-top: 6vh;
@@ -107,49 +86,46 @@ const LoginModal: React.FC = () => {
         console.log(res);
     };
 
-    return ReactDOM.createPortal(
-        <Background>
-            <Container>
-                <ModalHeader setState={logInModalVisibleState}>로그인</ModalHeader>
-                <MarginTop>
-                    <GoogleLogin
-                        clientId={googleClientId}
-                        onSuccess={onLoginSuccess}
-                        onFailure={(error) => {
-                            console.log(error);
-                        }}
-                        pluginName='googleLogin'
-                        isSignedIn={keepLogIn}
-                    />
-                </MarginTop>
-
-                <Align>
-                    <Input
-                        type='checkbox'
-                        onChange={(e) => {
-                            setKeepLogIn(e.target.checked);
-                        }}
-                    />
-                    <Text color='#808080' fontSize={0.7}>
-                        로그인 상태 유지할래요.
-                    </Text>
-                </Align>
-                <br />
-                <Text fontSize={0.7}>아직 회원이 아니신가요?</Text>
-                <Text
-                    marginTop='6vh'
-                    fontSize={0.7}
-                    color='#346DF1'
-                    onClick={() => {
-                        setLogInModalOpen(false);
-                        setSignUpModalOpen(true);
+    return (
+        <CenteredModal width={25} height={30}>
+            <ModalHeader setState={logInModalVisibleState}>로그인</ModalHeader>
+            <MarginTop>
+                <GoogleLogin
+                    clientId={googleClientId}
+                    onSuccess={onLoginSuccess}
+                    onFailure={(error) => {
+                        console.log(error);
+                    }}
+                    pluginName='googleLogin'
+                    isSignedIn={keepLogIn}
+                />
+            </MarginTop>
+
+            <Align>
+                <Input
+                    type='checkbox'
+                    onChange={(e) => {
+                        setKeepLogIn(e.target.checked);
                     }}
-                >
-                    회원가입
+                />
+                <Text color={theme.inputColor} fontSize={0.7}>
+                    로그인 상태 유지할래요.
                 </Text>
-            </Container>
-        </Background>,
-        document.getElementById('modal-root')!,
+            </Align>
+            <br />
+            <Text fontSize={0.7}>아직 회원이 아니신가요?</Text>
+            <Text
+                marginTop='6vh'
+                fontSize={0.7}
+                color='#346DF1'
+                onClick={() => {
+                    setLogInModalOpen(false);
+                    setSignUpModalOpen(true);
+                }}
+            >
+                회원가입
+            </Text>
+        </CenteredModal>
     );
 };