[Fix] 지원 공고 페이지 주관기관 표기 및 코드 중복 해소 #77
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
## Walkthrough
이 변경사항은 좋아요(찜) 상태 및 로그인 상태 관리를 위한 커스텀 훅 `useLikeToggle`을 도입하고, 관련 컴포넌트(`ReviewItem`, `PlaceInfo`)의 로직을 이 훅을 사용하도록 리팩토링합니다. 또한 여러 페이지에서 로딩 상태 표시, 스타일 클래스 수정, 유틸 함수 분리, 데이터 필드명 변경 등이 포함되어 있습니다.
## Changes
| 파일/경로 요약 | 변경 내용 요약 |
|---|---|
| src/hooks/useLikeToggle.js | 회사의 좋아요 상태와 로그인 상태를 관리하는 커스텀 훅 `useLikeToggle` 신설. 내부적으로 상태와 API 호출, 전역 스토어 동기화, 로그인 모달 제어 기능 포함. |
| src/pages/myPageDetail/MyPageDetailPage.jsx | 리뷰/응원 데이터 로딩 시 스피너 표시 추가, 섹션별 컨테이너 마진 스타일 조정 및 불필요한 헤더 제거. |
| src/pages/myPageDetail/components/ReviewItem.jsx<br>src/pages/review/components/PlaceInfo.jsx | 좋아요 및 로그인 상태 관련 내부 상태/로직 삭제, `useLikeToggle` 훅으로 대체하여 코드 단순화 및 관심사 분리. 로딩 스피너 및 로그인 모달 처리 포함. |
| src/pages/review/components/Reviews.jsx | 코드 내 설명 주석 3줄 삭제, 기능적 변화 없음. |
| src/pages/writeReview/components/WriteText.jsx | 사용하지 않는 변수 제거 및 불필요한 주석 삭제. |
| src/pages/support/FinancialProductDetailPage.jsx<br>src/pages/support/FinancialProductListPage.jsx<br>src/pages/support/SupportItemPage.jsx<br>src/pages/support/SupportListPage.jsx<br>src/pages/support/SupportRecommendPage.jsx | 컨테이너 div CSS 클래스 변경(`container` 적용), 일부 JSX 텍스트 한 줄 변환, 데이터 필드명(`agency`→`organization`) 변경, 로딩 상태 스피너 추가 및 옵셔널 체이닝 적용 등 UI 및 안정성 개선. |
| src/pages/support/components/FOAItem.jsx | 루트 div에 `cursor-pointer` 클래스 추가, 데이터 필드명 및 접근 방식(`agency`→`organization`, 옵셔널 체이닝) 변경, 신규 시각 요소 추가. |
| src/pages/support/utils/dateFunc.js | 날짜 형식 유효성 검사 함수 `isValidDateFormat` 추가. |
| src/pages/writeReview/components/Complete.jsx | 닫기 버튼 div에 `cursor-pointer` 클래스 추가. |
| src/pages/map/components/review/ReviewContent.jsx | `item` 객체 접근 시 옵셔널 체이닝 추가로 안전성 향상. |
| src/pages/support/components/FOACard.jsx | `announcementType` 접근 시 옵셔널 체이닝 추가로 안정성 향상. |
## Possibly related PRs
- [Morak-Team/Frontend#53](https://github.com/Morak-Team/Frontend/pull/53): `useLikeToggle` 훅 도입과 `PlaceInfo` 컴포넌트 리팩토링 관련, 좋아요 및 로그인 상태 관리 방식과 직접적 연관.
## Suggested labels
`Fix`Note ⚡️ AI Code Reviews for VS Code, Cursor, WindsurfCodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback. Note ⚡️ Faster reviews with cachingCodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (2)
🧰 Additional context used🧬 Code Graph Analysis (1)src/pages/myPageDetail/MyPageDetailPage.jsx (3)
🪛 Biome (1.9.4)src/pages/myPageDetail/MyPageDetailPage.jsx[error] 72-89: Avoid using unnecessary Fragment. A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment. (lint/complexity/noUselessFragments) 🔇 Additional comments (5)
✨ Finishing Touches
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. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (6)
src/pages/support/utils/dateFunc.js (1)
22-24: 날짜 형식 검증 유틸리티 함수 추가는 좋은 리팩토링입니다.날짜 형식을 검증하는 로직을 유틸리티 함수로 분리하여 코드 재사용성을 높였습니다. 이는 코드 중복 해소라는 PR 목표에 부합합니다.
다만, 현재 구현은 형식만 검증하고 실제 유효한 날짜인지는 검증하지 않습니다(예: "9999-99-99"도 통과). 필요하다면 실제 날짜 유효성도 검증하는 확장을 고려해보세요.
export const isValidDateFormat = (dateStr) => { - return /^\d{4}-\d{2}-\d{2}$/.test(dateStr); + // 형식 검증 + if (!/^\d{4}-\d{2}-\d{2}$/.test(dateStr)) return false; + + // 날짜 유효성 검증 + const parts = dateStr.split('-'); + const year = parseInt(parts[0], 10); + const month = parseInt(parts[1], 10); + const day = parseInt(parts[2], 10); + + if (month < 1 || month > 12) return false; + + const daysInMonth = new Date(year, month, 0).getDate(); + if (day < 1 || day > daysInMonth) return false; + + return true; };src/pages/support/components/FOAItem.jsx (1)
9-10: 디버깅용 console.log 제거 필요프로덕션 코드에 console.log가 남아있습니다. 배포 전에 제거하는 것이 좋습니다.
- console.log(data);src/pages/support/SupportListPage.jsx (2)
11-17: 로딩 실패 시 예외‧에러 상태도 고려해주세요
isLoading이false가 되었을 때 API 호출이 실패했다면 현재 컴포넌트는 그대로 본문을 렌더링하려다data가undefined여서 빈 화면이 나타날 수 있습니다.isError(또는error) 상태를 함께 반환하도록 쿼리 훅을 수정하거나, 이곳에서 별도의 에러 UI를 분기 렌더링해 주는 편이 UX 측면에서 안전합니다.
35-37:key로 인덱스 대신 식별자 사용 권장
map반복에서 배열 인덱스를key로 사용하면 항목 순서 변경·삭제 시 리렌더 성능 저하와 예기치 못한 UI 깜빡임이 발생할 수 있습니다. 가능하면item.id같이 고유한 식별자를 넘겨주세요.-{data?.map((item, idx) => ( - <FOAItem data={item} key={idx} /> +{data?.map((item) => ( + <FOAItem data={item} key={item.id} /> ))}src/pages/support/SupportItemPage.jsx (1)
59-59: 기관명이 없을 때 대비한 폴백 텍스트 제안
data?.organization이 undefined 인 경우 화면에 빈 문자열이 노출됩니다. 사용자 경험 향상을 위해 “기관 정보 없음” 등 기본값을 넣어두면 좋겠습니다.src/hooks/useLikeToggle.js (1)
48-56: 서버 왕복 최소화를 위한 낙관적 업데이트 고려
토글 직후 UI를 즉시 반영하고, 실패 시 roll-back 하는 낙관적 업데이트 방식을 적용하면 사용자가 체감하는 반응 속도가 빨라집니다. 또한 이미 전역likedMap을 보유하므로getLikedCompanies호출을 매번 반복하기보다는 스토어 캐시 값을 우선 활용해 보세요.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (14)
src/hooks/useLikeToggle.js(1 hunks)src/pages/myPageDetail/MyPageDetailPage.jsx(4 hunks)src/pages/myPageDetail/components/ReviewItem.jsx(2 hunks)src/pages/review/components/PlaceInfo.jsx(3 hunks)src/pages/review/components/Reviews.jsx(0 hunks)src/pages/support/FinancialProductDetailPage.jsx(3 hunks)src/pages/support/FinancialProductListPage.jsx(2 hunks)src/pages/support/SupportItemPage.jsx(3 hunks)src/pages/support/SupportListPage.jsx(2 hunks)src/pages/support/SupportRecommendPage.jsx(1 hunks)src/pages/support/components/FOAItem.jsx(2 hunks)src/pages/support/utils/dateFunc.js(1 hunks)src/pages/writeReview/components/Complete.jsx(1 hunks)src/pages/writeReview/components/WriteText.jsx(1 hunks)
💤 Files with no reviewable changes (1)
- src/pages/review/components/Reviews.jsx
🧰 Additional context used
🧬 Code Graph Analysis (3)
src/pages/myPageDetail/MyPageDetailPage.jsx (1)
src/components/common/Spinner.jsx (1)
Spinner(3-9)
src/hooks/useLikeToggle.js (2)
src/pages/review/components/PlaceInfo.jsx (1)
useLikeToggle(17-24)src/store/authStore.js (1)
useAuthStore(4-23)
src/pages/myPageDetail/components/ReviewItem.jsx (3)
src/store/userInfoStore.js (1)
useUserInfoStore(3-17)src/store/useLikeStore.js (1)
useLikeStore(3-12)src/pages/review/components/PlaceInfo.jsx (1)
useLikeToggle(17-24)
🔇 Additional comments (19)
src/pages/writeReview/components/Complete.jsx (1)
12-12: 닫기 버튼의 클릭 가능성을 시각적으로 표시한 개선 사항입니다.cursor-pointer 클래스를 추가하여 사용자에게 이 요소가 클릭 가능함을 시각적으로 알려주는 좋은 UX 개선입니다.
src/pages/support/FinancialProductListPage.jsx (1)
90-90: 총 개수 표시 코드가 간결해졌습니다.다중 라인 JSX에서 단일 라인으로 코드를 리팩토링하여 가독성이 개선되었습니다.
src/pages/writeReview/components/WriteText.jsx (1)
30-30: 관련 주석이 제거되었지만 기능은 동일하게 유지됩니다.리뷰 등록 과정에서 업로딩 상태를 관리하는 코드가 정리되었습니다. 주석은 제거되었지만 기능적으로는 동일합니다: 비동기 작업 전에
setIsUploading(true)로 모달을 표시하고, 작업 완료 또는 실패 후setIsUploading(false)로 모달을 숨기는 흐름이 유지되었습니다.Also applies to: 34-35, 38-39
src/pages/support/FinancialProductDetailPage.jsx (4)
40-40: 컨테이너 스타일 개선고정 높이 스타일(
h-[calc(100vh-5.25rem)])을 컨테이너 클래스로 대체하여 더 일관된 레이아웃 스타일링을 적용했습니다. 이는 다른 지원 관련 페이지의 스타일링과도 일치합니다.
89-89: 텍스트 가독성 향상방식과 기본 금리 정보 텍스트에
font-medium클래스를 추가하여 가독성을 향상시켰습니다.Also applies to: 93-93
97-97: 텍스트 줄바꿈 개선금융상품 소개 제목에
break-keep클래스를 추가하여 텍스트 줄바꿈 처리가 개선되었습니다.
126-126: 버튼 텍스트 포맷팅 정리멀티라인 JSX 요소를 싱글라인으로 변환하여 코드 일관성을 개선했습니다.
src/pages/myPageDetail/MyPageDetailPage.jsx (3)
9-9: 로딩 상태 표시를 위한 Spinner 컴포넌트 추가데이터 로딩 중 상태를 사용자에게 시각적으로 표시하기 위한 Spinner 컴포넌트를 가져왔습니다.
24-30: 로딩 상태 처리 로직 개선리뷰와 응원 데이터의 로딩 상태를 적절히 처리하는 로직이 추가되었습니다. 이제 데이터가 로딩 중일 때 Spinner 컴포넌트가 표시되어 사용자 경험이 향상됩니다.
50-50: 일관된 여백 적용"찜" 및 "응원" 섹션의 아이콘과 제목 주변에
my-2클래스를 추가하여 "리뷰" 섹션과 동일한 여백을 갖도록 스타일링이 개선되었습니다.Also applies to: 60-60
src/pages/support/components/FOAItem.jsx (2)
13-13: 사용자 상호작용 피드백 개선상호작용 가능한 요소임을 시각적으로 나타내기 위해
cursor-pointer클래스가 추가되어 사용자 경험이 향상되었습니다.
43-43: 속성 접근 안전성 향상 및 필드명 수정데이터 속성에 접근할 때 옵셔널 체이닝(
?.)을 사용하여 안전성을 높였고, 주관기관 표시 필드명이agency에서organization으로 수정되었습니다. 이는 PR 설명에서 언급된 "주관기관 표기" 문제를 해결합니다.Also applies to: 44-44
src/pages/support/SupportItemPage.jsx (1)
20-20: 레이아웃 변경이 의도한 높이·스크롤 정책과 맞는지 확인 바랍니다
기존h-[calc(100vh-5.25rem)]고정 높이를container클래스로 교체하면서 뷰포트 높이에 맞춘 스크롤 관리가 달라질 수 있습니다. 모바일 환경에서 하단 영역이 잘리지 않는지 한번 더 확인해주세요.src/pages/myPageDetail/components/ReviewItem.jsx (2)
50-53: 비로그인 상태에서도 이전 ‘좋아요’ 캐시가 표시될 가능성
현재 아이콘 노출 조건이isLoggedIn && isGloballyLiked입니다. 캐시가 true 여도 로그인하지 않으면 빈 하트가 그려집니다. 사용자 관점에서 ‘좋아요가 해제된 것처럼’ 혼동될 수 있으니,
- 비로그인 상태엔 회색 하트 등 별도 표현을 두거나
- 로그인 시점에만
likedMap을 초기화하여 불일치가 없도록 처리하는 방식을 검토해 주세요.
16-20:useLikeToggle적용으로 컴포넌트가 깔끔해졌습니다!
중복 로직이 제거되어 유지보수가 쉬워졌네요. 좋은 리팩터링입니다.src/pages/review/components/PlaceInfo.jsx (4)
10-11: 필요한 컴포넌트와 훅 추가 적절함로딩 상태를 표시하기 위한
Spinner컴포넌트와 좋아요 상태를 관리하기 위한useLikeToggle훅을 추가한 것은 코드의 관심사 분리와 재사용성 측면에서 매우 좋은 접근입니다.
17-24: useLikeToggle 훅 사용으로 코드 중복 해소 완료커스텀 훅
useLikeToggle을 사용하여 좋아요 상태 관리, 로그인 확인, 모달 표시 등의 로직을 추출한 것은 PR 목표에 부합하는 훌륭한 리팩토링입니다. 이를 통해 컴포넌트의 책임이 줄어들고 코드 재사용성이 향상되었습니다.
47-53: 로딩 상태 처리 추가 적절함데이터 로딩 중 사용자 경험을 개선하기 위한 로딩 인디케이터 추가는 매우 좋은 개선사항입니다.
Spinner컴포넌트를 활용하여 일관된 로딩 UI를 제공하고 있습니다.
117-121: 이벤트 핸들러 간소화 적절함이벤트 핸들러가 훅에서 제공하는
toggleLike함수를 사용하여 간소화되었습니다.e.preventDefault()를 호출하여 기본 동작을 방지하는 것은 좋은 방어적 코딩 관행입니다.
|
|
||
| return ( | ||
| <div className="relative w-full h-[calc(100vh-5.25rem)] overflow-y-auto scrollbar-hide"> | ||
| <div className="relative w-full conatiner overflow-y-auto scrollbar-hide"> |
There was a problem hiding this comment.
클래스명 오타 수정이 필요합니다.
CSS 클래스명에 오타가 있습니다: conatiner는 container의 오타로 보입니다.
- <div className="relative w-full conatiner overflow-y-auto scrollbar-hide">
+ <div className="relative w-full container overflow-y-auto scrollbar-hide">이 오타는 다른 파일(FinancialProductListPage.jsx)에서도 발견되니 함께 수정하시길 권장합니다.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div className="relative w-full conatiner overflow-y-auto scrollbar-hide"> | |
| <div className="relative w-full container overflow-y-auto scrollbar-hide"> |
🤖 Prompt for AI Agents
In src/pages/support/SupportRecommendPage.jsx at line 36, there is a typo in the
CSS class name "conatiner" which should be corrected to "container". Fix this
typo by replacing "conatiner" with "container". Also, check the file
FinancialProductListPage.jsx for the same typo and correct it similarly.
|
|
||
| return ( | ||
| <div className="flex flex-col pr-5 pl-5 h-[calc(100vh-5.25rem)] overflow-y-auto pb-5 mb-5"> | ||
| <div className="flex flex-col pr-5 pl-5 conatiner overflow-y-auto pb-5 mb-5"> |
There was a problem hiding this comment.
클래스명 오타 수정이 필요합니다.
CSS 클래스명에 오타가 있습니다: conatiner는 container의 오타로 보입니다.
- <div className="flex flex-col pr-5 pl-5 conatiner overflow-y-auto pb-5 mb-5">
+ <div className="flex flex-col pr-5 pl-5 container overflow-y-auto pb-5 mb-5">이 오타는 SupportRecommendPage.jsx 파일에서도 동일하게 발견됩니다. 모든 관련 파일에서 일관되게 수정하시길 권장합니다.
🤖 Prompt for AI Agents
In src/pages/support/FinancialProductListPage.jsx at line 78, there is a typo in
the CSS class name "conatiner" which should be corrected to "container". Locate
the same typo in SupportRecommendPage.jsx and fix it there as well to maintain
consistency across related files.
src/hooks/useLikeToggle.js
Outdated
| if (authenticated && companyId) { | ||
| const likedList = await getLikedCompanies(); | ||
| const liked = likedList.some( | ||
| (c) => String(c.companyId) === String(companyId), | ||
| ); | ||
| setIsLiked(liked); | ||
| setLike(companyId, liked); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
API 호출 오류 처리 누락
getLikedCompanies 실패 시 훅이 끝까지 loading 상태로 남거나 잘못된 isLiked 값을 사용하게 됩니다. try‧catch 로 감싸고 실패 시 setLoading(false) 와 오류 로그를 남겨주세요.
- const likedList = await getLikedCompanies();
+ let likedList = [];
+ try {
+ likedList = await getLikedCompanies();
+ } catch (e) {
+ console.error("좋아요 목록 조회 실패:", e);
+ }📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| if (authenticated && companyId) { | |
| const likedList = await getLikedCompanies(); | |
| const liked = likedList.some( | |
| (c) => String(c.companyId) === String(companyId), | |
| ); | |
| setIsLiked(liked); | |
| setLike(companyId, liked); | |
| if (authenticated && companyId) { | |
| let likedList = []; | |
| try { | |
| likedList = await getLikedCompanies(); | |
| } catch (e) { | |
| console.error("좋아요 목록 조회 실패:", e); | |
| } | |
| const liked = likedList.some( | |
| (c) => String(c.companyId) === String(companyId), | |
| ); | |
| setIsLiked(liked); | |
| setLike(companyId, liked); |
🤖 Prompt for AI Agents
In src/hooks/useLikeToggle.js around lines 24 to 30, the call to
getLikedCompanies lacks error handling, causing the hook to remain in a loading
state or use incorrect isLiked values if the API call fails. Wrap the
getLikedCompanies call and subsequent logic in a try-catch block, and in the
catch block, call setLoading(false) and log the error to handle failures
gracefully.
dbstj0403
changed the title
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (1)
src/pages/myPageDetail/MyPageDetailPage.jsx (1)
84-120:⚠️ Potential issue코드 중복 문제: 중복된 렌더링 로직 제거 필요
84-120줄의 코드는 38-71줄에서 이미 구현된 "리뷰"와 "응원" 렌더링 로직을 중복하고 있습니다. 새로 추가된 코드(38-71줄)는 로딩 상태 체크를 포함하고 있어 더 견고하므로, 이 중복 코드는 제거하는 것이 좋습니다.
아래와 같이 중복 코드를 제거하세요:
- <div className="flex flex-col gap-4 w-full bg-gray-2 p-5 min-h-screen"> - {kind === "리뷰" && ( - <> - {reviewsData?.length > 0 ? ( - reviewsData.map((item, idx) => ( - <ReviewItem data={item} key={idx} /> - )) - ) : ( - <div className="flex flex-col justify-center items-center mt-36"> - <img src={noResult} /> - <p className="h4 text-gray-9 text-center py-8"> - 아직 작성한 리뷰가 - <br /> 없어요 - </p> - </div> - )} - </> - )} - - {kind === "응원" && ( - <> - {cheersData?.length > 0 ? ( - cheersData.map((item) => ( - <StoryItem item={item} key={item.storyId} /> - )) - ) : ( - <div className="flex flex-col justify-center items-center mt-36"> - <img src={noResult} /> - <p className="h4 text-gray-9 text-center py-8"> - 아직 응원한 이야기가 - <br /> 없어요 - </p> - </div> - )} - </> - )} - </div> + <div className="flex flex-col gap-4 w-full bg-gray-2 p-5 min-h-screen"> + {/* 여기에 찜 목록을 위한 공간이 필요하다면 추가하세요 */} + </div>🧰 Tools
🪛 Biome (1.9.4)
[error] 88-106: Avoid using unnecessary Fragment.
A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.
Unsafe fix: Remove the Fragment(lint/complexity/noUselessFragments)
🧹 Nitpick comments (2)
src/pages/myPageDetail/MyPageDetailPage.jsx (2)
38-54: 리뷰 섹션의 불필요한 Fragment 제거 필요불필요한 Fragment가 사용되었습니다. 단일 조건부 렌더링 표현식을 감싸는 Fragment는 제거해도 됩니다.
아래와 같이 코드를 수정하세요:
- {kind === "리뷰" && ( - <> - {!isLoadingReviews && reviewsData?.length > 0 ? ( - reviewsData?.map((item, idx) => ( - <ReviewItem data={item} key={idx} /> - )) - ) : !isLoadingReviews && reviewsData?.length === 0 ? ( - <div className="flex flex-col justify-center items-center mt-36"> - <img src={noResult} /> - <p className="h4 text-gray-9 text-center py-8"> - 아직 작성한 리뷰가 - <br /> 없어요 - </p> - </div> - ) : null} - </> - )} + {kind === "리뷰" && + (!isLoadingReviews && reviewsData?.length > 0 ? ( + reviewsData?.map((item, idx) => ( + <ReviewItem data={item} key={idx} /> + )) + ) : !isLoadingReviews && reviewsData?.length === 0 ? ( + <div className="flex flex-col justify-center items-center mt-36"> + <img src={noResult} /> + <p className="h4 text-gray-9 text-center py-8"> + 아직 작성한 리뷰가 + <br /> 없어요 + </p> + </div> + ) : null) + }
56-71: 응원 섹션의 불필요한 Fragment 제거 필요불필요한 Fragment가 사용되었습니다. Fragment 내에 단일 조건부 렌더링 표현식만 있으므로 Fragment를 제거하는 것이 좋습니다.
아래와 같이 코드를 수정하세요:
- {kind === "응원" && ( - <> - {!isLoadingCheers && cheersData?.length > 0 ? ( - cheersData?.map((item) => ( - <StoryItem item={item} key={item.storyId} /> - )) - ) : !isLoadingCheers && cheersData?.length === 0 ? ( - <div className="flex flex-col justify-center items-center mt-36"> - <img src={noResult} /> - <p className="h4 text-gray-9 text-center py-8"> - 아직 응원한 이야기가 - <br /> 없어요 - </p> - </div> - ) : null} - </> - )} + {kind === "응원" && + (!isLoadingCheers && cheersData?.length > 0 ? ( + cheersData?.map((item) => ( + <StoryItem item={item} key={item.storyId} /> + )) + ) : !isLoadingCheers && cheersData?.length === 0 ? ( + <div className="flex flex-col justify-center items-center mt-36"> + <img src={noResult} /> + <p className="h4 text-gray-9 text-center py-8"> + 아직 응원한 이야기가 + <br /> 없어요 + </p> + </div> + ) : null) + }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/pages/map/components/review/ReviewContent.jsx(1 hunks)src/pages/myPageDetail/MyPageDetailPage.jsx(2 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/pages/myPageDetail/MyPageDetailPage.jsx (3)
src/components/common/Spinner.jsx (1)
Spinner(3-9)src/pages/myPageDetail/components/ReviewItem.jsx (2)
navigate(11-11)ReviewItem(10-65)src/pages/myPageDetail/components/StoryItem.jsx (2)
navigate(4-4)StoryItem(3-33)
🪛 Biome (1.9.4)
src/pages/myPageDetail/MyPageDetailPage.jsx
[error] 40-56: Avoid using unnecessary Fragment.
A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.
Unsafe fix: Remove the Fragment
(lint/complexity/noUselessFragments)
[error] 58-75: Avoid using unnecessary Fragment.
A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.
Unsafe fix: Remove the Fragment
(lint/complexity/noUselessFragments)
🔇 Additional comments (4)
src/pages/map/components/review/ReviewContent.jsx (1)
11-11: 안전한 속성 접근 방식으로 개선됨!
item객체가null또는undefined일 때 발생할 수 있는 런타임 오류를 방지하기 위해 선택적 체이닝 연산자(?.)를 사용한 좋은 방어적 프로그래밍 기법입니다. 또한profileColor속성이 없을 경우 "gray"를 기본값으로 사용하여 UI가 항상 일관되게 렌더링되도록 보장합니다.src/pages/myPageDetail/MyPageDetailPage.jsx (3)
9-9: Spinner 컴포넌트 추가로 로딩 상태 시각화 구현Spinner 컴포넌트를 불러오는 import 문을 추가하여 로딩 상태를 시각적으로 표시할 수 있게 되었습니다. 사용자 경험 향상에 좋은 변화입니다.
24-30: 로딩 상태 처리 로직 개선데이터 로딩 중일 때 Spinner를 표시하는 로직이 잘 구현되었습니다. 이는 사용자에게 현재 데이터를 가져오는 중임을 명확히 알려줍니다.
76-76: UI 일관성을 위한 여백 조정'찜' 섹션 헤더에
my-2마진을 추가하여 일관된 간격과 레이아웃을 유지하도록 개선했습니다.
shroqkf
left a comment
shroqkf
left a comment
There was a problem hiding this comment.
지원사업 부분에서 태그 UI가 피그마랑 다르게 되어 있습니다! 확인하고 수정 바랍니다
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/pages/support/components/FOACard.jsx (2)
7-8: 다른 속성도 선택적 체이닝 적용 고려
announcementType에는 선택적 체이닝을 적용했지만,data.endDate,data.title,data.organization등 다른 속성들에는 적용되지 않았습니다. 일관성 있는 방어적 코딩을 위해 이러한 속성에도 선택적 체이닝을 적용하는 것을 고려해보세요.- const formattedEndDate = formatEndDate(data.endDate); - const dday = calculateDday(data.endDate); + const formattedEndDate = formatEndDate(data?.endDate); + const dday = calculateDday(data?.endDate);
47-48: 다른 텍스트 속성도 선택적 체이닝 적용 필요제목과 기관명을 표시하는 부분에도 선택적 체이닝을 적용하여 데이터가 없는 경우에도 안전하게 처리할 수 있도록 하는 것이 좋습니다.
- <p className="h3 leading-snug line-clamp-2">{data.title}</p> - <p className="b5 text-gray-6">{data.organization}</p> + <p className="h3 leading-snug line-clamp-2">{data?.title}</p> + <p className="b5 text-gray-6">{data?.organization}</p>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/pages/support/SupportItemPage.jsx(4 hunks)src/pages/support/components/FOACard.jsx(1 hunks)src/pages/support/components/FOAItem.jsx(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- src/pages/support/components/FOAItem.jsx
- src/pages/support/SupportItemPage.jsx
🔇 Additional comments (1)
src/pages/support/components/FOACard.jsx (1)
45-45: 선택적 체이닝 추가로 안정성 향상 👍
data?.announcementType와 같이 선택적 체이닝을 추가하여data가 null이나 undefined일 때 발생할 수 있는 런타임 오류를 방지했습니다. 이는 코드의 안정성을 향상시키는 좋은 변경입니다.
🌟 어떤 이유로 MR를 하셨나요?
📝 세부 내용 - 왜 해당 MR이 필요한지 작업 내용을 자세하게 설명해주세요
📸 작업 화면 스크린샷
X
Summary by CodeRabbit
신규 기능
버그 수정
리팩터
스타일
문서/주석
기타