diff --git a/src/api/timer.ts b/src/api/timer.ts new file mode 100644 index 0000000..e37dc88 --- /dev/null +++ b/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 { + return fetchWrapper( + `${process.env.NEXT_PUBLIC_API_DOMAIN}/api/v1/custom-timers`, + { + method: 'GET', + }, + token, + ) +} diff --git a/src/app/exercise/_components/exerciseCalendar/exerciseCalendar.module.css b/src/app/exercise/_components/exerciseCalendar/exerciseCalendar.module.css index 0ba2a85..edc9a34 100644 --- a/src/app/exercise/_components/exerciseCalendar/exerciseCalendar.module.css +++ b/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 { diff --git a/src/app/exercise/exercise.module.css b/src/app/exercise/exercise.module.css index 903bc21..2a1d5a5 100644 --- a/src/app/exercise/exercise.module.css +++ b/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; -} \ No newline at end of file diff --git a/src/app/exercise/page.tsx b/src/app/exercise/page.tsx index 137ecfd..a18eb54 100644 --- a/src/app/exercise/page.tsx +++ b/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 ( <> -
-
- - -
-
- +
- - router.push(SITE_MAP.EXERCISE_CREATE)}> {bottomText} diff --git a/src/app/globals.css b/src/app/globals.css index 5fb99cc..d0a5dd3 100644 --- a/src/app/globals.css +++ b/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; diff --git a/src/app/timer/layout.tsx b/src/app/timer/layout.tsx new file mode 100644 index 0000000..ef5353c --- /dev/null +++ b/src/app/timer/layout.tsx @@ -0,0 +1,15 @@ +import AuthGuard from '@/app/_components/authGuard' + +const Layout = ({ + children, +}: Readonly<{ + children: React.ReactNode +}>) => { + return ( + +
{children}
+ + ) +} + +export default Layout diff --git a/src/app/timer/list/list.module.css b/src/app/timer/list/list.module.css new file mode 100644 index 0000000..43c92e6 --- /dev/null +++ b/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); +} diff --git a/src/app/timer/list/page.tsx b/src/app/timer/list/page.tsx new file mode 100644 index 0000000..83cc7ca --- /dev/null +++ b/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 ( + <> + + + + 심플 타이머 + + + + + {/* 커스텀 타이머 리스트 개수만큼 map함수로 컴포넌트 생성 */} + + + + 나만의 타이머 + + + + + + + ) +} diff --git a/src/assets/icon_back_arrow.svg b/src/assets/icon_back_arrow.svg deleted file mode 100644 index 908a839..0000000 --- a/src/assets/icon_back_arrow.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/icon_left_arrow.svg b/src/assets/icon_left_arrow.svg index d410290..88ea0f3 100644 --- a/src/assets/icon_left_arrow.svg +++ b/src/assets/icon_left_arrow.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/assets/icon_minus.svg b/src/assets/icon_minus.svg new file mode 100644 index 0000000..dddadab --- /dev/null +++ b/src/assets/icon_minus.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icon_nav_setting.svg b/src/assets/icon_nav_setting.svg index 61bf180..78b8223 100644 --- a/src/assets/icon_nav_setting.svg +++ b/src/assets/icon_nav_setting.svg @@ -1,6 +1,3 @@ - - + - - diff --git a/src/assets/icon_plus.svg b/src/assets/icon_plus.svg new file mode 100644 index 0000000..5f214e2 --- /dev/null +++ b/src/assets/icon_plus.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icon_right_arrow.svg b/src/assets/icon_right_arrow.svg index a80fbc9..5637a72 100644 --- a/src/assets/icon_right_arrow.svg +++ b/src/assets/icon_right_arrow.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/components/commons/header.module.css b/src/components/commons/header.module.css index 49ddd4a..39c948b 100644 --- a/src/components/commons/header.module.css +++ b/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; diff --git a/src/components/commons/header.tsx b/src/components/commons/header.tsx index fc91042..c35382d 100644 --- a/src/components/commons/header.tsx +++ b/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' diff --git a/src/components/commons/legalDocModal.module.css b/src/components/commons/legalDocModal.module.css index 4cdc6c4..9ccc873 100644 --- a/src/components/commons/legalDocModal.module.css +++ b/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; diff --git a/src/components/commons/legalDocModal.tsx b/src/components/commons/legalDocModal.tsx index 4d9b108..aca1539 100644 --- a/src/components/commons/legalDocModal.tsx +++ b/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' diff --git a/src/components/ui/logoTitle.module.css b/src/components/ui/logoTitle.module.css new file mode 100644 index 0000000..409897c --- /dev/null +++ b/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; +} diff --git a/src/components/ui/logoTitle.tsx b/src/components/ui/logoTitle.tsx new file mode 100644 index 0000000..3762e0a --- /dev/null +++ b/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 ( +
+
+ + +
+ + ) +} diff --git a/src/components/ui/typography.module.css b/src/components/ui/typography.module.css index 2874b8c..9e5264d 100644 --- a/src/components/ui/typography.module.css +++ b/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;} diff --git a/src/components/ui/typography.tsx b/src/components/ui/typography.tsx index cb29a13..4994dbe 100644 --- a/src/components/ui/typography.tsx +++ b/src/components/ui/typography.tsx @@ -10,6 +10,7 @@ type TypographyWeight = 'regular' | 'medium' | 'bold' type TypographyVariant = | 'text32' | 'text24' + | 'text22' | 'text18' | 'text15' | 'text14' diff --git a/src/constants/siteMap.constant.ts b/src/constants/siteMap.constant.ts index dfa8778..31ec946 100644 --- a/src/constants/siteMap.constant.ts +++ b/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 diff --git a/src/hooks/useTimerApi.ts b/src/hooks/useTimerApi.ts new file mode 100644 index 0000000..2d22e7e --- /dev/null +++ b/src/hooks/useTimerApi.ts @@ -0,0 +1,13 @@ +import { readCustomTimerList } from '@/api/timer' +import { adapterCustomTimerList } from '@/lib/adapters/timer.adapter' +import { CustomTimerList } from '@/types/timer' + +import useApiGet from './useApiGet' + +// 커스텀 타이머 리스트 조회 +export const useReadCustomTimerList = () => + useApiGet( + ['timer/list'], + (token) => readCustomTimerList(token).then(adapterCustomTimerList), + {}, + ) diff --git a/src/lib/adapters/timer.adapter.ts b/src/lib/adapters/timer.adapter.ts new file mode 100644 index 0000000..6dc635f --- /dev/null +++ b/src/lib/adapters/timer.adapter.ts @@ -0,0 +1,17 @@ +import { CustomTimer, CustomTimerList } from '@/types/timer' +import { CustomTimerDto, CustomTimerListDto } from '@/types/dto/timer' + +export function adapterCustomTimer(dto: CustomTimerDto): CustomTimer { + return { + customTimerId: dto.customTimerId, + customTimerName: dto.customTimerName, + } +} + +export function adapterCustomTimerList( + dto: CustomTimerListDto, +): CustomTimerList { + return { + customTimerList: dto.customTimerList.map(adapterCustomTimer), + } +} diff --git a/src/styles/variables.css b/src/styles/variables.css index d8c410d..e2f4dda 100644 --- a/src/styles/variables.css +++ b/src/styles/variables.css @@ -19,6 +19,9 @@ --color-overlay: rgba(0, 0, 0, 0.3); + --color-boxshadow-100: 0 2px 2px rgba(0, 0, 0, 0.25); + --color-boxshadow-200: 0 4px 8px rgba(0, 0, 0, 0.25); + /* length */ --bottom-button-height: 95px; } diff --git a/src/types/dto/timer.ts b/src/types/dto/timer.ts new file mode 100644 index 0000000..25784e7 --- /dev/null +++ b/src/types/dto/timer.ts @@ -0,0 +1,8 @@ +export type CustomTimerDto = { + customTimerId: number + customTimerName: string +} + +export type CustomTimerListDto = { + customTimerList: CustomTimerDto[] +} diff --git a/src/types/timer.ts b/src/types/timer.ts new file mode 100644 index 0000000..5cc8ac2 --- /dev/null +++ b/src/types/timer.ts @@ -0,0 +1,8 @@ +export type CustomTimer = { + customTimerId: number + customTimerName: string +} + +export type CustomTimerList = { + customTimerList: CustomTimer[] +}