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

…into refactor/#150/ProjectForm

src/apis/auth/getGithubLogin.ts

@@ -0,0 +1,21 @@
+import { getGithubLoginPayload, getGithubLoginResponseType } from "api-models"
+
+import authToken from "@stores/authToken"
+
+import { ENDPOINTS } from "@constants/endPoints"
+
+import { baseInstance } from "../axiosInstance"
+
+export const getGithubLogin = async ({
+  code,
+  state,
+}: getGithubLoginPayload) => {
+  const { data } = await baseInstance.get<getGithubLoginResponseType>(
+    `${ENDPOINTS.GITHUB_LOGIN}?code=${code}&state=${state}`,
+  )
+
+  authToken.setAccessToken(data.accessToken)
+  authToken.setRefreshToken(data.refreshToken)
+
+  return data
+}

src/apis/auth/postEmailAuth.ts

@@ -5,7 +5,6 @@ import { ENDPOINTS } from "@constants/endPoints"
 import { authInstance } from "../axiosInstance"
 
 export const postEmailAuth = async () => {
-  //TODO: accessToken을 소셜 로그인과 이메일 로그인으로 분리하기위해 접두어로 'email', 'github' 등을 붙여야해서 slice로 잘라내는 작업 필요
   const { data } = await authInstance.post<postEmailAuthResponseType>(
     ENDPOINTS.EMAIL_AUTH,
   )

src/apis/project/getAllProjects.ts

@@ -11,7 +11,14 @@ import { baseInstance } from "../axiosInstance"
  * @brief 전체 프로젝트 목록을 가져옵니다
  */
 export const getAllProjects = async (
-  { sortOption, isReleased, lastProjectId, lastProject }: getAllProjectsType,
+  {
+    sortOption,
+    isReleased,
+    lastProjectId,
+    lastProject,
+    search,
+    skill,
+  }: getAllProjectsType,
   config: AxiosRequestConfig = {
     headers: {
       Authorization: `Bearer ${authToken.getAccessToken()}`,
@@ -38,6 +45,8 @@ export const getAllProjects = async (
         pageSize: 10,
         lastProjectId,
         lastOrderCount,
+        search,
+        skill: skill?.join(","),
       },
     },
   )

src/components/ErrorBoundary/AuthErrorBoundary/AuthErrorBoundary.tsx

@@ -28,14 +28,12 @@ class AuthErrorBoundary extends Component<AuthErrorBoundaryProps, State> {
   }
 
   static getDerivedStateFromError(error: Error) {
-    // 에러를 잡아서 state를 업데이트하여 다음 렌더링에서 폴백 UI를 보여줄 수 있게 합니다.
     if (isAuthError(error)) {
       return { error }
     }
   }
 
   componentDidCatch(error: Error) {
-    // LogoutError를 받으면 로그아웃합니다.
     if (error instanceof LogoutError) {
       this.props.logout()
     }
@@ -47,9 +45,6 @@ class AuthErrorBoundary extends Component<AuthErrorBoundaryProps, State> {
   }
 
   render() {
-    // Logout이나 Permission 에러가 발생한 경우 모달을 띄웁니다.
-    console.log(this.state.error)
-
     return (
       <>
         {this.state.error ? (

src/components/ErrorBoundary/ErrorBoundaries.tsx

@@ -5,17 +5,20 @@ import { QueryErrorResetBoundary } from "@tanstack/react-query"
 import useLogout from "@hooks/useLogout"
 
 import AuthErrorBoundary from "./AuthErrorBoundary/AuthErrorBoundary"
+import UncaughtErrorBoundary from "./UncaughtErrorBoundary/UncaughtErrorBoundary"
 
 const ErrorBoundaries = ({ children }: PropsWithChildren) => {
   const logout = useLogout()
   return (
     <QueryErrorResetBoundary>
       {({ reset }) => (
-        <AuthErrorBoundary
-          logout={logout}
-          reset={reset}>
-          {children}
-        </AuthErrorBoundary>
+        <UncaughtErrorBoundary reset={reset}>
+          <AuthErrorBoundary
+            logout={logout}
+            reset={reset}>
+            {children}
+          </AuthErrorBoundary>
+        </UncaughtErrorBoundary>
       )}
     </QueryErrorResetBoundary>
   )

src/components/ErrorBoundary/UncaughtErrorBoundary/UncaughtErrorBoundary.tsx

@@ -0,0 +1,49 @@
+import { Component, PropsWithChildren } from "react"
+
+import UncaughtFallback from "./components/UncaughtFallback"
+
+type State = {
+  error: Error | null
+}
+
+interface UncaughtErrorBoundaryProps extends PropsWithChildren {
+  reset: () => void
+}
+
+class UncaughtErrorBoundary extends Component<
+  UncaughtErrorBoundaryProps,
+  State
+> {
+  constructor(props: UncaughtErrorBoundaryProps) {
+    super(props)
+    this.state = {
+      error: null,
+    }
+  }
+
+  static getDerivedStateFromError(error: Error) {
+    return { error }
+  }
+
+  handleReset = () => {
+    this.props.reset()
+    this.setState({ error: null })
+  }
+
+  render() {
+    return (
+      <>
+        {this.state.error ? (
+          <UncaughtFallback
+            onReset={this.handleReset}
+            error={this.state.error}
+          />
+        ) : (
+          this.props.children
+        )}
+      </>
+    )
+  }
+}
+
+export default UncaughtErrorBoundary

src/components/ErrorBoundary/UncaughtErrorBoundary/components/UncaughtFallback.tsx

@@ -0,0 +1,42 @@
+import { GrPowerReset } from "react-icons/gr"
+import { useNavigate } from "react-router-dom"
+
+import { Center, Icon, IconButton, Text, VStack } from "@chakra-ui/react"
+
+interface UncaughtFallbackProps {
+  error: Error
+  onReset: () => void
+}
+
+const UncaughtFallback = ({ error, onReset }: UncaughtFallbackProps) => {
+  const navigate = useNavigate()
+  return (
+    <Center
+      width="100vw"
+      height="100vh">
+      <VStack gap="5rem">
+        <Text
+          fontFamily="SCDream_Bold"
+          fontSize="8rem">
+          😓 {error.name}
+        </Text>
+        <IconButton
+          aria-label="reset"
+          icon={
+            <Icon
+              as={GrPowerReset}
+              w={20}
+              h={20}
+            />
+          }
+          onClick={() => {
+            onReset()
+            navigate("/")
+          }}
+        />
+      </VStack>
+    </Center>
+  )
+}
+
+export default UncaughtFallback

src/components/Header/Header.tsx

@@ -1,4 +1,6 @@
+import { useRef } from "react"
 import { IoSearch } from "react-icons/io5"
+import { useNavigate } from "react-router-dom"
 
 import {
   Box,
@@ -17,12 +19,21 @@ import LoginButton from "./components/LoginButton"
 import Menu from "./components/Menu/Menu"
 
 const Header = () => {
+  const navigate = useNavigate()
   const isLoggedIn = useUserInfoData()
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    if (inputRef.current) {
+      navigate(`/project?search=${inputRef.current.value}`)
+      inputRef.current.value = ""
+    }
+  }
+
   return (
     <HeaderContainer>
-      {/* 로고 */}
       <LogoLink logoHeight="7rem" />
-      {/* 검색창 */}
       <Box
         pl="1.5rem"
         alignSelf="end"
@@ -35,15 +46,17 @@ const Header = () => {
               h="2rem"
             />
           </InputRightElement>
-          <Input
-            size="lg"
-            variant="flushed"
-            placeholder="검색어를 입력하세요"
-          />
+          <form onSubmit={handleSubmit}>
+            <Input
+              ref={inputRef}
+              size="lg"
+              variant="flushed"
+              placeholder="검색어를 입력하세요"
+            />
+          </form>
         </InputGroup>
       </Box>
       <Spacer />
-      {/* 메뉴 */}
       {isLoggedIn ? <Menu /> : <LoginButton />}
     </HeaderContainer>
   )

src/components/ProjectCard/ProjectCard.tsx

@@ -1,6 +1,7 @@
 import { ForwardedRef, forwardRef } from "react"
 import { IoMdHeart, IoMdHeartEmpty } from "react-icons/io"
 import { MdRemoveRedEye } from "react-icons/md"
+import { useNavigate } from "react-router-dom"
 
 import {
   Box,
@@ -22,6 +23,7 @@ interface ProjectCardProps {
   isFullHeart: boolean
   title: string
   content: string
+  url: string
 }
 
 const ProjectCard = forwardRef(
@@ -33,13 +35,17 @@ const ProjectCard = forwardRef(
       isFullHeart,
       title,
       content,
+      url,
     }: ProjectCardProps,
     ref: ForwardedRef<HTMLDivElement>,
   ) => {
+    const navigate = useNavigate()
+
     return (
       <Box
         ref={ref}
         width="100%"
+        onClick={() => navigate(url)}
         padding="1rem"
         cursor="pointer">
         <Box
@@ -51,6 +57,8 @@ const ProjectCard = forwardRef(
             src={imgUrl}
             alt="projectImg"
             width="100%"
+            height="27rem"
+            objectFit="cover"
             fallbackSrc={noImage}
           />
           <Center

src/components/ProjectFilter/ProjectFilter.tsx

@@ -0,0 +1,40 @@
+import { ChangeEvent } from "react"
+
+import { Checkbox, HStack, Select, Spacer } from "@chakra-ui/react"
+
+import { SortSelectType } from "@pages/HomePage/types/type"
+
+interface ProjectFilterProps {
+  handleChange: () => void
+  sortOption: SortSelectType
+  handleSelect: (e: ChangeEvent<HTMLSelectElement>) => void
+}
+
+const ProjectFilter = ({
+  handleChange,
+  sortOption,
+  handleSelect,
+}: ProjectFilterProps) => {
+  return (
+    <HStack spacing={5}>
+      <Spacer />
+      <Checkbox
+        paddingRight="0.3rem"
+        onChange={handleChange}>
+        출시 서비스만 보기
+      </Checkbox>
+      <Select
+        width="10rem"
+        variant="outline"
+        marginRight="1rem"
+        onChange={handleSelect}
+        value={sortOption}>
+        <option value="createdAt">최신순</option>
+        <option value="like">인기순</option>
+        <option value="view">조회순</option>
+      </Select>
+    </HStack>
+  )
+}
+
+export default ProjectFilter