[Common] [Hotfix] 학교 유저 검색 플로우 수정 및 모달 오류 수정

capstone-kw-jjiggle · Nov 10, 2024 · b163bea · b163bea
1 parent a43af31
commit b163bea
Show file tree

Hide file tree

Showing 16 changed files with 273 additions and 71 deletions.
diff --git a/apps/mobile/src/app/school/page.tsx b/apps/mobile/src/app/school/page.tsx
@@ -1,10 +1,15 @@
 'use client';
 
-import { useRef, useState, KeyboardEvent } from 'react';
+import Link from 'next/link';
+import { useState, KeyboardEvent } from 'react';
 import Input from '@/shared/components/input/input';
 import RankBoard from '@/shared/components/rankBoard/rankBoard';
 import { useGetSchoolNames } from '@/shared/apis/auth/queries';
-import { useGetSchoolList } from '@/shared/apis/school/queries';
+import {
+  useGetSchoolList,
+  useGetSchoolUserList,
+} from '@/shared/apis/school/queries';
+import ArrowBackIcon from '@/shared/assets/svgs/arrow_back.svg';
 import {
   boardStyle,
   divStyle,
@@ -24,27 +29,41 @@ const SchoolPage = () => {
   const { data, isLoading, fetchNextPage, hasNextPage, isFetchingNextPage } =
     useGetSchoolList({ searchedSchoolName: 선택된대학교 });
 
+  const 대학선택여부 = 선택된대학교.length > 0;
+
+  const {
+    data: schoolUserData,
+    isLoading: schoolUserDataIsLoading,
+    fetchNextPage: schoolUserDataFetchNextPage,
+    hasNextPage: schoolUserDataHasNextPage,
+    isFetchingNextPage: schoolUserDataIsFetchingNextPage,
+  } = useGetSchoolUserList({
+    schoolName: 선택된대학교,
+    enabled: 대학선택여부,
+  });
+
   const filteredData = schoolNames?.filter((school: string) =>
     school.includes(대학교검색키워드),
   );
 
-  const handle대학교선택 = (school: string) => {
-    set선택된대학교(school);
+  const handle대학선택 = (school: string) => {
     set대학교검색키워드(school);
+    set선택된대학교(school);
   };
 
   const handle대학교검색키워드변경 = (
     e: React.ChangeEvent<HTMLInputElement>,
   ) => {
+    if (e.target.value === '') {
+      set선택된대학교('');
+    }
     set대학교검색키워드(e.target.value);
   };
 
-  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter') {
-      set선택된대학교(대학교검색키워드);
-    }
+  const handle선택대학삭제 = () => {
+    set대학교검색키워드('');
+    set선택된대학교('');
   };
-
   return (
     <div className={container}>
       <div className={divStyle}>
@@ -65,17 +84,21 @@ const SchoolPage = () => {
         <Input
           value={대학교검색키워드}
           onChange={handle대학교검색키워드변경}
-          onKeyDown={handleKeyDown}
-          device="mobile"
-          variant="search"
           placeholder="대학교 검색"
-          className={inputStyle}>
+          device="mobile"
+          variant={대학선택여부 ? 'custom' : 'search'}
+          className={inputStyle}
+          customIcon={
+            <button>
+              <ArrowBackIcon onClick={handle선택대학삭제} />
+            </button>
+          }>
           <Input.List>
             {filteredData?.length > 0 ? (
               filteredData.map((school: string) => (
                 <Input.MenuItem
                   key={school}
-                  onClick={() => handle대학교선택(school)}>
+                  onClick={() => handle대학선택(school)}>
                   {school}
                 </Input.MenuItem>
               ))
@@ -84,24 +107,46 @@ const SchoolPage = () => {
             )}
           </Input.List>
         </Input>
+
         <RankBoard
           device="mobile"
-          className={boardStyle}
-          title="아이디"
-          fetchNextPage={fetchNextPage}
-          hasNextPage={hasNextPage}
-          isFetchingNextPage={isFetchingNextPage}
-          isLoading={isLoading}>
-          {data?.pages.map((page) =>
-            page.schoolList.map((user) => (
-              <RankBoard.ListItem
-                key={user.schoolName}
-                rank={user.schoolRank}
-                name={user.schoolName}
-                score={user.schoolScore}
-              />
-            )),
-          )}
+          title={대학선택여부 ? '아이디' : '지역명'}
+          fetchNextPage={
+            대학선택여부 ? fetchNextPage : schoolUserDataFetchNextPage
+          }
+          hasNextPage={대학선택여부 ? hasNextPage : schoolUserDataHasNextPage}
+          isFetchingNextPage={
+            대학선택여부 ? isFetchingNextPage : schoolUserDataIsFetchingNextPage
+          }
+          isLoading={대학선택여부 ? isLoading : schoolUserDataIsLoading}>
+          {대학선택여부
+            ? schoolUserData?.pages.map((page) =>
+                page.userInfoBySchools?.map((user) => (
+                  <Link key={user.username} href={`/user/${user.username}`}>
+                    <RankBoard.ListItem
+                      rank={user.userRank}
+                      name={user.username}
+                      score={user.userscore}
+                      profileImg={user.profileImg}
+                    />
+                  </Link>
+                )),
+              )
+            : data?.pages.map((page) =>
+                page.schoolList.map((user) => (
+                  <button
+                    key={user.schoolName}
+                    onClick={() => {
+                      handle대학선택(user.schoolName);
+                    }}>
+                    <RankBoard.ListItem
+                      rank={user.schoolRank}
+                      name={user.schoolName}
+                      score={user.schoolScore}
+                    />
+                  </button>
+                )),
+              )}
         </RankBoard>
       </div>
     </div>

diff --git a/apps/mobile/src/shared/apis/board/axios.ts b/apps/mobile/src/shared/apis/board/axios.ts
@@ -11,6 +11,6 @@ export const getGuestbook = async (): Promise<GetGuestBook.Res> => {
   return response.data;
 };
 
-export const postGuestBook = async ({ content }: { content: string }) => {
-  await authClient.post(BOARD_URL.POST_GUESTBOOK, { content });
+export const postGuestBook = async (content: string) => {
+  await authClient.post(BOARD_URL.POST_GUESTBOOK, content);
 };
diff --git a/apps/mobile/src/shared/apis/board/queries.ts b/apps/mobile/src/shared/apis/board/queries.ts
@@ -12,7 +12,7 @@ export const usePostGuestBook = () => {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: (content: string) => postGuestBook({ content }),
+    mutationFn: (content: string) => postGuestBook(content),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['guestBook'] });
     },

diff --git a/apps/mobile/src/shared/apis/region/queries.ts b/apps/mobile/src/shared/apis/region/queries.ts
@@ -1,6 +1,6 @@
 import { useInfiniteQuery } from '@tanstack/react-query';
 import { getRegionList, getRegionUserList } from './axios';
-import { GetRegionList, GetRegionUserList } from './types';
+import { GetRegionList } from './types';
 
 export const useGetRegionList = ({
   regionName,

diff --git a/apps/mobile/src/shared/apis/school/axios.ts b/apps/mobile/src/shared/apis/school/axios.ts
@@ -1,8 +1,9 @@
 import { client } from '../client';
-import { GetSchoolList } from './types';
+import { GetSchoolList, GetSchoolUserList } from './types';
 
 const SCHOOL_URL = {
   GET_SCHOOL_LIST: '/schoolRank/schoolList',
+  GET_SCHOOL_USER_LIST: '/schoolRank/userList',
 };
 
 export const getSchoolList = async ({
@@ -17,3 +18,16 @@ export const getSchoolList = async ({
   });
   return response.data;
 };
+
+export const getSchoolUserList = async ({
+  page,
+  schoolName,
+}: GetSchoolUserList.Params): Promise<GetSchoolUserList.Res> => {
+  const response = await client.get(SCHOOL_URL.GET_SCHOOL_LIST, {
+    params: {
+      page,
+      schoolName,
+    },
+  });
+  return response.data;
+};
diff --git a/apps/mobile/src/shared/apis/school/queries.ts b/apps/mobile/src/shared/apis/school/queries.ts
@@ -1,6 +1,6 @@
 import { useInfiniteQuery } from '@tanstack/react-query';
-import { getSchoolList } from './axios';
-import { GetSchoolList } from './types';
+import { getSchoolList, getSchoolUserList } from './axios';
+import { GetSchoolList, GetSchoolUserList } from './types';
 
 export const useGetSchoolList = ({
   searchedSchoolName,
@@ -16,3 +16,20 @@ export const useGetSchoolList = ({
     initialPageParam: 1,
   });
 };
+
+export const useGetSchoolUserList = ({
+  schoolName,
+  enabled = false,
+}: Omit<GetSchoolUserList.Params, 'page'> & { enabled?: boolean }) => {
+  return useInfiniteQuery({
+    queryKey: ['userGetSchoolUserList', schoolName],
+    queryFn: ({ pageParam = 1 }) =>
+      getSchoolUserList({ schoolName, page: pageParam }),
+    getNextPageParam: (lastPage) =>
+      lastPage.currentPage < lastPage.totalPages
+        ? lastPage.currentPage + 1
+        : null,
+    initialPageParam: 1,
+    enabled,
+  });
+};
diff --git a/apps/mobile/src/shared/apis/school/types/index.ts b/apps/mobile/src/shared/apis/school/types/index.ts
@@ -18,3 +18,25 @@ export namespace GetSchoolList {
     totalPages: number;
   }
 }
+
+export namespace GetSchoolUserList {
+  export interface Params {
+    page: number;
+    schoolName: string;
+  }
+
+  interface User {
+    username: string;
+    profileImg: string;
+    userscore: number;
+    userRank: number;
+  }
+
+  export interface Res {
+    userInfoBySchools: User[];
+    currentPage: number;
+    startPage: number;
+    endPage: number;
+    totalPages: number;
+  }
+}
diff --git a/apps/mobile/src/shared/apis/user/types/index.ts b/apps/mobile/src/shared/apis/user/types/index.ts
@@ -1,4 +1,4 @@
-import { TierTypes } from '@/app/user/[userId]/_components/profile/types';
+import { TierTypes } from '@/app/user/[userId]/_components/profile/_types';
 
 export namespace GetUserRank {
   export interface Params {

diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
@@ -27,8 +27,10 @@ export const metadata: Metadata = {
 
 export default function RootLayout({
   children,
+  modal,
 }: Readonly<{
   children: React.ReactNode;
+  modal: React.ReactNode;
 }>) {
   return (
     <html lang="en">
@@ -38,6 +40,7 @@ export default function RootLayout({
       <body>
         <ReactQueryProviders>
           <Theme className={container}>
+            {modal}
             <Header />
             <main className={mainStyle}>{children}</main>
             <Footer />