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

…into feature/#47/projectForm

.github/actions/reviewers/action.js

@@ -10,12 +10,20 @@ try {
   const { owner, repo } = context.repo
   const pull_number = context.issue.number
 
-  await octokit.rest.pulls.requestReviewers({
+  const response = await octokit.rest.pulls.listRequestedReviewers({
     owner,
     repo,
     pull_number,
-    reviewers: reviewers,
   })
+
+  if (response.data.users.length < 2) {
+    await octokit.rest.pulls.requestReviewers({
+      owner,
+      repo,
+      pull_number,
+      reviewers: reviewers,
+    })
+  }
 } catch (error) {
   setFailed(error.message)
 }

package.json

@@ -34,6 +34,7 @@
     "react-router-dom": "^6.22.0",
     "rollup": "^4.10.0",
     "styled-components": "^6.1.8",
+    "swiper": "^11.0.6",
     "zustand": "^4.5.0"
   },
   "devDependencies": {

src/mocks/handlers.ts

@@ -1,3 +1,34 @@
+import { rest } from "msw"
+
 import { searchHandlers } from "@components/Search/mocks"
 
-export const handlers = [...searchHandlers]
+import { projectDetailHandlers } from "@pages/ProjectDetailPage/mocks"
+
+import { postEmailLogin } from "./auth/postEmailLogin.mock"
+import { postEmailRefresh } from "./auth/postEmailRefresh.mock"
+
+export const handlers = [
+  rest.get("/api/v1/skills", (_, res, ctx) => {
+    return res(
+      ctx.status(200),
+      ctx.json({
+        skills: [
+          {
+            id: 2,
+            name: "spring",
+            iconImageUrl: "https://www.iconimageurl.com",
+          },
+          {
+            id: 3,
+            name: "swift",
+            iconImageUrl: "https://www.iconimageurl.com",
+          },
+        ],
+      }),
+    )
+  }),
+  ...projectDetailHandlers,
+  ...searchHandlers,
+  postEmailRefresh,
+  postEmailLogin,
+]

src/pages/ProjectDetailPage/ProjectDetailPage.tsx

@@ -1,5 +1,18 @@
+import { useParams } from "react-router-dom"
+
+import { Center } from "@chakra-ui/react"
+
+import ProjectDetailSummary from "./components/ProjectDetailSummary"
+import useProjectDetailQuery from "./hooks/queries/useProjectDetailQuery"
+
 const ProjectDetailPage = () => {
-  return <div>ProjectDetailPage</div>
+  const { projectId } = useParams()
+
+  const { data } = useProjectDetailQuery(Number(projectId))
+  if (!data) {
+    return <Center>Loading</Center>
+  }
+  return <ProjectDetailSummary projects={data.projects} />
 }
 
 export default ProjectDetailPage

src/pages/ProjectDetailPage/components/ProjectDetailSummary.tsx

@@ -0,0 +1,61 @@
+import { Box, Center, Flex } from "@chakra-ui/react"
+import { Project } from "api-models"
+
+import ProjectDetailSummaryContent from "./ProjectDetailSummaryContent/ProjectDetailSummaryContent"
+import ProjectDetailSummaryTitle from "./ProjectDetailSummaryTitle/ProjectDetailSummaryTitle"
+import ProjectDetailSummaryTop from "./ProjectDetailSummaryTop/ProjectDetailSummaryTop"
+
+interface ProjectDetailSummaryProps {
+  projects: Project[]
+}
+const ProjectDetailSummary = ({ projects }: ProjectDetailSummaryProps) => {
+  const {
+    deployUrl,
+    githubUrl,
+    name,
+    subName,
+    overviewImageUrl,
+    viewCount,
+    likeCount,
+    commentCount,
+    overview,
+  } = projects[0]
+  return (
+    <Box bg="whiteSmoke">
+      <Flex
+        maxW="128rem"
+        flexDirection="column"
+        m="0 auto"
+        p="2rem">
+        <Flex flexDirection="column">
+          <ProjectDetailSummaryTop
+            {...{
+              likeCount,
+              viewCount,
+              commentCount,
+            }}
+          />
+
+          <Center
+            flexDirection="column"
+            gap="5rem">
+            <ProjectDetailSummaryTitle
+              name={name}
+              subName={subName}
+            />
+            <ProjectDetailSummaryContent
+              {...{
+                overviewImageUrl,
+                overview,
+                deployUrl,
+                githubUrl,
+              }}
+            />
+          </Center>
+        </Flex>
+      </Flex>
+    </Box>
+  )
+}
+
+export default ProjectDetailSummary

src/pages/ProjectDetailPage/components/ProjectDetailSummaryContent/ProjectDetailSummaryContent.tsx

@@ -0,0 +1,36 @@
+import { Flex } from "@chakra-ui/react"
+import { ProjectOverViewUrl } from "api-models"
+
+import ProjectDetailSummaryLeft from "./ProjectDetailSummaryLeft"
+import ProjectDetailSummaryRight from "./ProjectDetailSummaryRight"
+
+interface ProjectDetailSummaryContentProps {
+  deployUrl: string
+  githubUrl: string
+  overviewImageUrl: ProjectOverViewUrl[]
+  overview: string
+}
+
+const ProjectDetailSummaryContent = ({
+  deployUrl,
+  githubUrl,
+  overviewImageUrl,
+  overview,
+}: ProjectDetailSummaryContentProps) => {
+  return (
+    <Flex
+      justifyContent="space-between"
+      w="100%">
+      <ProjectDetailSummaryLeft
+        {...{
+          deployUrl,
+          githubUrl,
+          overview,
+        }}
+      />
+      <ProjectDetailSummaryRight overviewImageUrl={overviewImageUrl} />
+    </Flex>
+  )
+}
+
+export default ProjectDetailSummaryContent

src/pages/ProjectDetailPage/components/ProjectDetailSummaryContent/ProjectDetailSummaryLeft.tsx

@@ -0,0 +1,31 @@
+import { Flex } from "@chakra-ui/react"
+
+import ProjectDetailSummaryLink from "./ProjectDetailSummaryLink"
+import ProjectDetailSummaryText from "./ProjectDetailSummaryText"
+
+interface ProjectDetailSummaryLeftProps {
+  deployUrl: string
+  githubUrl: string
+  overview: string
+}
+const ProjectDetailSummaryLeft = ({
+  deployUrl,
+  githubUrl,
+  overview,
+}: ProjectDetailSummaryLeftProps) => {
+  return (
+    <Flex
+      flexDirection="column"
+      justifyContent="space-between">
+      <ProjectDetailSummaryText overview={overview} />
+      <ProjectDetailSummaryLink
+        {...{
+          deployUrl,
+          githubUrl,
+        }}
+      />
+    </Flex>
+  )
+}
+
+export default ProjectDetailSummaryLeft

src/pages/ProjectDetailPage/components/ProjectDetailSummaryContent/ProjectDetailSummaryLink.tsx

@@ -0,0 +1,40 @@
+import { FaGithub } from "react-icons/fa"
+import { TbWorld } from "react-icons/tb"
+
+import { Flex } from "@chakra-ui/react"
+
+import ProjectDetailSummaryLinkButton from "./ProjectDetailSummaryLinkButton"
+
+interface ProjectDetailSummaryLinkProps {
+  deployUrl: string
+  githubUrl: string
+}
+
+const handleOpenNewTab = (url: string) => {
+  window.open(url, "_blank", "noopener, noreferrer")
+}
+
+const ProjectDetailSummaryLink = ({
+  deployUrl,
+  githubUrl,
+}: ProjectDetailSummaryLinkProps) => {
+  return (
+    <Flex gap="2rem">
+      <ProjectDetailSummaryLinkButton
+        linkName="WEB"
+        leftIcon={<TbWorld />}
+        bgColor="blue.100"
+        onClick={() => handleOpenNewTab(deployUrl)}
+      />
+
+      <ProjectDetailSummaryLinkButton
+        leftIcon={<FaGithub />}
+        bgColor="blue.300"
+        linkName="GithUb"
+        onClick={() => handleOpenNewTab(githubUrl)}
+      />
+    </Flex>
+  )
+}
+
+export default ProjectDetailSummaryLink

src/pages/ProjectDetailPage/components/ProjectDetailSummaryContent/ProjectDetailSummaryLinkButton.tsx

@@ -0,0 +1,25 @@
+import { Button, ButtonProps } from "@chakra-ui/react"
+
+interface ProjectDetailSummaryLinkButtonProps extends ButtonProps {
+  linkName: string
+}
+
+const ProjectDetailSummaryLinkButton = ({
+  linkName,
+  ...props
+}: ProjectDetailSummaryLinkButtonProps) => {
+  return (
+    <Button
+      borderRadius="2rem"
+      size="lg"
+      color="white"
+      fontSize="xl"
+      p="2.2rem 1.5rem"
+      _hover={{ opacity: "0.5" }}
+      {...props}>
+      {linkName}
+    </Button>
+  )
+}
+
+export default ProjectDetailSummaryLinkButton

src/pages/ProjectDetailPage/components/ProjectDetailSummaryContent/ProjectDetailSummaryRight.tsx

@@ -0,0 +1,75 @@
+import { useRef } from "react"
+import { MdArrowBackIosNew, MdArrowForwardIos } from "react-icons/md"
+
+import { Box, Image } from "@chakra-ui/react"
+import { ProjectOverViewUrl } from "api-models"
+import "swiper/css"
+import "swiper/css/pagination"
+import { Keyboard, Mousewheel, Navigation, Pagination } from "swiper/modules"
+import { SwiperSlide } from "swiper/react"
+import { Swiper as SwiperCore } from "swiper/types"
+
+import { StyledSwiper } from "../../styles/SwiperSlide.styles"
+import ProjectDetailSummaryRightIcon from "./ProjectDetailSummaryRightIcon"
+
+interface ProjectDetailSummaryRightProps {
+  overviewImageUrl: ProjectOverViewUrl[]
+}
+
+const swiperParams = {
+  loop: true,
+  pagination: {
+    clickable: true,
+  },
+  modules: [Navigation, Pagination, Mousewheel, Keyboard],
+}
+
+const ProjectDetailSummaryRight = ({
+  overviewImageUrl,
+}: ProjectDetailSummaryRightProps) => {
+  const swiperRef = useRef<SwiperCore>()
+
+  return (
+    <Box
+      maxW="43rem"
+      maxH="33rem"
+      position="relative">
+      <StyledSwiper
+        {...swiperParams}
+        onBeforeInit={(swiper) => (swiperRef.current = swiper)}>
+        {overviewImageUrl.map((overviewImg) => (
+          <SwiperSlide key={overviewImg.id}>
+            <Image
+              borderRadius="1rem"
+              src={overviewImg.url}
+              alt="project thumbnail"
+            />
+          </SwiperSlide>
+        ))}
+      </StyledSwiper>
+      <ProjectDetailSummaryRightIcon
+        direction="left"
+        aria-label="leftIcon"
+        onClick={() => swiperRef.current?.slidePrev()}
+        icon={
+          <MdArrowBackIosNew
+            style={{ width: "2rem", height: "2rem", color: "#7a7a7a" }}
+          />
+        }
+      />
+
+      <ProjectDetailSummaryRightIcon
+        direction="right"
+        aria-label="rightIcon"
+        onClick={() => swiperRef.current?.slideNext()}
+        icon={
+          <MdArrowForwardIos
+            style={{ width: "2rem", height: "2rem", color: "#7a7a7a" }}
+          />
+        }
+      />
+    </Box>
+  )
+}
+
+export default ProjectDetailSummaryRight

src/pages/ProjectDetailPage/components/ProjectDetailSummaryContent/ProjectDetailSummaryRightIcon.tsx

@@ -0,0 +1,32 @@
+import { IconButton, IconButtonProps } from "@chakra-ui/react"
+
+interface ProjectDetailSummaryRightIconProps extends IconButtonProps {
+  direction: string
+  onClick: () => void
+}
+
+const ProjectDetailSummaryRightIcon = ({
+  direction,
+  onClick,
+  ...props
+}: ProjectDetailSummaryRightIconProps) => {
+  const directionStyle =
+    direction === "left" ? { left: "-6%" } : { right: "-6%" }
+
+  return (
+    <IconButton
+      top="44%"
+      position="absolute"
+      bgColor="grey.300"
+      height="5rem"
+      width="5rem"
+      borderRadius="50%"
+      zIndex="5"
+      onClick={onClick}
+      {...directionStyle}
+      {...props}
+    />
+  )
+}
+
+export default ProjectDetailSummaryRightIcon