Merge pull request #49 from SOPT-36-NINEDOT/feat/#43/goalOverallWrite

[Feat]: 전체 목표 작성 뷰 구현

Author: jisooooooooooo

src/common/component/GradientCircle/GradientCircle.css.ts

@@ -0,0 +1,45 @@
+import { styleVariants } from '@vanilla-extract/css';
+
+const baseGradientCircle = {
+  position: 'absolute' as const,
+  borderRadius: '50%',
+  flexShrink: 0,
+  zIndex: 0,
+};
+
+export const gradientCircle = styleVariants({
+  topRight: [
+    baseGradientCircle,
+    {
+      top: '-89.2rem',
+      right: '-89.2rem',
+      width: '178.5rem',
+      height: '178.5rem',
+      background:
+        'radial-gradient(50% 50% at 50% 50%, rgba(50, 95, 236, 0.50) 0%, rgba(2, 5, 11, 0.50) 100%)',
+    },
+  ],
+  bottomLeft1: [
+    baseGradientCircle,
+    {
+      bottom: '-18rem',
+      left: '-31rem',
+      width: '78.6rem',
+      height: '82.6rem',
+      background:
+        'radial-gradient(50% 50% at 50% 50%, rgba(50, 95, 236, 0.30) 0%, rgba(50, 95, 236, 0.00) 100%)',
+    },
+  ],
+  bottomLeft2: [
+    baseGradientCircle,
+    {
+      bottom: '-18rem',
+      left: '-1rem',
+      width: '65.8rem',
+      height: '65.8rem',
+      opacity: 0.3,
+      background:
+        'radial-gradient(50% 50% at 50% 50%, rgba(59, 255, 160, 0.70) 0%, rgba(59, 255, 160, 0.00) 100%)',
+    },
+  ],
+});

src/common/component/GradientCircle/GradientCircle.tsx

@@ -0,0 +1,11 @@
+import { gradientCircle } from './GradientCircle.css';
+
+type VariantType = keyof typeof gradientCircle;
+
+interface GradientCircleProps {
+  variant: VariantType;
+}
+
+export const GradientCircle = ({ variant }: GradientCircleProps) => {
+  return <div className={gradientCircle[variant]} />;
+};

src/page/todo/Todo.css.ts

@@ -0,0 +1,33 @@
+import { style } from '@vanilla-extract/css';
+
+import { colors } from '@/style/token';
+import { fonts } from '@/style/token/typography.css';
+
+export const todoContainer = style({
+  height: '100vh',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  backgroundColor: colors.bg_black01,
+  position: 'relative',
+  overflow: 'hidden',
+});
+
+export const todoTitle = style({
+  color: colors.white01,
+  ...fonts.display01,
+  textAlign: 'center',
+  marginBottom: '5.6rem',
+  position: 'relative',
+  zIndex: 1,
+  height: '15.2rem',
+});
+
+export const todoInputContainer = style({
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  gap: '2rem',
+  position: 'relative',
+});

src/page/todo/Todo.tsx

@@ -1,11 +1,88 @@
-import { Outlet } from 'react-router-dom';
+import { useEffect, useState, useRef } from 'react';
+import { Link } from 'react-router-dom';
+
+import * as styles from './Todo.css';
+
+import { GradientCircle } from '@/common/component/GradientCircle/GradientCircle';
+import GoButton from '@/common/component/GoButton/GoButton';
+import { PATH } from '@/route';
+
+const TYPING_DURATION = 3000;
+const FULL_TEXT = '66일간 달성할 목표를 입력하고\n만다라트를 시작해보세요!';
+const CHARARRAY = Array.from(FULL_TEXT);
 
 const Todo = () => {
+  const [displayedText, setDisplayedText] = useState('');
+  const [inputText, setInputText] = useState('');
+  const indexRef = useRef(0);
+  const textRef = useRef('');
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputText(e.target.value);
+  };
+
+  useEffect(() => {
+    let startTime: number | null = null;
+    const totalDuration = TYPING_DURATION;
+    const totalChars = CHARARRAY.length;
+    let isMounted = true;
+
+    const step = (timestamp: number) => {
+      if (!isMounted) {
+        return;
+      }
+      if (startTime === null) {
+        startTime = timestamp;
+      }
+      const elapsed = timestamp - startTime;
+      const progress = Math.min(elapsed / totalDuration, 1);
+      const charsToShow = Math.floor(progress * totalChars);
+
+      if (charsToShow > indexRef.current) {
+        textRef.current = CHARARRAY.slice(0, charsToShow).join('');
+        setDisplayedText(textRef.current);
+        indexRef.current = charsToShow;
+      }
+
+      if (progress < 1) {
+        requestAnimationFrame(step);
+      }
+    };
+
+    const rafId = requestAnimationFrame(step);
+
+    return () => {
+      isMounted = false;
+      cancelAnimationFrame(rafId);
+    };
+  }, []);
+
+  const renderTextWithLineBreaks = () =>
+    displayedText.split('\n').map((line, idx) => (
+      <span key={idx}>
+        {line}
+        <br />
+      </span>
+    ));
+
   return (
-    <div>
-      <h1>Todo</h1>
-      <Outlet />
-    </div>
+    <main className={styles.todoContainer}>
+      <GradientCircle variant="topRight" />
+      <GradientCircle variant="bottomLeft1" />
+      <GradientCircle variant="bottomLeft2" />
+      <h2 className={styles.todoTitle}>{renderTextWithLineBreaks()}</h2>
+      <section className={styles.todoInputContainer}>
+        <input
+          type="text"
+          value={inputText}
+          onChange={handleInputChange}
+          placeholder="이루고 싶은 목표를 작성하세요."
+        />
+        <Link to={PATH.TODO_UPPER}>
+          <GoButton isActive={inputText.length > 0} />
+        </Link>
+      </section>
+    </main>
   );
 };
 

src/route/MainRoutes.tsx

@@ -17,16 +17,14 @@ export const mainRoutes: RouteObject[] = [
       {
         path: PATH.TODO,
         element: <Todo />,
-        children: [
-          {
-            path: 'upper',
-            element: <UpperGoal />,
-          },
-          {
-            path: 'lower',
-            element: <LowerGoal />,
-          },
-        ],
+      },
+      {
+        path: PATH.TODO_UPPER,
+        element: <UpperGoal />,
+      },
+      {
+        path: PATH.TODO_LOWER,
+        element: <LowerGoal />,
       },
       {
         path: PATH.MANDAL,

src/shared/component/Layout/Layout.css.ts

@@ -0,0 +1,13 @@
+import { style } from '@vanilla-extract/css';
+
+export const layoutContainer = style({
+  display: 'flex',
+  flexDirection: 'column',
+  height: '100vh',
+  overflow: 'hidden',
+});
+
+export const layoutMain = style({
+  flex: 1,
+  overflow: 'hidden',
+});

src/shared/component/Layout/Layout.tsx

@@ -1,13 +1,13 @@
 import { Outlet } from 'react-router-dom';
 
 import Header from './Header/Header';
+import * as styles from './Layout.css';
 
 const Layout = () => {
   return (
-    <div>
+    <div className={styles.layoutContainer}>
       <Header />
-
-      <main>
+      <main className={styles.layoutMain}>
         <Outlet />
       </main>