[Refactor]: 전체 목표 뷰 리팩토링

[jisooooooooooo]

💡 Summary

close #179

✅ Tasks

타이핑 훅 리팩토링

• 전체 목표 작성 화면에서 사용하는 텍스트 타이핑 훅을 개선했습니다.
• requestAnimationFrame으로 등록되는 마지막 실행 ID를 useRef에 저장해 언마운트 시 정확히 취소되도록 수정했습니다.
• duration === 0일 경우 글자 전부가 즉시 출력되도록 처리했습니다. 기본적으로는 duration을 3초로 고정해 사용하지만 예외 상황에 대비한 방어 로직입니다.

입력/제출 로직 개선

• 타이핑 텍스트 줄바꿈을 whiteSpace: 'pre-line'으로 처리 → 불필요한 함수를 제거했습니다.
• handleKeyDown을 제거하고 handleSubmit으로 일원화했습니다.
• 불필요한 onError를 제거하고 성공 시 navigate만 처리하도록 했습니다 → 추후 에러 처리가 필요하다면 추가할 예정입니다!
• isPending 상태일 때는 로딩 상태를 보여주기 위해 Loading 컴포넌트를 추가했습니다.

Layout 토큰화

• 스타일 코드에서 반복적으로 나오는 패턴들이 많아서 공용 토큰으로 분리했습니다.
  • 일단 자주 쓰는 flex 패턴(flexCenter, columnCenter, rowCenter)만 추가했어요.
  • 이후 더 필요한 패턴이 있으면 자유롭게 추가해서 사용하면 될 것 같습니다.

구조 및 훅 리팩토링

• 기존에 명확한 컨벤션 없이 분산되어 있던 파일들을 hook.ts, index.ts 두 파일로 정리했습니다.
• 훅 내부에 불필요한 로직 제거, 타입 단순화 등 리팩토링을 진행했습니다.
• 기존에 overall과 entire가 섞여있었는데 이번에 entire로 통일해서 정리했습니다.

👀 To Reviewer

• 일부 린트 설정(no-console, no-explicit-any)을 임시로 완화했습니다.
• 디버깅 편의와 Lint 오류가 많아 일단 끈 규칙들인데 추후에 재정비가 필요할 것 같고 제가 임의로 수정한 부분들도 있어서 리팩토링하면서 다시 한 번 확인해야 할 것 같아요!
• 리뷰해 주실 때 린트 에러로 수정한 부분 제외하고 전체 목표 생성하는 부분 위주로 봐주심 될 것 같아요~

📸 Screenshot

2025-09-01.11.29.44.mov

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
ninedot	Ready	Preview	Comment	Sep 14, 2025 2:06am

[github-actions]

빌드 결과

빌드 성공 🎉

[github-actions]

🎨 스토리북 배포 완료!

👉 스토리북 미리보기

변경된 컴포넌트의 디자인을 확인해주세요.

[kwonsaebom]

사소한 부분까지 신경써서 리팩토링 하신 것 같습니다 최고 👍🏻👍🏻
저도 layout.css 파일 참고해서 리팩토링하겠습니다 !

[Leeyoonji23]

고생하셨습니다~! 확실히 더 깔꼼스딱스 해졌네요 ✨ 코멘트 몇 개만 확인해주세요!

[github-actions]

빌드 결과

빌드 성공 🎉

[github-actions]

🎨 스토리북 배포 완료!

👉 스토리북 미리보기

변경된 컴포넌트의 디자인을 확인해주세요.

[shinjigu]

타이핑 훅에서 requestAnimationFrame을 정확히 관리하도록 바꾸고 duration === 0 같은 예외 상황까지 방어 로직을 넣어주신 게 인상적이었습니다 ! 공용 layout.css 토큰으로 flex 패턴을 분리한 덕분에 스타일 코드도 확실히 더 보기 좋아졌네요 😻 리팩토링 수고하셨습니다 !!

[shinjigu]

p5) requestAnimationFrame 정확한 취소 관리와 duration <= 0 방어 로직 부분 언마운트/예외 케이스 안정성이 올라갔다는 점에서 좋다고 생각합니다 !