[FEAT-1] Funnel 패턴 도입, 각 단계에 해당하는 컴포넌트 개발, 챗봇 질문응답 api 연동

[qwer0114]

📝 PR 내용

• 채팅 시나리오의 흐름을 효과적으로 제어하기 위한 Funnel 패턴 도입과 단계별 컴포넌트 개발
• 질문 요청 api 연동(tanstack-query) 사용
• 전역 상태 추가(입시 전형 선택 결과, 전체 메시지)

✅ 작업 내용

1. Funnel 패턴 도입
   • 기존 상태와 Props를 통한 채팅 시나리오 제어 방식을 Funnel 패턴으로 리팩토링
   • Funnle, Step 컴포넌트 개발
   • 자세한 내용 및 코드 설명은 노션의 FE->트러블 슈팅 참고 부탁드립니다
2. 각 단계별 컴포넌트 개발
   • ChooseAdmission: 입시유형 선택
   • ChooseAdmissionCategory: 상세전형 선택
   • AdmissionCategoryResult: 선택 결과 표시
   • QuestionResult: 질문 결과 표시
   • ReferenceResult: 참고자료 표시
   • ChooseDepartment: 학과별 입시정보
3. api 연동
   • tanstack-query의 useMutation을 통한 post 요청 커스텀 훅 구현
   • useAdmissionQuestionResult 커스텀 훅을 통해 입시 상담 질문에 대한 응답을 처리
     • 캐시 처리, 에러 핸들링 기능 포함
     • 사용자가 동일한 질문 선택 시 api 호출을 하지 않고 캐싱된 데이터를 활용합니다.
     • 자세한 내용 및 코드 설명은 노션의 FE->트러블 슈팅 참고 부탁드립니다

📸 스크린 샷 / 영상 (선택)

🤔 고민 했던 부분 (선택)

• 현재 PresetButton은 각 버튼의 동작마다 역할이 다양하여 하나의 객체로 통합하는데 어려움을 느끼고 아래와 같이 사용하고 있습니다.

   <PresetButton
                onClick={() => {
                  changeStep('질문 출처 결과');
                  setMessages([{ role: 'user', message: '🙋‍♂️ 어디에서 볼 수 있나요?' }]);
                }}
              >
                🙋‍♂️ 어디에서 볼 수 있나요?
              </PresetButton>
              {PRESET_BUTTON.map((question) => (
                <PresetButton
                  onClick={() => {
                    selectQuestion(question);
                  }}
                  key={question.label}
                >
                  {question.label}
                </PresetButton>
              ))}
              <PresetButton onClick={() => changeStep('상세전형 학과별 입시')}>학과별 입시</PresetButton>
              <PresetButton onClick={() => window.location.reload()}>조건 재설정</PresetButton>

• 각 버튼 기능들을 하나의 커스텀 훅으로 처리할 예정이며 아직 어떠한 식으로 구성할지 생각이 나지 않아 보류중입니다. 혹시 좋은 아이디어 있으시다면 조언 부탁드립니다.

🔗 연관 이슈

• Closes [FEAT] - 챗봇 api 연동 #1

참고

토스ㅣSLASH 23 - 퍼널: 쏟아지는 페이지 한 방에 관리하기

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
maru-egg-fe-v2-client	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 21, 2025 6:33am

[swgvenghy]

확실히 Funnel 패턴 들어가니까 보기가 수월하네요 고생하셨습니다!!