[Fix 🪛] 홈, 검색 버그

src/pages/HomePage/HomePage.tsx

@@ -1,4 +1,4 @@
-import { Box, Skeleton } from "@chakra-ui/react"
+import { Skeleton } from "@chakra-ui/react"
 
 import Banner from "./components/Banner/Banner"
 import ProjectListSection from "./components/ProjectListSection/ProjectListSection"
@@ -15,7 +15,6 @@ const HomePage = () => {
         <Banner bannerList={bannerProjectList} />
       )}
       <ProjectListSection />
-      <Box height="15rem" />
     </>
   )
 }

src/pages/HomePage/components/Banner/Banner.tsx

@@ -19,6 +19,7 @@ import "swiper/css/pagination"
 import { Autoplay, Navigation, Pagination } from "swiper/modules"
 import { SwiperSlide } from "swiper/react"
 
+import noImage from "@assets/images/noImage.jpg"
 import sidepeekBlue from "@assets/images/sidepeek_blue.png"
 
 import { CustomSwiper } from "./Banner.style"
@@ -72,6 +73,7 @@ const Banner = ({ bannerList }: bannerListProps) => {
             <HStack height="90%">
               <Image
                 src={project.thumbnailUrl}
+                fallbackSrc={noImage}
                 alt="projectImg"
                 height={isLargerThan768 ? "90%" : "50%"}
                 marginTop="4rem"

src/pages/HomePage/components/ProjectListSection/ProjectListSection.tsx

@@ -23,7 +23,6 @@ const ProjectListSection = () => {
   const {
     allProjectList,
     isAllProjectLoading,
-    refetchAllProject,
     fetchNextPage,
     hasNextPage,
     isFetchingNextPage,
@@ -36,17 +35,16 @@ const ProjectListSection = () => {
     const value = e.target.value as SortSelectType
 
     if (value !== sortOption) {
+      setSortOption(value)
       queryClient.removeQueries({ queryKey: [QUERYKEY.ALL_PROJECTS] })
       queryClient.refetchQueries({ queryKey: [QUERYKEY.ALL_PROJECTS] })
     }
-    setSortOption(value)
-
-    refetchAllProject()
   }
 
   const handleChange = () => {
     setIsReleased(!isReleased)
-    refetchAllProject()
+    queryClient.removeQueries({ queryKey: [QUERYKEY.ALL_PROJECTS] })
+    queryClient.refetchQueries({ queryKey: [QUERYKEY.ALL_PROJECTS] })
   }
 
   const loadMoreProjects = useCallback(() => {

src/pages/ProfilePage/components/Projects/ProjectsGrid.tsx

@@ -52,6 +52,7 @@ const ProjectsGrid = ({ userId, type }: ProjectsGridProps) => {
             }: ProjectProperties) => (
               <GridItem key={id}>
                 <ProjectCard
+                  url={`/project/${id}`}
                   imgUrl={thumbnailUrl}
                   viewCount={viewCount}
                   heartCount={likeCount}

src/pages/ProjectListPage/ProjectListPage.tsx

@@ -2,7 +2,6 @@ import { ChangeEvent, useEffect, useState } from "react"
 import { useInView } from "react-intersection-observer"
 import { useLocation, useNavigate, useSearchParams } from "react-router-dom"
 
-import { Box } from "@chakra-ui/react"
 import { Container, Stack, useMediaQuery } from "@chakra-ui/react"
 
 import { useQueryClient } from "@tanstack/react-query"
@@ -43,19 +42,23 @@ const ProjectListPage = () => {
 
   const isLoading = isAllProjectLoading || isRefetching
 
+  const projectCount =
+    allProjectList != undefined && allProjectList.pages[0].totalElements
+
   const handleSelect = (e: ChangeEvent<HTMLSelectElement>) => {
     const value = e.target.value as SortSelectType
 
     if (value !== sortOption) {
+      setSortOption(value)
       queryClient.removeQueries({ queryKey: [QUERYKEY.ALL_PROJECTS] })
       queryClient.refetchQueries({ queryKey: [QUERYKEY.ALL_PROJECTS] })
     }
-    setSortOption(value)
   }
 
   const handleChange = () => {
     setIsReleased(!isReleased)
-    refetchAllProject()
+    queryClient.removeQueries({ queryKey: [QUERYKEY.ALL_PROJECTS] })
+    queryClient.refetchQueries({ queryKey: [QUERYKEY.ALL_PROJECTS] })
   }
 
   useEffect(() => {
@@ -89,11 +92,13 @@ const ProjectListPage = () => {
       />
       <Container maxW={isLargerThan1200 ? "80%" : "95%"}>
         <Stack marginTop="15rem">
-          <ProjectFilter
-            sortOption={sortOption}
-            handleChange={handleChange}
-            handleSelect={handleSelect}
-          />
+          {projectCount ? (
+            <ProjectFilter
+              sortOption={sortOption}
+              handleChange={handleChange}
+              handleSelect={handleSelect}
+            />
+          ) : null}
           <ProjectList
             projects={allProjectList}
             isLoading={isLoading}
@@ -102,7 +107,6 @@ const ProjectListPage = () => {
           />
         </Stack>
       </Container>
-      <Box height="15rem" />
     </>
   )
 }

src/pages/ProjectListPage/components/SearchBarSection/SearchBarSection.tsx

@@ -62,6 +62,7 @@ const SearchBarSection = ({ search, onSubmit }: SearchBarSectionProps) => {
               onChange={handleChange}
             />
             <Button
+              type="submit"
               position="absolute"
               top="2.3rem"
               right="1rem"