[Feat/#97] map UI 구현#98
Conversation
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
|
Thanks for the contribution! Please review the labels and make any necessary changes. |
![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
This pull request implements a comprehensive map search feature across admin, partner, and student roles, introducing new store entities, a map search feature with debounced querying, and reusable map widgets. It also enhances the chat entity with a list view and updated item interactions, alongside various routing updates. Review feedback highlights a discrepancy in the partner chat page padding, suggests more stable layout techniques for empty search results, recommends adding scrollability to the popular stores section, and cautions against global style changes in shared components.
| withTopInset={true} | ||
| withBottomInset={false} | ||
| className="flex-1 bg-canvas" | ||
| contentContainerClassName="flex-1 px-6 pt-6" |
There was a problem hiding this comment.
8번 라인의 주석에서는 채팅방 아이템이 화면 끝까지 닿아야 하므로 px-6을 적용하지 않았다고 설명되어 있으나, 실제 코드인 contentContainerClassName에는 px-6이 포함되어 있습니다. 또한 내부의 PageTitle 영역(17번 라인)에도 px-6이 적용되어 있어 제목 부분에 중복 패딩이 발생합니다. Figma 디자인 명세에 따라 의도에 맞게 contentContainerClassName에서 px-6을 제거해 주세요.
| contentContainerClassName="flex-1 px-6 pt-6" | |
| contentContainerClassName="flex-1 pt-6" |
References
- Ensure UI component values prioritize Figma design specifications and maintain correct punctuation and spacing.
|
|
||
| {isSearching ? ( | ||
| !isSearchLoading && searchResults.length === 0 ? ( | ||
| <View className="flex-1 items-center justify-start pt-[15rem] gap-2 px-6"> |
There was a problem hiding this comment.
검색 결과가 없을 때의 위치를 잡기 위해 pt-[15rem]과 같은 큰 상단 패딩을 사용하고 있습니다. 이는 기기 화면 크기에 따라 일관되지 않은 UI를 보여줄 수 있으며, React Native 환경에서 rem 단위 사용은 설정에 따라 의도치 않게 동작할 수 있습니다. Figma 디자인 명세를 확인하여 justify-center를 사용하여 수직 중앙 정렬을 하는 것이 더 안정적입니다.
| <View className="flex-1 items-center justify-start pt-[15rem] gap-2 px-6"> | |
| <View className="flex-1 items-center justify-center gap-2 px-6"> |
References
- Prioritize Figma design specifications as the source of truth for UI values and layout consistency.
| ) : ( | ||
| showPopular && | ||
| popularStores.length > 0 && ( | ||
| <View className="px-[14px] pt-5"> |
There was a problem hiding this comment.
"지금 많이 찾는 제휴 매장" 섹션이 스크롤 가능한 뷰(ScrollView 등)로 감싸져 있지 않습니다. 인기 매장 목록이 길어질 경우 화면 하단이 잘려 보이지 않을 수 있으므로, Figma 디자인 명세에 맞춰 해당 섹션이 스크롤 가능하도록 개선이 필요합니다. (참고: ScrollView를 사용하려면 상단에 임포트가 필요합니다.)
References
- UI changes should be based on authoritative design specifications like Figma.
| <Pressable | ||
| onPress={onActionPress} | ||
| className={`rounded-lg px-5 py-3 ${ | ||
| className={`rounded-lg px-[10px] py-[5px] ${ |
There was a problem hiding this comment.
공통 컴포넌트인 SummaryCard 내부 버튼의 패딩을 px-5 py-3에서 px-[10px] py-[5px]로 변경하셨습니다. 이 컴포넌트를 사용하는 다른 페이지들에서 버튼 크기가 작아지는 등 의도치 않은 UI 변경이 발생할 수 있습니다. Figma 디자인 명세가 전체 변경을 지시한 것이 아니라면, 별도의 스타일 props를 추가하여 처리하는 것을 권장합니다.
References
- Prioritize Figma design specifications for UI component values and avoid unintended global style changes.
[FEAT/#100] web-hook 기반 카카오 맵 연동
4 participants
요약
관련 이슈
작업 세부사항
app— 학생/관리자/파트너 역할별map-search라우트 스크린 추가entities/store—SearchResultStore타입 확장 (address,isPartner,partnershipStartDate/EndDate필드 추가)features/map-search—usePopularStores,useSearchStoresReact Query 훅 및 mock 데이터 구현shared/lib/hooks—useDebounce훅 추가shared/assets/icons—location아이콘 추가widgets/map—MapView,MapSearchBar,StudentStoreCard,AdminStoreCard,SearchResultCard구현pages/map-search— 역할 prop을 받는MapSearchPage구현 (인기 랭킹, 검색 결과 FlatList, debounce 적용)pages/*/map— 학생/관리자/파트너 각 역할의 맵 탭 페이지 구현참고사항
shared/ui/summary-card/SummaryCard기준을 따르되, 확장성을 위해 독립 구현했습니다.