From 5476b13f71c0fa5952cceb26fc42bca5ff2ffb67 Mon Sep 17 00:00:00 2001 From: leecr1215 Date: Fri, 12 Aug 2022 14:46:27 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EB=AA=A8=EB=8B=AC=20=EB=B6=84=EB=A6=AC?= =?UTF-8?q?=20-=20modal=20header=20=EB=B6=84=EB=A6=AC=20-=20modal=20backgr?= =?UTF-8?q?ound=EC=99=80=20container=EB=A7=8C=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #19 --- frontend/web/src/components/atoms/button.tsx | 16 +++ .../web/src/components/atoms/drop_down.tsx | 9 +- .../molecules/modal_close_button.tsx | 25 ++++ .../src/components/molecules/modal_header.tsx | 16 +-- .../components/organisms/centered_modal.tsx | 47 +++++++ .../src/components/organisms/login_modal.tsx | 106 ++++++--------- .../src/components/organisms/signup_modal.tsx | 122 +++++++----------- frontend/web/src/globalStyles.tsx | 3 +- frontend/web/src/router.tsx | 2 +- frontend/web/src/theme.tsx | 1 + 10 files changed, 192 insertions(+), 155 deletions(-) create mode 100644 frontend/web/src/components/atoms/button.tsx create mode 100644 frontend/web/src/components/molecules/modal_close_button.tsx create mode 100644 frontend/web/src/components/organisms/centered_modal.tsx diff --git a/frontend/web/src/components/atoms/button.tsx b/frontend/web/src/components/atoms/button.tsx new file mode 100644 index 0000000..aa55ed6 --- /dev/null +++ b/frontend/web/src/components/atoms/button.tsx @@ -0,0 +1,16 @@ +import React, { ReactNode } from 'react'; + +type ButtonProps = { + onClick?: React.MouseEventHandler; + children?: ReactNode; +}; + +const Button: React.FC = ({ onClick, children }: ButtonProps) => { + return ( + + ); +}; + +export default Button; diff --git a/frontend/web/src/components/atoms/drop_down.tsx b/frontend/web/src/components/atoms/drop_down.tsx index 876040d..a0d6114 100644 --- a/frontend/web/src/components/atoms/drop_down.tsx +++ b/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) => { return ( - {options.map((option) => ( diff --git a/frontend/web/src/components/molecules/modal_close_button.tsx b/frontend/web/src/components/molecules/modal_close_button.tsx new file mode 100644 index 0000000..8b09d9f --- /dev/null +++ b/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; +}; + +const ModalCloseButton: React.FC = ({ setState }: modalCloseButtonProps) => { + const setModalOpen = useSetRecoilState(setState); + + return ( + +
+ + + ); +}; + +export default ModalCloseButton; diff --git a/frontend/web/src/components/molecules/modal_header.tsx b/frontend/web/src/components/molecules/modal_header.tsx index 29a3f27..d8d1168 100644 --- a/frontend/web/src/components/molecules/modal_header.tsx +++ b/frontend/web/src/components/molecules/modal_header.tsx @@ -1,9 +1,7 @@ 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; @@ -11,17 +9,9 @@ type modalHeaderProps = { }; const ModalHeader: React.FC = ({ children, setState }: modalHeaderProps) => { - const setModalOpen = useSetRecoilState(setState); - return (
- -
- - - +
LUCENTBLOCK diff --git a/frontend/web/src/components/organisms/centered_modal.tsx b/frontend/web/src/components/organisms/centered_modal.tsx new file mode 100644 index 0000000..fbd328a --- /dev/null +++ b/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 = ({ + children, + width, + height, +}: centeredModalProps) => { + return ReactDOM.createPortal( + + + {children} + + , + document.getElementById('modal-root')!, + ); +}; + +export default CenteredModal; diff --git a/frontend/web/src/components/organisms/login_modal.tsx b/frontend/web/src/components/organisms/login_modal.tsx index 19e5802..b64a000 100644 --- a/frontend/web/src/components/organisms/login_modal.tsx +++ b/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( - - - 로그인 - - { - console.log(error); - }} - pluginName='googleLogin' - isSignedIn={keepLogIn} - /> - - - - { - setKeepLogIn(e.target.checked); - }} - /> - - 로그인 상태 유지할래요. - - -
- 아직 회원이 아니신가요? - { - setLogInModalOpen(false); - setSignUpModalOpen(true); + return ( + + 로그인 + + { + console.log(error); + }} + pluginName='googleLogin' + isSignedIn={keepLogIn} + /> + + + + { + setKeepLogIn(e.target.checked); }} - > - 회원가입 + /> + + 로그인 상태 유지할래요. - - , - document.getElementById('modal-root')!, + +
+ 아직 회원이 아니신가요? + { + setLogInModalOpen(false); + setSignUpModalOpen(true); + }} + > + 회원가입 + + ); }; diff --git a/frontend/web/src/components/organisms/signup_modal.tsx b/frontend/web/src/components/organisms/signup_modal.tsx index b170d73..c6e6ab3 100644 --- a/frontend/web/src/components/organisms/signup_modal.tsx +++ b/frontend/web/src/components/organisms/signup_modal.tsx @@ -2,7 +2,6 @@ /* eslint-disable no-restricted-syntax */ import React, { useState } from 'react'; import styled from 'styled-components'; -import ReactDOM from 'react-dom'; import { useRecoilValue, useSetRecoilState } from 'recoil'; import { GoogleLogin, @@ -16,29 +15,7 @@ import Text from '../atoms/text'; import { signUpModalVisibleState, logInModalVisibleState, userSignUpInfoState } from '../../atom'; import { groups } 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 CenteredModal from './centered_modal'; const MarginTop = styled.div` margin-top: 5vh; @@ -84,58 +61,55 @@ const SignupModal: React.FC = () => { return false; }; - return ReactDOM.createPortal( - - - 회원가입 - { - setSlackId(e.target.value); + return ( + + 회원가입 + { + setSlackId(e.target.value); + }} + /> +
+ { + setPosition(e.target.value); + }} + placeholder='Position' + letterSpacing={0.15} + options={groups} + /> +
+ + { + console.log(error); }} + pluginName='googleSignup' + buttonText='Sign up with Google' + disabled={hasBlank()} /> -
- { - setPosition(e.target.value); - }} - placeholder='Position' - letterSpacing={0.15} - options={groups} - /> -
- - { - console.log(error); - }} - pluginName='googleSignup' - buttonText='Sign up with Google' - disabled={hasBlank()} - /> - -
- 이미 계정이 있으신가요? - { - setSignUpModalOpen(false); - setLogInModalOpen(true); - }} - > - 로그인 - - - , - document.getElementById('modal-root')!, + +
+ 이미 계정이 있으신가요? + { + setSignUpModalOpen(false); + setLogInModalOpen(true); + }} + > + 로그인 + + ); }; diff --git a/frontend/web/src/globalStyles.tsx b/frontend/web/src/globalStyles.tsx index 5c01086..1d2b245 100644 --- a/frontend/web/src/globalStyles.tsx +++ b/frontend/web/src/globalStyles.tsx @@ -1,4 +1,5 @@ import { createGlobalStyle } from 'styled-components'; +import theme from './theme'; const GlobalStyle = createGlobalStyle` @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400&display=swap'); @@ -73,7 +74,7 @@ button { } input, select { - border-bottom: 2px solid #808080; + border-bottom: 2px solid ${theme.inputColor}; font-weight: 900; font-size: 0.8rem; height: 4vh; diff --git a/frontend/web/src/router.tsx b/frontend/web/src/router.tsx index 29edf02..2fa5176 100644 --- a/frontend/web/src/router.tsx +++ b/frontend/web/src/router.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { BrowserRouter, Route, Routes } from 'react-router-dom'; import { useRecoilValue } from 'recoil'; import DayDetailModal from './components/organisms/day_detail_modal'; -import signUpModalVisibleState, { logInModalVisibleState } from './atom'; +import { signUpModalVisibleState, logInModalVisibleState } from './atom'; import Header from './components/organisms/header'; import SignupModal from './components/organisms/signup_modal'; diff --git a/frontend/web/src/theme.tsx b/frontend/web/src/theme.tsx index 8e7ab43..34be9a7 100644 --- a/frontend/web/src/theme.tsx +++ b/frontend/web/src/theme.tsx @@ -5,6 +5,7 @@ const theme = { plusColor: '#5DBB4D', submitBtnColor: '#346DF1', cancelBtnColor: '#787878', + inputColor: '#808080', }; export default theme;