fix: QA 3차 by heeeeyong · Pull Request #178 · THIP-TextHip/THIP-Web

heeeeyong · 2025-08-20T10:26:42Z

#️⃣연관된 이슈

없음

📝작업 내용

로딩스피너 design수정
내 모임방 모달 design수정
다른 사용자 띱 목록 조회 API isMyself 변수 추가

💬리뷰 요구사항

없음

Summary by CodeRabbit

New Features
- 팔로워 목록에서 자기 자신 인식: 내 프로필 클릭 시 내 피드로 이동하고, 자기자신이면 팔로우 버튼을 숨깁니다.
- 게시글 저장 토글 연동: 저장/해제 시 상위로 변경을 통지해 저장 목록에 즉시 반영됩니다.
- 저장 페이지 초기 로딩 개선: 저장된 피드와 도서를 병렬로 불러오고 전체 로딩 스피너를 표시합니다.
- 포스트 클릭 동작 개선: 게시글 영역 클릭 시 피드를 새 탭으로 열고 도서 영역 클릭은 예외 처리됩니다.
Style
- 로딩 스피너 컨테이너에 가로 폭 제한(최대/최소)과 중앙 정렬 적용.
- 그룹 모달 오버레이를 화면 중앙에 정렬하고 반응형 폭 제한 추가.
UX
- 검색/도서 로딩 시 더 큰 로딩 스피너와 사용자 메시지 표시.

vercel · 2025-08-20T10:26:48Z

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

Project	Deployment	Preview	Comments	Updated (UTC)
thip	Ready	Preview	Comment	Aug 20, 2025 0:09am

coderabbitai · 2025-08-20T10:26:49Z

Walkthrough

로딩 스피너와 모달 오버레이에 가로 폭 제한 및 중앙 정렬을 도입했고, UserProfileItem에 isMyself를 추가해 클릭 라우팅과 팔로우 버튼 노출을 분기했습니다. Post 저장 토글이 부모로 전파되도록 onSaveToggle을 추가하고 SavePage에 초기 로드 및 saved books 관리를 구현했습니다.

Changes

Cohort / File(s)	Change Summary
로딩 UI 정렬/사이즈 조정 `src/components/common/LoadingSpinner.tsx`, `src/pages/searchBook/SearchBook.tsx`	LoadingSpinner 컨테이너에 가로 폭 제약(`width:100%`, `min-width:320px`, `max-width:767px`)과 중앙 정렬(`margin:0 auto`) 추가. SearchBook의 로딩 분기에서 `<LoadingSpinner fullHeight size="large" message="책 정보 불러오는 중..." />`로 사이즈/메시지 전달 추가.
프로필 아이템 자기여부 분기 도입 `src/components/feed/UserProfileItem.tsx`, `src/pages/feed/FollowerListPage.tsx`, `src/types/follow.ts`, `src/types/user.ts`	`UserProfileItem`에 `isMyself?: boolean` prop 추가 및 FollowerListPage에서 전달. 클릭 시 `isMyself`에 따라 `/myfeed/{userId}` 또는 `/otherfeed/{userId}`로 네비게이트. followlist 모드에서 자기 자신이면 팔로우 버튼 숨김. 타입에 `isMyself` 필드 추가.
모달 오버레이 레이아웃 조정 `src/components/group/Modal.styles.ts`	Overlay의 교차축 정렬을 `center`로 변경하고, 수평 중앙 배치(`left:50%` + `transform`)와 폭 제약(`min-width`/`max-width`)을 추가해 중앙에 정렬된, 폭 제한된 오버레이로 동작하도록 수정.
저장 토글 콜백 및 SavePage 초기 로딩 `src/components/common/Post/PostFooter.tsx`, `src/components/feed/FeedPost.tsx`, `src/pages/mypage/SavePage.tsx`, `src/types/post.ts`	PostFooter에 `onSaveToggle?: (feedId, newSaveState) => void` 추가 및 저장 성공 시 부모에 호출. FeedPost에 `onSaveToggle` 전달. SavePage에 saved books 로더 추가, saved feeds/books 동시 초기 로드(Promise.all), 초기 로딩 스피너 도입. 언세이브 시 savedBooks 재로딩 및 savedFeeds에서 제거 처리 구현. BookList max-width 확장.
포스트 바디 클릭 핸들링 이동 `src/components/common/Post/PostBody.tsx`	클릭 핸들러를 PostContent에서 외부 Container로 이동해 컨테이너 클릭으로 피드 새탭 열기 적용. BookInfoCard 클릭은 stopPropagation으로 방지. Cursor 스타일 추가.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor U as 사용자
  participant I as UserProfileItem
  participant R as Router

  U->>I: 프로필 클릭
  alt isMyself == true
    I->>R: navigate("/myfeed/{userId}")
  else isMyself == false
    I->>R: navigate("/otherfeed/{userId}")
  end

sequenceDiagram
  autonumber
  actor U as 사용자
  participant P as SearchBook 페이지
  participant S as LoadingSpinner

  U->>P: 페이지 진입 / 검색
  P->>P: isLoading = true
  P->>S: render(fullHeight=true, size="large", message="책 정보 불러오는 중...")
  note right of S: 중앙 정렬 및 폭 제약 포함된\n프레젠테이션 변경

sequenceDiagram
  autonumber
  actor U as 사용자
  participant PF as PostFooter
  participant SP as SavePage
  participant API as 서버

  U->>PF: 저장(토글) 클릭
  PF->>API: save/unsave 요청
  API-->>PF: 응답 (isSaved)
  PF->>PF: saved 상태 갱신
  PF->>SP: onSaveToggle(feedId, newSaveState) [선택적 콜백]
  alt newSaveState == false
    SP->>SP: savedFeeds에서 항목 제거 / savedBooks 재로딩 가능
  else newSaveState == true
    SP->>SP: 로컬 상태에 추가
  end

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

feat: 저장한 책 및 피드 조회 API 연동 #163 — SavePage 및 saved-items 흐름(저장 토글 처리, 로딩)과 직접적으로 연관됨.
fix: 내 프로필, 다른 사용자 프로필 클릭 시 분기 처리 #130 — isMyself 플래그와 프로필 네비게이션/팔로우 버튼 분기와 중복 변경 가능성 있음.
fix: QA 2차 수정 #172 — PostBody 클릭 핸들링 및 클릭 전파(stopPropagation) 관련 변경과 상호작용할 가능성 있음.

Suggested labels

✨ Feature, 🎨 Html&css

Suggested reviewers

ljh130334

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.

📜 Recent 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 e3a5ccf and ae2f98a.

📒 Files selected for processing (1)

src/pages/feed/FollowerListPage.tsx (2 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

src/pages/feed/FollowerListPage.tsx

✨ Finishing Touches

📝 Generate Docstrings

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch chore/minor-updates

🪧 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.

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (7)

src/types/follow.ts (1)
9-9: isMyself 필드 매핑 검증 및 타입 수정 제안

API 호출부에서 response.data.followers/followings를 그대로 FollowData[]로 사용하며, 별도 매핑이나 기본값 할당 없이
isMyself={user.isMyself} 형태로 넘기고 있습니다.
이 경우 백엔드가 isMyself를 누락하면 undefined가 false로 간주될 수 있습니다.

검토 및 제안:
src/types/follow.ts
• isMyself가 항상 반환된다면 optional(?)을 제거하여 required로 변경
src/pages/feed/FollowerListPage.tsx (또는 API 레이어)
• 매핑 시 기본값 할당:
const userData = (response.data as { followers: FollowData[] }).followers.map(f => ({
  ...f,
  isMyself: f.isMyself ?? false,
}));
• 또는 컴포넌트에 전달하기 전 가드 추가
위 방안 중 적절한 방향으로 반영 부탁드립니다.
src/components/common/LoadingSpinner.tsx (2)
27-31: fullHeight일 때 배경이 양옆으로 ‘레터박스’처럼 비어 보일 수 있습니다. fullHeight 시에는 가로도 뷰포트 전체를 덮는 게 안전합니다.

현재 컨테이너에 max/min-width와 가운데 정렬이 항상 적용되기 때문에, fullHeight=true로 전체 화면 로딩을 의도한 경우에도 가로는 767px만 칠해지고 양옆이 비어 보일 수 있습니다(특히 데스크톱 폭에서 더 두드러짐). fullHeight일 때만 width: 100vw로 전환하도록 조건부 스타일을 권장합니다.

다음과 같이 수정하면 의도에 맞게 동작합니다.
-  width: 100%;
-  max-width: 767px;
-  min-width: 320px;
-  margin: 0 auto;
-  justify-content: center;
+  ${({ fullHeight }) =>
+    fullHeight
+      ? `
+    width: 100vw;
+    margin: 0;
+  `
+      : `
+    width: 100%;
+    max-width: 767px;
+    min-width: 320px;
+    margin: 0 auto;
+  `}
+  justify-content: center;
27-30: 매직 넘버(767, 320) 반복 사용 최소화 제안

Modal.styles.ts 등 다른 컴포넌트에서도 동일한 767/320 폭 제약을 사용하고 있습니다. 테마(예: theme.breakpoints 또는 layout.containerMaxWidth)로 상수화해 중복을 줄이면 유지보수성이 올라갑니다.
src/pages/feed/FollowerListPage.tsx (2)
138-139: isMyself 전달 추가는 적절합니다. 다만 undefined 대비 명시적 불리언 캐스팅을 권장합니다.

API가 isMyself를 선택적으로 줄 수 있다면, 의도를 명확히 하기 위해 불리언 캐스팅을 제안합니다.
-            isMyself={user.isMyself}
+            isMyself={!!user.isMyself}
30-37: 무한 스크롤에서 중복 요청 가능성: loadUserList의 loading 클로저가 stale일 수 있습니다.

useCallback의 deps에 loading이 없어서, 빠르게 스크롤될 때 동일 인스턴스의 loadUserList가 이전 렌더의 loading=false 상태를 계속 참조해 중복 호출이 발생할 수 있습니다. in-flight ref 가드를 추가하는 방식을 권장합니다.

적용 diff(선택된 범위 내 변경):
   const loadUserList = useCallback(
     async (cursor?: string) => {
-      if (loading) return;
+      if (loading || isFetchingRef.current) return;
 
       try {
         setLoading(true);
+        isFetchingRef.current = true;
         setError(null);
         let response;
@@
       } finally {
-        setLoading(false);
+        setLoading(false);
+        isFetchingRef.current = false;
       }
     },
     [type, userId],
   );
범위 밖 추가 코드(참고):
// 상단 import에 useRef 추가
// import { useState, useEffect, useCallback, useRef } from 'react';

// 상태 선언 근처에 추가
const isFetchingRef = useRef(false);
Also applies to: 87-89
src/components/feed/UserProfileItem.tsx (2)
70-74: isMyself가 undefined일 때도 명확히 처리되도록 불리언 캐스팅을 권장합니다.

현재도 동작에는 문제 없지만, 의도를 코드에 드러내는 측면에서 선호됩니다.
-        {type === 'followlist' && !isMyself && (
+        {type === 'followlist' && !Boolean(isMyself) && (
           <div className="followbutton" onClick={toggleFollow}>
             {followed ? '띱 취소' : '띱 하기'}
           </div>
         )}
34-56: 팔로우 토글 중복 클릭 방지(UX 안정화) 제안

연속 클릭 시 중복 요청이 발생할 수 있습니다. 간단한 로컬 로딩 상태로 방지하면 UX와 안전성이 개선됩니다.

선택된 범위 내 변경:
   const toggleFollow = async (e: React.MouseEvent) => {
     e.stopPropagation();
 
-    try {
+    if (isToggling) return;
+    setIsToggling(true);
+    try {
       const response = await postFollow(userId, !followed);
@@
-    } catch (error) {
+    } catch (error) {
       console.error('팔로우/언팔로우 실패:', error);
-    }
+    } finally {
+      setIsToggling(false);
+    }
   };
-          <div className="followbutton" onClick={toggleFollow}>
+          <div
+            className="followbutton"
+            onClick={toggleFollow}
+            aria-disabled={isToggling}
+            style={{ pointerEvents: isToggling ? 'none' : 'auto', opacity: isToggling ? 0.6 : 1 }}
+          >
             {followed ? '띱 취소' : '띱 하기'}
           </div>
범위 밖 추가 코드(참고):
// 상태 선언부 근처에 추가
const [isToggling, setIsToggling] = useState(false);
Also applies to: 71-73

📜 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 0e071c9 and fdc64e5.

📒 Files selected for processing (7)

src/components/common/LoadingSpinner.tsx (1 hunks)
src/components/feed/UserProfileItem.tsx (2 hunks)
src/components/group/Modal.styles.ts (1 hunks)
src/pages/feed/FollowerListPage.tsx (1 hunks)
src/pages/searchBook/SearchBook.tsx (1 hunks)
src/types/follow.ts (1 hunks)
src/types/user.ts (1 hunks)

🧰 Additional context used

🧬 Code Graph Analysis (1)

src/components/feed/UserProfileItem.tsx (2)

src/types/user.ts (1)

UserProfileItemProps (3-14)

src/stores/usePopupStore.ts (1)

usePopupStore (67-73)

🔇 Additional comments (4)

src/types/user.ts (1)

13-13: UserProfileItemProps: isMyself 계약 및 기본값 처리 확인 필요

기획 확인
followlist 모드에서는 !isMyself 체크로 팔로우 버튼을 숨기고 있지만, followerlist 모드에는 별도 정책이 없습니다.
→ 기획상 followerlist에서도 자기 자신인 경우 UI(화살표 클릭·수치 노출 등)에 제한이 필요한지 확인 부탁드립니다.

boolean 보장
isMyself?: boolean이므로 undefined가 들어올 수 있습니다.
→ UserProfileItem 컴포넌트 props 디스트럭처링 시 isMyself = false 디폴트 할당 또는 분기 시 !!isMyself 변환으로 항상 boolean이 되도록 처리해주세요.

[src/components/feed/UserProfileItem.tsx 라인 20–21]:
// 변경 전
({ userId, isLast, type, isMyself }: UserProfileItemProps)

// 변경 예시
({ userId, isLast, type, isMyself = false }: UserProfileItemProps)
src/pages/searchBook/SearchBook.tsx (1)

241-241: 로딩 UX 개선 LGTM

사이즈를 키우고 메시지를 추가해 피드백이 명확해졌습니다. 컴포넌트 변경 없이 소비 측에서만 개선한 점도 좋습니다.

src/pages/feed/FollowerListPage.tsx (1)

52-58: isMyself 필드 클라이언트 매핑/API 제공 여부 확인 필요

현재 getFollowerList/getFollowingList 응답을 그대로 FollowData[]로 사용하며, 클라이언트에서 isMyself를 별도 할당하는 로직이 없습니다. 이 경우:

팔로워 목록에서 본인 클릭 시 /otherfeed로 잘못 라우팅

(향후) 다른 유저의 팔로잉 조회 시 본인 여부에 따른 버튼 숨김 분기 오류

다음 부분을 확인해주세요:

src/api/users/getFollowerList.ts, getFollowingList.ts: 서버가 각 FollowData 항목에 isMyself 필드를 내려주는지

src/pages/feed/FollowerListPage.tsx: 서버 응답을 그대로 사용 중이므로, 누락 시 userId === currentUser.id 기반으로 isMyself를 할당하는 로직 추가 검토

src/components/feed/UserProfileItem.tsx (1)

27-31: 라우터 정의 검증 완료: /myfeed/:userId 및 /otherfeed/:userId 지원됨
아래 경로가 src/pages/index.tsx에 정의되어 있어, navigate(/myfeed/${userId}) 호출은 유효합니다. 분기 로직을 그대로 유지해 주세요.

src/pages/index.tsx:73 – <Route path="otherfeed/:userId" element={<OtherFeedPage />} />

src/pages/index.tsx:74 – <Route path="myfeed/:userId" element={<MyFeedPage />} />

coderabbitai · 2025-08-20T10:33:58Z

+  align-items: center;
  position: fixed;
  top: 0;
-  left: 0;
-  width: 100vw;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100%;
+  max-width: 767px;
+  min-width: 320px;
  height: 100vh;


⚠️ Potential issue

Overlay가 전체 가로폭을 덮지 않아 배경 클릭/스크롤이 ‘옆으로’ 새는 문제가 발생할 수 있습니다.

현재 Overlay에 max/min-width와 가운데 정렬이 적용되어, 큰 화면에서 Overlay가 뷰포트 전체를 덮지 않습니다. 이 경우:

좌우 여백 영역이 Overlay 밖으로 남아, 배경 클릭이 통과되거나 스크롤 락이 완전하지 않을 수 있습니다.

일반적으로는 Overlay가 뷰포트 전체를 덮고, 안쪽 Modal만 max-width로 센터링하는 패턴이 안전합니다.

Overlay는 100vw/100vh로 전체를 덮고, Modal에만 max-width를 두는 형태로 되돌리는 것을 권장합니다.

다음 변경으로 문제를 해소할 수 있습니다.

align-items: center; position: fixed; top: 0; - left: 50%; - transform: translateX(-50%); - width: 100%; - max-width: 767px; - min-width: 320px; + left: 0; + width: 100vw; height: 100vh;

참고:

이미 Modal 자체에 width: 100%; max-width: 767px;가 있어, Overlay를 전체화면으로 유지해도 콘텐츠는 동일하게 가운데 정렬됩니다(Overlay의 flex 정렬에 의해 수평·수직 센터링).

🤖 Prompt for AI Agents

In src/components/group/Modal.styles.ts around lines 7 to 15, the Overlay currently uses fixed positioning with left: 50%, translateX(-50%) and width/max-width/min-width which prevents it from covering the full viewport; change the Overlay to span the full viewport (e.g., width: 100vw; height: 100vh; left: 0; top: 0) and remove the centering width constraints from the Overlay, keeping max-width/width only on the inner Modal so the Overlay covers the entire screen while the Modal remains centered and constrained.

coderabbitai

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/components/common/Post/PostFooter.tsx (1)
112-115: 보안: window.open 사용 시 reverse tabnabbing 취약점

새 탭을 열 때 opener 연결이 유지되어 보안 이슈가 생길 수 있습니다. noopener/noreferrer를 지정하고 opener를 명시적으로 끊어주세요.
 const handleComment = () => {
   if (isDetail) return;
-  window.open(`/feed/${feedId}`, '_blank');
+  const newWindow = window.open(`/feed/${feedId}`, '_blank', 'noopener,noreferrer');
+  if (newWindow) newWindow.opener = null;
 };

🧹 Nitpick comments (7)

src/components/common/Post/PostFooter.tsx (3)

73-88: 좋아요 다중 클릭 레이스컨디션 방지 가드 추가 권장

연속 클릭 시 동일한 이전 상태(saved/liked)를 기준으로 여러 요청이 나가 결과가 뒤엉킬 수 있습니다. in-flight 가드로 중복 요청을 막아주세요.

아래와 같이 가드를 추가하는 것을 제안합니다.
 const handleLike = async () => {
+  if (liking) return;
+  setLiking(true);
   try {
     const response = await postFeedLike(feedId, !liked);

     if (response.isSuccess) {
       // 성공 시 상태 업데이트
       setLiked(response.data.isLiked);
       setLikeCount(prev => (response.data.isLiked ? prev + 1 : prev - 1));
       console.log('좋아요 상태 변경 성공:', response.data.isLiked);
     } else {
       console.error('좋아요 상태 변경 실패:', response.message);
     }
   } catch (error) {
     console.error('좋아요 API 호출 실패:', error);
+  } finally {
+    setLiking(false);
   }
 };
그리고 상태 선언을 추가해주세요(컴포넌트 상단 state 선언부 인접 위치).
const [liking, setLiking] = useState(false);
90-110: 저장 토글 중복 클릭/레이스 컨디션 방지

저장 아이콘도 동일한 문제가 발생할 수 있습니다. 저장 중에는 추가 클릭을 무시하도록 in-flight 가드를 추가하세요.
 const handleSave = async () => {
+  if (saving) return;
+  setSaving(true);
   try {
     const response = await postSaveFeed(feedId, !saved);

     if (response.isSuccess) {
       const newSaveState = response.data?.isSaved ?? !saved;
       // 성공 시 상태 업데이트
       setSaved(newSaveState);
       console.log('저장 상태 변경 성공:', newSaveState);
       
       // 부모 컴포넌트에 알림
       if (onSaveToggle) {
         onSaveToggle(feedId, newSaveState);
       }
     } else {
       console.error('저장 상태 변경 실패:', response.message);
     }
   } catch (error) {
     console.error('저장 API 호출 실패:', error);
+  } finally {
+    setSaving(false);
   }
 };
상태 선언을 추가해주세요(컴포넌트 상단 state 선언부 인접 위치).
const [saving, setSaving] = useState(false);
121-127: 접근성: 아이콘에 적절한 대체 텍스트 추가 권장

like/comment 아이콘에 alt를 추가하면 스크린 리더 호환성이 좋아집니다.
-<img src={liked ? activeLike : like} onClick={handleLike} />
+<img
+  src={liked ? activeLike : like}
+  onClick={handleLike}
+  alt={liked ? '좋아요 취소' : '좋아요'}
+/>

-<img src={comment} onClick={handleComment} />
+<img src={comment} onClick={handleComment} alt="댓글" />

src/pages/mypage/SavePage.tsx (4)

75-103: 초기 데이터 병렬 로드 OK — 공통 로더 재사용으로 중복 제거 가능

지금도 동작엔 문제 없지만, 이미 정의한 로더(loadSavedFeeds, loadSavedBooks)를 재사용하면 코드가 더 간결해집니다. 초기 로딩 스피너는 initialLoading으로 커버되므로 feedLoading을 굳이 건드리지 않아도 됩니다.

예시:

 useEffect(() => {
   const loadAllData = async () => {
     try {
       setInitialLoading(true);
-      // 두 API를 병렬로 호출
-      const [feedsResponse, booksResponse] = await Promise.all([
-        getSavedFeedsInMy(null),
-        getSavedBooksInMy(),
-      ]);
-
-      // 피드 데이터 설정
-      setSavedFeeds(feedsResponse.data.feedList);
-      setFeedNextCursor(feedsResponse.data.nextCursor);
-      setFeedIsLast(feedsResponse.data.isLast);
-
-      // 책 데이터 설정
-      setSavedBooks(booksResponse.data.bookList);
+      await Promise.all([loadSavedFeeds(null), loadSavedBooks()]);
     } catch (error) {
       console.error('초기 데이터 로드 실패:', error);
     } finally {
       setInitialLoading(false);
     }
   };

   loadAllData();
 }, []);

128-150: 함수명 명확화 제안: handleSaveToggle → handleBookSaveToggle

동일 파일에 피드용 handleFeedSaveToggle이 있어 혼동 여지가 있습니다. 책/피드 구분이 드러나도록 이름을 바꾸면 가독성이 좋아집니다.

-const handleSaveToggle = async (isbn: string) => {
+const handleBookSaveToggle = async (isbn: string) => {
   try {
     const currentBook = savedBooks.find(book => book.isbn === isbn);
     if (!currentBook) return;

     const newSaveState = !currentBook.isSaved;
     await postSaveBook(isbn, newSaveState);

     // 저장 취소인 경우 저장된 책 목록을 다시 불러옴
     if (!newSaveState) {
       await loadSavedBooks();
     } else {
       // 저장인 경우 로컬 상태만 업데이트
       setSavedBooks(prev =>
         prev.map(book => (book.isbn === isbn ? { ...book, isSaved: newSaveState } : book)),
       );
     }

     console.log('저장 토글:', isbn, newSaveState);
   } catch (error) {
     console.error('저장 토글 실패:', error);
   }
 };

아래 호출부도 함께 변경해주세요(참고 코드):

<SaveIcon onClick={() => handleBookSaveToggle(book.isbn)}>

152-164: 불필요한 async/try-catch 제거 + useCallback으로 메모이즈

비동기 로직이 없으므로 async/try-catch는 불필요합니다. useCallback으로 래핑하면 자식(FeedPost)로 내려갈 때 함수 아이덴티티가 안정돼 의미 없는 리렌더가 줄어듭니다.

-const handleFeedSaveToggle = async (feedId: number, newSaveState: boolean) => {
-  try {
-    if (!newSaveState) {
-      // 저장 취소인 경우 리스트에서 제거
-      setSavedFeeds(prev => prev.filter(feed => feed.feedId !== feedId));
-      console.log('피드 저장 취소 완료:', feedId);
-    }
-  } catch (error) {
-    console.error('피드 저장 상태 변경 실패:', error);
-  }
-};
+const handleFeedSaveToggle = useCallback((feedId: number, newSaveState: boolean) => {
+  if (!newSaveState) {
+    // 저장 취소인 경우 리스트에서 제거
+    setSavedFeeds(prev => prev.filter(feed => feed.feedId !== feedId));
+    console.log('피드 저장 취소 완료:', feedId);
+  }
+}, []);

291-297: 중복 스타일 제거: width: 100%가 두 번 선언됨

BookList에서 width: 100%가 중복입니다. 하나를 제거해 주세요.

 const BookList = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
   min-width: 320px;
   max-width: 767px;
   padding-top: 32px;
   margin: 0 auto;
-  width: 100%;
 `;

📜 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 fdc64e5 and 489aa46.

📒 Files selected for processing (4)

src/components/common/Post/PostFooter.tsx (3 hunks)
src/components/feed/FeedPost.tsx (1 hunks)
src/pages/mypage/SavePage.tsx (7 hunks)
src/types/post.ts (1 hunks)

🧰 Additional context used

🧬 Code Graph Analysis (2)

src/components/feed/FeedPost.tsx (1)

src/types/post.ts (1)

FeedPostProps (29-35)

src/pages/mypage/SavePage.tsx (1)

src/api/books/getSavedBooksInMy.ts (1)

getSavedBooksInMy (28-36)

🔇 Additional comments (5)

src/types/post.ts (1)

34-34: onSaveToggle 콜백 추가 적절

FeedPost에서 저장 상태 변화 이벤트를 상위로 통지할 수 있게 되어 상태 동기화가 깔끔해졌습니다. PostFooter 쪽 시그니처와도 일치합니다.

src/components/common/Post/PostFooter.tsx (1)

55-56: PostFooter에 onSaveToggle 추가 및 전달 OK

옵셔널 콜백으로 안전하게 처리했고, 부모 통지 경로가 명확합니다.

Also applies to: 67-68

src/components/feed/FeedPost.tsx (1)

29-36: onSaveToggle 전달 경로 정상

Props 분해/전달 순서가 적절하고, spread로 덮어쓰지 않도록 주의한 점도 좋습니다. PostFooter와 타입도 일치합니다.

src/pages/mypage/SavePage.tsx (2)

42-51: 저장된 책 목록 로더 분리 좋습니다

API 오류 로깅과 상태 반영이 명확합니다. 이후 다른 곳에서도 재사용 가능해 유지보수성에 이점이 있습니다.

185-186: FeedPost에 onSaveToggle 연동 OK

언세이브 시 리스트에서 제거되는 UX가 자연스럽습니다. 콜백 시그니처도 일치합니다.

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (2)

src/components/common/Post/PostBody.tsx (2)
12-12: 카드 전체에 pointer 적용은 좋습니다. 다만 BookInfo 영역에는 포인터 해제를 권장합니다.

컨테이너에 cursor: pointer 추가로 클릭 가능성이 잘 드러납니다. 반면, BookInfoCard 영역은 클릭 전파를 막아 상세 이동이 안 되므로, 포인터 커서가 유지되면 사용자에게 혼선을 줄 수 있습니다. 해당 래퍼에 cursor: default만 지정해주면 시각적 피드백이 일관됩니다. 또한 .content에도 별도 cursor: pointer가 있어 중복입니다. 컨테이너에서 이미 포인터를 주고 있으므로 .content의 포인터는 제거해도 됩니다.

아래처럼 BookInfoCard 래퍼에 커서만 덮어씌우면 충분합니다:
-      <div onClick={(e) => e.stopPropagation()}>
+      <div onClick={(e) => e.stopPropagation()} style={{ cursor: 'default' }}>
         <BookInfoCard bookTitle={bookTitle} bookAuthor={bookAuthor} isbn={isbn} />
       </div>
Also applies to: 87-87

71-74: 새 탭 열기 보안·접근성 보완: noopener/noreferrer, 키보드 접근성, 텍스트 드래그 가드 추가 제안

보안: window.open에 noopener,noreferrer를 지정하고 opener를 명시적으로 끊어 reverse tabnabbing을 예방하세요.

접근성: div 클릭 내비게이션에는 role="link"와 tabIndex=0, Enter/Space 키 처리로 키보드 접근성을 제공하는 것이 좋습니다.

UX: 텍스트 드래그 후 클릭으로 의도치 않게 새 탭이 열리는 것을 방지하기 위해 선택 텍스트 존재 시 네비게이션을 건너뛰는 가드를 두는 것을 권장합니다.

아래처럼 최소 수정으로 반영할 수 있습니다:
@@
-  const handlePostClick = (feedId: number) => {
-    // 새 탭에서 피드 상세 페이지 열기
-    window.open(`/feed/${feedId}`, '_blank');
-  };
+  const handlePostClick = (feedId: number) => {
+    // 새 탭에서 피드 상세 페이지 열기 (보안: noopener/noreferrer)
+    const win = window.open(`/feed/${feedId}`, '_blank', 'noopener,noreferrer');
+    if (win) win.opener = null;
+  };
@@
-    <Container onClick={() => handlePostClick(feedId)}>
+    <Container
+      role="link"
+      tabIndex={0}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          handlePostClick(feedId);
+        }
+      }}
+      onClick={(e) => {
+        const selection = window.getSelection?.();
+        if (selection && selection.toString()) return;
+        handlePostClick(feedId);
+      }}
+    >
참고: 가능하면 시맨틱하게 <a> 사용도 고려해볼 수 있습니다(예: <Container as="a" href=... target="_blank" rel="noopener noreferrer">). 다만 내부에 또 다른 앵커가 중첩될 수 있으면 현재 div + 핸들러 접근이 더 안전합니다.

Also applies to: 86-90

📜 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 489aa46 and e3a5ccf.

📒 Files selected for processing (1)

src/components/common/Post/PostBody.tsx (2 hunks)

heeeeyong added 3 commits August 20, 2025 19:00

fix: 내 모임방 모달 수정

a723538

fix: 로딩스피너 수정

778b713

fix: isMyself 변수 추가

fdc64e5

heeeeyong self-assigned this Aug 20, 2025

heeeeyong added the 🐞 BugFix Something isn't working label Aug 20, 2025

coderabbitai Bot reviewed Aug 20, 2025

View reviewed changes

fix: 피드 책 저장 로직 수정

489aa46

vercel Bot deployed to Preview August 20, 2025 11:00 View deployment

coderabbitai Bot reviewed Aug 20, 2025

View reviewed changes

fix: 사진 클릭 범위 수정

e3a5ccf

vercel Bot deployed to Preview August 20, 2025 11:46 View deployment

coderabbitai Bot reviewed Aug 20, 2025

View reviewed changes

fix: 내 띱 목록 전체 바 선 수정

ae2f98a

vercel Bot deployed to Preview August 20, 2025 12:09 View deployment

heeeeyong merged commit 5f021f3 into develop Aug 20, 2025
3 checks passed

coderabbitai Bot mentioned this pull request Aug 20, 2025

fix: 띱하기가 내 프로필에서 보이는 에러 수정 #181

Merged

coderabbitai Bot mentioned this pull request Nov 11, 2025

Revert "Merge pull request #284 from THIP-TextHip/feat/influencer" #293

Merged

This was referenced Feb 25, 2026

피드 UX 개선 게시글 이동 방식 변경 및 스크롤 위치 복원 #312

Merged

fix: Feed/Memory/GroupSearch 머지 충돌 해결 #316

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: QA 3차#178

fix: QA 3차#178
heeeeyong merged 6 commits into
developfrom
chore/minor-updates

heeeeyong commented Aug 20, 2025 •

edited by coderabbitai Bot

Loading

Uh oh!

vercel Bot commented Aug 20, 2025 •

edited

Loading

Uh oh!

coderabbitai Bot commented Aug 20, 2025 •

edited

Loading

Chat

Support

CodeRabbit Commands (Invoked using PR/Issue comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Status, Documentation and Community

Uh oh!

coderabbitai Bot left a comment

Uh oh!

coderabbitai Bot Aug 20, 2025

Uh oh!

coderabbitai Bot left a comment

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

heeeeyong commented Aug 20, 2025 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

#️⃣연관된 이슈

📝작업 내용

💬리뷰 요구사항

Summary by CodeRabbit

Uh oh!

vercel Bot commented Aug 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Aug 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Suggested labels

Suggested reviewers

Poem

Chat

Support

CodeRabbit Commands (Invoked using PR/Issue comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Status, Documentation and Community

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot Aug 20, 2025

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

heeeeyong commented Aug 20, 2025 •

edited by coderabbitai Bot

Loading

vercel Bot commented Aug 20, 2025 •

edited

Loading

coderabbitai Bot commented Aug 20, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)