Skip to content

[FIX] 소상공인 홍보 태그칩/좋아요 UI 복원 및 추가 - #275

Merged
yoonsunmindd merged 11 commits into
developfrom
feature/local-business-tag-restore
Aug 7, 2026
Merged

[FIX] 소상공인 홍보 태그칩/좋아요 UI 복원 및 추가#275
yoonsunmindd merged 11 commits into
developfrom
feature/local-business-tag-restore

Conversation

@yoonsunmindd

@yoonsunmindd yoonsunmindd commented Aug 6, 2026

Copy link
Copy Markdown
Contributor

작업 내용

  • 그리드카드 태그칩 노출 복원 (백엔드 API에 hashtags 필드 없어 임시 숨김 처리했던 부분, 필드 추가되어 원복)
  • 리스트뷰 작성자 아바타 오류 수정: business.image(업체 사진) 잘못 재사용하던 것을 author.profileImageUrl(작성자 사진)로 수정
  • 그리드카드 태그 정렬 justify-center → justify-start로 변경
  • 그리드뷰/리스트뷰에 좋아요(하트) 버튼 추가 (ContentCard와 동일 위치/스타일)

변경 화면

  • /local-business (목록 페이지) - 그리드뷰, 리스트뷰

확인 방법

  1. 소상공인 홍보 목록 페이지에서 그리드뷰 카드에 태그칩(최대 3개)이 정상 노출되는지 확인합니다.
  2. 태그가 1~2개, 3개일 때 모두 왼쪽 정렬로 보이는지 확인합니다.
  3. 리스트뷰에서 작성자 아바타가 업체 사진이 아닌 실제 작성자 프로필 사진으로 보이는지 확인합니다.
  4. 그리드뷰/리스트뷰 카드의 좋아요(하트) 버튼이 정상 위치에 노출되고 클릭 시 토글되는지 확인합니다.
  5. 비로그인 상태에서 좋아요 버튼 클릭 시 로그인 모달이 뜨는지 확인합니다.
  6. region-info 페이지의 PromotionCard에는 하트 버튼이 노출되지 않는지 확인합니다(onLikeClick 미전달 시 렌더링 안 됨).
  7. 콘솔 에러 없이 정상 동작하는지 확인합니다.

체크리스트

  • 로컬 실행 확인
  • 콘솔 에러 없음
  • 반응형 확인
  • 불필요한 console.log 제거
  • develop 최신 반영 완료
  • 관련 없는 파일 변경 없음
  • pnpm build 통과
  • pnpm lint 통과

스크린샷

스크린샷 2026-08-07 오전 3 59 40 스크린샷 2026-08-07 오전 3 59 48 스크린샷 2026-08-07 오전 4 00 01

참고 사항

  • 소상공인 홍보(business-promotions) 좋아요는 상의가 필요하므로 UI만 우선 반영했습니다. 로컬 상태로만 토글되며 새로고침 시 초기화됩니다. (장소(place) 도메인엔 좋아요 API가 있으나 business-promotions엔 아직 없음 — 상의 예정 )
  • 태그칩 UI(BusinessGridCard.tsx)는 재구성이 아니라 태그 숨기기 직전 커밋(08de614)의 원본을 그대로 복원한 것입니다.
  • 리스트뷰 작성자 닉네임/날짜, 상세페이지 해시태그는 이번 작업 전부터 이미 정상 동작 중이었습니다 (별도 수정 없음).

관련 이슈

Closes #273

Summary by CodeRabbit

  • 새로운 기능
    • 지역 사업장 카드와 목록에서 좋아요를 누르고 상태를 확인할 수 있습니다.
    • 로그인하지 않은 상태에서 좋아요를 선택하면 로그인 안내가 표시됩니다.
    • 회원가입 화면에서 카카오·네이버 소셜 로그인을 바로 이용할 수 있습니다.
    • 카카오 로그인 시 카카오톡 앱 대신 웹 로그인으로 진행됩니다.
  • UI 개선
    • 사업장 카드에 작성자 아바타, 태그, 구분선이 표시됩니다.
    • 카드 이미지 영역과 좋아요 버튼의 배치가 개선되었습니다.

junehuk and others added 9 commits August 6, 2026 19:24
- ReviewCourse에 추가된 courseType을 매퍼에서 그대로 넘김
- 라우트 판별용 코스 상세 선조회(useNavigateToCourseDetail) 제거
- 이동수단 라벨 prop 이름을 transport로 바로잡아 코스 타입과 구분
develop의 찜 목록이 useNavigateToCourseDetail을 쓰기 시작했다.
LikedResponse에는 courseType이 없어 선조회가 필요하다.
후기는 응답에 courseType이 있어 계속 buildCourseDetailPath로 바로 이동한다.
- 코스별 후기 응답이 imageUrls에서 images(imageKey 포함)로 바뀐 것을 반영
- 코스 상세와 후기 전체보기에서 막아 뒀던 수정 진입을 연다
- 작성자 메타에 성별을 붙여 20대 여 형태로 표시
@vercel

vercel Bot commented Aug 6, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
frontend Ready Ready Preview Aug 6, 2026 7:46pm

@coderabbitai

coderabbitai Bot commented Aug 6, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

Warning

Review limit reached

@yoonsunmindd, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 14 minutes

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 9bcdd2be-9737-4a51-9f0d-7b8789e12202

📥 Commits

Reviewing files that changed from the base of the PR and between 8bdcc18 and de69c15.

📒 Files selected for processing (2)
  • src/components/common/PromotionCard.tsx
  • src/pages/local-business/components/BusinessGridCard.tsx
📝 Walkthrough

Walkthrough

로컬 사업장 데이터에 작성자 아바타, 태그, 좋아요 상태를 추가했습니다. 카드에 좋아요 버튼과 태그 칩을 표시합니다. 페이지는 인증 상태에 따라 좋아요 상태를 갱신하거나 로그인 모달을 엽니다. 회원가입 화면은 Kakao 및 Naver OAuth 로그인을 처리합니다.

Changes

로컬 사업장 좋아요 및 카드 데이터

Layer / File(s) Summary
사업장 데이터 계약 및 매핑
src/types/businessPromotion.type.ts, src/pages/local-business/types.ts, src/pages/local-business/mappers/businessPromotionMapper.ts
사업장 타입에 작성자 아바타, 태그, 좋아요 상태를 추가했습니다. 매퍼는 프로모션 데이터를 해당 필드로 변환합니다.
카드 좋아요 및 태그 렌더링
src/components/common/PromotionCard.tsx, src/pages/local-business/components/BusinessGridCard.tsx, src/pages/local-business/components/BusinessListCard.tsx
그리드 카드와 공통 카드에 좋아요 버튼을 추가했습니다. 그리드 카드는 최대 3개의 태그 칩을 표시합니다. 리스트 카드는 작성자 아바타를 사용합니다.
좋아요 상태 페이지 연결
src/pages/local-business/index.tsx, src/pages/local-business/components/BusinessGrid.tsx, src/pages/local-business/components/BusinessList.tsx
좋아요 콜백을 카드까지 전달합니다. 인증 사용자는 로컬 좋아요 상태를 토글하고, 미인증 사용자는 로그인 모달을 엽니다.

소셜 회원가입 OAuth

Layer / File(s) Summary
Kakao 웹 로그인 설정
src/hooks/useKakaoLogin.ts, src/vite-env.d.ts
Kakao authorize 설정에 throughTalk: false를 적용하고 타입을 확장했습니다.
회원가입 소셜 로그인 흐름
src/pages/auth/signup/components/SignupStart.tsx
Kakao 및 Naver 로그인 버튼을 연결했습니다. 공통 로딩 상태로 동시 실행을 막고 provider별 오류를 접근성 alert로 표시합니다.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Sequence Diagram(s)

sequenceDiagram
  participant SignupStart
  participant KakaoLogin
  participant NaverLogin
  participant OAuthProvider
  SignupStart->>KakaoLogin: Kakao 로그인 요청
  KakaoLogin->>OAuthProvider: 웹 OAuth authorize 호출
  SignupStart->>NaverLogin: Naver 로그인 요청
  NaverLogin->>OAuthProvider: OAuth 로그인 요청
  OAuthProvider-->>SignupStart: 결과 반환
  SignupStart-->>SignupStart: 로딩 상태 해제 및 오류 표시
Loading

Possibly related PRs

  • yeogido/frontend#81: 동일한 local-business 컴포넌트와 데이터 구조를 확장합니다.
  • yeogido/frontend#115: PromotionCard와 사업장 카드의 좋아요 기능을 직접적으로 공유합니다.
  • yeogido/frontend#269: 동일한 Kakao 로그인, 소셜 회원가입, 인증 타입 변경과 관련됩니다.

Suggested reviewers: kimtaehyeokkkk

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name Status Explanation Resolution
Out of Scope Changes check ⚠️ Warning 좋아요 기능과 카카오 OAuth 로그인 변경은 이슈 #273의 태그칩 및 작성자 아바타 수정 범위를 벗어납니다. 좋아요 기능과 카카오 OAuth 로그인 변경을 별도 PR로 분리하거나, 이슈 #273에 해당 요구사항을 명시하세요.
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed 제목이 태그칩 복원과 좋아요 UI 추가라는 주요 변경 사항을 명확하게 요약합니다.
Linked Issues check ✅ Passed 그리드 태그칩 복원, 작성자 프로필 아바타 적용, 관련 타입과 매퍼 변경을 구현해 이슈 #273의 핵심 요구사항을 충족합니다.
✨ Finishing Touches 💡 1
📝 Generate docstrings 💡
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feature/local-business-tag-restore

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/pages/local-business/components/BusinessGridCard.tsx`:
- Around line 81-95: 분리된 카드 이동 컨트롤과 좋아요 버튼이 중첩되지 않도록 수정하고, 좋아요 버튼에 현재 상태를 반영하는
aria-pressed를 추가하세요.
src/pages/local-business/components/BusinessGridCard.tsx:81-95의 카드 및 좋아요 컨트롤에서
aria-pressed={business.liked}를 설정하세요.
src/components/common/PromotionCard.tsx:135-150에서도 동일하게 컨트롤을 분리하고
aria-pressed={liked}를 설정하세요.
- Line 12: BusinessGridCard의 CARD_HEIGHT 상수를 현재 222px에서 최소 225px로 조정하세요. 이미지 영역
115px과 콘텐츠 고정 영역 110px이 모두 포함되고 태그 행 하단이 잘리지 않도록 기존 카드 레이아웃과 overflow 동작은 유지하세요.
🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 6f839510-30f2-443f-9fe1-a4b5a6148e95

📥 Commits

Reviewing files that changed from the base of the PR and between b3d45f5 and 8bdcc18.

📒 Files selected for processing (12)
  • src/components/common/PromotionCard.tsx
  • src/hooks/useKakaoLogin.ts
  • src/pages/auth/signup/components/SignupStart.tsx
  • src/pages/local-business/components/BusinessGrid.tsx
  • src/pages/local-business/components/BusinessGridCard.tsx
  • src/pages/local-business/components/BusinessList.tsx
  • src/pages/local-business/components/BusinessListCard.tsx
  • src/pages/local-business/index.tsx
  • src/pages/local-business/mappers/businessPromotionMapper.ts
  • src/pages/local-business/types.ts
  • src/types/businessPromotion.type.ts
  • src/vite-env.d.ts
📜 Review details
🧰 Additional context used
🧠 Learnings (5)
📚 Learning: 2026-07-26T17:09:23.387Z
Learnt from: KJun-2
Repo: yeogido/frontend PR: 125
File: src/pages/local-recommendation/course-basic-info/components/CompanionSelector.tsx:82-90
Timestamp: 2026-07-26T17:09:23.387Z
Learning: 이 프로젝트의 반응형 스케일 정책에서는 텍스트(폰트) 크기를 설계 기준 값에 전역 `scale`을 곱해 비율대로 스케일하세요. `12px`, `14px`처럼 특정 최소 하한을 강제로 적용하거나(클램프/바닥값) 임의의 픽셀 값으로 제한하지 마세요. 즉, 기준값(디자인 스펙) × `scale` 방식으로 계산해 비율이 유지되도록 구현합니다.

Applied to files:

  • src/pages/local-business/index.tsx
  • src/components/common/PromotionCard.tsx
  • src/pages/auth/signup/components/SignupStart.tsx
  • src/pages/local-business/components/BusinessList.tsx
  • src/pages/local-business/components/BusinessGridCard.tsx
  • src/pages/local-business/components/BusinessGrid.tsx
  • src/pages/local-business/components/BusinessListCard.tsx
📚 Learning: 2026-08-03T09:41:11.931Z
Learnt from: KJun-2
Repo: yeogido/frontend PR: 188
File: src/pages/detail/components/CourseDetailLayout.tsx:202-205
Timestamp: 2026-08-03T09:41:11.931Z
Learning: When implementing the shared back-navigation UI component in yeogido/frontend, manage all UI dimensions, including positional offsets, according to the project’s global `scale` policy so the component remains visually consistent across screens.

Applied to files:

  • src/pages/local-business/index.tsx
  • src/components/common/PromotionCard.tsx
  • src/pages/auth/signup/components/SignupStart.tsx
  • src/pages/local-business/components/BusinessList.tsx
  • src/pages/local-business/components/BusinessGridCard.tsx
  • src/pages/local-business/components/BusinessGrid.tsx
  • src/pages/local-business/components/BusinessListCard.tsx
📚 Learning: 2026-07-26T17:09:27.685Z
Learnt from: KJun-2
Repo: yeogido/frontend PR: 125
File: src/pages/local-recommendation/course-basic-info/components/TransportSelector.tsx:84-91
Timestamp: 2026-07-26T17:09:27.685Z
Learning: In this project’s 390px-based continuous responsive scaling, do not apply an artificial minimum lower bound to text sizes (e.g., avoid clamping via Math.max/min-font-size patterns). Instead, compute typography using proportional ratio scaling: render font sizes as `VALUE * scale` (for example, `DESCRIPTION_FONT_SIZE * scale`). During review, flag any code that enforces a hard minimum text size that breaks the intended proportional scaling.

Applied to files:

  • src/pages/local-business/index.tsx
  • src/components/common/PromotionCard.tsx
  • src/pages/auth/signup/components/SignupStart.tsx
  • src/pages/local-business/components/BusinessList.tsx
  • src/pages/local-business/components/BusinessGridCard.tsx
  • src/pages/local-business/components/BusinessGrid.tsx
  • src/pages/local-business/components/BusinessListCard.tsx
📚 Learning: 2026-07-26T17:09:32.991Z
Learnt from: KJun-2
Repo: yeogido/frontend PR: 125
File: src/pages/local-recommendation/tag-selection/components/KeywordSelectionSection.tsx:51-56
Timestamp: 2026-07-26T17:09:32.991Z
Learning: When implementing responsive scaling in this project, prefer direct proportional calculations (e.g., using `VALUE * scale`) without applying artificial minimum lower bounds (clamps) to text sizes or other visual dimensions. Only introduce a lower bound when there is an explicitly documented exception; the primary allowed example is enforcing a 44px minimum touch target for interactive elements. In review, flag new/minimum clamps for text/visual dimensions unless they match an explicitly documented exception.

Applied to files:

  • src/pages/local-business/index.tsx
  • src/components/common/PromotionCard.tsx
  • src/pages/auth/signup/components/SignupStart.tsx
  • src/pages/local-business/components/BusinessList.tsx
  • src/pages/local-business/components/BusinessGridCard.tsx
  • src/pages/local-business/components/BusinessGrid.tsx
  • src/pages/local-business/components/BusinessListCard.tsx
📚 Learning: 2026-07-26T17:09:40.303Z
Learnt from: KJun-2
Repo: yeogido/frontend PR: 125
File: src/pages/local-recommendation/tag-selection/components/RepresentativePhotoSection.tsx:107-122
Timestamp: 2026-07-26T17:09:40.303Z
Learning: yeogido/frontend의 반응형 스케일 정책에 맞춰, 텍스트를 포함한 UI 치수는 (디자인 기준값) × 전역 `scale`로 “연속적으로” 계산하고, 12px·14px 같은 최소 폰트/사이즈 하한(floor) 클램프를 적용하지 않는다. `scaleValue`를 쓰더라도 텍스트에 임의의 minimum floor를 추가하거나 `Math.max(value, 12/14)` 같은 보정을 넣지 말 것.

Applied to files:

  • src/pages/local-business/index.tsx
  • src/components/common/PromotionCard.tsx
  • src/pages/auth/signup/components/SignupStart.tsx
  • src/pages/local-business/components/BusinessList.tsx
  • src/pages/local-business/components/BusinessGridCard.tsx
  • src/pages/local-business/components/BusinessGrid.tsx
  • src/pages/local-business/components/BusinessListCard.tsx
🔇 Additional comments (15)
src/vite-env.d.ts (1)

81-81: LGTM!

src/hooks/useKakaoLogin.ts (1)

37-46: LGTM!

src/pages/auth/signup/components/SignupStart.tsx (4)

1-1: LGTM!

Also applies to: 10-11, 44-50


60-92: LGTM!


167-171: LGTM!

Also applies to: 191-196, 216-216


229-242: LGTM!

src/types/businessPromotion.type.ts (1)

32-32: LGTM!

src/pages/local-business/types.ts (1)

1-1: LGTM!

Also applies to: 16-20

src/pages/local-business/mappers/businessPromotionMapper.ts (1)

9-9: LGTM!

Also applies to: 97-101

src/pages/local-business/components/BusinessGridCard.tsx (1)

1-11: LGTM!

Also applies to: 13-16, 33-50, 147-164

src/components/common/PromotionCard.tsx (1)

1-12: LGTM!

Also applies to: 44-46, 58-60, 127-133

src/pages/local-business/components/BusinessListCard.tsx (1)

8-27: LGTM!

src/pages/local-business/components/BusinessGrid.tsx (1)

7-15: LGTM!

Also applies to: 29-31

src/pages/local-business/components/BusinessList.tsx (1)

7-26: LGTM!

src/pages/local-business/index.tsx (1)

8-9: LGTM!

Also applies to: 38-39, 67-96, 172-182

Comment thread src/pages/local-business/components/BusinessGridCard.tsx Outdated
Comment thread src/pages/local-business/components/BusinessGridCard.tsx Outdated

@junehuk junehuk left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image 확인했습니다

@yoonsunmindd
yoonsunmindd merged commit f1f3cb3 into develop Aug 7, 2026
3 checks passed
@yoonsunmindd
yoonsunmindd deleted the feature/local-business-tag-restore branch August 7, 2026 05:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FIX] 소상공인 홍보 그리드카드 태그칩 노출 + 리스트뷰 작성자 아바타 오류 수정

2 participants