Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary of Changes
Hello @Dobbymin, 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은 카카오맵 API를 활용한 주소 검색 기능을 구현하고, Zustand를 사용하여 지도 좌표를 전역적으로 관리하는 시스템을 구축합니다. 사용자가 주소를 입력하고 검색하면 카카오맵 API를 통해 좌표를 얻어 지도에 표시하며, 기존 UI 컴포넌트들을 개선하여 사용자 경험을 향상시킵니다.
Highlights
- 카카오맵 API 주소 검색 기능 구현: 주소를 좌표로 변환하는 유틸리티 함수와 이를 활용한 주소 검색 훅(useKakaoAddressSearch)을 추가했습니다.
- Zustand를 이용한 지도 좌표 전역 상태 관리: 지도 좌표를 전역적으로 관리하는 Zustand 스토어(useMapAddress)를 도입하여 props drilling 문제를 해결하고 성능을 최적화했습니다.
- 주소 입력 필드 개선 및 통합: react-daum-postcode를 사용하여 주소 검색 UI를 통합하고, 검색된 주소를 자동으로 입력 필드에 채우며, 지도 아이콘 버튼 클릭 시 카카오맵 API 검색을 트리거하도록 했습니다.
- 지도 컴포넌트 동적 좌표 설정: MapSection 컴포넌트가 Zustand 스토어에서 지도 좌표를 구독하여 실시간으로 지도 위치를 업데이트할 수 있도록 변경했습니다.
- 코드 구조 및 타입 정의 개선: 카카오맵 API 타입 정의를 전역으로 선언하고, 관련 유틸리티 및 UI 컴포넌트를 entities/map 디렉토리로 재구성했습니다.
Using Gemini Code Assist
The 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 in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.
| Feature | Command | Description |
|---|---|---|
| Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
| Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
| Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in issue comments and review comments. |
| Help | /gemini help |
Displays a list of available commands. |
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 .gemini/ folder in the base of the repository. Detailed instructions can be found here.
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
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
src/entities/map/ui/KakaoMap.tsx
Outdated
| if (error) return <div>Error: {error.message}</div>; | ||
| if (loading) return <Spinner />; | ||
|
|
||
| if (error) return toast.error(error.message); |
There was a problem hiding this comment.
렌더링 함수 내에서 toast.error()와 같은 사이드 이펙트를 유발하는 함수를 직접 호출하는 것은 React의 설계 원칙에 어긋납니다. 렌더링 함수는 순수해야 하며, UI를 반환하는 역할에 집중해야 합니다. toast.error는 토스트 ID를 반환하며, React는 이를 텍스트로 렌더링하려고 시도하여 의도치 않은 UI가 표시될 수 있습니다.
사이드 이펙트는 useEffect 훅을 사용하여 처리하는 것이 올바른 방법입니다. 이렇게 수정하면 컴포넌트의 예측 가능성이 높아지고, React의 동시성 렌더링(Concurrent Rendering)과 같은 최적화 기능을 사용할 때 발생할 수 있는 잠재적인 문제를 방지할 수 있습니다.
아래와 같이 수정하는 것을 권장합니다.
import { useEffect } from 'react';
// ...
export const KakaoMap = ({ lat, lng }: Props) => {
const [loading, error] = useKakaoLoader({
// ...
});
useEffect(() => {
if (error) {
toast.error(error.message);
}
}, [error]);
// ...
if (error) return <div>지도를 불러오는데 실패했습니다.</div>;
return (
// ...
);
};| useEffect(() => { | ||
| const handleKeyDown = (event: KeyboardEvent) => { | ||
| if (event.key === 'Escape' && isOpen) { | ||
| setIsOpen(false); | ||
| } | ||
| }; | ||
|
|
||
| if (isOpen) { | ||
| document.addEventListener('keydown', handleKeyDown); | ||
| } | ||
|
|
||
| return () => { | ||
| document.removeEventListener('keydown', handleKeyDown); | ||
| }; | ||
| }, [isOpen]); |
There was a problem hiding this comment.
주소 검색 모달이 열렸을 때 배경 콘텐츠가 스크롤되는 문제가 있습니다. 이는 사용자 경험을 저해할 수 있습니다.
모달이 활성화될 때 document.body의 overflow 스타일을 hidden으로 설정하고, 모달이 닫힐 때 원래 값으로 복원하여 배경 스크롤을 방지하는 것이 좋습니다.
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === 'Escape' && isOpen) {
setIsOpen(false);
}
};
if (isOpen) {
document.body.style.overflow = 'hidden';
document.addEventListener('keydown', handleKeyDown);
}
return () => {
document.body.style.overflow = 'unset';
document.removeEventListener('keydown', handleKeyDown);
};
}, [isOpen]);| } catch { | ||
| setSearchResult({ | ||
| success: false, | ||
| error: '주소 검색 중 오류가 발생했습니다.', | ||
| }); |
There was a problem hiding this comment.
try...catch 구문에서 catch 블록이 비어 있어, searchAddressToCoordinates 함수에서 예기치 않은 오류가 발생했을 때 해당 정보가 무시될 수 있습니다. 이로 인해 디버깅이 어려워질 수 있습니다.
오류를 console.error 등으로 기록하여 개발 중에 문제를 쉽게 파악하고 해결할 수 있도록 하는 것이 좋습니다.
| } catch { | |
| setSearchResult({ | |
| success: false, | |
| error: '주소 검색 중 오류가 발생했습니다.', | |
| }); | |
| } catch (error) { | |
| console.error('주소 검색 중 예기치 않은 오류 발생:', error); | |
| setSearchResult({ | |
| success: false, | |
| error: '주소 검색 중 오류가 발생했습니다.', | |
| }); |
| {isOpen && ( | ||
| <div className='fixed inset-0 z-50 flex items-center justify-center bg-black/50'> | ||
| <div className='mx-4 w-full max-w-md rounded-lg bg-white'> | ||
| <div className='scrollbar-hide flex items-center justify-between border-b py-3 pr-2 pl-5'> | ||
| <h3 className='text-lg font-semibold'>주소 검색</h3> | ||
| <Button | ||
| type='button' | ||
| variant='ghost' | ||
| onClick={closeSearch} | ||
| className='text-gray-500 hover:text-gray-700' | ||
| > | ||
| <X className='size-5' /> | ||
| </Button> | ||
| </div> | ||
| <DaumPostcode | ||
| onComplete={completeAddress} | ||
| onClose={closeSearch} | ||
| style={{ width: '100%', height: '400px' }} | ||
| /> | ||
| </div> | ||
| </div> | ||
| )} |
There was a problem hiding this comment.
현재 주소 검색 모달이 div로 구현되어 있어 웹 접근성 측면에서 개선의 여지가 있습니다. 스크린 리더 사용자가 모달을 인지하기 어렵고, 키보드 포커스가 모달 내부에 갇히지 않아(focus trap) 키보드 사용성이 떨어질 수 있습니다.
Radix UI와 같은 UI 라이브러리에서 제공하는 Dialog 컴포넌트를 사용하면 접근성 관련 기능(ARIA 속성, 포커스 관리, 포털 렌더링 등)을 쉽게 구현할 수 있습니다. 이미 프로젝트에서 Radix UI를 사용하고 있으니 Dialog 컴포넌트를 활용하여 개선하는 것을 고려해보세요.
1 participant
📝 요약 (Summary)
카카오맵 API를 활용한 주소 검색 기능을 구현하고, Zustand를 사용한 전역 상태 관리 시스템을 구축했습니다. 사용자가 주소를 입력하고 검색하면 카카오맵 API를 통해 좌표를 얻어 지도에 표시하는 기능을 추가했습니다.
✅ 주요 변경 사항 (Key Changes)
💻 상세 구현 내용 (Implementation Details)
1. 카카오맵 API 유틸리티 (src/shared/utils/kakao-map-utils.ts)
2. 전역 상태 관리 (src/features/main/store/useMapAddress.ts)
3. 주소 검색 훅 (src/features/main/hooks/useKakaoAddressSearch.ts)
4. 지도 컴포넌트 업데이트 (src/features/main/ui/MapSection.tsx)
5. 주소 입력 필드 개선 (src/features/main/components/common/AddressField.tsx)
🚀 트러블 슈팅 (Trouble Shooting)
1. Props Drilling 문제 해결
2. 카카오맵 API 타입 정의
3. 비동기 처리 최적화
📸 스크린샷 (Screenshots)
주소 검색 기능 구현으로 인한 UI 변경사항:
#️⃣ 관련 이슈 (Related Issues)