diff --git a/frontend/src/components/@common/CheckButton/CheckButton.style.ts b/frontend/src/components/@common/CheckButton/CheckButton.style.ts index 053a9ae1a..64ab5be4c 100644 --- 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 index 3d324403c..a00f16695 100644 --- 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 index 862f2458f..3fb1e8f09 100644 --- 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 index 828afbe82..07503ba23 100644 --- 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(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 && ( diff --git a/frontend/src/components/@common/Navbar/Navbar.style.ts b/frontend/src/components/@common/Navbar/Navbar.style.ts index 471073a7d..40f89e028 100644 --- 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 index 334b19b3b..7a7de1f9b 100644 --- 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 index 93fc9ffba..c65aca035 100644 --- 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(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 ( - + { {isOpen && ( <> - + {options.map((option) => { const selectOnClick = () => select(option); const selectOnEnterOrSpace = ({ key }: React.KeyboardEvent) => { diff --git a/frontend/src/components/@common/Toast/Toast.style.ts b/frontend/src/components/@common/Toast/Toast.style.ts index 151abd6be..226e3d1df 100644 --- 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 index 4aaf4285a..c3a4646d9 100644 --- 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,6 +55,9 @@ 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` @@ -61,19 +65,13 @@ export const DictionaryPlantName = styled.p` 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 index 9b84baf24..d432bf7f7 100644 --- 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} {dictionaryPlantName} - +

D+{daySince} - +

diff --git a/frontend/src/components/petPlant/PetPlantDetail/PetPlantDetail.style.ts b/frontend/src/components/petPlant/PetPlantDetail/PetPlantDetail.style.ts index caf17d441..b6fb5430b 100644 --- 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 index 994de24e7..cb9a84df9 100644 --- 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 index 919a412cc..ed07cf4e9 100644 --- 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) => { dispatch({ type: 'SET', key: 'nickname', maxLength: NUMBER.maxNicknameLength, value }); @@ -232,7 +232,7 @@ const PetPlantRegisterForm = (props: PetPlantRegisterFormProps) => {
-
diff --git a/frontend/src/components/petPlant/TimelineItemList/TimelineItemList.style.ts b/frontend/src/components/petPlant/TimelineItemList/TimelineItemList.style.ts index 50188e8f5..7f49272fb 100644 --- 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 index 23155d5a4..cb9c50195 100644 --- a/frontend/src/components/petPlant/TimelineItemList/index.tsx +++ b/frontend/src/components/petPlant/TimelineItemList/index.tsx @@ -54,7 +54,8 @@ const TimelineItemList = ({ timelineItemList }: TimelineItemListProps) => ( {hasPrevious && ( <> - {previous}일 + {previous}일 + )} {current}일 diff --git a/frontend/src/components/search/SearchBox/SearchBox.style.ts b/frontend/src/components/search/SearchBox/SearchBox.style.ts index 30b18b7c5..2fc173005 100644 --- 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 index c65c3d563..a737c28d2 100644 --- 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 index e24224f75..4f6d56869 100644 --- 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 index 1ae2f08dc..ff301817f 100644 --- 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 index fe4c633fd..03bec343f 100644 --- 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` diff --git a/frontend/src/pages/GardenRegister/Form/FormSection/FormSection.style.ts b/frontend/src/pages/GardenRegister/Form/FormSection/FormSection.style.ts index e85e73d68..e47a26e96 100644 --- a/frontend/src/pages/GardenRegister/Form/FormSection/FormSection.style.ts +++ b/frontend/src/pages/GardenRegister/Form/FormSection/FormSection.style.ts @@ -10,8 +10,7 @@ export const Tag = styled.span` margin-right: 10px; padding: 8px 12px; - font-size: 1.2rem; - font-weight: 500; + font: 500 1.2rem/1.6rem NanumSquareRound; color: ${({ theme: { color } }) => color.sub}; background-repeat: no-repeat; @@ -60,12 +59,14 @@ export const StyledForm = styled.form` export const Question = styled.p` margin-bottom: 15px; font-size: 1.4rem; + line-height: 1.8rem; `; export const QuestionLabel = styled.label` display: block; margin-bottom: 15px; font-size: 1.4rem; + line-height: 1.8rem; `; export const TextArea = styled.textarea` @@ -82,6 +83,7 @@ export const TextArea = styled.textarea` export const TextLengthNotice = styled.p` margin-top: 10px; font-size: 1.2rem; + line-height: 1.5rem; text-align: right; `; diff --git a/frontend/src/pages/GardenRegister/Form/Profile/Profile.style.ts b/frontend/src/pages/GardenRegister/Form/Profile/Profile.style.ts index 6a5840ee2..202b51da2 100644 --- a/frontend/src/pages/GardenRegister/Form/Profile/Profile.style.ts +++ b/frontend/src/pages/GardenRegister/Form/Profile/Profile.style.ts @@ -87,6 +87,7 @@ export const EnvironmentItem = styled.p` width: 100%; font-size: 1.2rem; + line-height: 1.5rem; `; export const EnvironmentTitle = styled.span` @@ -109,6 +110,8 @@ export const StyledLink = styled(Link)` margin-top: 10px; margin-right: 5%; + font-size: 1.2rem; + line-height: 1.5rem; text-align: end; text-decoration: underline; `; diff --git a/frontend/src/pages/GardenRegister/Pick/PetPlantPicker.style.ts b/frontend/src/pages/GardenRegister/Pick/PetPlantPicker.style.ts index c10fe78a7..7a147a77a 100644 --- a/frontend/src/pages/GardenRegister/Pick/PetPlantPicker.style.ts +++ b/frontend/src/pages/GardenRegister/Pick/PetPlantPicker.style.ts @@ -2,7 +2,9 @@ import { styled } from 'styled-components'; export const SubTitle = styled.h3` margin-top: 30px; + font-size: 1.8rem; font-weight: 500; + line-height: 2.2rem; text-align: center; `; diff --git a/frontend/src/pages/Main/Main.style.tsx b/frontend/src/pages/Main/Main.style.tsx index 506d0be4d..3c55fdec1 100644 --- a/frontend/src/pages/Main/Main.style.tsx +++ b/frontend/src/pages/Main/Main.style.tsx @@ -14,8 +14,10 @@ export const Wrapper = styled.div` export const LogoMessage = styled.p` margin-top: 15vh; + font-size: 2.4rem; - font-weight: 500; + font-weight: 900; + line-height: 3rem; color: ${(props) => props.theme.color.primary}; `; @@ -38,8 +40,11 @@ export const bounce = keyframes` export const SearchMessage = styled.p` margin-top: 40px; + font-size: 1.6rem; - color: #333333; + line-height: 2rem; + color: ${({ theme }) => theme.color.sub}; + animation: ${bounce} 6s infinite; `; diff --git a/frontend/src/pages/NewDictionaryPlantRequest/Form/Form.style.ts b/frontend/src/pages/NewDictionaryPlantRequest/Form/Form.style.ts index f5a851f68..2c6541c69 100644 --- a/frontend/src/pages/NewDictionaryPlantRequest/Form/Form.style.ts +++ b/frontend/src/pages/NewDictionaryPlantRequest/Form/Form.style.ts @@ -67,6 +67,7 @@ export const SubmitButton = styled.button` font-size: 2rem; font-weight: 700; + line-height: 2.4rem; color: ${({ theme }) => theme.color.background}; letter-spacing: 1px; diff --git a/frontend/src/pages/PetPlantCardList/PetPlantCardList.style.ts b/frontend/src/pages/PetPlantCardList/PetPlantCardList.style.ts index bc583ff62..476822fe8 100644 --- a/frontend/src/pages/PetPlantCardList/PetPlantCardList.style.ts +++ b/frontend/src/pages/PetPlantCardList/PetPlantCardList.style.ts @@ -32,6 +32,7 @@ export const RegisterButton = styled.button` height: 224px; font-size: 3.6rem; + line-height: 4.2rem; color: ${(props) => props.theme.color.primary}; background: ${(props) => props.theme.color.background}; diff --git a/frontend/src/pages/PetPlantRegister/Form/Form.style.ts b/frontend/src/pages/PetPlantRegister/Form/Form.style.ts index 143c4e945..c342570ef 100644 --- a/frontend/src/pages/PetPlantRegister/Form/Form.style.ts +++ b/frontend/src/pages/PetPlantRegister/Form/Form.style.ts @@ -22,7 +22,6 @@ export const Header = styled.header` export const BackLink = styled(Link)` display: flex; align-items: center; - font-size: 2rem; `; export const Main = styled.main` @@ -38,6 +37,7 @@ export const Main = styled.main` export const DictionaryPlantName = styled.p` font-size: 3rem; + line-height: 3.6rem; `; export const DictionaryPlantButton = styled.button` diff --git a/frontend/src/pages/PetPlantRegister/Search/Search.style.ts b/frontend/src/pages/PetPlantRegister/Search/Search.style.ts index f8936d087..478182572 100644 --- a/frontend/src/pages/PetPlantRegister/Search/Search.style.ts +++ b/frontend/src/pages/PetPlantRegister/Search/Search.style.ts @@ -14,6 +14,7 @@ export const Wrapper = styled.main` export const Message = styled.p` margin-top: 20%; font-size: 3rem; + line-height: 3.6rem; `; export const SearchBoxArea = styled.div` diff --git a/frontend/src/style/Global.style.ts b/frontend/src/style/Global.style.ts index ad2ced8a3..1fb6ad4d3 100644 --- a/frontend/src/style/Global.style.ts +++ b/frontend/src/style/Global.style.ts @@ -17,6 +17,7 @@ export const GlobalStyle = createGlobalStyle` html, body { scrollbar-width: none; + width: 100%; font-size: 62.5%; }