From 443ece2b61188659974ffe762ec2dd1321743a68 Mon Sep 17 00:00:00 2001 From: JeonYumin94 Date: Tue, 30 Jul 2024 18:53:21 +0900 Subject: [PATCH 1/6] =?UTF-8?q?FE-38=20:sparkles:=20=EB=A7=88=EC=9D=B4?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=82=B4=20=EC=97=90=ED=94=BC?= =?UTF-8?q?=EA=B7=B8=EB=9E=A8=20=EC=A1=B0=ED=9A=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/queries.ts | 8 +++ src/hooks/useGetEpigrams.ts | 7 ++ .../MypageLayout/EmotionMonthlyLogs.tsx | 4 +- src/pageLayout/MypageLayout/MyContent.tsx | 70 ++++++++++++++++++ src/pageLayout/MypageLayout/MyPageLayout.tsx | 9 +-- src/schema/epigrams.ts | 2 +- src/user/ui-content/MyEpigrams.tsx | 72 +++++++++++++++++++ 7 files changed, 162 insertions(+), 10 deletions(-) create mode 100644 src/hooks/useGetEpigrams.ts create mode 100644 src/pageLayout/MypageLayout/MyContent.tsx create mode 100644 src/user/ui-content/MyEpigrams.tsx diff --git a/src/apis/queries.ts b/src/apis/queries.ts index 0010c375..6ab3a217 100644 --- a/src/apis/queries.ts +++ b/src/apis/queries.ts @@ -1,8 +1,10 @@ import { createQueryKeyStore } from '@lukemorales/query-key-factory'; import { GetUserRequestType } from '@/schema/user'; import { GetMonthlyEmotionLogsRequestType } from '@/schema/emotion'; +import { GetEpigramsParamsType } from '@/schema/epigrams'; import { getMe, getUser } from './user'; import getMonthlyEmotionLogs from './emotion'; +import getEpigrams from './getEpigrams'; const quries = createQueryKeyStore({ user: { @@ -21,6 +23,12 @@ const quries = createQueryKeyStore({ queryFn: () => getMonthlyEmotionLogs(request), }), }, + epigrams: { + getEpigrams: (request: GetEpigramsParamsType) => ({ + queryKey: ['getEpigrams', request], + queryFn: () => getEpigrams(request), + }), + }, }); export default quries; diff --git a/src/hooks/useGetEpigrams.ts b/src/hooks/useGetEpigrams.ts new file mode 100644 index 00000000..4f472145 --- /dev/null +++ b/src/hooks/useGetEpigrams.ts @@ -0,0 +1,7 @@ +import quries from '@/apis/queries'; +import { GetEpigramsParamsType } from '@/schema/epigrams'; +import { useQuery } from '@tanstack/react-query'; + +const useGetEpigrams = (requset: GetEpigramsParamsType) => useQuery(quries.epigrams.getEpigrams(requset)); + +export default useGetEpigrams; diff --git a/src/pageLayout/MypageLayout/EmotionMonthlyLogs.tsx b/src/pageLayout/MypageLayout/EmotionMonthlyLogs.tsx index 88983bbd..4020e531 100644 --- a/src/pageLayout/MypageLayout/EmotionMonthlyLogs.tsx +++ b/src/pageLayout/MypageLayout/EmotionMonthlyLogs.tsx @@ -32,9 +32,9 @@ export default function EmotionMonthlyLogs({ userId }: EmotionMonthlyLogsProps) const { data: monthlyEmotionLogs = [] } = useMonthlyEmotionLogs(emotionRequest); return ( - <> +
- +
); } diff --git a/src/pageLayout/MypageLayout/MyContent.tsx b/src/pageLayout/MypageLayout/MyContent.tsx new file mode 100644 index 00000000..06ccdbc8 --- /dev/null +++ b/src/pageLayout/MypageLayout/MyContent.tsx @@ -0,0 +1,70 @@ +import useGetEpigrams from '@/hooks/useGetEpigrams'; +import MyEpigrams from '@/user/ui-content/MyEpigrams'; + +interface MyContentProps { + userId: number; +} + +interface Epigram { + writerId: number; + id: number; + likeCount: number; + tags: { id: number; name: string }[]; + referenceUrl: string; + referenceTitle: string; + author: string; + content: string; +} + +interface EpigramsResponse { + totalCount: number; + nextCursor: number | null; + list: Epigram[]; +} + +export default function MyContent({ userId }: MyContentProps) { + // NOTE: 내 에피그램 조회 + const epigramsRequest = { + limit: 3, + writerId: userId, + }; + const { data: epigrams = { totalCount: 0, nextCursor: null, list: [] } as EpigramsResponse, isLoading, error } = useGetEpigrams(epigramsRequest); + + if (isLoading) { + return
Loading...
; + } + + if (error) { + return
Error: {error.message}
; + } + + return ( +
+
+ + +
+
+
+ {epigrams.totalCount > 0 ? ( + epigrams.list.map((epi) => { + const epigram = { + epigramId: epi.id, + content: epi.content, + author: epi.author, + tags: epi.tags, + }; + return ; + }) + ) : ( +
에피그램이 없습니다.
+ )} +
+
+
+ ); +} diff --git a/src/pageLayout/MypageLayout/MyPageLayout.tsx b/src/pageLayout/MypageLayout/MyPageLayout.tsx index 7971b8d2..b011c11f 100644 --- a/src/pageLayout/MypageLayout/MyPageLayout.tsx +++ b/src/pageLayout/MypageLayout/MyPageLayout.tsx @@ -4,6 +4,7 @@ import UserInfo from '@/types/user'; import EmotionMonthlyLogs from '@/pageLayout/MypageLayout/EmotionMonthlyLogs'; import Profile from '@/user/ui-profile/Profile'; import { useRouter } from 'next/navigation'; +import MyContent from './MyContent'; export default function MyPageLayout() { const { data, isLoading, isError }: { data: UserInfo | undefined; isLoading: boolean; isError: boolean } = useMeQuery(); @@ -34,13 +35,7 @@ export default function MyPageLayout() {
-
-
-

내 에피그램(19)

-

내 댓글(110)

-
-
댓글 컴포넌트
-
+
); diff --git a/src/schema/epigrams.ts b/src/schema/epigrams.ts index 46a7cb85..2919162d 100644 --- a/src/schema/epigrams.ts +++ b/src/schema/epigrams.ts @@ -9,7 +9,7 @@ export const GetEpigramsParams = z.object({ export const GetEpigramsResponse = z.object({ totalCount: z.number(), - nextCursor: z.number(), + nextCursor: z.number().nullable(), list: z.array( z.object({ likeCount: z.number(), diff --git a/src/user/ui-content/MyEpigrams.tsx b/src/user/ui-content/MyEpigrams.tsx new file mode 100644 index 00000000..1825b063 --- /dev/null +++ b/src/user/ui-content/MyEpigrams.tsx @@ -0,0 +1,72 @@ +import React from 'react'; + +// figma 상으로는 sm ~ 3xl 사이즈로 구현되어 있는데, tailwind 환경을 반영해 +// xs ~ 2xl 으로 정의했습니다. +const sizeStyles = { + xs: 'w-[286px] max-h-[132px]', + sm: 'sm:w-[312px] sm:max-h-[152px]', + 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 = { + xs: 'text-xs', + sm: 'sm:text-sm', + md: 'md:text-base', + lg: 'lg:text-xl', + xl: 'xl:text-2xl', + '2xl': '2xl:text-2xl', +}; + +interface Tag { + name: string; + id: number; +} + +interface MyEpigramProps { + epigram: { + epigramId: number; + content: string; + author: string; + tags: Tag[]; + }; +} + +function MyEpigrams({ epigram }: MyEpigramProps) { + return ( +
+
+ {/* eslint-disable-next-line */} +
{/* 줄무늬를 만들려면 비어있는 div가 필요합니다. */} +
+
+
+ {epigram.content} +
+
+ - {epigram.author} - +
+
+
+
+
+ {epigram.tags.map((tag) => ( +
+ #{tag.name} {/* 태그 출력 */} +
+ ))} +
+
+ ); +} + +export default MyEpigrams; From 7b980dbd0630aee23ce3326bfc7237d3d7457889 Mon Sep 17 00:00:00 2001 From: JeonYumin94 Date: Wed, 31 Jul 2024 00:43:21 +0900 Subject: [PATCH 2/6] =?UTF-8?q?FE-38=20:lipstick:=20=EB=82=B4=20=EC=97=90?= =?UTF-8?q?=ED=94=BC=EA=B7=B8=EB=9E=A8=20=EC=97=86=EC=9D=84=20=EB=95=8C=20?= =?UTF-8?q?UI?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/none-epi.svg | 10 ++++++++++ src/pageLayout/MypageLayout/MyContent.tsx | 16 ++++++++++++++-- 2 files changed, 24 insertions(+), 2 deletions(-) create mode 100644 public/none-epi.svg diff --git a/public/none-epi.svg b/public/none-epi.svg new file mode 100644 index 00000000..4322d558 --- /dev/null +++ b/public/none-epi.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/pageLayout/MypageLayout/MyContent.tsx b/src/pageLayout/MypageLayout/MyContent.tsx index 06ccdbc8..626a6c23 100644 --- a/src/pageLayout/MypageLayout/MyContent.tsx +++ b/src/pageLayout/MypageLayout/MyContent.tsx @@ -1,5 +1,8 @@ import useGetEpigrams from '@/hooks/useGetEpigrams'; import MyEpigrams from '@/user/ui-content/MyEpigrams'; +import NONE_EPI from '../../../public/none-epi.svg'; +import Image from 'next/image'; +import { Button } from '@/components/ui/button'; interface MyContentProps { userId: number; @@ -48,7 +51,7 @@ export default function MyContent({ userId }: MyContentProps) { 내 댓글(0) -
+
{epigrams.totalCount > 0 ? ( epigrams.list.map((epi) => { @@ -61,7 +64,16 @@ export default function MyContent({ userId }: MyContentProps) { return ; }) ) : ( -
에피그램이 없습니다.
+
+ 돋보기아이콘 +
+
+

아직 작성한 에피그램이 없어요!

+

에피그램을 작성하고 감정을 공유해보세요.

+
+ +
+
)}
From 7f912abcf280e4c20a5d61ce7778673f352b1606 Mon Sep 17 00:00:00 2001 From: JeonYumin94 Date: Wed, 31 Jul 2024 02:25:41 +0900 Subject: [PATCH 3/6] =?UTF-8?q?FE-38=20:sparkles:=20=EB=82=B4=20=EC=97=90?= =?UTF-8?q?=ED=94=BC=EA=B7=B8=EB=9E=A8=20=EB=AA=A9=EB=A1=9D=20=EB=8D=94?= =?UTF-8?q?=EB=B3=B4=EA=B8=B0=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pageLayout/MypageLayout/MyContent.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pageLayout/MypageLayout/MyContent.tsx b/src/pageLayout/MypageLayout/MyContent.tsx index 626a6c23..5043c987 100644 --- a/src/pageLayout/MypageLayout/MyContent.tsx +++ b/src/pageLayout/MypageLayout/MyContent.tsx @@ -1,8 +1,8 @@ import useGetEpigrams from '@/hooks/useGetEpigrams'; import MyEpigrams from '@/user/ui-content/MyEpigrams'; -import NONE_EPI from '../../../public/none-epi.svg'; import Image from 'next/image'; import { Button } from '@/components/ui/button'; +import NONE_EPI from '../../../public/none-epi.svg'; interface MyContentProps { userId: number; From cb048167a3bde9cd5ce0e3413741d441ea17659b Mon Sep 17 00:00:00 2001 From: JeonYumin94 Date: Wed, 31 Jul 2024 02:25:59 +0900 Subject: [PATCH 4/6] =?UTF-8?q?FE-38=20:sparkles:=20=EB=82=B4=20=EC=97=90?= =?UTF-8?q?=ED=94=BC=EA=B7=B8=EB=9E=A8=20=EB=AA=A9=EB=A1=9D=20=EB=8D=94?= =?UTF-8?q?=EB=B3=B4=EA=B8=B0=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/spinner.svg | 93 +++++++++++++++++++++++ src/pageLayout/MypageLayout/MyContent.tsx | 74 ++++++++++++++---- src/user/ui-content/MyEpigrams.tsx | 14 ++-- 3 files changed, 158 insertions(+), 23 deletions(-) create mode 100644 public/spinner.svg diff --git a/public/spinner.svg b/public/spinner.svg new file mode 100644 index 00000000..f65e5227 --- /dev/null +++ b/public/spinner.svg @@ -0,0 +1,93 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/pageLayout/MypageLayout/MyContent.tsx b/src/pageLayout/MypageLayout/MyContent.tsx index 5043c987..d97e9933 100644 --- a/src/pageLayout/MypageLayout/MyContent.tsx +++ b/src/pageLayout/MypageLayout/MyContent.tsx @@ -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; @@ -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({ 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
Loading...
; + if (isLoading && !isLoadingMore) { + return 로딩중; } if (error) { - return
Error: {error.message}
; + toast({ + description: error.message, + className: 'border-state-error text-state-error font-semibold', + }); } return ( @@ -54,15 +84,24 @@ export default function MyContent({ userId }: MyContentProps) {
{epigrams.totalCount > 0 ? ( - epigrams.list.map((epi) => { - const epigram = { - epigramId: epi.id, - content: epi.content, - author: epi.author, - tags: epi.tags, - }; - return ; - }) + <> + {epigrams.list.map((epi) => { + const epigram = { + epigramId: epi.id, + content: epi.content, + author: epi.author, + tags: epi.tags, + }; + return ; + })} + {epigrams.totalCount > epigrams.list.length && ( +
+ +
+ )} + ) : (
돋보기아이콘 @@ -75,6 +114,11 @@ export default function MyContent({ userId }: MyContentProps) {
)} + {isLoadingMore && ( +
+ 로딩중 +
+ )}
diff --git a/src/user/ui-content/MyEpigrams.tsx b/src/user/ui-content/MyEpigrams.tsx index 1825b063..0fb1dbf4 100644 --- a/src/user/ui-content/MyEpigrams.tsx +++ b/src/user/ui-content/MyEpigrams.tsx @@ -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 = { @@ -17,7 +16,6 @@ const textSizeStyles = { md: 'md:text-base', lg: 'lg:text-xl', xl: 'xl:text-2xl', - '2xl': '2xl:text-2xl', }; interface Tag { @@ -36,19 +34,19 @@ interface MyEpigramProps { function MyEpigrams({ epigram }: MyEpigramProps) { return ( -
+
{/* eslint-disable-next-line */}
{/* 줄무늬를 만들려면 비어있는 div가 필요합니다. */}
{epigram.content}
- {epigram.author} -
@@ -58,10 +56,10 @@ function MyEpigrams({ epigram }: MyEpigramProps) {
{epigram.tags.map((tag) => (
- #{tag.name} {/* 태그 출력 */} + #{tag.name}
))}
From 9040e42bf9c90eba58213541199c438399cad048 Mon Sep 17 00:00:00 2001 From: JeonYumin94 Date: Wed, 31 Jul 2024 02:58:18 +0900 Subject: [PATCH 5/6] =?UTF-8?q?FE-38=20:recycle:=20=EB=82=B4=20=EC=97=90?= =?UTF-8?q?=ED=94=BC=EA=B7=B8=EB=9E=A8=20=EB=AA=A9=EB=A1=9D=20=EC=A1=B0?= =?UTF-8?q?=ED=9A=8C=20=EC=BD=94=EB=93=9C=20=EB=A6=AC=ED=8C=A9=ED=86=A0?= =?UTF-8?q?=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pageLayout/MypageLayout/MyContent.tsx | 56 +------------ src/types/epigram.types.ts | 17 ++++ src/user/ui-content/MyEpigrams.tsx | 95 +++++++++++++---------- 3 files changed, 76 insertions(+), 92 deletions(-) diff --git a/src/pageLayout/MypageLayout/MyContent.tsx b/src/pageLayout/MypageLayout/MyContent.tsx index d97e9933..81c91dda 100644 --- a/src/pageLayout/MypageLayout/MyContent.tsx +++ b/src/pageLayout/MypageLayout/MyContent.tsx @@ -2,32 +2,14 @@ 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 { EpigramsResponse } from '@/types/epigram.types'; import spinner from '../../../public/spinner.svg'; interface MyContentProps { userId: number; } -interface Epigram { - writerId: number; - id: number; - likeCount: number; - tags: { id: number; name: string }[]; - referenceUrl: string; - referenceTitle: string; - author: string; - content: string; -} - -interface EpigramsResponse { - totalCount: number; - nextCursor: number | null; - list: Epigram[]; -} - export default function MyContent({ userId }: MyContentProps) { const limit = 3; const [cursor, setCursor] = useState(0); @@ -53,7 +35,7 @@ export default function MyContent({ userId }: MyContentProps) { } }, [data]); - const handleMoreLoad = () => { + const handleMoreEpigramLoad = () => { if (epigrams.nextCursor !== null) { setCursor(epigrams.nextCursor); setIsLoadingMore(true); @@ -75,7 +57,7 @@ export default function MyContent({ userId }: MyContentProps) {
- {epigrams.totalCount > 0 ? ( - <> - {epigrams.list.map((epi) => { - const epigram = { - epigramId: epi.id, - content: epi.content, - author: epi.author, - tags: epi.tags, - }; - return ; - })} - {epigrams.totalCount > epigrams.list.length && ( -
- -
- )} - - ) : ( -
- 돋보기아이콘 -
-
-

아직 작성한 에피그램이 없어요!

-

에피그램을 작성하고 감정을 공유해보세요.

-
- -
-
- )} + {isLoadingMore && (
로딩중 diff --git a/src/types/epigram.types.ts b/src/types/epigram.types.ts index 226ee9ee..0c2d0303 100644 --- a/src/types/epigram.types.ts +++ b/src/types/epigram.types.ts @@ -22,3 +22,20 @@ export interface PatchCommentRequest { isPrivate: boolean; content: string; } + +export interface Epigram { + writerId: number; + id: number; + likeCount: number; + tags: { id: number; name: string }[]; + referenceUrl: string; + referenceTitle: string; + author: string; + content: string; +} + +export interface EpigramsResponse { + totalCount: number; + nextCursor: number | null; + list: Epigram[]; +} diff --git a/src/user/ui-content/MyEpigrams.tsx b/src/user/ui-content/MyEpigrams.tsx index 0fb1dbf4..7ae267a4 100644 --- a/src/user/ui-content/MyEpigrams.tsx +++ b/src/user/ui-content/MyEpigrams.tsx @@ -1,7 +1,9 @@ import React from 'react'; +import Image from 'next/image'; +import { Button } from '@/components/ui/button'; +import { Epigram } from '@/types/epigram.types'; +import NONE_EPI from '../../../public/none-epi.svg'; -// figma 상으로는 sm ~ 3xl 사이즈로 구현되어 있는데, tailwind 환경을 반영해 -// xs ~ 2xl 으로 정의했습니다. const sizeStyles = { xs: 'w-[286px] max-h-[132px]', sm: 'sm:w-[312px] sm:max-h-[152px]', @@ -18,50 +20,63 @@ const textSizeStyles = { xl: 'xl:text-2xl', }; -interface Tag { - name: string; - id: number; -} - interface MyEpigramProps { - epigram: { - epigramId: number; - content: string; - author: string; - tags: Tag[]; - }; + epigrams: Epigram[]; + totalCount: number; + onMoreEpigramLoad: () => void; } -function MyEpigrams({ epigram }: MyEpigramProps) { - return ( -
-
- {/* eslint-disable-next-line */} -
{/* 줄무늬를 만들려면 비어있는 div가 필요합니다. */} -
-
-
- {epigram.content} -
-
- - {epigram.author} - +function MyEpigrams({ epigrams, totalCount, onMoreEpigramLoad }: MyEpigramProps) { + return totalCount > 0 ? ( +
+ {epigrams.map((epigram) => ( +
+
+
+
+
+
+ {epigram.content} +
+
+ - {epigram.author} - +
+
-
-
-
- {epigram.tags.map((tag) => ( -
- #{tag.name} +
+ {epigram.tags.map((tag) => ( +
+ #{tag.name} +
+ ))}
- ))} +
+ ))} + {totalCount > epigrams.length && ( +
+ +
+ )} +
+ ) : ( +
+ 돋보기아이콘 +
+
+

아직 작성한 에피그램이 없어요!

+

에피그램을 작성하고 감정을 공유해보세요.

+
+
); From fd55529983a0a140d542863682dc80f3b110dbe6 Mon Sep 17 00:00:00 2001 From: JeonYumin94 Date: Wed, 31 Jul 2024 03:02:40 +0900 Subject: [PATCH 6/6] =?UTF-8?q?FE-38=20:sparkles:=20=EC=97=90=ED=94=BC?= =?UTF-8?q?=EA=B7=B8=EB=9E=A8=20=EB=93=B1=EB=A1=9D=20=EB=B0=8F=20=EC=83=81?= =?UTF-8?q?=EC=84=B8=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=9D=B4=EB=8F=99=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/user/ui-content/MyEpigrams.tsx | 32 ++++++++++++++++++++++++++++-- 1 file changed, 30 insertions(+), 2 deletions(-) diff --git a/src/user/ui-content/MyEpigrams.tsx b/src/user/ui-content/MyEpigrams.tsx index 7ae267a4..f5a7d45e 100644 --- a/src/user/ui-content/MyEpigrams.tsx +++ b/src/user/ui-content/MyEpigrams.tsx @@ -1,5 +1,6 @@ import React from 'react'; import Image from 'next/image'; +import { useRouter } from 'next/router'; import { Button } from '@/components/ui/button'; import { Epigram } from '@/types/epigram.types'; import NONE_EPI from '../../../public/none-epi.svg'; @@ -27,10 +28,35 @@ interface MyEpigramProps { } function MyEpigrams({ epigrams, totalCount, onMoreEpigramLoad }: MyEpigramProps) { + const router = useRouter(); + + // 에피그램 등록 페이지 이동 + const handleAddEpigram = () => { + router.push('/addEpigram'); + }; + + // 에피그램 상세 페이지 이동 + const handleEpigramClick = (epigramId: number) => { + router.push(`/epigram/${epigramId}`); + }; + + const handleKeyDown = (event: React.KeyboardEvent, epigramId: number) => { + if (event.key === 'Enter' || event.key === ' ') { + handleEpigramClick(epigramId); + } + }; + return totalCount > 0 ? (
{epigrams.map((epigram) => ( -
+
handleEpigramClick(epigram.id)} + onKeyDown={(event) => handleKeyDown(event, epigram.id)} + role='button' + tabIndex={0} + className={`relative flex-col justify-start items-end gap-2 inline-flex cursor-pointer ${sizeStyles.xs} ${sizeStyles.sm} ${sizeStyles.md} ${sizeStyles.lg} ${sizeStyles.xl}`} + >
@@ -76,7 +102,9 @@ function MyEpigrams({ epigrams, totalCount, onMoreEpigramLoad }: MyEpigramProps)

아직 작성한 에피그램이 없어요!

에피그램을 작성하고 감정을 공유해보세요.

- +
);