refactor: 각종 리팩터링 모음 (#391)

* design: line-height 설정 * refactor: 모두의 정원 margin-bottom 설정 * refactor: 위치에 따라 select박스 위치 변경 * design: line-height 설정 * refactor: pending일 경우에 button block * refactor: modal 오픈시에 scroll 방지 * refactor: select 상태 제거 * design: 모두의 정원 header 수정
woowacourse-teams · Sep 22, 2023 · 58e20c6 · 58e20c6
1 parent b11d7c6
commit 58e20c6
Show file tree

Hide file tree

Showing 29 changed files with 96 additions and 48 deletions.
diff --git a/frontend/src/components/@common/CheckButton/CheckButton.style.ts b/frontend/src/components/@common/CheckButton/CheckButton.style.ts
@@ -18,6 +18,7 @@ export const CheckboxLabel = styled.label`
   padding: 0 12px;
 
   font-size: 1.2rem;
+  line-height: 1.6rem;
   color: ${(props) => props.theme.color.sub};
 
   background-color: ${(props) => props.theme.color.grayLight};

diff --git a/frontend/src/components/@common/Confirm/Confirm.style.ts b/frontend/src/components/@common/Confirm/Confirm.style.ts
@@ -69,6 +69,7 @@ const Button = styled.button`
 
   font-size: 1.5rem;
   font-weight: normal;
+  line-height: 2rem;
   letter-spacing: 1px;
 
   border-radius: 8px;

diff --git a/frontend/src/components/@common/InlineRadio/ingredients/Main.style.ts b/frontend/src/components/@common/InlineRadio/ingredients/Main.style.ts
@@ -2,5 +2,7 @@ import { styled } from 'styled-components';
 
 export const Wrapper = styled.span`
   display: inline-flex;
+  align-items: center;
   font-size: 1.8rem;
+  line-height: 2.2rem;
 `;
diff --git a/frontend/src/components/@common/Modal/index.tsx b/frontend/src/components/@common/Modal/index.tsx
@@ -1,4 +1,4 @@
-import { PropsWithChildren, forwardRef } from 'react';
+import { PropsWithChildren, forwardRef, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { CloseButton, ModalBox, ModalContent } from './Modal.style';
 
@@ -13,6 +13,14 @@ const Modal = forwardRef<HTMLDialogElement, ModalProps>(function Modal(
 ) {
   const root = document.getElementById('modal-root') ?? document.body;
 
+  useEffect(() => {
+    if (!isOpen) {
+      document.body.style.position = 'relative';
+      return;
+    }
+    document.body.style.position = 'fixed';
+  }, [isOpen]);
+
   return createPortal(
     isOpen && (
       <ModalBox aria-modal="true" ref={ref}>

diff --git a/frontend/src/components/@common/Navbar/Navbar.style.ts b/frontend/src/components/@common/Navbar/Navbar.style.ts
@@ -47,8 +47,9 @@ export const NavItem = styled.div`
 `;
 
 export const NavLabel = styled.p<{ $active?: boolean }>`
-  font-size: 1rem;
+  font-size: 1.2rem;
   font-weight: 700;
+  line-height: 1.5rem;
   color: ${({ $active, theme: { color } }) =>
     $active ? color.fontPrimaryForBackground : color.subLight};
 `;
diff --git a/frontend/src/components/@common/Select/Select.style.ts b/frontend/src/components/@common/Select/Select.style.ts
@@ -60,10 +60,10 @@ export const Backdrop = styled.div`
   height: 100%;
 `;
 
-export const OptionBox = styled.ul`
+export const OptionBox = styled.ul<{ $top?: number }>`
   position: absolute;
   z-index: ${({ theme: { zIndex } }) => zIndex.modal};
-  top: 32px;
+  top: ${(props) => props.$top ?? 32}px;
 
   width: 100%;
 

diff --git a/frontend/src/components/@common/Select/index.tsx b/frontend/src/components/@common/Select/index.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useCallback } from 'react';
+import { useEffect, useCallback, useRef } from 'react';
 import SvgIcons from 'components/@common/SvgIcons/SvgFill';
 import { Backdrop, IconArea, OptionBox, OptionItem, SelectedValue, Wrapper } from './Select.style';
 import useToggle from 'hooks/useToggle';
@@ -11,9 +11,21 @@ interface SelectProps {
   placeholder?: string;
 }
 
+const DEFAULT_HEIGHT = 32;
+
 const Select = ({ value, options, onChange, placeholder }: SelectProps) => {
   const { isOn: isOpen, off: close, toggle } = useToggle();
 
+  const selectRef = useRef<HTMLDivElement | null>(null);
+
+  const currentPos = selectRef.current?.getBoundingClientRect();
+  const optionHeight = options.length * 40;
+
+  const topPosition =
+    currentPos && currentPos.top + optionHeight + DEFAULT_HEIGHT > window.innerHeight
+      ? -optionHeight
+      : DEFAULT_HEIGHT;
+
   const select = (option: string) => {
     onChange?.(option);
     close();
@@ -34,10 +46,10 @@ const Select = ({ value, options, onChange, placeholder }: SelectProps) => {
     return () => {
       window.removeEventListener('keyup', closeOnEscape);
     };
-  }, [isOpen, closeOnEscape]);
+  }, [isOpen, closeOnEscape, options.length]);
 
   return (
-    <Wrapper>
+    <Wrapper ref={selectRef}>
       <SelectedValue
         type="button"
         onClick={toggle}
@@ -52,7 +64,7 @@ const Select = ({ value, options, onChange, placeholder }: SelectProps) => {
       {isOpen && (
         <>
           <Backdrop onClick={close} />
-          <OptionBox role="menu">
+          <OptionBox role="menu" $top={topPosition}>
             {options.map((option) => {
               const selectOnClick = () => select(option);
               const selectOnEnterOrSpace = ({ key }: React.KeyboardEvent<HTMLLIElement>) => {

diff --git a/frontend/src/components/@common/Toast/Toast.style.ts b/frontend/src/components/@common/Toast/Toast.style.ts
@@ -64,16 +64,13 @@ export const MessageArea = styled.div`
 export const Title = styled.p`
   width: 100%;
   margin-bottom: 8px;
-
-  font-size: 2rem;
-  font-weight: 900;
+  font: 900 2rem/2.4rem NanumSquareRound;
   vertical-align: center;
 `;
 
 export const Message = styled.p`
   width: 100%;
-  font-size: 1.8rem;
-  font-weight: 600;
+  font: 600 1.8rem/2.2rem NanumSquareRound;
 `;
 
 export const ToastListWrapper = styled.div`

diff --git a/frontend/src/components/petPlant/PetPlantCard/PetPlantCard.style.ts b/frontend/src/components/petPlant/PetPlantCard/PetPlantCard.style.ts
@@ -46,6 +46,7 @@ export const Nickname = styled.p`
   width: 100%;
 
   font-size: 1.8rem;
+  line-height: 2.2rem;
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
@@ -54,26 +55,23 @@ export const ContentRow = styled.div`
   display: flex;
   align-items: end;
   justify-content: space-between;
+
+  font-size: 1.4rem;
+  line-height: 1.8rem;
 `;
 
 export const DictionaryPlantName = styled.p`
   overflow: hidden;
 
   width: 70%;
 
-  font-size: 1.4rem;
   color: ${(props) => props.theme.color.grayDark};
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
 
-export const DaySince = styled.p`
-  font-size: 1.4rem;
-`;
-
 export const DaySinceNumber = styled.span`
-  margin-left: 2px;
-  font-size: 1.8rem;
+  margin-left: 1px;
   font-weight: 900;
   color: ${(props) => props.theme.color.primary};
 `;
diff --git a/frontend/src/components/petPlant/PetPlantCard/index.tsx b/frontend/src/components/petPlant/PetPlantCard/index.tsx
@@ -5,7 +5,6 @@ import {
   ContentArea,
   ContentRow,
   CrownArea,
-  DaySince,
   DaySinceNumber,
   DictionaryPlantName,
   ImageArea,
@@ -35,9 +34,9 @@ const PetPlantCard = ({
         <Nickname aria-label="식물 별명">{nickname} </Nickname>
         <ContentRow>
           <DictionaryPlantName aria-label="식물 종류">{dictionaryPlantName}</DictionaryPlantName>
-          <DaySince aria-label="식물과 같이 지낸 시간">
+          <p aria-label="식물과 같이 지낸 시간">
             D+<DaySinceNumber>{daySince}</DaySinceNumber>
-          </DaySince>
+          </p>
         </ContentRow>
       </ContentArea>
     </Wrapper>

diff --git a/frontend/src/components/petPlant/PetPlantDetail/PetPlantDetail.style.ts b/frontend/src/components/petPlant/PetPlantDetail/PetPlantDetail.style.ts
@@ -80,9 +80,6 @@ export const Text = styled.span`
 `;
 
 export const Strong = styled.strong`
-  font: ${({ theme }) => theme.font.dictContent};
-  font-size: 2.4rem;
-  font-weight: bold;
   color: ${({ theme }) => theme.color.primary};
 `;
 
@@ -161,8 +158,8 @@ export const EnvironmentTitle = styled.span`
 
 export const ButtonArea = styled.div`
   display: flex;
-  justify-content: space-between;
   column-gap: 10px;
+  justify-content: space-between;
 `;
 
 const ButtonLink = styled(Link)`
@@ -174,7 +171,8 @@ const ButtonLink = styled(Link)`
   height: 36px;
 
   font-size: 1.5rem;
-  font-weight: 500;
+  font-weight: 700;
+  line-height: 1.8rem;
   letter-spacing: 1px;
 
   border-radius: 4px;

diff --git a/frontend/src/components/petPlant/PetPlantEditForm/PetPlantEditForm.style.ts b/frontend/src/components/petPlant/PetPlantEditForm/PetPlantEditForm.style.ts
@@ -162,8 +162,11 @@ export const HiddenLabel = styled.label`
 
 export const Input = styled.input`
   height: 30px;
+
   font-size: 2.5rem;
+  line-height: 3rem;
   text-align: center;
+
   border: none;
 
   &:focus {
@@ -194,7 +197,8 @@ const Button = styled.button`
   height: 36px;
 
   font-size: 1.5rem;
-  font-weight: 500;
+  font-weight: 700;
+  line-height: 1.8rem;
   letter-spacing: 1px;
 
   border-radius: 4px;

diff --git a/frontend/src/components/petPlant/PetPlantRegisterForm/index.tsx b/frontend/src/components/petPlant/PetPlantRegisterForm/index.tsx
@@ -52,7 +52,7 @@ const PetPlantRegisterForm = (props: PetPlantRegisterFormProps) => {
   const isValidForm = Object.values(form).every((value) => value !== '');
 
   const addToast = useAddToast();
-  const { mutate: registerPetPlant } = useRegisterPetPlant();
+  const { mutate: registerPetPlant, isPending } = useRegisterPetPlant();
 
   const setNickname = ({ target: { value } }: React.ChangeEvent<HTMLInputElement>) => {
     dispatch({ type: 'SET', key: 'nickname', maxLength: NUMBER.maxNicknameLength, value });
@@ -232,7 +232,7 @@ const PetPlantRegisterForm = (props: PetPlantRegisterFormProps) => {
         </Stack.Element>
         <Stack.Element height={STACK_ELEMENT_HEIGHT}>
           <Center>
-            <Button type="submit" disabled={!isValidForm}>
+            <Button type="submit" disabled={!isValidForm || isPending}>
               등록하기
             </Button>
           </Center>

diff --git a/frontend/src/components/petPlant/TimelineItemList/TimelineItemList.style.ts b/frontend/src/components/petPlant/TimelineItemList/TimelineItemList.style.ts
@@ -20,19 +20,21 @@ export const IconArea = styled.div`
 
   width: 16px;
   height: 100%;
-  margin-right: 12px;
-
-  font-size: 2rem;
+  margin-right: 8px;
 `;
 
 export const ItemHead = styled.p`
   font-size: 1.4rem;
+  line-height: 1.8rem;
   color: ${(props) => props.theme.color.sub};
 `;
 
 export const ItemContent = styled.p`
   display: flex;
   align-items: center;
+
   margin-top: 8px;
-  font-size: 1rem;
+
+  font-size: 1.2rem;
+  line-height: 1.6rem;
 `;
diff --git a/frontend/src/components/petPlant/TimelineItemList/index.tsx b/frontend/src/components/petPlant/TimelineItemList/index.tsx
@@ -54,7 +54,8 @@ const TimelineItemList = ({ timelineItemList }: TimelineItemListProps) => (
                 <ItemContent>
                   {hasPrevious && (
                     <>
-                      {previous}일 <SvgIcons icon="arrow-right-alt" color={theme.color.sub} />
+                      {previous}일
+                      <SvgIcons icon="arrow-right-alt" color={theme.color.sub} size={16} />
                     </>
                   )}
                   {current}일

diff --git a/frontend/src/components/search/SearchBox/SearchBox.style.ts b/frontend/src/components/search/SearchBox/SearchBox.style.ts
@@ -1,7 +1,7 @@
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 
-export const Wrapper = styled.div<{ $fontSize: string }>`
+export const Wrapper = styled.div<{ $fontSize: `${number}rem` }>`
   position: relative;
 
   display: flex;
@@ -10,6 +10,10 @@ export const Wrapper = styled.div<{ $fontSize: string }>`
   width: 100%;
 
   font-size: ${(props) => props.$fontSize};
+  line-height: ${(props) => {
+    const font = Number(props.$fontSize.slice(0, -3));
+    return `${Math.ceil(font * 1.2)}rem`;
+  }};
 `;
 
 export const InputBox = styled.div<{ $openBottom: boolean; $height: string }>`

diff --git a/frontend/src/components/search/SearchBox/index.tsx b/frontend/src/components/search/SearchBox/index.tsx
@@ -23,7 +23,7 @@ import theme from 'style/theme.style';
 interface SearchBoxProps {
   value: string;
   height?: `${number}px`;
-  fontSize?: string;
+  fontSize?: `${number}rem`;
   showResultSize?: number;
   onChangeValue: (value: string) => void;
   onResultClick?: (searchResult: DictionaryPlantNameSearchResult) => void;

diff --git a/frontend/src/pages/DictionaryPlantDetail/DictionaryPlantDetail.style.ts b/frontend/src/pages/DictionaryPlantDetail/DictionaryPlantDetail.style.ts
@@ -10,7 +10,6 @@ export const Main = styled.main`
 export const BackButton = styled.button`
   display: flex;
   align-items: center;
-  font-size: 2rem;
 `;
 
 export const BottomSheet = styled.div`
@@ -39,8 +38,7 @@ const Button = styled.button`
   height: 36px;
   padding: 0 1rem;
 
-  font-size: 1.5rem;
-  font-weight: 500;
+  font: 500 1.5rem/ 1.8rem NanumSquareRound;
   letter-spacing: 1px;
 
   border-radius: 4px;

diff --git a/frontend/src/pages/GardenPostList/GardenPostList.style.ts b/frontend/src/pages/GardenPostList/GardenPostList.style.ts
@@ -2,9 +2,11 @@ import { styled } from 'styled-components';
 
 export const Main = styled.main`
   position: relative;
+
   width: 100%;
   height: calc(100% - 90px);
-  padding: 8px;
+  margin-bottom: 70px;
+  padding: 85px 8px 8px 8px;
 `;
 
 export const List = styled.ul`

diff --git a/frontend/src/pages/GardenPostList/GardenPostListHeader/GardenPostListHeader.style.ts b/frontend/src/pages/GardenPostList/GardenPostListHeader/GardenPostListHeader.style.ts
@@ -1,13 +1,15 @@
 import { styled } from 'styled-components';
 
 export const Wrapper = styled.header`
-  position: sticky;
+  position: fixed;
   z-index: ${(props) => props.theme.zIndex.fixed};
   top: 0;
 
   display: flex;
   flex-direction: column;
 
+  width: 100%;
+  max-width: ${(props) => props.theme.width.pad};
   padding: 8px;
 
   background-color: ${(props) => props.theme.color.background};
@@ -27,7 +29,9 @@ export const FilterTag = styled.p`
   display: flex;
   column-gap: 4px;
   align-items: center;
+
   font-size: 1.4rem;
+  line-height: 1.8rem;
 `;
 
 export const DeleteFilterButton = styled.button`