fix: 이것저것 수정 (#47)

* 설문 링크로 변경

* 통계기능 준비중 표시

* CarouselPrevious, CarouselNext 삭제

* naming 페이지 버튼명 확인으로 수정

* 고양이 이름 getErrorMessage 수정

* 빈칸 조건문 수정

* 카테고리 변경 후 토스트 띄우기 & 설정해준 고양이 이름으로 표시하기

* 카테고리 변경시 토스트창

* 집중 페이지 > 휴식하기 버튼 색 변하도록

* 하단 버튼 css 수정

* return "" 으로 수정

* updateCategory mutate로 변경

* categoryNo 없으면 mutate안보내도록

* iconName과 iconClassName 으로 받도록 수정

* 통계 사진 변경

* getErrorMessage 수정

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 = () => {
     <Frame>
       <Frame.NavBar title="마이페이지" onBack={() => navigate(PATH.POMODORO)} />
 
-      <div className="w-full flex flex-col gap-3">
+      <div className="flex flex-col w-full gap-3">
         <ActionButton onClick={() => navigate(PATH.MY_CAT)}>
           <span className="subBody-r text-text-tertiary">나의 고양이</span>
           <span className="header-4 text-text-primary">{user?.cat?.name}</span>
         </ActionButton>
 
-        {/* <OfflineStat /> */}
+        <ReadyForStat />
 
-        <div className="w-full p-5 bg-background-secondary rounded-sm">
-          <div className="w-full flex items-center">
-            <div className="flex-1 flex flex-col justify-start">
+        <div className="w-full p-5 rounded-sm bg-background-secondary">
+          <div className="flex items-center w-full">
+            <div className="flex flex-col justify-start flex-1">
               <h3 className="body-sb text-text-primary">집중시간 알림받기</h3>
               <p className="subBody-r text-text-tertiary">
                 집중・휴식시간이 되면 고양이가 알려줘요
@@ -41,8 +44,7 @@ const MyPage = () => {
           </div>
         </div>
 
-        {/* TODO: 설문지 링크로 변경 */}
-        <ActionButton onClick={() => window.open('https://nexters.co.kr/', '_target')}>
+        <ActionButton onClick={() => window.open(SURVEY_LINK, '_target')}>
           <span className="body-sb text-text-primary">의견 보내기</span>
         </ActionButton>
       </div>
@@ -64,6 +66,19 @@ const ActionButton = ({ children, onClick }: ActionButtonProps) => (
   </button>
 );
 
+const ReadyForStat = () => (
+  <div className="flex flex-col justify-center items-center gap-2 py-[62px] bg-background-secondary rounded-sm">
+    <Icon name="readyForStat" width={100} height={100} />
+    <div className="flex flex-col gap-1 text-center">
+      <h3 className="header-5 text-text-primary">통계 기능을 준비하고 있어요</h3>
+      <p className="subBody-r text-text-secondary">
+        집중시간을 모아보는 통계가
+        <br />곧 업데이트될 예정이에요
+      </p>
+    </div>
+  </div>
+);
+
 // TODO: 통계쪽 디자인 가이드 완성되면 반영 예정
 // const OfflineStat = () => (
 //   <div className="flex flex-col justify-center items-center gap-2 py-[62px] bg-background-secondary rounded-sm">
@@ -85,7 +100,7 @@ const ActionButton = ({ children, onClick }: ActionButtonProps) => (
 //       { name: '휴식', time: '1시간 5분' },
 //     ],
 //   }
-//   return <div className='w-full p-5 bg-background-secondary rounded-sm'>
+//   return <div className='w-full p-5 rounded-sm bg-background-secondary'>
 //     <div>
 
 //     </div>

src/renderer/pages/naming.tsx

@@ -43,8 +43,8 @@ const Naming = () => {
   return (
     <Frame>
       <Frame.NavBar onBack={handleClickBackButton} />
-      <div className="h-full flex justify-center items-center">
-        <div className="w-full flex flex-col gap-10">
+      <div className="flex items-center justify-center h-full">
+        <div className="flex flex-col w-full gap-10">
           <Tooltip
             content="반갑다냥! 내 이름을 지어줄래냥?"
             color="white"
@@ -63,7 +63,7 @@ const Naming = () => {
             <input
               value={typedCatName}
               placeholder={selectedCatName}
-              className="body-sb text-text-primary placeholder:text-text-disabled p-lg rounded-sm caret-text-accent-1"
+              className="rounded-sm body-sb text-text-primary placeholder:text-text-disabled p-lg caret-text-accent-1"
               onChange={(e) => setTypedCatName(e.target.value)}
             />
             {errorMessage && (
@@ -78,18 +78,20 @@ const Naming = () => {
       </div>
       <Frame.BottomBar>
         <Button className="w-full" disabled={!!errorMessage} onClick={handleClickCompleteButton}>
-          완료
+          확인
         </Button>
       </Frame.BottomBar>
     </Frame>
   );
 };
 
 // 특수문자 및 공백 여부 확인 정규식
+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 '';

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 (
-    <div className="h-full flex flex-col items-center justify-center gap-12">
+    <div className="flex flex-col items-center justify-center h-full gap-12">
       <div
         className={cn(
-          'w-full flex flex-col justify-center items-center gap-8 overflow-hidden',
+          'w-full flex flex-col justify-center items-center gap-3xl overflow-hidden',
           // TODO: 가운데 정렬하고 최소 간격으로 하고 싶은데 잘 안되서 일단 주석처리함
           // 'h-sm:pt-[40px] h-md:pt-[60px] h-lg:pt-[100px] h-xl:pt-[140px]',
         )}
@@ -69,16 +61,13 @@ const OnboardingContent = () => {
 
                 <div className="flex flex-col gap-2 text-center">
                   <h2 className="header-4 text-text-primary">{title}</h2>
-                  <p className="body-r text-text-secondary whitespace-pre-line">{description}</p>
+                  <p className="whitespace-pre-line body-r text-text-secondary">{description}</p>
                 </div>
               </div>
             </CarouselItem>
           ))}
         </CarouselContent>
 
-        <CarouselPrevious />
-        <CarouselNext />
-
         <ul className="flex gap-2">
           {contents.map((_, index) => (
             <li

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,

src/renderer/shared/ui/toaster.tsx

@@ -8,10 +8,10 @@ export function Toaster() {
 
   return (
     <ToastProvider>
-      {toasts.map(({ id, message, iconName = 'clock', ...props }) => {
+      {toasts.map(({ id, message, iconName, iconClassName, ...props }) => {
         return (
           <Toast key={id} {...props}>
-            <Icon name={iconName} size="md" />
+            <Icon size="md" name={iconName} className={iconClassName} />
             <ToastTitle>{message}</ToastTitle>
             <ToastClose />
           </Toast>

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;
 };
 

src/renderer/widgets/pomodoro/ui/focus-screen.tsx

@@ -68,8 +68,13 @@ export const FocusScreen = ({ currentCategory, time, handleRest, handleEnd }: Fo
           </div>
         </div>
       </main>
-      <div className="absolute left-0 flex flex-col items-center w-full m-auto bottom-4">
-        <Button variant="secondary" className="p-xl w-[200px]" size="lg" onClick={handleRest}>
+      <div className="flex flex-col items-center w-full pb-5">
+        <Button
+          variant={isExceed ? 'primary' : 'secondary'}
+          className="p-xl w-[200px]"
+          size="lg"
+          onClick={handleRest}
+        >
           휴식하기
         </Button>
         <Button variant="text-secondary" size="md" onClick={handleEnd}>

src/renderer/widgets/pomodoro/ui/home-screen.tsx

@@ -6,13 +6,12 @@ import { useLocalStorage } from 'usehooks-ts';
 import { CatType } from '@/entities/cat';
 import { PomodoroMode } from '@/entities/pomodoro';
 import { useCategories, useUpdateCategory, ChangeCategoryDrawer } from '@/features/category';
-import { catNameMap } from '@/features/pomodoro';
 import { ChangeTimeDialog } from '@/features/time';
 import { useUser } from '@/features/user';
 import catHomeMotionRiveFile from '@/shared/assets/rivs/cat_home.riv';
 import { LOCAL_STORAGE_KEY, PATH } from '@/shared/constants';
 import { useDisclosure, useRiveCat } from '@/shared/hooks';
-import { Button, Guide, Icon, Tooltip } from '@/shared/ui';
+import { Button, Guide, Icon, Tooltip, useToast } from '@/shared/ui';
 import { getCategoryIconName, createIsoDuration } from '@/shared/utils';
 
 const steps = [
@@ -59,6 +58,8 @@ export const HomeScreen = ({
   const { mutate: updateCategory } = useUpdateCategory();
   const { data: user } = useUser();
 
+  const { toast } = useToast();
+
   const { RiveComponent, clickCatInput } = useRiveCat({
     src: catHomeMotionRiveFile,
     stateMachines: 'State Machine_Home',
@@ -100,9 +101,7 @@ export const HomeScreen = ({
             }}
           />
 
-          <div className="header-4 text-text-tertiary">
-            {catNameMap(user?.cat?.type ?? 'CHEESE')}
-          </div>
+          <div className="header-4 text-text-tertiary">{user?.cat?.name}</div>
           <div className="flex flex-col p-lg gap-md">
             <Button
               variant="tertiary"
@@ -158,7 +157,13 @@ export const HomeScreen = ({
         onOpenChange={changeCategoryDrawerProps.setIsOpen}
         defaultCategory={currentCategory}
         onChangeCategory={(category) => {
+          if (category === currentCategory) return;
           setCurrentCategory(category);
+          toast({
+            iconName: 'check',
+            iconClassName: '[&>path]:stroke-icon-tertiary',
+            message: '카테고리를 변경했어요',
+          });
         }}
       />
 
@@ -175,19 +180,35 @@ export const HomeScreen = ({
         onOpenChange={changeTimeDialogProps.setIsOpen}
         mode={clickedMode}
         category={currentCategory}
-        onChangeCategoryTime={(category, minutes) => {
+        onChangeCategoryTime={async (category, minutes) => {
+          if (clickedMode === 'focus' && minutes === currentFocusMinutes) return;
+          if (clickedMode === 'rest' && minutes === currentRestMinutes) return;
+
+          const categoryNo = categories?.find((_category) => _category.title === category)?.no;
+          if (!categoryNo) return;
+
           const body =
             clickedMode === 'focus'
               ? { focusTime: createIsoDuration({ minutes }) }
               : { restTime: createIsoDuration({ minutes }) };
           updateCategory({
-            no: categories?.find((_category) => _category.title === category)?.no ?? 0,
+            no: categoryNo,
             body,
           });
+          toast({
+            iconName: 'check',
+            iconClassName: '[&>path]:stroke-icon-tertiary',
+            message: toastMessageMap[clickedMode],
+          });
         }}
         categoryTimeMinutes={clickedMode === 'focus' ? currentFocusMinutes : currentRestMinutes}
         categoryTimeSeconds={0}
       />
     </>
   );
 };
+
+const toastMessageMap: Record<'focus' | 'rest', string> = {
+  focus: '집중 시간을 변경했어요',
+  rest: '휴식 시간을 변경했어요',
+};