Skip to content

fix: 4μ°¨ QA#201

Merged
ljh130334 merged 7 commits intodevelopfrom
qa/jihyeon
Aug 21, 2025
Merged

fix: 4μ°¨ QA#201
ljh130334 merged 7 commits intodevelopfrom
qa/jihyeon

Conversation

@ljh130334
Copy link
Member

@ljh130334 ljh130334 commented Aug 21, 2025

#οΈβƒ£μ—°κ΄€λœ 이슈

ex) #이슈번호, #이슈번호

πŸ“μž‘μ—… λ‚΄μš©

이번 PRμ—μ„œ μž‘μ—…ν•œ λ‚΄μš©μ„ κ°„λž΅νžˆ μ„€λͺ…ν•΄μ£Όμ„Έμš”(이미지 첨뢀 κ°€λŠ₯)

μŠ€ν¬λ¦°μƒ· (선택)

πŸ’¬λ¦¬λ·° μš”κ΅¬μ‚¬ν•­(선택)

리뷰어가 νŠΉλ³„νžˆ λ΄μ£Όμ—ˆμœΌλ©΄ ν•˜λŠ” 뢀뢄이 μžˆλ‹€λ©΄ μž‘μ„±ν•΄μ£Όμ„Έμš”

ex) λ©”μ„œλ“œ XXX의 이름을 더 잘 μ§“κ³  싢은데 ν˜Ήμ‹œ 쒋은 λͺ…칭이 μžˆμ„κΉŒμš”?

Summary by CodeRabbit

  • New Features
    • 멀버/κ·Έλ£Ή 멀버 λͺ©λ‘μ—μ„œ 본인 클릭 μ‹œ λ‚΄ ν”Όλ“œλ‘œ, 타인은 μƒλŒ€ ν”Όλ“œλ‘œ 이동.
  • Style
    • ν…μŠ€νŠΈ μ˜μ—­ μ»€μ„œ 색상을 λ„€μ˜¨ 그린으둜 적용.
    • 포슀트 λ‚΄μš© μž…λ ₯창에 μ„Έλ‘œ 슀크둀 ν™œμ„±ν™” 및 얇은 μŠ€γ‚―γƒ­ΰ€²ΰ€¬ar μŠ€νƒ€μΌ μΆ”κ°€.
    • νŽ˜μ΄μ§€ λ²”μœ„ μž…λ ₯ ν•„λ“œ λ„ˆλΉ„ 계산 κ°œμ„ μœΌλ‘œ 더 μ΄˜μ΄˜ν•œ ν‘œμ‹œ.
  • Bug Fixes
    • λ„μ„œ 검색 λ°”ν…€μ‹œνŠΈ μŠ€νƒ€μΌ ꡬ문 였λ₯˜ μˆ˜μ •.
  • Refactor
    • 사진 첨뢀 μ‹œ λΈ”λ‘­ URL 수λͺ… κ΄€λ¦¬λ‘œ λ©”λͺ¨λ¦¬ μ‚¬μš© κ°œμ„ .

@vercel
Copy link

vercel bot commented Aug 21, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
thip Ready Ready Preview Comment Aug 21, 2025 5:56am

@coderabbitai
Copy link

coderabbitai bot commented Aug 21, 2025

Walkthrough

멀버 데이터에 isMyself ν”Œλž˜κ·Έλ₯Ό API μž…λ ₯/좜λ ₯ νƒ€μž…μ— μΆ”κ°€ν•˜κ³  λ³€ν™˜ λ‘œμ§μ„ λ°˜μ˜ν–ˆμŠ΅λ‹ˆλ‹€. 이λ₯Ό μ‚¬μš©ν•΄ 멀버 클릭 μ‹œ λ‚΄ ν”Όλ“œ/타인 ν”Όλ“œλ‘œ λΆ„κΈ°ν•˜λ„λ‘ λ„€λΉ„κ²Œμ΄μ…˜ λ‘œμ§μ„ μˆ˜μ •ν–ˆμŠ΅λ‹ˆλ‹€. ν…μŠ€νŠΈ μ˜μ—­κ³Ό μž…λ ₯ μŠ€νƒ€μΌμ„ 일뢀 μ‘°μ •ν•˜κ³ , 사진 μ—…λ‘œλ“œμ—μ„œ Blob URL λ©”λͺ¨μ΄μ œμ΄μ…˜ 및 정리λ₯Ό λ„μž…ν–ˆμŠ΅λ‹ˆλ‹€. 일뢀 μŠ€νƒ€μΌ 파일의 문법/포맷 였λ₯˜λ„ μ •μ •ν–ˆμŠ΅λ‹ˆλ‹€.

Changes

Cohort / File(s) Summary of changes
API 멀버 μŠ€ν‚€λ§ˆ/λ§€ν•‘
src/api/rooms/getRoomMembers.ts
RoomMember에 isMyself: boolean μΆ”κ°€, Member에 isMyself?: boolean μΆ”κ°€, λ³€ν™˜ ν•¨μˆ˜κ°€ ν•΄λ‹Ή ν•„λ“œ λ§€ν•‘
멀버 클릭 λ„€λΉ„κ²Œμ΄μ…˜ λΆ„κΈ°
src/components/members/MemberList.tsx, src/pages/groupMembers/GroupMembers.tsx
클릭 ν•Έλ“€λŸ¬κ°€ Member 객체λ₯Ό λ°›μ•„ isMyself 여뢀에 따라 /myfeed/{id} λ˜λŠ” /otherfeed/{id}둜 μ΄λ™ν•˜λ„λ‘ μˆ˜μ •
사진 Blob URL 수λͺ… 관리
src/components/createpost/PhotoSection.tsx
createImageUrl 제거, useMemo둜 Blob URL λ°°μ—΄ 생성, useEffect둜 URL revoke 정리, λ Œλ”λ§μ—μ„œ memoized URL μ‚¬μš©
ν…μŠ€νŠΈ μž…λ ₯ UX μŠ€νƒ€μΌ
src/components/creategroup/RoomInfoSection.styled.ts, src/components/createpost/PostContentSection.styled.ts
caret-color 적용(λ„€μ˜¨κ·Έλ¦°), ν…μŠ€νŠΈ μ˜μ—­ μŠ€ν¬λ‘€λ°” μŠ€νƒ€μΌ(μ›Ήν‚·/파폭) 및 overflow-y: auto둜 λ³€κ²½
νŽ˜μ΄μ§€ λ²”μœ„ μž…λ ₯ μŠ€νƒ€μΌ 보정
src/components/recordwrite/PageRangeSection.styled.ts
caret-color 제거, inputLength 기반 width 계산을 12px κΈ°λ³ΈΒ·max(9, n*8)둜 μ‘°μ •, colors import 제거
μŠ€νƒ€μΌ 문법/포맷 정리
src/components/common/BookSearchBottomSheet/BookSearchBottomSheet.styled.ts, src/pages/pollwrite/PollWrite.styled.ts, src/pages/recordwrite/RecordWrite.styled.ts
λΆˆν•„μš”/였λ₯˜ ꡬ문 제거 및 곡백 μΆ”κ°€ λ“± ν¬λ§·νŒ… μˆ˜μ •(λ™μž‘ λ³€ν™” μ—†μŒ)

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
Loading
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) 정리
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

Suggested labels

πŸ“¬ API, 🐞 BugFix

Poem

(‒̀ᴗ‒́)و Μ‘Μ‘ πŸ₯•
μƒˆμ‹Ή κΉƒλ°œ isMyself, 토끼가 콕 찍고,
λ‚΄ ν”Όλ“œλ‘œ 폴짝, 남 ν”Όλ“œλ‘  살짝!
사진 URL은 λ§Œλ“€κ³  κ±·μ–΄κ°€κ³ ,
μ»€μ„œ 빛은 초둝이 λ°˜μ§λ°˜μ§β€”
μ˜€λŠ˜λ„ μ½”λ“œλ°­μ— λ°”λžŒμ΄ 솔솔.

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 Docstrings
πŸ§ͺ Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch qa/jihyeon

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.

❀️ Share
πŸͺ§ Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

  • Visit our Status Page to check the current availability of CodeRabbit.
  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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('λ°© μ ‘κ·Ό κΆŒν•œμ΄ μ—†μŠ΅λ‹ˆλ‹€.');
     }

μ›ν•˜μ‹œλ©΄ μ—λŸ¬ μ½”λ“œ ν…Œμ΄λΈ”/νƒ€μž… μ •μ˜(예: ServerErrorCode enum)도 정리해 λ“œλ¦¬κ² μŠ΅λ‹ˆλ‹€.


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;)

κ²€ν†  μš”μ²­ 사항:

  1. λ°±μ—”λ“œ μŠ€νŽ™ 확인
    • RoomMember 응닡에 isMyself ν•„λ“œκ°€ 항상 ν¬ν•¨λ˜λŠ”μ§€ ν™•μΈν•΄μ£Όμ„Έμš”.
  2. λΆˆν™•μ‹€ν•  경우 λ§€ν•‘ λ‹¨κ³„μ—μ„œ κΈ°λ³Έκ°’/μΊμŠ€νŒ… 적용
    -      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.

πŸ“₯ Commits

Reviewing files that changed from the base of the PR and between 7c4e130 and 656b32a.

πŸ“’ 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: 의미 λ³€ν™” μ—†λŠ” 곡백 μΆ”κ°€ β€” OK

RecordWriteμ™€μ˜ 포맷 일관성 μΈ‘λ©΄μ—μ„œ λ¬΄ν•΄ν•©λ‹ˆλ‹€.

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 생성을 μ΅œμ ν™”ν•˜κ³  useEffect cleanupμ—μ„œ URL을 적절히 ν•΄μ œν•˜λŠ” 것은 λͺ¨λ²” μ‚¬λ‘€μž…λ‹ˆλ‹€.


92-97: μΌκ΄€λœ λ°°μ—΄ 인덱슀 μ‚¬μš©μœΌλ‘œ μ„±λŠ₯ κ°œμ„ μž…λ‹ˆλ‹€.

λ©”λͺ¨μ΄μ œμ΄μ…˜λœ photoUrls 배열을 인덱슀둜 μ ‘κ·Όν•˜λŠ” λ°©μ‹μœΌλ‘œ λ³€κ²½ν•œ 것이 νš¨μœ¨μ μž…λ‹ˆλ‹€. 기쑴의 createImageUrl ν˜ΈμΆœλ³΄λ‹€ μ„±λŠ₯상 이점이 μžˆμŠ΅λ‹ˆλ‹€.

src/components/createpost/PostContentSection.styled.ts (3)

2-2: μΌκ΄€λœ caret 색상을 μœ„ν•œ μ μ ˆν•œ import μΆ”κ°€μž…λ‹ˆλ‹€.

colors import μΆ”κ°€λŠ” μƒˆλ‘œμš΄ 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 객체λ₯Ό μ „λ‹¬ν•˜μ—¬ 일관성을 μœ μ§€ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€.

@ljh130334 ljh130334 merged commit 0a7788e into develop Aug 21, 2025
3 checks passed
@coderabbitai coderabbitai bot mentioned this pull request Sep 2, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant