(#115) 타이머 리스트 UI 개발

src/api/timer.ts

@@ -0,0 +1,15 @@
+import { CustomTimerListDto } from '@/types/dto/timer'
+import { fetchWrapper } from '@/utils/fetchWrapper'
+
+// 커스텀 타이머 리스트 조회
+export function readCustomTimerList(
+  token: string,
+): Promise<CustomTimerListDto> {
+  return fetchWrapper<CustomTimerListDto>(
+    `${process.env.NEXT_PUBLIC_API_DOMAIN}/api/v1/custom-timers`,
+    {
+      method: 'GET',
+    },
+    token,
+  )
+}

src/app/exercise/_components/exerciseCalendar/exerciseCalendar.module.css

@@ -23,6 +23,7 @@
   justify-content: center;
   width: 22px;
   height: 22px;
+  color: var(--color-black);
 }
 
 .nav-button:disabled {

src/app/exercise/exercise.module.css

@@ -4,26 +4,3 @@
   margin-left: -20px;
   background-color: var(--color-background);
 }
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 65px;
-  background-color: var(--color-white-300);
-}
-
-.brand {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.logo {
-  width: 34px;
-  height: 34px;
-}
-
-.service-name {
-  height: 50px;
-  width: auto;
-}

src/app/exercise/page.tsx

@@ -7,11 +7,10 @@ import { useRouter } from 'next/navigation'
 import ExerciseList from './_components/exerciseList/exerciseList'
 import BottomButton from '@/components/commons/bottomButton'
 import SITE_MAP from '@/constants/siteMap.constant'
-import Logo from '@/assets/logo.svg'
-import ServiceName from '@/assets/service_name.svg'
 import { useReadExerciseScore } from '@/hooks/useScoreApi'
 import { ExerciseScore } from '@/types/score'
 import BottomNavigation from '@/components/commons/bottomNavigation'
+import LogoTitle from '@/components/ui/logoTitle'
 
 import ScoreBoard from './_components/exercisePoint/scoreBoard'
 import ExerciseCalendar from './_components/exerciseCalendar/exerciseCalendar'
@@ -54,23 +53,15 @@ export default function Exercise() {
   const bottomText = calculateBottomText(scoreData, selectedDate)
   return (
     <>
-      <header className={styles['header']}>
-        <div className={styles['brand']}>
-          <Logo className={styles['logo']} />
-          <ServiceName className={styles['service-name']} />
-        </div>
-      </header>
-
+      <LogoTitle />
       <ScoreBoard />
       <div className={styles['divider']}></div>
-
       <ExerciseCalendar
         ref={calendarRef}
         onDateSelect={handleDateSelect}
         selectedDate={selectedDate}
       />
       <ExerciseList selectedDate={selectedDate} />
-
       <BottomButton onClick={() => router.push(SITE_MAP.EXERCISE_CREATE)}>
         {bottomText}
       </BottomButton>

src/app/globals.css

@@ -20,6 +20,14 @@ body {
   padding: 0 20px;
 }
 
+/* 추후 container 또한 아래 양식처럼 바꿔서 전체적인 layout디자인을 통일 */
+.container-timer {
+  padding: 0 20px;
+  background-color: var(--color-background);
+  width: 100%;
+  min-height: 100vh;
+}
+
 @media (min-width: 768px) {
   .responsive-container {
     max-width: 500px;

src/app/timer/layout.tsx

@@ -0,0 +1,15 @@
+import AuthGuard from '@/app/_components/authGuard'
+
+const Layout = ({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) => {
+  return (
+    <AuthGuard>
+      <div className="container-timer">{children}</div>
+    </AuthGuard>
+  )
+}
+
+export default Layout

src/app/timer/list/list.module.css

@@ -0,0 +1,45 @@
+.simple-timer-container {
+  position: relative;
+  width: 100%;
+  height: 120px;
+  background-color: var(--color-green);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 15px;
+  margin-top: 10px;
+  box-shadow: var(--color-boxshadow-100);
+}
+
+.simple-timer-text {
+  color: var(--color-white-300);
+}
+
+.right-arrow-icon {
+  position: absolute;
+  right: 16px;
+  width: 24px;
+  height: 24px;
+  color: var(--color-white-300);
+}
+
+.custom-timer-container {
+  position: relative;
+  width: 100%;
+  height: 60px;
+  background-color: var(--color-white-300);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 15px;
+  margin-top: 20px;
+  box-shadow: var(--color-boxshadow-100);
+}
+
+.plus-icon {
+  position: absolute;
+  right: 16px;
+  width: 24px;
+  height: 24px;
+  color: var(--color-black);
+}

src/app/timer/list/page.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+import Link from 'next/link'
+
+import BottomNavigation from '@/components/commons/bottomNavigation'
+import LogoTitle from '@/components/ui/logoTitle'
+import RightArrow from '@/assets/icon_right_arrow.svg'
+import PlusIcon from '@/assets/icon_plus.svg'
+import Typography from '@/components/ui/typography'
+import SITE_MAP from '@/constants/siteMap.constant'
+
+import styles from './list.module.css'
+
+export default function List() {
+  // 추후 커스텀 타이머 리스트를 훅으로 불러오기
+
+  return (
+    <>
+      <LogoTitle />
+      <Link
+        className={styles['simple-timer-container']}
+        href={SITE_MAP.TIMER_SIMPLE}
+      >
+        <Typography
+          className={styles['simple-timer-text']}
+          as="span"
+          variant="text22"
+          weight="bold"
+        >
+          심플 타이머
+        </Typography>
+        <RightArrow className={styles['right-arrow-icon']} />
+      </Link>
+
+      {/* 커스텀 타이머 리스트 개수만큼 map함수로 컴포넌트 생성 */}
+
+      <Link
+        className={styles['custom-timer-container']}
+        href={SITE_MAP.TIMER_CREATE}
+      >
+        <Typography as="span" variant="text22" weight="bold">
+          나만의 타이머
+        </Typography>
+        <PlusIcon className={styles['plus-icon']} />
+      </Link>
+
+      <BottomNavigation />
+    </>
+  )
+}

src/components/commons/header.module.css

@@ -23,6 +23,7 @@
   width: 16px;
   height: 16px;
   vertical-align: middle;
+  color: var(--color-black);
 }
 .title {
   margin-left: 4px;

src/components/commons/header.tsx

@@ -3,7 +3,7 @@
 import { ReactNode } from 'react'
 import { useRouter } from 'next/navigation'
 
-import LeftArrow from '@/assets/icon_back_arrow.svg'
+import LeftArrow from '@/assets/icon_left_arrow.svg'
 
 import styles from './header.module.css'
 import Typography from '../ui/typography'

src/components/commons/legalDocModal.module.css

@@ -28,6 +28,7 @@
   width: 16px;
   height: 16px;
   vertical-align: middle;
+  color: var(--color-black);
 }
 .iframe-container {
   position: relative;

src/components/commons/legalDocModal.tsx

@@ -1,4 +1,4 @@
-import BackIcon from '@/assets/icon_back_arrow.svg'
+import BackIcon from '@/assets/icon_left_arrow.svg'
 
 import Portal from '../ui/portal'
 import styles from './legalDocModal.module.css'

src/components/ui/logoTitle.module.css

@@ -0,0 +1,22 @@
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 65px;
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.logo {
+  width: 34px;
+  height: 34px;
+}
+
+.service-name {
+  height: 50px;
+  width: auto;
+}

src/components/ui/logoTitle.tsx

@@ -0,0 +1,17 @@
+'use client'
+
+import Logo from '@/assets/logo.svg'
+import ServiceName from '@/assets/service_name.svg'
+
+import styles from './logoTitle.module.css'
+
+export default function LogoTitle() {
+  return (
+    <header className={styles['header']}>
+      <div className={styles['brand']}>
+        <Logo className={styles['logo']} />
+        <ServiceName className={styles['service-name']} />
+      </div>
+    </header>
+  )
+}

src/components/ui/typography.module.css

@@ -1,5 +1,6 @@
 .text32 { font-size: 32px;}
 .text24 { font-size: 24px;}
+.text22 { font-size: 22px;}
 .text18 { font-size: 18px;}
 .text15 { font-size: 15px;}
 .text14 { font-size: 14px;}

src/components/ui/typography.tsx

@@ -10,6 +10,7 @@ type TypographyWeight = 'regular' | 'medium' | 'bold'
 type TypographyVariant =
   | 'text32'
   | 'text24'
+  | 'text22'
   | 'text18'
   | 'text15'
   | 'text14'

src/constants/siteMap.constant.ts

@@ -4,11 +4,14 @@ const SITE_MAP = {
   AGREEMENT: '/auth/agreement',
   SIGHUP: '/auth/sign-up',
   SETTINGS: '/settings',
+
   EXERCISE: '/exercise',
   EXERCISE_CREATE: '/exercise/create',
   EXERCISE_DETAIL: '/exercise/detail',
   EXERCISE_EDIT: '/exercise/edit',
 
   TIMER_LIST: '/timer/list',
+  TIMER_SIMPLE: '/timer/simple',
+  TIMER_CREATE: '/timer/create',
 } as const
 export default SITE_MAP