Conversation
Walkthrough이번 변경에서는 여러 UI 컴포넌트와 훅에 옵션 및 스타일 관련 수정이 이루어졌습니다. 파일 업로드 및 이미지 업로드 훅에 기본 이미지 사용 여부를 제어하는 옵션이 추가되었고, 일부 컴포넌트의 props 명칭 및 조건부 렌더링 로직이 변경되었습니다. 또한, 스타일 및 네비게이션 동작에 대한 세부 조정이 포함되어 있습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant Parent as 상위 컴포넌트
participant FileUpload as FileUpload
participant useImageUpload as useImageUpload Hook
Parent->>FileUpload: useDefaultImage={false} 전달
FileUpload->>useImageUpload: useDefaultImage 전달
useImageUpload-->>FileUpload: (기본 이미지 사용 여부에 따라 previewUrl 설정)
Suggested labels
Suggested reviewers
Poem
✨ 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: 2
🧹 Nitpick comments (2)
src/shared/ui/EventCard.tsx (1)
72-83: hashtags 조건부 렌더링과 널 안전성 개선이 우수합니다.
hashtags &&조건과(hashtags ?? [])널 병합 연산자를 함께 사용하여 이중 안전장치를 구현했습니다. 하지만 논리적으로 중복됩니다.다음과 같이 단순화할 수 있습니다:
- {hashtags && ( - <div className="flex flex-wrap w-full h-6 mt-2 overflow-hidden text-xs font-semibold text-gray-700 whitespace-nowrap"> - {(hashtags ?? []).map((tag, index) => ( + {hashtags?.length > 0 && ( + <div className="flex flex-wrap w-full h-6 mt-2 overflow-hidden text-xs font-semibold text-gray-700 whitespace-nowrap"> + {hashtags.map((tag, index) => (src/features/event/ui/FileUpload.tsx (1)
9-9: 프로퍼티 문서화를 고려해 보세요.새로 추가된
useDefaultImage프로퍼티의 목적과 동작을 명확히 하기 위해 JSDoc 주석을 추가하는 것을 고려해 보세요.interface FileUploadProps { value?: string; onChange?: (url: string) => void; setEventState?: React.Dispatch<React.SetStateAction<FunnelState['eventState']>>; + /** 기본 이미지 사용 여부를 제어합니다 */ useDefaultImage?: boolean; }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (13)
src/features/event/ui/FileUpload.tsx(1 hunks)src/pages/bookmark/ui/BookmarkPage.tsx(1 hunks)src/pages/dashboard/ui/DashbaordPage.tsx(2 hunks)src/pages/dashboard/ui/EventDetailPage.tsx(1 hunks)src/pages/event/ui/create-event/EventInfoPage.tsx(1 hunks)src/pages/menu/ui/MyPage.tsx(6 hunks)src/pages/menu/ui/MyTicketPage.tsx(1 hunks)src/pages/menu/ui/myHost/MyHostPage.tsx(1 hunks)src/shared/hooks/useImageUpload.ts(2 hunks)src/shared/ui/EventCard.tsx(3 hunks)src/shared/ui/backgrounds/TicketHostLayout.tsx(2 hunks)src/widgets/dashboard/ui/main/TicketRevenue.tsx(1 hunks)src/widgets/main/ui/BottomBar.tsx(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/pages/menu/ui/MyPage.tsx (1)
src/features/join/hooks/useUserHook.ts (1)
useUserInfo(5-10)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: storybook
🔇 Additional comments (22)
src/pages/bookmark/ui/BookmarkPage.tsx (1)
18-18: 스타일링 일관성 개선이 적절합니다.검색 아이콘에
w-5클래스를 추가하여 버튼과 아이콘의 크기를 일치시킨 것은 좋은 개선입니다. UI 일관성을 향상시키는 변경사항입니다.src/widgets/dashboard/ui/main/TicketRevenue.tsx (1)
13-13:Details
❓ Verification inconclusive
반응형 텍스트 크기 개선이 좋습니다.
반응형 텍스트 크기로 변경한 것은 다양한 화면 크기에서의 사용자 경험을 개선하는 좋은 변경입니다. 다만
text-16클래스가 커스텀 클래스인지 확인해 주세요.다음 스크립트로
text-16클래스가 정의되어 있는지 확인해 주세요:
🏁 Script executed:
#!/bin/bash # text-16 클래스가 정의된 위치 찾기 rg -A 3 -B 3 "text-16"Length of output: 5693
반응형 텍스트 크기 개선은 좋아 보이지만, 아직
text-16클래스 정의 위치를 찾지 못했습니다. Tailwind 설정 파일에서 해당 클래스가 실제로 커스텀 정의되어 있는지 확인해 주세요.
🏁 Script executed:
#!/bin/bash # Tailwind 설정에서 text-16 클래스 정의 여부 확인 rg -n "text-16" tailwind.config.jsLength of output: 34
text-16클래스 정의 확인이 필요합니다.현재 Tailwind 기본 유틸리티에
text-16은 포함되어 있지 않으므로, 아래 항목을 확인해 주세요:
tailwind.config.js의theme.extend.fontSize에text-16정의 여부- 전역 CSS 파일(src/styles/global.css, index.css 등)에서
text-16클래스 정의 여부- CSS 모듈 또는 별도 스타일 파일에서
text-16정의 여부src/pages/dashboard/ui/DashbaordPage.tsx (1)
28-28: 포맷된 가격 사용이 적절합니다.
formattedPrice를 사용하고 기존 fallback 로직을 유지한 것이 좋습니다. 사용자에게 더 읽기 쉬운 가격 형식을 제공합니다.src/shared/hooks/useImageUpload.ts (3)
4-12: useDefaultImage 옵션 추가가 유연성을 향상시킵니다.새로운
useDefaultImage옵션을 통해 기본 이미지 사용 여부를 제어할 수 있게 된 것은 훅의 재사용성을 크게 향상시키는 좋은 개선입니다. 기본값을true로 설정하여 기존 동작을 유지한 것도 적절합니다.
21-24: 조건부 기본 이미지 설정 로직이 적절합니다.
useDefaultImage조건과previewUrl !== DEFAULT_BASIC_PROFILE조건을 함께 사용하여 불필요한 상태 업데이트를 방지한 것이 좋습니다. 기본 이미지가 설정될 때onSuccess콜백을 호출하는 것도 일관성 있는 동작입니다.
25-25:Details
✅ Verification successful
dependency array에 previewUrl 추가 시 주의가 필요합니다.
dependency array에
previewUrl을 추가한 것이 무한 루프를 유발할 수 있는지 확인이 필요합니다. 현재 조건문에서previewUrl !== DEFAULT_BASIC_PROFILE로 방지하고 있지만, 향후 로직 변경 시 주의해야 합니다.다음 스크립트로 이 훅을 사용하는 컴포넌트들에서 무한 렌더링이 발생하지 않는지 확인해 주세요:
🏁 Script executed:
#!/bin/bash # useImageUpload 훅 사용처 찾기 rg -A 10 -B 5 "useImageUpload"Length of output: 5514
🏁 Script executed:
#!/bin/bash # useImageUpload 훅의 useEffect 구현부 확인 rg -n "useEffect" -A10 -B10 src/shared/hooks/useImageUpload.tsLength of output: 1098
useEffect 의 previewUrl 의존성으로 인한 무한 루프는 발생하지 않습니다
현재 로직에서
value가 있을 땐 한 번만setPreviewUrl(value)를 호출하고value가 없고useDefaultImage가 켜져 있을 때도 초기에만setPreviewUrl(DEFAULT_BASIC_PROFILE)를 호출한 뒤
이후에는previewUrl === DEFAULT_BASIC_PROFILE조건으로 실행을 건너뛰어 무한 루프가 발생하지 않습니다.향후 로직을 변경하실 때도 이 가드를 유지해 주세요.
src/shared/ui/EventCard.tsx (2)
41-41: 반응형 높이 제약 조건 개선이 잘 적용되었습니다.고정 높이에서
min-h와max-h를 사용한 유연한 높이 제약으로 변경하여 콘텐츠 길이에 따른 적응성이 향상되었습니다.
50-54: dDay 조건부 렌더링 로직이 올바르게 개선되었습니다.
dDay !== 'false'조건을 통해 불필요한 Countdown 컴포넌트 렌더링을 방지하는 것이 적절합니다.src/shared/ui/backgrounds/TicketHostLayout.tsx (2)
8-11: prop 이름 변경과 기본값 수정이 적절합니다.
showText에서ticketPage로의 이름 변경이 더 명확한 의미를 전달하며, 기본값을true로 설정한 것도 합리적입니다.
38-48: 조건부 렌더링 로직이 명확하게 구성되었습니다.
ticketPageboolean 값에 따른 다른 텍스트 표시가 적절하게 구현되었습니다.div에서p태그로의 변경도 시맨틱하게 더 적합합니다.src/pages/menu/ui/MyTicketPage.tsx (1)
49-49: TicketHostLayout 컴포넌트의 API 변경에 올바르게 대응했습니다.
showText={true}에서ticketPage={true}로의 prop 변경이 정확하게 적용되어 기존 기능이 유지됩니다.src/pages/menu/ui/myHost/MyHostPage.tsx (2)
19-19: 새로운 ticketPage prop 사용이 적절합니다.
ticketPage={false}설정으로 호스트 페이지에 맞는 안내 텍스트가 표시되도록 구성되었습니다.
20-20: 마진 조정으로 레이아웃 간격이 개선되었습니다.
mt-24에서mt-28로의 변경으로 상단 여백이 적절히 증가했습니다.src/pages/event/ui/create-event/EventInfoPage.tsx (1)
10-10: 변경사항이 적절합니다.FileUpload 컴포넌트에
useDefaultImage={false}prop을 추가하여 기본 이미지 미리보기를 명시적으로 비활성화하는 것은 좋은 개선입니다. 이를 통해 컴포넌트의 동작을 더 명확하게 제어할 수 있습니다.src/pages/dashboard/ui/EventDetailPage.tsx (1)
69-69: 일관성 있는 개선사항입니다.EventInfoPage와 동일하게
useDefaultImage={false}prop을 추가하여 이벤트 관련 페이지들에서 기본 이미지 동작을 일관성 있게 제어하는 것은 좋은 접근입니다.src/pages/menu/ui/MyPage.tsx (5)
8-8: import 문 포맷팅 개선import 문에서 공백을 추가하여 가독성을 향상시킨 것이 좋습니다.
12-12: 구조 분해 할당 포맷팅 개선구조 분해 할당에서 공백을 추가하여 코드 가독성을 향상시킨 것이 좋습니다.
33-33: 함수 매개변수 포맷팅 개선단일 매개변수에서 불필요한 괄호를 제거한 것은 더 깔끔한 코드 스타일입니다.
46-46: 콜백 함수 매개변수 포맷팅 개선단일 매개변수에서 괄호를 제거한 것은 일관성 있는 코드 스타일입니다.
107-107: PaymentCard 컴포넌트 제거 확인 필요PaymentCard 컴포넌트가 주석 처리되어 등록된 카드 섹션이 비활성화되었습니다. 이것이 의도적인 변경인지 확인이 필요합니다.
이 기능 제거가 의도적인 것인지, 아니면 임시적인 비활성화인지 확인해 주세요. 만약 완전히 제거할 예정이라면 주석 대신 코드를 삭제하는 것을 권장합니다.
src/features/event/ui/FileUpload.tsx (2)
12-12: 컴포넌트 파라미터 변경이 적절합니다.새로운
useDefaultImage프로퍼티가 올바르게 컴포넌트 파라미터에 추가되었습니다.
19-19:Details
✅ Verification successful
훅에 프로퍼티가 올바르게 전달되었는지 확인하세요.
useDefaultImage프로퍼티가useImageUpload훅에 올바르게 전달되었습니다. 훅이undefined값을 적절히 처리하는지 확인해 보세요.다음 스크립트를 실행하여
useImageUpload훅이useDefaultImage파라미터를 어떻게 처리하는지 확인해 보겠습니다:
🏁 Script executed:
#!/bin/bash # useImageUpload 훅에서 useDefaultImage 파라미터 처리 방식 확인 ast-grep --pattern 'const useImageUpload = ($PARAMS) => { $$$ }'Length of output: 4675
useDefaultImage 기본값(true)으로 안전하게 처리됩니다
useImageUpload훅 시그니처에서useDefaultImage = true로 선언되어 있어,undefined가 전달되더라도 기본값이 적용됩니다.
따라서FileUpload.tsx에서useDefaultImage를 전달해 주시면 의도한 대로 동작합니다.
|
|
||
| const DashboardPage = () => { | ||
| const { data } = useHostDashboard(); | ||
| const formattedPrice = data?.totalPrice.toLocaleString(); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
가격 포맷팅 개선에 null 체크 추가가 필요합니다.
숫자를 로케일 형식으로 포맷팅하는 것은 사용자 경험을 크게 개선하는 좋은 변경입니다. 하지만 data?.totalPrice가 undefined일 때 toLocaleString() 메서드 호출 시 에러가 발생할 수 있습니다.
다음과 같이 안전한 포맷팅을 제안합니다:
- const formattedPrice = data?.totalPrice.toLocaleString();
+ const formattedPrice = data?.totalPrice?.toLocaleString();📝 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.
| const formattedPrice = data?.totalPrice.toLocaleString(); | |
| const formattedPrice = data?.totalPrice?.toLocaleString(); |
🤖 Prompt for AI Agents
In src/pages/dashboard/ui/DashbaordPage.tsx at line 11, the code calls
toLocaleString() on data?.totalPrice without checking if totalPrice is defined,
which can cause an error if totalPrice is undefined. To fix this, add a null or
undefined check before calling toLocaleString(), for example by using a
conditional expression or optional chaining combined with a fallback value,
ensuring that toLocaleString() is only called on a valid number.
| onClick={() => { | ||
| if (location.pathname === item.path) { | ||
| navigate(-1); | ||
| } else { | ||
| navigate(item.path); | ||
| } | ||
| }} |
There was a problem hiding this comment.
🛠️ Refactor suggestion
네비게이션 로직 개선 제안
현재 탭을 다시 클릭했을 때 뒤로 가기 기능을 추가한 것은 좋은 아이디어입니다. 하지만 몇 가지 개선사항을 제안드립니다:
- 전역
location객체 대신 React Router의useLocation훅 사용을 권장합니다. - 히스토리가 없는 경우를 고려해야 합니다.
다음과 같이 개선할 수 있습니다:
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
import { bottomBar } from '../../../shared/types/bottomBarType';
const BottomBar = () => {
const navigate = useNavigate();
+ const location = useLocation();
return (
<div className="flex justify-between fixed bottom-0 w-full max-w-lg h-20 rounded-t-[10px] bg-white border-t border-t-gray4">
{bottomBar.map((item, index) => (
<div
key={index}
className="flex flex-col justify-center items-center w-24 h-20 cursor-pointer"
onClick={() => {
if (location.pathname === item.path) {
- navigate(-1);
+ if (window.history.length > 1) {
+ navigate(-1);
+ }
} else {
navigate(item.path);
}
}}🤖 Prompt for AI Agents
In src/widgets/main/ui/BottomBar.tsx around lines 12 to 18, replace the use of
the global location object with React Router's useLocation hook to get the
current path. Additionally, enhance the onClick handler to check if there is a
history entry to go back to before calling navigate(-1), preventing errors when
no history exists. This involves importing and using useLocation, storing the
current location, and conditionally navigating back or to the item's path based
on that and history availability.
2 participants
Summary by CodeRabbit
신규 기능
버그 수정
UI/스타일 개선
리팩터