체험 상세 페이지 추가 수정 #272
Merged
체험 상세 페이지 추가 수정 #272
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Closed
📝 WalkthroughWalkthrough이번 변경에서는 활동 설명 컴포넌트에 긴 설명을 접고 펼칠 수 있는 기능이 추가되었습니다. 또한 지도 마커 오버레이가 클릭 가능한 링크로 개선되었으며, 마커 함수의 시그니처가 placeUrl을 지원하도록 수정되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ActivitiesDescription
participant DOM
User->>ActivitiesDescription: 컴포넌트 렌더 (description props)
ActivitiesDescription->>DOM: description 표시 (최대 300px)
ActivitiesDescription->>DOM: ResizeObserver로 오버플로우 감지
alt 내용이 오버플로우됨
ActivitiesDescription-->>User: '더보기' 버튼 표시
User->>ActivitiesDescription: '더보기' 클릭
ActivitiesDescription->>DOM: max-height → 전체 높이로 전환
ActivitiesDescription-->>User: '접기' 버튼 표시
User->>ActivitiesDescription: '접기' 클릭
ActivitiesDescription->>DOM: max-height → 300px로 전환
end
sequenceDiagram
participant User
participant KakaoMap
participant placeMarker
participant Overlay
User->>KakaoMap: 키워드 검색
KakaoMap->>placeMarker: lat, lng, label, placeUrl 전달
placeMarker->>Overlay: 클릭 가능한 <a> 오버레이 생성
User->>Overlay: 오버레이 클릭
Overlay->>User: placeUrl로 이동
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~15 minutes Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
|
🚀 오늘뭐해 Preview Deploy 완료! |
kjhyun0830
approved these changes
Aug 4, 2025
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
apps/what-today/src/components/map/index.tsx (1)
81-99: 오버레이 링크 구현이 우수하나 fallback 처리 개선 필요외부 링크 보안을 위한
rel="noopener noreferrer"사용과 일관된 스타일링이 잘 구현되었습니다.다만
placeUrl이 없을 때href="#"을 사용하면 클릭 시 페이지가 상단으로 스크롤될 수 있습니다.다음과 같이 개선을 고려해보세요:
- <a href="${placeUrl ?? '#'}" target="_blank" rel="noopener noreferrer" + <a href="${placeUrl ?? 'javascript:void(0)'}" ${placeUrl ? 'target="_blank" rel="noopener noreferrer"' : ''}또는 placeUrl이 없는 경우 클릭 이벤트를 방지하는 로직을 추가할 수 있습니다.
apps/what-today/src/components/activities/ActivitiesDescription.tsx (1)
43-64: 렌더링 로직이 잘 구현되었으나 scrollHeight 처리 개선 필요전환 애니메이션과 그라데이션 오버레이, 조건부 렌더링이 UX 관점에서 우수하게 구현되었습니다.
다만
maxHeight계산에서contentRef.current?.scrollHeight를 직접 사용하는 부분이 초기 렌더링 시 문제가 될 수 있습니다.다음과 같이 개선을 고려해보세요:
+ const [contentHeight, setContentHeight] = useState<number>(0); + + const checkOverflow = useCallback(() => { + if (!contentRef.current) return; + const height = contentRef.current.scrollHeight; + setContentHeight(height); + setIsOverflowing(height > COLLAPSED_HEIGHT); + }, []); // 스타일 객체에서는 상태값 사용 - maxHeight: isExpanded ? `${contentRef.current?.scrollHeight ?? 1000}px` : `${COLLAPSED_HEIGHT}px`, + maxHeight: isExpanded ? `${contentHeight}px` : `${COLLAPSED_HEIGHT}px`,이렇게 하면 scrollHeight 값을 상태로 관리하여 더 안정적인 렌더링이 가능합니다.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/what-today/src/components/activities/ActivitiesDescription.tsx(1 hunks)apps/what-today/src/components/map/index.tsx(3 hunks)
🧰 Additional context used
🧠 Learnings (6)
📓 Common learnings
Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#77
File: apps/what-today/src/pages/mypage/manage-activities/index.tsx:50-63
Timestamp: 2025-07-19T01:23:56.149Z
Learning: User kjhyun0830 follows an incremental development approach in What-Today project, implementing UI first and adding functionality in later iterations, as confirmed in PR #77 for the experience management page.
Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#219
File: apps/what-today/src/pages/mypage/main/index.tsx:108-157
Timestamp: 2025-08-03T00:45:03.763Z
Learning: kjhyun0830은 What-Today 프로젝트의 마이페이지(apps/what-today/src/pages/mypage/main/index.tsx)에서 다음 브랜치에 스켈레톤 UI 작업과 함께 로딩 상태 처리를 구현할 계획이라고 언급함.
Learnt from: HarrySeop
PR: What-Today-FE/What-Today#89
File: packages/design-system/src/components/bottomsheet/hooks/index.ts:44-51
Timestamp: 2025-07-21T04:36:28.477Z
Learning: HarrySeop encountered a scroll restoration issue in the useBodyScrollLock hook where the base page jumps to the top during mount/unmount of the bottom sheet component. They tried adding isLocked check in cleanup function and ref-based approaches but both failed to resolve the issue. They decided to defer this fix to a later refactoring.
Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#169
File: apps/what-today/src/hooks/useMyActivitiesQuery.ts:23-25
Timestamp: 2025-07-29T14:50:14.117Z
Learning: kjhyun0830은 What-Today 프로젝트에서 토스터 알림과 같은 UI 일관성이 필요한 기능들을 여러 페이지에 걸쳐 한 번에 수정하는 접근 방식을 선호한다.
Learnt from: Taeil08
PR: What-Today-FE/What-Today#134
File: apps/what-today/src/pages/experiences/iindex.tsx:11-16
Timestamp: 2025-07-25T03:14:08.579Z
Learning: Taeil08이 What-Today 프로젝트의 체험 등록 페이지(apps/what-today/src/pages/experiences/iindex.tsx)에서 주소 입력 컴포넌트가 아직 만들어지지 않아서 상태 관리를 나중에 추가할 예정이라고 언급함. 이는 프로젝트의 점진적 개발 접근법에 따른 것임.
Learnt from: HarrySeop
PR: What-Today-FE/What-Today#129
File: apps/what-today/src/pages/mypage/reservations-list/index.tsx:13-25
Timestamp: 2025-07-24T19:36:15.516Z
Learning: HarrySeop은 What-Today 프로젝트에서 API 에러 처리를 토스터(toast notification)로 처리하는 방식을 선호하며, 핸들러 함수 구현 시점에 함께 연결하는 접근 방식을 취함.
📚 Learning: the mainpage component in apps/what-today/src/pages/main/index.tsx contains placeholder/example code...
Learnt from: MyungJiwoo
PR: What-Today-FE/What-Today#43
File: apps/what-today/src/pages/main/index.tsx:7-7
Timestamp: 2025-07-14T13:36:17.941Z
Learning: The MainPage component in apps/what-today/src/pages/main/index.tsx contains placeholder/example code that will be modified later, including the fixed height class 'h-1400' which the user indicated is temporary.
Applied to files:
apps/what-today/src/components/map/index.tsxapps/what-today/src/components/activities/ActivitiesDescription.tsx
📚 Learning: taeil08이 what-today 프로젝트의 체험 등록 페이지(apps/what-today/src/pages/experiences/iindex.tsx)에서 주소 입력 컴포넌트가 ...
Learnt from: Taeil08
PR: What-Today-FE/What-Today#134
File: apps/what-today/src/pages/experiences/iindex.tsx:11-16
Timestamp: 2025-07-25T03:14:08.579Z
Learning: Taeil08이 What-Today 프로젝트의 체험 등록 페이지(apps/what-today/src/pages/experiences/iindex.tsx)에서 주소 입력 컴포넌트가 아직 만들어지지 않아서 상태 관리를 나중에 추가할 예정이라고 언급함. 이는 프로젝트의 점진적 개발 접근법에 따른 것임.
Applied to files:
apps/what-today/src/components/map/index.tsx
📚 Learning: packages/design-system/src/components/datepicker.tsx에서 taeil08은 sr-only 클래스를 가진 div 요소가 달력 트리거 버튼의 세...
Learnt from: Taeil08
PR: What-Today-FE/What-Today#125
File: packages/design-system/src/components/DatePicker.tsx:25-28
Timestamp: 2025-07-24T13:33:33.202Z
Learning: packages/design-system/src/components/DatePicker.tsx에서 Taeil08은 sr-only 클래스를 가진 div 요소가 달력 트리거 버튼의 세로 정렬에 필요하다고 설명했음. 이 요소를 제거하면 버튼 정렬이 깨지는 레이아웃 의존성이 있음.
Applied to files:
apps/what-today/src/components/activities/ActivitiesDescription.tsx
📚 Learning: kjhyun0830은 what-today 프로젝트의 마이페이지(apps/what-today/src/pages/mypage/main/index.tsx)에서 다음 브랜치에 스켈레톤 u...
Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#219
File: apps/what-today/src/pages/mypage/main/index.tsx:108-157
Timestamp: 2025-08-03T00:45:03.763Z
Learning: kjhyun0830은 What-Today 프로젝트의 마이페이지(apps/what-today/src/pages/mypage/main/index.tsx)에서 다음 브랜치에 스켈레톤 UI 작업과 함께 로딩 상태 처리를 구현할 계획이라고 언급함.
Applied to files:
apps/what-today/src/components/activities/ActivitiesDescription.tsx
📚 Learning: in packages/design-system/src/components/button/index.tsx, harryseop uses handleclick wrapper for se...
Learnt from: HarrySeop
PR: What-Today-FE/What-Today#53
File: packages/design-system/src/components/button/index.tsx:32-41
Timestamp: 2025-07-16T06:51:15.152Z
Learning: In packages/design-system/src/components/button/index.tsx, HarrySeop uses handleClick wrapper for security purposes to prevent execution when users remove disabled attributes via developer tools. The onClick handler should be extracted from rest props before spreading to avoid being overwritten.
Applied to files:
apps/what-today/src/components/activities/ActivitiesDescription.tsx
🔇 Additional comments (6)
apps/what-today/src/components/map/index.tsx (2)
69-69: 함수 시그니처 변경이 적절합니다.선택적 매개변수로
placeUrl을 추가하여 기존 호출 부분에 영향을 주지 않으면서 새로운 기능을 지원할 수 있도록 잘 설계되었습니다.
113-114: 검색 결과 구조분해할당 업데이트가 일관되게 적용되었습니다.주요 검색과 fallback 검색 모두에서
place_url을 추출하여placeMarker함수에 전달하는 로직이 일관되게 구현되었습니다.Also applies to: 121-122
apps/what-today/src/components/activities/ActivitiesDescription.tsx (4)
1-2: 필요한 의존성과 상수가 적절히 추가되었습니다.접기/펼치기 기능을 위한 필수 import들과
COLLAPSED_HEIGHT상수가 명확하게 정의되었습니다.Also applies to: 10-10
16-18: 상태 관리가 적절하게 구현되었습니다.확장 상태와 오버플로우 감지를 위한 상태 변수들이 명확하게 정의되고, DOM 요소 참조를 위한 ref도 적절히 설정되었습니다.
20-24: 오버플로우 감지 로직이 효율적으로 구현되었습니다.
useCallback을 사용한 성능 최적화와 null 체크를 통한 안전한 구현이 잘 되어있습니다.
26-37: useEffect 훅들이 적절하게 구현되었습니다.초기 오버플로우 체크와
ResizeObserver를 통한 동적 크기 변화 감지가 잘 구현되었고, 정리 함수로 메모리 누수도 방지했습니다.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🧩 관련 이슈 번호
📌 작업 내용
✅ 체크리스트
📷 UI 변경 사항 (선택)
❓무슨 문제가 발생했나요? (선택)
💬 기타 참고 사항 (선택)
Summary by CodeRabbit