Conversation
- explore와 loved 일시 매거진 생성(usePostMagazine)으로 이어지도록 수정
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Summary of ChangesHello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! 이 PR은 Highlights
Changelog
Activity
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
이 PR은 LLMInputBox 컴포넌트를 여러 페이지에 연결하고, 각 페이지의 컨텍스트에 맞는 API를 호출하도록 하는 변경 사항을 포함하고 있습니다. 전반적으로 PR의 목표는 잘 달성되었으나, 코드의 가독성과 유지보수성을 높일 수 있는 몇 가지 개선점이 보입니다. 특히, 중복되는 타입 정의를 제거하고, React hook과 컴포넌트 로직을 더 간결하게 리팩토링하는 것을 제안합니다. 또한, 사용자 경험에 영향을 줄 수 있는 alert 사용 대신 다른 오류 처리 방식을 고려해 보시는 것이 좋겠습니다.
| }, | ||
| onError: (error) => { | ||
| console.log('섹션 생성:', error) | ||
| alert('섹션 생성에 실패했습니다.') |
There was a problem hiding this comment.
alert()는 사용자의 흐름을 방해하고 좋지 않은 사용자 경험을 제공할 수 있습니다. 에러 메시지를 표시하기 위해 토스트 UI 컴포넌트나 페이지 내 메시지 영역을 사용하는 것을 고려해 보세요. 이는 사용자에게 더 나은 피드백을 제공하고 애플리케이션의 일관성을 유지하는 데 도움이 됩니다.
References
- Using a consistent toast message for user feedback, especially for error messages, aligns with providing a better and more consistent user experience across different actions within the same conceptual flow.
| }, | ||
| onError: (error) => { | ||
| console.log('섹션 생성:', error) | ||
| alert('섹션 생성에 실패했습니다.') |
There was a problem hiding this comment.
alert()는 사용자의 흐름을 방해하고 좋지 않은 사용자 경험을 제공할 수 있습니다. 에러 메시지를 표시하기 위해 토스트 UI 컴포넌트나 페이지 내 메시지 영역을 사용하는 것을 고려해 보세요. 이는 사용자에게 더 나은 피드백을 제공하고 애플리케이션의 일관성을 유지하는 데 도움이 됩니다.
References
- Using a consistent toast message for user feedback, especially for error messages, aligns with providing a better and more consistent user experience across different actions within the same conceptual flow.
| const body = { | ||
| message: message, | ||
| } | ||
| const res = await axiosInstance.post(`api/magazines/${magazineId}/interact`, body) |
There was a problem hiding this comment.
body 객체를 생성하는 부분을 객체 속성 축약 구문을 사용하여 간소화하고, axiosInstance.post 호출에 직접 인라인으로 전달할 수 있습니다. 이렇게 하면 코드가 더 간결해집니다.
const res = await axiosInstance.post(`api/magazines/${magazineId}/interact`, { message })| const body = { | ||
| message: message, | ||
| } | ||
| const res = await axiosInstance.post(`api/magazines/${magazineId}/sections/${sectionId}/interact`, body) |
There was a problem hiding this comment.
이 함수에서도 마찬가지로 body 객체 생성을 간소화하고 axiosInstance.post 호출에 인라인으로 전달하여 코드를 더 간결하게 만들 수 있습니다.
const res = await axiosInstance.post(`api/magazines/${magazineId}/sections/${sectionId}/interact`, { message })| let handleSend = (value: string) => { | ||
| console.log('기본 전송:', value) | ||
| } | ||
| if (!isLoggedIn || isHiddenPath) return null | ||
| if (!isHiddenPath && sectionMatch) { | ||
| const { magazineId, sectionId } = sectionMatch.params | ||
| handleSend = async (value: string) => { | ||
| postAddInSectionPageMutation.mutate({ | ||
| magazineId: Number(magazineId), | ||
| sectionId: Number(sectionId), | ||
| message: value, | ||
| }) | ||
| } | ||
| } else if (!isHiddenPath && magazineMatch && isNumericMagazineId) { | ||
| const { magazineId } = magazineMatch.params | ||
| handleSend = async (value: string) => { | ||
| postAddSectionMutation.mutate({ | ||
| magazineId: Number(magazineId), | ||
| message: value, | ||
| }) | ||
| } | ||
| } else if (!isHiddenPath) { | ||
| handleSend = async (value: string) => { | ||
| postMagazineMutation.mutate({ | ||
| topic: value, | ||
| user_mood: '', | ||
| }) | ||
| } | ||
| } |
There was a problem hiding this comment.
handleSend 함수를 결정하는 로직이 다소 복잡하고 여러 번 재할당되고 있습니다. 이 로직을 하나의 함수로 통합하여 가독성을 높이고, 불필요한 async 키워드와 중복되는 !isHiddenPath 조건 체크를 제거하는 것이 좋습니다. 또한 let을 사용한 재할당 대신 const로 함수를 한 번만 정의하면 코드의 흐름을 파악하기 더 쉬워집니다.
if (!isLoggedIn || isHiddenPath) return null
const handleSend = (value: string) => {
if (sectionMatch) {
const { magazineId, sectionId } = sectionMatch.params
postAddInSectionPageMutation.mutate({
magazineId: Number(magazineId),
sectionId: Number(sectionId),
message: value,
})
} else if (magazineMatch && isNumericMagazineId) {
const { magazineId } = magazineMatch.params
postAddSectionMutation.mutate({
magazineId: Number(magazineId),
message: value,
})
} else {
postMagazineMutation.mutate({
topic: value,
user_mood: '',
})
}
}
| export default function usePostAddSection() { | ||
| const queryClient = useQueryClient() | ||
| return useMutation({ | ||
| mutationFn: ({ magazineId, message }: RequestAddSection) => postAddSection({ magazineId, message }), |
There was a problem hiding this comment.
mutationFn에 전달된 화살표 함수는 postAddSection 함수를 그대로 호출하고 있습니다. 이 경우, 함수 자체를 직접 전달하여 코드를 더 간결하게 만들 수 있습니다.
| mutationFn: ({ magazineId, message }: RequestAddSection) => postAddSection({ magazineId, message }), | |
| mutationFn: postAddSection, |
| mutationFn: ({ magazineId, sectionId, message }: RequestAddSectionInSectionPage) => | ||
| postAddSectionInSectionPage({ magazineId, sectionId, message }), |
There was a problem hiding this comment.
mutationFn에 전달된 화살표 함수는 postAddSectionInSectionPage 함수를 그대로 호출하고 있습니다. 이 경우, 함수 자체를 직접 전달하여 코드를 더 간결하게 만들 수 있습니다.
mutationFn: postAddSectionInSectionPage,| export type ResponseAddSectionInSectionPage = { | ||
| message: string | ||
| actionType: string | ||
| section: { | ||
| heading: string | ||
| paragraphs: Paragraph[] | ||
| sectionId: number | ||
| thumbnailUrl: string | ||
| layoutType: string | ||
| layoutHint: string | ||
| displayOrder: number | ||
| } | ||
| } |
There was a problem hiding this comment.
ResponseAddSectionInSectionPage 타입이 ResponseAddSection 타입과 완전히 동일합니다. 코드 중복을 피하고 유지보수성을 높이기 위해 ResponseAddSection 타입을 재사용하는 것이 좋습니다.
export type ResponseAddSectionInSectionPage = ResponseAddSection1 participant
🔗 관련 이슈
close #55
✨ 요약
페이지별 맞는 훅을 LLMInputBox에 연결합니다
📝 작업 내용