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

[Feat]: 전체 목표 뷰 텍스트 필드 추가 및 기능

Author: jisooooooooooo

src/common/component/Background/GradientBackground.tsx

@@ -0,0 +1,13 @@
+import { GradientCircle } from '@/common/component/GradientCircle/GradientCircle';
+
+const GradientBackground = () => {
+  return (
+    <>
+      <GradientCircle variant="topRight" />
+      <GradientCircle variant="bottomLeft1" />
+      <GradientCircle variant="bottomLeft2" />
+    </>
+  );
+};
+
+export default GradientBackground;

src/common/component/GoButton/GoButton.tsx

@@ -3,13 +3,14 @@ import { goButtonContainer, goIcon } from '@/common/component/GoButton/GoButton.
 
 type GoButtonProps = {
   isActive: boolean;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
 };
 
-const GoButton = ({ isActive = true }: GoButtonProps) => {
+const GoButton = ({ isActive = true, onClick }: GoButtonProps) => {
   const state = isActive ? 'active' : 'disabled';
 
   return (
-    <button className={goButtonContainer({ state })}>
+    <button className={goButtonContainer({ state })} onClick={onClick}>
       <IcBigNext className={goIcon({ state })} />
     </button>
   );

src/common/component/MandalartTextField/MandalartTextField.tsx

@@ -87,6 +87,7 @@ const TextField = ({
   placeholder,
   maxLength,
   disabled = false,
+  onKeyDown,
 }: TextFieldProps) => {
   const [state, dispatch] = useReducer(reducer, {
     isFocused: false,
@@ -158,7 +159,7 @@ const TextField = ({
         disabled={disabled}
         onFocus={() => dispatch({ type: 'FOCUS' })}
         onBlur={() => dispatch({ type: 'BLUR' })}
-        onKeyDown={handleKeyDown}
+        onKeyDown={onKeyDown ?? handleKeyDown}
         onCompositionStart={() => dispatch({ type: 'COMPOSE_START' })}
         onCompositionEnd={() => dispatch({ type: 'COMPOSE_END' })}
         maxLength={effectiveMaxLength}

src/common/component/MandalartTextField/MandalartTextField.types.ts

@@ -7,4 +7,5 @@ export interface TextFieldProps {
   placeholder?: string;
   maxLength?: number;
   disabled?: boolean;
+  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
 }

src/common/hook/useTypingEffect.ts

@@ -0,0 +1,42 @@
+import { useEffect, useState } from 'react';
+
+const useTypingEffect = (fullText: string, duration: number) => {
+  const [displayedText, setDisplayedText] = useState('');
+
+  useEffect(() => {
+    let startTime: number | null = null;
+    const charArray = Array.from(fullText);
+    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 / duration, 1);
+      const charsToShow = Math.floor(progress * totalChars);
+
+      setDisplayedText(charArray.slice(0, charsToShow).join(''));
+
+      if (progress < 1) {
+        requestAnimationFrame(step);
+      }
+    };
+
+    const rafId = requestAnimationFrame(step);
+
+    return () => {
+      isMounted = false;
+      cancelAnimationFrame(rafId);
+    };
+  }, [fullText, duration]);
+
+  return displayedText;
+};
+
+export default useTypingEffect;

src/page/index.ts

@@ -1,4 +1,4 @@
 export { default as Home } from './home/Home';
-export { default as Todo } from './todo/Todo';
+export { default as Todo } from './todo/entireTodo/Todo';
 export { default as Mandal } from './mandal/Mandal';
 export { default as History } from './history/History';

src/page/todo/Todo.tsx

@@ -0,0 +1,56 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { FULL_TEXT, TYPING_DURATION, PLACEHOLDER_TEXT } from './constant/constants';
+import * as styles from './Todo.css';
+
+import useTypingEffect from '@/common/hook/useTypingEffect';
+import GoButton from '@/common/component/GoButton/GoButton';
+import GradientBackground from '@/common/component/\bBackground/GradientBackground';
+import TextField from '@/common/component/MandalartTextField/MandalartTextField';
+import { PATH } from '@/route';
+
+const Todo = () => {
+  const [inputText, setInputText] = useState('');
+  const displayedText = useTypingEffect(FULL_TEXT, TYPING_DURATION);
+  const navigate = useNavigate();
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      handleGoNext();
+    }
+  };
+
+  const handleGoNext = () => {
+    if (inputText.trim().length > 0) {
+      navigate(PATH.TODO_UPPER);
+    }
+  };
+
+  const renderTextWithLineBreaks = () =>
+    displayedText.split('\n').map((line, idx) => (
+      <span key={idx}>
+        {line}
+        <br />
+      </span>
+    ));
+
+  return (
+    <main className={styles.todoContainer}>
+      <GradientBackground />
+      <h1 className={styles.todoTitle}>{renderTextWithLineBreaks()}</h1>
+      <section className={styles.todoInputContainer}>
+        <TextField
+          variant="bigGoal"
+          value={inputText}
+          onChange={setInputText}
+          onKeyDown={handleKeyDown}
+          placeholder={PLACEHOLDER_TEXT}
+        />
+        <GoButton isActive={inputText.length > 0} onClick={handleGoNext} />
+      </section>
+    </main>
+  );
+};
+
+export default Todo;

src/page/todo/Todo.css.ts src/page/todo/entireTodo/Todo.css.tssrc/page/todo/Todo.css.ts renamed to src/page/todo/entireTodo/Todo.css.ts

@@ -0,0 +1,3 @@
+export const FULL_TEXT = '66일간 달성할 목표를 입력하고\n만다라트를 시작해보세요!';
+export const TYPING_DURATION = 3000;
+export const PLACEHOLDER_TEXT = '이루고 싶은 목표를 작성하세요.';