[FEAT] 네이버 즐겨찾기 저장 #73
Conversation
…in ExtractedPlaces
Walkthrough이 풀 리퀘스트는 여러 컴포넌트와 훅에서 데이터 구조의 변경을 포함하여, Changes
Assessment against linked issues
Suggested reviewers
Warning Rate limit exceeded@keemsebin has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 14 minutes and 34 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
|
Update: 2024년 11월 25일 16시 32분 06초 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Outside diff range and nitpick comments (16)
src/hooks/api/bookmarks/useYoutubeBookmark.ts (1)
타입 변경이 올바르게 적용되었습니다.
ExtractResponse타입은useYoutubePlace.ts에서 정의되어 있으며, 이 타입이 사용되는 모든 곳에서 일관되게 적용되어 있습니다. 기존의YoutubeResponse타입은BottomSheetContent/types.ts에서 참조되고 있지만, 이는 오래된 참조로 보이며 실제 코드에서는ExtractResponse로 대체되어 사용되고 있습니다.
src/components/features/BottomSheetContent/types.ts에서YoutubeResponse타입 참조를ExtractResponse로 업데이트가 필요합니다.🔗 Analysis chain
Line range hint
8-13: 타입 변경의 영향도를 확인해주세요.
mutationFn의 매개변수 타입이ExtractResponse로 변경되었습니다. 이 변경이 API 응답 구조와 일치하는지 확인이 필요합니다.다음 스크립트로 타입 사용을 확인해보세요:
Let me check the actual implementation and usage of these types to better understand the impact.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: ExtractResponse 타입의 사용처를 확인합니다. # ExtractResponse 타입이 사용되는 모든 파일 검색 rg -l "ExtractResponse" # 이전 YoutubeResponse 타입이 남아있는지 확인 rg -l "YoutubeResponse"Length of output: 459
Script:
#!/bin/bash # Check the implementation and usage of ExtractResponse type rg "ExtractResponse" -A 5 # Check the implementation and usage of YoutubeResponse type rg "YoutubeResponse" -A 5 # Check the actual API call implementation ast-grep --pattern 'post($_, $_, $_)'Length of output: 10750
🧰 Tools
🪛 eslint (1.23.1)
[error] 1-1: There should be no empty line within import group
(import/order)
[error] 1-1:
@tanstack/react-queryimport should occur after import of@/lib/axios(import/order)
src/hooks/api/bookmarks/useNaverBookmark.ts (2)
1-4: import 구문 순서를 개선하세요import 구문의 가독성과 일관성을 위해 다음과 같이 재정렬하는 것이 좋습니다:
-import { useMutation } from '@tanstack/react-query'; - -import { ExtractResponse } from '@/hooks/api/link/useYoutubePlace'; -import { post } from '@/lib/axios'; +import { useMutation } from '@tanstack/react-query'; +import { post } from '@/lib/axios'; +import { ExtractResponse } from '@/hooks/api/link/useYoutubePlace';🧰 Tools
🪛 eslint (1.23.1)
[error] 1-1: There should be no empty line within import group
(import/order)
[error] 1-1:
@tanstack/react-queryimport should occur after import of@/lib/axios(import/order)
9-9: API 엔드포인트를 환경 설정으로 관리하세요API 엔드포인트가 코드에 직접 하드코딩되어 있습니다. 환경에 따라 유연하게 대응할 수 있도록 환경 변수를 사용하는 것이 좋습니다.
- post(`api/bookmarks/naver`, naverData, { + post(`${process.env.NEXT_PUBLIC_API_URL}/bookmarks/naver`, naverData, {src/hooks/api/link/useNaverMapPlace.ts (1)
1-5: import 구문 정리가 필요합니다import 구문의 순서와 그룹화를 개선하여 코드의 일관성을 높일 수 있습니다.
다음과 같이 수정해주세요:
-import { useMutation } from '@tanstack/react-query'; - -import { post } from '@/lib/external'; - -import { ExtractResponse } from './useYoutubePlace'; +import { useMutation } from '@tanstack/react-query'; +import { post } from '@/lib/external'; +import { ExtractResponse } from './useYoutubePlace';🧰 Tools
🪛 eslint (1.23.1)
[error] 1-1: There should be no empty line within import group
(import/order)
[error] 3-3:
@/lib/externalimport should occur before import of@tanstack/react-query(import/order)
src/hooks/api/link/useYoutubePlace.ts (1)
6-12: 타입 이름을 더 구체적으로 변경하는 것이 좋습니다현재
ExtractResponse라는 일반적인 이름은 YouTube 관련 필드들을 포함하고 있어 혼란을 줄 수 있습니다. 네이버 북마크와 같은 다른 추출기를 추가할 때 문제가 될 수 있습니다.다음과 같이 변경하는 것을 제안합니다:
-export type ExtractResponse = { +export type YoutubeExtractResponse = { name?: string; youtuberId?: string; youtuberName?: string; youtuberProfile?: string; youtubeLink?: string; places: Place[]; };src/hooks/common/useYoutubeContext.tsx (1)
3-3: 타입 정의가 일반적인 링크를 처리하도록 개선되었습니다만, 네이밍을 더 명확하게 할 수 있습니다.현재
Link타입은 YouTube와 네이버 링크 모두를 처리할 수 있도록 일반화되었습니다. 하지만 이 컨텍스트가 다양한 링크 타입을 처리한다는 것을 더 명확하게 표현하기 위해 타입 이름을 개선하는 것이 좋겠습니다.다음과 같은 변경을 제안합니다:
-type Action = { type: 'SET_LINK'; payload: string }; +type LinkAction = { type: 'SET_LINK'; payload: string }; -export type Link = { +export type GenericLink = { link: string; };Also applies to: 9-10
src/components/features/LinkForm/LinkInput.tsx (1)
28-33: 입력값 초기화 처리가 개선되었습니다.입력값 초기화 시 로컬 상태(
inputValue)와 컨텍스트 상태(link)가 모두 정상적으로 초기화되도록 구현되었습니다. 다만, 초기화 시 사용자에게 알림을 제공하는 것이 좋을 것 같습니다.다음과 같이 Toast 메시지를 추가하는 것을 고려해보세요:
onClickReset={() => { onClickReset(); setLink(''); + toast.success('입력값이 초기화되었습니다'); }}src/components/common/Typography/index.tsx (1)
Line range hint
1-67: 접근성 향상을 위한 제안텍스트 블록의 성격에 따라 적절한 HTML 요소를 선택적으로 사용할 수 있도록 하는 것이 좋습니다.
다음과 같이 as prop을 추가하여 요소를 선택할 수 있도록 개선하는 것을 고려해보세요:
type Props = { children: React.ReactNode; className?: string; + as?: 'p' | 'span' | 'div'; }; const Typography = ({ children, weight = 'medium', variant = 'Body1', className, + as: Element = 'p', ...props }: Props & TypographyVariants) => { const classes = variantClasses({ type: variant, weight, className }); return ( - <span className={classes} {...props}> + <Element className={classes} {...props}> {children} - </span> + </Element> ); };src/hooks/common/useBottomFunnel.tsx (1)
Line range hint
36-42: 인증 및 에러 처리 개선을 고려해주세요.현재 구현에 대한 아키텍처 관점의 제안사항입니다:
- 인증 실패 시나리오에 대한 더 자세한 처리가 필요해 보입니다.
- 각 단계별 에러 처리 로직을 추가하면 좋을 것 같습니다.
- 타입 가드를 사용하여 런타임에서의 타입 안전성을 높일 수 있습니다.
src/pages/MapView.tsx (2)
9-9: 타입 임포트 위치 개선 필요
ExtractResponse타입이 YouTube 관련 훅에서 임포트되고 있습니다. 네이버 즐겨찾기 기능을 위한 타입이 YouTube 관련 파일에 위치하는 것은 혼란을 야기할 수 있습니다.공통 타입을 별도의 타입 파일로 분리하는 것을 고려해 주세요:
-import { ExtractResponse } from '@/hooks/api/link/useYoutubePlace'; +import { ExtractResponse } from '@/types/extract';
Line range hint
103-107: 즐겨찾기 저장 기능 구현 미완성현재 코드에서는 북마크 버튼 클릭 시 상태 업데이트만 수행하고 있습니다. PR의 주요 목적인 네이버 즐겨찾기 저장 기능이 완전히 구현되지 않은 것으로 보입니다.
다음 사항들의 구현이 필요합니다:
- 즐겨찾기 데이터를 서버에 저장하는 로직
- 저장 성공/실패에 대한 사용자 피드백
- 저장된 즐겨찾기 상태 표시
<SideMenu position="right" variant="emptyBookMark" - onClick={() => setState({ data: state.data, type: 'list' }, token)} + onClick={async () => { + try { + await saveBookmark(state.data); + setState({ data: state.data, type: 'list' }, token); + // 성공 피드백 표시 + } catch (error) { + // 에러 처리 및 사용자 피드백 + } + }} />src/components/features/ExtractedPlacesList/ExtractedPlacesList.tsx (4)
46-54: 중복되는 코드 블록 함수로 추출 제안
youtubeMutate와naverMutate호출 시 실행되는onSuccess콜백 함수가 동일합니다. 이 중복 코드를 하나의 함수로 추출하여 코드의 재사용성과 가독성을 높일 수 있습니다.다음과 같이 공통 함수를 만들어 사용해 보세요:
const onSuccessCallback = () => { sessionStorage.clear(); clearMarkers(); onNext(); }; if (data.youtuberId) { youtubeMutate(savePlaces, { onSuccess: onSuccessCallback, }); } if (data.name) { naverMutate(savePlaces, { onSuccess: onSuccessCallback, }); }Also applies to: 55-63
38-40:savePlaces객체 생성 시 타입 안전성 강화
places배열에서id를 제외하고 나머지 데이터를 사용하는 과정에서 타입 안전성을 위해 명시적인 타입 지정을 고려해 보세요.const savePlaces: ExtractResponse = { ...data, places: data.places .filter((place) => selectedIds.includes(place.id as number)) .map(({ id, ...placeData }: PlaceType) => placeData), };
49-49:sessionStorage.clear()사용 시 주의 필요
sessionStorage.clear()를 사용하면 세션 스토리지의 모든 데이터가 삭제되어 예상치 못한 부작용이 발생할 수 있습니다. 필요한 데이터만 제거하도록 변경하는 것이 좋습니다.예를 들어:
- sessionStorage.clear(); + sessionStorage.removeItem('yourSpecificKey');Also applies to: 58-58
68-76:findyIconNames배열 접근 시 안전성 검토
findyIconNames[0]를 사용하여 아이콘 이름을 가져오는데, 배열이 비어있을 경우 에러가 발생할 수 있습니다. 배열의 길이를 확인하거나 기본 값을 설정하여 안정성을 높일 수 있습니다.const defaultIconName = findyIconNames.length > 0 ? findyIconNames[0] : 'defaultIcon'; <Icon name={defaultIconName} className="w-11 h-11" />src/pages/Link.tsx (1)
36-41: 조건문 구조 개선 제안두 번째 조건문
if (!link.includes('naver'))은 첫 번째 조건의 부정이므로else를 사용하면 코드가 더욱 간결하고 가독성이 높아집니다.적용 가능한 수정 사항은 다음과 같습니다:
const handleLinkSubmit = async (link: string) => { if (link.includes('naver')) { return await fetchNaverPlace({ url: link }); - } - if (!link.includes('naver')) { + } else { return await fetchYoutubePlaces(); } };
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (15)
docker-compose.yml(0 hunks)src/components/common/ListCard/index.tsx(1 hunks)src/components/common/Typography/index.tsx(1 hunks)src/components/features/BottomSheetContent/BottomSheetContent.tsx(1 hunks)src/components/features/ExtractedPlacesList/ExtractedPlacesList.tsx(3 hunks)src/components/features/LinkForm/LinkInput.tsx(2 hunks)src/components/features/LinkForm/types.ts(1 hunks)src/hooks/api/bookmarks/useNaverBookmark.ts(1 hunks)src/hooks/api/bookmarks/useYoutubeBookmark.ts(1 hunks)src/hooks/api/link/useNaverMapPlace.ts(1 hunks)src/hooks/api/link/useYoutubePlace.ts(1 hunks)src/hooks/common/useBottomFunnel.tsx(2 hunks)src/hooks/common/useYoutubeContext.tsx(1 hunks)src/pages/Link.tsx(2 hunks)src/pages/MapView.tsx(2 hunks)
💤 Files with no reviewable changes (1)
- docker-compose.yml
✅ Files skipped from review due to trivial changes (1)
- src/components/common/ListCard/index.tsx
🧰 Additional context used
🪛 eslint (1.23.1)
src/hooks/api/bookmarks/useNaverBookmark.ts
[error] 1-1: There should be no empty line within import group
(import/order)
[error] 1-1: @tanstack/react-query import should occur after import of @/lib/axios
(import/order)
src/hooks/api/link/useNaverMapPlace.ts
[error] 1-1: There should be no empty line within import group
(import/order)
[error] 3-3: @/lib/external import should occur before import of @tanstack/react-query
(import/order)
🔇 Additional comments (19)
src/components/features/LinkForm/types.ts (1)
5-5: 타입 시그니처 변경이 적절해 보입니다.
onNext 함수의 타입 시그니처 변경이 네이버 즐겨찾기 저장 기능 구현에 적절해 보입니다. 선택적 문자열 매개변수를 추가한 것이 기능 요구사항과 잘 부합합니다.
코드베이스에서 이 변경사항의 영향을 확인하기 위해 다음 스크립트를 실행합니다:
✅ Verification successful
onNext 타입 시그니처 변경이 안전하게 적용되었습니다
LinkFormProps의 onNext 함수 시그니처 변경이 코드베이스 전반에 올바르게 적용되어 있음을 확인했습니다:
LinkInput컴포넌트에서 문자열 값과 함께 호출 (onNext(inputValue))ExtractionStatus,Landing컴포넌트에서 매개변수 없이 호출 (onNext())- 모든 호출 패턴이 새로운 타입 시그니처
(value?: string) => void와 호환됩니다
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: LinkFormProps 타입을 사용하는 모든 컴포넌트에서 onNext 함수의 올바른 사용을 확인합니다.
# LinkFormProps를 사용하는 모든 파일을 검색
rg -l "LinkFormProps"
# onNext 호출 패턴을 검색하여 새로운 시그니처와 일치하는지 확인
ast-grep --pattern 'onNext($$$)'
Length of output: 833
Script:
#!/bin/bash
# LinkFormProps 타입이 사용되는 컴포넌트들의 구현을 자세히 확인
rg -A 5 "LinkFormProps" src/components/features/LinkForm/
# onNext 호출이 발견된 파일들의 import 구문을 확인하여 LinkFormProps 타입을 실제로 사용하는지 검증
rg "import.*LinkFormProps"
# onNext 호출이 있는 컴포넌트들의 props 타입 정의를 확인
ast-grep --pattern 'interface $_ {
$$$
onNext: $$$
$$$
}'
Length of output: 2896
src/hooks/api/bookmarks/useYoutubeBookmark.ts (1)
3-3: 타입 임포트 변경이 적절해 보입니다.
YoutubeResponse에서 ExtractResponse로의 마이그레이션이 일관성 있게 적용되었습니다.
src/components/features/BottomSheetContent/BottomSheetContent.tsx (2)
2-2: 타입 호환성 검증이 필요합니다.
ExtractResponse 타입으로의 변경이 기존 YoutubeResponse 타입과 호환되는지 확인이 필요합니다.
✅ Verification successful
타입 변경이 안전하게 이루어졌습니다
ExtractResponse는 기존 YoutubeResponse를 대체하는 새로운 타입으로, 필요한 모든 필드(name, youtuberId, youtuberName, youtuberProfile, youtubeLink, places)를 포함하고 있습니다. 타입 정의가 명확하고 Place[] 타입과의 조합도 적절히 유지되어 있어 타입 안전성이 보장됩니다.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: ExtractResponse와 YoutubeResponse 타입 정의를 비교
# ExtractResponse 타입 정의 확인
ast-grep --pattern 'type ExtractResponse = {
$$$
}'
# YoutubeResponse 타입 정의 확인
ast-grep --pattern 'type YoutubeResponse = {
$$$
}'
Length of output: 606
Script:
#!/bin/bash
# Let's search for YoutubeResponse type definition with a broader pattern
ast-grep --pattern 'interface YoutubeResponse {
$$$
}'
# Also search for any file containing YoutubeResponse
rg "YoutubeResponse" -A 5
Length of output: 688
Script:
#!/bin/bash
# Let's check the old version of useYoutubePlace.ts to find YoutubeResponse definition
git log -p -- src/hooks/api/link/useYoutubePlace.ts | rg -A 10 "YoutubeResponse"
# Also check for any usage patterns
rg "YoutubeResponse" -B 3 -A 3
Length of output: 634
10-10: 데이터 구조 변경 검증이 필요합니다.
ExtractResponse 타입으로의 변경이 useBottomFunnel 훅의 동작에 영향을 미치지 않는지 확인해주세요. 특히 네이버 즐겨찾기 저장 기능과 관련하여 데이터 구조가 올바르게 처리되는지 검증이 필요합니다.
✅ Verification successful
ExtractResponse 타입 변경이 안전하게 처리되고 있습니다.
검증 결과, ExtractResponse 타입은 다음과 같이 안전하게 처리되고 있음을 확인했습니다:
useBottomFunnel훅은Place[]또는ExtractResponse타입을 모두 처리할 수 있도록 설계되어 있습니다.ExtractResponse타입은 유튜브 장소 데이터를 처리하기 위한 전용 타입으로, 네이버 북마크 저장 기능(useNaverBookmark)에서도 올바르게 사용되고 있습니다.- 데이터 구조 변환 시 필요한 타입 체크와 처리가
ExtractedPlacesList컴포넌트에서 적절히 이루어지고 있습니다.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: useBottomFunnel 훅에서 ExtractResponse 타입 사용 검증
# useBottomFunnel 훅의 구현 확인
ast-grep --pattern 'function useBottomFunnel({ type, data }: {
$$$
})'
# ExtractResponse 타입을 사용하는 다른 컴포넌트 검색
rg -t typescript -t tsx "ExtractResponse" -A 5
Length of output: 156
Script:
#!/bin/bash
# ExtractResponse 타입 정의와 사용처 검색
rg "ExtractResponse" -A 5
# useBottomFunnel 훅 구현 검색
rg "useBottomFunnel" -A 10
# Place 타입 정의 검색
rg "type Place" -A 5
Length of output: 10751
src/hooks/api/bookmarks/useNaverBookmark.ts (1)
3-3: ExtractResponse 타입의 적절성을 확인하세요
useYoutubePlace에서 가져온 ExtractResponse 타입이 네이버 북마크 데이터 구조와 일치하는지 확인이 필요합니다.
Also applies to: 8-8
✅ Verification successful
Let me analyze the findings:
ExtractResponsetype definition fromuseYoutubePlace.ts:
type ExtractResponse = {
name?: string;
youtuberId?: string;
youtuberName?: string;
youtuberProfile?: string;
youtubeLink?: string;
places: Place[];
};- The type is used in both
useNaverBookmarkanduseYoutubeBookmarkfor API requests - The type is also used in
useNaverMapPlacefor Naver Map link extraction
Let me check the Place type structure to ensure complete verification:
ExtractResponse 타입 사용이 적절합니다
ExtractResponse 타입은 네이버 북마크와 유튜브 북마크 모두에서 공통적으로 사용되는 적절한 타입입니다. 이 타입은:
- 장소 정보를 담는
places배열을 포함하며, 각 장소는 네이버 API와 호환되는Place타입으로 정의됨 - 선택적 메타데이터 필드들(
name,youtuberName등)은 유튜브나 네이버 데이터 모두에서 유연하게 사용 가능 useNaverMapPlace와useNaverBookmark모두에서 동일한 구조로 데이터를 처리
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify ExtractResponse type structure and its usage
# Check ExtractResponse type definition
ast-grep --pattern 'type ExtractResponse = {
$$$
}'
# Check other usages of ExtractResponse
rg -A 5 'ExtractResponse'
Length of output: 9201
Script:
#!/bin/bash
# Check Place type definition
ast-grep --pattern 'type Place = {
$$$
}'
# Check if there are any Naver-specific types
rg -l 'type.*Naver.*=|interface.*Naver'
Length of output: 678
src/hooks/api/link/useNaverMapPlace.ts (2)
7-9: 타입 정의가 명확합니다
NaverMapLink 타입이 URL만을 포함하도록 간단하게 정의되어 있어 적절합니다.
13-16: API 엔드포인트 검증이 필요합니다
'naver_bookmark' 엔드포인트가 백엔드에 올바르게 구현되어 있는지 확인이 필요합니다.
src/hooks/api/link/useYoutubePlace.ts (1)
16-18: 구현이 잘 되어있습니다!
URL 인코딩, 조건부 활성화, 제한된 재시도 횟수 등 좋은 구현 방식을 따르고 있습니다.
src/hooks/common/useYoutubeContext.tsx (1)
18-19: 초기 상태 구현이 적절합니다.
상태 초기화가 명확하고 간단하게 구현되어 있습니다.
src/components/features/LinkForm/LinkInput.tsx (4)
14-15: 상태 관리 로직이 개선되었습니다.
컨텍스트와 입력값 상태 관리가 잘 분리되어 있으며, useInput 훅을 통한 입력값 검증이 적절히 구현되었습니다.
25-25: 마진 값 변경이 레이아웃에 영향을 줄 수 있습니다.
마진이 my-32에서 my-36으로 증가했습니다. 모바일 환경에서 스크롤이 발생하지 않는지 확인이 필요합니다.
44-44: 버튼 비활성화 조건이 적절합니다.
입력값의 유효성과 존재 여부를 모두 확인하여 버튼 상태를 결정하는 것이 좋습니다.
18-19: 링크 저장 및 다음 단계 처리가 명확합니다.
handleSaveAndNext 함수에서 상태 업데이트와 콜백 호출 순서가 논리적입니다. 다만, 네이버 링크의 경우 mapx와 mapy 파라미터 처리에 대한 요구사항이 있으므로 검증이 필요합니다.
다음 스크립트로 네이버 지도 URL 처리 로직을 확인해보세요:
✅ Verification successful
네이버 지도 URL 처리가 적절히 구현되어 있습니다.
코드베이스 분석 결과, 네이버 지도 URL에 대한 처리가 다음과 같이 적절히 구현되어 있음을 확인했습니다:
handleLinkSubmit함수에서 네이버 URL을 감지하여fetchNaverPlaceAPI를 호출합니다.useInput훅에서 URL 유효성 검사를 수행합니다.- 네이버 지도 관련
mapx,mapy좌표는src/types/naver.ts와src/utils/naver/addMarkerToMap.ts에서 적절히 처리됩니다.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 네이버 지도 URL 처리 관련 코드 검색
rg -t typescript "mapx|mapy"
Length of output: 65
Script:
#!/bin/bash
# Search for Naver map URL handling logic with common extensions
rg -g '*.{ts,tsx,js,jsx}' "mapx|mapy"
# Search for URL validation or transformation logic
rg -g '*.{ts,tsx,js,jsx}' -B 2 -A 2 "naver.com.*map"
# Look for link validation functions
ast-grep --pattern 'function $_(link: $_) {
$$$
}'
Length of output: 843
Script:
#!/bin/bash
# Search for link validation or transformation logic
rg -g '*.{ts,tsx,js,jsx}' -B 5 -A 5 "setLink|onNext"
# Look for URL validation functions
ast-grep --pattern 'const $_ = (link: string) => {
$$$
}'
# Check for any URL parsing utilities
rg -g '*.{ts,tsx,js,jsx}' -B 3 -A 3 "parseURL|validateURL|isValidURL"
Length of output: 21643
Script:
#!/bin/bash
# Search for URL validation or transformation logic in hooks and utils
rg -g '*.{ts,tsx}' -B 3 -A 3 "useInput|handleLinkSubmit"
# Look for any URL validation in the input hook
ast-grep --pattern 'const useInput = ($$$) => {
$$$
}'
# Check for any URL transformation utilities
rg -g '*.{ts,tsx}' -B 3 -A 3 "transform.*URL|extract.*URL|validate.*URL"
Length of output: 6448
src/components/common/Typography/index.tsx (1)
43-45: <p> 태그에서 <span> 태그로의 변경이 미치는 영향을 검토해주세요.
다음 사항들을 고려해야 합니다:
-
시맨틱 HTML:
<p>태그는 문단을 나타내는 의미론적 요소입니다<span>은 의미론적 가치가 없는 인라인 요소입니다
-
레이아웃:
<span>은 기본적으로 인라인 요소이므로 여백이 없습니다- 현재
whitespace-pre-wrap스타일이 적용되어 있지만, 문단 스타일링에 추가 작업이 필요할 수 있습니다
-
접근성:
- 스크린 리더 사용자들에게 문맥 정보가 줄어들 수 있습니다
다음 스크립트로 Typography 컴포넌트의 사용 패턴을 확인해보세요:
✅ Verification successful
<span> 태그 사용이 적절합니다.
검색 결과를 분석한 결과:
-
Typography 컴포넌트는 주로 짧은 텍스트 요소(제목, 라벨, 설명 등)에 사용되고 있으며, 긴 문단에는 사용되지 않습니다.
-
대부분의 사용 사례가 다음과 같습니다:
- 목록의 제목 (
북마크 리스트,검색 결과) - 카드 내의 짧은 텍스트 (장소명, 주소)
- 상태 메시지나 안내 문구
- 목록의 제목 (
-
Caption 변형은 이미
inline-block을 사용하고 있어, 인라인 요소로의 변경이 자연스럽습니다.
이러한 사용 패턴을 고려할 때, <span> 태그로의 변경은 컴포넌트의 실제 사용 목적에 더 적합합니다.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Typography 컴포넌트가 문단으로 사용되는 경우를 검색
# Typography 컴포넌트의 사용 패턴 확인
rg -t tsx -t jsx "Typography|Title[123]|Body[1234]|Caption" -A 2
Length of output: 94
Script:
#!/bin/bash
# Search for Typography component usage patterns with proper file extensions
rg --type-add 'tsx:*.tsx' --type-add 'jsx:*.jsx' -t tsx -t jsx "Typography|Title[123]|Body[1234]|Caption" -A 2
# Also check if the component is used within paragraph contexts
rg --type-add 'tsx:*.tsx' --type-add 'jsx:*.jsx' -t tsx -t jsx "<p[^>]*>.*?<Typography|<p[^>]*>.*?<Body|<p[^>]*>.*?<Title|<p[^>]*>.*?<Caption"
# Search for any existing accessibility attributes used with Typography
rg --type-add 'tsx:*.tsx' --type-add 'jsx:*.jsx' -t tsx -t jsx "Typography.*aria-|Typography.*role="
Length of output: 17609
src/hooks/common/useBottomFunnel.tsx (3)
9-10: 타입 임포트 변경이 적절합니다!
YoutubeResponse에서 ExtractResponse로의 변경이 일관되게 적용되었습니다.
18-18: 타입 변경의 영향도를 확인해주세요.
Place[] | ExtractResponse 타입으로의 변경이 다른 컴포넌트에 영향을 미치지 않는지 확인이 필요합니다.
다음 스크립트를 실행하여 타입 변경의 영향을 받는 컴포넌트를 확인하세요:
✅ Verification successful
타입 변경이 적절하게 반영되어 있습니다.
ExtractResponse와 Place[] 타입은 이미 코드베이스 전반에 걸쳐 일관되게 사용되고 있습니다. useBottomFunnel 훅의 타입 변경은 다음 파일들에서도 동일한 패턴으로 사용되고 있어 문제가 없습니다:
src/pages/MapView.tsxsrc/components/features/BottomSheetContent/BottomSheetContent.tsxsrc/components/features/ExtractedPlacesList/ExtractedPlacesList.tsx
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: ExtractResponse 타입을 사용하는 컴포넌트 검색
# ExtractResponse 타입 사용 검색
rg -t typescript -t tsx "ExtractResponse"
# Place[] 타입 사용 검색
rg -t typescript -t tsx "Place\[\]"
Length of output: 149
Script:
#!/bin/bash
# Search for ExtractResponse type usage
rg "ExtractResponse"
# Search for Place[] type usage
rg "Place\[\]"
# Search for files containing both types
rg -l "ExtractResponse|Place\[\]"
Length of output: 3832
59-61: ExtractedPlacesList 컴포넌트의 타입 처리를 확인해주세요.
ExtractedPlacesList 컴포넌트가 ExtractResponse 타입의 데이터를 올바르게 처리하는지 확인이 필요합니다.
다음 스크립트를 실행하여 컴포넌트의 타입 처리를 확인하세요:
✅ Verification successful
ExtractedPlacesList 컴포넌트의 타입 처리가 정상적으로 구현되어 있습니다.
ExtractedPlacesList 컴포넌트는 ExtractResponse 타입을 명시적으로 Props 타입으로 정의하고 있으며, 컴포넌트 내부에서도 해당 타입에 맞게 데이터를 올바르게 처리하고 있습니다.
src/components/features/ExtractedPlacesList/ExtractedPlacesList.tsx에서 Props 타입이type Props = { data: ExtractResponse; onNext: () => void }로 정확하게 정의되어 있습니다.ExtractResponse타입은src/hooks/api/link/useYoutubePlace.ts에서 정의되어 있으며, 전체 애플리케이션에서 일관되게 사용되고 있습니다.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: ExtractedPlacesList 컴포넌트의 props 타입 검증
# ExtractedPlacesList 컴포넌트 정의 검색
ast-grep --pattern 'interface $props {
$$$
data: $type
$$$
}'
# ExtractedPlacesList 컴포넌트 내부의 data 사용 검색
rg -t typescript -t tsx "ExtractedPlacesList" -A 10
Length of output: 156
Script:
#!/bin/bash
# Search for ExtractedPlacesList component definition and usage
rg "ExtractedPlacesList" -A 10
# Search for files containing ExtractedPlacesList
fd "ExtractedPlacesList"
# Search for interface or type definitions related to ExtractedPlacesList
rg "interface.*ExtractedPlacesList|type.*ExtractedPlacesList"
# Search for ExtractResponse type definition
rg "ExtractResponse"
Length of output: 5411
src/pages/MapView.tsx (1)
24-24: 북마크 상태 처리 보완 필요
ExtractResponse 타입을 포함하도록 상태 타입이 변경되었지만, 즐겨찾기 관련 상태 처리가 명시적으로 구현되어 있지 않습니다.
다음 스크립트로 북마크 관련 타입 정의를 확인해보겠습니다:
src/components/features/ExtractedPlacesList/ExtractedPlacesList.tsx (1)
46-54: 조건문 로직 검토 필요
현재 if 조건문이 연속으로 사용되어 data.youtuberId와 data.name이 모두 존재할 경우 두 번의 뮤테이션이 발생합니다. 의도된 동작인지 확인이 필요합니다.
만약 하나의 뮤테이션만 실행되도록 의도했다면 else if 문을 사용하세요:
if (data.youtuberId) {
// youtubeMutate...
} else if (data.name) {
// naverMutate...
}Also applies to: 55-63
| const [selectedIds, setSelectedIds] = useState<number[]>([]); | ||
| const [isOpen, setIsOpen] = useState<boolean>(false); | ||
|
|
||
| const { token } = useAuth(); | ||
| const { clearMarkers } = useMarkers(); | ||
| const { mutate: bookmarkMutate } = useYoutubeBookmark(token); | ||
| const { mutate: youtubeMutate } = useYoutubeBookmark(token); | ||
| const { mutate: naverkMutate } = useNaverBookmark(token); |
There was a problem hiding this comment.
'naverkMutate' 변수명 오타 수정 필요
naverkMutate 변수명에서 'k'가 추가된 오타로 보입니다. 올바른 변수명은 naverMutate이어야 합니다.
다음과 같이 수정하십시오:
- const { mutate: naverkMutate } = useNaverBookmark(token);
+ const { mutate: naverMutate } = useNaverBookmark(token);
...
- if (data.name) {
- naverkMutate(savePlaces, {
+ if (data.name) {
+ naverMutate(savePlaces, {
onSuccess: () => {
sessionStorage.clear();
clearMarkers();
onNext();
},
});
}Also applies to: 56-63
| {typeof item.category === 'object' ? ( | ||
| <Chip variant="medium">{item.category.majorCategory}</Chip> | ||
| ) : ( | ||
| <Chip variant="medium">{item.category}</Chip> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
item.category의 타입 정의 개선 필요
typeof item.category === 'object'로 타입을 체크하는 대신, 타입스크립트의 타입 시스템을 활용하여 item.category의 타입을 명확히 정의하면 코드의 안정성과 가독성을 높일 수 있습니다.
예를 들어, Category 타입을 정의하고 item.category에 적용해 보세요:
type Category = {
majorCategory: string;
};
...
{item.category && (
<Chip variant="medium">
{typeof item.category === 'object'
? (item.category as Category).majorCategory
: item.category}
</Chip>
)}| onNext={(link) => { | ||
| handleLinkSubmit(link as string); | ||
| setStep('추출상태'); |
There was a problem hiding this comment.
비동기 함수 호출 시 await 누락
비동기 함수 handleLinkSubmit를 호출할 때 await를 사용하지 않아 비동기 작업 완료 전에 setStep('추출상태')가 실행될 수 있습니다. await를 추가하여 함수 호출이 완료된 후 다음 단계로 진행되도록 해야 합니다.
적용 가능한 수정 사항은 다음과 같습니다:
onNext={async (link) => {
- handleLinkSubmit(link as string);
+ await handleLinkSubmit(link as string);
setStep('추출상태');
}}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| onNext={(link) => { | |
| handleLinkSubmit(link as string); | |
| setStep('추출상태'); | |
| onNext={async (link) => { | |
| await handleLinkSubmit(link as string); | |
| setStep('추출상태'); |
| const handleLinkSubmit = async (link: string) => { | ||
| if (link.includes('naver')) { | ||
| return await fetchNaverPlace({ url: link }); | ||
| } | ||
| if (!link.includes('naver')) { | ||
| await fetchYoutubePlaces(); | ||
| } | ||
| }; |
There was a problem hiding this comment.
비동기 함수의 반환값 일관성 필요
함수 handleLinkSubmit에서 첫 번째 조건에서는 return await를 사용하지만, 두 번째 조건에서는 await만 사용하고 있습니다. 함수의 반환값이 일관되도록 두 조건 모두에서 return을 사용하거나 제거해야 합니다.
적용 가능한 수정 사항은 다음과 같습니다:
const handleLinkSubmit = async (link: string) => {
if (link.includes('naver')) {
return await fetchNaverPlace({ url: link });
}
- if (!link.includes('naver')) {
+ else {
return await fetchYoutubePlaces();
}
};📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const handleLinkSubmit = async (link: string) => { | |
| if (link.includes('naver')) { | |
| return await fetchNaverPlace({ url: link }); | |
| } | |
| if (!link.includes('naver')) { | |
| await fetchYoutubePlaces(); | |
| } | |
| }; | |
| const handleLinkSubmit = async (link: string) => { | |
| if (link.includes('naver')) { | |
| return await fetchNaverPlace({ url: link }); | |
| } | |
| else { | |
| return await fetchYoutubePlaces(); | |
| } | |
| }; |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (3)
src/components/features/SearchResultsList/BookmarkSelectionList.tsx (1)
Line range hint
45-75: 코드 구조가 개선되었으며, 몇 가지 접근성 개선사항을 제안드립니다.현재 구현은 잘 되어있으나, 다음과 같은 개선사항을 고려해보시면 좋을 것 같습니다:
- 체크 아이콘에 대한 aria-label 추가
- 북마크 선택 상태에 대한 시각적 피드백 강화
다음과 같이 수정해보시는 것은 어떨까요:
<Icon name="check" className="cursor-pointer h-7" color={bookmarkId === item.bookmarkId ? 'primary' : 'gray'} onClick={() => handleToggleSelect(item.bookmarkId)} + aria-label={`${item.name} 북마크 ${bookmarkId === item.bookmarkId ? '선택됨' : '선택'}`} />추가로, 선택된 항목에 대한 시각적 피드백을 강화하기 위해 배경색 변경을 고려해보세요:
-<div className={`flex flex-row justify-between items-center `}> +<div className={`flex flex-row justify-between items-center ${ + bookmarkId === item.bookmarkId ? 'bg-primary-50' : '' +}`}>src/components/features/ExtractedPlacesList/ExtractedPlacesList.tsx (2)
38-40: 불필요한 ESLint 주석 제거를 위한 코드 수정 제안
// eslint-disable-next-line @typescript-eslint/no-unused-vars주석을 사용하여 ESLint 경고를 무시하고 있습니다. 이는 사용되지 않는 변수를 제거함으로써 해결할 수 있습니다. 비구조화 할당에서id변수를 제외하면 주석 없이도 경고를 없앨 수 있습니다.다음과 같이 수정해보세요:
const savePlaces: ExtractResponse = { ...data, places: data.places .filter((place) => selectedIds.includes(place.id as number)) - .map(({ id, ...placeData }) => placeData), + .map((placeData) => placeData), };또는 간단히:
const savePlaces: ExtractResponse = { ...data, places: data.places .filter((place) => selectedIds.includes(place.id as number)), };
46-63: 중복된 코드의 리팩터링 제안
youtubeMutate와naverMutate호출 부분에서 동일한 로직이 반복되고 있습니다. 이를 함수로 추출하여 중복을 줄이면 코드의 가독성과 유지보수성이 향상됩니다.다음과 같이 공통 함수를 만들어 중복 코드를 제거할 수 있습니다:
+ const handleMutate = (mutateFunction: typeof youtubeMutate | typeof naverMutate) => { + mutateFunction(savePlaces, { + onSuccess: () => { + sessionStorage.clear(); + clearMarkers(); + onNext(); + }, + }); + }; if (data.youtuberId) { - youtubeMutate(savePlaces, { - onSuccess: () => { - sessionStorage.clear(); - clearMarkers(); - onNext(); - }, - }); + handleMutate(youtubeMutate); } if (data.name) { - naverMutate(savePlaces, { - onSuccess: () => { - sessionStorage.clear(); - clearMarkers(); - onNext(); - }, - }); + handleMutate(naverMutate); }
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (3)
src/components/common/Typography/index.tsx(2 hunks)src/components/features/ExtractedPlacesList/ExtractedPlacesList.tsx(3 hunks)src/components/features/SearchResultsList/BookmarkSelectionList.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/components/common/Typography/index.tsx
🔇 Additional comments (1)
src/components/features/ExtractedPlacesList/ExtractedPlacesList.tsx (1)
11-11: 타입 정의의 정확성을 위해 Import 경로 확인 필요
ExtractResponse 타입을 useYoutubePlace 모듈에서 가져오고 있습니다. 그러나 이 타입이 더 적절한 모듈에 정의되어 있을 수 있습니다. 타입 정의의 일관성과 정확성을 위해 Import 경로를 재확인해 주세요.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (5)
src/components/features/BookmarkDetail/BookmarkDetail.tsx (3)
50-55: 카테고리 렌더링 로직 개선이 필요합니다.현재 구현은 두 가지 형태의 카테고리(객체와 문자열)를 처리할 수 있지만, 다음과 같은 개선사항을 고려해보세요:
- 타입 가드를 사용하여 더 안전한 타입 체크를 구현
- 카테고리가 없는 경우의 폴백(fallback) 처리 추가
다음과 같이 개선할 수 있습니다:
- {item.category && ( - <Chip variant="medium"> - {typeof item.category === 'object' - ? (item.category as Category).majorCategory - : item.category} - </Chip> - )} + {item.category && ( + <Chip variant="medium"> + {isCategory(item.category) + ? item.category.majorCategory + : item.category || '기타'} + </Chip> + )}타입 가드 함수를 추가하세요:
function isCategory(category: unknown): category is Category { return typeof category === 'object' && category !== null && 'majorCategory' in category; }
Line range hint
1-67: 성능 최적화 검토가 필요합니다.
useEffect내에서setMarkers를 호출할 때 불필요한 리렌더링이 발생할 수 있습니다. 데이터가 실제로 변경되었을 때만 업데이트하도록 최적화가 필요합니다.다음과 같이 개선할 수 있습니다:
useEffect(() => { if (data?.markers?.data) { const newMarkers = data.markers.data; setMarkers(prevMarkers => JSON.stringify(prevMarkers) !== JSON.stringify(newMarkers) ? newMarkers : prevMarkers ); } }, [data?.markers?.data, setMarkers]);
Line range hint
1-67: 접근성 개선이 필요합니다.목록 아이템에 적절한 ARIA 레이블과 역할이 누락되어 있습니다. 스크린 리더 사용자를 위한 접근성 개선이 필요합니다.
다음과 같은 접근성 속성을 추가하는 것을 추천드립니다:
- <ListCard> + <ListCard role="list" aria-label="북마크 위치 목록"> {data?.markers.data.map((item, index) => ( - <div key={item.markerId}> + <div + key={item.markerId} + role="listitem" + aria-label={`${item.title} - ${item.address}`} + >src/components/features/ExtractedPlacesList/ExtractedPlacesList.tsx (2)
47-64: 성공 콜백 로직 중복 개선 필요성공 콜백 로직이 YouTube와 Naver 뮤테이션에서 중복되어 있습니다. 다음과 같이 공통 콜백을 추출하여 코드를 개선할 수 있습니다:
+ const handleSuccess = () => { + sessionStorage.clear(); + clearMarkers(); + onNext(); + }; if (data.youtuberId) { - youtubeMutate(savePlaces, { - onSuccess: () => { - sessionStorage.clear(); - clearMarkers(); - onNext(); - }, - }); + youtubeMutate(savePlaces, { onSuccess: handleSuccess }); } if (data.name) { - naverMutate(savePlaces, { - onSuccess: () => { - sessionStorage.clear(); - clearMarkers(); - onNext(); - }, - }); + naverMutate(savePlaces, { onSuccess: handleSuccess }); }
69-77: 접근성 개선 필요프로필 이미지와 아이콘에 대한 접근성을 개선할 수 있습니다:
{data.youtuberProfile ? ( <img src={data.youtuberProfile || ''} className="w-12 h-12 rounded-full " - alt={`${data.youtuberName}프로필 이미지`} + alt={`${data.youtuberName || data.name} 프로필 이미지`} /> ) : ( - <Icon name={findyIconNames[0]} className="w-11 h-11" /> + <Icon + name={findyIconNames[0]} + className="w-11 h-11" + aria-label={`${data.youtuberName || data.name} 기본 프로필`} + /> )}
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (3)
src/components/features/BookmarkDetail/BookmarkDetail.tsx(2 hunks)src/components/features/ExtractedPlacesList/ExtractedPlacesList.tsx(3 hunks)src/components/features/SearchResultsList/SearchResultsList.tsx(2 hunks)
🔇 Additional comments (4)
src/components/features/BookmarkDetail/BookmarkDetail.tsx (1)
11-11: 타입 임포트가 적절히 추가되었습니다.
네이버 카테고리 타입을 명시적으로 임포트하여 타입 안전성이 향상되었습니다.
src/components/features/SearchResultsList/SearchResultsList.tsx (1)
10-10: 타입 정의가 적절히 추가되었습니다!
네이버 API의 카테고리 타입을 명시적으로 import하여 타입 안전성이 향상되었습니다.
src/components/features/ExtractedPlacesList/ExtractedPlacesList.tsx (2)
8-18: 타입 변경이 적절히 이루어졌습니다!
ExtractResponse 타입을 사용하여 YouTube와 Naver 데이터를 모두 처리할 수 있도록 개선되었습니다.
96-101: 카테고리 타입 정의 개선 필요
typeof item.category === 'object'로 타입을 체크하는 대신, 타입스크립트의 타입 시스템을 활용하여 더 안전한 타입 체크를 구현할 수 있습니다.
| {item.category && ( | ||
| <Chip variant="medium"> | ||
| {typeof item.category === 'object' | ||
| ? (item.category as Category).majorCategory | ||
| : item.category} | ||
| </Chip> | ||
| )} |
There was a problem hiding this comment.
🛠️ Refactor suggestion
타입 가드를 사용하여 타입 안전성을 개선해주세요.
현재 구현은 타입 단언(type assertion)을 사용하고 있어 런타임 오류가 발생할 수 있습니다.
다음과 같이 개선하는 것을 추천드립니다:
- {typeof item.category === 'object'
- ? (item.category as Category).majorCategory
- : item.category}
+ {typeof item.category === 'object' && 'majorCategory' in item.category
+ ? item.category.majorCategory
+ : item.category}이렇게 수정하면:
- 타입 가드를 통해 더 안전한 타입 체크가 가능합니다
- 런타임에서
majorCategory속성의 존재 여부를 확인할 수 있습니다
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| {item.category && ( | |
| <Chip variant="medium"> | |
| {typeof item.category === 'object' | |
| ? (item.category as Category).majorCategory | |
| : item.category} | |
| </Chip> | |
| )} | |
| {item.category && ( | |
| <Chip variant="medium"> | |
| {typeof item.category === 'object' && 'majorCategory' in item.category | |
| ? item.category.majorCategory | |
| : item.category} | |
| </Chip> | |
| )} |
관련 이슈
close #63
📑 작업 내용
123.mov
💬 리뷰 중점 사항/기타 참고 사항
mapx,mapy.이 제거된 상태로 테스트가 필요합니다.Summary by CodeRabbit
New Features
useNaverBookmark및useNaverMapPlace훅 추가로 Naver 플랫폼에서 북마크 생성 가능.Link컴포넌트에서 Naver 및 YouTube 링크 처리 기능 개선.변경 사항
ExtractResponse로 업데이트하여 데이터 구조 일관성 향상.LinkInput및ExtractedPlacesList컴포넌트의 상태 관리 및 props 구조 변경.BookmarkDetail및SearchResultsList컴포넌트에서 카테고리 처리 로직 개선.버그 수정
BookmarkSelectionList의 JSX 구조 간소화로 코드 가독성 향상.