Merge branch 'dev' of https://github.com/side-peek/sidepeek_frontend …

…into feature/#47/projectForm

src/mocks/handlers.ts

@@ -2,6 +2,7 @@ import { rest } from "msw"
 
 import { searchHandlers } from "@components/Search/mocks"
 
+import allProjectHandlers from "@pages/HomePage/mocks"
 import { projectDetailHandlers } from "@pages/ProjectDetailPage/mocks"
 
 import { postEmailLogin } from "./auth/postEmailLogin.mock"
@@ -29,6 +30,7 @@ export const handlers = [
   }),
   ...projectDetailHandlers,
   ...searchHandlers,
+  ...allProjectHandlers,
   postEmailRefresh,
   postEmailLogin,
 ]

src/pages/HomePage/HomePage.tsx

@@ -1,5 +1,125 @@
+import { ChangeEvent, useState } from "react"
+import { Link } from "react-router-dom"
+
+import {
+  Box,
+  Button,
+  Center,
+  Checkbox,
+  Container,
+  Grid,
+  GridItem,
+  HStack,
+  Select,
+  Skeleton,
+  Spacer,
+  Stack,
+} from "@chakra-ui/react"
+
+import ProjectCard from "@components/ProjectCard/ProjectCard"
+
+import Banner from "./components/Banner/Banner"
+import useAllProjectQuery from "./hooks/queries/useAllProjectQuery"
+
+type SelectType = "default" | "likeCount" | "viewCount"
+
 const HomePage = () => {
-  return <div>HomePage</div>
+  const [isDeploy, setIsDeploy] = useState(false)
+  const [selectedOption, setSelectedOption] = useState<SelectType>("default")
+
+  // 프로젝트 전체 목록 조회
+  const { allProjectList, isAllProjectLoading } = useAllProjectQuery()
+
+  const projectList = allProjectList?.projects.filter((project) =>
+    isDeploy ? project.isDeploy : project,
+  )
+
+  const handleSelect = (e: ChangeEvent<HTMLSelectElement>) => {
+    const value = e.target.value as SelectType
+    setSelectedOption(value)
+  }
+  return (
+    <>
+      {/* 임시로 다섯개 잘라서 넣었습니다*/}
+      {isAllProjectLoading ? (
+        <Skeleton height="52rem" />
+      ) : (
+        <Banner bannerList={allProjectList?.projects.slice(0, 5)} />
+      )}
+      <Container maxW="80%">
+        <Stack marginTop="15rem">
+          <HStack spacing={5}>
+            <Spacer />
+            <Checkbox
+              paddingRight="0.3rem"
+              onChange={() => setIsDeploy(!isDeploy)}>
+              출시 서비스만 보기
+            </Checkbox>
+            <Select
+              width="10rem"
+              variant="outline"
+              marginRight="1rem"
+              onChange={handleSelect}
+              value={selectedOption}>
+              <option value="default">최신순</option>
+              <option value="likeCount">인기순</option>
+              <option value="viewCount">조회순</option>
+            </Select>
+          </HStack>
+          <Grid
+            templateColumns="repeat(4, 1fr)"
+            gap={4}>
+            {isAllProjectLoading ? (
+              <>
+                <Skeleton
+                  height="20rem"
+                  borderRadius="1rem"
+                />
+                <Skeleton
+                  height="20rem"
+                  borderRadius="1rem"
+                />
+                <Skeleton
+                  height="20rem"
+                  borderRadius="1rem"
+                />
+                <Skeleton
+                  height="20rem"
+                  borderRadius="1rem"
+                />
+              </>
+            ) : (
+              projectList?.map((project) => (
+                <GridItem key={project.id}>
+                  <Link to={`/project/${project.id}`}>
+                    <ProjectCard
+                      imgUrl={project.thumbnailUrl}
+                      viewCount={project.viewCount}
+                      heartCount={project.likeCount}
+                      isFullHeart={project.isLiked}
+                      title={project.name}
+                      content={project.subName}
+                    />
+                  </Link>
+                </GridItem>
+              ))
+            )}
+          </Grid>
+          <Center marginTop="2rem">
+            <Button
+              width="8rem"
+              height="3rem"
+              backgroundColor="blue.100"
+              color="white">
+              더보기
+            </Button>
+          </Center>
+        </Stack>
+        <Box height="20rem" />
+      </Container>
+      {/* 푸터 들어갈 자리 */}
+    </>
+  )
 }
 
 export default HomePage

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

@@ -0,0 +1,26 @@
+import { Swiper } from "swiper/react"
+
+import styled from "styled-components"
+
+export const CustomSwiper = styled(Swiper)`
+  .swiper-button-prev,
+  .swiper-button-next {
+    opacity: 0;
+    border-radius: 10rem;
+    color: white;
+
+    &:hover {
+      opacity: 0.8;
+      transition: 0.2s ease-out;
+    }
+
+    &:after {
+      font-size: 2.2rem !important;
+      font-weight: 600 !important;
+    }
+  }
+
+  .swiper-pagination-bullet {
+    background: ${({ theme }) => theme.yellow[100]} !important;
+  }
+`

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

@@ -0,0 +1,75 @@
+import { Link, useNavigate } from "react-router-dom"
+
+import {
+  HStack,
+  Heading,
+  Image,
+  Spacer,
+  Stack,
+  Text,
+  useTheme,
+} from "@chakra-ui/react"
+import { AllProject } from "api-models"
+import "swiper/css"
+import "swiper/css"
+import "swiper/css/navigation"
+import "swiper/css/pagination"
+import { Autoplay, Navigation, Pagination } from "swiper/modules"
+import { SwiperSlide } from "swiper/react"
+
+import { CustomSwiper } from "./Banner.style"
+
+interface bannerListProps {
+  bannerList: AllProject[] | undefined
+}
+
+const Banner = ({ bannerList }: bannerListProps) => {
+  const navigate = useNavigate()
+  const theme = useTheme()
+
+  return (
+    <CustomSwiper
+      theme={theme.colors}
+      modules={[Navigation, Pagination, Autoplay]}
+      navigation
+      pagination={{ clickable: true }}
+      style={{ height: "52rem" }}
+      autoplay={{ delay: 5000, disableOnInteraction: false }}>
+      {bannerList?.map((project) => (
+        <SwiperSlide
+          style={{
+            backgroundColor: `${theme.colors.blue[100]}`,
+            color: "white",
+          }}
+          key={project.id}>
+          <HStack height="90%">
+            <Image
+              src={project.thumbnailUrl}
+              alt="projectImg"
+              height="90%"
+              marginTop="4rem"
+              borderRadius="5rem"
+              marginLeft="13rem"
+              cursor="pointer"
+              onClick={() => navigate(`/project/${project.id}`)}
+            />
+            <Spacer />
+            <Stack
+              marginRight="13rem"
+              textAlign="right">
+              <Link to={`/project/${project.id}`}>
+                <Text
+                  fontSize="xl"
+                  padding="1rem">
+                  {project.subName}
+                </Text>
+                <Heading>{project.name}</Heading>
+              </Link>
+            </Stack>
+          </HStack>
+        </SwiperSlide>
+      ))}
+    </CustomSwiper>
+  )
+}
+export default Banner

src/pages/HomePage/hooks/queries/useAllProjectQuery.ts

@@ -0,0 +1,18 @@
+import { useQuery } from "@tanstack/react-query"
+
+import { getAllProjects } from "@/api/project/getAllProjects"
+
+const useAllProjectQuery = () => {
+  const { data, isLoading, refetch } = useQuery({
+    queryKey: ["projects"],
+    queryFn: () => getAllProjects(),
+  })
+
+  return {
+    allProjectList: data,
+    isAllProjectLoading: isLoading,
+    refetchAllProject: refetch,
+  }
+}
+
+export default useAllProjectQuery

src/pages/HomePage/mocks/index.ts

@@ -0,0 +1,13 @@
+import { rest } from "msw"
+
+import { ENDPOINTS } from "@constants/endPoints"
+
+import { mockData } from "./mockData"
+
+const allProjectHandlers = [
+  rest.get(ENDPOINTS.GET_ALL_PROJECTS, (_, res, ctx) => {
+    return res(ctx.status(200), ctx.json(mockData))
+  }),
+]
+
+export default allProjectHandlers