From c8ac7d71f247e4a22869d200b7cad6f4fc51a235 Mon Sep 17 00:00:00 2001 From: halang Date: Fri, 23 Aug 2024 00:27:51 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20=EC=9D=B4=EA=B2=83=EC=A0=80=EA=B2=83=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=20(#47)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 설문 링크로 변경 * 통계기능 준비중 표시 * CarouselPrevious, CarouselNext 삭제 * naming 페이지 버튼명 확인으로 수정 * 고양이 이름 getErrorMessage 수정 * 빈칸 조건문 수정 * 카테고리 변경 후 토스트 띄우기 & 설정해준 고양이 이름으로 표시하기 * 카테고리 변경시 토스트창 * 집중 페이지 > 휴식하기 버튼 색 변하도록 * 하단 버튼 css 수정 * return "" 으로 수정 * updateCategory mutate로 변경 * categoryNo 없으면 mutate안보내도록 * iconName과 iconClassName 으로 받도록 수정 * 통계 사진 변경 * getErrorMessage 수정 --- src/renderer/pages/mypage.tsx | 31 +++++++++++----- src/renderer/pages/naming.tsx | 10 +++--- src/renderer/pages/onboarding.tsx | 19 +++------- .../shared/assets/svgs/ready-for-stat.svg | 16 +++++++++ src/renderer/shared/ui/icon.tsx | 4 ++- src/renderer/shared/ui/toaster.tsx | 4 +-- src/renderer/shared/ui/use-toast.ts | 1 + .../widgets/pomodoro/ui/focus-screen.tsx | 9 +++-- .../widgets/pomodoro/ui/home-screen.tsx | 35 +++++++++++++++---- 9 files changed, 90 insertions(+), 39 deletions(-) create mode 100644 src/renderer/shared/assets/svgs/ready-for-stat.svg diff --git a/src/renderer/pages/mypage.tsx b/src/renderer/pages/mypage.tsx index 039057d..612d896 100644 --- a/src/renderer/pages/mypage.tsx +++ b/src/renderer/pages/mypage.tsx @@ -5,6 +5,9 @@ import { useUser } from '@/features/user'; import { PATH } from '@/shared/constants'; import { Frame, Icon, Toggle } from '@/shared/ui'; +const SURVEY_LINK = + 'https://docs.google.com/forms/d/e/1FAIpQLSdoFxWJ7TFTU0-HKZEeqmDxz5ZprYtRz08FwrzNgDWnkNaOeA/viewform'; + const MyPage = () => { const navigate = useNavigate(); const { data: user } = useUser(); @@ -14,17 +17,17 @@ const MyPage = () => { navigate(PATH.POMODORO)} /> -
+
navigate(PATH.MY_CAT)}> 나의 고양이 {user?.cat?.name} - {/* */} + -
-
-
+
+
+

집중시간 알림받기

집중・휴식시간이 되면 고양이가 알려줘요 @@ -41,8 +44,7 @@ const MyPage = () => {

- {/* TODO: 설문지 링크로 변경 */} - window.open('https://nexters.co.kr/', '_target')}> + window.open(SURVEY_LINK, '_target')}> 의견 보내기
@@ -64,6 +66,19 @@ const ActionButton = ({ children, onClick }: ActionButtonProps) => ( ); +const ReadyForStat = () => ( +
+ +
+

통계 기능을 준비하고 있어요

+

+ 집중시간을 모아보는 통계가 +
곧 업데이트될 예정이에요 +

+
+
+); + // TODO: 통계쪽 디자인 가이드 완성되면 반영 예정 // const OfflineStat = () => ( //
@@ -85,7 +100,7 @@ const ActionButton = ({ children, onClick }: ActionButtonProps) => ( // { name: '휴식', time: '1시간 5분' }, // ], // } -// return
+// return
//
//
diff --git a/src/renderer/pages/naming.tsx b/src/renderer/pages/naming.tsx index 2fdf293..9d9a5e3 100644 --- a/src/renderer/pages/naming.tsx +++ b/src/renderer/pages/naming.tsx @@ -43,8 +43,8 @@ const Naming = () => { return ( -
-
+
+
{ setTypedCatName(e.target.value)} /> {errorMessage && ( @@ -78,7 +78,7 @@ const Naming = () => {
@@ -86,10 +86,12 @@ const Naming = () => { }; // 특수문자 및 공백 여부 확인 정규식 +const spaceRegex = /^\s+$/; const specialCharRegex = /[~!@#$%^&*()_+|<>?:{}\s]/; const getErrorMessage = (name: string) => { if (name.length === 0) return ''; + if (spaceRegex.test(name)) return '고양이 이름은 빈 칸이 될 수 없어요'; if (specialCharRegex.test(name)) return '고양이 이름에는 공백, 특수문자가 들어갈 수 없어요'; if (name.length > 10) return '고양이 이름은 10글자를 넘길 수 없어요'; return ''; diff --git a/src/renderer/pages/onboarding.tsx b/src/renderer/pages/onboarding.tsx index ede2681..d76992e 100644 --- a/src/renderer/pages/onboarding.tsx +++ b/src/renderer/pages/onboarding.tsx @@ -7,15 +7,7 @@ import onboardingImage1 from '@/shared/assets/images/onboarding-1.png'; import onboardingImage2 from '@/shared/assets/images/onboarding-2.png'; import onboardingImage3 from '@/shared/assets/images/onboarding-3.png'; import { LOCAL_STORAGE_KEY, PATH } from '@/shared/constants'; -import { - Button, - Carousel, - CarouselContent, - CarouselItem, - CarouselNext, - CarouselPrevious, - useCarousel, -} from '@/shared/ui'; +import { Button, Carousel, CarouselContent, CarouselItem, useCarousel } from '@/shared/ui'; import { cn } from '@/shared/utils'; const Onboarding = () => { @@ -53,10 +45,10 @@ const OnboardingContent = () => { const [, setIsCompleted] = useLocalStorage(LOCAL_STORAGE_KEY.ONBOARDING_COMPLETED, false); return ( -
+
{

{title}

-

{description}

+

{description}

))} - - -
    {contents.map((_, index) => (
  • + + + + + + + + + + + + + + + diff --git a/src/renderer/shared/ui/icon.tsx b/src/renderer/shared/ui/icon.tsx index ad44bfe..48c4472 100644 --- a/src/renderer/shared/ui/icon.tsx +++ b/src/renderer/shared/ui/icon.tsx @@ -5,7 +5,7 @@ import CategoryBookIcon from '@/shared/assets/svgs/category-book.svg'; import CategoryDefaultIcon from '@/shared/assets/svgs/category-default.svg'; import CategoryStudyIcon from '@/shared/assets/svgs/category-study.svg'; import CategoryWorkIcon from '@/shared/assets/svgs/category-work.svg'; -import CheckIcon from '@/shared/assets/svgs/check.svg'; +import CheckIcon from '@/shared/assets/svgs/check.svg?react'; import CheerIcon from '@/shared/assets/svgs/cheer.svg'; import ChevronRightIcon from '@/shared/assets/svgs/chevron-right.svg'; import ClockIcon from '@/shared/assets/svgs/clock.svg'; @@ -20,6 +20,7 @@ import PlayIcon from '@/shared/assets/svgs/play.svg'; import PlusIcon from '@/shared/assets/svgs/plus.svg'; import PlusSvgIcon from '@/shared/assets/svgs/plus.svg?react'; import PositiveIcon from '@/shared/assets/svgs/positive.svg'; +import ReadyForStatIcon from '@/shared/assets/svgs/ready-for-stat.svg'; import RestTimeIcon from '@/shared/assets/svgs/rest-time.svg'; import StimulusIcon from '@/shared/assets/svgs/stimulus.svg'; @@ -46,6 +47,7 @@ const icons = { stimulus: StimulusIcon, pen: PenIcon, clock: ClockIcon, + readyForStat: ReadyForStatIcon, } as const; const sizes = { xs: 16, diff --git a/src/renderer/shared/ui/toaster.tsx b/src/renderer/shared/ui/toaster.tsx index 698b9a4..cf515c7 100644 --- a/src/renderer/shared/ui/toaster.tsx +++ b/src/renderer/shared/ui/toaster.tsx @@ -8,10 +8,10 @@ export function Toaster() { return ( - {toasts.map(({ id, message, iconName = 'clock', ...props }) => { + {toasts.map(({ id, message, iconName, iconClassName, ...props }) => { return ( - + {message} diff --git a/src/renderer/shared/ui/use-toast.ts b/src/renderer/shared/ui/use-toast.ts index b701eb2..3c90587 100644 --- a/src/renderer/shared/ui/use-toast.ts +++ b/src/renderer/shared/ui/use-toast.ts @@ -9,6 +9,7 @@ const TOAST_REMOVE_DELAY = 1000000; type ToasterToast = ToastProps & { id: string; iconName?: IconName; + iconClassName?: string; message: ReactNode; }; diff --git a/src/renderer/widgets/pomodoro/ui/focus-screen.tsx b/src/renderer/widgets/pomodoro/ui/focus-screen.tsx index 62a6bd3..14858fb 100644 --- a/src/renderer/widgets/pomodoro/ui/focus-screen.tsx +++ b/src/renderer/widgets/pomodoro/ui/focus-screen.tsx @@ -68,8 +68,13 @@ export const FocusScreen = ({ currentCategory, time, handleRest, handleEnd }: Fo
-
-