-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'develop' into feature/#28-application_api
- Loading branch information
Showing
37 changed files
with
887 additions
and
300 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,15 @@ | ||
/** @type {import('next').NextConfig} */ | ||
const nextConfig = {}; | ||
const nextConfig = { | ||
images: { | ||
remotePatterns: [ | ||
{ | ||
protocol: 'https', | ||
hostname: 'lh3.googleusercontent.com', | ||
port: '', | ||
pathname: '/**', | ||
}, | ||
], | ||
}, | ||
} | ||
|
||
export default nextConfig; | ||
export default nextConfig |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,107 +1,153 @@ | ||
"use client" | ||
'use client' | ||
|
||
import { Arrow, Bag, Delete, FileUpload, Linking, More } from "@/assets"; | ||
import { ApplicationDeleteModal } from "@/components/modal/ApplicationDelete"; | ||
import { getApplicationDetail } from "@/services/getApplicationDetail"; | ||
import { applicationType } from "@/types/applicationType"; | ||
import Link from "next/link"; | ||
import { usePathname } from "next/navigation"; | ||
import { useEffect, useState } from "react"; | ||
import { Arrow, Bag, Delete, FileUpload, Linking, More } from '@/assets' | ||
import { ApplicationDeleteModal } from '@/components/modal/ApplicationDelete' | ||
import { getApplicationDetail, getMe, getUser } from '@/services' | ||
import { ApplicationType, UserType } from '@/types' | ||
import Link from 'next/link' | ||
import { useEffect, useState } from 'react' | ||
|
||
export default function Detail({params}: {params: {id: number}}){ | ||
export default function Detail({ params }: { params: { id: number } }) { | ||
const [open, setOpen] = useState<boolean>(false) | ||
const [modal, setModal] = useState<boolean>(false) | ||
const [detailData, setDetailData] = useState<ApplicationType>() | ||
const [userData, setUserData] = useState<UserType>() | ||
const [myData, setMyData] = useState<UserType>() | ||
|
||
const [open, setOpen] = useState<boolean>(false) | ||
const [modal, setModal] = useState<boolean>(false) | ||
const [detailData, setDetailData] = useState() | ||
const getData = async () => { | ||
const data: ApplicationType = await getApplicationDetail(params.id) | ||
const user: UserType = await getUser(data.post_writer_id) | ||
setUserData(user) | ||
setDetailData(data) | ||
} | ||
|
||
useEffect(()=>{ | ||
async()=>{ | ||
const data = await getApplicationDetail(params.id) | ||
console.log(data) | ||
setDetailData(data) | ||
} | ||
},[detailData]) | ||
const MyData = async () => { | ||
const my = await getMe() | ||
setMyData(my) | ||
} | ||
|
||
return( | ||
<> | ||
{ | ||
modal && | ||
<ApplicationDeleteModal click={setModal} /> | ||
} | ||
<section className="w-full flex justify-center"> | ||
<article className="flex flex-col w-[50%] min-w-[600px] mt-16 gap-10"> | ||
<div className="flex justify-between items-center"> | ||
<div className="p-2 border border-gray200 rounded-lg cursor-pointer"> | ||
<Arrow direction="left"/> | ||
</div> | ||
<div className="cursor-pointer relative" onClick={()=>setOpen(!open)}> | ||
<More/> | ||
{ | ||
open && | ||
<button | ||
onClick={()=>setModal(!modal)} | ||
className="absolute top-8 right-1 flex items-center text-labelMedium gap-2 p-3 rounded-xl w-[160px] border border-gray200 bg-gray50" | ||
> | ||
<Delete className="text-gray800" /> | ||
자료 삭제하기 | ||
</button> | ||
} | ||
</div> | ||
</div> | ||
<div className="flex flex-col gap-4"> | ||
<div> | ||
<span className="px-4 py-[6px] text-attention bg-attentionBackground text-bodySmall rounded-full"> | ||
포트폴리오 | ||
</span> | ||
</div> | ||
<h1 className="text-headlineSmall text-black">개인적으로 완벽한 포트폴리오</h1> | ||
<div className="flex items-center gap-2 text-gray600"> | ||
<p>이강혁</p> | ||
<p>﹒</p> | ||
<p>2024.04.22. 14:07</p> | ||
</div> | ||
</div> | ||
<div className="bg-gray200 h-[1px]"/> | ||
<div className="flex items-center gap-10"> | ||
<div className="flex items-center gap-4"> | ||
<div className="p-3 bg-blue50 border border-blue100 rounded-xl"> | ||
<Bag className="text-blue500" size={28}/> | ||
</div> | ||
<div className="flex flex-col gap-[2px]"> | ||
<p className="text-bodySmall text-black">자료분야</p> | ||
<div className="flex items-center gap-2"> | ||
<p className="text-labelMedium text-gray600">Frontend</p> | ||
<p className="text-labelLarge text-gray300">|</p> | ||
<p className="text-labelMedium text-gray600">Backend</p> | ||
</div> | ||
</div> | ||
</div> | ||
<div className="flex items-center gap-4"> | ||
<div className="p-3 bg-blue50 border border-blue100 rounded-xl"> | ||
<FileUpload className="text-blue500" size={28}/> | ||
</div> | ||
<div className="flex flex-col gap-[2px]"> | ||
<p className="text-bodySmall text-black">자료형식</p> | ||
<div className="flex items-center gap-2"> | ||
<p className="text-labelMedium text-gray600">Web Link</p> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
<div className="bg-gray200 h-[1px]"/> | ||
<div className="flex flex-col gap-4 pb-[120px]"> | ||
<p className="text-titleSmall text-gray950">자료 미리보기</p> | ||
<embed className="w-full h-[100vh]" src="https://velog.io/@lgb9811/%EA%B0%9C%EB%B0%9C%EC%9E%90%EB%A1%9C-%EC%B7%A8%EC%A7%81%EA%B9%8C%EC%A7%80-%ED%95%B4%EB%86%93%EA%B3%A0-%EC%95%84%EC%A7%81%EB%8F%84-%EA%B0%9D%EC%B2%B4%EC%A7%80%ED%96%A5%EC%9D%B4-%EB%AD%94%EC%A7%80-%EB%AA%A8%EB%A5%B8%EB%8B%A4%EA%B3%A0" /> | ||
<Link target='_blank' href="https://velog.io/@lgb9811/%EA%B0%9C%EB%B0%9C%EC%9E%90%EB%A1%9C-%EC%B7%A8%EC%A7%81%EA%B9%8C%EC%A7%80-%ED%95%B4%EB%86%93%EA%B3%A0-%EC%95%84%EC%A7%81%EB%8F%84-%EA%B0%9D%EC%B2%B4%EC%A7%80%ED%96%A5%EC%9D%B4-%EB%AD%94%EC%A7%80-%EB%AA%A8%EB%A5%B8%EB%8B%A4%EA%B3%A0" className="flex itmes-center justify-between p-4 border border-gray200 bg-gray50 rounded-xl cursor-pointer"> | ||
<div className="flex items-center gap-3"> | ||
<p className="text-bodyMedium text-gray950">자료링크 이동</p> | ||
<p className="w-[400px] text-labelMedium text-gray600 whitespace-nowrap overflow-hidden text-ellipsis">https://velog.io/@lgb9811/%EA%B0%9C%EB%B0%9C%EC%9E%90%EB%A1%9C-%EC%B7%A8%EC%A7%81%EA%B9%8C%EC%A7%80-%ED%95%B4%EB%86%93%EA%B3%A0-%EC%95%84%EC%A7%81%EB%8F%84-%EA%B0%9D%EC%B2%B4%EC%A7%80%ED%96%A5%EC%9D%B4-%EB%AD%94%EC%A7%80-%EB%AA%A8%EB%A5%B8%EB%8B%A4%EA%B3%A0</p> | ||
</div> | ||
<Linking className="text-gray800"/> | ||
</Link> | ||
</div> | ||
</article> | ||
</section> | ||
</> | ||
); | ||
const DateFormat = () => { | ||
if (detailData?.post_created_at) { | ||
const DateObj = new Date(detailData.post_created_at) | ||
|
||
const year = String(DateObj.getFullYear()) | ||
let month = String(DateObj.getMonth() + 1) | ||
let day = String(DateObj.getDate()) | ||
let hour = String(DateObj.getHours()) | ||
let minute = String(DateObj.getMinutes()) | ||
|
||
month = Number(month) >= 10 ? month : '0' + month | ||
day = Number(day) >= 10 ? day : '0' + day | ||
hour = Number(hour) >= 10 ? hour : '0' + hour | ||
minute = Number(minute) >= 10 ? minute : '0' + minute | ||
return year + '.' + month + '.' + day + '.' + ' ' + hour + ':' + minute | ||
} | ||
} | ||
|
||
useEffect(() => { | ||
getData() | ||
MyData() | ||
}, []) | ||
|
||
return ( | ||
<> | ||
{modal && ( | ||
<ApplicationDeleteModal postId={detailData?.post_id} click={setModal} /> | ||
)} | ||
<section className="w-full flex justify-center"> | ||
<article className="flex flex-col w-[50%] min-w-[600px] mt-16 gap-10"> | ||
<div className="flex justify-between items-center"> | ||
<div className="p-2 border border-gray200 rounded-lg cursor-pointer"> | ||
<Arrow direction="left" /> | ||
</div> | ||
{userData?.oauth_id === myData?.oauth_id && ( | ||
<div | ||
className="cursor-pointer relative" | ||
onClick={() => setOpen(!open)} | ||
> | ||
<More /> | ||
{open && ( | ||
<button | ||
onClick={() => setModal(!modal)} | ||
className="absolute top-8 right-1 flex items-center text-labelMedium gap-2 p-3 rounded-xl w-[160px] border border-gray200 bg-gray50" | ||
> | ||
<Delete className="text-gray800" /> | ||
자료 삭제하기 | ||
</button> | ||
)} | ||
</div> | ||
)} | ||
</div> | ||
<div className="flex flex-col gap-4"> | ||
<div> | ||
<span className="px-4 py-[6px] text-attention bg-attentionBackground text-bodySmall rounded-full"> | ||
{detailData?.post_post_type === 'Portfolio' | ||
? '포트폴리오' | ||
: detailData?.post_post_type === 'Resume' | ||
? '이력서' | ||
: detailData?.post_post_type === 'PersonalStatement' | ||
? '자기소개서' | ||
: ''} | ||
</span> | ||
</div> | ||
<h1 className="text-headlineSmall text-black"> | ||
{detailData?.post_title} | ||
</h1> | ||
<div className="flex items-center gap-2 text-gray600"> | ||
<p>{userData?.name}</p> | ||
<p>﹒</p> | ||
<p>{DateFormat()}</p> | ||
</div> | ||
</div> | ||
<div className="bg-gray200 h-[1px]" /> | ||
<div className="flex items-center gap-10"> | ||
<div className="flex items-center gap-4"> | ||
<div className="p-3 bg-blue50 border border-blue100 rounded-xl"> | ||
<Bag className="text-blue500" size={28} /> | ||
</div> | ||
<div className="flex flex-col gap-[2px]"> | ||
<p className="text-bodySmall text-black">자료분야</p> | ||
<div className="flex items-center gap-2"> | ||
<p className="text-labelMedium text-gray600"> | ||
{detailData?.post_major} | ||
</p> | ||
</div> | ||
</div> | ||
</div> | ||
<div className="flex items-center gap-4"> | ||
<div className="p-3 bg-blue50 border border-blue100 rounded-xl"> | ||
<FileUpload className="text-blue500" size={28} /> | ||
</div> | ||
<div className="flex flex-col gap-[2px]"> | ||
<p className="text-bodySmall text-black">자료형식</p> | ||
<div className="flex items-center gap-2"> | ||
<p className="text-labelMedium text-gray600">Web Link</p> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
<div className="bg-gray200 h-[1px]" /> | ||
<div className="flex flex-col gap-4 pb-[120px]"> | ||
<p className="text-titleSmall text-gray950">자료 미리보기</p> | ||
<embed className="w-full h-[100vh]" src={detailData?.post_link} /> | ||
{detailData?.post_link && ( | ||
<Link | ||
href={detailData?.post_link} | ||
target="_blank" | ||
className="flex itmes-center justify-between p-4 border border-gray200 bg-gray50 rounded-xl cursor-pointer" | ||
> | ||
<div className="flex items-center gap-3"> | ||
<p className="text-bodyMedium text-gray950">자료링크 이동</p> | ||
<p className="w-[400px] text-labelMedium text-gray600 whitespace-nowrap overflow-hidden text-ellipsis"> | ||
{detailData.post_link} | ||
</p> | ||
</div> | ||
<Linking className="text-gray800" /> | ||
</Link> | ||
)} | ||
</div> | ||
</article> | ||
</section> | ||
</> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
'use client' | ||
|
||
import { Button } from '@/components' | ||
import { removeCookie } from '@/utils' | ||
import { useRouter } from 'next/navigation' | ||
|
||
export const LogoutButton = () => { | ||
const router = useRouter() | ||
|
||
const logout = () => { | ||
console.log('logout!!') | ||
removeCookie('RF-TOKEN') | ||
removeCookie('access_token') | ||
removeCookie('Access_Token') | ||
router.replace('/') | ||
} | ||
return ( | ||
<Button kind="gray" size="small" onClick={logout}> | ||
로그아웃 | ||
</Button> | ||
) | ||
} |
Oops, something went wrong.