오늘은 Lighthouse를 돌려서 성능검사를 해보았다.
와, 너무 신기하고 내가 잘했는지 성적표를 받아보는 기분이였음.
나의 Surv 개선
위 이미지가 기존의 화면인데 역시 너무 정리가 안된 느낌이였다.
그래서 아래처럼 개선하는 작업을 했다.
탭 자체를 next ui로 구현했기에 역시 수정도 빨리 할수 있었다.
<Tabs
aria-label="서베이 Tab"
size="lg"
variant="underlined"
classNames={{
tabList: 'gap-6 border-b-0 font-bold w-full mb-[15px] relative rounded-none p-0 border-b border-divider',
cursor: 'w-full bg-[#0051FF]',
tab: 'max-w-fit px-0 h-12 text-xl px-2',
tabContent: 'group-data-[selected=true]:text-[#0051FF]',
}}
>
<Tab title="내가 작성한 Surv">
<Tabs>
<Tab title="내가 작성한 IT Surv" className="text-md font-bold">
<Card className="bg-transparent border-0 rounded-none shadow-none">
<CardBody>
{posts.length > 0 ? (
<ul
className="grid grid-cols-2 md:grid-cols-4 gap-4 auto
"
>
{posts.map(post => (
<li
key={post.id}
className="relative bg-white mb-[20px] w-[300px] px-[20px] h-[180px] rounded-xl py-[20px] border-2 border-[#0051FF80] "
>
<Link href={`/survey-it/${post.id}`} className="text-xl">
<p className=" bg-[#0051ff] mb-[7px] text-center text-[#D6FF00] w-[65px] p-1 rounded-full font-semibold text-xs">
{post.category}
</p>
<p className="py-[8px] h-[69px] text-ellipsis overflow-hidden line-clamp-2">
{post.title}
</p>
</Link>
<hr />
<p className="text-sm absolute bottom-[20px]">
{isDeadlinePast(post.deadlineDate) ? (
<span className="text-red-500">Surv이 종료되었습니다.</span>
) : (
` 종료일 | ${post.deadlineDate || 'No deadline'}`
)}
</p>
<Button
variant="ghost"
size="sm"
color="danger"
className="my-[10px] float-right absolute bottom-[6.5px] right-[10px]"
onClick={() => clickDeleteITHandler(post.id)}
>
삭제
</Button>
</li>
))}
</ul>
) : (
<p className="relative bg-white mb-[20px] w-[300px] text-lg px-[20px] h-[180px] rounded-xl py-[20px] border-2 border-[#0051FF80] ">
작성한 글이 없습니다.
</p>
)}
</CardBody>
</Card>
</Tab>
<Tab title="내가 작성한 참여해Surv" className="text-md font-bold">
<Card className="bg-transparent border-0 rounded-none shadow-none">
<CardBody>
{userPostLite.length > 0 ? (
<ul
className="grid grid-cols-2 md:grid-cols-4 gap-4 auto
"
>
{userPostLite.map(post => (
<li
key={post.id}
className="relative bg-white mb-[20px] w-[300px] px-[20px] h-[180px] rounded-xl py-[20px] border-2 border-[#0051FF80] "
>
<Link href="/survey-lite" className="text-xl">
<p className="py-[8px] h-[69px] text-ellipsis overflow-hidden line-clamp-2">
{post.title}
</p>
</Link>
<hr />
<Button
variant="ghost"
size="sm"
color="danger"
className="my-[10px] float-right absolute bottom-[6.5px] right-[10px]"
onClick={() => clickDeleteLiteHandler(post.id)}
>
삭제
</Button>
</li>
))}
</ul>
) : (
<p className="relative bg-white mb-[20px] w-[300px] text-lg px-[20px] h-[180px] rounded-xl py-[20px] border-2 border-[#0051FF80] ">
작성한 글이 없습니다.
</p>
)}
</CardBody>
</Card>
</Tab>
</Tabs>
</Tab>
<Tab title="내가 좋아요한 Surv">
<Tabs aria-label="내가 좋아요한 Surv">
<Tab title="내가 좋아요한 IT Surv" className="text-md font-bold">
<Card className="bg-transparent border-0 rounded-none shadow-none">
<CardBody>
{likedITPosts.length > 0 ? (
<ul
className="grid grid-cols-2 md:grid-cols-4 gap-4 auto
"
>
{likedITPosts.map(post => (
<li
key={post.id}
className="relative bg-white mb-[20px] w-[300px] px-[20px] h-[180px] rounded-xl py-[20px] border-2 border-[#0051FF80] "
>
<Link href={`/survey-it/${post.id}`} className="text-xl">
<p className="bg-[#0051ff] text-center text-[#D6FF00] w-[65px] p-1 rounded-full font-semibold text-xs mb-[7px]">
{post.category}
</p>
<p className="py-[8px] h-[69px] text-ellipsis overflow-hidden line-clamp-2">
{post.title}
</p>
</Link>
<hr />
<p className="text-sm absolute bottom-[20px]">
{isDeadlinePast(post.deadlineDate) ? (
<span className="text-red-500">Surv이 종료되었습니다.</span>
) : (
` 종료일 | ${post.deadlineDate || 'No deadline'}`
)}
</p>
<Button
variant="ghost"
size="sm"
color="danger"
className="my-[10px] float-right absolute bottom-[6.5px] right-[10px]"
onClick={() => clickDeleteLikedPostITHandler(post.id)}
>
삭제
</Button>
</li>
))}
</ul>
) : (
<p className="relative bg-white mb-[20px] w-[300px] text-lg px-[20px] h-[180px] rounded-xl py-[20px] border-2 border-[#0051FF80] ">
좋아요한 글이 없습니다.
</p>
)}
</CardBody>
</Card>
</Tab>
<Tab title="내가 좋아요한 참여해Surv" className="text-md font-bold">
<Card className="bg-transparent border-0 rounded-none shadow-none">
<CardBody>
{likedLitePosts.length > 0 ? (
<ul
className="grid grid-cols-2 md:grid-cols-4 gap-4 auto
"
>
{likedLitePosts.map(post => (
<li
key={post.id}
className="relative bg-white mb-[20px] w-[300px] px-[20px] h-[180px] rounded-xl py-[20px] border-2 border-[#0051FF80] "
>
<Link href="/survey-lite" className="text-xl">
<p className="py-[8px] h-[69px] text-ellipsis overflow-hidden line-clamp-2">
{post.title}
</p>
</Link>
<hr />
<Button
variant="ghost"
size="sm"
color="danger"
className="my-[10px] float-right absolute bottom-[6.5px] right-[10px]"
onClick={() => clickDeleteLikedPostLiteHandler(post.id)}
>
삭제
</Button>
</li>
))}
</ul>
) : (
<p className="relative bg-white mb-[20px] w-[300px] text-lg px-[20px] h-[180px] rounded-xl py-[20px] border-2 border-[#0051FF80] ">
좋아요한 글이 없습니다.
</p>
)}
</CardBody>
</Card>
</Tab>
</Tabs>
</Tab>
<Tab title="내가 참여한 IT Surv">
<Card className="bg-transparent border-0 rounded-none shadow-none">
<CardBody>
{submitedITPosts.length > 0 ? (
<ul
className="grid grid-cols-2 md:grid-cols-4 gap-4 auto
"
>
{submitedITPosts.map(post => (
<li
key={post.id}
className="relative bg-white mb-[20px] w-[300px] px-[20px] h-[180px] rounded-xl py-[20px] border-2 border-[#0051FF80] "
>
<Link href={`/survey-it/${post.postId}`} className="text-xl">
<p className="bg-[#0051ff] text-center text-[#D6FF00] w-[65px] p-1 rounded-full font-semibold text-xs mb-[7px]">
{post.category}
</p>
<p className="py-[8px] h-[69px] text-ellipsis overflow-hidden line-clamp-2">{post.title}</p>
</Link>
<hr />
<p className="text-sm absolute bottom-[20px]">
{isDeadlinePast(post.deadlineDate) ? (
<span className="text-red-500">Surv이 종료되었습니다.</span>
) : (
` 종료일 | ${post.deadlineDate || 'No deadline'}`
)}
</p>
</li>
))}
</ul>
) : (
<p className="relative bg-white mb-[20px] w-[300px] text-lg px-[20px] h-[180px] rounded-xl py-[20px] border-2 border-[#0051FF80] ">
참여한 Surv이 없습니다.
</p>
)}
</CardBody>
</Card>
</Tab>
</Tabs>원래 Tabs 안에 복수의 Tab이 안들어갈줄 알았는데 되었다.
그리고 마지막으로 PPT를 점검했다.
딱히 수정사항이 없어서 좋았다.
그리고 앞으로, 성능개선을 위해 프로필 설정의 이미지 리사이즈를 해볼 계획이다.
오늘의 한줄평: 건강이 제일..
귀여운 걸 좋아하고 흥미가 있으면 불타오릅니다💙 최근엔 코딩이 흥미가 많아요🥰