[Feat] 수리점 페이지 제작 by jwj0620gcu · Pull Request #76 · Leets-Official/LOOPIT-FE

jwj0620gcu · 2026-01-30T17:36:08Z

✨ 주요 변경사항

수리점 페이지 UI 제작 및 카카오맵 렌더링 하여 수리점 보이도록 하게 하였습니다.

📝 작업 상세 내용

수리점 페이지 UI 제작
카카오맵 렌더링 및 서치바와 연결
검색 결과 거리순 정렬 + 총 개수 표시
마커 및 카드 상세/연락/길찾기 동작 연결

✅ 체크리스트

PR 본문에 Close #번호 추가
불필요한 주석, 디버깅 코드 제거
기능 테스트 및 정상 동작 확인
커밋컨벤션 / 코드컨벤션 준수

📸 스크린샷 (선택)

2026-01-31.2.30.06.1.1.1.mov

🔍 기타 참고사항

마커 색은 기존 카카오맵 마커(파란색)->민트색으로 변경했습니다.
검색 상태 ui(검색 전, 검색 에러, 검색 존재 x)따로 만들었습니다.
수리점 보여주는 걸 반경 5km로 했는데 서울 지역(강남, 용산 등)으로 하면 엄청 많이 나오는데 반경을 줄일까요!?

🔗 관련 이슈

Close [Feat] #73 - 수리점 페이지 제작 #73

github-actions · 2026-01-30T17:37:27Z

PR 검증 결과

✅ TypeScript: 통과
✅ ESLint: 통과
✅ Prettier: 통과
✅ Test: 통과
✅ Build: 성공
Build Size: 6MB

KyeongJooni

고생하셨습니다! 현재 피그마에서는 헤더사이즈와 미니맵 사이즈가 동일한 가로를 차지하는 것으로 보이는데 구현해주신 부분에서는 사이즈가 살짝 다른 것 같습니다! 확인해보시면 좋을 것 같아요!! 추가로 전체적으로 Text를 작성하실 때와 컴포넌트 속성 값들을 인라인에서 속성 설정해서 작성하고 있는데 디자인 시스템 토큰 값하고 type 스타일 확인하시고 변경하면 좋을 것 같습니다!! 👍

KyeongJooni · 2026-01-31T10:41:48Z

+  CustomOverlay: new (options: {
+    yAnchor: number;
+    zIndex: number;
+    content?: string;
+    position?: unknown;
+  }) => KakaoOverlay;


clickable 타입 정의해야 할 것 같습니다 TypeScript 에러 발생할 수 도 있을 것 같습니다...!

정의해서 추가했습니다!

KyeongJooni · 2026-01-31T10:42:46Z

+      Promise.all(SEARCH_KEYWORDS.map((keyword) => searchByKeyword(keyword))).then((results) => {
+        clearMarkers();


현재 검생중의 에러 발생 시 처리가 없기 때문에 에러처리를 추가하면 좋을 것 같습니다!

에러 처리 추가했습니다!

KyeongJooni · 2026-01-31T10:43:51Z

+  const [isMapReady, setIsMapReady] = useState(false);
+
+  useEffect(() => {
+    const kakao = (window as Window & { kakao?: { maps?: KakaoMaps } }).kakao;


동일한 선언이 중복되고 있는 것 같습니다 상수로 추출하거나 헬퍼 함수로 분리하면 좋을 것 같아요! 😄

getKakaoMaps() 헬퍼 함수로 분리했습니다!

KyeongJooni · 2026-01-31T10:47:20Z

+          <Button
+            variant="fill"
+            size="full"
+            className="h-[44px] rounded-[var(--radius-l)] bg-[var(--color-white)] text-[var(--color-gray-900)] hover:bg-[var(--color-gray-100)]"
+            onClick={handleContactClick}
+          >


Button 컴포넌트의 variant 시스템을 사용하지 않고 직접 스타일을 덮어쓰고 있는 것 같습니다! 필요하다면 Button에 새로운 variant를 추가해서 사용하면 좋을 것 같습니다!

Button에 새로운 variant를 추가해서 사용했습니다!

KyeongJooni · 2026-01-31T10:50:38Z

+const kakaoMapKey = import.meta.env.VITE_KAKAO_JS_KEY;
+const kakaoMapSrc = kakaoMapKey
+  ? `https://dapi.kakao.com/v2/maps/sdk.js?appkey=${kakaoMapKey}&libraries=services&autoload=false`
+  : null;


현재 SDK URL 직접 하드 코딩 되어있는데 상수로 분리하거나 env에 넣어서 관리하면 더 좋을 것 같습니다!

상수 처리했습니다!

github-actions · 2026-01-31T10:53:34Z

PR 검증 결과

✅ TypeScript: 통과
✅ ESLint: 통과
✅ Prettier: 통과
✅ Test: 통과
✅ Build: 성공
Build Size: 6MB

github-actions · 2026-01-31T14:40:28Z

PR 검증 결과

✅ TypeScript: 통과
✅ ESLint: 통과
✅ Prettier: 통과
✅ Test: 통과
✅ Build: 성공
Build Size: 6MB

github-actions · 2026-01-31T17:17:46Z

PR 검증 결과

✅ TypeScript: 통과
✅ ESLint: 통과
✅ Prettier: 통과
✅ Test: 통과
✅ Build: 성공
Build Size: 6MB

KyeongJooni

수고하셨습니다!!

jwj0620gcu added 14 commits January 30, 2026 20:07

feat: 수리점 페이지 라우트 추가

ca40745

feat:헤더, 지도 섹션, 수리점 컴포넌트 구현

db746fb

feat: 서치바 크기 변주 가능하게 수정

fe80206

feat:카카오 맵 렌더링

0b3eaa8

feat: 카카오맵과 서치바 지도 연결, 수리점 검색, 마커 렌더링

cac5f32

feat: 수리점 확장 검색 가능, 페이지네이션 가능

980b444

feat:마커 인포윈도우(전화/상세/길찾기)

8e6e3a3

마커 클릭시 지도 중앙 이동 적용

28f9ead

카드 연락, 길 찾기 버튼 연결, ui 결과 분기

195d13d

feat:문구,마커 ui,윈도우 ui 변경

8b85044

feat:기본 마커에서 민트색으로 변경

58da8f6

refactor:로직 모델로 분리 및 공용 타입 분리

fd6c274

feat:반응형 적용

0715c5e

fix:린트 오류 해결 및 prettier 포맷 적용

e540c0f

github-actions Bot assigned jwj0620gcu Jan 30, 2026

github-actions Bot requested review from KyeongJooni and YeBeenChoi January 30, 2026 17:36

github-actions Bot added the ✨Feature 새로운 기능 label Jan 30, 2026

KyeongJooni reviewed Jan 31, 2026

View reviewed changes

Merge branch 'main' into 73-feat/수리점-페이지-제작

7e8efe2

vercel Bot deployed to Preview January 31, 2026 10:53 View deployment

Merge branch 'main' into 73-feat/수리점-페이지-제작

65ae7a2

vercel Bot deployed to Preview January 31, 2026 14:39 View deployment

jwj0620gcu added 4 commits February 1, 2026 02:16

refactor:헤더, 미니맵, 카드 모두 같은 폭 맞추기

9f20394

refactor: URL 상수 처리

38e367f

refactor:clickable 옵션 추가

f3fa682

refactor:검색 중 에러 처리 추가

951effc

jwj0620gcu added 3 commits February 1, 2026 02:16

중복 파트 getKakaoMaps() 핼퍼로 접그ㅡㄴ

eca23b4

refactor:새 variant 추가하기(버튼)

f072a72

style:prettier format 적용

21bb1a0

vercel Bot deployed to Preview January 31, 2026 17:17 View deployment

KyeongJooni approved these changes Jan 31, 2026

View reviewed changes

jwj0620gcu merged commit 7b4864e into main Feb 1, 2026
6 checks passed

		Promise.all(SEARCH_KEYWORDS.map((keyword) => searchByKeyword(keyword))).then((results) => {
		clearMarkers();

Uh oh!

Hidden character warning

Conversation

jwj0620gcu commented Jan 30, 2026

✨ 주요 변경사항

📝 작업 상세 내용

✅ 체크리스트

📸 스크린샷 (선택)

🔍 기타 참고사항

🔗 관련 이슈

Uh oh!

github-actions Bot commented Jan 30, 2026

PR 검증 결과

Uh oh!

KyeongJooni left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jan 31, 2026

PR 검증 결과

Uh oh!

github-actions Bot commented Jan 31, 2026

PR 검증 결과

Uh oh!

github-actions Bot commented Jan 31, 2026

PR 검증 결과

Uh oh!

KyeongJooni left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants