Merge pull request #38 from Pro-Pofol/feature/#28-application_api

FIX :: application search & signup

src/app/application/EmptyDataSection.tsx

@@ -0,0 +1,25 @@
+'use client'
+
+interface EmptyDataSectionProps {
+    boldText: string
+    boldTextAfter: string
+    description: string
+}
+
+const EmptyDataSection = ({ boldText, boldTextAfter, description }: EmptyDataSectionProps) => {
+    return (
+        <section className="px-10">
+            <div className="border border-gray200 bg-gray50 w-full h-[360px] rounded-xl flex flex-col items-center justify-center gap-2 break-keep px-5">
+                <span className="text-titleMedium sm:text-titleSmall">
+                    <span className="text-blue500">{boldText}</span>
+                    {boldTextAfter}
+                </span>
+                <span className="text-bodyMedium sm:text-bodySmall text-gray600">
+                    {description}
+                </span>
+            </div>
+        </section>
+    )
+}
+
+export default EmptyDataSection

src/app/application/ShowSection.tsx

@@ -1,26 +1,21 @@
 'use client'
 import { ApplicationBox } from "@/components"
 import { getApplicationData } from "@/services"
-import { ApplicationFileType, ApplicationPreviewType, MajorType } from "@/types"
+import { ApplicationFileType, ApplicationPreviewType, MajorType, PostSearchType } from "@/types"
 import { getCookie, toast } from "@/utils"
-import { useSearchParams } from "next/navigation"
+import { useRouter, useSearchParams } from "next/navigation"
 import { useCallback, useEffect, useState } from "react"
-
-interface ApplicationDataModal {
-    kind: 'everything' | ApplicationFileType
-    major: MajorType,
-    keyword: string
-    sort: 'ASC' | 'DESC'
-}
+import EmptyDataSection from "./EmptyDataSection"
 
 const ShowSection = () => {
     const [hasToken, setHasToken] = useState<boolean>(false)
     const [orderType, setOrderType] = useState<'ASC' | 'DESC'>('ASC')
     const [searchWord, setSearchWord] = useState<string>('')
     const [applicationData, setApplicationData] = useState<ApplicationPreviewType[]>([])
     const searchParams = useSearchParams()
+    const router = useRouter()
 
-    const getData = useCallback(async (data: ApplicationDataModal) => {
+    const getData = useCallback(async (data: PostSearchType) => {
         const token = getCookie('access_token')
         if (!token) {
             toast.error('토큰이 없습니다!')
@@ -30,6 +25,9 @@ const ShowSection = () => {
         const newData = await getApplicationData(token, data)
             .then(res => {
                 toast.success('데이터를 성공적으로 불러왔습니다.')
+                if (res.status === 204) {
+                    return []
+                }
                 return res.data.posts
             }).catch(() => {
                 toast.error('데이터를 불러오는데 문제가 생겼습니다.')
@@ -41,8 +39,8 @@ const ShowSection = () => {
 
     useEffect(() => {
         const token = getCookie('access_token')
-        const data: ApplicationDataModal = {
-            kind: 'everything',
+        const data: PostSearchType = {
+            type: 'Everything',
             major: 'Frontend',
             keyword: '',
             sort: orderType
@@ -52,8 +50,8 @@ const ShowSection = () => {
             setSearchWord(searchParams.get('word') || '')
             data.keyword = searchParams.get('word') || ''
         }
-        if (searchParams.has('kind') && ['everything', 'Portfolio', 'PersonalStatement', 'Resume'].includes(searchParams.get('kind') as string)) {
-            data.kind = searchParams.get('kind') as ('everything' | ApplicationFileType)
+        if (searchParams.has('type') && ['Everything', 'Portfolio', 'PersonalStatement', 'Resume'].includes(searchParams.get('type') as string)) {
+            data.type = searchParams.get('type') as ('Everything' | ApplicationFileType)
         }
         if (searchParams.has('major')) {
             data.major = searchParams.get('major') as MajorType
@@ -92,19 +90,17 @@ const ShowSection = () => {
                             }
                         </section>
                         :
-                        <section className="px-10">
-                            <div className="border border-gray200 bg-gray50 w-full h-[360px] rounded-xl flex flex-col items-center justify-center gap-2 break-keep px-5">
-                                <span className="text-titleMedium sm:text-titleSmall"><span className="text-blue500">검색어</span>를 입력해주세요.</span>
-                                <span className="text-bodyMedium sm:text-bodySmall text-gray600">그 후 Enter를 누르거나 검색 버튼을 클릭해주세요.</span>
-                            </div>
-                        </section>
+                        <EmptyDataSection
+                            boldText="검색어"
+                            boldTextAfter="를 입력해주세요."
+                            description="그 후 Enter를 누르거나 검색 버튼을 클릭해주세요."
+                        />
                     :
-                    <section className="px-10">
-                        <div className="border border-gray200 bg-gray50 w-full h-[360px] rounded-xl flex flex-col items-center justify-center gap-2 break-keep px-5">
-                            <span className="text-titleMedium sm:text-titleSmall"><span className="text-blue500">로그인</span>이 필요한 서비스입니다.</span>
-                            <span className="text-bodyMedium sm:text-bodySmall text-gray600">먼저 로그인 후 이용해주세요.</span>
-                        </div>
-                    </section>
+                    <EmptyDataSection
+                        boldText="로그인"
+                        boldTextAfter="이 필요한 서비스입니다."
+                        description="먼저 로그인 후 이용해주세요."
+                    />
             }
         </section>
     )

src/app/application/SideBar.tsx

@@ -2,20 +2,21 @@
 import { Bag, Portfolio, Search } from "@/assets"
 import { useCallback, useEffect, useState } from "react"
 import { SideSelect } from "./SideSelect"
-import { usePathname, useRouter, useSearchParams } from "next/navigation"
+import { useParams, usePathname, useRouter, useSearchParams } from "next/navigation"
 import { ApplicationFileType, MajorType } from "@/types"
 
 type KindType = '모든 종류' | '포트폴리오' | '자기소개서' | '이력서'
+type KindEnglish = 'Everything' | ApplicationFileType
 const kindData: KindType[] = ['모든 종류', '포트폴리오', '자기소개서', '이력서']
-const tagToKorean: Record<'everything' | ApplicationFileType, KindType> = {
-    everything: '모든 종류',
+const tagToKorean: Record<KindEnglish, KindType> = {
+    Everything: '모든 종류',
     Portfolio: '포트폴리오',
     PersonalStatement: '자기소개서',
     Resume: '이력서',
 }
 
-const tagToEnglish: Record<KindType, 'everything' | ApplicationFileType> = {
-    '모든 종류': 'everything',
+const tagToEnglish: Record<KindType, KindEnglish> = {
+    '모든 종류': 'Everything',
     포트폴리오: 'Portfolio',
     자기소개서: 'PersonalStatement',
     이력서: 'Resume',
@@ -24,29 +25,29 @@ const tagToEnglish: Record<KindType, 'everything' | ApplicationFileType> = {
 const majorData: MajorType[] = ['Frontend', 'Backend', 'Android', 'iOS', 'CrossPlatform', 'AI', 'DevOps', 'Design', 'Game', 'Blockchain']
 
 interface ApplicationDataModal {
-    kind: KindType
+    type: KindType
     major: MajorType,
     searchWord: string
 }
 
 const SideBar = () => {
     const [data, setData] = useState<ApplicationDataModal>({
-        kind: '모든 종류',
+        type: '모든 종류',
         major: 'Frontend',
         searchWord: ''
     })
     const router = useRouter()
     const searchParams = useSearchParams()
 
-    const changeData = useCallback((name: 'kind' | 'major' | 'searchWord') => (value: string) => {
+    const changeData = useCallback((name: 'type' | 'major' | 'searchWord') => (value: string) => {
         setData(prev => ({ ...prev, [name]: value }))
     }, [])
 
     const changeParams = useCallback(() => {
         const param = new URLSearchParams(searchParams.toString())
 
         param.set('major', data.major)
-        param.set('kind', tagToEnglish[data.kind as KindType])
+        param.set('type', tagToEnglish[data.type as KindType])
         param.set('word', data.searchWord)
 
         router.push(`application?${param}`)
@@ -56,8 +57,8 @@ const SideBar = () => {
         if (searchParams.has('word')) {
             changeData('searchWord')(searchParams.get('word') || '')
         }
-        if (searchParams.has('kind') && ['everything', 'Portfolio', 'PersonalStatement', 'Resume'].includes(searchParams.get('kind') as string)) {
-            changeData('kind')(tagToKorean[searchParams.get('kind') as ('everything' | ApplicationFileType)])
+        if (searchParams.has('type') && ['Everything', 'Portfolio', 'PersonalStatement', 'Resume'].includes(searchParams.get('type') as string)) {
+            changeData('type')(tagToKorean[searchParams.get('type') as ('Everything' | ApplicationFileType)])
         }
         if (searchParams.has('major')) {
             changeData('major')(searchParams.get('major') as MajorType)
@@ -84,8 +85,8 @@ const SideBar = () => {
                     icon={<Portfolio size={16} />}
                     title='지원서 종류'
                     display={kindData}
-                    value={data.kind}
-                    setValue={changeData('kind')}
+                    value={data.type}
+                    setValue={changeData('type')}
                     open
                 />
                 <div className="w-full h-px bg-gray200" />

src/components/modal/SignupModal.tsx

@@ -20,7 +20,7 @@ export const SignupModal = ({ kind }: { kind: string }) => {
     const signupJson: AuthSignupType = {
       generation: +generation,
       name: name,
-      major: major,
+      user_major: major,
     }
     const access_token = getCookie('Access_Token')
     await authSignup(kind as AuthKindType, access_token || '', signupJson).then(

src/services/post/getApplicationData.ts

@@ -1,6 +1,5 @@
 import { ApplicationPreviewType } from "@/types/applicationPreview.type"
 import { instance } from "../interceptor"
-import { cookies } from "next/headers"
 import { PostSearchType } from "@/types"
 
 interface GetApplicationDataResponseType {

src/types/authSignupType.ts

@@ -4,5 +4,5 @@ export type AuthSignupType = {
   generation: number
   name?: string
   profile_image?: string
-  major?: string
+  user_major?: string
 }

src/types/post/postSearch.type.ts

@@ -2,7 +2,7 @@ import { ApplicationFileType, MajorType } from ".."
 
 export interface PostSearchType {
     keyword: string
-    kind: 'everything' | ApplicationFileType
+    type: 'Everything' | ApplicationFileType
     major: MajorType,
     sort: 'ASC' | 'DESC'
 }