Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Walkthroughλ©€λ² λ°μ΄ν°μ isMyself νλκ·Έλ₯Ό API μ λ ₯/μΆλ ₯ νμ μ μΆκ°νκ³ λ³ν λ‘μ§μ λ°μνμ΅λλ€. μ΄λ₯Ό μ¬μ©ν΄ λ©€λ² ν΄λ¦ μ λ΄ νΌλ/νμΈ νΌλλ‘ λΆκΈ°νλλ‘ λ€λΉκ²μ΄μ λ‘μ§μ μμ νμ΅λλ€. ν μ€νΈ μμκ³Ό μ λ ₯ μ€νμΌμ μΌλΆ μ‘°μ νκ³ , μ¬μ§ μ λ‘λμμ Blob URL λ©λͺ¨μ΄μ μ΄μ λ° μ 리λ₯Ό λμ νμ΅λλ€. μΌλΆ μ€νμΌ νμΌμ λ¬Έλ²/ν¬λ§· μ€λ₯λ μ μ νμ΅λλ€. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User as μ¬μ©μ
participant UI as MemberList
participant Page as GroupMembers Page
participant API as getRoomMembers()
participant Map as convertRoomMembersToMembers
participant Router as Router
User->>Page: νμ΄μ§ μ§μ
Page->>API: λ©€λ² λͺ©λ‘ μμ²
API-->>Page: RoomMember[] (isMyself ν¬ν¨)
Page->>Map: λ³ν μμ²
Map-->>Page: Member[] (isMyself λ§€ν)
Page->>UI: Member 리μ€νΈ λ λλ§
rect rgba(200,230,255,0.3)
note right of UI: λ©€λ² ν΄λ¦ μ λΆκΈ° λ‘μ§(μ κ·/λ³κ²½)
User->>UI: λ©€λ² ν΄λ¦
UI->>Router: isMyself ? /myfeed/{id} : /otherfeed/{id}
end
sequenceDiagram
autonumber
actor User as μ¬μ©μ
participant Post as PhotoSection
participant URL as URL API
Note over Post: photos prop λ³κ²½/λ§μ΄νΈ
Post->>Post: useMemoλ‘ photos β Blob URL[] μμ±
Post->>URL: URL.createObjectURL(file) λ°λ³΅
User->>Post: μ΄λ―Έμ§ 리μ€νΈ νμ(photoUrls μ¬μ©)
Note over Post: μΈλ§μ΄νΈ/μμ‘΄μ± λ³κ²½
Post->>URL: URL.revokeObjectURL(url) μ 리
Estimated code review effortπ― 3 (Moderate) | β±οΈ ~25 minutes Possibly related PRs
Suggested labels
Poem
Tip π Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. β¨ 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/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Actionable comments posted: 0
π§Ή Nitpick comments (11)
src/components/common/BookSearchBottomSheet/BookSearchBottomSheet.styled.ts (4)
252-252: νλμ½λ© μμ(#e0e0e0) λμ λμμΈ ν ν° μ¬μ© κΆμ₯νμ¬ μμμ κΈλ‘λ² ν ν°κ³Ό μ΄μ§ μ΄κΈλ©λλ€. ν λ§ μΌκ΄μ±κ³Ό λ€ν¬λͺ¨λ νμ₯μ±μ μν΄ semantic ν ν°μΌλ‘ κ΅μ²΄λ₯Ό κΆμ₯ν©λλ€.
μλμ²λΌ λ³κ²½ μ μλ립λλ€:
export const EmptyText = styled.p` - color: #e0e0e0; + color: ${semanticColors.text.ghost}; font-size: ${typography.fontSize.sm}; font-weight: ${typography.fontWeight.regular}; margin: 0; text-align: center; `;
169-171: CSS μμ±κ°noneμ μ ν¨νμ§ μμ΅λλ€ βtransparentλ‘ κ΅μ²΄ κΆμ₯
background-color: none;λ 무μλ©λλ€. λͺ μμ μΌλ‘ ν¬λͺ λ°°κ²½μ μνμ λ€λ©΄transparentλ₯Ό μ¬μ©νμΈμ.export const BookItem = styled.div` display: flex; align-items: center; padding: 12px 2px; - background-color: none; + background-color: transparent; cursor: pointer; transition: background-color 0.2s ease; border-bottom: 1px solid ${colors.grey[400]};
4-17: μ€λ²λ μ΄ λΉκ°μ μνμμμ ν¬μΈν° μ΄λ²€νΈ μ°¨λ¨μ λͺ μμ μΌλ‘ μ²λ¦¬
visibility: hiddenλ§μΌλ‘λ ν΄λ¦ μ°¨λ¨λμ§λ§, νΈλμ§μ μ€ κ²½κ³μνμμμ μ΄λ²€νΈ λμλ₯Ό μλ°©νλ €λ©΄pointer-eventsν κΈμ μΆκ°νλ νΈμ΄ μμ ν©λλ€.export const Overlay = styled.div<{ isVisible: boolean }>` position: fixed; top: 0; left: 0; right: 0; bottom: 0; backdrop-filter: blur(2px); z-index: 1000; opacity: ${({ isVisible }) => (isVisible ? 1 : 0)}; visibility: ${({ isVisible }) => (isVisible ? 'visible' : 'hidden')}; + pointer-events: ${({ isVisible }) => (isVisible ? 'auto' : 'none')}; transition: opacity 0.3s ease, visibility 0.3s ease; `;
29-31: μ κ·Όμ±: λͺ¨μ μΆμ νκ²½μμ νΈλμ§μ λΉνμ±ν μ μμ¬μ©μμ OS μ€μ μ μ‘΄μ€νλλ‘
prefers-reduced-motionλμμ μΆκ°νλ©΄ μ κ·Όμ±μ΄ μ’μμ§λλ€.μλ μ½λλ₯Ό BottomSheetContainer/Overlay λ± νΈλμ§μ μ¬μ© λΈλ‘μ λ³΄κ° μ μ:
export const BottomSheetContainer = styled.div<{ isVisible: boolean }>` position: fixed; bottom: 0; left: 0; right: 0; max-width: 767px; margin: 0 auto; background-color: ${colors.darkgrey.main}; border-radius: 20px 20px 0 0; z-index: 1001; transform: translateY(${({ isVisible }) => (isVisible ? '0' : '100%')}); transition: transform 0.3s ease; max-height: 50vh; overflow: hidden; display: flex; flex-direction: column; + + @media (prefers-reduced-motion: reduce) { + transition: none; + } `;src/components/creategroup/RoomInfoSection.styled.ts (1)
23-23: caret μμλ semantic ν ν°μΌλ‘ ν΅μΌ κΆμ₯λ€λ₯Έ νμΌμμλ
semanticColors.text.point.greenμ μ¬μ©ν©λλ€. ν λ§ κ΅μ²΄ μ©μ΄μ±κ³Ό μΌκ΄μ±μ μν΄ λμΌ ν ν° μ¬μ©μ κΆμ₯ν©λλ€.- caret-color: ${colors.neongreen}; + caret-color: ${semanticColors.text.point.green};src/api/rooms/getRoomMembers.ts (5)
33-48: λ³ν ν¨μ κ°κ²°ν λ° boolean κ°μ μΊμ€νκ°λ μ± ν₯μμ μν΄ map κ²°κ³Όλ₯Ό μ¦μ λ°ννκ³ , μμ μ½λ©νΈλλ‘ boolean μΊμ€ν μ ν¬ν¨νλ©΄ μ’μ΅λλ€.
-export const convertRoomMembersToMembers = (roomMembers: RoomMember[]): Member[] => { - const convertedMembers = roomMembers.map(member => { - const convertedMember: Member = { - id: member.userId.toString(), - nickname: member.nickname || 'μ΅λͺ ', - role: member.aliasName || 'λ μλ©μ΄νΈ', - followersCount: member.followerCount || 0, - profileImageUrl: member.imageUrl || undefined, - isMyself: member.isMyself, - }; - - return convertedMember; - }); - - return convertedMembers; -}; +export const convertRoomMembersToMembers = (roomMembers: RoomMember[]): Member[] => + roomMembers.map((member): Member => ({ + id: member.userId.toString(), + nickname: member.nickname || 'μ΅λͺ ', + role: member.aliasName || 'λ μλ©μ΄νΈ', + followersCount: member.followerCount || 0, + profileImageUrl: member.imageUrl || undefined, + isMyself: Boolean(member.isMyself), + }));
55-55: μ§μ μ μΈ console μ¬μ© μ΅μννλ‘λμ λ²λ€μμ μ½μ λ Έμ΄μ¦λ₯Ό μ€μ΄κ±°λ κ³΅μ© λ‘κ±°λ‘ μμνλ νΈμ΄ μ’μ΅λλ€.
- console.error('λ μλ©μ΄νΈ μ‘°ν API μ€λ₯:', error); + // TODO: replace with app-level logger + if (process.env.NODE_ENV !== 'production') { + // eslint-disable-next-line no-console + console.error('λ μλ©μ΄νΈ μ‘°ν API μ€λ₯:', error); + }
58-60: λ§€μ§ λλ²(140011) μμνμλ¬ μ½λλ₯Ό μμ/μ΄κ±°νμΌλ‘ μ μνλ©΄ μ¬μ¬μ©κ³Ό μ€ν λ°©μ§μ μ 리ν©λλ€.
μλμ κ°μ΄ μμ λμ μ κΆμ₯ν©λλ€(νμΌ μλ¨ λ± κ³΅μ© μμΉ):
// μ: src/api/errors.ts export const ERROR_CODE_NO_ROOM_ACCESS = 140011;κ·Έλ¦¬κ³ λ³Έλ¬Έμ λ€μμ²λΌ κ΅μ²΄:
- if (error instanceof AxiosError && error.response?.data?.code === 140011) { + if (error instanceof AxiosError && error.response?.data?.code === ERROR_CODE_NO_ROOM_ACCESS) { throw new Error('λ°© μ κ·Ό κΆνμ΄ μμ΅λλ€.'); }μνμλ©΄ μλ¬ μ½λ ν μ΄λΈ/νμ μ μ(μ:
ServerErrorCodeenum)λ μ λ¦¬ν΄ λλ¦¬κ² μ΅λλ€.
23-31: Member νμ μ€λ³΅ μ μ λ°κ²¬ β κ³΅μ© νμ νμΌλ‘ μ€μν μ μκ²μ¦ κ²°κ³Ό, μλ λ κ³³μμ
MemberμΈν°νμ΄μ€κ° μ€λ³΅ μ μλμ΄ μμ΅λλ€:
src/api/rooms/getRoomMembers.ts(24ν)src/mocks/members.mock.ts(1ν)
MemberμΈν°νμ΄μ€λ₯Όsrc/types/member.tsλ±μ κ³΅μ© νμ νμΌλ‘ μΆμΆν λ€, κ° λͺ¨λμμ ν΄λΉ νμΌμ import νλλ‘ λ³κ²½ν΄μ£ΌμΈμ. μ΄λ κ² νλ©΄ νμ λ리ννΈλ₯Ό λ°©μ§νκ³ μΌκ΄μ±μ μ μ§ν μ μμ΅λλ€.
10-11: λ°±μλ κ³μ½ κ²μ¦ λ° isMyself κΈ°λ³Έκ° μ²λ¦¬ μ μνμ¬
src/api/rooms/getRoomMembers.tsμμ RoomMember νμ μisMyself: boolean(νμ)λ‘ μ μνκ³ μμ§λ§, μ€μ λ§€ν λ‘μ§μ μλμ κ°μ΄member.isMyselfλ₯Ό κ·Έλλ‘ ν λΉνκ³ μμ΅λλ€.
μ΄ κ²½μ° λ°±μλ μλ΅μμ ν΄λΉ νλκ° λλ½λλ©΄undefinedκ° ν λΉλμ΄ λ°νμμμ μλμΉ μμ λμμ΄ λ°μν μ μμ΅λλ€.
- νμ μ μΈ μμΉ:
src/api/rooms/getRoomMembers.tsλΌμΈ 10 (isMyself: boolean;)- λ§€ν λ‘μ§ μμΉ:
src/api/rooms/getRoomMembers.tsλΌμΈ 41 (isMyself: member.isMyself,)- κ΄λ ¨ νμ μ μ:
src/types/user.tsλΌμΈ 13(isMyself?: boolean;)src/types/follow.tsλΌμΈ 9 (isMyself?: boolean;)κ²ν μμ² μ¬ν:
- λ°±μλ μ€ν νμΈ
- RoomMember μλ΅μ
isMyselfνλκ° νμ ν¬ν¨λλμ§ νμΈν΄μ£ΌμΈμ.- λΆνμ€ν κ²½μ° λ§€ν λ¨κ³μμ κΈ°λ³Έκ°/μΊμ€ν μ μ©
λλ- isMyself: member.isMyself, + isMyself: Boolean(member.isMyself), // λͺ μμ boolean λ³ν- isMyself: member.isMyself, + isMyself: member.isMyself ?? false, // undefined λλΉ κΈ°λ³Έκ°src/pages/groupMembers/GroupMembers.tsx (1)
68-76: μ£Όμκ³Ό ꡬν μ¬μ΄μ μΌκ΄μ± λ¬Έμ κ° μμ΅λλ€.μ£Όμμμλ MemberList μ»΄ν¬λνΈκ°
isMyselfμ λ°λ₯Έ λ€λΉκ²μ΄μ μ²λ¦¬λ₯Ό λ΄λΉνλ€κ³ λͺ μνκ³ μμ§λ§, μ€μ λ‘λ μ΄ ν¨μμμ μ§μ λ€λΉκ²μ΄μ λ‘μ§μ μ²λ¦¬νκ³ μμ΅λλ€. μ£Όμμ μ€μ ꡬνμ λ§κ² μμ ν΄μΌ ν©λλ€.λ€μκ³Ό κ°μ΄ μ£Όμμ μμ νλ κ²μ μ μν©λλ€:
- // MemberList μ»΄ν¬λνΈμμ isMyselfμ λ°λ₯Έ λ€λΉκ²μ΄μ μ²λ¦¬λ₯Ό λ΄λΉνλ―λ‘ - // μ¬κΈ°μλ κΈ°λ³Έ λμμ μ μ§ + // isMyself νλκ·Έμ λ°λΌ λ³ΈμΈ νΌλ λλ νμΈ νΌλλ‘ λ€λΉκ²μ΄μ
π Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
π‘ Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
π Files selected for processing (10)
src/api/rooms/getRoomMembers.ts(3 hunks)src/components/common/BookSearchBottomSheet/BookSearchBottomSheet.styled.ts(1 hunks)src/components/creategroup/RoomInfoSection.styled.ts(1 hunks)src/components/createpost/PhotoSection.tsx(3 hunks)src/components/createpost/PostContentSection.styled.ts(2 hunks)src/components/members/MemberList.tsx(2 hunks)src/components/recordwrite/PageRangeSection.styled.ts(2 hunks)src/pages/groupMembers/GroupMembers.tsx(1 hunks)src/pages/pollwrite/PollWrite.styled.ts(1 hunks)src/pages/recordwrite/RecordWrite.styled.ts(1 hunks)
π§° Additional context used
𧬠Code graph analysis (4)
src/components/creategroup/RoomInfoSection.styled.ts (1)
src/styles/global/global.ts (1)
colors(4-53)
src/components/createpost/PostContentSection.styled.ts (1)
src/styles/global/global.ts (2)
colors(4-53)semanticColors(80-153)
src/components/createpost/PhotoSection.tsx (1)
src/components/createpost/PhotoSection.styled.ts (1)
PhotoImage(49-54)
src/components/members/MemberList.tsx (2)
src/api/rooms/getRoomMembers.ts (1)
Member(24-31)src/mocks/members.mock.ts (1)
Member(1-8)
π Additional comments (14)
src/pages/recordwrite/RecordWrite.styled.ts (1)
15-16: μλ―Έ λ³ν μλ 곡백 μΆκ° β OKλ λλ§/λμμ μν₯ μλ ν¬λ§·ν λ³κ²½μ λλ€. μ μ§λ³΄μ μΈ‘λ©΄μμ 무ν΄ν©λλ€.
src/components/common/BookSearchBottomSheet/BookSearchBottomSheet.styled.ts (1)
251-257: EmptyText μμμ λΆνμν λ¬Έλ² ν ν° μ κ±° μνμ ¨μ΅λλ€
};μ κ±°λ‘ CSS-in-JS νμ± μ€λ₯ κ°λ₯μ±μ ν΄μνμ΅λλ€.src/pages/pollwrite/PollWrite.styled.ts (1)
15-16: μλ―Έ λ³ν μλ 곡백 μΆκ° β OKRecordWriteμμ ν¬λ§· μΌκ΄μ± μΈ‘λ©΄μμ 무ν΄ν©λλ€.
src/components/recordwrite/PageRangeSection.styled.ts (2)
2-2: μ¬λ°λ₯Έ μμ‘΄μ± μ΅μ νμ λλ€.μ¬μ©νμ§ μλ
colorsμμ‘΄μ±μ μ κ±°νκ³ νμνtypographyμsemanticColorsλ§ κ°μ Έμ€λ κ²μ΄ μ’μ κ΄νμ λλ€.
53-56: κ°μ λ λμ width κ³μ° λ‘μ§μ λλ€.μ λ ₯ κΈΈμ΄μ λ°λ₯Έ width κ³μ°μ΄ λ μ νν΄μ‘μ΅λλ€. κΈ°λ³Έκ°μ 12pxλ‘ μ€μ΄κ³ μ΅μκ°μ 9pxλ‘ μ€μ ν κ²μ UI λ°μμ±μ ν₯μμν΅λλ€.
src/components/createpost/PhotoSection.tsx (3)
1-1: λ©λͺ¨λ¦¬ κ΄λ¦¬λ₯Ό μν μ μ ν Hook μΆκ°μ λλ€.Blob URL λ©λͺ¨λ¦¬ λμ λ°©μ§λ₯Ό μν΄
useMemoμuseEffectλ₯Ό μΆκ°ν κ²μ μ’μ μ κ·Όμ λλ€.
52-62: νλ₯ν λ©λͺ¨λ¦¬ λμ λ°©μ§ κ΅¬νμ λλ€.Blob URLμ μμ±κ³Ό ν΄μ λ₯Ό μ¬λ°λ₯΄κ² κ΄λ¦¬νκ³ μμ΅λλ€.
useMemoλ‘ URL μμ±μ μ΅μ ννκ³useEffectcleanupμμ URLμ μ μ ν ν΄μ νλ κ²μ λͺ¨λ² μ¬λ‘μ λλ€.
92-97: μΌκ΄λ λ°°μ΄ μΈλ±μ€ μ¬μ©μΌλ‘ μ±λ₯ κ°μ μ λλ€.λ©λͺ¨μ΄μ μ΄μ λ
photoUrlsλ°°μ΄μ μΈλ±μ€λ‘ μ κ·Όνλ λ°©μμΌλ‘ λ³κ²½ν κ²μ΄ ν¨μ¨μ μ λλ€. κΈ°μ‘΄μcreateImageUrlνΈμΆλ³΄λ€ μ±λ₯μ μ΄μ μ΄ μμ΅λλ€.src/components/createpost/PostContentSection.styled.ts (3)
2-2: μΌκ΄λ caret μμμ μν μ μ ν import μΆκ°μ λλ€.
colorsimport μΆκ°λ μλ‘μ΄ caret μ€νμΌλ§μ μ§μνκΈ° μν΄ νμν©λλ€.
21-24: μ¬μ©μ κ²½νμ ν₯μμν€λ μ€νμΌ κ°μ μ λλ€.μ€ν¬λ‘€ κΈ°λ₯ νμ±ν(
overflow-y: auto)μ λΈλλ μμμ caret(colors.neongreen) μ μ©μ΄ UXλ₯Ό κ°μ ν©λλ€.
26-46: ν¬λ‘μ€ λΈλΌμ°μ νΈνμ±μ κ³ λ €ν μ€ν¬λ‘€λ° μ€νμΌλ§μ λλ€.WebKit λ° Firefox λͺ¨λλ₯Ό μ§μνλ μμ μ€ν¬λ‘€λ° μ€νμΌλ§μ΄ μ ꡬνλμ΄ μμ΅λλ€. μμλ μλ§¨ν± μ»¬λ¬λ₯Ό μ μ ν νμ©νκ³ μμ΅λλ€.
src/pages/groupMembers/GroupMembers.tsx (1)
26-37: λ³ΈμΈ/νμΈ κ΅¬λΆμ μν μ¬λ°λ₯Έ λ€λΉκ²μ΄μ λ‘μ§μ λλ€.
member.isMyselfνλκ·Έλ₯Ό νμ©νμ¬ λ³ΈμΈ νΌλ(/myfeed)μ νμΈ νΌλ(/otherfeed)λ‘ μ μ ν λΆκΈ°νλ λ‘μ§μ΄ ꡬνλμ΄ μμ΅λλ€.src/components/members/MemberList.tsx (2)
26-37: μΌκ΄λ λ€λΉκ²μ΄μ λ‘μ§ κ΅¬νμ λλ€.
member.isMyselfνλκ·Έλ₯Ό κΈ°λ°μΌλ‘ λ³ΈμΈ/νμΈ νΌλλ₯Ό ꡬλΆνλ λ‘μ§μ΄ μ¬λ°λ₯΄κ² ꡬνλμ΄ μμ΅λλ€. μΈλΆ API νΈνμ±μ μν΄onMemberClick(member.id)λ₯Ό μ μ§ν κ²λ μ’μ μ€κ³μ λλ€.
46-50: μ΄λ²€νΈ νΈλ€λ¬μμ μΌκ΄λ κ°μ²΄ μ λ¬μ λλ€.ν΄λ¦κ³Ό ν€λ³΄λ μ΄λ²€νΈ λͺ¨λμμ μ 체
Memberκ°μ²΄λ₯Ό μ λ¬νμ¬ μΌκ΄μ±μ μ μ§νκ³ μμ΅λλ€.
#οΈβ£μ°κ΄λ μ΄μ
πμμ λ΄μ©
μ€ν¬λ¦°μ· (μ ν)
π¬λ¦¬λ·° μꡬμ¬ν(μ ν)
Summary by CodeRabbit