Feat/131/design gatherings #136
Conversation
Walkthroughμ΄ λ³κ²½ μ¬νμ μ¬λ¬ μ»΄ν¬λνΈμ μ νΈλ¦¬ν° ν¨μμ κΈ°λ₯ λ° κ΅¬μ‘°λ₯Ό μμ ν©λλ€. Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
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]/page.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. π Recent review detailsConfiguration used: CodeRabbit UI π Files selected for processing (1)
π§ Files skipped from review as they are similar to previous changes (1)
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-fzcrvrvkdg.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 (8)
src/_queries/liked/liked-queries.ts (1)
7-7: μ£Όμμ λ μμΈν μμ±ν΄μ£ΌμΈμ.νμ¬ μ£Όμμ΄ λ³ν μ¬μ€λ§μ μ€λͺ νκ³ μμ΅λλ€. λ€μκ³Ό κ°μ μ 보λ₯Ό μΆκ°νλ©΄ μ’μ κ² κ°μ΅λλ€:
- λ³ν μ΄μ
- UIμ API κ°μ μΈλ±μ± μ°¨μ΄μ
λ€μκ³Ό κ°μ΄ μ£Όμμ κ°μ ν΄λ³΄μΈμ:
- queryFn: () => getLikedList(page - 1), // 1 -> 0 κΈ°λ°μΌλ‘ λ³ν + queryFn: () => getLikedList(page - 1), // UIλ 1λΆν° μμνλ νμ΄μ§ λ²νΈλ₯Ό μ¬μ©νμ§λ§ APIλ 0λΆν° μμνλ―λ‘ λ³νμ΄ νμν©λλ€src/utils/format-date.ts (1)
10-16: μκ° κ³μ° λ‘μ§ κ°μ μ μ μλ립λλ€.λ§€μ§ λλ²λ₯Ό μμλ‘ λΆλ¦¬νλ©΄ μ½λμ μ μ§λ³΄μμ±μ΄ ν₯μλ κ² κ°μ΅λλ€.
λ€μκ³Ό κ°μ λ³κ²½μ μ μλ립λλ€:
+const HOURS_IN_HALF_DAY = 12; +const MIDNIGHT_HOUR = 0; // μκ° κ³μ° let hours = date.getHours(); const minutes = String(date.getMinutes()).padStart(2, '0'); -const meridian = hours >= 12 ? 'μ€ν' : 'μ€μ '; +const meridian = hours >= HOURS_IN_HALF_DAY ? 'μ€ν' : 'μ€μ '; // 12μκ°μ λ‘ λ³ν -hours = hours % 12 || 12; // 0μ 12λ‘ λ³ν +hours = hours % HOURS_IN_HALF_DAY || HOURS_IN_HALF_DAY;src/app/(crew)/crew/detail/[id]/page.tsx (1)
24-36: 볡μ‘ν λ μ΄μμ ꡬ쑰λ₯Ό λ¨μννλ κ²μ κ³ λ €ν΄λ³΄μΈμ.νμ¬ κ΅¬νλ 볡μ‘ν μμ λ§μ§κ³Ό ν¨λ© κ³μ°(
-mx-3,w-[calc(100%+1.5rem)]λ±)μ μ μ§λ³΄μλ₯Ό μ΄λ ΅κ² λ§λ€ μ μμ΅λλ€. λ€μκ³Ό κ°μ λμμ κ³ λ €ν΄λ³΄μΈμ:- <section className="w-full space-y-6"> - <article className="space-y-6"> - <div className="flex items-center justify-between px-3 md:px-7 lg:px-11"> + <section className="w-full px-3 md:px-7 lg:px-11 space-y-6"> + <article className="space-y-6"> + <div className="flex items-center justify-between"> <h2 className="text-2xl font-semibold">ν¬λ£¨ μ½μ</h2> {/* <CreateGathering /> */} </div> - <div className="flex w-full overflow-hidden px-3 md:px-7 lg:px-0"> - <div className="relative -mx-3 w-[calc(100%+1.5rem)] px-3 md:-mx-7 md:w-[calc(100%+3.5rem)] md:px-7 lg:-mx-6 lg:w-[calc(100%+3rem)] lg:px-0"> + <div className="relative w-full overflow-hidden"> <GatheringListSection id={id} /> - </div> </div> </article> </section>src/components/gathering-list/crew-gathering-list.stories.tsx (1)
65-70: 컨ν μ΄λ μ€νμΌλ§ κ°μ μ΄ νμν©λλ€.νμ¬ κ΅¬νλ negative margin λ°©μμ λ€μν λ·°ν¬νΈ ν¬κΈ°μμ λ μ΄μμ μ΄μλ₯Ό λ°μμν¬ μ μμ΅λλ€. λ€μκ³Ό κ°μ κ°μ μ μ μλ립λλ€:
- <div className="flex w-full justify-center bg-gray-100"> - <div className="relative -mx-6 w-[calc(100%+3rem)]"> + <div className="flex w-full justify-center bg-gray-100"> + <div className="relative w-full max-w-screen-xl px-6"> <Story /> </div> </div>μ΄λ κ² μμ νλ©΄:
- λ°μν λ μ΄μμμ΄ λ μμ μ μΌλ‘ λμν©λλ€
- μ΅λ λλΉ μ νμΌλ‘ ν° νλ©΄μμλ μ μ ν λ μ΄μμμ μ μ§ν©λλ€
- λΆνμν κ³μ°μ μ κ±°νμ¬ μ μ§λ³΄μκ° μ©μ΄ν΄μ§λλ€
src/components/common/gathering-card/presenter.tsx (1)
90-99: μ°Έμ¬ μΈμ νμ λ°©μ κ°μ μ μ μν©λλ€.νμ¬ κ΅¬νμ μ μλνμ§λ§, μ κ·Όμ±μ μν΄ λ€μκ³Ό κ°μ κ°μ μ μ μν©λλ€:
- <p className="text-sm font-normal text-gray-900"> - μ°Έμ¬μΈμ <span className="text-blue-500">{currentCount}</span>/{totalCount} - </p> + <p className="text-sm font-normal text-gray-900"> + μ°Έμ¬μΈμ <span className="text-blue-500" aria-label={`μ 체 ${totalCount}λͺ μ€ ${currentCount}λͺ μ°Έμ¬`}>{currentCount}/{totalCount}</span> + </p>src/components/gathering-list/crew-gathering-list.tsx (3)
71-71:handlePrevν¨μμ 쑰건문 μμ μ μνμ¬ μ‘°κ±΄λ¬Έμ΄
prevIndex > 3μΌλ‘ μ€μ λμ΄ μλλ°,prevIndex >= 3μΌλ‘ μμ νλ©΄ μλν λμμ λ λΆν©ν μ μμ΅λλ€.
70-76: μ¬λΌμ΄λ μ΄λ λ¨μ μμν μ μμ¬λΌμ΄λλ₯Ό μ΄λνλ λ¨μμΈ
3μ μμλ‘ μΆμΆνμ¬ μ½λμ κ°λ μ±κ³Ό μ μ§λ³΄μμ±μ λμ΄λ κ²μ κ³ λ €ν΄λ³΄μΈμ.
138-145: ESLint κ·μΉ λΉνμ±ν λμ μ κ·Όμ± κ°μ μ μ
jsx-a11y/no-noninteractive-element-interactionsκ·μΉμ λΉνμ±νν기보λ€λ, μ κ·Όμ±μ ν₯μμν€κΈ° μν΄ μ μ ν λ체 μμ μ¬μ©μ΄λ νμν μμ± μΆκ°λ₯Ό κ³ λ €ν΄λ³΄μΈμ. μλ₯Ό λ€μ΄,ulμμ λμdivλ₯Ό μ¬μ©νκ±°λroleλ°ariaμμ±μ μΆκ°νμ¬ μ¬μ©μ κ²½νμ κ°μ ν μ μμ΅λλ€.
π Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
β Files ignored due to path filters (1)
public/assets/icons/ic-gathering-person.svgis excluded by!**/*.svg
π Files selected for processing (9)
src/_queries/liked/liked-queries.ts(1 hunks)src/app/(crew)/crew/detail/[id]/_components/gathering-list-section.tsx(2 hunks)src/app/(crew)/crew/detail/[id]/page.tsx(1 hunks)src/components/common/gathering-card/presenter.tsx(3 hunks)src/components/gathering-list/crew-gathering-list.stories.tsx(2 hunks)src/components/gathering-list/crew-gathering-list.tsx(1 hunks)src/components/gathering-list/gathering-card-carousel.tsx(0 hunks)src/components/gathering-list/liked-list-presenter.tsx(1 hunks)src/utils/format-date.ts(1 hunks)
π€ Files with no reviewable changes (1)
- src/components/gathering-list/gathering-card-carousel.tsx
π Additional comments (18)
src/_queries/liked/liked-queries.ts (1)
4-8: νμ΄μ§ μΈλ±μ€ λ³νμ μν₯μ νμΈν΄μ£ΌμΈμ.
νμ΄μ§ μΈλ±μ± λ°©μμ λ³κ²½μ΄ λ€λ₯Έ μ»΄ν¬λνΈμ μν₯μ λ―ΈμΉ μ μμ΅λλ€.
λ€μ μ€ν¬λ¦½νΈλ‘ μ΄ μΏΌλ¦¬λ₯Ό μ¬μ©νλ μ»΄ν¬λνΈλ€μ νμΈν΄λ³΄μΈμ:
β Verification successful
Let me check the content of the component file to understand how the page indexing is used.
Let me check the presenter component to see how the page prop is used.
Let me check the API implementation to understand how the page parameter is handled.
νμ΄μ§ μΈλ±μ€ λ³νμ΄ μμ νκ² μ²λ¦¬λμμ΅λλ€
νμ΄μ§ μΈλ±μ€ λ³ν(1 -> 0 κΈ°λ°)μ΄ λ€μκ³Ό κ°μ μ΄μ λ‘ μμ νκ² μ²λ¦¬λμμ΅λλ€:
LikedList컨ν μ΄λλ 1λΆν° μμνλ νμ΄μ§ μΈλ±μ€λ₯Ό μ¬μ©νλ©°, μ΄λ Mantine UIμPaginationμ»΄ν¬λνΈμ κΈ°λ³Έ λμκ³Ό μΌμΉν©λλ€.useGetLikedListQueryμμ API νΈμΆ μ νμ΄μ§ μΈλ±μ€λ₯Ό 0 κΈ°λ°μΌλ‘ λ³ννμ¬ λ°±μλμ νΈνμ±μ μ μ§ν©λλ€.- μ΄ λ³νμ 쿼리 ν¨μ λ΄λΆμμλ§ μ΄λ£¨μ΄μ§λ―λ‘, UI μ»΄ν¬λνΈλ λ€λ₯Έ λ‘μ§μ μν₯μ μ£Όμ§ μμ΅λλ€.
π Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: νμ΄μ§λ€μ΄μ
κ΄λ ¨ μ»΄ν¬λνΈμμ useGetLikedListQuery μ¬μ© νμΈ
# useGetLikedListQuery μ¬μ© κ²μ
rg -l "useGetLikedListQuery"
# νμ΄μ§λ€μ΄μ
κ΄λ ¨ μ½λ κ²μ
ast-grep --pattern 'page={$_}'
Length of output: 152
Script:
#!/bin/bash
# Check the implementation of liked-list-container.tsx
cat src/components/gathering-list/liked-list-container.tsx
Length of output: 1681
Script:
#!/bin/bash
# Check the implementation of liked-list-presenter.tsx
cat src/components/gathering-list/liked-list-presenter.tsx
Length of output: 2019
Script:
#!/bin/bash
# Check the implementation of liked-apis.ts
cat src/_apis/liked/liked-apis.ts
Length of output: 987
src/utils/format-date.ts (2)
7-8: μμΌ κ³μ° λ‘μ§μ΄ μ ꡬνλμμ΅λλ€!
λ°°μ΄μ μ¬μ©ν μμΌ κ³μ° λ°©μμ΄ κ°κ²°νκ³ ν¨μ¨μ μ λλ€.
18-21: λ°ν νμμ΄ κΉλνκ² κ΅¬μ‘°νλμμ΅λλ€!
λ μ§μ μκ°μ λΆλ¦¬νμ¬ κ°μ²΄λ‘ λ°ννλ λ°©μμ΄ μ¬μ¬μ©μ±κ³Ό κ°λ μ± μΈ‘λ©΄μμ μ’μ μ νμ λλ€.
src/app/(crew)/crew/detail/[id]/page.tsx (2)
16-21: μλ§¨ν± λ§ν¬μ
κ³Ό λ°μν λμμΈμ΄ μ ꡬνλμμ΅λλ€!
μΉμ κ³Ό μν°ν΄ νκ·Έλ₯Ό μ¬μ©ν μλ§¨ν± λ§ν¬μ κ³Ό λͺ¨λ°μΌ νΌμ€νΈ λ°μν λ§μ§ ν΄λμ€κ° μ μ μ©λμμ΅λλ€.
38-44: μ£Όμ μ²λ¦¬λ μ½λμ μνλ₯Ό νμΈν΄μ£ΌμΈμ.
μ£Όμ μ²λ¦¬λ CrewReviewSection μ»΄ν¬λνΈκ° ν₯ν ꡬν μμ μΈ κΈ°λ₯μΈμ§, μλλ©΄ μ κ±°ν΄μΌ ν λ κ±°μ μ½λμΈμ§ νμΈμ΄ νμν©λλ€.
β Verification successful
Let me check the implementation of CrewReviewSection to better understand if it's a work in progress or legacy code.
μ£Όμ μ²λ¦¬λ μ½λλ ν₯ν ꡬν μμ μΈ κΈ°λ₯μ λλ€
CrewReviewSection μ»΄ν¬λνΈ λ΄λΆμ "TODO: review μΆν μΆκ°" μ£Όμμ΄ λͺ
μλμ΄ μμ΄, μ΄λ ν₯ν ꡬνλ κΈ°λ₯μμ΄ νμΈλμμ΅λλ€. νμ¬ μ£Όμ μ²λ¦¬λ μνλ μ μ ν©λλ€.
π Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check if CrewReviewSection is used elsewhere or tracked in issues
# Check for other usages of CrewReviewSection
rg "CrewReviewSection"
# Check for related issues or PRs
gh issue list --search "CrewReviewSection"
gh pr list --search "CrewReviewSection"
Length of output: 490
Script:
#!/bin/bash
# Check the implementation of CrewReviewSection
cat src/app/\(crew\)/crew/detail/\[id\]/_components/review-section.tsx
Length of output: 703
src/components/gathering-list/liked-list-presenter.tsx (1)
28-29: λ μ΄μμ λ³κ²½μ¬ν κ²μ¦μ΄ νμν©λλ€
그리λ λ μ΄μμκ³Ό μ΅μ λμ΄ κ°μ΄ λ³κ²½λμμ΅λλ€. μ΄λ¬ν λ³κ²½μ΄ λ€μν νλ©΄ ν¬κΈ°μ μ½ν μΈ μμμ μλν λλ‘ μλνλμ§ νμΈν΄μ£ΌμΈμ.
λ€μ μ¬νλ€μ κΆμ₯λ립λλ€:
- μ΅μ λμ΄ κ°μ΄ νΉμ μ«μλ‘ νλμ½λ©λ μ΄μ λ₯Ό μ€λͺ νλ μ£Όμ μΆκ°
- λ€μν λ·°ν¬νΈ ν¬κΈ°μμ λ μ΄μμ ν μ€νΈ
className={cn(
'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
'mx-auto place-content-start justify-items-center gap-4',
- 'md:min-h-[1064px] lg:min-h-[704px]',
+ // 3ν 그리λμ μ΅μ λμ΄ (μΉ΄λ λμ΄ * 3 + κ°κ²©)
+ 'md:min-h-[1064px] lg:min-h-[704px]',
)}src/app/(crew)/crew/detail/[id]/_components/gathering-list-section.tsx (2)
10-10: μ»΄ν¬λνΈ κ΅μ²΄κ° μ¬λ°λ₯΄κ² μ΄λ£¨μ΄μ‘μ΅λλ€!
μλ‘μ΄ CrewGatheringList μ»΄ν¬λνΈλ‘μ κ΅μ²΄κ° μ μ νκ² μ΄λ£¨μ΄μ‘μ΅λλ€.
Line range hint 53-59: μλ‘μ΄ μ»΄ν¬λνΈμ λμμ κ²μ¦ν΄μ£ΌμΈμ.
μλ‘ λμ
λ CrewGatheringList μ»΄ν¬λνΈκ° μ΄μ GatheringCardCarouselμ ν΅μ¬ κΈ°λ₯μ λͺ¨λ μ μ§νλμ§ νμΈμ΄ νμν©λλ€.
λ€μ μ¬νλ€μ νμΈν΄μ£ΌμΈμ:
- μ’μμ/μ’μμ μ·¨μ κΈ°λ₯μ΄ μ μμ μΌλ‘ μλνλμ§
- λ‘κ·ΈμΈ λͺ¨λ¬μ΄ μ μ ν μμ μ νμλλμ§
- λͺ¨λ°μΌ/λ°μ€ν¬ν± νκ²½μμ UIκ° μ¬λ°λ₯΄κ² νμλλμ§
β Verification successful
Let me gather more information about the implementation details of both components to ensure functional equivalence.
Based on the detailed implementation I can now provide the final response:
μλ‘μ΄ CrewGatheringList μ»΄ν¬λνΈκ° κΈ°μ‘΄ κΈ°λ₯μ λͺ¨λ μ μμ μΌλ‘ ꡬννκ³ μμ΅λλ€.
- μ’μμ/μ’μμ μ·¨μ κΈ°λ₯μ΄
handleLikeActionν¨μλ₯Ό ν΅ν΄ μ¬λ°λ₯΄κ² ꡬνλμ΄ μμ΅λλ€. - λ‘κ·ΈμΈμ΄ νμν κ²½μ°
onShowLoginModalμ νΈμΆνμ¬ λͺ¨λ¬μ νμν©λλ€. - λ°μν λμμΈμ΄ μ μ©λμ΄ μμ΄ λ°μ€ν¬ν±(
isDesktop)κ³Ό λͺ¨λ°μΌ νκ²½ λͺ¨λ μ§μν©λλ€. - μΊλ¬μ
κΈ°λ₯(
handlePrev,handleNext)κ³Ό ν°μΉ/λ§μ°μ€ μΈν°λμ μ΄ κ΅¬νλμ΄ μμ΅λλ€.
π Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify component interface consistency
# Check if the new component maintains the same props interface
# Search for GatheringCardCarousel usage in previous commits
git log -p | rg "GatheringCardCarousel"
# Check current CrewGatheringList implementation
ast-grep --pattern 'interface CrewGatheringListProps {
$$$
}'
Length of output: 2013
Script:
#!/bin/bash
# Check implementation details of both components
# Look for like/unlike handling and login modal integration
# Search for GatheringCardCarousel implementation
ast-grep --pattern 'function GatheringCardCarousel({$$$}) {
$$$
}'
# Search for CrewGatheringList implementation
ast-grep --pattern 'function CrewGatheringList({$$$}) {
$$$
}'
# Search for any usage of login modal in both components
rg -A 3 "onShowLoginModal" "src/components/gathering-list/"
Length of output: 15037
src/components/gathering-list/crew-gathering-list.stories.tsx (1)
3-3: μ»΄ν¬λνΈ κ΅μ²΄κ° μ μ ν μ΄λ£¨μ΄μ‘μ΅λλ€.
GatheringCardCarouselμμ CrewGatheringListλ‘μ κ΅μ²΄κ° μ 체 μ ν리μΌμ΄μ
μ λ³κ²½ λ°©ν₯κ³Ό μΌμΉν©λλ€.
src/components/common/gathering-card/presenter.tsx (7)
8-8: μμ΄μ½ λ³κ²½μ΄ UI μΌκ΄μ± ν₯μμ κΈ°μ¬ν©λλ€.
person.svgμμ ic-gathering-person.svgλ‘μ λ³κ²½μ λͺ¨μ κ΄λ ¨ μμ΄μ½μ μΌκ΄μ±μ κ°μ νμ΅λλ€.
46-49: μ΄λ²€νΈ νΈλ€λ¬ μ΄λ¦μ΄ λͺ
νν΄μ‘μ΅λλ€.
handleClickμμ handleLikeClickμΌλ‘μ λ³κ²½μ ν¨μμ λͺ©μ μ λ λͺ
ννκ² ννν©λλ€.
78-86: λ μ§μ μκ° νμ λ°©μμ΄ κ°μ λμμ΅λλ€.
λ μ§μ μκ°μ ꡬλΆμ μΌλ‘ λΆλ¦¬νμ¬ νμνλ μλ‘μ΄ λ μ΄μμμ΄ κ°λ μ±μ ν₯μμμΌ°μ΅λλ€.
101-103: λ²νΌ ν
μ€νΈκ° μΌκ΄μ± μκ² λ³κ²½λμμ΅λλ€.
"λͺ¨μ"μμ "μ½μ"μΌλ‘μ μ©μ΄ λ³κ²½μ΄ μ 체μ μΈ μλΉμ€ μ©μ΄μ μΌμΉν©λλ€.
107-108: μ’μμ λ²νΌ ν¬κΈ° λ³κ²½μ΄ μ μ ν©λλ€.
ν¬κΈ°λ₯Ό 40μμ 32λ‘ μ€μΈ κ²μ΄ μ 체μ μΈ μΉ΄λ λμμΈκ³Ό λ μ‘°νλ‘μ΅λλ€.
114-117: λ§κ°λ λͺ¨μ λ©μμ§κ° κ°μ λμμ΅λλ€.
"λ§κ°λ λͺ¨μμ λλ€"μμ "λ§κ°λ μ½μμ λλ€"λ‘μ λ³κ²½μ΄ μλΉμ€ μ λ°μ μ©μ΄ ν΅μΌμ±μ λμμ΅λλ€.
55-55: μΉ΄λ λμ΄ μ¦κ°μ λν κ²ν κ° νμν©λλ€.
μΉ΄λ λμ΄κ° 310pxμμ 344pxλ‘ μ¦κ°νμ΅λλ€. μ΄ λ³κ²½μ΄ λ€λ₯Έ μΉ΄λλ€κ³Όμ μΌκ΄μ±μ ν΄μΉμ§ μλμ§ νμΈμ΄ νμν©λλ€.
λ€λ₯Έ μΉ΄λ μ»΄ν¬λνΈλ€μ λμ΄λ₯Ό νμΈνκΈ° μν΄ λ€μ μ€ν¬λ¦½νΈλ₯Ό μ€ννμΈμ:
β Verification successful
These commands will help us find:
- Height-related styling in components
- All card-related component files
- Card-related className definitions
This will give us a better understanding of card height consistency across components.
μΉ΄λ λμ΄ λ³κ²½μ΄ μΌκ΄μ±μ ν΄μΉμ§ μμμ νμΈνμ΅λλ€.
μ½λλ² μ΄μ€ λΆμ κ²°κ³Ό, λ€μκ³Ό κ°μ μ΄μ λ‘ 344px λμ΄ λ³κ²½μ΄ μ μ ν©λλ€:
- νμ¬ μ½λλ² μ΄μ€μ μΉ΄λ μ»΄ν¬λνΈλ€μ κ°κ°μ μ©λμ λ°λΌ μλ‘ λ€λ₯Έ λμ΄λ₯Ό κ°μ§κ³ μμ΅λλ€:
- WritableGatheringCard: 166px (μ΄λ―Έμ§ μμ)
- ReviewCard: μ΅μ 112px
- CrewCard: 430px (λͺ¨λ°μΌ) / 203px (λ°μ€ν¬ν±)
- DetailCrewCard: 508px (λͺ¨λ°μΌ) / 270px (λ°μ€ν¬ν±)
gathering-cardμ 344px λμ΄λ λ€λ₯Έ μΉ΄λλ€κ³Ό λΉκ΅νμ λ μ μ ν λ²μ λ΄μ μμΌλ©°, μ΄ μ»΄ν¬λνΈμ νΉμ μꡬμ¬ν(μ΄λ―Έμ§, μ½ν μΈ μμ λ±)μ μμ©νκΈ°μ μ ν©ν ν¬κΈ°μ λλ€.
π Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# λ€λ₯Έ μΉ΄λ μ»΄ν¬λνΈλ€μ λμ΄ μ€μ μ κ²μ
rg -g '*.tsx' -g '*.css' 'h-\[.*px\].*card'
Length of output: 45
Script:
#!/bin/bash
# Search for height-related classes in card components with broader pattern
rg -g '*.tsx' 'h-\[.*?\]|height:.*?;' src/components/
Length of output: 4183
Script:
#!/bin/bash
# Find all card-related component files
fd -e tsx card src/components/
Length of output: 774
Script:
#!/bin/bash
# Search for specific card component classes
rg -g '*.tsx' 'className.*card.*?' src/components/
Length of output: 52
src/components/gathering-list/crew-gathering-list.tsx (2)
74-76: handleNext ν¨μμ 쑰건문 κ²ν νμ
prevIndex + 3 < totalSlides 쑰건μμ μ΄ μ¬λΌμ΄λ μμ λν μ€νλ°μ΄μ μλ¬κ° μλμ§ νμΈν΄μ£ΌμΈμ. μ¬λΌμ΄λμ μ΄ κ°μμ νμ¬ μΈλ±μ€μ λ°λΌ λ§μ§λ§ μ¬λΌμ΄λκ° νμλμ§ μμ μ μμ΅λλ€.
70-76: π οΈ Refactor suggestion
μ¬λΌμ΄λ λ€λΉκ²μ΄μ λ‘μ§ κ²ν νμ
handlePrevμ handleNext ν¨μμ νμ΄μ§λ€μ΄μ
λ‘μ§μ΄ μ ννμ§ νμΈν΄μ£ΌμΈμ. νμ¬ λ‘μ§μμ μ¬λΌμ΄λ μ΄λ μ μ€νλ°μ΄μ μλ¬κ° λ°μν μ μμ΅λλ€.
| const meta: Meta<typeof CrewGatheringList> = { | ||
| title: 'Components/CrewGatheringList', | ||
| component: CrewGatheringList, | ||
| parameters: { | ||
| layout: 'fullscreen', | ||
| layout: 'fulled', // layout λ³κ²½ | ||
| }, |
There was a problem hiding this comment.
λ μ΄μμ νλΌλ―Έν°μ μ€νλ₯Ό μμ ν΄μ£ΌμΈμ.
Storybookμ layout νλΌλ―Έν°μ μ€νκ° μμ΅λλ€. 'fulled'λ μ ν¨νμ§ μμ κ°μ λλ€.
parameters: {
- layout: 'fulled',
+ layout: 'fullscreen',
},π 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 meta: Meta<typeof CrewGatheringList> = { | |
| title: 'Components/CrewGatheringList', | |
| component: CrewGatheringList, | |
| parameters: { | |
| layout: 'fullscreen', | |
| layout: 'fulled', // layout λ³κ²½ | |
| }, | |
| const meta: Meta<typeof CrewGatheringList> = { | |
| title: 'Components/CrewGatheringList', | |
| component: CrewGatheringList, | |
| parameters: { | |
| layout: 'fullscreen', // layout λ³κ²½ | |
| }, |
| { | ||
| id: 4, | ||
| title: 'λ¬λ λͺ¨μ', | ||
| dateTime: '2024-11-15T09:00', | ||
| location: 'μμΈ μλ±ν¬κ΅¬ μ¬μλλ‘ 330', | ||
| currentCount: 10, | ||
| totalCount: 20, | ||
| imageUrl: | ||
| 'https://images.unsplash.com/photo-1516978101789-720eacb59e79?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjV8fGNhdHxlbnwwfHwwfHx8Mg%3D%3D', | ||
| liked: true, | ||
| }, |
There was a problem hiding this comment.
μ€λ³΅λ λͺ¨μ λ°μ΄ν°λ₯Ό μμ ν΄μ£ΌμΈμ.
μλ‘ μΆκ°λ λͺ¨μ λ°μ΄ν°(id: 4)κ° κΈ°μ‘΄ λ°μ΄ν°(id: 3)μ title, dateTime, location λ±μ΄ λμΌν©λλ€. ν μ€νΈ λ°μ΄ν°μ μ νμ±μ μν΄ λ€μκ³Ό κ°μ΄ μμ μ΄ νμν©λλ€:
{
id: 4,
- title: 'λ¬λ λͺ¨μ',
- dateTime: '2024-11-15T09:00',
- location: 'μμΈ μλ±ν¬κ΅¬ μ¬μλλ‘ 330',
+ title: 'μΆκ΅¬ λͺ¨μ',
+ dateTime: '2024-12-20T14:00',
+ location: 'μμΈ λ§ν¬κ΅¬ μμλ μλ컡곡μ',
currentCount: 10,
totalCount: 20,
imageUrl:
'https://images.unsplash.com/photo-1516978101789-720eacb59e79?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjV8fGNhdHxlbnwwfHwwfHx8Mg%3D%3D',
liked: true,
}π 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.
| { | |
| id: 4, | |
| title: 'λ¬λ λͺ¨μ', | |
| dateTime: '2024-11-15T09:00', | |
| location: 'μμΈ μλ±ν¬κ΅¬ μ¬μλλ‘ 330', | |
| currentCount: 10, | |
| totalCount: 20, | |
| imageUrl: | |
| 'https://images.unsplash.com/photo-1516978101789-720eacb59e79?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjV8fGNhdHxlbnwwfHwwfHx8Mg%3D%3D', | |
| liked: true, | |
| }, | |
| { | |
| id: 4, | |
| title: 'μΆκ΅¬ λͺ¨μ', | |
| dateTime: '2024-12-20T14:00', | |
| location: 'μμΈ λ§ν¬κ΅¬ μμλ μλ컡곡μ', | |
| currentCount: 10, | |
| totalCount: 20, | |
| imageUrl: | |
| 'https://images.unsplash.com/photo-1516978101789-720eacb59e79?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjV8fGNhdHxlbnwwfHwwfHx8Mg%3D%3D', | |
| liked: true, | |
| }, |
yulrang
left a comment
yulrang
left a comment
There was a problem hiding this comment.
μκ³ νμ
¨μ΅λλ€~~~
νμ΄ν
νμ΄ν
minkyung5x5
left a comment
minkyung5x5
left a comment
There was a problem hiding this comment.
κΉλν΄μ‘λ€μ!! π
|
πstorybook: https://67206cc6ff9d7a05a3528ff8-bipgajuapo.chromatic.com/ |
π Issue Ticket
#131
βοΈ Description
β Checklist
PR
Test
Summary by CodeRabbit
CrewGatheringListμ»΄ν¬λνΈλ₯Ό λμ νμ¬ νΉμ ν¬λ£¨μ λͺ¨μ μΉ΄λλ₯Ό νμνλ κΈ°λ₯ μΆκ°.getLikedListνΈμΆ μ νμ΄μ§ μΈλ±μ€ μ‘°μ μΌλ‘ λ°μ΄ν° μΌκ΄μ± ν₯μ.GatheringCardPresenterμ λ μ΄μμ λ° λ²νΌ ν μ€νΈ λ³κ²½μΌλ‘ μ¬μ©μ κ²½ν κ°μ .LikedListPresenterμ μ΅μ λμ΄ μ‘°μ μΌλ‘ λ μ΄μμ μμ μ± ν₯μ.CrewGatheringListμ λν λ©νλ°μ΄ν° λ° μ€ν 리 μ λ°μ΄νΈ.