Skip to content

Commit

Permalink
FE-38 ✨ 내 에피그램 목록 더보기 구현
Browse files Browse the repository at this point in the history
  • Loading branch information
@JeonYumin94
JeonYumin94 committed Jul 30, 2024
1 parent 7f912ab commit cb04816
Show file tree
Hide file tree
Showing 3 changed files with 158 additions and 23 deletions.
93 changes: 93 additions & 0 deletions public/spinner.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
74 changes: 59 additions & 15 deletions src/pageLayout/MypageLayout/MyContent.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
import { useEffect, useState } from 'react';
import useGetEpigrams from '@/hooks/useGetEpigrams';
import MyEpigrams from '@/user/ui-content/MyEpigrams';
import Image from 'next/image';
import { Button } from '@/components/ui/button';
import { useToast } from '@/components/ui/use-toast';
import NONE_EPI from '../../../public/none-epi.svg';
import spinner from '../../../public/spinner.svg';

interface MyContentProps {
userId: number;
Expand All @@ -26,19 +29,46 @@ interface EpigramsResponse {
}

export default function MyContent({ userId }: MyContentProps) {
// NOTE: 내 에피그램 조회
const limit = 3;
const [cursor, setCursor] = useState(0);
const [epigrams, setEpigrams] = useState<EpigramsResponse>({ totalCount: 0, nextCursor: null, list: [] });
const [isLoadingMore, setIsLoadingMore] = useState(false);
const { toast } = useToast();

const epigramsRequest = {
limit: 3,
limit,
cursor,
writerId: userId,
};
const { data: epigrams = { totalCount: 0, nextCursor: null, list: [] } as EpigramsResponse, isLoading, error } = useGetEpigrams(epigramsRequest);
const { data, isLoading, error } = useGetEpigrams(epigramsRequest);

useEffect(() => {
if (data && data.list.length > 0) {
setEpigrams((prev) => ({
totalCount: data.totalCount,
nextCursor: data.nextCursor,
list: [...prev.list, ...data.list],
}));
setIsLoadingMore(false);
}
}, [data]);

const handleMoreLoad = () => {
if (epigrams.nextCursor !== null) {
setCursor(epigrams.nextCursor);
setIsLoadingMore(true);
}
};

if (isLoading) {
return <div>Loading...</div>;
if (isLoading && !isLoadingMore) {
return <Image src={spinner} alt='로딩중' width={200} height={200} />;
}

if (error) {
return <div>Error: {error.message}</div>;
toast({
description: error.message,
className: 'border-state-error text-state-error font-semibold',
});
}

return (
Expand All @@ -54,15 +84,24 @@ export default function MyContent({ userId }: MyContentProps) {
<div className='w-full py-[36px]'>
<div className='flex flex-col gap-[48px]'>
{epigrams.totalCount > 0 ? (
epigrams.list.map((epi) => {
const epigram = {
epigramId: epi.id,
content: epi.content,
author: epi.author,
tags: epi.tags,
};
return <MyEpigrams key={epi.id} epigram={epigram} />;
})
<>
{epigrams.list.map((epi) => {
const epigram = {
epigramId: epi.id,
content: epi.content,
author: epi.author,
tags: epi.tags,
};
return <MyEpigrams key={epi.id} epigram={epigram} />;
})}
{epigrams.totalCount > epigrams.list.length && (
<div className='w-full flex items-center justify-center lg:mt-[70px] md:mt-[50px]'>
<Button className='text-slate-400 border border-slate-300 rounded-[100px] py-[12px] px-[20px]' onClick={handleMoreLoad}>
+ 더보기
</Button>
</div>
)}
</>
) : (
<div className='flex flex-col gap-4 justify-center items-center'>
<Image src={NONE_EPI} alt='돋보기아이콘' width={144} height={144} />
Expand All @@ -75,6 +114,11 @@ export default function MyContent({ userId }: MyContentProps) {
</div>
</div>
)}
{isLoadingMore && (
<div className='w-full flex items-center justify-center lg:mt-[70px] md:mt-[50px]'>
<Image src={spinner} alt='로딩중' width={200} height={200} />
</div>
)}
</div>
</div>
</div>
Expand Down
14 changes: 6 additions & 8 deletions src/user/ui-content/MyEpigrams.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ const sizeStyles = {
md: 'md:w-[384px] md:max-h-[180px]',
lg: 'lg:w-[540px] lg:max-h-[160px]',
xl: 'xl:w-[640px] xl:max-h-[196px]',
'2xl': '2xl:w-[744px] 2xl:max-h-[196px]',
};

const textSizeStyles = {
Expand All @@ -17,7 +16,6 @@ const textSizeStyles = {
md: 'md:text-base',
lg: 'lg:text-xl',
xl: 'xl:text-2xl',
'2xl': '2xl:text-2xl',
};

interface Tag {
Expand All @@ -36,19 +34,19 @@ interface MyEpigramProps {

function MyEpigrams({ epigram }: MyEpigramProps) {
return (
<div className={`relative flex-col justify-start items-end gap-2 inline-flex ${sizeStyles.xs} ${sizeStyles.sm} ${sizeStyles.md} ${sizeStyles.lg} ${sizeStyles.xl} ${sizeStyles['2xl']}`}>
<div className={`relative flex-col justify-start items-end gap-2 inline-flex ${sizeStyles.xs} ${sizeStyles.sm} ${sizeStyles.md} ${sizeStyles.lg} ${sizeStyles.xl}}`}>
<div className='w-full p-[22px] bg-white rounded-[14.67px] shadow border border-zinc-100 flex-col justify-start items-start flex relative overflow-hidden'>
{/* eslint-disable-next-line */}
<div className='absolute inset-0 bg-stripes w-full h-full'></div> {/* 줄무늬를 만들려면 비어있는 div가 필요합니다. */}
<div className='relative w-full z-10 flex flex-col justify-start items-start flex-1'>
<div className='self-stretch flex-col justify-start items-start gap-2 flex'>
<div
className={`self-stretch ${textSizeStyles.xs} ${textSizeStyles.sm} ${textSizeStyles.md} ${textSizeStyles.lg} ${textSizeStyles.xl} ${textSizeStyles['2xl']} text-neutral-700 font-normal font-iropkeBatang leading-normal`}
className={`self-stretch ${textSizeStyles.xs} ${textSizeStyles.sm} ${textSizeStyles.md} ${textSizeStyles.lg} ${textSizeStyles.xl}} text-neutral-700 font-normal font-iropkeBatang leading-normal`}
>
{epigram.content}
</div>
<div
className={`self-stretch ${textSizeStyles.xs} ${textSizeStyles.sm} ${textSizeStyles.md} ${textSizeStyles.lg} ${textSizeStyles.xl} ${textSizeStyles['2xl']} text-right text-slate-400 font-normal font-iropkeBatang leading-normal`}
className={`self-stretch ${textSizeStyles.xs} ${textSizeStyles.sm} ${textSizeStyles.md} ${textSizeStyles.lg} ${textSizeStyles.xl}} text-right text-slate-400 font-normal font-iropkeBatang leading-normal`}
>
- {epigram.author} -
</div>
Expand All @@ -58,10 +56,10 @@ function MyEpigrams({ epigram }: MyEpigramProps) {
<div className='justify-start items-start gap-2 inline-flex'>
{epigram.tags.map((tag) => (
<div
key={tag.id} // 태그의 고유 ID를 키로 사용
className={`text-right ${textSizeStyles.xs} ${textSizeStyles.sm} ${textSizeStyles.md} ${textSizeStyles.lg} ${textSizeStyles.xl} ${textSizeStyles['2xl']} text-slate-400 font-normal font-iropkeBatang leading-normal`}
key={tag.id}
className={`text-right ${textSizeStyles.xs} ${textSizeStyles.sm} ${textSizeStyles.md} ${textSizeStyles.lg} ${textSizeStyles.xl}]} text-slate-400 font-normal font-iropkeBatang leading-normal`}
>
#{tag.name} {/* 태그 출력 */}
#{tag.name}
</div>
))}
</div>
Expand Down

0 comments on commit cb04816

Please sign in to comment.