diff --git a/src/app/application/EmptyDataSection.tsx b/src/app/application/EmptyDataSection.tsx new file mode 100644 index 0000000..59b5e67 --- /dev/null +++ b/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 ( +
+
+ + {boldText} + {boldTextAfter} + + + {description} + +
+
+ ) +} + +export default EmptyDataSection \ No newline at end of file diff --git a/src/app/application/ShowSection.tsx b/src/app/application/ShowSection.tsx index eccad4c..e9332df 100644 --- a/src/app/application/ShowSection.tsx +++ b/src/app/application/ShowSection.tsx @@ -1,17 +1,11 @@ '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(false) @@ -19,8 +13,9 @@ const ShowSection = () => { const [searchWord, setSearchWord] = useState('') const [applicationData, setApplicationData] = useState([]) 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 = () => { } : -
-
- 검색어를 입력해주세요. - 그 후 Enter를 누르거나 검색 버튼을 클릭해주세요. -
-
+ : -
-
- 로그인이 필요한 서비스입니다. - 먼저 로그인 후 이용해주세요. -
-
+ } ) diff --git a/src/app/application/SideBar.tsx b/src/app/application/SideBar.tsx index 2ddb659..1a5e778 100644 --- a/src/app/application/SideBar.tsx +++ b/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 = { + Everything: '모든 종류', Portfolio: '포트폴리오', PersonalStatement: '자기소개서', Resume: '이력서', } -const tagToEnglish: Record = { - '모든 종류': 'everything', +const tagToEnglish: Record = { + '모든 종류': 'Everything', 포트폴리오: 'Portfolio', 자기소개서: 'PersonalStatement', 이력서: 'Resume', @@ -24,21 +25,21 @@ const tagToEnglish: Record = { 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({ - 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 })) }, []) @@ -46,7 +47,7 @@ const SideBar = () => { 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={} title='지원서 종류' display={kindData} - value={data.kind} - setValue={changeData('kind')} + value={data.type} + setValue={changeData('type')} open />
diff --git a/src/components/modal/SignupModal.tsx b/src/components/modal/SignupModal.tsx index 5fae187..fddc91d 100644 --- a/src/components/modal/SignupModal.tsx +++ b/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( diff --git a/src/services/post/getApplicationData.ts b/src/services/post/getApplicationData.ts index 8f6b616..03d5b8a 100644 --- a/src/services/post/getApplicationData.ts +++ b/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 { diff --git a/src/types/authSignupType.ts b/src/types/authSignupType.ts index 0bbbe0b..d55f9e6 100644 --- a/src/types/authSignupType.ts +++ b/src/types/authSignupType.ts @@ -4,5 +4,5 @@ export type AuthSignupType = { generation: number name?: string profile_image?: string - major?: string + user_major?: string } diff --git a/src/types/post/postSearch.type.ts b/src/types/post/postSearch.type.ts index 2f9a628..c1d24de 100644 --- a/src/types/post/postSearch.type.ts +++ b/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' } \ No newline at end of file