From 5cad0bbf006273cde8e2ad4fdd827ba766535b9d Mon Sep 17 00:00:00 2001 From: Hailey <74346290+healim01@users.noreply.github.com> Date: Thu, 24 Oct 2024 15:07:05 +0900 Subject: [PATCH 1/2] =?UTF-8?q?[FE]=20public=20assets=20=EC=97=90=EB=9F=AC?= =?UTF-8?q?=20=EB=A1=9C=EA=B7=B8=20=EB=B0=8F=20og=20=EC=BB=A4=EB=B2=84=20?= =?UTF-8?q?=EB=B2=84=EA=B7=B8,=20=EA=B7=B8=EB=A6=AC=EA=B3=A0=20=EC=84=BC?= =?UTF-8?q?=ED=8A=B8=EB=A6=AC=20=EC=9E=91=EB=8F=99=20=EC=95=88=ED=95=A8=20?= =?UTF-8?q?=EC=9D=B4=EC=8A=88=EB=A5=BC=20=ED=95=B4=EA=B2=B0=ED=95=9C?= =?UTF-8?q?=EB=8B=A4.=20=20(#874)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/public/index.html | 12 ++++++------ frontend/src/apis/fetcher.ts | 6 +++++- frontend/src/pages/LandingPage.tsx | 3 ++- frontend/src/sentry.ts | 1 + frontend/webpack.common.js | 21 ++++++++++++++++++--- 5 files changed, 32 insertions(+), 11 deletions(-) diff --git a/frontend/public/index.html b/frontend/public/index.html index e538d0011..4e8d10c59 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -9,7 +9,7 @@ - + - - - - - + + + + + diff --git a/frontend/src/apis/fetcher.ts b/frontend/src/apis/fetcher.ts index 4cde556e8..48cf4bca7 100644 --- a/frontend/src/apis/fetcher.ts +++ b/frontend/src/apis/fetcher.ts @@ -1,3 +1,5 @@ +import { captureException } from '@sentry/react'; + import APIError from '@/apis/error/APIError'; import { deleteToken, postReissueAccessToken } from '@/apis/user'; import { API_ERROR_MESSAGE } from '@/constants/messages/apiErrorMessage'; @@ -38,7 +40,9 @@ const handleError = async (response: Response, requestProps: RequestProps) => { return handleUnauthorizedError(response, requestProps, errorCode); } - throw new APIError(response.status, errorCode); + const apiError = new APIError(response.status, errorCode); + captureException(apiError); + throw apiError; }; const handleUnauthorizedError = async (response: Response, requestProps: RequestProps, errorCode: string) => { diff --git a/frontend/src/pages/LandingPage.tsx b/frontend/src/pages/LandingPage.tsx index 240492e9d..f7c882dad 100644 --- a/frontend/src/pages/LandingPage.tsx +++ b/frontend/src/pages/LandingPage.tsx @@ -6,6 +6,7 @@ import FirstSection from '@/components/Landing/FirstSection'; import FourthSection from '@/components/Landing/FourthSection'; import SecondSection from '@/components/Landing/SecondSection'; import ThirdSection from '@/components/Landing/ThirdSection'; +import useAutoLogin from '@/hooks/useAutoLogin'; import useMoveSection from '@/hooks/useMoveSection'; import { flexColumn } from '@/styles/common'; import theme from '@/styles/theme'; @@ -38,7 +39,7 @@ const LandingPage = () => { const sectionRefs = useRef<(HTMLElement | null)[]>([]); const { handleSectionClick } = useMoveSection(sectionRefs); - // useAutoLogin(); + useAutoLogin(); return ( diff --git a/frontend/src/sentry.ts b/frontend/src/sentry.ts index 136655055..e04bc6f69 100644 --- a/frontend/src/sentry.ts +++ b/frontend/src/sentry.ts @@ -28,4 +28,5 @@ Sentry.init({ // plus for 100% of sessions with an error replaysSessionSampleRate: 0.1, replaysOnErrorSampleRate: 1.0, + enabled: process.env.API_ENV === 'production', }); diff --git a/frontend/webpack.common.js b/frontend/webpack.common.js index 6920d7294..654f48c8f 100644 --- a/frontend/webpack.common.js +++ b/frontend/webpack.common.js @@ -37,7 +37,7 @@ module.exports = { patterns: [ { from: 'src/assets/images/og', - to: 'images', + to: 'static/images', }, ], }), @@ -52,11 +52,26 @@ module.exports = { }, ], }, - { test: /\.(eot|ttf|woff|woff2)$/i, type: 'asset' }, - { test: /\.(png|jpg|gif|webp|mp4)/i, type: 'asset/resource' }, + { + test: /\.(eot|ttf|woff|woff2)$/i, + type: 'asset', + generator: { + filename: 'static/fonts/[name][ext]', + }, + }, + { + test: /\.(png|jpg|gif|webp|mp4)/i, + type: 'asset/resource', + generator: { + filename: 'static/images/[name][ext]', + }, + }, { test: /\.svg$/i, issuer: /\.[jt]sx?$/, + generator: { + filename: 'static/images/[name][ext]', + }, use: [ { loader: '@svgr/webpack', From d3b6e5082990c1a360353060c1f5e78795834622 Mon Sep 17 00:00:00 2001 From: Hyerin <125418818+ooherin@users.noreply.github.com> Date: Thu, 24 Oct 2024 15:12:05 +0900 Subject: [PATCH 2/2] =?UTF-8?q?[FE]=20=EB=9F=B0=EC=B9=AD=20UT=20=ED=94=BC?= =?UTF-8?q?=EB=93=9C=EB=B0=B1=EC=9D=84=20=EC=9D=BC=EB=B6=80=20=EB=B0=98?= =?UTF-8?q?=EC=98=81=ED=95=9C=EB=8B=A4.=20(UI=20=EA=B4=80=EB=A0=A8)=20(#88?= =?UTF-8?q?4)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/assets/assets.tsx | 1 - .../src/assets/icons/kakao/kakao-logo.svg | 2 +- frontend/src/assets/icons/map/search.svg | 2 +- .../components/ArticleList/ArticleCard.tsx | 4 ++ .../ChecklistList/ChecklistCard.tsx | 4 ++ .../components/ChecklistList/CustomBanner.tsx | 11 +++--- .../src/components/Landing/FirstSection.tsx | 9 +++-- .../Main/ChecklistCardContainer.tsx | 4 +- .../src/components/Main/ChecklistSection.tsx | 2 +- .../components/Main/ChecklistSectionTitle.tsx | 2 +- .../src/components/MyPage/FeatureSection.tsx | 2 +- .../src/components/MyPage/UserFeature.tsx | 1 + .../AddressModal/DaumAddressModal.tsx | 6 +-- .../AddressModal/RealTimeAddressModal.tsx | 4 +- .../ChecklistQuestion/ChecklistQuestion.tsx | 3 +- .../ChecklistQuestionTemplate.tsx | 19 +++++++--- .../ChecklistTab/NewChecklistTab.tsx | 14 ++++++- .../NewChecklist/MemoModal/MemoButton.tsx | 2 +- .../NewChecklist/NewRoomInfoForm/Address.tsx | 2 +- .../NewRoomInfoForm/RoomInfoTemplate.tsx | 38 ++++++++++--------- .../_common/Accordion/AccordionBody.tsx | 4 +- .../src/components/_common/Button/Button.tsx | 24 ++++++++---- .../components/_common/Divider/Divider.tsx | 4 +- .../components/_common/Dropdown/Dropdown.tsx | 2 + .../_common/FormField/FormField.tsx | 2 +- .../src/components/_common/Header/Header.tsx | 15 +++++--- .../src/components/_common/Input/Input.tsx | 4 +- .../_common/KakaoLogin/KakaoLoginButton.tsx | 2 +- .../src/components/_common/Tabs/TabButton.tsx | 19 ++++++---- frontend/src/components/_common/Tabs/Tabs.tsx | 2 + frontend/src/pages/ChecklistDetailPage.tsx | 7 ++-- frontend/src/pages/NewChecklistPage.tsx | 2 +- frontend/src/styles/common.ts | 4 ++ frontend/src/types/checklist.ts | 2 +- frontend/src/utils/authValidation.ts | 2 +- 35 files changed, 143 insertions(+), 84 deletions(-) diff --git a/frontend/src/assets/assets.tsx b/frontend/src/assets/assets.tsx index b842e2bc5..60cdffe81 100644 --- a/frontend/src/assets/assets.tsx +++ b/frontend/src/assets/assets.tsx @@ -16,7 +16,6 @@ import Retry from '@/assets/icons/common/retry.svg'; import SmallCheck from '@/assets/icons/common/small-check.svg'; import PlusBlack from '@/assets/icons/plusMinus/plus-black.svg'; import PlusWhite from '@/assets/icons/plusMinus/plus-white.svg'; - // room import Building from '@/assets/icons/room/building.svg'; import Calendar from '@/assets/icons/room/calendar.svg'; diff --git a/frontend/src/assets/icons/kakao/kakao-logo.svg b/frontend/src/assets/icons/kakao/kakao-logo.svg index d67677e39..a2a684a24 100644 --- a/frontend/src/assets/icons/kakao/kakao-logo.svg +++ b/frontend/src/assets/icons/kakao/kakao-logo.svg @@ -1,3 +1,3 @@ - + diff --git a/frontend/src/assets/icons/map/search.svg b/frontend/src/assets/icons/map/search.svg index 25f0c33c3..90af2c09a 100644 --- a/frontend/src/assets/icons/map/search.svg +++ b/frontend/src/assets/icons/map/search.svg @@ -1,3 +1,3 @@ - + diff --git a/frontend/src/components/ArticleList/ArticleCard.tsx b/frontend/src/components/ArticleList/ArticleCard.tsx index 03a74c7eb..e49b0054d 100644 --- a/frontend/src/components/ArticleList/ArticleCard.tsx +++ b/frontend/src/components/ArticleList/ArticleCard.tsx @@ -47,6 +47,10 @@ const S = { background-color: ${({ theme }) => theme.palette.white}; ${boxShadow}; cursor: pointer; + + :hover { + background-color: ${({ theme }) => theme.palette.grey200}; + } `, Keyword: styled.span<{ bgColor: string }>` padding: 0.4rem 0.8rem; diff --git a/frontend/src/components/ChecklistList/ChecklistCard.tsx b/frontend/src/components/ChecklistList/ChecklistCard.tsx index 70712ab8b..c7ea9566d 100644 --- a/frontend/src/components/ChecklistList/ChecklistCard.tsx +++ b/frontend/src/components/ChecklistList/ChecklistCard.tsx @@ -58,6 +58,10 @@ const S = { background-color: ${({ theme }) => theme.palette.white}; ${boxShadow}; cursor: pointer; + + :hover { + background-color: ${({ theme }) => theme.palette.grey200}; + } `, Row: styled.div` ${flexSpaceBetween} diff --git a/frontend/src/components/ChecklistList/CustomBanner.tsx b/frontend/src/components/ChecklistList/CustomBanner.tsx index d9eaf3f57..ef092a01e 100644 --- a/frontend/src/components/ChecklistList/CustomBanner.tsx +++ b/frontend/src/components/ChecklistList/CustomBanner.tsx @@ -1,6 +1,7 @@ import styled from '@emotion/styled'; import { PencilIcon } from '@/assets/assets'; +import Button from '@/components/_common/Button/Button'; import { boxShadow, flexCenter, flexRow } from '@/styles/common'; interface Props { @@ -12,9 +13,9 @@ const CustomBanner = ({ onClick }: Props) => { - 체크리스트 질문 선택하기 + 체크리스트 질문 템플릿 - 편집하기 + ); }; @@ -46,15 +47,15 @@ const S = { Title: styled.span` ${flexCenter} `, - Button: styled.button` - padding: 0.4rem 0.8rem; + Button: styled(Button)` + padding: 0.6rem 1rem; background-color: ${({ theme }) => theme.palette.green500}; color: ${({ theme }) => theme.palette.white}; border-radius: 0.8rem; - font-size: ${({ theme }) => theme.text.size.xSmall}; + font-size: ${({ theme }) => theme.text.size.small}; cursor: pointer; `, diff --git a/frontend/src/components/Landing/FirstSection.tsx b/frontend/src/components/Landing/FirstSection.tsx index 71ad999b6..aa0c4d1dc 100644 --- a/frontend/src/components/Landing/FirstSection.tsx +++ b/frontend/src/components/Landing/FirstSection.tsx @@ -80,10 +80,12 @@ const S = { } `, BasicLoginButton: styled(Button)` + height: 4.5rem; + background-color: ${({ theme }) => theme.palette.green500}; - border-radius: 1rem; color: ${({ theme }) => theme.palette.white}; + border-radius: 0.8rem; `, CheckRelativeText: styled.span` @@ -107,8 +109,9 @@ const S = { } `, Button: styled(Button)` - height: 5rem; - border-radius: 1rem; + border-radius: 0.8rem; + + height: 4.5rem; `, LogoBox: styled.div` width: 100%; diff --git a/frontend/src/components/Main/ChecklistCardContainer.tsx b/frontend/src/components/Main/ChecklistCardContainer.tsx index bd3630e62..235a8d135 100644 --- a/frontend/src/components/Main/ChecklistCardContainer.tsx +++ b/frontend/src/components/Main/ChecklistCardContainer.tsx @@ -26,7 +26,7 @@ const ChecklistCardContainer = () => { .map((checklist: ChecklistPreview, index: number) => ( ))} - + ); }; @@ -39,6 +39,6 @@ const S = { padding: 1.8rem 4.8rem; border-radius: 0.8rem; - background-color: ${({ theme }) => theme.palette.grey50}; + background-color: ${({ theme }) => theme.palette.grey100}; `, }; diff --git a/frontend/src/components/Main/ChecklistSection.tsx b/frontend/src/components/Main/ChecklistSection.tsx index 55e6c19b2..2ba811f4e 100644 --- a/frontend/src/components/Main/ChecklistSection.tsx +++ b/frontend/src/components/Main/ChecklistSection.tsx @@ -22,7 +22,7 @@ const ChecklistSection = () => { 방 둘러볼 때 꼭 필요한 체크리스트 - }> + }> diff --git a/frontend/src/components/Main/ChecklistSectionTitle.tsx b/frontend/src/components/Main/ChecklistSectionTitle.tsx index 14c7de81e..5718f6d9e 100644 --- a/frontend/src/components/Main/ChecklistSectionTitle.tsx +++ b/frontend/src/components/Main/ChecklistSectionTitle.tsx @@ -7,7 +7,7 @@ const ChecklistSectionTitle = () => { const { data: checklistList } = useGetChecklistListQuery(); return ( - 나의 체크리스트 {checklistList?.length} + 내가 둘러본 방 {checklistList?.length} ); }; diff --git a/frontend/src/components/MyPage/FeatureSection.tsx b/frontend/src/components/MyPage/FeatureSection.tsx index de2b4e0fc..a890f9698 100644 --- a/frontend/src/components/MyPage/FeatureSection.tsx +++ b/frontend/src/components/MyPage/FeatureSection.tsx @@ -6,7 +6,7 @@ import UserFeature from '@/components/MyPage/UserFeature'; const FeatureSection = () => { return ( - ; + ); }; diff --git a/frontend/src/components/MyPage/UserFeature.tsx b/frontend/src/components/MyPage/UserFeature.tsx index 8969b629c..3dc9e67bd 100644 --- a/frontend/src/components/MyPage/UserFeature.tsx +++ b/frontend/src/components/MyPage/UserFeature.tsx @@ -105,6 +105,7 @@ const S = { `, TextButton: styled.button` width: fit-content; + margin-top: 1rem; color: ${({ theme }) => theme.palette.grey500}; font-size: ${({ theme }) => theme.text.size.xxSmall}; diff --git a/frontend/src/components/NewChecklist/AddressModal/DaumAddressModal.tsx b/frontend/src/components/NewChecklist/AddressModal/DaumAddressModal.tsx index 4ddb7ced6..8ba2024b2 100644 --- a/frontend/src/components/NewChecklist/AddressModal/DaumAddressModal.tsx +++ b/frontend/src/components/NewChecklist/AddressModal/DaumAddressModal.tsx @@ -54,7 +54,7 @@ const DaumAddressModal = () => { label="주소 검색" size="full" isSquare={true} - color="dark" + color="light" Icon={Search} /> @@ -72,10 +72,10 @@ export default DaumAddressModal; const S = { AddressButton: styled(Button)` width: 50%; - height: 4.2rem; + height: 4.5rem; padding: 0.4rem; - font-size: ${({ theme }) => theme.text.size.xSmall}; + font-size: ${({ theme }) => theme.text.size.small}; `, EmptyBox: styled.div` width: 100%; diff --git a/frontend/src/components/NewChecklist/AddressModal/RealTimeAddressModal.tsx b/frontend/src/components/NewChecklist/AddressModal/RealTimeAddressModal.tsx index 65736af77..624fce6b1 100644 --- a/frontend/src/components/NewChecklist/AddressModal/RealTimeAddressModal.tsx +++ b/frontend/src/components/NewChecklist/AddressModal/RealTimeAddressModal.tsx @@ -91,10 +91,10 @@ export default RealTimeAddressModal; const S = { AddressButton: styled(Button)` width: 50%; - height: 4.2rem; + height: 4.5rem; padding: 0.4rem; - font-size: ${({ theme }) => theme.text.size.xSmall}; + font-size: ${({ theme }) => theme.text.size.small}; `, AddressText: styled.span` ${title4} diff --git a/frontend/src/components/NewChecklist/ChecklistQuestion/ChecklistQuestion.tsx b/frontend/src/components/NewChecklist/ChecklistQuestion/ChecklistQuestion.tsx index 2637e33f3..ed0ff21e4 100644 --- a/frontend/src/components/NewChecklist/ChecklistQuestion/ChecklistQuestion.tsx +++ b/frontend/src/components/NewChecklist/ChecklistQuestion/ChecklistQuestion.tsx @@ -36,12 +36,11 @@ const S = { ${flexRow} ${flexSpaceBetween} padding: 1.6rem; - gap: 0.5rem; + border-radius: 0.8rem; box-sizing: border-box; background-color: ${({ theme }) => theme.palette.white}; - border-radius: 0.8rem; `, Question: styled.div` display: flex; diff --git a/frontend/src/components/NewChecklist/ChecklistQuestion/ChecklistQuestionTemplate.tsx b/frontend/src/components/NewChecklist/ChecklistQuestion/ChecklistQuestionTemplate.tsx index 200a37cc3..1052e34f6 100644 --- a/frontend/src/components/NewChecklist/ChecklistQuestion/ChecklistQuestionTemplate.tsx +++ b/frontend/src/components/NewChecklist/ChecklistQuestion/ChecklistQuestionTemplate.tsx @@ -1,5 +1,6 @@ import styled from '@emotion/styled'; +import Divider from '@/components/_common/Divider/Divider'; import Layout from '@/components/_common/layout/Layout'; import { useTabContext } from '@/components/_common/Tabs/TabContext'; import ChecklistQuestionItem from '@/components/NewChecklist/ChecklistQuestion/ChecklistQuestion'; @@ -19,13 +20,21 @@ const ChecklistQuestionTemplate = () => { return ( - {questions?.questions.map((question: ChecklistQuestion) => { + {questions?.questions.map((question: ChecklistQuestion, index) => { const answer = checklistActions.getQuestionAnswer({ categoryId: currentTabId, questionId: question.questionId, }); + const isLastQuestion = questions?.questions.length - 1 === index; return ( - + <> + + {!isLastQuestion && } + ); })} @@ -39,12 +48,12 @@ const S = { ContentBox: styled.div` ${flexColumn} margin-bottom: 2rem; + border-radius: 0.8rem; - background-color: ${({ theme }) => theme.palette.background}; - gap: 1rem; + background-color: ${({ theme }) => theme.palette.white}; + gap: 0.2rem; `, QuestionBox: styled.div` background-color: ${({ theme }) => theme.palette.white}; - border-radius: 0.8rem; `, }; diff --git a/frontend/src/components/NewChecklist/ChecklistTab/NewChecklistTab.tsx b/frontend/src/components/NewChecklist/ChecklistTab/NewChecklistTab.tsx index 078deb92c..2b21ec237 100644 --- a/frontend/src/components/NewChecklist/ChecklistTab/NewChecklistTab.tsx +++ b/frontend/src/components/NewChecklist/ChecklistTab/NewChecklistTab.tsx @@ -1,6 +1,8 @@ +import styled from '@emotion/styled'; import { useMemo } from 'react'; import ChecklistTabFallback from '@/components/_common/errorBoundary/ChecklistTabFallback'; +import FlexBox from '@/components/_common/FlexBox/FlexBox'; import Tabs from '@/components/_common/Tabs/Tabs'; import useInitialChecklist from '@/hooks/useInitialChecklist'; import useTabs from '@/hooks/useTabs'; @@ -20,7 +22,17 @@ const NewChecklistTab = () => { if (isLoading) return ; - return ; + return ( + + + + + ); }; +const S = { + Box: styled.div` + height: 0.5rem; + `, +}; export default NewChecklistTab; diff --git a/frontend/src/components/NewChecklist/MemoModal/MemoButton.tsx b/frontend/src/components/NewChecklist/MemoModal/MemoButton.tsx index 002ccc028..b85507f84 100644 --- a/frontend/src/components/NewChecklist/MemoModal/MemoButton.tsx +++ b/frontend/src/components/NewChecklist/MemoModal/MemoButton.tsx @@ -48,6 +48,6 @@ const S = { outline: none; cursor: pointer; - background-color: ${({ theme }) => theme.palette.yellow500}; + background-color: ${({ theme }) => theme.palette.grey200}; `, }; diff --git a/frontend/src/components/NewChecklist/NewRoomInfoForm/Address.tsx b/frontend/src/components/NewChecklist/NewRoomInfoForm/Address.tsx index efd6ffef9..e321c5ef6 100644 --- a/frontend/src/components/NewChecklist/NewRoomInfoForm/Address.tsx +++ b/frontend/src/components/NewChecklist/NewRoomInfoForm/Address.tsx @@ -18,7 +18,7 @@ const Address = () => { ) : ( )} - + {/*실시간 위치 모달*/} {/*주소 찾기 모달*/} diff --git a/frontend/src/components/NewChecklist/NewRoomInfoForm/RoomInfoTemplate.tsx b/frontend/src/components/NewChecklist/NewRoomInfoForm/RoomInfoTemplate.tsx index a24bc174c..16353aa4b 100644 --- a/frontend/src/components/NewChecklist/NewRoomInfoForm/RoomInfoTemplate.tsx +++ b/frontend/src/components/NewChecklist/NewRoomInfoForm/RoomInfoTemplate.tsx @@ -2,6 +2,7 @@ import styled from '@emotion/styled'; import { ErrorBoundary } from 'react-error-boundary'; import Layout from '@/components/_common/layout/Layout'; +import FocusTrap from '@/components/_common/Modal/FocusTrap/FocusTrap'; import Address from '@/components/NewChecklist/NewRoomInfoForm/Address'; import DepositAndRent from '@/components/NewChecklist/NewRoomInfoForm/DepositAndRent'; import IncludedMaintenances from '@/components/NewChecklist/NewRoomInfoForm/IncludedMaintenances'; @@ -25,22 +26,24 @@ const RoomInfoTemplate = () => { return ( - - - - -
- - - - - - - - - - - + + + + + +
+ + + + + + + + + + + + ); }; @@ -49,8 +52,7 @@ const S = { Container: styled.div` ${flexColumn} justify-content: start; - row-gap: 2rem; - + row-gap: 1.5rem; margin-bottom: 2rem; `, }; diff --git a/frontend/src/components/_common/Accordion/AccordionBody.tsx b/frontend/src/components/_common/Accordion/AccordionBody.tsx index 0aea0f5fe..df14b0dc3 100644 --- a/frontend/src/components/_common/Accordion/AccordionBody.tsx +++ b/frontend/src/components/_common/Accordion/AccordionBody.tsx @@ -34,10 +34,10 @@ const AccordionBody = ({ children, id }: Props) => { const S = { Container: styled.div<{ isOpen: boolean; maxHeight: number }>` overflow: hidden; - margin-top: 1rem; + margin: 1rem 0 0.5rem; max-height: ${({ maxHeight }) => maxHeight}px; transition: max-height 0.4s cubic-bezier(0.15, 0.1, 0.25, 1); - border-radius: 1.2rem; + border-radius: 0.8rem; background-color: ${({ theme }) => theme.palette.white}; `, diff --git a/frontend/src/components/_common/Button/Button.tsx b/frontend/src/components/_common/Button/Button.tsx index 4fa976c4d..0a88bd4e7 100644 --- a/frontend/src/components/_common/Button/Button.tsx +++ b/frontend/src/components/_common/Button/Button.tsx @@ -3,11 +3,11 @@ import styled from '@emotion/styled'; import { FunctionComponent, SVGProps } from 'react'; import FlexBox from '@/components/_common/FlexBox/FlexBox'; -import { flexCenter, title4 } from '@/styles/common'; +import { flexCenter, title3, title4 } from '@/styles/common'; import theme from '@/styles/theme'; type ButtonSize = 'xSmall' | 'small' | 'medium' | 'full'; -type ColorOption = 'light' | 'dark' | 'disabled'; +type ColorOption = 'light' | 'dark' | 'primary' | 'disabled'; type ButtonType = 'button' | 'submit' | 'reset'; interface Props extends React.HTMLAttributes { @@ -75,7 +75,7 @@ const S = { `, Text: styled.span<{ size: ButtonSize }>` ${flexCenter} - min-width: ${({ size }) => size === 'full' && 8}rem; + min-width: ${({ size }) => (size === 'full' ? '10rem' : '3rem')}; `, }; @@ -100,6 +100,16 @@ const ColorStyles = { background-color: ${theme.palette.black}; } `, + primary: css` + background-color: ${theme.palette.yellow500}; + + color: ${theme.palette.grey600}; + + &:hover, + &:active { + background-color: ${theme.palette.yellow600}; + } + `, disabled: css` background-color: ${theme.palette.grey200}; @@ -109,16 +119,16 @@ const ColorStyles = { const sizeStyles = { xSmall: css` - padding: 0.8rem 1.5rem; + padding: 0.8rem 1.2rem; ${title4} min-width: 7rem; `, small: css` - padding: 1rem 2rem; - ${title4} + padding: 1rem 1.6rem; + ${title3} `, medium: css` - padding: 1rem 4rem; + padding: 1rem 1.8rem; ${title4} `, full: css` diff --git a/frontend/src/components/_common/Divider/Divider.tsx b/frontend/src/components/_common/Divider/Divider.tsx index 0ccdf29c7..38001c22f 100644 --- a/frontend/src/components/_common/Divider/Divider.tsx +++ b/frontend/src/components/_common/Divider/Divider.tsx @@ -25,10 +25,10 @@ const LINE_STYLE = { border-width: 0.1rem; `, vertical: css` - border-left: solid ${theme.palette.grey200}; + border-left: solid ${theme.palette.grey100}; `, horizontal: css` - border-bottom: solid ${theme.palette.grey200}; + border-bottom: solid ${theme.palette.grey100}; `, }; diff --git a/frontend/src/components/_common/Dropdown/Dropdown.tsx b/frontend/src/components/_common/Dropdown/Dropdown.tsx index da6f239c7..acb7914d1 100644 --- a/frontend/src/components/_common/Dropdown/Dropdown.tsx +++ b/frontend/src/components/_common/Dropdown/Dropdown.tsx @@ -53,6 +53,8 @@ const S = { Wrapper: styled.div` flex: 0 0 auto; position: relative; + + background-color: ${({ theme }) => theme.palette.white}; `, DropDownHeader: styled.div` width: 12.5rem; diff --git a/frontend/src/components/_common/FormField/FormField.tsx b/frontend/src/components/_common/FormField/FormField.tsx index df10b0fda..7c4f632d3 100644 --- a/frontend/src/components/_common/FormField/FormField.tsx +++ b/frontend/src/components/_common/FormField/FormField.tsx @@ -63,7 +63,7 @@ const S = { `, TextBox: styled.div` width: 100%; - height: 3rem; + height: 2rem; padding: 0.6rem 1rem; box-sizing: border-box; diff --git a/frontend/src/components/_common/Header/Header.tsx b/frontend/src/components/_common/Header/Header.tsx index 5aa078aad..e1cbde580 100644 --- a/frontend/src/components/_common/Header/Header.tsx +++ b/frontend/src/components/_common/Header/Header.tsx @@ -5,7 +5,7 @@ import { Link, useNavigate } from 'react-router-dom'; import { ArrowBack, BangGgoodTextIcon } from '@/assets/assets'; import { ROUTE_PATH } from '@/constants/routePath'; import { HEADER_SIZE } from '@/constants/style'; -import { flexCenter, title3 } from '@/styles/common'; +import { flexCenter, title2, title3 } from '@/styles/common'; interface Props extends React.HTMLAttributes { left?: ReactNode; @@ -19,9 +19,9 @@ const HeaderWrapper = ({ left, right, center, isTransparent = false, ...rest }: <> - {left ? left :
} - {center ? center :
} - {right ? right :
} + {left && {left}} + {center &&
{center}
} + {right && {right}} {!isTransparent && } @@ -39,7 +39,7 @@ const S = { z-index: ${({ theme }) => theme.zIndex.HEADER}; width: 100%; height: ${HEADER_SIZE}rem; - padding: 2rem 1.6rem 1.2rem; + padding: 1rem 0.8rem; background-color: ${({ theme, isTransparent }) => (isTransparent ? 'rgba(255,255,255, 0.3)' : theme.palette.white)}; @@ -52,10 +52,13 @@ const S = { display: flex; flex-direction: row; width: 100%; + height: 100%; `, Left: styled.div` display: flex; justify-content: flex-start; + align-items: center; + min-width: 70px; `, Center: styled.div` ${flexCenter} @@ -73,7 +76,7 @@ const S = { box-sizing: content-box; color: ${({ theme }) => theme.palette.black}; - ${title3} + ${title2} `, }; diff --git a/frontend/src/components/_common/Input/Input.tsx b/frontend/src/components/_common/Input/Input.tsx index fe587a107..52528cc14 100644 --- a/frontend/src/components/_common/Input/Input.tsx +++ b/frontend/src/components/_common/Input/Input.tsx @@ -36,10 +36,10 @@ interface StyledProps extends React.InputHTMLAttributes { const S = { Input: styled.input` width: ${({ width }) => width}; - height: 4rem; + height: 5rem; padding: 0.6rem 1.1rem; border: 0.2rem solid ${({ $color, theme }) => ($color ? $color : theme.palette.grey200)}; - border-radius: 0.4rem; + border-radius: 0.8rem; color: ${({ $color, theme }) => ($color ? $color : theme.palette.grey600)}; font-size: ${({ theme }) => theme.text.size.medium}; diff --git a/frontend/src/components/_common/KakaoLogin/KakaoLoginButton.tsx b/frontend/src/components/_common/KakaoLogin/KakaoLoginButton.tsx index 5bee15446..34aef7a27 100644 --- a/frontend/src/components/_common/KakaoLogin/KakaoLoginButton.tsx +++ b/frontend/src/components/_common/KakaoLogin/KakaoLoginButton.tsx @@ -26,7 +26,7 @@ export default KakaoLoginButton; const S = { KakaoLoginButton: styled.div` width: 100%; - height: 5rem; + height: 4.5rem; ${flexRow} gap: 1rem; justify-content: center; diff --git a/frontend/src/components/_common/Tabs/TabButton.tsx b/frontend/src/components/_common/Tabs/TabButton.tsx index c4cc36148..52031bdf7 100644 --- a/frontend/src/components/_common/Tabs/TabButton.tsx +++ b/frontend/src/components/_common/Tabs/TabButton.tsx @@ -4,7 +4,7 @@ import styled from '@emotion/styled'; import React, { forwardRef } from 'react'; import { trackTabButton } from '@/service/amplitude/trackEvent'; -import { flexCenter, title3 } from '@/styles/common'; +import { flexCenter } from '@/styles/common'; import { Tab } from '@/types/tab'; interface Props extends Tab { @@ -45,19 +45,24 @@ const S = { Container: styled.div<{ active: boolean }>` position: relative; z-index: ${({ theme }) => theme.zIndex.TABS}; + ${flexCenter}; - margin-top: 1rem; padding: 1rem 1.6rem; + border: ${({ active, theme }) => `.2rem solid ${active ? theme.palette.yellow300 : theme.palette.background}`}; + + background-color: ${({ theme, active }) => (active ? theme.palette.yellow100 : theme.palette.background)}; + + border-radius: 10px; color: ${({ theme, active }) => (active ? theme.palette.yellow600 : theme.palette.black)}; - font-weight: ${({ theme }) => theme.text.weight.bold}; cursor: pointer; - border-bottom: ${({ active, theme }) => - active ? `.3rem solid ${theme.palette.yellow400}` : `.3rem solid ${theme.palette.yellow100}`}; + + font-weight: 600; `, TextBox: styled.div` - ${title3} display: flex; + + font-size: 1.8rem; align-items: center; gap: 0.5rem; `, @@ -69,7 +74,7 @@ const S = { height: 0.5rem; margin-left: 0.8rem; - background-color: ${({ theme }) => theme.palette.grey400}; + background-color: ${({ theme }) => theme.palette.grey300}; border-radius: 50%; `, }; diff --git a/frontend/src/components/_common/Tabs/Tabs.tsx b/frontend/src/components/_common/Tabs/Tabs.tsx index 1de8e3c72..cb97f560b 100644 --- a/frontend/src/components/_common/Tabs/Tabs.tsx +++ b/frontend/src/components/_common/Tabs/Tabs.tsx @@ -100,5 +100,7 @@ const S = { `, FlexContainer: styled.div` display: inline-flex; + gap: 1rem; + margin: 1rem 1.6rem; `, }; diff --git a/frontend/src/pages/ChecklistDetailPage.tsx b/frontend/src/pages/ChecklistDetailPage.tsx index 51c008c1c..e73f48c5d 100644 --- a/frontend/src/pages/ChecklistDetailPage.tsx +++ b/frontend/src/pages/ChecklistDetailPage.tsx @@ -2,6 +2,7 @@ import styled from '@emotion/styled'; import { ErrorBoundary } from 'react-error-boundary'; import { useNavigate, useParams } from 'react-router-dom'; +import Button from '@/components/_common/Button/Button'; import ListErrorFallback from '@/components/_common/errorBoundary/ListErrorFallback'; import FlexBox from '@/components/_common/FlexBox/FlexBox'; import Header from '@/components/_common/Header/Header'; @@ -50,10 +51,8 @@ const ChecklistDetailPage = () => { left={} right={ - - 편집 - - 삭제 +