�feat: 데스크탑 레이아웃 적용 (#59)

* 모바일, 데스크탑 레이아웃 추가 * 모바일 데스크탑 레이아웃 모두 적용 * 홈스크린 해더 제거 * 시간변경 모달로 임시 제공 * 마이페이지 ui 디자인 가이드 맞춰 변경 * 기존 전역 layout을 위한 파일 제거 * SidebarLayout, SimpleLayout 이름으로 변경 * 마이페이지 피그마 수정사항 반영
Nexters · Nov 13, 2024 · a4bf244 · a4bf244
1 parent 887bc00
commit a4bf244
Show file tree

Hide file tree

Showing 16 changed files with 394 additions and 309 deletions.
diff --git a/src/renderer/app/index.css b/src/renderer/app/index.css
@@ -58,7 +58,7 @@
     @apply border-border;
   }
   body {
-    @apply bg-background-primary text-foreground;
+    @apply bg-background-primary font-pretendard text-foreground;
   }
 }
 

diff --git a/src/renderer/app/layout.tsx b/src/renderer/app/layout.tsx
diff --git a/src/renderer/app/router.tsx b/src/renderer/app/router.tsx
@@ -1,7 +1,5 @@
 import { Navigate, MemoryRouter as ReactRouter, Route, Routes } from 'react-router-dom';
 
-import RootLayout from './layout';
-
 import Home from '@/pages/home';
 import MyCat from '@/pages/mycat';
 import MyPage from '@/pages/mypage';
@@ -15,16 +13,14 @@ export const Router = () => {
   return (
     <ReactRouter>
       <Routes>
-        <Route element={<RootLayout />}>
-          <Route path={PATH.HOME} element={<Home />} />
-          <Route path={PATH.POMODORO} element={<Pomodoro />} />
-          <Route path={PATH.ONBOARDING} element={<Onboarding />} />
-          <Route path={PATH.SELECTION} element={<Selection />} />
-          <Route path={PATH.NAMING} element={<Naming />} />
-          <Route path={PATH.MY_PAGE} element={<MyPage />} />
-          <Route path={PATH.MY_CAT} element={<MyCat />} />
-          <Route path="*" element={<Navigate to={PATH.HOME} replace />} />
-        </Route>
+        <Route path={PATH.HOME} element={<Home />} />
+        <Route path={PATH.POMODORO} element={<Pomodoro />} />
+        <Route path={PATH.ONBOARDING} element={<Onboarding />} />
+        <Route path={PATH.SELECTION} element={<Selection />} />
+        <Route path={PATH.NAMING} element={<Naming />} />
+        <Route path={PATH.MY_PAGE} element={<MyPage />} />
+        <Route path={PATH.MY_CAT} element={<MyCat />} />
+        <Route path="*" element={<Navigate to={PATH.HOME} replace />} />
       </Routes>
     </ReactRouter>
   );

diff --git a/src/renderer/features/time/ui/chage-time-dialog.tsx b/src/renderer/features/time/ui/chage-time-dialog.tsx
@@ -80,7 +80,7 @@ export const ChangeTimeDialog = ({
   }, [open, categoryTimeMinutes, categoryTimeSeconds]);
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange} fullScreen animated={false}>
+    <Dialog open={open} onOpenChange={onOpenChange} fullScreen={false} animated={false}>
       <div className="flex h-full flex-col">
         <div className="flex flex-1 flex-col items-center justify-center gap-8">
           <div className="flex items-center justify-center gap-2 px-4 py-2">
@@ -127,7 +127,7 @@ export const ChangeTimeDialog = ({
           </div>
         </div>
 
-        <div className="w-full pb-[54px] text-center">
+        <div className="w-full pb-6 pt-16 text-center">
           <Button variant="secondary" size="icon" className="aspect-square p-7" onClick={applyTime}>
             <Icon name="check" size="lg" />
           </Button>

diff --git 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 (
-    <div
-      className={cn(
-        'flex h-full w-full items-center justify-center bg-[#FFE9BF] transition-opacity duration-500',
-        isMinTimePassed ? 'opacity-100' : 'opacity-0',
-      )}
-    >
-      <img src={appSymbolIcon} width={174} />
-    </div>
+    <SimpleLayout>
+      <div
+        className={cn(
+          'flex h-full w-full items-center justify-center bg-[#FFE9BF] transition-opacity duration-500',
+          isMinTimePassed ? 'opacity-100' : 'opacity-0',
+        )}
+      >
+        <img src={appSymbolIcon} width={174} />
+      </div>
+    </SimpleLayout>
   );
 };
 

diff --git 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 (
-    <Frame>
-      <Frame.NavBar title="나의 고양이" onBack={() => navigate(PATH.MY_PAGE)} />
+    <SimpleLayout>
+      <Frame>
+        <Frame.NavBar title="나의 고양이" onBack={() => navigate(PATH.MY_PAGE)} />
 
-      <div className="flex h-full items-center justify-center">
-        <div className="flex w-full flex-col">
-          <Tooltip
-            content="사냥놀이를 하고싶다냥"
-            color="white"
-            sideOffset={-20}
-            rootProps={{ open: true }}
-            arrowProps={{ width: 14, height: 9 }}
-          />
+        <div className="flex h-full items-center justify-center">
+          <div className="flex w-full flex-col">
+            <Tooltip
+              content="사냥놀이를 하고싶다냥"
+              color="white"
+              sideOffset={-20}
+              rootProps={{ open: true }}
+              arrowProps={{ width: 14, height: 9 }}
+            />
 
-          <RiveComponent className="h-[240px] w-full select-none" />
+            <RiveComponent className="h-[240px] w-full select-none" />
 
-          <div className="flex w-full items-center justify-center">
-            <button
-              className="flex items-center justify-center gap-1 p-3"
-              onClick={handleClickEditNameButton}
-            >
-              <span className="header-4 text-text-secondary">{user?.cat?.name}</span>
-              <Icon name="pen" size="md" />
-            </button>
+            <div className="flex w-full items-center justify-center">
+              <button
+                className="flex items-center justify-center gap-1 p-3"
+                onClick={handleClickEditNameButton}
+              >
+                <span className="header-4 text-text-secondary">{user?.cat?.name}</span>
+                <Icon name="pen" size="md" />
+              </button>
+            </div>
           </div>
         </div>
-      </div>
 
-      <Frame.BottomBar>
-        <Button className="w-full" variant="secondary" onClick={handleClickChangeCatButton}>
-          고양이 바꾸기
-        </Button>
-      </Frame.BottomBar>
-    </Frame>
+        <Frame.BottomBar>
+          <Button className="w-full" variant="secondary" onClick={handleClickChangeCatButton}>
+            고양이 바꾸기
+          </Button>
+        </Frame.BottomBar>
+      </Frame>
+    </SimpleLayout>
   );
 };
 

diff --git 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 (
-    <Frame>
-      <Frame.NavBar title="마이페이지" onBack={() => navigate(PATH.POMODORO)} />
-
-      <div className="flex w-full 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">{user?.cat?.name}</span>
-        </ActionButton>
+    <SidebarLayout title="마이페이지">
+      <div className="px-4 py-2">
+        <div className="flex w-full flex-col gap-4">
+          <div className="flex flex-col gap-2">
+            <h2 className="subBody-sb text-text-secondary">나의 고양이</h2>
+            <ActionButton onClick={() => navigate(PATH.MY_CAT)}>
+              <span className="body-sb text-text-primary">{user?.cat?.name}</span>
+            </ActionButton>
+          </div>
 
-        <ReadyForStat />
+          <div className="flex flex-col gap-2">
+            <h2 className="subBody-sb text-text-secondary">통계</h2>
+            <ReadyForStat />
+          </div>
 
-        <div className="w-full rounded-sm bg-background-secondary p-5">
-          <div className="flex w-full items-center">
-            <div className="flex flex-1 flex-col justify-start">
-              <h3 className="body-sb text-text-primary">집중시간 알림받기</h3>
-              <p className="subBody-r text-text-tertiary">
-                집중・휴식시간이 되면 고양이가 알려줘요
-              </p>
+          <div className="flex flex-col gap-2">
+            <h2 className="subBody-sb text-text-secondary">알림</h2>
+            <div className="w-full rounded-sm bg-background-secondary px-5 py-6">
+              <div className="flex w-full items-center">
+                <div className="flex flex-1 flex-col justify-start gap-1">
+                  <h3 className="body-sb text-text-primary">집중시간 알림받기</h3>
+                  <p className="caption-r text-text-tertiary">
+                    집중・휴식시간이 되면 고양이가 알려줘요
+                  </p>
+                </div>
+                <Toggle
+                  disabled={isUnavailable}
+                  pressed={isEnabled}
+                  onPressedChange={(pressed) => {
+                    console.log('pressed', pressed);
+                    changeEnabled(pressed);
+                  }}
+                />
+              </div>
             </div>
-            <Toggle
-              disabled={isUnavailable}
-              pressed={isEnabled}
-              onPressedChange={(pressed) => {
-                console.log('pressed', pressed);
-                changeEnabled(pressed);
-              }}
-            />
           </div>
-        </div>
 
-        <ActionButton onClick={() => window.open(SURVEY_LINK, '_target')}>
-          <span className="body-sb text-text-primary">의견 보내기</span>
-        </ActionButton>
+          <div className="flex flex-col gap-2">
+            <h2 className="subBody-sb text-text-secondary">서비스</h2>
+            <ActionButton onClick={() => window.open(SURVEY_LINK, '_target')}>
+              <span className="body-sb text-text-primary">의견 보내기</span>
+            </ActionButton>
+          </div>
+        </div>
       </div>
-    </Frame>
+    </SidebarLayout>
   );
 };
 
@@ -67,10 +78,10 @@ const ActionButton = ({ children, onClick }: ActionButtonProps) => (
 );
 
 const ReadyForStat = () => (
-  <div className="flex flex-col items-center justify-center gap-2 rounded-sm bg-background-secondary py-[62px]">
+  <div className="flex flex-col items-center justify-center gap-2 rounded-sm bg-background-secondary py-5">
     <Icon name="readyForStat" width={100} height={100} />
     <div className="flex flex-col gap-1 text-center">
-      <h3 className="header-5 text-text-primary">통계 기능을 준비하고 있어요</h3>
+      <h3 className="body-sb text-text-primary">통계 기능을 준비하고 있어요</h3>
       <p className="subBody-r text-text-secondary">
         집중시간을 모아보는 통계가
         <br />곧 업데이트될 예정이에요

diff --git 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 (
-    <Frame>
-      <Frame.NavBar onBack={handleClickBackButton} />
-      <div className="flex h-full items-center justify-center">
-        <div className="flex w-full flex-col gap-10">
-          <Tooltip
-            content="반갑다냥! 내 이름을 지어줄래냥?"
-            color="white"
-            sideOffset={-20}
-            rootProps={{ open: true }}
-            arrowProps={{ width: 14, height: 9 }}
-          />
-          <RiveComponent
-            className="h-[240px] w-full cursor-pointer select-none"
-            onClick={() => {
-              clickCatInput?.fire();
-            }}
-          />
-          <div className="relative flex flex-col gap-2">
-            <label className="subBody-4 text-text-secondary">내 고양이의 이름</label>
-            <input
-              value={typedCatName}
-              placeholder={selectedCatName}
-              className="body-sb rounded-sm p-lg text-text-primary caret-text-accent-1 placeholder:text-text-disabled"
-              onChange={(e) => setTypedCatName(e.target.value)}
+    <SimpleLayout>
+      <Frame>
+        <Frame.NavBar onBack={handleClickBackButton} />
+        <div className="flex h-full items-center justify-center">
+          <div className="flex w-full flex-col gap-10">
+            <Tooltip
+              content="반갑다냥! 내 이름을 지어줄래냥?"
+              color="white"
+              sideOffset={-20}
+              rootProps={{ open: true }}
+              arrowProps={{ width: 14, height: 9 }}
             />
-            {errorMessage && (
-              <div className="absolute bottom-[-8px] left-0 w-full">
-                <div className="caption-r absolute left-0 top-0 text-accent-red">
-                  {errorMessage}
+            <RiveComponent
+              className="h-[240px] w-full cursor-pointer select-none"
+              onClick={() => {
+                clickCatInput?.fire();
+              }}
+            />
+            <div className="relative flex flex-col gap-2">
+              <label className="subBody-4 text-text-secondary">내 고양이의 이름</label>
+              <input
+                value={typedCatName}
+                placeholder={selectedCatName}
+                className="body-sb rounded-sm p-lg text-text-primary caret-text-accent-1 placeholder:text-text-disabled"
+                onChange={(e) => setTypedCatName(e.target.value)}
+              />
+              {errorMessage && (
+                <div className="absolute bottom-[-8px] left-0 w-full">
+                  <div className="caption-r absolute left-0 top-0 text-accent-red">
+                    {errorMessage}
+                  </div>
                 </div>
-              </div>
-            )}
+              )}
+            </div>
           </div>
         </div>
-      </div>
-      <Frame.BottomBar>
-        <Button className="w-full" disabled={!!errorMessage} onClick={handleClickCompleteButton}>
-          확인
-        </Button>
-      </Frame.BottomBar>
-    </Frame>
+        <Frame.BottomBar>
+          <Button className="w-full" disabled={!!errorMessage} onClick={handleClickCompleteButton}>
+            확인
+          </Button>
+        </Frame.BottomBar>
+      </Frame>
+    </SimpleLayout>
   );
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -58,7 +58,7 @@ @@
         @apply border-border;
       }
       body {
-        @apply bg-background-primary text-foreground;
+        @apply bg-background-primary font-pretendard text-foreground;
       }
     }
@@ Expand Down @@