Feat/139/gathering card UI #151
Conversation
Walkthroughμ΄λ² λ³κ²½ μ¬νμ μ¬λ¬ μ»΄ν¬λνΈμ UI λ° κ΅¬μ‘°λ₯Ό κ°μ νλ λ° μ€μ μ λκ³ μμ΅λλ€. Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Warning There were issues while running some tools. Please review the errors and either fix the toolβs configuration or disable the tool if itβs a critical failure. π§ eslint
src/app/(crew)/crew/detail/[id]/_components/gathering-detail-modal/presenter.tsxOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't determine the plugin "react-hooks" uniquely.
Please remove the "plugins" setting from either config or remove either plugin installation. If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? πͺ§ TipsChatThere are 3 ways to chat with CodeRabbit:
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 (
|
|
πstorybook: https://67206cc6ff9d7a05a3528ff8-crhmlhhiby.chromatic.com/ |
![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
π§Ή Outside diff range and nitpick comments (15)
src/app/(crew)/my-favorite/page.tsx (1)
5-7: μ κ·Όμ± κ°μ μ΄ νμν λ μ΄μμ λ³κ²½μ¬νμ λλ€.λ μ΄μμ λ³κ²½μ¬νμ΄ μ λ°μ μΌλ‘ μ ꡬνλμμ΅λλ€. λ°μν λμμΈμ μν ν¨λ©κ° μ‘°μ κ³Ό νλ©΄ ν¬κΈ°λ³ ν€λ νμκ° μ μ ν©λλ€.
λ€λ§, μ κ·Όμ± ν₯μμ μν΄ λ€μκ³Ό κ°μ κ°μ μ μ μλ립λλ€:
- <div className="hidden pb-10 text-3xl font-bold md:block">μ°ν μ½μ</div> + <h1 className="hidden pb-10 text-3xl font-bold md:block">μ°ν μ½μ</h1>μ΄λ λ€μκ³Ό κ°μ μ΄μ μ΄ μμ΅λλ€:
- μλ§¨ν± HTMLμ ν΅ν μΉ μ κ·Όμ± ν₯μ
- μ€ν¬λ¦° 리λ μ¬μ©μλ₯Ό μν νμ΄μ§ ꡬ쑰 λͺ νν
- SEO μ΅μ νμ λμ
src/utils/format-date.ts (1)
19-20: λ°ν ꡬ쑰 κ°μ μ΄ μ μ΄λ£¨μ΄μ‘μ΅λλ€.λ μ§μ μμΌμ λΆλ¦¬νμ¬ λ°ννλ κ΅¬μ‘°λ‘ λ³κ²½ν¨μΌλ‘μ¨ μ»΄ν¬λνΈμμ λ μ μ°νκ² μ¬μ©ν μ μκ² λμμ΅λλ€. μ΄λ UI ꡬμ±μ μμ λλ₯Ό λμ΄κ³ μ¬μ¬μ©μ±μ ν₯μμν€λ μ’μ λ³κ²½μ¬νμ λλ€.
μ΄λ¬ν ꡬ쑰λ λ€μκ³Ό κ°μ μ΄μ μ΄ μμ΅λλ€:
- μ»΄ν¬λνΈμμ λ μ§μ μμΌμ λ 립μ μΌλ‘ μ€νμΌλ§ κ°λ₯
- κ΅μ ν(i18n) μ μ© μ λ μ©μ΄ν ꡬ쑰
- λ°μ΄ν° ꡬ쑰μ λͺ νμ± ν₯μ
src/components/common/tab/index.tsx (2)
28-28: μ¬μ©μ κ²½ν κ°μ μ μν μ μνμ μνΈμμ©μ±μ λμ΄κΈ° μν΄ λ€μκ³Ό κ°μ κ°μ μ¬νμ κ³ λ €ν΄λ³΄μΈμ:
- className={`${baseStyle} ${isActive ? 'bg-blue-500 text-white' : 'bg-white text-blue-500'}`} + className={`${baseStyle} ${ + isActive + ? 'bg-blue-500 text-white' + : 'bg-white text-blue-500 hover:bg-blue-50 transition-colors' + }`}Also applies to: 39-39
34-40: μ κ·Όμ± κ°μ μ μν μ μμ€ν¬λ¦° 리λ μ¬μ©μλ₯Ό μν΄ aria-label μμ±μ μΆκ°νλ κ²μ΄ μ’μ΅λλ€.
<button key={tab.id} role="tab" type="button" aria-selected={isActive} + aria-label={`${tab.label} ν ${isActive ? 'μ νλ¨' : ''}`} onClick={() => onTabClick(tab.id)} className={`${baseStyle} ${isActive ? 'bg-blue-500 text-white' : 'bg-white text-blue-500'}`} >src/app/(crew)/my-gathering/layout.tsx (1)
32-33: λ μ΄μμ κ΅¬μ‘°κ° κ°μ λμμ΅λλ€λ§, μ κ·Όμ± κ³ λ €κ° νμν©λλ€.λ°μν λμμΈμ΄ μ ꡬνλμμΌλ, λ€μ μ¬νλ€μ κ³ λ €ν΄λ³΄μκΈ° λ°λλλ€:
- λͺ¨λ°μΌμμ μ¨κ²¨μ§ μ λͺ©μ λν λ체 ν μ€νΈλ μμκ° νμν μ μμ΅λλ€
- ꡬλΆμ μ μ맨ν±ν μλ―Έλ₯Ό κ°ννκΈ° μν΄
<hr />νκ·Έ μ¬μ©μ κ³ λ €ν΄λ³΄μΈμλ€μκ³Ό κ°μ΄ μμ ν΄λ³΄μλ κ²μ μ΄λ¨κΉμ?
- <div className="hidden pb-6 text-3xl font-bold text-gray-900 md:block">λμ μ½μ</div> + <h1 className="sr-only md:not-sr-only md:pb-6 md:text-3xl md:font-bold md:text-gray-900">λμ μ½μ</h1> <Tabs variant="default" tabs={myGatheringTabs} activeTab={currentTab} onTabClick={(id) => handleTabClick(id)} /> - <div className="mt-10 hidden w-full border-t-2 border-gray-200 md:block" /> + <hr className="mt-10 hidden w-full border-t-2 border-gray-200 md:block" />Also applies to: 40-40
src/app/(crew)/my-crew/layout.tsx (1)
29-36: ν μ»΄ν¬λνΈ κ΅¬νμ λν μ μν μ»΄ν¬λνΈμ ꡬνμ μ λμ΄μμ§λ§, μ κ·Όμ± ν₯μμ μν κ°μ μ΄ νμν΄ λ³΄μ λλ€.
λ€μκ³Ό κ°μ κ°μ μ¬νμ μ μλ립λλ€:
<Tabs variant="default" tabs={myCrewTabs} activeTab={currentTab} + aria-label="λ΄ ν¬λ£¨ λ€λΉκ²μ΄μ " onTabClick={(id) => { handleTabClick(id); }} />src/app/(crew)/my-gathering/_component/gathering-list-with-date.tsx (2)
Line range hint
13-21: νμ μμ μ±κ³Ό λ¬Έμν κ°μ μ΄ νμν©λλ€.
useMemoμ΅μ νλ μ λμ΄μμ§λ§, λ€μ μ¬νλ€μ κ°μ νλ©΄ μ’μ κ² κ°μ΅λλ€:
- λ μ§ λΉκ΅ λ‘μ§μ λν νμ μμ μ± κ°ν
isNewDateκ³μ° λ‘μ§μ λν μ£Όμ μΆκ°λ€μκ³Ό κ°μ΄ κ°μ ν΄λ³΄μΈμ:
const gatheringListWithDateInfo = useMemo(() => { + // κ° λͺ¨μλ³λ‘ μ΄μ λͺ¨μκ³Ό λ μ§κ° λ€λ₯Έ κ²½μ° μλ‘μ΄ λ μ§λ‘ νμ return gatheringList.map((gathering, index) => { + const currentDate = formatDate(gathering.dateTime).date; + const previousDate = index > 0 + ? formatDate(gatheringList[index - 1].dateTime).date + : null; const isNewDate = - index === 0 || - formatDate(gathering.dateTime).date !== formatDate(gatheringList[index - 1].dateTime).date; + index === 0 || currentDate !== previousDate; return { ...gathering, isNewDate }; }); }, [gatheringList]);
Line range hint
23-44: μ κ·Όμ±κ³Ό μλ§¨ν± λ§ν¬μ κ°μ μ΄ νμν©λλ€.λ μ΄μμ ꡬ쑰λ μ λμ΄μμ§λ§, λ€μκ³Ό κ°μ μ κ·Όμ± κ°μ μ¬νλ€μ κ³ λ €ν΄λ³΄μΈμ:
- λ μ§ κ΅¬λΆμ μ λν μ€ν¬λ¦°λ¦¬λ μ§μ
- μλ§¨ν± HTML μμ νμ©
λ€μκ³Ό κ°μ΄ κ°μ ν΄λ³΄μΈμ:
- <div> + <section aria-label="λͺ¨μ λͺ©λ‘"> {gatheringListWithDateInfo.map((gathering) => ( - <div key={gathering.id} className="md:flex"> + <article key={gathering.id} className="md:flex"> <div className="w-1/6"> {gathering.isNewDate && ( - <div className="hidden flex-nowrap md:block"> + <header className="hidden flex-nowrap md:block"> - <div className="text-lg font-semibold"> + <time className="text-lg font-semibold" dateTime={gathering.dateTime}> {formatDate(gathering.dateTime).date} - </div> + </time> <div className="text-base font-medium text-gray-500"> {formatDate(gathering.dateTime).dayOfWeek} </div> - </div> + </header> )} </div> - <div className={`${gathering.isNewDate && 'mt-3.5'} relative -mb-3.5 w-0.5 bg-gray-200`}> + <div + className={`${gathering.isNewDate && 'mt-3.5'} relative -mb-3.5 w-0.5 bg-gray-200`} + role="separator" + aria-hidden="true" + > {gathering.isNewDate && <div className="md:corner-dot" />} </div> <div className="flex-1 pb-6 md:pl-8"> <ScheduledGatheringCard key={gathering.id} data={gathering} /> </div> - </div> + </article> ))} - </div> + </section>src/components/gathering-list/liked-list-presenter.tsx (1)
Line range hint
41-61: νμ΄μ§λ€μ΄μ μ€νμΌ μΆμΆ μ μνμ΄μ§λ€μ΄μ μ€νμΌμ΄ μ»΄ν¬λνΈ λ΄λΆμ μ§μ μ μλμ΄ μμ΅λλ€. μ¬μ¬μ©μ±μ μν΄ λ³λμ μμλ μ νΈλ¦¬ν°λ‘ λΆλ¦¬νλ κ²μ κ³ λ €ν΄λ³΄μΈμ.
λ€μκ³Ό κ°μ΄ μ€νμΌμ λΆλ¦¬ν μ μμ΅λλ€:
// constants/styles/pagination.ts export const PAGINATION_STYLES = { classNames: { control: cn( 'data-[active="true"]:text-blue-500 data-[active="true"]:font-bold', 'border-none bg-transparent hover:bg-transparent', ), }, styles: { control: { '&[data-active]': { backgroundColor: 'transparent', fontWeight: 'var(--pagination-active-font-weight)', color: 'var(--pagination-active-color)', boxShadow: 'none', }, }, }, };src/components/common/gathering-card/scheduled-gathering-card/presenter.tsx (1)
17-17: λ°μ΄ν° ꡬ쑰 λ³κ²½μ λν μ£Όμ μΆκ°λ₯Ό μ μλ립λλ€.
locationνλλ‘μ ν΅ν©κ³ΌdayOfWeekμΆκ°μ κ°μ λ°μ΄ν° ꡬ쑰 λ³κ²½μ¬νμ λν μ€λͺ μ μ£ΌμμΌλ‘ μΆκ°νλ©΄ μ’μ κ² κ°μ΅λλ€.+ // location: μ΄μ μ crewMainLocationκ³Ό crewSubLocationμ΄ ν΅ν©λ νλ + // dateTime: YYYY-MM-DD HH:mm:ss νμμ λ μ§ λ¬Έμμ΄ const { crewTitle, title, dateTime, location, currentCount, totalCount, imageUrl } = data;Also applies to: 19-19
src/components/common/gathering-card/presenter.tsx (3)
Line range hint
11-24: Props μΈν°νμ΄μ€μ JSDoc λ¬Έμν μΆκ° νμκ° propμ λͺ©μ κ³Ό μ¬μ©λ²μ λͺ ννκ² μ΄ν΄ν μ μλλ‘ JSDoc λ¬Έμνλ₯Ό μΆκ°νλ κ²μ΄ μ’μ΅λλ€. νΉν
isWithin24HoursμdeadlineMessageμ κ°μ μλ‘μ΄ propsμ κ²½μ° λ¬Έμνκ° λμ± μ€μν©λλ€.μμ:
export interface GatheringCardPresenterProps { + /** λͺ¨μ κ³ μ μλ³μ */ id: number; + /** λͺ¨μ λν μ΄λ―Έμ§ URL */ imageUrl: string; + /** λͺ¨μ μ λͺ© */ title: string; + /** λͺ¨μ λ μ§ λ° μκ° (ISO λ¬Έμμ΄) */ dateTime: string; + /** λͺ¨μ μ₯μ */ location: string; + /** νμ¬ μ°Έμ¬μ μ */ currentCount: number; + /** μ΄ μ°Έμ¬ κ°λ₯ μΈμ */ totalCount: number; + /** μ’μμ μν */ isLiked: boolean; + /** μ’μμ ν κΈ νΈλ€λ¬ */ onLikeToggle: () => void; + /** μΉ΄λ ν΄λ¦ νΈλ€λ¬ */ onClick: () => void; + /** μ§λ λͺ¨μ μ¬λΆ */ isPast: boolean; + /** 24μκ° μ΄λ΄ λ§κ° μ¬λΆ */ isWithin24Hours?: boolean; + /** λ§κ° μλ° μ νμν λ©μμ§ */ deadlineMessage?: string; className?: string; }
44-44: λ μ§ μ 보μ μ κ·Όμ± κ°μ νμμ€ν¬λ¦° 리λ μ¬μ©μλ₯Ό μν΄ λ μ§ μ 보μ μ μ ν ARIA λ μ΄λΈμ μΆκ°νλ κ²μ΄ μ’μ΅λλ€.
- {`${date} ${dayOfWeek}`} + <span aria-label={`λͺ¨μ λ μ§: ${date} ${dayOfWeek}`}> + {`${date} ${dayOfWeek}`} + </span>Also applies to: 80-84
Line range hint
52-63: λͺ¨λ°μΌ νκ²½ μ΅μ ν κ²ν νμνμ¬ μΉ΄λμ λμ΄κ° κ³ μ κ°(
h-[344px])μΌλ‘ μ€μ λμ΄ μμ΄ λͺ¨λ°μΌ κΈ°κΈ°μμ μ½ν μΈ κ° μ릴 μ μμ΅λλ€. λ°μν λμμΈμ μν΄ λ€μκ³Ό κ°μ κ°μ μ κ³ λ €ν΄λ³΄μΈμ:- 'relative h-[344px] w-full overflow-hidden rounded-lg border-white bg-white shadow-sm', + 'relative min-h-[344px] w-full overflow-hidden rounded-lg border-white bg-white shadow-sm', + 'md:h-[344px]', isPast ? 'pointer-events-none cursor-default' : 'cursor-pointer',src/app/(crew)/crew/detail/[id]/_components/gathering-detail-modal/presenter.tsx (2)
63-71: λ μ§/μκ° νμ κ°μ μ΄ μ λμμ΅λλ€!λ μ§μ μμΌμ ν΅ν©νκ³ μκ°μ ꡬλΆμ μΌλ‘ λΆλ¦¬ν λ μ΄μμμ΄ κ°λ μ±μ λμ¬μ€λλ€. λ€λ§, μ κ·Όμ± ν₯μμ μν μμ μ μμ΄ μμ΅λλ€.
μκ° μ 보μ λν μ€ν¬λ¦° 리λ μ§μμ μν΄ λ€μκ³Ό κ°μ΄ μμ νλ κ²μ κ³ λ €ν΄λ³΄μΈμ:
-<p className="overflow-hidden text-ellipsis whitespace-nowrap text-base font-semibold text-blue-500"> +<p className="overflow-hidden text-ellipsis whitespace-nowrap text-base font-semibold text-blue-500" aria-label={`λͺ¨μ μκ°: ${formatDate(data?.dateTime).time}`}> {formatDate(data?.dateTime).time} </p>
82-87: μ°Έμ¬μ μΉμ UI κ°μ μ΄ ν¨κ³Όμ μ λλ€!νμ¬ μ°Έμ¬μ μλ₯Ό κ°μ‘°νκ³ μ 체 ꡬ쑰λ₯Ό κ°μ ν κ²μ΄ μ’μ΅λλ€. λ€λ§, μ±λ₯ μ΅μ νλ₯Ό μν μ μμ¬νμ΄ μμ΅λλ€.
μ°Έκ°μ λͺ©λ‘μ΄ λ§μ κ²½μ°λ₯Ό λλΉνμ¬ λ€μκ³Ό κ°μ μ΅μ νλ₯Ό κ³ λ €ν΄λ³΄μΈμ:
-<ScrollArea h={152}> +<ScrollArea h={152} type="always" scrollbarSize={6}> <ul className="grid grid-cols-2 gap-4"> - {data?.participants.map((participant) => ( + {data?.participants.slice(0, 20).map((participant) => (
π Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
π Files selected for processing (13)
src/app/(crew)/crew/detail/[id]/_components/gathering-detail-modal/presenter.tsx(4 hunks)src/app/(crew)/my-crew/layout.tsx(1 hunks)src/app/(crew)/my-favorite/page.tsx(1 hunks)src/app/(crew)/my-gathering/_component/gathering-list-with-date.tsx(2 hunks)src/app/(crew)/my-gathering/layout.tsx(2 hunks)src/app/(crew)/my-page/_components/review-tabs.tsx(1 hunks)src/components/common/gathering-card/presenter.tsx(2 hunks)src/components/common/gathering-card/scheduled-gathering-card/presenter.tsx(1 hunks)src/components/common/gathering-card/scheduled-gathering-card/scheduled-gathering.stories.tsx(2 hunks)src/components/common/tab/index.tsx(2 hunks)src/components/gathering-list/liked-list-presenter.tsx(1 hunks)src/types/gathering-data.d.ts(1 hunks)src/utils/format-date.ts(1 hunks)
β Files skipped from review due to trivial changes (1)
- src/app/(crew)/my-page/_components/review-tabs.tsx
π Additional comments (16)
src/components/common/tab/index.tsx (1)
25-25: μ€νμΌ λ¨μνκ° μ λμμ΅λλ€!
λ°μν λμμΈκ³Ό μΌκ΄λ μ€νμΌλ§μ΄ μ μ μ©λμμ΅λλ€.
src/app/(crew)/my-gathering/layout.tsx (1)
8-9: ν λ μ΄λΈ κ°μ μ΄ μ μ΄λ£¨μ΄μ‘μ΅λλ€!
μ¬μ©μ μ€μ¬μ μΈ λ μ΄λΈλ‘ λ³κ²½νμ¬ λ μ§κ΄μ μΈ UIλ₯Ό μ 곡νκ² λμμ΅λλ€.
src/app/(crew)/my-crew/layout.tsx (3)
27-27: λ°μν ν¨λ© ꡬνμ΄ μ μ ν©λλ€.
λͺ¨λ°μΌ(px-3 py-4)μμ λ°μ€ν¬ν±(lg:px-11.5)κΉμ§ λ¨κ³μ μΌλ‘ ν¨λ©μ μ¦κ°μν€λ λ°©μμ΄ μ¬μ©μ κ²½νμ ν₯μμν΅λλ€.
28-28: μ λͺ©μ μ‘°κ±΄λΆ λ λλ§μ΄ μ μ ν©λλ€.
hidden md:block ν΄λμ€λ₯Ό μ¬μ©νμ¬ λͺ¨λ°μΌμμλ μ λͺ©μ μ¨κΈ°κ³ νλΈλ¦Ώ μ΄μμμλ§ νμνλ κ²μ΄ μ’μ μ κ·Όμ
λλ€.
37-38: μκ°μ ꡬλΆμ κ³Ό μ¬λ°± μ²λ¦¬κ° μ μ ν©λλ€.
ꡬλΆμ (border-t-2)κ³Ό μ¬λ°±(mt-10)μ ν΅ν΄ μ½ν
μΈ μμμ λͺ
ννκ² κ΅¬λΆνκ³ μμ΅λλ€. νΉν ꡬλΆμ μ νλΈλ¦Ώ μ΄μμμλ§ νμνλ κ²μ΄ λͺ¨λ°μΌ νλ©΄μ κ³΅κ° νμ©λλ₯Ό λμ
λλ€.
src/types/gathering-data.d.ts (2)
56-56: νμ
μ μκ° μ¬λ°λ₯΄κ² μΆκ°λμμ΅λλ€.
GatheringCardProps μΈν°νμ΄μ€μ location μμ±μ μΆκ°ν κ²μ΄ λ€λ₯Έ μΈν°νμ΄μ€λ€μ ν¨ν΄κ³Ό μΌκ΄μ±μκ² κ΅¬νλμμ΅λλ€.
56-56: μ»΄ν¬λνΈμμ location μμ±μ μ¬μ©μ νμΈν΄μ£ΌμΈμ.
μλ‘ μΆκ°λ location μμ±μ΄ κ΄λ ¨ μ»΄ν¬λνΈμμ μ¬λ°λ₯΄κ² μ¬μ©λκ³ μλμ§ νμΈμ΄ νμν©λλ€.
β Verification successful
location μμ±μ΄ μ»΄ν¬λνΈμμ μ μ νκ² μ¬μ©λκ³ μμμ νμΈνμ΅λλ€.
κ²μ¦ κ²°κ³Ό:
GatheringCardPropsμΈν°νμ΄μ€κ° μ¬λ¬ μ»΄ν¬λνΈμμ μ¬λ°λ₯΄κ² μν¬νΈλμ΄ μ¬μ©λ¨locationμμ±μ΄gathering-cardμ»΄ν¬λνΈμ κ΄λ ¨ μ€ν 리λΆμμ μ μ νκ² μ¬μ©λ¨- λͺ¨λ κ΄λ ¨ μ»΄ν¬λνΈμμ
locationλ°μ΄ν°κ° μΌκ΄λκ² μ²λ¦¬λκ³ μμ
π Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify the usage of location prop in gathering card components
# Search for GatheringCardProps usage in components
rg -t tsx -t ts "GatheringCardProps" -A 10
# Search for location prop usage in gathering related components
rg -t tsx "location[\"']?\s*[:=]" --glob "**/*Gathering*.tsx"
Length of output: 164
Script:
#!/bin/bash
# Search for files containing "Gathering" in their name
fd "Gathering" --type file
# Then search for GatheringCardProps type usage
rg "GatheringCardProps"
# Search for location prop usage in files containing "Gathering"
rg "location[\"']?\s*[:=]" $(fd "Gathering" --type file)
Length of output: 9610
src/app/(crew)/my-gathering/_component/gathering-list-with-date.tsx (1)
4-4: λ μ§ ν¬λ§·ν
λ‘μ§μ΄ κ°μ λμμ΅λλ€!
getDayOfWeek μ νΈλ¦¬ν° ν¨μλ₯Ό μ κ±°νκ³ formatDateμ dayOfWeek μμ±μ μ¬μ©νλλ‘ λ³κ²½ν κ²μ΄ μ’μ κ°μ μ¬νμ
λλ€. μ΄λ₯Ό ν΅ν΄ λ μ§ ν¬λ§·ν
λ‘μ§μ΄ μ€μνλμ΄ μ μ§λ³΄μκ° λμ± μ©μ΄ν΄μ‘μ΅λλ€.
src/components/common/gathering-card/scheduled-gathering-card/scheduled-gathering.stories.tsx (2)
40-40: μμΉ μ λ³΄κ° μ μ νκ² μΆκ°λμμ΅λλ€!
location μμ±μ΄ crewSubLocationκ³Ό μΌκ΄μ± μκ² μΆκ°λμ΄ μμΌλ©°, λͺ¨μ μ₯μλ₯Ό λ ꡬ체μ μΌλ‘ νμν μ μκ² λμμ΅λλ€.
61-61: μμΉ μ 보 λ λλ§ νμΈμ΄ νμν©λλ€.
μλ‘ μΆκ°λ location μμ±μ΄ UIμμ μ¬λ°λ₯΄κ² νμλλμ§ νμΈν΄μ£ΌμΈμ. νΉν κΈ΄ μμΉ ν
μ€νΈμ κ²½μ° λ§μ€μν(...) μ²λ¦¬λ μ€λ°κΏμ΄ μ μ ν λμνλμ§ κ²μ¦μ΄ νμν©λλ€.
λ€μκ³Ό κ°μ κΈ΄ μμΉ ν μ€νΈλ‘λ ν μ€νΈν΄λ³΄μλ κ²μ μΆμ²λ립λλ€:
- location: 'νκ°μ§μ 1λ²μΆκ΅¬',
+ location: 'νκ°μ§μ 1λ²μΆκ΅¬ μ€νλ²
μ€ κ±΄λ¬Ό 3μΈ΅ μ
ꡬ μ',src/components/gathering-list/liked-list-presenter.tsx (2)
Line range hint 25-31: λ°μν 그리λ λ μ΄μμμ΄ μ ꡬνλμμ΅λλ€
- λΈλ μ΄ν¬ν¬μΈνΈλ³ μ»¬λΌ μ μ‘°μ μ΄ μ μ ν©λλ€
- μ΅μ λμ΄ μ μ½μΌλ‘ λ μ΄μμ μννΈλ₯Ό λ°©μ§ν©λλ€
- gapκ³Ό μ λ ¬μ΄ μΌκ΄λκ² μ μ©λμμ΅λλ€
24-24: ν¨λ© μ κ±°λ‘ μΈν λ μ΄μμ μΌκ΄μ± κ²ν νμ
μν ν¨λ©(px-4)μ΄ μ κ±°λμμ΅λλ€. μ΄λ μ 체μ μΈ λ μ΄μμ μΌκ΄μ±μ μν₯μ λ―ΈμΉ μ μμ΅λλ€.
λ€λ₯Έ 리μ€νΈ μ»΄ν¬λνΈλ€μ ν¨λ© μ€μ μ νμΈνκΈ° μν΄ λ€μ μ€ν¬λ¦½νΈλ₯Ό μ€ννμΈμ:
β Verification successful
λ μ΄μμ μΌκ΄μ± κ²ν μλ£ - ν¨λ© μ κ±°λ μ μ ν λ³κ²½
κ²μ κ²°κ³Όλ₯Ό λΆμν΄λ³΄λ max-w-[1200px]λ₯Ό μ¬μ©νλ λ€λ₯Έ μ»΄ν¬λνΈλ€μμλ px-4 ν¨λ©μ μ¬μ©νμ§ μκ³ μμ΅λλ€. νΉν:
- ν€λ μ»΄ν¬λνΈ (
header/presenter.tsx) - μμ± κ°λ₯ν λͺ¨μ μΉ΄λ (
writable-gathering-card.tsx) - νμΌ μ
λ ₯ λνΌ (
file-input-wrap/index.tsx)
μ΄λ νμ¬μ ν¨λ© μ κ±°κ° μ 체μ μΈ λ μ΄μμ μΌκ΄μ±μ κ°μ νλ μ¬λ°λ₯Έ λ³κ²½μμ 보μ¬μ€λλ€.
π Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# λ€λ₯Έ 리μ€νΈ μ»΄ν¬λνΈλ€μ ν¨λ© μ€μ νμΈ
rg -t tsx "className=\".*?max-w-\[1200px\].*?\"" "src/components"
Length of output: 91
Script:
#!/bin/bash
# Search for max-width class usage in all TypeScript and TypeScript React files
rg -t ts -t tsx "className=.*max-w-\[1200px\]" src/components
# Also search for similar max-width patterns that might use different syntax
rg -t ts -t tsx "className=.*max-w-.*1200" src/components
Length of output: 179
Script:
#!/bin/bash
# Search for max-width class usage in all files under src/components
rg "className.*max-w-\[1200px\]" src/components/
# Search for px-4 class usage in all files under src/components
rg "className.*px-4" src/components/
Length of output: 1070
src/components/common/gathering-card/scheduled-gathering-card/presenter.tsx (1)
4-6: νμ
μ μμ μν¬νΈ κ΅¬μ‘°κ° κ°μ λμμ΅λλ€!
GatheringCardProps νμ
μ μ¬μ©νμ¬ μ½λμ νμ
μμ μ±μ΄ ν₯μλμκ³ , μ»΄ν¬λνΈ μ¬μ¬μ©μ±μ΄ κ°μ λμμ΅λλ€.
Also applies to: 9-9
src/components/common/gathering-card/presenter.tsx (1)
Line range hint 86-92: κΈ΄ μ λͺ©κ³Ό μμΉ ν
μ€νΈ μ²λ¦¬ κ²μ¦ νμ
νμ¬ μ λͺ©κ³Ό μμΉ μ λ³΄κ° text-ellipsisμ whitespace-nowrapμΌλ‘ μ²λ¦¬λμ΄ μμ΅λλ€. μ΄ μ²λ¦¬κ° λ€μν κΈΈμ΄μ ν
μ€νΈμμ μ¬λ°λ₯΄κ² μλνλμ§ νμΈμ΄ νμν©λλ€.
β Verification successful
ν μ€νΈ μ€λ²νλ‘μ° μ²λ¦¬κ° μ μ ν ꡬνλμ΄ μμμ νμΈ
νμ¬ κ΅¬νλ ν μ€νΈ μ€λ²νλ‘μ° μ²λ¦¬ λ°©μμ΄ μ μ ν©λλ€:
overflow-hidden,text-ellipsis,whitespace-nowrapν΄λμ€ μ‘°ν©μΌλ‘ κΈ΄ ν μ€νΈλ₯Ό μ¬λ°λ₯΄κ² μ²λ¦¬- μ λͺ©(
h3)κ³Ό μμΉ(p) λͺ¨λ λμΌν μ€λ²νλ‘μ° μ²λ¦¬ λ°©μ μ μ© - λΆλͺ¨ 컨ν μ΄λμ λλΉμ λ§μΆ° μλμΌλ‘ λ§μ€μν(...) νμ
μ΄λ¬ν Tailwind CSS ν΄λμ€ μ‘°ν©μ ν μ€νΈ κΈΈμ΄μ κ΄κ³μμ΄ UIκ° κΉ¨μ§μ§ μλλ‘ λ³΄μ₯ν©λλ€.
π Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# λ§€μ° κΈ΄ μ λͺ©μ΄λ μμΉλ₯Ό κ°μ§ λͺ¨μ λ°μ΄ν°κ° μλμ§ νμΈ
ast-grep --pattern 'title: "$_"' | grep -E '.{50,}'
ast-grep --pattern 'location: "$_"' | grep -E '.{30,}'
Length of output: 110
Script:
#!/bin/bash
# μ»΄ν¬λνΈμμ μ€μ μ¬μ©λλ λ°μ΄ν° μμ μ°ΎκΈ°
rg -U "title.*location.*" --type tsx -A 5 -B 5
# ν
μ€νΈ λ°μ΄ν°λ λͺ©μ
λ°μ΄ν°μμ titleκ³Ό location κ²μ
fd "mock|test|fixture" -e ts -e tsx -e json --exec rg -U "title.*location" {} \;
# Storybook μ€ν 리μμ μ¬μ©λ λ°μ΄ν° μμ κ²μ
fd "stories" -e tsx --exec rg -U "title.*location" {} \;
Length of output: 222
Script:
#!/bin/bash
# TypeScript/React νμΌμμ titleκ³Ό locationμ΄ ν¬ν¨λ μ»΄ν¬λνΈ κ²μ
rg -t ts -t tsx -U "title.*location.*" -A 5 -B 5
# ν
μ€νΈ λ°μ΄ν° κ²μ (νμ₯μ μμ )
rg -t ts -t tsx -t json "title.*location" ./src --glob "*{test,mock,fixture,stories}*"
# GatheringCard μ»΄ν¬λνΈμ μ¬μ© μμ κ²μ
rg -t ts -t tsx "<GatheringCard" -A 10
Length of output: 264
src/app/(crew)/crew/detail/[id]/_components/gathering-detail-modal/presenter.tsx (2)
9-9: μμ΄μ½ λ³κ²½μ΄ μ μ ν΄ λ³΄μ
λλ€!
IcoPerson μμ΄μ½μΌλ‘μ λ³κ²½μ΄ λͺ¨μ μ°Έκ°μλ₯Ό λνλ΄λ λ§₯λ½μ λ μ μ΄μΈλ¦½λλ€.
125-125: λ²νΌ λ μ΄λΈ λ³κ²½μ΄ μ μ ν©λλ€!
"μ½μ μ·¨μνκΈ°"μ "μ½μ μμ νκΈ°"λ‘μ λ³κ²½μ΄ μ¬μ©μμ νλμ λ λͺ ννκ² μ€λͺ ν΄μ€λλ€.
Also applies to: 134-134
| role="button" | ||
| tabIndex={0} | ||
| className="relative flex h-44 cursor-pointer items-center space-x-4 rounded-xl bg-white p-6 shadow-xs md:space-x-6 lg:space-x-6" | ||
| className="h-80 cursor-pointer items-center rounded-xl bg-white shadow-xs md:flex md:h-44" |
There was a problem hiding this comment.
π οΈ Refactor suggestion
μ κ·Όμ± κ°μ μ μν μ μμ¬νμ΄ μμ΅λλ€.
- ν΄λ¦ μ΄λ²€νΈ μ²λ¦¬ κ°μ μ΄ νμν©λλ€:
- {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
<div
onClick={onClick}
role="button"
tabIndex={0}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ onClick();
+ }
+ }}
className="h-80 cursor-pointer items-center rounded-xl bg-white shadow-xs md:flex md:h-44"
>- μ€ν¬λ¦° 리λ μ¬μ©μλ₯Ό μν μΆκ° μ λ³΄κ° νμν©λλ€:
- <Image src={IcoPerson} alt="person icon" width={16} height={16} className="pb-0.5" />
+ <Image src={IcoPerson} alt="μ°Έμ¬ μΈμ μμ΄μ½" width={16} height={16} className="pb-0.5" />- λ²νΌ μ»΄ν¬λνΈμ μ κ·Όμ± μμ±μ μΆκ°νλ©΄ μ’μ κ² κ°μ΅λλ€:
- <Button className="lg:w-1/ btn-filled w-40 md:w-1/2" onClick={onClick}>
+ <Button
+ className="lg:w-1/ btn-filled w-40 md:w-1/2"
+ onClick={onClick}
+ aria-label={`${title} λͺ¨μ μμΈ μ 보 보기`}
+ >Also applies to: 31-31, 34-53
| <h2 className="text-xl font-semibold text-gray-800">{data?.title}</h2> | ||
| <h3 className="text-base font-medium text-gray-700">{data?.location}</h3> | ||
| <div className="mt-4 w-full border-gray-200"> | ||
| <p className="text-base font-semibold text-blue-500">μ½μ 곡μ§μ¬ν</p> | ||
| <div className="overflow-y-auto text-base font-medium text-gray-700"> | ||
| {data?.introduce || 'μκ° μ λ³΄κ° μμ΅λλ€.'} | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
π‘ Codebase verification
λ°μ΄ν° μ²λ¦¬μ λν λ°©μ΄ λ‘μ§μ΄ νμν©λλ€
μ½λ κ²ν κ²°κ³Ό, λ€μκ³Ό κ°μ κ°μ μ΄ νμν©λλ€:
data?.locationμ΄undefinedμΌ λ λ체 ν μ€νΈκ° μμ΅λλ€.- λ€λ₯Έ νλλ€(
title,dateTimeλ±)μ μ΅μ λ 체μ΄λμΌλ‘ μ²λ¦¬λμ΄ μμ§λ§, λΉ κ°μ λν λ체 ν μ€νΈκ° μμ΅λλ€.
κ°μ μ μ:
<h2 className="text-xl font-semibold text-gray-800">{data?.title || 'μ λͺ© μμ'}</h2>
<h3 className="text-base font-medium text-gray-700">{data?.location || 'μμΉ μ 보 μμ'}</h3>π Analysis chain
μμΉ μ 보μ 곡μ§μ¬ν μΉμ μ΄ μ ꡬμ±λμμ΅λλ€!
μμΉ μ 보 μΆκ°μ 곡μ§μ¬ν μΉμ μ ꡬ쑰νκ° μ λμμ΅λλ€. λ€λ§, λ°μ΄ν° μ²λ¦¬ κ΄λ ¨ 보μμ΄ νμν΄ λ³΄μ λλ€.
λ€μ μ¬νλ€μ νμΈν΄μ£ΌμκΈ° λ°λλλ€:
locationλ°μ΄ν°κ° μλ κ²½μ°μ λν μ²λ¦¬dataκ°μ²΄κ°undefinedμΈ κ²½μ°μ λν λ°©μ΄ λ‘μ§
μλ μ€ν¬λ¦½νΈλ‘ κ΄λ ¨ μ½λλ₯Ό νμΈν΄λ³΄κ² μ΅λλ€:
π Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# location propμ νμ μ¬λΆ νμΈ
rg -A 5 "location.*:" "src/types/*"
Length of output: 89
Script:
#!/bin/bash
# νμ
μ μ νμΌ μ°ΎκΈ°
fd "types?.ts" --type f
# λ°μ΄ν° νμ
μ μ νμΈ
rg -g "*.ts" -g "*.tsx" "type.*Gathering|interface.*Gathering" -A 10
Length of output: 29688
Script:
#!/bin/bash
# λͺ¨λ¬ μ»΄ν¬λνΈμ λ°μ΄ν° νμ
κ³Ό ꡬν νμΈ
rg -g "*.ts*" "GatheringDetailType" -A 5 "src/app/(crew)/crew/detail/\[id\]/_components/gathering-detail-modal/"
# λ°μ΄ν° μ²λ¦¬ λ‘μ§ νμΈ
ast-grep --pattern 'data?.location' -l ts,tsx
Length of output: 383
Script:
#!/bin/bash
# λͺ¨λ¬ μ»΄ν¬λνΈμ λ°μ΄ν° νμ
κ³Ό ꡬν νμΈ
rg -g "*.tsx" "data\?" -A 2 -B 2 "src/app/(crew)/crew/detail/[id]/_components/gathering-detail-modal/presenter.tsx"
# GatheringDetailType μΈν°νμ΄μ€ νμΈ
rg -g "*.ts" "GatheringDetailType.*{" -A 10
Length of output: 3064
yulrang
left a comment
yulrang
left a comment
There was a problem hiding this comment.
λμμΈ μμ νλλΌ κ³ μλ§μΌμ ¨μ΅λλ€~~
π Issue Ticket
Ticket
βοΈ Description
β Checklist
PR
Test
Summary by CodeRabbit
μλ‘μ΄ κΈ°λ₯
λ²κ·Έ μμ
λ¬Έμν
μ€νμΌ
리ν©ν λ§