refactor: 스타일 리팩터링

darass-team · Aug 6, 2021 · 120c609 · 120c609
1 parent 8470e23
commit 120c609
Show file tree

Hide file tree

Showing 11 changed files with 63 additions and 69 deletions.
diff --git a/frontend/manage/src/components/atoms/Modal/index.tsx b/frontend/manage/src/components/atoms/Modal/index.tsx
@@ -1,10 +1,11 @@
-import { ReactNode, useEffect } from "react";
+import { ReactNode, useEffect, MouseEvent, useRef } from "react";
 import { createPortal } from "react-dom";
-import { Container, Dimmed } from "./styles";
+import { Dimmed } from "./styles";
 
 export interface Props {
   isOpen: boolean;
   children: ReactNode;
+  dimmedOpacity?: number;
   closeModal: () => void;
 }
 
@@ -16,15 +17,23 @@ const ModalPortal = ({ children }: Pick<Props, "children">) => {
   return createPortal(children, $modal);
 };
 
-const Modal = ({ isOpen, closeModal, children }: Props) => {
+const Modal = ({ isOpen, closeModal, children, dimmedOpacity = 0.6 }: Props) => {
+  const dimmedRef = useRef(null);
+  const onCloseModal = (event: MouseEvent) => {
+    if (event.target !== dimmedRef.current) return;
+
+    closeModal();
+  };
+
   useEffect(() => {
     document.body.style.setProperty("overflow", isOpen ? "hidden" : "revert");
   }, [isOpen]);
 
   return (
     <ModalPortal>
-      <Dimmed onClick={closeModal} isOpen={isOpen}></Dimmed>
-      <Container isOpen={isOpen}>{children}</Container>
+      <Dimmed ref={dimmedRef} onClick={onCloseModal} isOpen={isOpen} opacity={dimmedOpacity}>
+        {children}
+      </Dimmed>
     </ModalPortal>
   );
 };

diff --git a/frontend/manage/src/components/atoms/Modal/styles.ts b/frontend/manage/src/components/atoms/Modal/styles.ts
@@ -1,25 +1,21 @@
 import styled from "styled-components";
 import { Z_INDEX } from "../../../styles/constants";
 
-export const Dimmed = styled.div<{ isOpen: boolean }>`
+export const Dimmed = styled.div<{ isOpen: boolean; opacity: number }>`
   position: fixed;
   width: 100%;
   height: 100vh;
   top: 0;
   left: 0;
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: ${({ opacity }) => `rgba(0, 0, 0, ${opacity})`};
   display: flex;
   justify-content: center;
   align-items: center;
-  z-index: ${props => (props.isOpen ? Z_INDEX.MODAL : -1)};
-  opacity: ${props => (props.isOpen ? 1 : 0)};
-  transition: all 0.5s;
-`;
+  z-index: ${({ isOpen }) => (isOpen ? Z_INDEX.MODAL : -1)};
+  opacity: ${({ isOpen }) => (isOpen ? 1 : 0)};
+  transition: z-index 1s, opacity 0.5s;
 
-export const Container = styled.div<{ isOpen: boolean }>`
   & > * {
-    z-index: ${props => (props.isOpen ? Z_INDEX.MODAL + 1 : -1)};
-    opacity: ${props => (props.isOpen ? 1 : 0)};
-    transition: all 0.1s;
+    z-index: ${Z_INDEX.MODAL + 1};
   }
 `;
diff --git a/frontend/manage/src/components/molecules/Calendar/index.tsx b/frontend/manage/src/components/molecules/Calendar/index.tsx
@@ -1,6 +1,6 @@
 import moment from "moment";
 import Days from "./Days";
-import { Container, Header, MoveMonthButton, Month, Year } from "./styles";
+import { Container, Header, Month, MoveMonthButton, Year } from "./styles";
 
 export interface Props {
   date: moment.Moment;

diff --git a/frontend/manage/src/components/molecules/Calendar/styles.ts b/frontend/manage/src/components/molecules/Calendar/styles.ts
@@ -1,19 +1,13 @@
 import styled from "styled-components";
-import { LINE_HEIGHT_SCALE, Z_INDEX } from "../../../styles/constants";
+import { LINE_HEIGHT_SCALE } from "../../../styles/constants";
 import { PALETTE } from "../../../styles/palette";
 
 export const Container = styled.div`
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-
   min-width: 20rem;
   min-height: 20rem;
   padding: 1rem;
   box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.4);
   border-radius: 10px;
-
   background-color: ${PALETTE.WHITE};
 `;
 

diff --git a/frontend/manage/src/components/molecules/Comment/styles.ts b/frontend/manage/src/components/molecules/Comment/styles.ts
@@ -6,6 +6,9 @@ import AvatarComponent from "../../atoms/Avatar";
 export const Avatar = styled(AvatarComponent)`
   width: 4rem;
   height: 4rem;
+  @media all and (max-width: 780px) {
+    height: auto;
+  }
 `;
 
 export const ContentWrapper = styled.div`

diff --git a/frontend/manage/src/components/organisms/CommentSearchConditionForm/index.tsx b/frontend/manage/src/components/organisms/CommentSearchConditionForm/index.tsx
@@ -1,14 +1,7 @@
 import moment from "moment";
 import Modal from "../../atoms/Modal";
 import Calendar from "../../molecules/Calendar";
-import {
-  Container,
-  SearchTermInputWrapper,
-  SearchTermInput,
-  SearchButton,
-  DateInputWrapper,
-  DateInputText
-} from "./styles";
+import { Container, SearchTermInput, SearchButton, Wrapper, Meta, DateInputText } from "./styles";
 
 export interface Props {
   showCalendar: boolean;
@@ -32,24 +25,24 @@ const CommentSearchConditionForm = ({
   setEndDate
 }: Props) => {
   return (
-    <Container>
-      <DateInputWrapper>
-        <span>기간 선택</span>
-        <DateInputText onClick={() => setShowCalendar(!showCalendar)}>{startDate?.format("YY-MM-DD")}</DateInputText>
-        <span>~</span>
-        <DateInputText onClick={() => setShowCalendar(!showCalendar)}>{endDate?.format("YY-MM-DD")}</DateInputText>
-      </DateInputWrapper>
+    <>
+      <Container>
+        <Wrapper>
+          <Meta>기간 선택</Meta>
+          <DateInputText onClick={() => setShowCalendar(true)}>{startDate?.format("YY-MM-DD")}</DateInputText>
+          <span>~</span>
+          <DateInputText onClick={() => setShowCalendar(true)}>{endDate?.format("YY-MM-DD")}</DateInputText>
+        </Wrapper>
 
-      <SearchTermInputWrapper>
-        <label>
-          <span>내용 검색</span>
+        <Wrapper>
+          <Meta>내용 검색</Meta>
           <SearchTermInput placeholder="검색어를 입력해주세요." />
-        </label>
-      </SearchTermInputWrapper>
+        </Wrapper>
 
-      <SearchButton>조회</SearchButton>
+        <SearchButton>조회</SearchButton>
+      </Container>
 
-      <Modal isOpen={showCalendar} closeModal={() => setShowCalendar(false)}>
+      <Modal isOpen={showCalendar} closeModal={() => setShowCalendar(false)} dimmedOpacity={0}>
         <Calendar
           date={currentDate}
           setDate={setCurrentDate}
@@ -59,7 +52,7 @@ const CommentSearchConditionForm = ({
           setEndDate={setEndDate}
         />
       </Modal>
-    </Container>
+    </>
   );
 };
 

diff --git a/frontend/manage/src/components/organisms/CommentSearchConditionForm/styles.ts b/frontend/manage/src/components/organisms/CommentSearchConditionForm/styles.ts
@@ -19,43 +19,38 @@ export const Container = styled.form`
   }
 `;
 
-export const SearchTermInputWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  & > label {
-    display: flex;
-    align-items: center;
-  }
-`;
-
 export const SearchTermInput = styled.input.attrs({ type: "text" })`
   ${inputCSS};
-  max-width: 20rem;
+  padding: 0.3rem 1rem;
+  border: 1px solid ${PALETTE.GRAY_400};
   margin-left: 1rem;
 `;
 
 export const SearchButton = styled(SubmitButton)`
   align-self: flex-end;
+  width: fit-content;
+  height: fit-content;
+  font-size: 1.2rem;
+`;
+
+export const Meta = styled.div`
+  width: 4.5rem;
+  padding: 0;
 `;
 
-export const DateInputWrapper = styled.div`
-  position: relative;
+export const Wrapper = styled.div`
   display: flex;
   align-items: center;
-  justify-content: center;
-
-  & > * {
-    &:not(:first-child) {
-      margin-left: 1rem;
-    }
-  }
+  justify-content: flex-start;
+  width: 100%;
 `;
 
 export const DateInputText = styled.span`
   border-radius: 10px;
+  height: fit-content;
   border: 1px solid ${PALETTE.GRAY_400};
   padding: 0.5rem;
   user-select: none;
   cursor: pointer;
+  margin-left: 0.4rem;
 `;
diff --git a/frontend/manage/src/components/pages/Statistics/index.tsx b/frontend/manage/src/components/pages/Statistics/index.tsx
@@ -0,0 +1,5 @@
+const Statistics = () => {
+  return <>통계 페이지</>;
+};
+
+export default Statistics;
diff --git a/frontend/manage/src/components/pages/Statistics/styles.ts b/frontend/manage/src/components/pages/Statistics/styles.ts
diff --git a/frontend/manage/src/styles/GlobalStyles.ts b/frontend/manage/src/styles/GlobalStyles.ts
@@ -4,10 +4,9 @@ import { LINE_HEIGHT_SCALE } from "./constants";
 import { PALETTE } from "./palette";
 
 const GlobalStyles = createGlobalStyle`
-      @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;800&display=swap');
 
       ${normalize}
-      
+
       * {
         box-sizing: border-box;
       }

diff --git a/frontend/manage/src/styles/constants.ts b/frontend/manage/src/styles/constants.ts
@@ -5,7 +5,7 @@ export const Z_INDEX = {
   ERROR_NOTICE: 1,
   NAV: {
     MOBILE: {
-      HAMBUGER_BUTTON: 2,
+      HAMBUGER_BUTTON: 3,
       MENU_WRAPPER: 2
     },
     DESKTOP: {