Merge pull request #7 from depromeet/feat/timer

�타이머 상세 페이지 style 구현
depromeet · Dec 2, 2023 · d5e1611 · d5e1611
2 parents 4c0bcf2 + 3af2d3b
commit d5e1611
Show file tree

Hide file tree

Showing 75 changed files with 4,422 additions and 5,999 deletions.
diff --git a/panda.config.ts b/panda.config.ts
@@ -12,7 +12,15 @@ export default defineConfig({
 
   // Useful for theme customization
   theme: {
-    extend: {},
+    extend: {
+      keyframes: {
+        gradient: {
+          '0%': { transform: 'rotate(0deg)', backgroundPositionX: '0%', backgroundPositionY: '0%' },
+          '50%': { backgroundPositionX: '50%', backgroundPositionY: '100%' },
+          '100%': { transform: 'rotate(0deg)', backgroundPositionX: '0%', backgroundPositionY: '0%' },
+        },
+      },
+    },
   },
 
   // The output directory for your css system

diff --git a/public/assets/icons/left-arrow-icon.svg b/public/assets/icons/left-arrow-icon.svg
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,4 +1,5 @@
 import type { Metadata } from 'next';
+import { css } from '@/styled-system/css';
 
 import { QueryProvider } from '../hooks/query';
 
@@ -13,8 +14,16 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <html lang="en" suppressHydrationWarning>
       <body>
-        <QueryProvider>{children}</QueryProvider>
+        <QueryProvider>
+          <div className={css(containerCss)}>{children}</div>
+        </QueryProvider>
       </body>
     </html>
   );
 }
+
+const containerCss = {
+  maxWidth: '475px',
+  margin: '0 auto',
+  minHeight: '100vh',
+};
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,11 +1,5 @@
-import Header from '@/components/Header';
 import { css } from '@styled-system/css';
 
 export default function Home() {
-  return (
-    <div className={css({ fontSize: '2xl', fontWeight: 'bold' })}>
-      <Header />
-      Hello 🐼!
-    </div>
-  );
+  return <div className={css({ fontSize: '2xl', fontWeight: 'bold' })}>Hello 🐼!</div>;
 }
diff --git a/src/app/timer/TimerView.tsx b/src/app/timer/TimerView.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { css } from '@/styled-system/css';
+import { center } from '@/styled-system/patterns';
+
+interface Props {
+  isActive: boolean;
+  time: [number, number];
+  category: string;
+}
+export default function TimerView({ category, time, isActive }: Props) {
+  return (
+    <div className={center()}>
+      <div className={center(innerCss)}>
+        <div className={css(categoryCss)}>{category}</div>
+        <div className={css(timerTextCss)}>
+          <span>{time[0]}</span>
+          <span>:</span>
+          <span>{time[1]}</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const innerCss = {
+  width: '312px',
+  height: '312px',
+  background: 'white',
+  boxShadow: '0px 10px 30px 5px rgba(18.51, 14.90, 195.38, 0.07)',
+  borderRadius: 9999,
+  flexDirection: 'column',
+};
+
+const categoryCss = { color: '#4E5968', fontSize: '18px', fontWeight: '600', lineHeight: '150%' };
+
+const timerTextCss = {
+  fontSize: '70px',
+  fontWeight: '700',
+  animation: 'gradient 3s ease-in-out infinite',
+  backgroundSize: '150% 200%!',
+  '-webkit-background-clip': 'text!',
+  color: 'transparent',
+  background: 'linear-gradient(108deg, #FF8C8C -1.04%, #5D8AFF 101.48%)',
+};
diff --git a/src/app/timer/layout.tsx b/src/app/timer/layout.tsx
@@ -0,0 +1,21 @@
+import { type PropsWithChildren } from 'react';
+import Header from '@/components/Layout/Header';
+import { css } from '@/styled-system/css';
+
+export default function Layout({ children }: PropsWithChildren) {
+  return (
+    <div className={containerCss}>
+      <Header title={'미션 타이머'} />
+      <main className={mainCss}>{children}</main>
+    </div>
+  );
+}
+
+const containerCss = css({
+  background: 'linear-gradient(136deg, #FFF1F2 4.76%, #E9EFFF 89.58%)',
+  minHeight: '100vh',
+});
+
+const mainCss = css({
+  padding: '24px 16px',
+});
diff --git a/src/app/timer/page.tsx b/src/app/timer/page.tsx
@@ -0,0 +1,42 @@
+'use client';
+import TimerView from '@/app/timer/TimerView';
+import useStep from '@/app/timer/useStep';
+import { css } from '@styled-system/css';
+
+const STEP_LABEL = {
+  ready: {
+    title: '준비 되셨나요?',
+    desc: '타이머를 눌러서 10분의 미션을 완성해 주세요!',
+  },
+} as const;
+
+export default function TimerPage() {
+  const { step } = useStep();
+
+  return (
+    <div>
+      <h1 className={titleCss}>{STEP_LABEL[step].title}</h1>
+      <p className={descCss}>{STEP_LABEL[step].desc}</p>
+
+      <TimerView category="카테고리" time={[10, 0]} isActive={true} />
+    </div>
+  );
+}
+
+const font24Css = {
+  fontSize: '24px',
+  fontFamily: 'Pretendard',
+  fontWeight: '700',
+  lineHeight: '150%',
+  wordWrap: 'break-word',
+};
+
+const font14Css = {
+  fontSize: '14px',
+  fontFamily: 'Pretendard',
+  fontWeight: '400',
+  lineHeight: '150%',
+};
+
+const titleCss = css(font24Css, { color: '#333D4B' });
+const descCss = css(font14Css, { color: '#6B7684', marginBottom: '84px' });
diff --git a/src/app/timer/useStep.ts b/src/app/timer/useStep.ts
@@ -0,0 +1,12 @@
+import { useState } from 'react';
+
+type StepType = 'ready';
+
+function useStep() {
+  const [step, setStep] = useState<StepType>('ready');
+
+  const onNextStep = () => {};
+  return { step, onNextStep };
+}
+
+export default useStep;
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
diff --git a/src/components/Layout/Header.tsx b/src/components/Layout/Header.tsx
@@ -0,0 +1,32 @@
+import Image from 'next/image';
+import { flex } from '@/styled-system/patterns';
+import { css } from '@styled-system/css';
+
+interface Props {
+  title?: string;
+}
+
+function Header({ title }: Props) {
+  return (
+    <div className={wrapperCss}>
+      <button type="button">
+        <Image src="/assets/icons/left-arrow-icon.svg" alt="Left Arrow Icon" width={20} height={20} />
+      </button>
+      <h2 className={headingCss}>{title}</h2>
+    </div>
+  );
+}
+
+const wrapperCss = flex({
+  padding: '10px 16px',
+  gap: '6px',
+});
+
+const headingCss = css({
+  color: '#6B7684',
+  fontSize: '16px',
+  fontFamily: 'Pretendard',
+  fontWeight: '600',
+});
+
+export default Header;
diff --git a/src/styled-system/css/css.d.ts b/src/styled-system/css/css.d.ts
@@ -2,8 +2,8 @@
 import type { SystemStyleObject } from '../types/index';
 
 interface CssFunction {
-  (...styles: Array<SystemStyleObject | undefined | null | false>): string;
-  raw: (...styles: Array<SystemStyleObject | undefined | null | false>) => SystemStyleObject;
+  (...styles: Array<SystemStyleObject | undefined | null | false>): string
+  raw: (...styles: Array<SystemStyleObject | undefined | null | false>) => SystemStyleObject
 }
 
-export declare const css: CssFunction;
+export declare const css: CssFunction;
diff --git a/src/styled-system/css/cva.d.ts b/src/styled-system/css/cva.d.ts
@@ -1,6 +1,6 @@
 /* eslint-disable */
 import type { RecipeCreatorFn } from '../types/recipe';
 
-export declare const cva: RecipeCreatorFn;
+export declare const cva: RecipeCreatorFn
 
-export type { RecipeVariantProps } from '../types/recipe';
+export type { RecipeVariantProps } from '../types/recipe';
diff --git a/src/styled-system/css/cx.d.ts b/src/styled-system/css/cx.d.ts
@@ -1,5 +1,5 @@
 /* eslint-disable */
-type Argument = string | boolean | null | undefined;
+type Argument = string | boolean | null | undefined
 
 /** Conditionally join classNames into a single string */
-export declare function cx(...args: Argument[]): string;
+export declare function cx(...args: Argument[]): string
diff --git a/src/styled-system/css/index.d.ts b/src/styled-system/css/index.d.ts
@@ -2,4 +2,4 @@
 export * from './css';
 export * from './cx';
 export * from './cva';
-export * from './sva';
+export * from './sva';
diff --git a/src/styled-system/css/sva.d.ts b/src/styled-system/css/sva.d.ts
@@ -1,4 +1,4 @@
 /* eslint-disable */
 import type { SlotRecipeCreatorFn } from '../types/recipe';
 
-export declare const sva: SlotRecipeCreatorFn;
+export declare const sva: SlotRecipeCreatorFn
diff --git a/src/styled-system/jsx/aspect-ratio.d.ts b/src/styled-system/jsx/aspect-ratio.d.ts
@@ -1,11 +1,10 @@
 /* eslint-disable */
-import type { FunctionComponent } from 'react';
+import type { FunctionComponent } from 'react'
 import type { AspectRatioProperties } from '../patterns/aspect-ratio';
 import type { HTMLStyledProps } from '../types/jsx';
 import type { DistributiveOmit } from '../types/system-types';
 
-export interface AspectRatioProps
-  extends AspectRatioProperties,
-    DistributiveOmit<HTMLStyledProps<'div'>, keyof AspectRatioProperties | 'aspectRatio'> {}
+export interface AspectRatioProps extends AspectRatioProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof AspectRatioProperties | 'aspectRatio'> {}
 
-export declare const AspectRatio: FunctionComponent<AspectRatioProps>;
+
+export declare const AspectRatio: FunctionComponent<AspectRatioProps>
diff --git a/src/styled-system/jsx/bleed.d.ts b/src/styled-system/jsx/bleed.d.ts
@@ -1,9 +1,10 @@
 /* eslint-disable */
-import type { FunctionComponent } from 'react';
+import type { FunctionComponent } from 'react'
 import type { BleedProperties } from '../patterns/bleed';
 import type { HTMLStyledProps } from '../types/jsx';
 import type { DistributiveOmit } from '../types/system-types';
 
-export interface BleedProps extends BleedProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof BleedProperties> {}
+export interface BleedProps extends BleedProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof BleedProperties > {}
 
-export declare const Bleed: FunctionComponent<BleedProps>;
+
+export declare const Bleed: FunctionComponent<BleedProps>
diff --git a/src/styled-system/jsx/box.d.ts b/src/styled-system/jsx/box.d.ts
@@ -1,9 +1,10 @@
 /* eslint-disable */
-import type { FunctionComponent } from 'react';
+import type { FunctionComponent } from 'react'
 import type { BoxProperties } from '../patterns/box';
 import type { HTMLStyledProps } from '../types/jsx';
 import type { DistributiveOmit } from '../types/system-types';
 
-export interface BoxProps extends BoxProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof BoxProperties> {}
+export interface BoxProps extends BoxProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof BoxProperties > {}
 
-export declare const Box: FunctionComponent<BoxProps>;
+
+export declare const Box: FunctionComponent<BoxProps>
diff --git a/src/styled-system/jsx/center.d.ts b/src/styled-system/jsx/center.d.ts
@@ -1,11 +1,10 @@
 /* eslint-disable */
-import type { FunctionComponent } from 'react';
+import type { FunctionComponent } from 'react'
 import type { CenterProperties } from '../patterns/center';
 import type { HTMLStyledProps } from '../types/jsx';
 import type { DistributiveOmit } from '../types/system-types';
 
-export interface CenterProps
-  extends CenterProperties,
-    DistributiveOmit<HTMLStyledProps<'div'>, keyof CenterProperties> {}
+export interface CenterProps extends CenterProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof CenterProperties > {}
 
-export declare const Center: FunctionComponent<CenterProps>;
+
+export declare const Center: FunctionComponent<CenterProps>
diff --git a/src/styled-system/jsx/circle.d.ts b/src/styled-system/jsx/circle.d.ts
@@ -1,11 +1,10 @@
 /* eslint-disable */
-import type { FunctionComponent } from 'react';
+import type { FunctionComponent } from 'react'
 import type { CircleProperties } from '../patterns/circle';
 import type { HTMLStyledProps } from '../types/jsx';
 import type { DistributiveOmit } from '../types/system-types';
 
-export interface CircleProps
-  extends CircleProperties,
-    DistributiveOmit<HTMLStyledProps<'div'>, keyof CircleProperties> {}
+export interface CircleProps extends CircleProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof CircleProperties > {}
 
-export declare const Circle: FunctionComponent<CircleProps>;
+
+export declare const Circle: FunctionComponent<CircleProps>
diff --git a/src/styled-system/jsx/container.d.ts b/src/styled-system/jsx/container.d.ts
@@ -1,11 +1,10 @@
 /* eslint-disable */
-import type { FunctionComponent } from 'react';
+import type { FunctionComponent } from 'react'
 import type { ContainerProperties } from '../patterns/container';
 import type { HTMLStyledProps } from '../types/jsx';
 import type { DistributiveOmit } from '../types/system-types';
 
-export interface ContainerProps
-  extends ContainerProperties,
-    DistributiveOmit<HTMLStyledProps<'div'>, keyof ContainerProperties> {}
+export interface ContainerProps extends ContainerProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof ContainerProperties > {}
 
-export declare const Container: FunctionComponent<ContainerProps>;
+
+export declare const Container: FunctionComponent<ContainerProps>
diff --git a/src/styled-system/jsx/divider.d.ts b/src/styled-system/jsx/divider.d.ts
@@ -1,11 +1,10 @@
 /* eslint-disable */
-import type { FunctionComponent } from 'react';
+import type { FunctionComponent } from 'react'
 import type { DividerProperties } from '../patterns/divider';
 import type { HTMLStyledProps } from '../types/jsx';
 import type { DistributiveOmit } from '../types/system-types';
 
-export interface DividerProps
-  extends DividerProperties,
-    DistributiveOmit<HTMLStyledProps<'div'>, keyof DividerProperties> {}
+export interface DividerProps extends DividerProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof DividerProperties > {}
 
-export declare const Divider: FunctionComponent<DividerProps>;
+
+export declare const Divider: FunctionComponent<DividerProps>
diff --git a/src/styled-system/jsx/factory.d.ts b/src/styled-system/jsx/factory.d.ts
@@ -1,3 +1,3 @@
 /* eslint-disable */
 import type { Styled } from '../types/jsx';
-export declare const styled: Styled;
+export declare const styled: Styled