feat: 리뷰 관리 스크린 상단 탭바 추가하여 대댓글 기준으로 화면 분리

src/apis/reviews/client.ts

@@ -5,7 +5,7 @@ import {
   ReviewReplyCreateRequest,
 } from './model';
 
-export const getReveiewLists = async ({
+export const getReviewLists = async ({
   marketId,
   cursorId,
   size,
@@ -26,6 +26,27 @@ export const getReveiewLists = async ({
     return null;
   }
 };
+export const getUnRepliedReviewLists = async ({
+  marketId,
+  cursorId,
+  size,
+}: ReviewListsRequest): Promise<ReviewListsResponse | null> => {
+  try {
+    const res = await apiClient.get<ReviewListsResponse | null>(
+      `/owner/review/market/${marketId}/no-reply`,
+      {
+        params: {
+          cursorId,
+          size,
+        },
+      },
+    );
+    return res;
+  } catch (error) {
+    console.error('리뷰 페치 에러', error);
+    return null;
+  }
+};
 
 export const postReviewReply = async ({
   reviewId,

src/apis/reviews/query.ts

@@ -1,13 +1,33 @@
 import {useInfiniteQuery, useMutation} from '@tanstack/react-query';
-import {getReveiewLists, postReviewReply} from './client';
+import {
+  getReviewLists,
+  postReviewReply,
+  getUnRepliedReviewLists,
+} from './client';
 import {ReviewReplyCreateRequest} from './model';
 
 export const useReviewList = (marketId: number, enabled: boolean) => {
   return useInfiniteQuery({
-    queryKey: ['marketList', marketId],
+    queryKey: ['marketList', 'review', 'every', marketId],
     queryFn: ({pageParam = 0}) =>
-      // FIXME: 페이징 단위 size
-      getReveiewLists({cursorId: pageParam, size: 5, marketId}),
+      // TODO: 페이징 단위 size
+      getReviewLists({cursorId: pageParam, size: 5, marketId}),
+    initialPageParam: 0,
+    getNextPageParam: lastPage => {
+      return lastPage?.hasNext
+        ? lastPage.reviews[lastPage.reviews.length - 1].id
+        : undefined;
+    },
+    enabled: enabled,
+  });
+};
+
+export const useUnRepliedReviewList = (marketId: number, enabled: boolean) => {
+  return useInfiniteQuery({
+    queryKey: ['marketList', 'review', 'no-reply', marketId],
+    queryFn: ({pageParam = 0}) =>
+      // TODO: 페이징 단위 size
+      getUnRepliedReviewLists({cursorId: pageParam, size: 5, marketId}),
     initialPageParam: 0,
     getNextPageParam: lastPage => {
       return lastPage?.hasNext

src/components/review/ReviewContainerLists.tsx

@@ -4,6 +4,8 @@ import S from './ReviewContainerLists.style';
 import {FlatList} from 'react-native';
 import {ActivityIndicator} from 'react-native-paper';
 import ReviewContainer from './ReviewContainer';
+import {useQueryClient} from '@tanstack/react-query';
+import usePullDownRefresh from '@/hooks/usePullDownRefresh';
 
 type ReviewContainerListsProps = {
   reviews: ReviewType[];
@@ -18,12 +20,22 @@ const ReviewContainerLists = ({
   isFetchingNextPage,
   fetchNextPage,
 }: ReviewContainerListsProps) => {
+  const queryClient = useQueryClient();
+
+  const {onRefresh, refreshing} = usePullDownRefresh(async () => {
+    await queryClient.invalidateQueries({
+      queryKey: ['marketList', 'review'],
+    });
+  });
+
   return (
     <S.Container>
       <FlatList
         data={reviews}
         keyExtractor={item => item.id.toString()}
         renderItem={({item}) => <ReviewContainer item={item} />}
+        refreshing={refreshing}
+        onRefresh={onRefresh}
         onEndReached={() => {
           if (hasNextPage && !isFetchingNextPage) {
             fetchNextPage();

src/screens/ReviewReplyScreen/index.tsx

@@ -7,6 +7,7 @@ import {ActivityIndicator} from 'react-native-paper';
 import {useNavigation} from '@react-navigation/native';
 import {Keyboard, TouchableWithoutFeedback, Platform} from 'react-native';
 import TextInput from '@/components/common/TextInput/TextInput';
+import {useQueryClient} from '@tanstack/react-query';
 
 type ReviewReplyScreenProps = StackScreenProps<
   ReviewStackParamList,
@@ -19,6 +20,7 @@ const ReviewReplyScreen = ({route}: ReviewReplyScreenProps) => {
 
   const {mutate: createReviewReply, isPending} = useCreateReviewReply();
   const navigation = useNavigation();
+  const queryClient = useQueryClient();
 
   const handleReplySubmit = () => {
     if (!replyContent.trim()) return;
@@ -28,6 +30,9 @@ const ReviewReplyScreen = ({route}: ReviewReplyScreenProps) => {
         onSuccess: () => {
           setReplyContent('');
           navigation.goBack();
+          queryClient.invalidateQueries({
+            queryKey: ['marketList', 'review'],
+          });
         },
       },
     );

src/screens/ReviewScreen/ReviewScreen.style.tsx

@@ -1,10 +1,31 @@
 import styled from '@emotion/native';
+import {ToggleButton, ToggleButtonGroup} from '@/components/common';
 
 const S = {
   Container: styled.View`
     flex: 1;
     background-color: white;
   `,
+
+  EmptyWrapper: styled.View`
+    flex: 1;
+    align-items: center;
+  `,
+
+  ToggleText: styled.Text`
+    color: ${props => props.theme.colors.tertiary};
+  `,
+
+  NavbarGroup: styled(ToggleButtonGroup)`
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin: 10px;
+  `,
+
+  ToggleButton: styled(ToggleButton)`
+    width: 100%;
+  `,
 };
 
 export default S;

src/screens/ReviewScreen/index.tsx

@@ -1,8 +1,7 @@
-// ReviewScreen.tsx
-import React from 'react';
+import React, {useState} from 'react';
 import {ActivityIndicator, Text} from 'react-native';
 import S from './ReviewScreen.style';
-import {useReviewList} from '@/apis/reviews';
+import {useReviewList, useUnRepliedReviewList} from '@/apis/reviews';
 import useProfile from '@/hooks/useProfile';
 import ReviewContainerLists from '@/components/review/ReviewContainerLists';
 import NonRegister from '@/components/common/NonRegister';
@@ -12,16 +11,32 @@ import useMarket from '@/hooks/useMarket';
 const ReviewScreen = () => {
   const {profile} = useProfile();
   const {marketInfo} = useMarket();
+  const [selected, setSelected] = useState<'every' | 'no-reply'>('no-reply');
   const marketId = profile?.marketId;
 
   const {
-    data: reviewLists,
-    hasNextPage,
-    fetchNextPage,
-    isFetchingNextPage,
-    status,
-    // error,
-  } = useReviewList(marketId!, Boolean(marketId));
+    data: allPages,
+    hasNextPage: hasNextAll,
+    fetchNextPage: fetchNextAll,
+    isFetchingNextPage: isFetchingNextAll,
+    status: statusAll,
+  } = useReviewList(marketId!, !!marketId);
+
+  const {
+    data: unrepliedPages,
+    hasNextPage: hasNextUn,
+    fetchNextPage: fetchNextUn,
+    isFetchingNextPage: isFetchingNextUn,
+    status: statusUn,
+  } = useUnRepliedReviewList(marketId!, !!marketId);
+
+  const isPending =
+    (selected === 'every' && statusAll === 'pending') ||
+    (selected === 'no-reply' && statusUn === 'pending');
+
+  const isError =
+    (selected === 'every' && statusAll === 'error') ||
+    (selected === 'no-reply' && statusUn === 'error');
 
   if (!profile) {
     return <NonRegister />;
@@ -31,7 +46,7 @@ const ReviewScreen = () => {
     return <EmptyMarket />;
   }
 
-  if (status === 'pending') {
+  if (isPending) {
     return (
       <S.Container>
         <ActivityIndicator />
@@ -40,34 +55,68 @@ const ReviewScreen = () => {
   }
 
   // TODO: error 로직 개선
-  if (status === 'error') {
+  if (isError) {
     return (
       <S.Container>
         <Text>Error</Text>
       </S.Container>
     );
   }
 
-  const reviews =
-    reviewLists?.pages.flatMap(page => (page ? page.reviews : [])) || [];
+  const allReviews = allPages?.pages.flatMap(p => (p ? p.reviews : [])) ?? [];
 
-  if (reviews.length === 0 || !reviews) {
+  const unrepliedReviews =
+    unrepliedPages?.pages.flatMap(p => (p ? p.reviews : [])) ?? [];
+
+  const currentReviews = selected === 'every' ? allReviews : unrepliedReviews;
+  const currentHasNext = selected === 'every' ? hasNextAll : hasNextUn;
+  const currentFetchNext = selected === 'every' ? fetchNextAll : fetchNextUn;
+  const currentIsFetchingNext =
+    selected === 'every' ? isFetchingNextAll : isFetchingNextUn;
+
+  if (!currentReviews || currentReviews.length === 0) {
     return (
       <S.Container>
-        <Text>등록된 리뷰가 없어요!</Text>
+        <S.NavbarGroup selected={selected}>
+          <S.ToggleButton
+            value="no-reply"
+            onPress={() => setSelected('no-reply')}>
+            <S.ToggleText>댓글을 달지 않은 리뷰</S.ToggleText>
+          </S.ToggleButton>
+          <S.ToggleButton value="every" onPress={() => setSelected('every')}>
+            <S.ToggleText>전체 리뷰</S.ToggleText>
+          </S.ToggleButton>
+        </S.NavbarGroup>
+        <S.EmptyWrapper>
+          <Text>
+            {selected === 'every'
+              ? '등록된 리뷰가 없어요!'
+              : '미답변 리뷰가 없어요!'}
+          </Text>
+        </S.EmptyWrapper>
       </S.Container>
     );
   }
+
   return (
     <S.Container>
+      <S.NavbarGroup selected={selected}>
+        <S.ToggleButton
+          value="no-reply"
+          onPress={() => setSelected('no-reply')}>
+          <S.ToggleText>댓글을 달지 않은 리뷰</S.ToggleText>
+        </S.ToggleButton>
+        <S.ToggleButton value="every" onPress={() => setSelected('every')}>
+          <S.ToggleText>전체 리뷰</S.ToggleText>
+        </S.ToggleButton>
+      </S.NavbarGroup>
       <ReviewContainerLists
-        reviews={reviews}
-        hasNextPage={hasNextPage}
-        fetchNextPage={fetchNextPage}
-        isFetchingNextPage={isFetchingNextPage}
+        reviews={currentReviews}
+        hasNextPage={currentHasNext}
+        fetchNextPage={currentFetchNext}
+        isFetchingNextPage={currentIsFetchingNext}
       />
     </S.Container>
   );
 };
-
 export default ReviewScreen;