feat: 유저 flow 적용 및 기타 (#38)

* 새로고침 대응안하고자 메모리 라우터로 변경

* local storage 키도 한곳에 모으기

* 유저 플로우 홈에다 적용

* 온보딩에서 선택페이지로 이동하도록 변경

* 마이페이지 고양이 이름 적용

src/renderer/app/router.tsx

@@ -1,4 +1,4 @@
-import { Navigate, HashRouter as ReactRouter, Route, Routes } from 'react-router-dom';
+import { Navigate, MemoryRouter as ReactRouter, Route, Routes } from 'react-router-dom';
 
 import RootLayout from './layout';
 

src/renderer/features/time/hooks/use-focus-notification.ts

@@ -1,11 +1,15 @@
 import { useLocalStorage } from 'usehooks-ts';
 
 import { CatType } from '@/entities/cat';
+import { LOCAL_STORAGE_KEY } from '@/shared/constants';
 import { useNotification } from '@/shared/hooks';
 
 export const useFocusNotification = () => {
   const { permission, requestPermission, createNotification } = useNotification();
-  const [isEnabled, setIsEnabled] = useLocalStorage('isPushFocusEnabled', permission === 'granted');
+  const [isEnabled, setIsEnabled] = useLocalStorage(
+    LOCAL_STORAGE_KEY.PUSH_FOCUS_ENABLED,
+    permission === 'granted',
+  );
   const isUnavailable = permission === 'not-supported' || permission === 'denied';
 
   const changeEnabled = async (nextEnabled: boolean) => {

src/renderer/pages/home.tsx

@@ -1,57 +1,24 @@
+import { useEffect } from 'react';
+
 import { useNavigate } from 'react-router-dom';
+import { useLocalStorage } from 'usehooks-ts';
 
 import { useUser } from '@/features/user';
-import { PATH } from '@/shared/constants';
-import { useAuthToken, useMachineId } from '@/shared/hooks';
-import { Button } from '@/shared/ui';
+import { LOCAL_STORAGE_KEY, PATH } from '@/shared/constants';
 
 const Home = () => {
   const navigate = useNavigate();
-  const machineId = useMachineId();
-  const { data: authToken } = useAuthToken();
+  const [isCompleted] = useLocalStorage(LOCAL_STORAGE_KEY.ONBOARDING_COMPLETED, false);
   const { data: user } = useUser();
-  console.log('from env:', import.meta.env.VITE_SAMPLE);
-  console.log('authToken:', authToken, 'user:', user);
-  return (
-    <div>
-      <p>your machine id: {machineId}</p>
-      <Button
-        onClick={() => {
-          navigate(PATH.ONBOARDING);
-        }}
-      >
-        온보딩 페이지로 가기
-      </Button>
-      <Button
-        onClick={() => {
-          navigate(PATH.SELECTION);
-        }}
-      >
-        선택 페이지로 가기
-      </Button>
-      <Button
-        onClick={() => {
-          navigate(PATH.POMODORO);
-        }}
-      >
-        뽀모도로 페이지로 가기
-      </Button>
-      <Button
-        onClick={() => {
-          navigate(PATH.NAMING);
-        }}
-      >
-        이름짓기 페이지로 가기
-      </Button>
-      <Button
-        onClick={() => {
-          navigate(PATH.MY_PAGE);
-        }}
-      >
-        마이 페이지로 가기
-      </Button>
-    </div>
-  );
+
+  useEffect(() => {
+    if (!user) return;
+    if (!isCompleted) return navigate(PATH.ONBOARDING);
+    if (!user.cat) return navigate(PATH.SELECTION);
+    navigate(PATH.POMODORO);
+  }, [isCompleted, user]);
+
+  return <div>loading... 🐈 🐈‍⬛</div>;
 };
 
 export default Home;

src/renderer/pages/mypage.tsx

@@ -1,11 +1,13 @@
 import { useNavigate } from 'react-router-dom';
 
 import { useFocusNotification } from '@/features/time';
+import { useUser } from '@/features/user';
 import { PATH } from '@/shared/constants';
 import { Frame, Icon, Toggle } from '@/shared/ui';
 
 const MyPage = () => {
   const navigate = useNavigate();
+  const { data: user } = useUser();
   const { isEnabled, isUnavailable, changeEnabled } = useFocusNotification();
 
   return (
@@ -15,7 +17,7 @@ const MyPage = () => {
       <div className="w-full flex flex-col gap-3">
         <ActionButton onClick={() => navigate(PATH.MY_CAT)}>
           <span className="subBody-r text-text-tertiary">나의 고양이</span>
-          <span className="header-4 text-text-primary">이이오</span>
+          <span className="header-4 text-text-primary">{user?.cat?.name}</span>
         </ActionButton>
 
         {/* <OfflineStat /> */}

src/renderer/pages/onboarding.tsx

@@ -1,6 +1,7 @@
 import { useNavigate } from 'react-router-dom';
+import { useLocalStorage } from 'usehooks-ts';
 
-import { PATH } from '@/shared/constants';
+import { LOCAL_STORAGE_KEY, PATH } from '@/shared/constants';
 import {
   Button,
   Carousel,
@@ -40,6 +41,7 @@ const contents = [
 const OnboardingContent = () => {
   const { currentIndex } = useCarousel();
   const navigate = useNavigate();
+  const [, setIsCompleted] = useLocalStorage(LOCAL_STORAGE_KEY.ONBOARDING_COMPLETED, false);
 
   return (
     <div className="h-full flex flex-col items-center justify-center gap-12">
@@ -84,7 +86,14 @@ const OnboardingContent = () => {
       </div>
 
       <div className="flex gap-1">
-        <Button size="lg" className="w-[200px]" onClick={() => navigate(PATH.HOME)}>
+        <Button
+          size="lg"
+          className="w-[200px]"
+          onClick={() => {
+            setIsCompleted(true);
+            navigate(PATH.SELECTION);
+          }}
+        >
           시작하기
         </Button>
       </div>

src/renderer/shared/constants/keys.ts

@@ -21,3 +21,9 @@ export const MUTATION_KEY = {
   // category
   UPDATE_CATEGORY: ['updateCategory'],
 };
+
+export const LOCAL_STORAGE_KEY = {
+  PUSH_FOCUS_ENABLED: 'isPushFocusEnabled',
+  ONBOARDING_COMPLETED: 'isOnboardingCompleted',
+  GUIDE_SHOWN: 'isGuideShown',
+};

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

@@ -8,7 +8,7 @@ import { useCategories, useUpdateCategory, ChangeCategoryDrawer } from '@/featur
 import { catNameMap } from '@/features/pomodoro';
 import { ChangeTimeDialog } from '@/features/time';
 import { useUser } from '@/features/user';
-import { PATH } from '@/shared/constants';
+import { LOCAL_STORAGE_KEY, PATH } from '@/shared/constants';
 import { useDisclosure } from '@/shared/hooks';
 import { Button, Guide, Icon, Tooltip } from '@/shared/ui';
 import { getCategoryIconName, createIsoDuration } from '@/shared/utils';
@@ -39,10 +39,7 @@ export const HomeScreen = ({
 
   const [clickedMode, setClickedMode] = useState<'focus' | 'rest'>('focus');
 
-  const [showGuide, setShowGuide] = useLocalStorage<boolean>(
-    'showGuide',
-    !(localStorage.getItem('showGuide') === 'false'),
-  );
+  const [showGuide, setShowGuide] = useLocalStorage<boolean>(LOCAL_STORAGE_KEY.GUIDE_SHOWN, false);
 
   const changeTimeDialogProps = useDisclosure();
   const changeCategoryDrawerProps = useDisclosure();