[UNI-370] feat : 검색 리스트 로딩 + NotFound 화면 적용 (#226)

Author: dgfh0450

uniro_frontend/index.html

@@ -4,7 +4,7 @@
 		<meta charset="UTF-8" />
 		<link rel="icon" type="image/webp" href="/logo.webp" />
 		<link href="/dist/styles.css" rel="text/html" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
 		<title>UNIRO</title>
 		<meta
 			name="description"

uniro_frontend/src/components/building/buildingList.tsx

@@ -3,6 +3,7 @@ import { getSearchBuildings } from "../../api/nodes";
 import { University } from "../../data/types/university";
 import useSearchBuilding from "../../hooks/useSearchBuilding";
 import BuildingCard from "./buildingCard";
+import BuildingNotFound from "./buildingNotFound";
 
 interface BuildingListProps {
 	university: University;
@@ -18,14 +19,18 @@ export default function BuildingList({ university, input }: BuildingListProps) {
 	});
 
 	return (
-		<ul className="px-4 pt-1 space-y-1">
-			{(buildings ?? []).map((building) => (
-				<BuildingCard
-					onClick={() => setBuilding(building)}
-					key={`building-${building.buildingName}`}
-					building={building}
-				/>
-			))}
+		<ul className="w-full h-full px-4 pt-1 space-y-1">
+			{buildings.length === 0 ? (
+				<BuildingNotFound />
+			) : (
+				buildings.map((building) => (
+					<BuildingCard
+						onClick={() => setBuilding(building)}
+						key={`building-${building.buildingName}`}
+						building={building}
+					/>
+				))
+			)}
 		</ul>
 	);
 }

uniro_frontend/src/components/building/buildingNotFound.tsx

@@ -0,0 +1,9 @@
+import SearchNull from "../error/SearchNull";
+
+export default function BuildingNotFound() {
+	return (
+		<div className="h-full w-full flex justify-center items-center">
+			<SearchNull message="해당 건물을 찾을 수 없습니다." />
+		</div>
+	);
+}

uniro_frontend/src/components/university/universityList.tsx

@@ -0,0 +1,51 @@
+import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
+import React, { MouseEvent, Dispatch, SetStateAction } from "react";
+import { getUniversityList } from "../../api/search";
+import UniversityButton from "../universityButton";
+import { University } from "../../data/types/university";
+import { useNavigate } from "react-router";
+import useUniversityInfo from "../../hooks/useUniversityInfo";
+import UniversityNotFound from "./universityNotFound";
+
+interface UniveristyListProps {
+	query: string;
+	selectedUniv: University | undefined;
+	setSelectedUniv: Dispatch<SetStateAction<University | undefined>>;
+}
+
+export default function UniversityList({ query, selectedUniv, setSelectedUniv }: UniveristyListProps) {
+	const { data: universityList } = useSuspenseQuery({
+		queryKey: ["university", query],
+		queryFn: () => getUniversityList(query),
+	});
+	const { university, setUniversity } = useUniversityInfo();
+	const navigation = useNavigate();
+
+	const handleClick = (e: MouseEvent<HTMLButtonElement>, univ: University) => {
+		setSelectedUniv(univ);
+	};
+
+	const handleDbClick = (e: MouseEvent<HTMLButtonElement>, univ: University) => {
+		setSelectedUniv(univ);
+		setUniversity(univ);
+		navigation("/map");
+	};
+
+	return (
+		<ul className="w-full h-full px-[14px] py-[6px]">
+			{universityList.length === 0 ? (
+				<UniversityNotFound />
+			) : (
+				universityList.map((univ) => (
+					<UniversityButton
+						key={`university-${univ.id}`}
+						selected={selectedUniv?.id === univ.id}
+						onClick={handleClick}
+						onDbClick={handleDbClick}
+						university={univ}
+					/>
+				))
+			)}
+		</ul>
+	);
+}

uniro_frontend/src/components/university/universityNotFound.tsx

@@ -0,0 +1,9 @@
+import SearchNull from "../error/SearchNull";
+
+export default function UniversityNotFound() {
+	return (
+		<div className="h-full w-full flex justify-center items-center">
+			<SearchNull message="해당 학교를 찾을 수 없습니다." />
+		</div>
+	);
+}

uniro_frontend/src/components/universityButton.tsx

@@ -1,23 +1,32 @@
 import { MouseEvent, useState } from "react";
+import { University } from "../data/types/university";
 
 interface UniversityButtonProps {
-	name: string;
-	img: string;
+	university: University;
 	selected: boolean;
 	loading?: boolean;
-	onClick: () => void;
+	onClick: (e: MouseEvent<HTMLButtonElement>, univ: University) => void;
+	onDbClick: (e: MouseEvent<HTMLButtonElement>, univ: University) => void;
 }
 
-export default function UniversityButton({ name, img, selected, onClick }: UniversityButtonProps) {
+export default function UniversityButton({ university, selected, onClick, onDbClick }: UniversityButtonProps) {
 	const [imageLoaded, setImageLoaded] = useState(false);
+
+	const { imageUrl, name } = university;
+
 	const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
 		e.stopPropagation();
-		onClick();
+		onClick(e, university);
+	};
+
+	const handleDbClick = (e: MouseEvent<HTMLButtonElement>) => {
+		onDbClick(e, university);
 	};
 
 	return (
 		<li className="my-[6px]">
 			<button
+				onDoubleClick={handleDbClick}
 				onClick={handleClick}
 				className={`w-full h-full p-6 border rounded-400 text-left ${
 					selected ? "border-primary-400 bg-system-skyblue text-primary-500" : "border-gray-400"
@@ -26,7 +35,7 @@ export default function UniversityButton({ name, img, selected, onClick }: Unive
 				<span className="inline-block w-[30px] h-[30px] relative align-middle">
 					{!imageLoaded && <div className="absolute inset-0 bg-gray-300 rounded-full animate-pulse" />}
 					<img
-						src={img}
+						src={imageUrl}
 						className={`absolute inset-0 w-full h-full transition-opacity duration-300 ${imageLoaded ? "opacity-100" : "opacity-0"}`}
 						alt={`${name} 로고`}
 						onLoad={() => setImageLoaded(true)}

uniro_frontend/src/pages/universitySearch.tsx

@@ -1,25 +1,18 @@
-import { useEffect, useState } from "react";
+import { Suspense, useEffect, useState } from "react";
 import Input from "../components/customInput";
-import UniversityButton from "../components/universityButton";
 import Button from "../components/customButton";
-import { Link, useNavigate } from "react-router";
+import { Link } from "react-router";
 import useUniversityInfo from "../hooks/useUniversityInfo";
-import { useQuery } from "@tanstack/react-query";
-import { getUniversityList } from "../api/search";
 import { University } from "../data/types/university";
 import useRoutePoint from "../hooks/useRoutePoint";
+import UniversityList from "../components/university/universityList";
+import InnerLoading from "../components/loading/innerLoading";
 
 export default function UniversitySearchPage() {
 	const [selectedUniv, setSelectedUniv] = useState<University>();
 	const { university, setUniversity } = useUniversityInfo();
 	const { setDestination, setOrigin } = useRoutePoint();
 	const [input, setInput] = useState<string>("");
-	const navigation = useNavigate();
-
-	const { data: universityList } = useQuery({
-		queryKey: ["university", input],
-		queryFn: () => getUniversityList(input),
-	});
 
 	useEffect(() => {
 		if (university) {
@@ -38,37 +31,14 @@ export default function UniversitySearchPage() {
 		<div className="h-full w-full" onClick={() => setSelectedUniv(undefined)}>
 			<div className="relative flex flex-col h-dvh w-full max-w-[450px] mx-auto py-5">
 				<div className="w-full px-[14px] pb-[17px] border-b-[1px] border-gray-400">
-					<Input
-						onChangeDebounce={(e) => setInput(e)}
-						placeholder="우리 학교를 검색해보세요"
-						handleVoiceInput={() => {}}
-					/>
+					<Input onChangeDebounce={(e) => setInput(e)} placeholder="우리 학교를 검색해보세요" />
 				</div>
 				<div className="overflow-y-scroll flex-1">
-					<ul
-						className="w-full h-full px-[14px] py-[6px]"
-						onClick={() => {
-							setSelectedUniv(undefined);
-						}}
+					<Suspense
+						fallback={<InnerLoading isLoading={true} loadingContent="학교 목록을 불러오고 있습니다." />}
 					>
-						{universityList &&
-							universityList.map((univ) => (
-								<UniversityButton
-									key={`university-${univ.id}`}
-									selected={selectedUniv?.id === univ.id}
-									onClick={() => {
-										if (selectedUniv?.id === univ.id) {
-											setUniversity(univ);
-											navigation("/map");
-											return;
-										}
-										setSelectedUniv(univ);
-									}}
-									name={univ.name}
-									img={univ.imageUrl}
-								/>
-							))}
-					</ul>
+						<UniversityList query={input} selectedUniv={selectedUniv} setSelectedUniv={setSelectedUniv} />
+					</Suspense>
 				</div>
 				<div className="px-[14px]">
 					{selectedUniv && (