Merge refactor-skeleton → refacgtor

[ljh130334]

이하동일

Summary by CodeRabbit

• 새로운 기능

  • 전역 스켈레톤 로딩 컴포넌트 대거 추가 및 통합 제공 (피드/그룹/검색/책/메모리/멤버/메시지 등)

• 사용자 경험 개선

  • 페이지별 구조화된 스켈레톤으로 빈 화면 제거 및 레이아웃 유지
  • 탭/상세/초기 로딩에 최소 500ms 표시 보장으로 깜박임 완화
  • 기존 스피너를 대체한 시각적 플레이스홀더와 개선된 오류/접근성 처리

• 문서화

  • 스켈레톤 컴포넌트 사용 가이드 및 예제 문서 추가

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
thip	Ready	Preview, Comment	Feb 25, 2026 10:18am

[coderabbitai]

Warning

Rate limit exceeded

@ljh130334 has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 4 minutes and 25 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between f38029c and 2a3be9f.

📒 Files selected for processing (5)

• src/pages/searchBook/SearchBook.tsx
• src/shared/ui/Skeleton/README.md
• src/shared/ui/Skeleton/base/Skeleton.tsx
• src/shared/ui/Skeleton/group/GroupBookSectionSkeleton.tsx
• src/shared/ui/Skeleton/searchBook/BookDetailSkeleton.tsx

Walkthrough

전역적으로 재사용 가능한 Skeleton 컴포넌트군을 추가하고, 여러 페이지/컴포넌트의 기존 스피너/텍스트 로더를 스켈레톤 UI로 교체하며 탭/초기 로딩에 500ms 최소 지연을 Promise.all로 병렬 적용합니다.

Changes

Cohort / File(s)	Summary
Skeleton core src/shared/ui/Skeleton/base/Skeleton.styled.ts, src/shared/ui/Skeleton/base/Skeleton.tsx, src/shared/ui/Skeleton/base/index.ts	기본 Skeleton(Box/Circle/Text) 스타일·컴포넌트 및 시머 애니메이션 추가, 재내보내기 구현.
Skeleton barrels & docs src/shared/ui/Skeleton/index.ts, src/shared/ui/Skeleton/README.md	Skeleton 구성요소 중앙 재내보내기(바렐)와 사용 문서 추가.
Feed skeletons & feed pages src/shared/ui/Skeleton/feed/*, src/shared/ui/Skeleton/feed/index.ts, src/components/feed/MyFeed.tsx, src/pages/feed/Feed.tsx, src/pages/feed/Feed.styled.ts, src/pages/feed/FeedDetailPage.tsx, src/pages/feed/FeedDetailPage.styled.ts, src/pages/feed/MyFeedPage.tsx, src/pages/feed/OtherFeedPage.tsx, src/pages/feed/FollowerListPage.tsx	Feed 관련 스켈레톤 컴포넌트(FeedPost, OtherFeed, Profile, TotalBar, UserProfileItem 등) 추가 및 여러 피드 페이지에서 로딩 경로를 스켈레톤+minLoadingTime(500ms)으로 전환.
Group skeletons & group pages src/shared/ui/Skeleton/group/*, src/shared/ui/Skeleton/group/index.ts, src/pages/groupDetail/GroupDetail.tsx, src/pages/groupDetail/ParticipatedGroupDetail.tsx, src/pages/groupMembers/GroupMembers.tsx	그룹 상세/참여 페이지용 스켈레톤 추가, 로딩 분기 대체, 데이터 접근 경로를 roomData 기반으로 정리 및 500ms 최소 지연 적용.
Search & SearchBook skeletons src/shared/ui/Skeleton/search/*, src/shared/ui/Skeleton/searchBook/*, src/pages/search/Search.tsx, src/pages/searchBook/SearchBook.tsx, src/components/search/MostSearchedBooks.tsx, src/pages/groupSearch/GroupSearch.tsx	검색 영역(최근검색, 인기 도서, 북 상세)에 스켈레톤 컴포넌트 추가, 로딩 분기에서 스켈레톤 사용 및 500ms 최소 지연 도입.
Memory / TodayWords / Members / Mypage / Save skeletons & pages src/shared/ui/Skeleton/memory/*, src/shared/ui/Skeleton/todaywords/*, src/shared/ui/Skeleton/members/*, src/pages/memory/Memory.tsx, src/pages/today-words/TodayWords.tsx, src/pages/groupMembers/GroupMembers.tsx, src/pages/mypage/*, src/pages/mypage/SavePage.*, src/pages/mypage/Mypage.tsx, src/pages/mypage/SavePage.tsx	메모리·오늘의한마디·멤버·마이페이지·저장 페이지에 대응하는 스켈레톤 추가 및 초기 로딩에서 스켈레톤+minLoadingTime 병렬 적용.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Page as PageComponent
    participant API as RemoteAPI
    participant Delay as MinLoading(500ms)
    participant Skeleton as SkeletonUI
    participant Content as FinalContent

    User->>Page: 진입 또는 탭 전환
    Page->>Page: isLoading = true
    Page->>Skeleton: 스켈레톤 렌더링 (초기 뷰)
    par 병렬 실행
        Page->>API: 데이터 요청 (fetch)
        Page->>Delay: 500ms 타이머 시작
    end
    API-->>Page: 데이터 응답
    Delay-->>Page: 500ms 만료
    Page->>Page: isLoading = false
    Page->>Content: 실제 콘텐츠 렌더링
    Content-->>User: 화면 표시

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

• THIP-405: Skeleton UI 공통 컴포넌트 구현 #305 — 동일한 Skeleton 시스템 및 Feed 페이지 관련 변경을 도입한 PR로 충돌/중복 가능성이 높음.
• feat: getFeedsByIsbn API, PasswordModal API 연동 #162 — SearchBook의 로딩 UI를 Skeleton으로 대체한 변경과 직접 연관됨.
• refactor-skeleton-global: 주요 페이지 전역 Skeleton UI 적용 및 로딩 경험 개선 #308 — 여러 페이지에서 Skeleton 컴포넌트를 동시에 추가·통합한 PR로 코드 수준 연관성이 큼.

Suggested reviewers

• heeeeyong
• ho0010

Poem

🐇 스켈레톤 살금살금 와서,
반초(500ms) 동안 춤을 추며 빛나네,
시머 빛깔에 숨 고르고 기다리면,
포스트와 방(그룹)이 살며시 모습을 비추네.
토끼는 깡충—변경 완료, 훌륭해요!

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Title check	❓ Inconclusive	PR 제목 'Merge refactor-skeleton → refacgtor'는 브랜치 병합 작업을 설명하지만, 실제 변경의 핵심 목적인 스켈레톤 UI 시스템 구현과 로딩 상태 개선을 명확하게 전달하지 못합니다.	PR 제목을 '스켈레톤 UI 시스템 구현 및 로딩 상태 개선'과 같이 변경하여 실제 변경의 주요 목적을 명확히 표현하는 것을 권장합니다.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch refactor-skeleton

---

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

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 16

Caution

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

⚠️ Outside diff range comments (5)

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

75-77: ⚠️ Potential issue | 🟠 Major

에러 상태에서 빈 화면(<></>) 반환 — 사용자 피드백 및 뒤로가기 수단 없음

오류 발생 시 빈 프래그먼트를 반환하면 사용자에게 아무런 안내 없이 빈 화면만 표시됩니다. 뒤로가기 버튼이나 오류 메시지 없이는 사용자가 페이지를 벗어날 방법이 없습니다. PR 커밋 메시지에서도 GroupDetail/ParticipatedGroupDetail의 에러 상태에 뒤로가기 네비게이션을 추가했다고 언급하고 있어, 동일한 패턴이 여기에도 적용되어야 합니다.

🐛 수정 제안

-  if (error) {
-    return <></>;
-  }
+  if (error) {
+    return (
+      <Container>
+        <TitleHeader
+          leftIcon={<img src={leftArrow} alt="뒤로가기" />}
+          onLeftClick={handleBackClick}
+        />
+        <div style={{ padding: '20px', textAlign: 'center', color: 'gray' }}>
+          사용자 정보를 불러오는데 실패했습니다.
+        </div>
+        <NavBar src={writefab} path="/post/create" />
+      </Container>
+    );
+  }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/feed/MyFeedPage.tsx` around lines 75 - 77, The current MyFeedPage
returns an empty fragment on error (if (error) return <></>), leaving users
stranded; replace that with the same error UI + back navigation used in
GroupDetail/ParticipatedGroupDetail: render a user-friendly error message and a
visible "Back" control that triggers the page navigation (e.g., the same
BackButton or useNavigate/navigation callback used elsewhere) and preserve any
error details for logging or debugging; update the error branch inside the
MyFeedPage component to mirror the error-handling pattern from
GroupDetail/ParticipatedGroupDetail instead of returning an empty fragment.

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

61-70: ⚠️ Potential issue | 🟠 Major

response null 체크 순서가 잘못되었습니다 — 이미 데이터를 접근한 이후에 체크합니다.

response.data가 lines 62, 64에서 먼저 접근된 뒤 lines 67-70에서 null 체크가 수행됩니다. 만약 response나 response.data가 falsy라면 line 62에서 이미 런타임 오류가 발생합니다. null 체크를 데이터 접근 이전으로 이동하거나, 불필요하다면 제거해야 합니다.

🐛 수정 제안

+        if (!response || !response.data) {
+          setError('API 응답이 없습니다.');
+          return;
+        }
+
         let userData: FollowData[] = [];
         if (type === 'followerlist') {
           userData = (response.data as { followers: FollowData[] })?.followers || [];
         } else {
           userData = (response.data as { followings: FollowData[] })?.followings || [];
         }

-        if (!response || !response.data) {
-          setError('API 응답이 없습니다.');
-          return;
-        }
-

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/feed/FollowerListPage.tsx` around lines 61 - 70, Move the
null-check for response/response.data before any access to response.data to
avoid runtime errors: check if response and response.data are truthy (e.g., if
(!response || !response.data) { setError('API 응답이 없습니다.'); return; }) before
computing userData, then populate userData using the existing type switch that
references (response.data as { followers: FollowData[] }) or followings;
alternatively replace direct access with safe optional chaining when assigning
userData (e.g., response?.data?.followers) but ensure setError/return still runs
when data is missing; update the logic around the variables response, userData,
type and setError in FollowerListPage.tsx accordingly.

src/pages/groupSearch/GroupSearch.tsx (1)

50-59: ⚠️ Potential issue | 🟠 Major

최근 검색어를 초기 렌더에서 중복 호출하고 있습니다.

Line 50-53과 Line 56-58이 마운트 시점에 동시에 실행되어 fetchRecentSearches()가 2회 호출됩니다(searchStatus 초기값이 idle). 초기 요청 중복과 로딩 상태 깜빡임이 발생할 수 있습니다.

🔧 제안 수정안

-  useEffect(() => {
-    fetchRecentSearches();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   useEffect(() => {
     if (searchStatus === 'idle') {
       fetchRecentSearches();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchStatus]);

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/groupSearch/GroupSearch.tsx` around lines 50 - 59, The useEffect
hooks call fetchRecentSearches() twice on mount because searchStatus starts as
'idle'—fix by consolidating the logic: keep a single useEffect (the one with
empty deps or the one watching searchStatus) and add a guard so
fetchRecentSearches() is invoked only when searchStatus === 'idle' (or remove
the effect that watches searchStatus entirely and rely on the mount effect with
the status check); update references to useEffect, fetchRecentSearches, and
searchStatus accordingly to avoid duplicate initial requests and loading
flicker.

src/pages/groupDetail/GroupDetail.tsx (1)

55-57: ⚠️ Potential issue | 🟡 Minor

isLoading 초기값이 false로 설정되어 ParticipatedGroupDetail과 불일치합니다.

ParticipatedGroupDetail.tsx에서는 isLoading이 true로 초기화되지만, 여기서는 false입니다. !roomData 가드 덕분에 스켈레톤이 표시되긴 하지만, setIsLoading(true)가 실행되기 전 첫 렌더링에서 isLoading이 false인 상태가 존재합니다. 일관성을 위해 true로 초기화하는 것을 권장합니다.

🔧 제안

-  const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/groupDetail/GroupDetail.tsx` around lines 55 - 57, The isLoading
state in GroupDetail (useState for isLoading) is initialized to false which
disagrees with ParticipatedGroupDetail; change the initial value to true so the
first render reflects loading semantics (update the useState<boolean> call that
declares isLoading and setIsLoading in GroupDetail.tsx to use true) to keep
behavior consistent with ParticipatedGroupDetail and avoid a non-loading initial
render before setIsLoading(true) runs.

src/pages/groupDetail/ParticipatedGroupDetail.tsx (1)

56-63: ⚠️ Potential issue | 🟡 Minor

isLoading의 초기값이 true로 설정되어 있어, 첫 렌더링 시 스켈레톤이 바로 표시됩니다.

이 부분은 올바른 접근입니다. GroupDetail.tsx에서는 isLoading의 초기값이 false로 설정되어 있어 (Line 56) !roomData 가드에만 의존하게 됩니다. 두 페이지 간 초기값이 다른 점이 의도된 것인지 확인해 주세요 — GroupDetail.tsx에서는 첫 렌더링 시 스켈레톤 대신 빈 화면이 순간적으로 나타날 수 있습니다.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/groupDetail/ParticipatedGroupDetail.tsx` around lines 56 - 63, The
ParticipatedGroupDetail component initializes loading as true which immediately
shows the skeleton on first render; make the initial loading value consistent
with GroupDetail.tsx by setting the loading state (const [loading, setLoading])
to false (or align both components' intent) and rely on the !roomData guard for
initial empty-render behavior, updating setLoading(true/false) only around your
async fetch logic (functions referenced: ParticipatedGroupDetail, setLoading,
roomData) so both pages behave consistently.

♻️ Duplicate comments (3)

src/components/search/MostSearchedBooks.tsx (1)

30-34: 최소 로딩 보장 로직 이슈가 반복됩니다.

이 구간도 API 실패 시 Promise.all이 즉시 reject되어 스켈레톤 최소 노출 시간이 보장되지 않습니다.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/search/MostSearchedBooks.tsx` around lines 30 - 34, The
Promise.all usage with getMostSearchedBooks and minLoadingTime can reject
immediately when the API fails, breaking the guaranteed skeleton display; change
the logic to await both promises regardless of API failure (e.g., use
Promise.allSettled([getMostSearchedBooks(), minLoadingTime]) and then extract
the fulfilled value from the first result or fall back to safe empty data), or
wrap getMostSearchedBooks() with a catch that returns a sentinel/fallback so
Promise.all always resolves; update references in this component
(minLoadingTime, getMostSearchedBooks) accordingly.

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

37-46: 최소 로딩 보장 로직 이슈가 동일합니다.

여기도 Promise.all fail-fast 특성 때문에 실패 시 500ms 보장이 깨질 수 있습니다. 동일 패턴으로 보정해 주세요.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/feed/OtherFeedPage.tsx` around lines 37 - 46, The current
Promise.all with getOtherFeed, getOtherProfile and minLoadingTime can fail-fast
and skip the 500ms guarantee; wrap the API calls so the timing promise always
resolves independently—e.g., use Promise.allSettled or attach .catch handlers to
getOtherFeed/getOtherProfile before awaiting—then after awaiting, check results
and throw or handle errors and extract values into feedResponse/profileResponse;
update the block referencing getOtherFeed, getOtherProfile, minLoadingTime,
feedResponse and profileResponse accordingly.

src/pages/today-words/TodayWords.tsx (1)

94-101: 최소 로딩 보장 로직 이슈가 동일하게 반복됩니다.

Promise.all 기반이라 API 실패 시 최소 500ms 노출이 보장되지 않습니다. 위에서 지적한 패턴과 동일하게 정리하는 것을 권장합니다.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/today-words/TodayWords.tsx` around lines 94 - 101, The current
Promise.all usage with minLoadingTime plus getDailyGreeting means if
getDailyGreeting rejects the 500ms delay may be skipped; change to ensure
minLoadingTime is always awaited by either awaiting minLoadingTime in a finally
block or by converting the API call into a non-rejecting promise and then using
Promise.all/Promise.allSettled. Concretely, wrap getDailyGreeting(roomId:
parseInt(roomId), cursor: cursor || undefined) into a promise that catches
errors (so it never rejects) or use Promise.allSettled for
[getDailyGreeting(...), minLoadingTime] and then handle the settled result for
the API call (check for rejection and process accordingly); update references in
TodayWords to use the new safe API result handling and keep isRefresh logic the
same.

🧹 Nitpick comments (16)

src/shared/ui/Skeleton/base/Skeleton.styled.ts (2)

54-56: SkeletonTextLine에서 height 보간 중복 선언

SkeletonBase에서 이미 height prop 보간 로직을 처리합니다. SkeletonTextLine이 이를 재선언하는 유일한 이유는 기본값을 20px에서 16px로 변경하기 위함입니다. 이 패턴은 혼란스러울 수 있으며, 향후 SkeletonBase의 height 로직이 변경될 경우 두 곳을 모두 수정해야 합니다.

♻️ 기본값만 명시적으로 분리하는 방식 제안

-export const SkeletonTextLine = styled(SkeletonBase)`
-  height: ${({ height }) => (typeof height === 'number' ? `${height}px` : height || '16px')};
-  border-radius: 4px;
-`;
+export const SkeletonTextLine = styled(SkeletonBase).attrs<SkeletonBaseProps>(({ height }) => ({
+  height: height ?? 16,
+}))`
+  border-radius: 4px;
+`;

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/shared/ui/Skeleton/base/Skeleton.styled.ts` around lines 54 - 56,
SkeletonTextLine duplicates the height interpolation already handled by
SkeletonBase; remove the redundant height handling from SkeletonTextLine and
instead rely on SkeletonBase's logic while only overriding the default value
(from 20px to 16px) via a single source of truth—e.g., pass a default prop or
theme/variable used by SkeletonBase—so update SkeletonTextLine to stop
re-declaring height and supply the desired default height through SkeletonBase's
prop/default mechanism (reference SkeletonTextLine and SkeletonBase and the
height prop).

---

22-36: display: inline-block으로 인한 비(非) flex 컨테이너에서의 예기치 않은 레이아웃 가능성

SkeletonBase가 flex/grid가 아닌 일반 블록 컨테이너의 자식으로 배치될 경우, inline-block 특성 때문에 여러 스켈레톤 요소가 세로로 쌓이지 않고 가로로 나란히 흐를 수 있습니다. flex 컨텍스트 내에서는 외부 디스플레이 유형이 재정의되므로 문제가 없지만, 코드베이스 전반에 걸쳐 비 flex 컨텍스트에서도 사용 가능성이 있다면 display: block이 더 예측 가능한 기본값입니다.

♻️ 제안: block으로 변경

 export const SkeletonBase = styled.div<SkeletonBaseProps>`
-  display: inline-block;
+  display: block;
   width: ${({ width }) => (typeof width === 'number' ? `${width}px` : width || '100%')};

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/shared/ui/Skeleton/base/Skeleton.styled.ts` around lines 22 - 36, The
SkeletonBase styled component currently uses display: inline-block which can
cause multiple skeletons to flow horizontally in non-flex/grid parents; update
SkeletonBase to use display: block so it behaves as a predictable full-width
block element in plain containers, keeping the existing
width/height/borderRadius logic and animations intact (locate SkeletonBase in
src/shared/ui/Skeleton/base/Skeleton.styled.ts and replace the display rule from
inline-block to block).

src/shared/ui/Skeleton/search/RecentSearchTabsSkeleton.tsx (1)

4-15: 스켈레톤 내 하드코딩된 타이틀 텍스트 — 실제 컴포넌트와 텍스트 동기화 필요

Title에 "최근 검색어"가 리터럴로 하드코딩되어 있습니다. 실제 RecentSearchTabs 컴포넌트의 타이틀 텍스트가 변경되면 이 스켈레톤도 함께 수동으로 업데이트해야 합니다. 타이틀도 스켈레톤으로 대체하거나, 실제 컴포넌트에서 상수를 공유하는 방식을 고려하세요.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/shared/ui/Skeleton/search/RecentSearchTabsSkeleton.tsx` around lines 4 -
15, RecentSearchTabsSkeleton currently hardcodes the Title text ("최근 검색어"),
causing drift if RecentSearchTabs' title changes; update
RecentSearchTabsSkeleton to avoid literal text by either rendering the same
shared constant used by RecentSearchTabs (import the title constant) or
rendering a Skeleton placeholder for the title (replace Title's literal children
with a Skeleton.Box/Skeleton.Text), targeting the RecentSearchTabsSkeleton
component and the Title element so the skeleton stays in sync with the real
component.

src/shared/ui/Skeleton/searchBook/BookItemSkeleton.tsx (1)

18-23: 스페이싱을 위한 인라인 스타일 div 사용 — styled-component 패턴과 불일치

세 번째 스켈레톤 텍스트 라인의 상단 여백을 위해 bare <div style={{ marginTop: '8px' }}> 를 사용합니다. 동일 컴포넌트 내 다른 레이아웃이 styled-component를 통해 처리되는 것과 일관성이 없습니다. Skeleton.Text에 margin 또는 style prop을 직접 전달하거나, BookInfo 내부 스타일로 처리하는 방식을 권장합니다.

♻️ 제안

-        <div style={{ marginTop: '8px' }}>
-          <Skeleton.Text width={150} height={12} />
-        </div>
+        <Skeleton.Text width={150} height={12} style={{ marginTop: '8px' }} />

단, Skeleton.Text가 style prop을 지원하지 않는 경우, SkeletonProps에 style?: React.CSSProperties를 추가하거나 래퍼 styled-component를 사용하세요.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/shared/ui/Skeleton/searchBook/BookItemSkeleton.tsx` around lines 18 - 23,
현재 BookItemSkeleton.tsx에서 BookInfo 내부에 bare <div style={{ marginTop: '8px' }}>로
인라인 스타일을 사용하고 있어 styled-component 패턴과 불일치합니다; BookInfo 안의 세 번째 Skeleton.Text 상단
여백을 위해 inline div를 제거하고 대신 Skeleton.Text에 margin/top 스타일을 전달하거나(만약
Skeleton.Text가 style prop을 지원하지 않으면 SkeletonProps에 style?: React.CSSProperties를
추가) 또는 BookInfo 내부에 래퍼 styled-component(예: InfoGap 또는 StyledSkeletonWrap)를 만들어
margin-top을 적용하도록 변경하세요; 참조할 식별자는 BookItemSkeleton.tsx, BookInfo,
Skeleton.Text입니다.

src/shared/ui/Skeleton/base/Skeleton.tsx (1)

40-44: Skeleton.Box와 기본 Skeleton의 중복

Skeleton(base)과 Skeleton.Box는 서로 다른 styled 컴포넌트(SkeletonBase vs SkeletonBox)를 사용하지만, SkeletonBox는 SkeletonBase의 빈 확장(styled(SkeletonBase)```)으로 정의되어 있어 실질적으로 동일합니다. 두 API 표면 간의 의미적 구분이 없으므로, 외부 소비자가 둘 중 어느 것을 사용해야 하는지 혼란스러울 수 있습니다. Skeleton.Box를 유일한 명시적 직사각형 스켈레톤 API로 사용하고 기본 Skeleton` export는 내부 전용으로 제한하는 것을 고려하세요.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/shared/ui/Skeleton/base/Skeleton.tsx` around lines 40 - 44, The base and
box APIs are redundant: SkeletonBox is just a styled(SkeletonBase) empty
extension and Skeleton.Box duplicates functionality; make the rectangular API
explicit by keeping Skeleton.Box (Skeleton.Box component) as the public export
and restrict the base Skeleton (Skeleton and SkeletonBase) to internal use
only—remove or stop exporting the top-level Skeleton component, keep
SkeletonBox/Skeleton.Box as the single public rectangle API, update any export
lists and consume-sites to import Skeleton.Box instead of Skeleton, and add a
deprecation note/alias if needed to preserve backwards compatibility.

src/shared/ui/Skeleton/memory/RecordItemSkeleton.tsx (1)

12-36: 인라인 스타일 일부는 styled 컴포넌트로 분리하면 유지보수가 더 쉬워집니다.

현재 반복되는 인라인 스타일(div 3곳)은 추후 스켈레톤 디자인 변경 시 수정 포인트를 늘립니다. 경량 래퍼로 추출해 두면 일관성 관리가 더 편해집니다.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/shared/ui/Skeleton/memory/RecordItemSkeleton.tsx` around lines 12 - 36,
The three repeated inline divs inside the RecordItemSkeleton (the ones wrapping
Skeleton.Box + Skeleton.Text in ActionSection and the circle wrapper in
UserSection) should be replaced with a lightweight styled component to remove
duplicated inline styles; create a styled component (e.g., IconRow or InlineRow)
and use it in place of the divs in Container/UserSection/ActionSection so styles
like display:flex, gap, alignItems and marginRight are centralized and applied
consistently across the component.

src/shared/ui/Skeleton/group/HotTopicSectionSkeleton.tsx (1)

15-22: 인라인 스타일을 styled-component로 분리하는 것을 권장합니다.

내부 래퍼 div들에 인라인 스타일이 사용되고 있으나, 해당 파일의 나머지 부분은 GroupDetailSkeleton.styled 기반의 styled-component를 활용합니다. 인라인 스타일 객체는 매 렌더마다 새로 생성되고 코드 일관성도 낮아집니다.

♻️ 리팩터링 제안

HotTopicSectionSkeleton.styled.ts (또는 GroupDetailSkeleton.styled.ts)에 아래 스타일을 추가하고 인라인 스타일을 교체합니다:

+export const HotTopicContentPadding = styled.div`
+  padding: 16px 0;
+`;
+
+export const HotTopicContentTitle = styled.div`
+  margin-bottom: 16px;
+`;
+
+export const HotTopicBoxList = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;

-        <div style={{ padding: '16px 0' }}>
-          <div style={{ marginBottom: '16px' }}>
-            <Skeleton.Text width="80%" height={16} />
-          </div>
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
-            <Skeleton.Box width="100%" height={40} borderRadius={8} />
-            <Skeleton.Box width="100%" height={40} borderRadius={8} />
-          </div>
-        </div>
+        <HotTopicContentPadding>
+          <HotTopicContentTitle>
+            <Skeleton.Text width="80%" height={16} />
+          </HotTopicContentTitle>
+          <HotTopicBoxList>
+            <Skeleton.Box width="100%" height={40} borderRadius={8} />
+            <Skeleton.Box width="100%" height={40} borderRadius={8} />
+          </HotTopicBoxList>
+        </HotTopicContentPadding>

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/shared/ui/Skeleton/group/HotTopicSectionSkeleton.tsx` around lines 15 -
22, HotTopicSectionSkeleton currently uses inline style objects on the outer
wrapper and two inner divs; extract those into styled-components (e.g., create
StyledHotTopicWrapper, StyledTitleWrapper, StyledListWrapper in
HotTopicSectionSkeleton.styled.ts or reuse GroupDetailSkeleton.styled) and
replace the inline divs in the HotTopicSectionSkeleton component with these
styled components, preserving the same CSS (padding: 16px 0; margin-bottom:
16px; and display:flex; flex-direction:column; gap:8px;) and keep existing
Skeleton children and props unchanged.

src/shared/ui/Skeleton/members/MemberListSkeleton.tsx (1)

16-18: Skeleton.Circle 주변의 불필요한 래퍼 <div> 제거를 권장합니다.

ProfileSection은 이미 display: flex; align-items: center; gap: 8px 레이아웃을 갖추고 있어 Skeleton.Circle을 직접 배치할 수 있습니다. 빈 <div>는 불필요한 DOM 노드를 추가합니다.

♻️ 리팩터링 제안

           <ProfileSection>
-            <div>
-              <Skeleton.Circle width={36} />
-            </div>
+            <Skeleton.Circle width={36} />
             <MemberInfo>

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/shared/ui/Skeleton/members/MemberListSkeleton.tsx` around lines 16 - 18,
Remove the unnecessary wrapper <div> around Skeleton.Circle in the
MemberListSkeleton component: because ProfileSection already applies
display:flex, align-items:center and gap:8px, place Skeleton.Circle directly as
a child (remove the extra div node) so the DOM is simpler and layout remains
unchanged; update the JSX in MemberListSkeleton (where Skeleton.Circle is
rendered) to render Skeleton.Circle inline and verify styling via ProfileSection
still centers and gaps correctly.

src/shared/ui/Skeleton/group/BannerSkeleton.tsx (1)

15-20: marginTop 인라인 스타일을 styled-component로 분리하는 것을 권장합니다.

HotTopicSectionSkeleton과 동일하게, 내부 래퍼 div에 인라인 스타일이 사용되고 있습니다. GroupDetailSkeleton.styled.ts에 관련 스타일이 이미 존재하므로(MetaSkeletonRow, TagSkeletonRow 등) 일관성을 위해 스타일을 styled-component로 분리하는 것이 좋습니다.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/shared/ui/Skeleton/group/BannerSkeleton.tsx` around lines 15 - 20, The
inline marginTop in BannerSkeleton.tsx should be moved to a styled-component in
GroupDetailSkeleton.styled.ts for consistency; create a new styled export (e.g.,
BannerSkeletonWrapper or reuse an existing pattern like
MetaSkeletonRow/TagSkeletonRow), apply the margin-top: 20px (and the inner 8px
spacer as another styled div or apply a margin-top on a new InnerWrapper),
export and import that styled into BannerSkeleton.tsx, then replace the two
inline-styled divs with the new styled components so no inline styles remain.

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

38-46: Promise.all 결과에 대한 수동 타입 캐스트가 취약합니다.

Promise.all의 세 번째 인자(minLoadingTime)가 타입 추론을 방해하여 전체 결과를 수동으로 캐스팅해야 하는 구조가 되었습니다. 배열 순서가 변경될 경우 캐스트가 런타임 버그를 조용히 허용합니다.

♻️ 리팩터링 제안

-        const [feedResponse, profileResponse] = (await Promise.all([
-          getOtherFeed(Number(userId)),
-          getOtherProfile(Number(userId)),
-          minLoadingTime,
-        ])) as [
-          Awaited<ReturnType<typeof getOtherFeed>>,
-          Awaited<ReturnType<typeof getOtherProfile>>,
-          void,
-        ];
+        const [feedResponse, profileResponse] = await Promise.all([
+          getOtherFeed(Number(userId)),
+          getOtherProfile(Number(userId)),
+        ] as const);
+        await minLoadingTime;

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/feed/MyFeedPage.tsx` around lines 38 - 46, The current Promise.all
includes minLoadingTime in the same array which forces a manual cast and risks
silent runtime bugs if array order changes; change the code to await the two
network calls together and await minLoadingTime separately: call
Promise.all([getOtherFeed(Number(userId)), getOtherProfile(Number(userId))]) to
get [feedResponse, profileResponse] (no manual cast), then await minLoadingTime
on its own (e.g., await minLoadingTime) before continuing; update references to
feedResponse and profileResponse accordingly.

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

109-118: 중복된 프로필 스켈레톤 마크업은 공용 컴포넌트 재사용을 권장합니다.

현재 구조는 src/shared/ui/Skeleton/feed/ProfileSkeleton.tsx와 역할이 겹쳐 유지보수 포인트가 늘어납니다. 공용 스켈레톤으로 치환하면 스타일 변경 시 일관성이 좋아집니다.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/mypage/Mypage.tsx` around lines 109 - 118, The markup duplicated in
Mypage.tsx (ProfileSkeletonContainer / ProfileSkeletonLeft / ProfileSkeletonText
with Skeleton.Circle/Text/Box) should be replaced by the shared ProfileSkeleton
component from src/shared/ui/Skeleton/feed/ProfileSkeleton.tsx; locate the block
that renders ProfileSkeletonContainer and swap it for the shared
<ProfileSkeleton /> (or pass the existing size/variant props if ProfileSkeleton
supports them) so styling and behavior come from the single source of truth and
the local skeleton subcomponents (ProfileSkeletonContainer, ProfileSkeletonLeft,
ProfileSkeletonText, Skeleton.Circle, Skeleton.Text, Skeleton.Box) are removed
from this file.

src/pages/groupDetail/ParticipatedGroupDetail.tsx (3)

80-86: minLoadingTime의 resolve 타입이 명시되지 않았습니다.

new Promise(resolve => setTimeout(resolve, 500))에서 resolve의 타입이 추론으로 Promise<unknown>이 됩니다. 기능상 문제는 없지만, 여러 곳에서 반복되는 패턴이므로 유틸 함수로 추출하면 코드 중복을 줄일 수 있습니다.

♻️ 유틸 함수 추출 제안

// e.g. src/utils/delay.ts
export const delay = (ms: number): Promise<void> =>
  new Promise(resolve => setTimeout(resolve, ms));

그 후 각 파일에서:

-const minLoadingTime = new Promise(resolve => setTimeout(resolve, 500));
+const minLoadingTime = delay(500);

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/groupDetail/ParticipatedGroupDetail.tsx` around lines 80 - 86,
Replace the inline new Promise pattern used as minLoadingTime with a reusable
typed utility (e.g., export const delay = (ms: number): Promise<void>) and use
it in the ParticipatedGroupDetail component when awaiting getRoomPlaying;
specifically, remove new Promise(resolve => setTimeout(resolve, 500)) and call
await delay(500) (or include delay(500) in Promise.all alongside
getRoomPlaying(parseInt(roomId))) so the resolve type is explicit
(Promise<void>) and the pattern is centralized for reuse.

---

106-108: useEffect 의존성 배열에 navigate가 누락되어 있습니다.

react-router-dom의 navigate는 안정적인 참조이므로 실제 버그가 되진 않지만, eslint-plugin-react-hooks에서 경고가 발생할 수 있습니다. 이 파일 내에서 navigate를 사용하는 useEffect에 의존성을 추가하는 것을 고려해 주세요.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/groupDetail/ParticipatedGroupDetail.tsx` around lines 106 - 108,
The useEffect that calls fetchRoomDetail currently lists [roomId] but omits the
navigate function, which can trigger eslint-plugin-react-hooks warnings; update
the dependency array for the useEffect that calls fetchRoomDetail to include
navigate (i.e., [roomId, navigate]) so the hook lists all referenced symbols
(fetchRoomDetail, navigate, roomId) and keeps hooks linting satisfied.

---

67-69: 두 개의 뒤로가기 핸들러가 존재합니다 — 의도한 것인지 확인 필요.

handleBackClick은 navigate(-1) (에러 상태에서 사용), handleBackButton은 navigate('/group') (로딩/메인 콘텐츠에서 사용)으로 동작이 다릅니다. 에러 시 브라우저 히스토리 뒤로가기, 정상 시 그룹 목록 이동이 의도된 설계라면 괜찮지만, 일관성 측면에서 확인해 주세요.

Also applies to: 110-112

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/groupDetail/ParticipatedGroupDetail.tsx` around lines 67 - 69,
There are two different back handlers—handleBackClick (calls navigate(-1)) and
handleBackButton (calls navigate('/group'))—which may be unintended; decide on
the intended UX and make them consistent: either consolidate into a single
handler (e.g., unify both to navigate('/group') or to navigate(-1)) and replace
usages, or keep both but rename them to clarify intent (e.g.,
handleBackToHistory for navigate(-1) and handleBackToGroupList for
navigate('/group')) and ensure error and normal render paths call the correct
one; update any onClick references where handleBackClick or handleBackButton are
used so the code reflects the chosen behavior and add a short comment near the
handler(s) explaining when each should be used.

src/shared/ui/Skeleton/group/GroupDetailSkeleton.styled.ts (1)

4-14: SkeletonWrapper가 ParticipatedWrapper / Wrapper와 거의 동일한 스타일을 가지고 있습니다.

ParticipatedGroupDetail.styled.ts의 ParticipatedWrapper와 GroupDetail.styled.ts의 Wrapper 모두 동일한 레이아웃 패턴(flex column, min/max-width, margin auto, background)을 사용합니다. 공통 래퍼 컴포넌트로 추출하면 중복을 줄일 수 있습니다.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/shared/ui/Skeleton/group/GroupDetailSkeleton.styled.ts` around lines 4 -
14, Duplicate layout styles exist across SkeletonWrapper, ParticipatedWrapper,
and Wrapper; extract a shared styled-component (e.g., CommonWrapper or
BaseLayout) that contains the shared rules (display:flex; position:relative;
flex-direction:column; align-items:center; min-width:320px; max-width:767px;
min-height:100vh; margin:0 auto; background-color:${colors.black.main}); replace
SkeletonWrapper, ParticipatedWrapper, and Wrapper to extend or wrap this new
CommonWrapper (via styled(CommonWrapper) or by composition) and keep any unique
styles in each specific component so duplication is removed but unique overrides
remain.

src/pages/searchBook/SearchBook.tsx (1)

82-87: minLoadingTime 패턴이 반복적으로 사용되고 있습니다.

이 파일 내에서 동일한 new Promise(resolve => setTimeout(resolve, 500)) 패턴이 두 번, 프로젝트 전체에서는 다수 사용됩니다. ParticipatedGroupDetail.tsx 리뷰에서 언급한 대로 공통 유틸로 추출을 권장합니다.

Also applies to: 120-124

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/searchBook/SearchBook.tsx` around lines 82 - 87, Extract the
repeated new Promise(resolve => setTimeout(resolve, 500)) into a shared utility
(e.g., sleep or delay) and replace local minLoadingTime usages with that util;
specifically create a util function (sleep/msDelay) and import it into
SearchBook.tsx, then change the Promise.all call that currently awaits
getBookDetail(isbn), getRecruitingRooms(isbn), minLoadingTime to use sleep(500)
(and update the other occurrence around lines 120-124 similarly), and also
replace the same pattern in ParticipatedGroupDetail.tsx and other files to use
the new utility to avoid duplication.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/components/feed/MyFeed.tsx`:
- Around line 33-35: The current conditional in the MyFeed component (the if in
MyFeed that checks `loading || !profileData`) keeps the skeleton shown forever
when the profile API fails; change the logic so the skeleton is shown only while
`loading` is true (e.g., `if (loading) return <OtherFeedSkeleton .../>`), and
handle the `!profileData` case separately (render an error/fallback UI or an
empty-state with retry) once loading is false. Update the fetch handler in
MyFeed to set an explicit error or status flag (e.g., `profileError` or
`profileStatus`) so you can distinguish loading vs failed vs empty states and
render accordingly.

In `@src/pages/feed/FeedDetailPage.tsx`:
- Around line 69-74: The current Promise.all([...getFeedDetail, getComments,
minLoadingTime]) causes the 500ms minLoadingTime to be skipped if any API
rejects; extract minLoadingTime (const minLoadingTime = new Promise(resolve =>
setTimeout(resolve, 500))) outside Promise.all and ensure you always await it
even on error — e.g., await Promise.all([getFeedDetail(...), getComments(...)])
inside a try/catch (or use Promise.allSettled for both API calls) and in a
finally block await minLoadingTime before updating state or hiding the skeleton;
update references to feedResponse/commentsResponse accordingly to handle
settled/rejected results.

In `@src/pages/feed/FollowerListPage.tsx`:
- Line 132: The TitleHeader usage is missing an alt on the leftArrow image:
update the leftIcon prop where TitleHeader is rendered (the JSX line using
leftArrow, handleBackClick, and title) to include an alt attribute on the <img>
(e.g., alt="뒤로가기" to match MyFeedPage's back icon) so the image is accessible.

In `@src/pages/groupDetail/GroupDetail.tsx`:
- Around line 132-141: The error block in GroupDetail.tsx returns plain div text
without a color, which can be invisible against the dark background; update the
error rendering to set an explicit text color (e.g., white or var(--color-red))
or reuse the existing ErrorContainer styled-component used in
ParticipatedGroupDetail so the message inside Wrapper/Header/IconButton (with
leftArrow and handleBackButton) is visible; replace the inline div with the
styled ErrorContainer (or add a color style) to ensure consistent error styling
similar to SearchBook.tsx and ParticipatedGroupDetail.
- Around line 314-316: The displayed date range in GroupDetail (MetaDate showing
roomData.progressStartDate ~ roomData.progressEndDate) uses raw API strings and
is inconsistent with ParticipatedGroupDetail which uses formatDate to convert
'-' to '.'; update GroupDetail to pass roomData.progressStartDate and
roomData.progressEndDate through the same formatDate utility (or the shared date
formatting helper used by ParticipatedGroupDetail) before rendering inside
MetaDate so both pages show the same formatted dates.

In `@src/pages/groupMembers/GroupMembers.tsx`:
- Around line 34-38: The current Promise.all between
getRoomMembers(parseInt(currentRoomId)) and minLoadingTime can short-circuit on
API failure and skip the 500ms delay; change the pattern so you await
getRoomMembers (or its try/catch) and always await minLoadingTime in a
.finally() (or use try { await getRoomMembers(...) } catch (err) {
store/propagate err } finally { await minLoadingTime }) to guarantee the minimum
loading time; ensure you reference getRoomMembers and minLoadingTime and rethrow
or handle the error after the finally so existing error handling/upstream
behavior (response variable usage) remains correct.

In `@src/pages/groupSearch/GroupSearch.tsx`:
- Around line 359-366: The delete callback (handleDelete) may throw because
deleteRecentSearch can throw on failure; wrap the async call in a try/catch
inside handleDelete, locate the handler using handleDelete and
deleteRecentSearch (and recentSearches/fetchRecentSearches) to add error
handling, await deleteRecentSearch inside try, keep the existing res.isSuccess
flow to call fetchRecentSearches on success, and in catch log the error and/or
show a user-facing notification so the rejection is not unhandled.

In `@src/pages/memory/Memory.tsx`:
- Around line 318-342: When rendering the loading skeleton, pointerEvents:
'none' still allows keyboard focus and Enter/Space to trigger handleTabChange
and change activeTab (causing duplicate loads); add the inert attribute to the
FixedSection wrapper when loading is true so all focus and keyboard interactions
are blocked (i.e., render <FixedSection inert ...> alongside the existing
style), and if FixedSection is a custom component ensure it forwards the inert
prop to the underlying DOM element (or explicitly set inert on that DOM node) so
RecordTabs, handleTabChange and RecordFilters cannot receive focus or fire
events during loading.

In `@src/pages/mypage/Mypage.tsx`:
- Around line 108-134: Currently the conditional `loading || !profile` causes
the skeleton to render even when loading is finished but profile fetch failed;
update the render logic in Mypage (around the JSX using ProfileSkeletonContainer
and UserProfile) to explicitly branch: if (loading) show the skeleton, else if
(profile) show the UserProfile block (using profile.profileImageUrl,
profile.nickname, profile.aliasColor, profile.aliasName and handleEditClick),
else show a failure/fallback UI (e.g., an error message or empty state) so the
skeleton is not shown indefinitely when profile is null and loading is false.

In `@src/pages/mypage/SavePage.tsx`:
- Around line 128-133: The current Promise.all call can reject early and bypass
minLoadingTime; change the flow so API calls and the minimum loading timer are
awaited independently: use Promise.allSettled([getSavedFeedsInMy(null),
getSavedBooksInMy()]) to collect both results without throwing, then await the
existing minLoadingTime Promise (minLoadingTime) before proceeding to process
the settled results (inspect the .status and .value/.reason for
feedsResponse/booksResponse) so the skeleton is guaranteed to show at least
500ms even if one request fails.

In `@src/pages/searchBook/SearchBook.tsx`:
- Around line 257-265: TopBackground is rendered with
bookImgUrl={bookDetail?.imageUrl || ''} even when bookDetail is null, causing an
empty url() CSS and unwanted requests; change the render logic so TopBackground
is only mounted when bookDetail is available (e.g., move <TopBackground ... />
inside the branch where !isLoading && bookDetail is truthy) or alternatively
update TopBackground to accept an optional prop and skip applying the background
when bookImgUrl is falsy; refer to TopBackground, bookDetail, bookImgUrl,
BookDetailSkeleton and isLoading to locate the relevant JSX and implement the
conditional rendering or guard.
- Around line 244-255: The error guard renders when error is truthy, so the '||
"책 정보를 찾을 수 없습니다."' fallback is dead code; change the JSX inside the if (error)
block to render the actual error only (e.g., replace {error || '책 정보를 찾을 수
없습니다.'} with {error} or String(error)) so the Wrapper/Header/IconButton
(leftArrow, handleBackButton) block shows the real error; alternatively, if you
intended to show the fallback when no error exists, adjust the surrounding
condition (remove if (error) and render conditional content) instead.

In `@src/shared/ui/Skeleton/base/Skeleton.tsx`:
- Around line 62-85: The component currently renders an empty
SkeletonTextWrapper when lines is 0 or negative; update the guard in
Skeleton.Text so that values <= 1 render a single SkeletonTextLine instead of
the wrapper. Specifically, change the conditional that checks lines (currently
if (lines === 1)) to if (lines <= 1) and keep using
width/height/className/lastLineWidth appropriately when returning the single
SkeletonTextLine; this avoids rendering an empty SkeletonTextWrapper for lines
<= 0.

In `@src/shared/ui/Skeleton/group/GroupBookSectionSkeleton.tsx`:
- Around line 7-17: GroupBookSectionSkeleton currently sets only
cursor:'default' which still allows event propagation; update the component so
the container (StyledGroupBookSection) also applies pointerEvents:'none' when
rendering the skeleton (same behavior as BookItemSkeleton) to fully block clicks
and pointer events; locate GroupBookSectionSkeleton and add pointerEvents:'none'
to the inline style or the styled component variant used for skeleton rendering
so parent click handlers won’t fire.

In `@src/shared/ui/Skeleton/README.md`:
- Around line 25-50: Add blank lines before and after each Markdown table to
satisfy markdownlint MD058: insert an empty line immediately above and below the
table under the "### Skeleton (기본)" section (the
width/height/borderRadius/className table), do the same for the "###
Skeleton.Circle" table, and for the "### Skeleton.Text" table; ensure each table
block is separated from surrounding text by a single blank line so the tables
for Skeleton (기본), Skeleton.Circle, and Skeleton.Text are each preceded and
followed by an empty line.

In `@src/shared/ui/Skeleton/searchBook/BookDetailSkeleton.tsx`:
- Around line 31-40: The skeleton buttons (RecruitingGroupButton,
WritePostButton, SaveButton) still receive keyboard focus because only
pointerEvents is disabled; update these components in BookDetailSkeleton so they
are non-interactive to keyboard users by adding disabled (or tabIndex={-1}) to
each button instance and remove any conflicting interactive props—e.g., set
<RecruitingGroupButton disabled style=...>, <WritePostButton disabled ...>, and
ensure <SaveButton already disabled> includes tabIndex={-1} or likewise; keep
the visual skeleton styles but make their ARIA/DOM state explicitly
non-interactive.

---

Outside diff comments:
In `@src/pages/feed/FollowerListPage.tsx`:
- Around line 61-70: Move the null-check for response/response.data before any
access to response.data to avoid runtime errors: check if response and
response.data are truthy (e.g., if (!response || !response.data) { setError('API
응답이 없습니다.'); return; }) before computing userData, then populate userData using
the existing type switch that references (response.data as { followers:
FollowData[] }) or followings; alternatively replace direct access with safe
optional chaining when assigning userData (e.g., response?.data?.followers) but
ensure setError/return still runs when data is missing; update the logic around
the variables response, userData, type and setError in FollowerListPage.tsx
accordingly.

In `@src/pages/feed/MyFeedPage.tsx`:
- Around line 75-77: The current MyFeedPage returns an empty fragment on error
(if (error) return <></>), leaving users stranded; replace that with the same
error UI + back navigation used in GroupDetail/ParticipatedGroupDetail: render a
user-friendly error message and a visible "Back" control that triggers the page
navigation (e.g., the same BackButton or useNavigate/navigation callback used
elsewhere) and preserve any error details for logging or debugging; update the
error branch inside the MyFeedPage component to mirror the error-handling
pattern from GroupDetail/ParticipatedGroupDetail instead of returning an empty
fragment.

In `@src/pages/groupDetail/GroupDetail.tsx`:
- Around line 55-57: The isLoading state in GroupDetail (useState for isLoading)
is initialized to false which disagrees with ParticipatedGroupDetail; change the
initial value to true so the first render reflects loading semantics (update the
useState<boolean> call that declares isLoading and setIsLoading in
GroupDetail.tsx to use true) to keep behavior consistent with
ParticipatedGroupDetail and avoid a non-loading initial render before
setIsLoading(true) runs.

In `@src/pages/groupDetail/ParticipatedGroupDetail.tsx`:
- Around line 56-63: The ParticipatedGroupDetail component initializes loading
as true which immediately shows the skeleton on first render; make the initial
loading value consistent with GroupDetail.tsx by setting the loading state
(const [loading, setLoading]) to false (or align both components' intent) and
rely on the !roomData guard for initial empty-render behavior, updating
setLoading(true/false) only around your async fetch logic (functions referenced:
ParticipatedGroupDetail, setLoading, roomData) so both pages behave
consistently.

In `@src/pages/groupSearch/GroupSearch.tsx`:
- Around line 50-59: The useEffect hooks call fetchRecentSearches() twice on
mount because searchStatus starts as 'idle'—fix by consolidating the logic: keep
a single useEffect (the one with empty deps or the one watching searchStatus)
and add a guard so fetchRecentSearches() is invoked only when searchStatus ===
'idle' (or remove the effect that watches searchStatus entirely and rely on the
mount effect with the status check); update references to useEffect,
fetchRecentSearches, and searchStatus accordingly to avoid duplicate initial
requests and loading flicker.

---

Duplicate comments:
In `@src/components/search/MostSearchedBooks.tsx`:
- Around line 30-34: The Promise.all usage with getMostSearchedBooks and
minLoadingTime can reject immediately when the API fails, breaking the
guaranteed skeleton display; change the logic to await both promises regardless
of API failure (e.g., use Promise.allSettled([getMostSearchedBooks(),
minLoadingTime]) and then extract the fulfilled value from the first result or
fall back to safe empty data), or wrap getMostSearchedBooks() with a catch that
returns a sentinel/fallback so Promise.all always resolves; update references in
this component (minLoadingTime, getMostSearchedBooks) accordingly.

In `@src/pages/feed/OtherFeedPage.tsx`:
- Around line 37-46: The current Promise.all with getOtherFeed, getOtherProfile
and minLoadingTime can fail-fast and skip the 500ms guarantee; wrap the API
calls so the timing promise always resolves independently—e.g., use
Promise.allSettled or attach .catch handlers to getOtherFeed/getOtherProfile
before awaiting—then after awaiting, check results and throw or handle errors
and extract values into feedResponse/profileResponse; update the block
referencing getOtherFeed, getOtherProfile, minLoadingTime, feedResponse and
profileResponse accordingly.

In `@src/pages/today-words/TodayWords.tsx`:
- Around line 94-101: The current Promise.all usage with minLoadingTime plus
getDailyGreeting means if getDailyGreeting rejects the 500ms delay may be
skipped; change to ensure minLoadingTime is always awaited by either awaiting
minLoadingTime in a finally block or by converting the API call into a
non-rejecting promise and then using Promise.all/Promise.allSettled. Concretely,
wrap getDailyGreeting(roomId: parseInt(roomId), cursor: cursor || undefined)
into a promise that catches errors (so it never rejects) or use
Promise.allSettled for [getDailyGreeting(...), minLoadingTime] and then handle
the settled result for the API call (check for rejection and process
accordingly); update references in TodayWords to use the new safe API result
handling and keep isRefresh logic the same.

---

Nitpick comments:
In `@src/pages/feed/MyFeedPage.tsx`:
- Around line 38-46: The current Promise.all includes minLoadingTime in the same
array which forces a manual cast and risks silent runtime bugs if array order
changes; change the code to await the two network calls together and await
minLoadingTime separately: call Promise.all([getOtherFeed(Number(userId)),
getOtherProfile(Number(userId))]) to get [feedResponse, profileResponse] (no
manual cast), then await minLoadingTime on its own (e.g., await minLoadingTime)
before continuing; update references to feedResponse and profileResponse
accordingly.

In `@src/pages/groupDetail/ParticipatedGroupDetail.tsx`:
- Around line 80-86: Replace the inline new Promise pattern used as
minLoadingTime with a reusable typed utility (e.g., export const delay = (ms:
number): Promise<void>) and use it in the ParticipatedGroupDetail component when
awaiting getRoomPlaying; specifically, remove new Promise(resolve =>
setTimeout(resolve, 500)) and call await delay(500) (or include delay(500) in
Promise.all alongside getRoomPlaying(parseInt(roomId))) so the resolve type is
explicit (Promise<void>) and the pattern is centralized for reuse.
- Around line 106-108: The useEffect that calls fetchRoomDetail currently lists
[roomId] but omits the navigate function, which can trigger
eslint-plugin-react-hooks warnings; update the dependency array for the
useEffect that calls fetchRoomDetail to include navigate (i.e., [roomId,
navigate]) so the hook lists all referenced symbols (fetchRoomDetail, navigate,
roomId) and keeps hooks linting satisfied.
- Around line 67-69: There are two different back handlers—handleBackClick
(calls navigate(-1)) and handleBackButton (calls navigate('/group'))—which may
be unintended; decide on the intended UX and make them consistent: either
consolidate into a single handler (e.g., unify both to navigate('/group') or to
navigate(-1)) and replace usages, or keep both but rename them to clarify intent
(e.g., handleBackToHistory for navigate(-1) and handleBackToGroupList for
navigate('/group')) and ensure error and normal render paths call the correct
one; update any onClick references where handleBackClick or handleBackButton are
used so the code reflects the chosen behavior and add a short comment near the
handler(s) explaining when each should be used.

In `@src/pages/mypage/Mypage.tsx`:
- Around line 109-118: The markup duplicated in Mypage.tsx
(ProfileSkeletonContainer / ProfileSkeletonLeft / ProfileSkeletonText with
Skeleton.Circle/Text/Box) should be replaced by the shared ProfileSkeleton
component from src/shared/ui/Skeleton/feed/ProfileSkeleton.tsx; locate the block
that renders ProfileSkeletonContainer and swap it for the shared
<ProfileSkeleton /> (or pass the existing size/variant props if ProfileSkeleton
supports them) so styling and behavior come from the single source of truth and
the local skeleton subcomponents (ProfileSkeletonContainer, ProfileSkeletonLeft,
ProfileSkeletonText, Skeleton.Circle, Skeleton.Text, Skeleton.Box) are removed
from this file.

In `@src/pages/searchBook/SearchBook.tsx`:
- Around line 82-87: Extract the repeated new Promise(resolve =>
setTimeout(resolve, 500)) into a shared utility (e.g., sleep or delay) and
replace local minLoadingTime usages with that util; specifically create a util
function (sleep/msDelay) and import it into SearchBook.tsx, then change the
Promise.all call that currently awaits getBookDetail(isbn),
getRecruitingRooms(isbn), minLoadingTime to use sleep(500) (and update the other
occurrence around lines 120-124 similarly), and also replace the same pattern in
ParticipatedGroupDetail.tsx and other files to use the new utility to avoid
duplication.

In `@src/shared/ui/Skeleton/base/Skeleton.styled.ts`:
- Around line 54-56: SkeletonTextLine duplicates the height interpolation
already handled by SkeletonBase; remove the redundant height handling from
SkeletonTextLine and instead rely on SkeletonBase's logic while only overriding
the default value (from 20px to 16px) via a single source of truth—e.g., pass a
default prop or theme/variable used by SkeletonBase—so update SkeletonTextLine
to stop re-declaring height and supply the desired default height through
SkeletonBase's prop/default mechanism (reference SkeletonTextLine and
SkeletonBase and the height prop).
- Around line 22-36: The SkeletonBase styled component currently uses display:
inline-block which can cause multiple skeletons to flow horizontally in
non-flex/grid parents; update SkeletonBase to use display: block so it behaves
as a predictable full-width block element in plain containers, keeping the
existing width/height/borderRadius logic and animations intact (locate
SkeletonBase in src/shared/ui/Skeleton/base/Skeleton.styled.ts and replace the
display rule from inline-block to block).

In `@src/shared/ui/Skeleton/base/Skeleton.tsx`:
- Around line 40-44: The base and box APIs are redundant: SkeletonBox is just a
styled(SkeletonBase) empty extension and Skeleton.Box duplicates functionality;
make the rectangular API explicit by keeping Skeleton.Box (Skeleton.Box
component) as the public export and restrict the base Skeleton (Skeleton and
SkeletonBase) to internal use only—remove or stop exporting the top-level
Skeleton component, keep SkeletonBox/Skeleton.Box as the single public rectangle
API, update any export lists and consume-sites to import Skeleton.Box instead of
Skeleton, and add a deprecation note/alias if needed to preserve backwards
compatibility.

In `@src/shared/ui/Skeleton/group/BannerSkeleton.tsx`:
- Around line 15-20: The inline marginTop in BannerSkeleton.tsx should be moved
to a styled-component in GroupDetailSkeleton.styled.ts for consistency; create a
new styled export (e.g., BannerSkeletonWrapper or reuse an existing pattern like
MetaSkeletonRow/TagSkeletonRow), apply the margin-top: 20px (and the inner 8px
spacer as another styled div or apply a margin-top on a new InnerWrapper),
export and import that styled into BannerSkeleton.tsx, then replace the two
inline-styled divs with the new styled components so no inline styles remain.

In `@src/shared/ui/Skeleton/group/GroupDetailSkeleton.styled.ts`:
- Around line 4-14: Duplicate layout styles exist across SkeletonWrapper,
ParticipatedWrapper, and Wrapper; extract a shared styled-component (e.g.,
CommonWrapper or BaseLayout) that contains the shared rules (display:flex;
position:relative; flex-direction:column; align-items:center; min-width:320px;
max-width:767px; min-height:100vh; margin:0 auto;
background-color:${colors.black.main}); replace SkeletonWrapper,
ParticipatedWrapper, and Wrapper to extend or wrap this new CommonWrapper (via
styled(CommonWrapper) or by composition) and keep any unique styles in each
specific component so duplication is removed but unique overrides remain.

In `@src/shared/ui/Skeleton/group/HotTopicSectionSkeleton.tsx`:
- Around line 15-22: HotTopicSectionSkeleton currently uses inline style objects
on the outer wrapper and two inner divs; extract those into styled-components
(e.g., create StyledHotTopicWrapper, StyledTitleWrapper, StyledListWrapper in
HotTopicSectionSkeleton.styled.ts or reuse GroupDetailSkeleton.styled) and
replace the inline divs in the HotTopicSectionSkeleton component with these
styled components, preserving the same CSS (padding: 16px 0; margin-bottom:
16px; and display:flex; flex-direction:column; gap:8px;) and keep existing
Skeleton children and props unchanged.

In `@src/shared/ui/Skeleton/members/MemberListSkeleton.tsx`:
- Around line 16-18: Remove the unnecessary wrapper <div> around Skeleton.Circle
in the MemberListSkeleton component: because ProfileSection already applies
display:flex, align-items:center and gap:8px, place Skeleton.Circle directly as
a child (remove the extra div node) so the DOM is simpler and layout remains
unchanged; update the JSX in MemberListSkeleton (where Skeleton.Circle is
rendered) to render Skeleton.Circle inline and verify styling via ProfileSection
still centers and gaps correctly.

In `@src/shared/ui/Skeleton/memory/RecordItemSkeleton.tsx`:
- Around line 12-36: The three repeated inline divs inside the
RecordItemSkeleton (the ones wrapping Skeleton.Box + Skeleton.Text in
ActionSection and the circle wrapper in UserSection) should be replaced with a
lightweight styled component to remove duplicated inline styles; create a styled
component (e.g., IconRow or InlineRow) and use it in place of the divs in
Container/UserSection/ActionSection so styles like display:flex, gap, alignItems
and marginRight are centralized and applied consistently across the component.

In `@src/shared/ui/Skeleton/search/RecentSearchTabsSkeleton.tsx`:
- Around line 4-15: RecentSearchTabsSkeleton currently hardcodes the Title text
("최근 검색어"), causing drift if RecentSearchTabs' title changes; update
RecentSearchTabsSkeleton to avoid literal text by either rendering the same
shared constant used by RecentSearchTabs (import the title constant) or
rendering a Skeleton placeholder for the title (replace Title's literal children
with a Skeleton.Box/Skeleton.Text), targeting the RecentSearchTabsSkeleton
component and the Title element so the skeleton stays in sync with the real
component.

In `@src/shared/ui/Skeleton/searchBook/BookItemSkeleton.tsx`:
- Around line 18-23: 현재 BookItemSkeleton.tsx에서 BookInfo 내부에 bare <div style={{
marginTop: '8px' }}>로 인라인 스타일을 사용하고 있어 styled-component 패턴과 불일치합니다; BookInfo 안의
세 번째 Skeleton.Text 상단 여백을 위해 inline div를 제거하고 대신 Skeleton.Text에 margin/top 스타일을
전달하거나(만약 Skeleton.Text가 style prop을 지원하지 않으면 SkeletonProps에 style?:
React.CSSProperties를 추가) 또는 BookInfo 내부에 래퍼 styled-component(예: InfoGap 또는
StyledSkeletonWrap)를 만들어 margin-top을 적용하도록 변경하세요; 참조할 식별자는 BookItemSkeleton.tsx,
BookInfo, Skeleton.Text입니다.

---

ℹ️ Review info

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Jira integration is disabled

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between fa6d152 and 56a615e.

📒 Files selected for processing (61)

• src/components/feed/MyFeed.tsx
• src/components/search/MostSearchedBooks.tsx
• src/pages/feed/Feed.styled.ts
• src/pages/feed/Feed.tsx
• src/pages/feed/FeedDetailPage.styled.ts
• src/pages/feed/FeedDetailPage.tsx
• src/pages/feed/FollowerListPage.tsx
• src/pages/feed/MyFeedPage.tsx
• src/pages/feed/OtherFeedPage.tsx
• src/pages/groupDetail/GroupDetail.tsx
• src/pages/groupDetail/ParticipatedGroupDetail.tsx
• src/pages/groupMembers/GroupMembers.tsx
• src/pages/groupSearch/GroupSearch.tsx
• src/pages/memory/Memory.tsx
• src/pages/mypage/Mypage.styled.ts
• src/pages/mypage/Mypage.tsx
• src/pages/mypage/SavePage.styled.ts
• src/pages/mypage/SavePage.tsx
• src/pages/search/Search.tsx
• src/pages/searchBook/SearchBook.tsx
• src/pages/today-words/TodayWords.tsx
• src/shared/ui/Skeleton/README.md
• src/shared/ui/Skeleton/base/Skeleton.styled.ts
• src/shared/ui/Skeleton/base/Skeleton.tsx
• src/shared/ui/Skeleton/base/index.ts
• src/shared/ui/Skeleton/feed/FeedPostSkeleton.styled.ts
• src/shared/ui/Skeleton/feed/FeedPostSkeleton.tsx
• src/shared/ui/Skeleton/feed/OtherFeedSkeleton.styled.ts
• src/shared/ui/Skeleton/feed/OtherFeedSkeleton.tsx
• src/shared/ui/Skeleton/feed/ProfileSkeleton.styled.ts
• src/shared/ui/Skeleton/feed/ProfileSkeleton.tsx
• src/shared/ui/Skeleton/feed/TotalBarSkeleton.styled.ts
• src/shared/ui/Skeleton/feed/TotalBarSkeleton.tsx
• src/shared/ui/Skeleton/feed/UserProfileItemSkeleton.tsx
• src/shared/ui/Skeleton/feed/index.ts
• src/shared/ui/Skeleton/group/BannerSkeleton.tsx
• src/shared/ui/Skeleton/group/BookSkeleton.tsx
• src/shared/ui/Skeleton/group/CommentSectionSkeleton.tsx
• src/shared/ui/Skeleton/group/GroupBookSectionSkeleton.tsx
• src/shared/ui/Skeleton/group/GroupCardSkeleton.tsx
• src/shared/ui/Skeleton/group/GroupDetailSkeleton.styled.ts
• src/shared/ui/Skeleton/group/GroupDetailSkeleton.tsx
• src/shared/ui/Skeleton/group/HotTopicSectionSkeleton.tsx
• src/shared/ui/Skeleton/group/RecordSectionSkeleton.tsx
• src/shared/ui/Skeleton/group/index.ts
• src/shared/ui/Skeleton/index.ts
• src/shared/ui/Skeleton/members/MemberListSkeleton.tsx
• src/shared/ui/Skeleton/members/index.ts
• src/shared/ui/Skeleton/memory/RecordItemSkeleton.tsx
• src/shared/ui/Skeleton/memory/index.ts
• src/shared/ui/Skeleton/search/MostSearchedBooksSkeleton.tsx
• src/shared/ui/Skeleton/search/RecentSearchTabsSkeleton.tsx
• src/shared/ui/Skeleton/search/index.ts
• src/shared/ui/Skeleton/searchBook/BookDetailSkeleton.tsx
• src/shared/ui/Skeleton/searchBook/BookItemSkeleton.tsx
• src/shared/ui/Skeleton/searchBook/index.ts
• src/shared/ui/Skeleton/todaywords/DateDividerSkeleton.tsx
• src/shared/ui/Skeleton/todaywords/MessageItemSkeleton.tsx
• src/shared/ui/Skeleton/todaywords/MessageListSkeleton.styled.ts
• src/shared/ui/Skeleton/todaywords/MessageListSkeleton.tsx
• src/shared/ui/Skeleton/todaywords/index.ts

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

# FeedDetailPage.tsx 파일 확인
fd "FeedDetailPage.tsx" --type f

Repository: THIP-TextHip/THIP-Web

Length of output: 98

---

🏁 Script executed:

# 파일 크기 확인
wc -l src/pages/feed/FeedDetailPage.tsx

Repository: THIP-TextHip/THIP-Web

Length of output: 102

---

🏁 Script executed:

# FeedDetailPage.tsx 파일 내용 확인
cat -n src/pages/feed/FeedDetailPage.tsx

Repository: THIP-TextHip/THIP-Web

Length of output: 8364

---

실패 경로에서 최소 로딩 시간이 보장되지 않습니다.

69-74줄의 Promise.all 내부에 minLoadingTime을 포함하면, API 중 하나가 실패할 때 Promise.all이 즉시 거부되어 500ms를 기다리지 않습니다. 에러 케이스에서도 최소 500ms 동안 skeleton을 표시하려면 minLoadingTime을 Promise.all 외부로 분리해야 합니다.

수정 예시

        const minLoadingTime = new Promise(resolve => setTimeout(resolve, 500));
-       const [feedResponse, commentsResponse] = await Promise.all([
+       const [feedResponse, commentsResponse] = await Promise.all([
          getFeedDetail(Number(feedId)),
          getComments(Number(feedId), { postType: 'FEED' }),
-         minLoadingTime,
-       ]);
+       ]);
+       await minLoadingTime;

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/feed/FeedDetailPage.tsx` around lines 69 - 74, The current
Promise.all([...getFeedDetail, getComments, minLoadingTime]) causes the 500ms
minLoadingTime to be skipped if any API rejects; extract minLoadingTime (const
minLoadingTime = new Promise(resolve => setTimeout(resolve, 500))) outside
Promise.all and ensure you always await it even on error — e.g., await
Promise.all([getFeedDetail(...), getComments(...)]) inside a try/catch (or use
Promise.allSettled for both API calls) and in a finally block await
minLoadingTime before updating state or hiding the skeleton; update references
to feedResponse/commentsResponse accordingly to handle settled/rejected results.

[ljh130334]

20856eb

[coderabbitai]

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Fetch the commit details to see what changes were made
gh api repos/THIP-TextHip/THIP-Web/commits/20856eb6d329bed7f2639945492053acf678f755 --jq '.commit.message, .files[] | select(.filename == "src/pages/feed/FeedDetailPage.tsx") | .patch'

Length of output: 57

---

🏁 Script executed:

#!/bin/bash
# Fetch the commit message
echo "=== Commit Message ==="
gh api repos/THIP-TextHip/THIP-Web/commits/20856eb6d329bed7f2639945492053acf678f755 --jq '.commit.message'

echo -e "\n=== Changes to FeedDetailPage.tsx ==="
# Fetch the patch for FeedDetailPage.tsx
gh api repos/THIP-TextHip/THIP-Web/commits/20856eb6d329bed7f2639945492053acf678f755 --jq '.files[] | select(.filename == "src/pages/feed/FeedDetailPage.tsx") | .patch'

Length of output: 499

---

@ljh130334 커밋 확인했습니다! 성공 경로에 대한 개선은 잘 되었지만, 에러 경로에서 여전히 최소 로딩 시간이 보장되지 않습니다.

현재 코드 흐름을 보면:

• ✅ 성공 시: Promise.all 완료 → await minLoadingTime 대기 → 데이터 설정
• ❌ 실패 시: Promise.all 즉시 reject → catch 블록으로 점프 (69줄의 await minLoadingTime을 건너뜀)

API가 100ms만에 실패하면 skeleton이 100ms만 표시되고 바로 에러 상태로 전환됩니다.

완전한 해결 방법:

      try {
        setLoading(true);

        const minLoadingTime = new Promise(resolve => setTimeout(resolve, 500));
        const [feedResponse, commentsResponse] = await Promise.all([
          getFeedDetail(Number(feedId)),
          getComments(Number(feedId), { postType: 'FEED' }),
        ]);
        await minLoadingTime;

        setFeedData(feedResponse.data);
        setCommentList(commentsResponse.data.commentList);
        setError(null);
      } catch (err) {
+       await minLoadingTime;
        console.error('피드 상세 정보 또는 댓글 로드 실패:', err);
        setError('피드 정보를 불러오는데 실패했습니다.');
      } finally {
        setLoading(false);
      }

이렇게 하면 에러가 발생해도 최소 500ms 동안 skeleton을 표시할 수 있습니다.

[coderabbitai]

Caution

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

⚠️ Outside diff range comments (1)

src/pages/groupSearch/GroupSearch.tsx (1)

50-59: ⚠️ Potential issue | 🟡 Minor

마운트 시 최근 검색어 조회가 중복 호출됩니다.

Line [51]과 Line [56]에서 초기 렌더 시 fetchRecentSearches가 2번 실행됩니다. 불필요한 네트워크 호출/상태 경합을 줄이기 위해 한 경로로 통합하는 게 좋습니다.

🔧 제안 수정안

-  useEffect(() => {
-    fetchRecentSearches();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   useEffect(() => {
     if (searchStatus === 'idle') {
       fetchRecentSearches();
     }
   }, [searchStatus]);

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/groupSearch/GroupSearch.tsx` around lines 50 - 59,
fetchRecentSearches is being invoked twice on mount because there's a useEffect
with an empty dependency array calling fetchRecentSearches and a second
useEffect that calls fetchRecentSearches when searchStatus === 'idle', causing
duplicate network calls; consolidate into a single control path by removing the
unconditional mount call and relying on the searchStatus-driven effect (or vice
versa) — update the effects around fetchRecentSearches and searchStatus so only
one effect (either the empty-deps useEffect or the [searchStatus] useEffect that
checks for 'idle') triggers the initial fetch to eliminate the duplicate call.

♻️ Duplicate comments (3)

src/pages/searchBook/SearchBook.tsx (2)

247-258: if (error) 블록 내부의 폴백 문자열이 도달 불가능한 dead code입니다.

Line 254에서 error는 이미 truthy가 보장되므로 || '책 정보를 찾을 수 없습니다.'는 절대 실행되지 않습니다.

🧹 제안

-          {error || '책 정보를 찾을 수 없습니다.'}
+          {error}

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/searchBook/SearchBook.tsx` around lines 247 - 258, The JSX inside
the if (error) branch contains a dead fallback string ("|| '책 정보를 찾을 수 없습니다.'")
because the clause only runs when error is truthy; update the rendering in
SearchBook.tsx to remove the unreachable fallback or change the condition/render
logic so the fallback is shown when error is falsy—e.g., either remove "|| '책
정보를 찾을 수 없습니다.'" from the block that returns Wrapper/Header/IconButton (using
symbols error, Wrapper, Header, IconButton, leftArrow, handleBackButton), or
replace the top-level conditional with a ternary (error ? error : '책 정보를 찾을 수
없습니다.') so the fallback can be reached.

---

260-262: bookDetail이 null일 때 TopBackground가 빈 문자열 URL로 렌더링됩니다.

bookDetail?.imageUrl || ''는 로딩 중에 빈 url("") CSS를 생성하여 불필요한 네트워크 요청이나 콘솔 경고를 유발할 수 있습니다.

♻️ 제안: 조건부 렌더링

-      <TopBackground bookImgUrl={bookDetail?.imageUrl || ''} />
+      {bookDetail && <TopBackground bookImgUrl={bookDetail.imageUrl} />}

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/searchBook/SearchBook.tsx` around lines 260 - 262, The
TopBackground is currently rendered with bookImgUrl={bookDetail?.imageUrl ||
''}, causing an empty url("") when bookDetail is null; change this to
conditionally render TopBackground only when bookDetail?.imageUrl is truthy (use
a guard around the TopBackground component) so you pass a real image URL
(bookDetail.imageUrl) or avoid rendering it entirely when absent; update the JSX
near Wrapper/TopBackground references to use this conditional rendering pattern
to prevent empty CSS urls and unnecessary network/console noise.

src/pages/groupSearch/GroupSearch.tsx (1)

380-387: ⚠️ Potential issue | 🟡 Minor

최근 검색어 삭제 콜백에 예외 처리가 필요합니다.

Line [383]의 deleteRecentSearch가 throw할 경우 현재 핸들러에서 unhandled rejection이 발생할 수 있습니다.

🔧 제안 수정안

                 handleDelete={async (term: string) => {
                   const x = recentSearches.find(i => i.searchTerm === term);
                   if (!x) return;
-                  const res = await deleteRecentSearch(x.recentSearchId);
-                  if (res.isSuccess) {
-                    await fetchRecentSearches();
+                  try {
+                    const res = await deleteRecentSearch(x.recentSearchId);
+                    if (res.isSuccess) {
+                      await fetchRecentSearches();
+                    }
+                  } catch (error) {
+                    console.error('최근 검색어 삭제 오류:', error);
                   }
                 }}

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/groupSearch/GroupSearch.tsx` around lines 380 - 387, The
handleDelete callback currently calls deleteRecentSearch asynchronously without
catching exceptions; wrap the async body of handleDelete in a try/catch so any
thrown error from deleteRecentSearch (or subsequent await fetchRecentSearches)
is caught and handled (e.g., log via console/error logger and optionally surface
a user-facing error), ensure you still return/exit early if
recentSearches.find(...) returns undefined, and keep calling fetchRecentSearches
only on successful delete responses (res.isSuccess) inside the try block to
avoid unhandled promise rejections.

🧹 Nitpick comments (1)

src/pages/searchBook/SearchBook.tsx (1)

84-89: minLoadingTime에 명시적 Promise<void> 타입을 지정하세요.

new Promise(resolve => setTimeout(resolve, 500))는 TypeScript가 Promise<unknown>으로 추론합니다. 의도를 명확히 하고 Promise.all의 반환 타입 추론을 깔끔하게 유지하려면 Promise<void>를 명시하는 것이 좋습니다.

♻️ 제안: 명시적 타입 어노테이션

-        const minLoadingTime = new Promise(resolve => setTimeout(resolve, 500));
+        const minLoadingTime = new Promise<void>(resolve => setTimeout(resolve, 500));

(Line 120 동일하게 적용)

-      const minLoadingTime = new Promise(resolve => setTimeout(resolve, 500));
+      const minLoadingTime = new Promise<void>(resolve => setTimeout(resolve, 500));

Also applies to: 120-124

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/searchBook/SearchBook.tsx` around lines 84 - 89, The temporary
loading timer promise minLoadingTime is inferred as Promise<unknown>; update its
declaration to explicitly type it as Promise<void> (e.g., const minLoadingTime:
Promise<void> = new Promise(resolve => setTimeout(resolve, 500))); do the same
for the other instance around lines 120-124 so Promise.all([getBookDetail(isbn),
getRecruitingRooms(isbn), minLoadingTime]) keeps correct type inference for
getBookDetail and getRecruitingRooms.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In `@src/pages/groupSearch/GroupSearch.tsx`:
- Around line 50-59: fetchRecentSearches is being invoked twice on mount because
there's a useEffect with an empty dependency array calling fetchRecentSearches
and a second useEffect that calls fetchRecentSearches when searchStatus ===
'idle', causing duplicate network calls; consolidate into a single control path
by removing the unconditional mount call and relying on the searchStatus-driven
effect (or vice versa) — update the effects around fetchRecentSearches and
searchStatus so only one effect (either the empty-deps useEffect or the
[searchStatus] useEffect that checks for 'idle') triggers the initial fetch to
eliminate the duplicate call.

---

Duplicate comments:
In `@src/pages/groupSearch/GroupSearch.tsx`:
- Around line 380-387: The handleDelete callback currently calls
deleteRecentSearch asynchronously without catching exceptions; wrap the async
body of handleDelete in a try/catch so any thrown error from deleteRecentSearch
(or subsequent await fetchRecentSearches) is caught and handled (e.g., log via
console/error logger and optionally surface a user-facing error), ensure you
still return/exit early if recentSearches.find(...) returns undefined, and keep
calling fetchRecentSearches only on successful delete responses (res.isSuccess)
inside the try block to avoid unhandled promise rejections.

In `@src/pages/searchBook/SearchBook.tsx`:
- Around line 247-258: The JSX inside the if (error) branch contains a dead
fallback string ("|| '책 정보를 찾을 수 없습니다.'") because the clause only runs when
error is truthy; update the rendering in SearchBook.tsx to remove the
unreachable fallback or change the condition/render logic so the fallback is
shown when error is falsy—e.g., either remove "|| '책 정보를 찾을 수 없습니다.'" from the
block that returns Wrapper/Header/IconButton (using symbols error, Wrapper,
Header, IconButton, leftArrow, handleBackButton), or replace the top-level
conditional with a ternary (error ? error : '책 정보를 찾을 수 없습니다.') so the fallback
can be reached.
- Around line 260-262: The TopBackground is currently rendered with
bookImgUrl={bookDetail?.imageUrl || ''}, causing an empty url("") when
bookDetail is null; change this to conditionally render TopBackground only when
bookDetail?.imageUrl is truthy (use a guard around the TopBackground component)
so you pass a real image URL (bookDetail.imageUrl) or avoid rendering it
entirely when absent; update the JSX near Wrapper/TopBackground references to
use this conditional rendering pattern to prevent empty CSS urls and unnecessary
network/console noise.

---

Nitpick comments:
In `@src/pages/searchBook/SearchBook.tsx`:
- Around line 84-89: The temporary loading timer promise minLoadingTime is
inferred as Promise<unknown>; update its declaration to explicitly type it as
Promise<void> (e.g., const minLoadingTime: Promise<void> = new Promise(resolve
=> setTimeout(resolve, 500))); do the same for the other instance around lines
120-124 so Promise.all([getBookDetail(isbn), getRecruitingRooms(isbn),
minLoadingTime]) keeps correct type inference for getBookDetail and
getRecruitingRooms.

---

ℹ️ Review info

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Jira integration is disabled

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 56a615e and 4a62514.

📒 Files selected for processing (2)

• src/pages/groupSearch/GroupSearch.tsx
• src/pages/searchBook/SearchBook.tsx

[coderabbitai]

Actionable comments posted: 2

Caution

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

⚠️ Outside diff range comments (1)

src/pages/groupDetail/GroupDetail.tsx (1)

56-56: ⚠️ Potential issue | 🟡 Minor

isJoining이 null인 채로 한 프레임 렌더링되어 버튼 텍스트가 순간적으로 '참여하기'로 표시됩니다.

isJoining은 useEffect로 roomData 변화에 반응해 설정되지만, React의 효과는 페인트 이후에 실행됩니다. 따라서 isLoading || !roomData 가드가 해제된 직후 한 프레임 동안 isJoining === null인 상태로 렌더링되어 buttonProps가 실제로 참여 중인 사용자에게도 '참여하기'를 반환하는 순간이 존재합니다.

isJoining을 fetch 완료 시점에 바로 설정하면 이 문제를 제거할 수 있습니다.

🐛 제안 수정

-  useEffect(() => {
-    if (roomData) {
-      setIsJoining(roomData.isJoining);
-    }
-  }, [roomData]);

fetchRoomDetail 내부에서 직접 설정:

        if (response.isSuccess) {
          setRoomData(response.data);
+         setIsJoining(response.data.isJoining);
        } else {

Also applies to: 126-130, 287-292

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/groupDetail/GroupDetail.tsx` at line 56, The transient render
showing '참여하기' happens because isJoining starts as null and is set in a
useEffect after paint; to fix, initialize isJoining to a non-null default and
set it immediately when room data is fetched: change the useState for isJoining
to a non-null default (e.g., false) and move the logic that determines whether
the current user is joining into fetchRoomDetail so it calls setIsJoining(...)
right after roomData is retrieved; remove or stop relying on the separate
useEffect that sets isJoining based on roomData and ensure buttonProps reads the
updated isJoining set by fetchRoomDetail.

♻️ Duplicate comments (3)

src/pages/searchBook/SearchBook.tsx (2)

247-258: Line 254: error 가드 내부 폴백 문자열은 dead code입니다.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/searchBook/SearchBook.tsx` around lines 247 - 258, The current if
(error) block renders {error || '책 정보를 찾을 수 없습니다.'}, making the fallback string
dead code; change the rendering logic so the fallback displays when error is
falsy. For example, compute a message const message = error || '책 정보를 찾을 수
없습니다.' (or use null-coalescing) and render {message} inside the Wrapper, or
invert the condition to if (!error) show the fallback and if (error) show the
error; update the JSX that uses Wrapper, Header, IconButton, leftArrow and
handleBackButton to render message accordingly.

---

260-262: TopBackground가 로딩 중에 빈 문자열 URL로 렌더링됩니다.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/searchBook/SearchBook.tsx` around lines 260 - 262, TopBackground is
rendered with an empty string while bookDetail is loading; change to render
TopBackground only when a valid image URL exists by wrapping the component in a
conditional that checks bookDetail?.imageUrl (or pass undefined/null instead of
''), e.g., guard the TopBackground render in the return so
TopBackground(bookImgUrl={bookDetail.imageUrl}) only mounts when
bookDetail?.imageUrl is truthy; refer to TopBackground and bookDetail usages in
SearchBook component and the surrounding Wrapper.

src/pages/groupSearch/GroupSearch.tsx (1)

380-387: ⚠️ Potential issue | 🟡 Minor

최근 검색어 삭제 콜백에 예외 처리가 필요합니다.

Line 383의 deleteRecentSearch는 실패 시 throw 가능한데, 현재 handleDelete에서 try/catch가 없어 unhandled rejection이 발생할 수 있습니다.

🔧 제안 수정안

                 handleDelete={async (term: string) => {
                   const x = recentSearches.find(i => i.searchTerm === term);
                   if (!x) return;
-                  const res = await deleteRecentSearch(x.recentSearchId);
-                  if (res.isSuccess) {
-                    await fetchRecentSearches();
+                  try {
+                    const res = await deleteRecentSearch(x.recentSearchId);
+                    if (res.isSuccess) {
+                      await fetchRecentSearches();
+                    }
+                  } catch (error) {
+                    console.error('최근 검색어 삭제 오류:', error);
                   }
                 }}

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/groupSearch/GroupSearch.tsx` around lines 380 - 387, The
handleDelete callback risks unhandled rejections because deleteRecentSearch can
throw; wrap the async work in a try/catch inside the handleDelete passed to the
component (the arrow function referencing recentSearches, deleteRecentSearch,
fetchRecentSearches and recentSearchId), call await
deleteRecentSearch(x.recentSearchId) inside the try, on success call await
fetchRecentSearches(), and in the catch log the error and/or surface a
user-facing message (e.g., showToast or processLogger) so failures are handled
gracefully.

🧹 Nitpick comments (4)

src/pages/searchBook/SearchBook.tsx (1)

120-124: 단일 요소 Promise.all은 불필요합니다.

getFeedsByIsbn 하나만 감싸는 Promise.all과 배열 구조 분해 const [res]는 의미 없는 복잡도를 추가합니다. 단순한 await으로 충분합니다.

♻️ 제안: 단순 await으로 변경

-      const [res] = await Promise.all([
-        getFeedsByIsbn(isbn, toFeedSort(selectedFilter), null),
-      ]);
+      const res = await getFeedsByIsbn(isbn, toFeedSort(selectedFilter), null);

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/searchBook/SearchBook.tsx` around lines 120 - 124, The code uses
Promise.all with a single element and array destructuring (const [res] = await
Promise.all([ getFeedsByIsbn(isbn, toFeedSort(selectedFilter), null) ])), which
is unnecessary; replace it with a direct await call to getFeedsByIsbn (e.g.,
const res = await getFeedsByIsbn(isbn, toFeedSort(selectedFilter), null)) and
keep the existing minLoadingTime await, ensuring references to minLoadingTime,
getFeedsByIsbn, toFeedSort, selectedFilter, and isbn are preserved and no array
destructuring is used.

src/pages/groupSearch/GroupSearch.tsx (1)

93-105: 최소 지연 대기 로직을 Promise.all 한 번으로 통일해도 좋겠습니다.

현재 동작은 맞지만(await minLoadingTime 별도 대기), fetchRecentSearches와 패턴을 통일하면 의도 파악이 더 쉬워집니다.

🔧 제안 수정안

       try {
         const isFinalized = status === 'searched';
         const minLoadingTime = new Promise(resolve => setTimeout(resolve, 500));
-        const [res] = await Promise.all([
+        const [res] = await Promise.all([
           getSearchRooms(
             term.trim(),
             sortKey,
             undefined,
             isFinalized,
             categoryParam,
             isAllCategory,
           ),
+          minLoadingTime,
         ]);
-        await minLoadingTime;
         if (res.isSuccess) {

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/groupSearch/GroupSearch.tsx` around lines 93 - 105, Unify the
minimum loading delay with the fetch by including the minLoadingTime promise in
the same Promise.all call instead of awaiting it separately: replace the current
separate minLoadingTime creation + awaiting with Promise.all([
getSearchRooms(...), minLoadingTime ]) and destructure the getSearchRooms result
(e.g., const [res] = await Promise.all([...]) or const [res] = ... depending on
order) so the logic in getSearchRooms, minLoadingTime, and the subsequent if
(res.isSuccess) remains unchanged (mirror the fetchRecentSearches pattern).

src/pages/groupDetail/ParticipatedGroupDetail.tsx (1)

82-86: Promise.all 배열에 minLoadingTime을 포함하세요.

현재 코드에서 Promise.all은 getRoomPlaying 하나만 포함하고, minLoadingTime은 별도로 await합니다. 동작은 동일하지만, Promise.all의 의도가 불명확합니다. minLoadingTime을 배열 안에 함께 넣는 것이 병렬 실행 패턴의 관용적인 표현입니다.

♻️ 제안 수정

-        const minLoadingTime = new Promise(resolve => setTimeout(resolve, 500));
-        const [response] = await Promise.all([
-          getRoomPlaying(parseInt(roomId)),
-        ]);
-        await minLoadingTime;
+        const [response] = await Promise.all([
+          getRoomPlaying(parseInt(roomId)),
+          new Promise(resolve => setTimeout(resolve, 500)),
+        ]);

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/groupDetail/ParticipatedGroupDetail.tsx` around lines 82 - 86, The
current code creates minLoadingTime and awaits it separately after awaiting
Promise.all([getRoomPlaying(parseInt(roomId))]); change this to run both in
parallel by moving minLoadingTime into the Promise.all call so Promise.all([
getRoomPlaying(parseInt(roomId)), minLoadingTime ]) is awaited together (and
remove the separate await minLoadingTime); this keeps the existing response
extraction from the array returned by Promise.all while ensuring the artificial
minimum loading delay runs in parallel with getRoomPlaying.

src/pages/groupDetail/GroupDetail.tsx (1)

93-97: Promise.all에 단일 요소만 포함되어 minLoadingTime이 배열 밖에서 따로 await되고 있습니다.

minLoadingTime은 타이머 시작 후 Promise.all과 별개로 await되므로 동작은 올바르지만, Promise.all이 단일 원소만 감싸고 있어 의도가 모호합니다. minLoadingTime을 배열 안에 포함시키는 것이 관용적이며 가독성도 높습니다.

♻️ 제안 리팩터

-        const minLoadingTime = new Promise(resolve => setTimeout(resolve, 500));
-        const [response] = await Promise.all([
-          getRoomDetail(Number(roomId)),
-        ]);
-        await minLoadingTime;
+        const [response] = await Promise.all([
+          getRoomDetail(Number(roomId)),
+          new Promise(resolve => setTimeout(resolve, 500)),
+        ]);

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/groupDetail/GroupDetail.tsx` around lines 93 - 97, The code
currently awaits minLoadingTime separately, which is confusing because
Promise.all only contains getRoomDetail; update the await to include
minLoadingTime inside the Promise.all call so both promises are awaited together
(e.g., call Promise.all([ getRoomDetail(Number(roomId)), minLoadingTime ]) and
adjust destructuring to capture getRoomDetail's result (keep const [response] =
...) and remove the separate await minLoadingTime; reference: minLoadingTime,
getRoomDetail, roomId, response.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/components/search/MostSearchedBooks.tsx`:
- Around line 30-35: The current fail-fast Promise.all can skip awaiting
minLoadingTime when getMostSearchedBooks() rejects; change the logic so
minLoadingTime is always awaited before you update loading state or render
error: start minLoadingTime as now, run the fetch using Promise.allSettled (or
wrap getMostSearchedBooks() into a promise that never rejects), then await
minLoadingTime before handling results; in practice replace Promise.all([...])
with Promise.allSettled([getMostSearchedBooks()]) (referencing
getMostSearchedBooks, minLoadingTime and setIsLoading in MostSearchedBooks.tsx),
then after await minLoadingTime inspect the settled result (response.status ===
'fulfilled' ? response.value : handle error) and only then call
setIsLoading(false) or set error state so the 500ms skeleton is always honored.

In `@src/pages/groupDetail/ParticipatedGroupDetail.tsx`:
- Around line 67-69: The back-navigation behavior is inconsistent:
handleBackClick uses navigate(-1) while handleBackButton uses navigate('/group')
and their names are confusing; pick the intended behavior (either always go to
'/group' or always go back one step), replace the other handler so both error
and normal/loading states call the same function (e.g., unify into a single
handler name like handleBack or handleNavigateBack), update all onLeftClick
usages (including the error-state onLeftClick) to use that unified handler, and
remove the redundant handler to avoid duplicate implementations.

---

Outside diff comments:
In `@src/pages/groupDetail/GroupDetail.tsx`:
- Line 56: The transient render showing '참여하기' happens because isJoining starts
as null and is set in a useEffect after paint; to fix, initialize isJoining to a
non-null default and set it immediately when room data is fetched: change the
useState for isJoining to a non-null default (e.g., false) and move the logic
that determines whether the current user is joining into fetchRoomDetail so it
calls setIsJoining(...) right after roomData is retrieved; remove or stop
relying on the separate useEffect that sets isJoining based on roomData and
ensure buttonProps reads the updated isJoining set by fetchRoomDetail.

---

Duplicate comments:
In `@src/pages/groupSearch/GroupSearch.tsx`:
- Around line 380-387: The handleDelete callback risks unhandled rejections
because deleteRecentSearch can throw; wrap the async work in a try/catch inside
the handleDelete passed to the component (the arrow function referencing
recentSearches, deleteRecentSearch, fetchRecentSearches and recentSearchId),
call await deleteRecentSearch(x.recentSearchId) inside the try, on success call
await fetchRecentSearches(), and in the catch log the error and/or surface a
user-facing message (e.g., showToast or processLogger) so failures are handled
gracefully.

In `@src/pages/searchBook/SearchBook.tsx`:
- Around line 247-258: The current if (error) block renders {error || '책 정보를 찾을
수 없습니다.'}, making the fallback string dead code; change the rendering logic so
the fallback displays when error is falsy. For example, compute a message const
message = error || '책 정보를 찾을 수 없습니다.' (or use null-coalescing) and render
{message} inside the Wrapper, or invert the condition to if (!error) show the
fallback and if (error) show the error; update the JSX that uses Wrapper,
Header, IconButton, leftArrow and handleBackButton to render message
accordingly.
- Around line 260-262: TopBackground is rendered with an empty string while
bookDetail is loading; change to render TopBackground only when a valid image
URL exists by wrapping the component in a conditional that checks
bookDetail?.imageUrl (or pass undefined/null instead of ''), e.g., guard the
TopBackground render in the return so
TopBackground(bookImgUrl={bookDetail.imageUrl}) only mounts when
bookDetail?.imageUrl is truthy; refer to TopBackground and bookDetail usages in
SearchBook component and the surrounding Wrapper.

---

Nitpick comments:
In `@src/pages/groupDetail/GroupDetail.tsx`:
- Around line 93-97: The code currently awaits minLoadingTime separately, which
is confusing because Promise.all only contains getRoomDetail; update the await
to include minLoadingTime inside the Promise.all call so both promises are
awaited together (e.g., call Promise.all([ getRoomDetail(Number(roomId)),
minLoadingTime ]) and adjust destructuring to capture getRoomDetail's result
(keep const [response] = ...) and remove the separate await minLoadingTime;
reference: minLoadingTime, getRoomDetail, roomId, response.

In `@src/pages/groupDetail/ParticipatedGroupDetail.tsx`:
- Around line 82-86: The current code creates minLoadingTime and awaits it
separately after awaiting Promise.all([getRoomPlaying(parseInt(roomId))]);
change this to run both in parallel by moving minLoadingTime into the
Promise.all call so Promise.all([ getRoomPlaying(parseInt(roomId)),
minLoadingTime ]) is awaited together (and remove the separate await
minLoadingTime); this keeps the existing response extraction from the array
returned by Promise.all while ensuring the artificial minimum loading delay runs
in parallel with getRoomPlaying.

In `@src/pages/groupSearch/GroupSearch.tsx`:
- Around line 93-105: Unify the minimum loading delay with the fetch by
including the minLoadingTime promise in the same Promise.all call instead of
awaiting it separately: replace the current separate minLoadingTime creation +
awaiting with Promise.all([ getSearchRooms(...), minLoadingTime ]) and
destructure the getSearchRooms result (e.g., const [res] = await
Promise.all([...]) or const [res] = ... depending on order) so the logic in
getSearchRooms, minLoadingTime, and the subsequent if (res.isSuccess) remains
unchanged (mirror the fetchRecentSearches pattern).

In `@src/pages/searchBook/SearchBook.tsx`:
- Around line 120-124: The code uses Promise.all with a single element and array
destructuring (const [res] = await Promise.all([ getFeedsByIsbn(isbn,
toFeedSort(selectedFilter), null) ])), which is unnecessary; replace it with a
direct await call to getFeedsByIsbn (e.g., const res = await
getFeedsByIsbn(isbn, toFeedSort(selectedFilter), null)) and keep the existing
minLoadingTime await, ensuring references to minLoadingTime, getFeedsByIsbn,
toFeedSort, selectedFilter, and isbn are preserved and no array destructuring is
used.

---

ℹ️ Review info

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Jira integration is disabled

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 4a62514 and 9239963.

📒 Files selected for processing (13)

• src/components/feed/MyFeed.tsx
• src/components/search/MostSearchedBooks.tsx
• src/pages/feed/FeedDetailPage.tsx
• src/pages/feed/FollowerListPage.tsx
• src/pages/feed/MyFeedPage.tsx
• src/pages/feed/OtherFeedPage.tsx
• src/pages/groupDetail/GroupDetail.tsx
• src/pages/groupDetail/ParticipatedGroupDetail.tsx
• src/pages/groupMembers/GroupMembers.tsx
• src/pages/groupSearch/GroupSearch.tsx
• src/pages/mypage/SavePage.tsx
• src/pages/search/Search.tsx
• src/pages/searchBook/SearchBook.tsx

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

• src/pages/feed/FeedDetailPage.tsx
• src/pages/mypage/SavePage.tsx
• src/pages/groupMembers/GroupMembers.tsx
• src/pages/search/Search.tsx
• src/pages/feed/MyFeedPage.tsx
• src/pages/feed/FollowerListPage.tsx

[coderabbitai]

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🌐 Web query:

Promise.all reject immediately vs Promise.allSettled wait for all promises

💡 Result:

• Promise.all(iterable): returns a promise that fulfills only if all input promises fulfill, but rejects as soon as the first one rejects (fail-fast). The rejection reason is from that first rejection. (mdn2.netlify.app)

  • Important: it does not cancel the other promises—those async operations may keep running; you just stop waiting for their results via that Promise.all call. (javascript.info)

• Promise.allSettled(iterable): returns a promise that waits until every input promise settles (fulfilled or rejected), then fulfills with an array like [{status:"fulfilled", value}, {status:"rejected", reason}, ...] in the original order. (developer.mozilla.org)

Citations:

• 1: https://mdn2.netlify.app/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all?utm_source=openai
• 2: https://javascript.info/task/promise-all-failure?utm_source=openai
• 3: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled?utm_source=openai

---

🏁 Script executed:

cd /repo && cat -n src/components/search/MostSearchedBooks.tsx | head -80

Repository: THIP-TextHip/THIP-Web

Length of output: 120

---

🏁 Script executed:

git ls-files | grep -i "MostSearchedBooks.tsx"

Repository: THIP-TextHip/THIP-Web

Length of output: 108

---

🏁 Script executed:

git ls-files | grep -E "search|components" | head -20

Repository: THIP-TextHip/THIP-Web

Length of output: 914

---

🏁 Script executed:

cat -n src/components/search/MostSearchedBooks.tsx

Repository: THIP-TextHip/THIP-Web

Length of output: 3329

---

🏁 Script executed:

git ls-files | grep -i "getMostSearchedBooks"

Repository: THIP-TextHip/THIP-Web

Length of output: 102

---

🏁 Script executed:

cat -n src/api/books/getMostSearchedBooks.ts 2>/dev/null || find . -name "*getMostSearchedBooks*" -type f

Repository: THIP-TextHip/THIP-Web

Length of output: 932

---

실패 경로에서 500ms 최소 로딩 시간이 보장되지 않습니다.

Promise.all은 첫 번째 Promise 거부 시 즉시 실패하므로(fail-fast), getMostSearchedBooks()이 에러를 throw하면 Line 34의 await minLoadingTime에 도달하지 않고 catch 블록으로 이동합니다. 결과적으로 setIsLoading(false)가 지연 없이 실행되어 스켈레톤이 500ms 미만으로 표시되고, 즉시 에러 메시지로 전환되어 화면 깜빡임이 발생합니다.

🔧 제안 수정안

-        const minLoadingTime = new Promise(resolve => setTimeout(resolve, 500));
-        const [response] = await Promise.all([
-          getMostSearchedBooks(),
-        ]);
-        await minLoadingTime;
+        const minLoadingTime = new Promise<void>(resolve => setTimeout(resolve, 500));
+        const [responseResult] = await Promise.allSettled([getMostSearchedBooks()]);
+        await minLoadingTime;
+
+        if (responseResult.status === 'rejected') {
+          throw responseResult.reason;
+        }
+        const response = responseResult.value;

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

Suggested change

	const minLoadingTime = new Promise(resolve => setTimeout(resolve, 500));
	const [response] = await Promise.all([
	getMostSearchedBooks(),
	]);
	await minLoadingTime;
	const minLoadingTime = new Promise<void>(resolve => setTimeout(resolve, 500));
	const [responseResult] = await Promise.allSettled([getMostSearchedBooks()]);
	await minLoadingTime;
	if (responseResult.status === 'rejected') {
	throw responseResult.reason;
	}
	const response = responseResult.value;

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/search/MostSearchedBooks.tsx` around lines 30 - 35, The
current fail-fast Promise.all can skip awaiting minLoadingTime when
getMostSearchedBooks() rejects; change the logic so minLoadingTime is always
awaited before you update loading state or render error: start minLoadingTime as
now, run the fetch using Promise.allSettled (or wrap getMostSearchedBooks() into
a promise that never rejects), then await minLoadingTime before handling
results; in practice replace Promise.all([...]) with
Promise.allSettled([getMostSearchedBooks()]) (referencing getMostSearchedBooks,
minLoadingTime and setIsLoading in MostSearchedBooks.tsx), then after await
minLoadingTime inspect the settled result (response.status === 'fulfilled' ?
response.value : handle error) and only then call setIsLoading(false) or set
error state so the 500ms skeleton is always honored.

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

에러/로딩 상태의 뒤로가기 동작 불일치를 확인하세요.

handleBackClick(에러 상태)은 navigate(-1)을 사용하고, handleBackButton(로딩·정상 상태)은 navigate('/group')로 이동합니다. 같은 뒤로가기 버튼이 상태에 따라 다른 목적지로 이동하면 사용자 경험이 일관되지 않을 수 있습니다.

• 에러 상태에서도 /group으로 이동하는 것이 의도라면 handleBackClick을 handleBackButton으로 대체하고 중복 핸들러를 제거하세요.
• navigate(-1)이 의도적이라면 로딩 상태의 뒤로가기도 동일하게 맞추는 것이 좋습니다.

추가로, 두 핸들러의 이름(handleBackClick vs handleBackButton)이 의미상 구분이 불명확하여 혼란을 줄 수 있습니다.

♻️ 단일 핸들러로 통일하는 경우의 예시

-  const handleBackClick = () => {
-    navigate(-1);
-  };
-
   ...

   const handleBackButton = () => {
     navigate('/group');
   };

그리고 에러 상태의 onLeftClick을 handleBackButton으로 교체:

-          onLeftClick={handleBackClick}
+          onLeftClick={handleBackButton}

Also applies to: 110-112

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/groupDetail/ParticipatedGroupDetail.tsx` around lines 67 - 69, The
back-navigation behavior is inconsistent: handleBackClick uses navigate(-1)
while handleBackButton uses navigate('/group') and their names are confusing;
pick the intended behavior (either always go to '/group' or always go back one
step), replace the other handler so both error and normal/loading states call
the same function (e.g., unify into a single handler name like handleBack or
handleNavigateBack), update all onLeftClick usages (including the error-state
onLeftClick) to use that unified handler, and remove the redundant handler to
avoid duplicate implementations.

[coderabbitai]

Actionable comments posted: 1

Caution

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

⚠️ Outside diff range comments (2)

src/pages/memory/Memory.tsx (1)

127-161: ⚠️ Potential issue | 🟡 Minor

에러 발생 시 500ms 최소 로딩 시간이 보장되지 않습니다.

Promise.all은 하나의 Promise가 reject되면 즉시 reject됩니다. getMemoryPosts가 100ms 만에 실패하면 minLoadingTime (500ms)을 기다리지 않고 바로 catch로 진입하여 스켈레톤이 짧게 깜빡이게 됩니다.

최소 로딩 시간을 에러 경로에서도 보장하려면 fetch와 delay를 분리해서 처리하세요.

🛠️ 수정 제안

-      const minLoadingTime = new Promise(resolve => setTimeout(resolve, 500));
-      const [response] = await Promise.all([getMemoryPosts(params), minLoadingTime]);
-
+      const minLoadingTime = new Promise(resolve => setTimeout(resolve, 500));
+      const [result] = await Promise.allSettled([getMemoryPosts(params), minLoadingTime]);
+      if (result.status === 'rejected') throw result.reason;
+      const response = result.value;

또는 더 간단하게:

-      const minLoadingTime = new Promise(resolve => setTimeout(resolve, 500));
-      const [response] = await Promise.all([getMemoryPosts(params), minLoadingTime]);
+      const startTime = Date.now();
+      const response = await getMemoryPosts(params);
+      const elapsed = Date.now() - startTime;
+      if (elapsed < 500) await new Promise(resolve => setTimeout(resolve, 500 - elapsed));

두 번째 방식은 에러 시에도 catch 전에 최소 시간을 보장하려면 finally 블록에서 delay를 처리해야 하므로, Promise.allSettled 방식이 더 깔끔합니다.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/memory/Memory.tsx` around lines 127 - 161, The current fetch uses
Promise.all([getMemoryPosts(params), minLoadingTime]) so a fast rejection from
getMemoryPosts skips the 500ms delay; change the logic to await the fetch and
the delay separately (e.g., use Promise.allSettled([getMemoryPosts(params),
minLoadingTime]) or await getMemoryPosts(params) and then await minLoadingTime
in a finally) so that minLoadingTime is always honored even on error; adjust
handling around getMemoryPosts, minLoadingTime, and the existing
try/catch/finally blocks so setLoading(false) and UI updates occur after the
ensured delay.

src/pages/groupSearch/GroupSearch.tsx (1)

50-59: ⚠️ Potential issue | 🟡 Minor

초기 마운트 시 최근 검색 요청이 중복 호출됩니다.

Line 51의 마운트 전용 effect와 Line 57의 searchStatus === 'idle' effect가 첫 렌더에서 모두 실행되어 동일 API를 2회 호출합니다.

🔧 제안 수정안

-  useEffect(() => {
-    fetchRecentSearches();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/groupSearch/GroupSearch.tsx` around lines 50 - 59, The component
calls fetchRecentSearches twice on first render because there's a mount-only
useEffect and another useEffect that calls fetchRecentSearches when searchStatus
=== 'idle'; remove the duplicate by either deleting the mount-only effect or
preventing the second effect from running on initial mount (e.g., add a
hasFetchedRef or guard so the useEffect watching searchStatus only calls
fetchRecentSearches when searchStatus becomes 'idle' after mount). Update code
references: fetchRecentSearches, searchStatus, and the two useEffect blocks so
only one path triggers the API call on initial render.

♻️ Duplicate comments (2)

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

108-119: ⚠️ Potential issue | 🟡 Minor

스켈레톤 무기한 노출 버그 수정 확인.

loading과 !profile을 분리하여 프로필 로드 실패 시에도 스켈레톤이 사라지게 된 점은 올바른 수정입니다.

다만, !profile ? null 분기에서 사용자에게 아무런 피드백이 제공되지 않습니다. 프로필 로드 실패 시 빈 화면 대신 간단한 에러 메시지를 표시하는 것을 권장합니다.

💡 fallback UI 제안

-        ) : !profile ? null : (
+        ) : !profile ? (
+          <UserProfile>
+            <div className="userInfo">
+              <div className="user">
+                <div className="username">프로필을 불러오지 못했어요</div>
+              </div>
+            </div>
+          </UserProfile>
+        ) : (

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/mypage/Mypage.tsx` around lines 108 - 119, The current conditional
rendering removes the skeleton when loading is false but returns null on the
!profile branch, leaving users with no feedback on load failure; update the
conditional in Mypage.tsx so that when loading is false and profile is falsy you
render a simple fallback/error UI (e.g., a ProfileErrorContainer or plain
message like "Failed to load profile. Retry.") instead of null; keep the loading
branch using ProfileSkeletonContainer/ProfileSkeletonLeft/ProfileSkeletonText
and ensure the new fallback replaces the !profile ? null branch so users see an
error state and can act.

src/pages/memory/Memory.tsx (1)

318-342: inert 속성 적용 — 이전 리뷰 피드백이 올바르게 반영되었습니다.

FixedSection에 inert 속성을 추가하여 로딩 중 키보드/포커스/클릭 상호작용을 완전히 차단한 것은 이전 리뷰에서 제안된 내용과 일치합니다.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/memory/Memory.tsx` around lines 318 - 342, The "inert" application
on FixedSection during loading is correct, but the diffs include an extraneous
review marker [duplicate_comment]; remove that stray marker and ensure the JSX
uses the inert prop on FixedSection only while loading (keep FixedSection inert
as shown — inert or inert={true} is acceptable) so that keyboard/focus/click
interactions remain blocked; verify no other instances of the duplicate marker
remain.

🧹 Nitpick comments (1)

src/pages/memory/Memory.tsx (1)

91-91: 탭/필터 변경 시에도 전체 스켈레톤이 표시됩니다 — 의도된 동작인지 확인하세요.

loading이 true로 초기화되고, loadMemoryPosts 호출 시마다 setLoading(true)로 설정되므로 탭 전환이나 필터 변경 시에도 전체 콘텐츠가 스켈레톤으로 대체됩니다. 이미 데이터가 표시된 상태에서의 전환이라면 콘텐츠 깜빡임이 발생할 수 있습니다.

의도된 디자인이라면 무시하셔도 됩니다. 만약 아니라면, 초기 로딩과 이후 재로딩을 구분하여(isInitialLoad 등) 재로딩 시에는 기존 콘텐츠 위에 가벼운 로딩 인디케이터를 보여주는 방식도 고려해 볼 수 있습니다.

Also applies to: 107-107

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/memory/Memory.tsx` at line 91, The current behavior sets loading =
true on every loadMemoryPosts call (useState( true ) + setLoading(true)),
causing full skeleton replacement on tab/filter changes; update the logic to
distinguish initial load vs subsequent reloads (e.g., add an isInitialLoad state
or useRef) and only set loading=true for the initial fetch in the Memory
component, while for subsequent calls show a lighter inline spinner or set a
separate isRefetching flag so existing content remains visible during tab/filter
changes; adjust references to loading, setLoading and loadMemoryPosts
accordingly to use the new initial/refetch flags.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/pages/groupSearch/GroupSearch.tsx`:
- Around line 64-66: The current Promise.all usage with minLoadingTime allows
early rejection and skips the 500ms delay on failures; change both places to use
Promise.allSettled (or otherwise ensure minLoadingTime is always awaited). For
the getRecentSearch flow, replace Promise.all([getRecentSearch('ROOM'),
minLoadingTime]) with Promise.allSettled([getRecentSearch('ROOM'),
minLoadingTime]) and then check the settled result for the getRecentSearch entry
(status === 'fulfilled' and value.isSuccess) before calling setRecentSearches,
defaulting to [] on failure; remove the later separate await minLoadingTime if
present. Do the same for the getSearchRooms call: include minLoadingTime in
Promise.allSettled([getSearchRooms(...), minLoadingTime]) and extract the rooms
only if the getSearchRooms settled entry succeeded, otherwise handle the error
path after the delay so success and failure both respect the 500ms minimum.

---

Outside diff comments:
In `@src/pages/groupSearch/GroupSearch.tsx`:
- Around line 50-59: The component calls fetchRecentSearches twice on first
render because there's a mount-only useEffect and another useEffect that calls
fetchRecentSearches when searchStatus === 'idle'; remove the duplicate by either
deleting the mount-only effect or preventing the second effect from running on
initial mount (e.g., add a hasFetchedRef or guard so the useEffect watching
searchStatus only calls fetchRecentSearches when searchStatus becomes 'idle'
after mount). Update code references: fetchRecentSearches, searchStatus, and the
two useEffect blocks so only one path triggers the API call on initial render.

In `@src/pages/memory/Memory.tsx`:
- Around line 127-161: The current fetch uses
Promise.all([getMemoryPosts(params), minLoadingTime]) so a fast rejection from
getMemoryPosts skips the 500ms delay; change the logic to await the fetch and
the delay separately (e.g., use Promise.allSettled([getMemoryPosts(params),
minLoadingTime]) or await getMemoryPosts(params) and then await minLoadingTime
in a finally) so that minLoadingTime is always honored even on error; adjust
handling around getMemoryPosts, minLoadingTime, and the existing
try/catch/finally blocks so setLoading(false) and UI updates occur after the
ensured delay.

---

Duplicate comments:
In `@src/pages/memory/Memory.tsx`:
- Around line 318-342: The "inert" application on FixedSection during loading is
correct, but the diffs include an extraneous review marker [duplicate_comment];
remove that stray marker and ensure the JSX uses the inert prop on FixedSection
only while loading (keep FixedSection inert as shown — inert or inert={true} is
acceptable) so that keyboard/focus/click interactions remain blocked; verify no
other instances of the duplicate marker remain.

In `@src/pages/mypage/Mypage.tsx`:
- Around line 108-119: The current conditional rendering removes the skeleton
when loading is false but returns null on the !profile branch, leaving users
with no feedback on load failure; update the conditional in Mypage.tsx so that
when loading is false and profile is falsy you render a simple fallback/error UI
(e.g., a ProfileErrorContainer or plain message like "Failed to load profile.
Retry.") instead of null; keep the loading branch using
ProfileSkeletonContainer/ProfileSkeletonLeft/ProfileSkeletonText and ensure the
new fallback replaces the !profile ? null branch so users see an error state and
can act.

---

Nitpick comments:
In `@src/pages/memory/Memory.tsx`:
- Line 91: The current behavior sets loading = true on every loadMemoryPosts
call (useState( true ) + setLoading(true)), causing full skeleton replacement on
tab/filter changes; update the logic to distinguish initial load vs subsequent
reloads (e.g., add an isInitialLoad state or useRef) and only set loading=true
for the initial fetch in the Memory component, while for subsequent calls show a
lighter inline spinner or set a separate isRefetching flag so existing content
remains visible during tab/filter changes; adjust references to loading,
setLoading and loadMemoryPosts accordingly to use the new initial/refetch flags.

---

ℹ️ Review info

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Jira integration is disabled

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 9239963 and f38029c.

📒 Files selected for processing (3)

• src/pages/groupSearch/GroupSearch.tsx
• src/pages/memory/Memory.tsx
• src/pages/mypage/Mypage.tsx

[coderabbitai]

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

fd 'GroupSearch.tsx' --type f

Repository: THIP-TextHip/THIP-Web

Length of output: 102

---

🏁 Script executed:

cat -n src/pages/groupSearch/GroupSearch.tsx | sed -n '50,110p'

Repository: THIP-TextHip/THIP-Web

Length of output: 2189

---

🏁 Script executed:

cat -n src/pages/groupSearch/GroupSearch.tsx | sed -n '105,125p'

Repository: THIP-TextHip/THIP-Web

Length of output: 709

---

실패 경로에서 500ms 최소 로딩 시간이 보장되지 않습니다.

Line 65에서 Promise.all([getRecentSearch('ROOM'), minLoadingTime])은 어느 한 Promise가 reject되면 즉시 실패합니다. 요청이 실패하면 minLoadingTime이 완료되지 않은 상태에서 catch 블록(67-68)으로 빠져 최소 로딩 시간을 보장하지 못합니다.

Line 94-104도 동일한 문제가 있습니다. Promise.all([getSearchRooms(...)])에는 minLoadingTime이 포함되지 않아, 요청이 실패하면 catch 블록(114-115)으로 즉시 이동하여 104번 줄의 await minLoadingTime에 도달하지 않습니다.

결과적으로 성공 케이스와 실패 케이스의 로딩 UX가 불일치합니다.

🔧 제안 수정안

   const fetchRecentSearches = async () => {
     try {
       setIsLoadingRecentSearches(true);
       const minLoadingTime = new Promise(resolve => setTimeout(resolve, 500));
-      const [response] = await Promise.all([getRecentSearch('ROOM'), minLoadingTime]);
-      setRecentSearches(response.isSuccess ? response.data.recentSearchList : []);
+      const request = getRecentSearch('ROOM')
+        .then(response => ({ ok: true as const, response }))
+        .catch(() => ({ ok: false as const }));
+      const [result] = await Promise.all([request, minLoadingTime]);
+      setRecentSearches(
+        result.ok && result.response.isSuccess ? result.response.data.recentSearchList : [],
+      );
     } catch {
       setRecentSearches([]);
     } finally {
       setIsLoadingRecentSearches(false);
     }
   };

       try {
         const isFinalized = status === 'searched';
         const minLoadingTime = new Promise(resolve => setTimeout(resolve, 500));
-        const [res] = await Promise.all([
-          getSearchRooms(
-            term.trim(),
-            sortKey,
-            undefined,
-            isFinalized,
-            categoryParam,
-            isAllCategory,
-          ),
-        ]);
-        await minLoadingTime;
+        const request = getSearchRooms(
+          term.trim(),
+          sortKey,
+          undefined,
+          isFinalized,
+          categoryParam,
+          isAllCategory,
+        )
+          .then(res => ({ ok: true as const, res }))
+          .catch(error => ({ ok: false as const, error }));
+        const [result] = await Promise.all([request, minLoadingTime]);
+        if (!result.ok) throw result.error;
+        const res = result.res;
         if (res.isSuccess) {
           const { roomList, nextCursor: nc, isLast: last } = res.data;

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

Suggested change

	const minLoadingTime = new Promise(resolve => setTimeout(resolve, 500));
	const [response] = await Promise.all([getRecentSearch('ROOM'), minLoadingTime]);
	setRecentSearches(response.isSuccess ? response.data.recentSearchList : []);
	const minLoadingTime = new Promise(resolve => setTimeout(resolve, 500));
	const request = getRecentSearch('ROOM')
	.then(response => ({ ok: true as const, response }))
	.catch(() => ({ ok: false as const }));
	const [result] = await Promise.all([request, minLoadingTime]);
	setRecentSearches(
	result.ok && result.response.isSuccess ? result.response.data.recentSearchList : [],
	);

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/groupSearch/GroupSearch.tsx` around lines 64 - 66, The current
Promise.all usage with minLoadingTime allows early rejection and skips the 500ms
delay on failures; change both places to use Promise.allSettled (or otherwise
ensure minLoadingTime is always awaited). For the getRecentSearch flow, replace
Promise.all([getRecentSearch('ROOM'), minLoadingTime]) with
Promise.allSettled([getRecentSearch('ROOM'), minLoadingTime]) and then check the
settled result for the getRecentSearch entry (status === 'fulfilled' and
value.isSuccess) before calling setRecentSearches, defaulting to [] on failure;
remove the later separate await minLoadingTime if present. Do the same for the
getSearchRooms call: include minLoadingTime in
Promise.allSettled([getSearchRooms(...), minLoadingTime]) and extract the rooms
only if the getSearchRooms settled entry succeeded, otherwise handle the error
path after the delay so success and failure both respect the 500ms minimum.