[Fix/#100] 챗봇 하단 버튼 기능 연결 #101
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Walkthrough챗봇 하단 버튼의 하드코딩된 기능을 연결하는 리팩터링입니다. "인기 용어"와 "오늘의 용어" 버튼에 새로운 핸들러를 추가하고, 관련 유틸리티 함수와 쿼리 생성 로직을 구현했습니다. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes
Possibly related PRs
Suggested labels
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
src/lib/terms.server.ts (1)
50-56: 오늘의 용어 이름 래핑 유틸 구현이 단순하고 재사용에 좋습니다.기존
getTodaysTermServer를 잘 래핑해서termKo만 반환하도록 분리한 구조가 명확하고, 호출부 입장에서도 문자열만 필요할 때 쓰기 편해 보입니다. 이 함수가null을 반환할 수 있으니, 사용처에서 널 케이스에 대한 처리(대체 문구 등)만 확실히 해 두면 될 것 같습니다. 만약TermIndexItem.termKo가 항상 존재하는 필드라면, 추후에는 반환 타입을string으로 좁히는 것도 고려해볼 수 있겠습니다.src/lib/recommendations.ts (1)
92-106:getPopularTerms래핑 로직은 적절하지만 에러 처리 중복은 정리 여지가 있습니다.
getRecommendedTerms결과에서term만 추려내는 헬퍼로 분리한 구조는 명확하고, 반환 타입도 단순해져서 사용하기 좋습니다. 다만getRecommendedTerms내부에서도 이미 try/catch로"추천 용어 로드 실패"를 로그하고[]를 반환하고 있어서, 이 함수에서 다시 한 번 try/catch로"인기 용어 로드 실패"를 찍는 것은 약간 중복에 가깝습니다. 향후 상위 레벨에서만 에러를 처리할지, 혹은 하위 유틸에서만 처리할지 한 번 정리해서 로그가 과하게 중복되지 않도록 하는 정도의 리팩터링을 고려해 볼 수 있겠습니다.src/app/chatbot/utils/quick-actions.ts (1)
1-31: 퀵 액션용 프롬프트 유틸 구조는 명확하며, 특히 오늘의 용어 쿼리도 에러 시 폴백을 두면 더 견고해집니다.
getPopularTermsQuery가 인기 용어 최대 3개를 받아"…, …, … 이 세 가지 용어를 각각 설명해줘."형식으로 프롬프트를 만드는 구조는 직관적이고, 용어가 없을 때 기본 문구로 폴백하는 처리도 잘 되어 있습니다. 반면getTodaysTermQuery는 인덱스가 비어 있는 경우에는"TypeScript"로 폴백하지만,getTodaysTerm()호출 자체가 실패(네트워크/파일/파싱 에러 등)할 경우를 따로 처리하지 않아 onClick 시 예외로 끝날 여지가 있습니다. 아래처럼 try/catch로 감싸서 인기 용어 쿼리와 동일하게 에러 시에도"TypeScript"로 폴백하도록 하면, 오늘의 용어 버튼도 보다 안정적으로 동작할 것 같습니다.export async function getTodaysTermQuery(): Promise<string> { - const todayTerm = await getTodaysTerm(); - if (!todayTerm) { - return "TypeScript"; - } - return todayTerm.termKo; + try { + const todayTerm = await getTodaysTerm(); + if (!todayTerm) { + return "TypeScript"; + } + return todayTerm.termKo; + } catch (error) { + console.error("오늘의 용어 로드 실패:", error); + return "TypeScript"; + } }또한,
3이라는 개수나 한국어 설명 템플릿 문자열은 상수로 분리해 두면 다른 곳에서 재사용하거나 문구를 수정할 때 한 군데만 고치면 되어 관리가 조금 더 수월해집니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
src/app/chatbot/components/ChatBot.tsx(2 hunks)src/app/chatbot/utils/quick-actions.ts(1 hunks)src/hooks/useChatBot.ts(5 hunks)src/lib/recommendations.ts(1 hunks)src/lib/terms.server.ts(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (4)
src/app/chatbot/utils/quick-actions.ts (3)
src/config/categories.ts (1)
CategoryType(20-30)src/lib/recommendations.ts (1)
getPopularTerms(95-106)src/lib/terms.ts (1)
getTodaysTerm(137-145)
src/lib/recommendations.ts (1)
src/config/categories.ts (1)
CategoryType(20-30)
src/app/chatbot/components/ChatBot.tsx (2)
src/app/chatbot/components/QuickActionButton.tsx (1)
QuickActionButton(9-23)src/components/icons/ic_star.tsx (1)
StarIcon(3-32)
src/hooks/useChatBot.ts (3)
src/contexts/auth/index.tsx (1)
useUserData(24-24)src/contexts/auth/UserDataContext.tsx (1)
useUserData(151-157)src/app/chatbot/utils/quick-actions.ts (2)
getPopularTermsQuery(12-20)getTodaysTermQuery(25-31)
🔇 Additional comments (2)
src/app/chatbot/components/ChatBot.tsx (1)
11-21: 하단 퀵 액션이useChatBot의 새 핸들러와 자연스럽게 연결되었습니다."인기 용어" / "오늘의 용어" 버튼이 각각
handlePopularTerms,handleTodaysTerm로 위임되면서, 프롬프트 하드코딩이 컴포넌트 밖(훅 + 유틸)으로 잘 빠져나간 구조라 유지보수성이 좋아졌습니다. 한 가지 확인만 하면 좋을 점은,QuickActionButtonProps의onClick타입이 현재 전달하는 비동기 핸들러(() => Promise<void>)와 호환되도록(예:() => void또는() => void | Promise<void>) 선언되어 있는지입니다.Also applies to: 53-66
src/hooks/useChatBot.ts (1)
5-10: 새 퀵 액션 핸들러와useUserData연동 방식이 자연스럽지만,useChatBot사용 위치가 모두 Provider 하위인지 확인이 필요합니다.
userData?.selectedCategory ?? "all"로 카테고리를 결정하고 이를getPopularTermsQuery에 넘긴 뒤handleSubmit로 위임하는 흐름, 그리고 오늘의 용어 쿼리를 동일한 패턴으로 처리하는 구조 모두 일관되고 이해하기 쉽습니다. 다만 이 훅이 이제useUserData컨텍스트에 의존하게 되었기 때문에,useChatBot을 사용하는 모든 컴포넌트가 반드시UserDataProvider하위에서 렌더링되고 있는지 한 번 점검해 두는 것이 좋겠습니다(그렇지 않으면 런타임에서 "useUserData must be used within a UserDataProvider" 에러가 발생할 수 있습니다). 현재 구조가 이 전제를 만족한다면, 반환 타입에 새 핸들러를 추가한 것까지 포함해 전반적인 변경 방향은 잘 맞는 것 같습니다.Also applies to: 17-27, 36-36, 79-99
✨ 작업 개요
챗봇 하단 버튼 기능 연결
📌 관련 이슈
✅ 작업 내용
Summary by CodeRabbit
새로운 기능
✏️ Tip: You can customize this high-level summary in your review settings.