diff --git a/src/renderer/pages/home.tsx b/src/renderer/pages/home.tsx
index ab172ab..03046fa 100644
--- a/src/renderer/pages/home.tsx
+++ b/src/renderer/pages/home.tsx
@@ -6,6 +6,7 @@ import { useLocalStorage, useTimeout } from 'usehooks-ts';
import { useUser } from '@/features/user';
import appSymbolIcon from '@/shared/assets/svgs/app-symbol.svg';
import { LOCAL_STORAGE_KEY, PATH } from '@/shared/constants';
+import { SimpleLayout } from '@/shared/ui';
import { cn } from '@/shared/utils';
const Home = () => {
@@ -27,14 +28,16 @@ const Home = () => {
}, [isCompletedOnboarding, user]);
return (
-
-
-
+
+
+
+
);
};
diff --git a/src/renderer/pages/mycat.tsx b/src/renderer/pages/mycat.tsx
index 904dd08..2e2b4b2 100644
--- a/src/renderer/pages/mycat.tsx
+++ b/src/renderer/pages/mycat.tsx
@@ -7,7 +7,7 @@ import { useUser } from '@/features/user';
import catSelectMotionRiveFile from '@/shared/assets/rivs/cat_select_ver2.0.riv';
import { PATH } from '@/shared/constants';
import { userCatTypeAliasMap } from '@/shared/hooks';
-import { Button, Frame, Icon, Tooltip } from '@/shared/ui';
+import { Button, Frame, Icon, SimpleLayout, Tooltip } from '@/shared/ui';
const MyCat = () => {
const navigate = useNavigate();
@@ -39,39 +39,41 @@ const MyCat = () => {
}, [rive, user?.cat?.type]);
return (
-
-
navigate(PATH.MY_PAGE)} />
+
+
+ navigate(PATH.MY_PAGE)} />
-
-
-
+
+
+
-
+
-
-
+
+
+
-
-
-
-
-
+
+
+
+
+
);
};
diff --git a/src/renderer/pages/mypage.tsx b/src/renderer/pages/mypage.tsx
index 76dbd57..d25d6ee 100644
--- a/src/renderer/pages/mypage.tsx
+++ b/src/renderer/pages/mypage.tsx
@@ -3,7 +3,7 @@ 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';
+import { SidebarLayout, Icon, Toggle } from '@/shared/ui';
const SURVEY_LINK =
'https://docs.google.com/forms/d/e/1FAIpQLSdoFxWJ7TFTU0-HKZEeqmDxz5ZprYtRz08FwrzNgDWnkNaOeA/viewform';
@@ -14,41 +14,52 @@ const MyPage = () => {
const { isEnabled, isUnavailable, changeEnabled } = useFocusNotification();
return (
-
-
navigate(PATH.POMODORO)} />
-
-
-
navigate(PATH.MY_CAT)}>
- 나의 고양이
- {user?.cat?.name}
-
+
+
+
+
+
나의 고양이
+
navigate(PATH.MY_CAT)}>
+ {user?.cat?.name}
+
+
-
+
+
통계
+
+
-
-
-
-
집중시간 알림받기
-
- 집중・휴식시간이 되면 고양이가 알려줘요
-
+
+
알림
+
+
+
+
집중시간 알림받기
+
+ 집중・휴식시간이 되면 고양이가 알려줘요
+
+
+
{
+ console.log('pressed', pressed);
+ changeEnabled(pressed);
+ }}
+ />
+
-
{
- console.log('pressed', pressed);
- changeEnabled(pressed);
- }}
- />
-
-
window.open(SURVEY_LINK, '_target')}>
- 의견 보내기
-
+
+
서비스
+
window.open(SURVEY_LINK, '_target')}>
+ 의견 보내기
+
+
+
-
+
);
};
@@ -67,10 +78,10 @@ const ActionButton = ({ children, onClick }: ActionButtonProps) => (
);
const ReadyForStat = () => (
-
+
-
통계 기능을 준비하고 있어요
+
통계 기능을 준비하고 있어요
집중시간을 모아보는 통계가
곧 업데이트될 예정이에요
diff --git a/src/renderer/pages/naming.tsx b/src/renderer/pages/naming.tsx
index 468d6b4..f2210d8 100644
--- a/src/renderer/pages/naming.tsx
+++ b/src/renderer/pages/naming.tsx
@@ -7,7 +7,7 @@ import { useUser } from '@/features/user';
import catHomeMotionRiveFile from '@/shared/assets/rivs/cat_home.riv';
import { PATH } from '@/shared/constants';
import { useRiveCat } from '@/shared/hooks';
-import { Button, Frame, Tooltip } from '@/shared/ui';
+import { Button, Frame, SimpleLayout, Tooltip } from '@/shared/ui';
const Naming = () => {
const location = useLocation();
@@ -41,47 +41,49 @@ const Naming = () => {
};
return (
-
-
-
-
-
-
{
- clickCatInput?.fire();
- }}
- />
-
-
-
setTypedCatName(e.target.value)}
+
+
+
+
+
+
- {errorMessage && (
-
-
- {errorMessage}
+
{
+ clickCatInput?.fire();
+ }}
+ />
+
+
+
setTypedCatName(e.target.value)}
+ />
+ {errorMessage && (
+
-
-
);
};
diff --git a/src/renderer/pages/onboarding.tsx b/src/renderer/pages/onboarding.tsx
index 20de48e..74d5e00 100644
--- a/src/renderer/pages/onboarding.tsx
+++ b/src/renderer/pages/onboarding.tsx
@@ -7,7 +7,14 @@ 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, useCarousel } from '@/shared/ui';
+import {
+ Button,
+ Carousel,
+ CarouselContent,
+ CarouselItem,
+ SimpleLayout,
+ useCarousel,
+} from '@/shared/ui';
import { cn } from '@/shared/utils';
const Onboarding = () => {
@@ -45,56 +52,58 @@ const OnboardingContent = () => {
const [, setIsCompleted] = useLocalStorage(LOCAL_STORAGE_KEY.ONBOARDING_COMPLETED, false);
return (
-
-
-
- {contents.map(({ title, description, imageSrc }, index) => (
-
-
-
+
+
+
+
+ {contents.map(({ title, description, imageSrc }, index) => (
+
+
+
-
-
{title}
-
{description}
+
+
{title}
+
{description}
+
-
+
+ ))}
+
-
- {contents.map((_, index) => (
-
- ))}
-
-
+
+ {contents.map((_, index) => (
+
+ ))}
+
+
-
+
+
+
-
-
어떤 고양이와 함께할까요?
-
언제든지 다른 고양이와 함께할 수 있어요
-
-
-
- {!selectedCatId &&
}
- {cats.map((cat) => (
-
- {selectedCatId === cat.id && }
-
- ))}
-
- {/* TODO: 아래를 선택한 고양이 이미지 에셋으로 변경 */}
-
-
-
-
{
- setSelectedCatId((prevCatId) => {
- const prevCat = cats.find((cat) => cat.id === prevCatId);
- const nextCat = cats.find((cat) => cat.id === nextCatId);
-
- // 다음 고양이 선택이 있으면 해당 input을 fire
- // 없으면 처음으로 돌아가기 위해 이전 고양이의 input을 fire
- if (nextCat) {
- catTypeInputMap[nextCat.type]?.fire();
- } else if (prevCat) {
- catTypeInputMap[prevCat.type]?.fire();
- }
-
- return nextCatId;
- });
- }}
- >
- {cats.map((cat) => (
-
-
- {cat.adjective}
-
-
+
+
+
+
+
+
어떤 고양이와 함께할까요?
+
언제든지 다른 고양이와 함께할 수 있어요
+
+
+
+ {!selectedCatId &&
}
+ {cats.map((cat) => (
+
+ {selectedCatId === cat.id && }
+
+ ))}
+
+ {/* TODO: 아래를 선택한 고양이 이미지 에셋으로 변경 */}
+
+
+
+
{
+ setSelectedCatId((prevCatId) => {
+ const prevCat = cats.find((cat) => cat.id === prevCatId);
+ const nextCat = cats.find((cat) => cat.id === nextCatId);
+
+ // 다음 고양이 선택이 있으면 해당 input을 fire
+ // 없으면 처음으로 돌아가기 위해 이전 고양이의 input을 fire
+ if (nextCat) {
+ catTypeInputMap[nextCat.type]?.fire();
+ } else if (prevCat) {
+ catTypeInputMap[prevCat.type]?.fire();
+ }
+
+ return nextCatId;
+ });
+ }}
+ >
+ {cats.map((cat) => (
+
- {cat.name}
-
-
- ))}
-
-
+
{children}
;
+};
+
+export type SidebarLayoutProps = {
+ title?: string;
+ children: React.ReactNode;
+};
+
+export const SidebarLayout = ({ title, children }: SidebarLayoutProps) => {
+ return (
+
+
+
+
+
+
{title}
+
+
+ {children}
+
+
+
+
+
+ );
+};
diff --git a/src/renderer/widgets/pomodoro/ui/home-screen.tsx b/src/renderer/widgets/pomodoro/ui/home-screen.tsx
index 89af9cb..92b14ab 100644
--- a/src/renderer/widgets/pomodoro/ui/home-screen.tsx
+++ b/src/renderer/widgets/pomodoro/ui/home-screen.tsx
@@ -1,6 +1,5 @@
import { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
import { useLocalStorage } from 'usehooks-ts';
import { CatType } from '@/entities/cat';
@@ -8,7 +7,7 @@ import { useCategories, useUpdateCategory, ChangeCategoryDrawer } from '@/featur
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 { LOCAL_STORAGE_KEY } from '@/shared/constants';
import { useDisclosure, useRiveCat } from '@/shared/hooks';
import { Button, Guide, Icon, Tooltip, useToast } from '@/shared/ui';
import { getCategoryIconName, createIsoDuration } from '@/shared/utils';
@@ -42,8 +41,6 @@ export const HomeScreen = ({
currentFocusMinutes,
currentRestMinutes,
}: HomeScreenProps) => {
- const navigate = useNavigate();
-
const [clickedMode, setClickedMode] = useState<'focus' | 'rest'>('focus');
const [showGuide, setShowGuide] = useLocalStorage(LOCAL_STORAGE_KEY.GUIDE_SHOWN, true);
@@ -77,16 +74,6 @@ export const HomeScreen = ({
return (
<>
-
-
-