[FEAT] 온보딩 퍼블리싱

[bykbyk0401]

🛰️ 관련 이슈

해결한 이슈 번호를 작성해주세요
close #93

🧑‍💻 작업 내용

작업한 내용을 간략히 작성해주세요

단계별 데이터 관리

• 사용자 입력 데이터를 localStorage에 저장하여 새로고침 이후에도 이전 입력이 유지되도록 구현하였습니다.
• 각 단계별로 선택된 데이터를 상태(selections)로 관리합니다.

컴포넌트

• OnboardingSection: 각 단계를 표현하는 공통 UI 컴포넌트입니다.
  • 제목, 설명, 선택 버튼, 다음 버튼으로 구성되어있습니다.
• ExperienceBtn: 마지막 단계인 '이용경험' 단계에서는 선택 버튼에 아이콘이 포함되어 OnboardingBtn을 가져와 O,X 아이콘이 포함된 버튼을 구현하였습니다.

단계 전환 로직

• useFunnel 훅을 활용하여 단계를 이동(nextStep, prevStep)하거나, 특정 단계로 바로 이동할 수 있도록 구현하였습니다.
• URL의 쿼리 파라미터를 사용하여 현재 단계를 동적으로 결정합니다..

유틸리티 함수 및 상수 관리

• BUTTON_TEXTS: 각 단계에서 사용할 선택 버튼의 텍스트를 관리합니다.
• ONBOARDING_STEPS: 각 단계의 ID와 제목을 관리합니다.
• formatText: 줄바꿈(\n)을 포함한 텍스트를 동적으로 렌더링하도록 처리하는 유틸리티 함수를 만들었습니다.

---

추가 수정사항

• React.FC의 사용은 지양
• whiteSpace: 'pre-line'으로 줄바꿈 처리, 기존 formatText 유틸 함수 제거
• 온보딩에서 사용하는 상수 키값을 서버 명칭과 동일하게 수정
• 상수 구조 리팩토링

🗯️ PR 포인트

리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요

• 더 좋은 방법이나 수정사항이 있다면 말씀해주세요!
• 스토리북에서 다음 버튼을 눌렀을 때 페이지가 이동하려면 라우팅 문제가 발생하는데, 중첩 라우팅 문제가 있어서 쉽게 해결되는 부분은 아닌 것 같아 온보딩 과정을 보여주지는 못하는 상태입니다.
• 해결 방법을 아신다면 말씀해주세요,,
• 우선은 스토리북으로는 온보딩 하나의 단계 동작을 확인할 수 있습니다.
• 과정은 로컬로 /onboarding으로 접속하시면 확인할 수 있습니다.

🚀 알게된 점

기록하며 개발하기!

• useFunnel을 이용하여 온보딩 구현하기

📖 참고 자료 (선택)

참고했던 문서들 공유하기!

📸 스크린샷 (선택)

2025-01-20.1.57.47.mov

[github-actions]

🪷 Storybook 확인 🪷
🔗 https://677fa9af1269762b7858c29f-zusjaylhwg.chromatic.com/

[seong-hui]

코드리뷰 잘 반영해주셨군요!! 상수를 잘 정의해주셔서 여러곳에서 잘 사용하시는게 너무 조으네용 짱짱 수고하셨습니당 👍 냐미 포인트네요

[seong-hui]

냐미