From 1069197d623a498eacc2010dfb2d113457c1b4f5 Mon Sep 17 00:00:00 2001 From: bicochan Date: Wed, 14 May 2025 17:37:14 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EB=8F=99=EC=98=81=EC=83=81=20=EA=B2=8C?= =?UTF-8?q?=EC=8B=9C=EA=B8=80=20=EC=83=81=EC=84=B8=20=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../attachment/api/attachment-service.ts | 18 ++++++- .../attachment/model/attachment-interface.ts | 4 +- apps/cs/src/shared/config/api.ts | 1 + .../post/model/grid-view-table-columns.tsx | 13 ++++- apps/cs/src/widgets/post/ui/post-page.tsx | 53 ++++++------------- apps/cs/src/widgets/post/ui/post.tsx | 26 ++++++++- .../post/ui/with-preview-file-uploader.tsx | 2 +- 7 files changed, 75 insertions(+), 42 deletions(-) diff --git a/apps/cs/src/entities/attachment/api/attachment-service.ts b/apps/cs/src/entities/attachment/api/attachment-service.ts index a5352c712..fc2dcab05 100644 --- a/apps/cs/src/entities/attachment/api/attachment-service.ts +++ b/apps/cs/src/entities/attachment/api/attachment-service.ts @@ -52,7 +52,15 @@ export class AttachmentApiService implements AttachmentService { return URL.createObjectURL(blob); } - public async getMovieThumbnailUrl(atflId: string): Promise { + public async getStreamVideoUrlByAtflId(atflId: string): Promise { + const response = await fetch( + `${ENDPOINT.ATTACH_SERVICE.STREAM_VIDEO}/${atflId}`, + ); + const blob = await response.blob(); + return URL.createObjectURL(blob); + } + + public async getMovieThumbnailUrlByAtflId(atflId: string): Promise { const response = await fetch( `${ENDPOINT.ATTACH_SERVICE.MOVIE_THUMBNAIL}/${atflId}`, ); @@ -60,6 +68,14 @@ export class AttachmentApiService implements AttachmentService { return URL.createObjectURL(blob); } + public async getMovieThumbnailUrlByAtflCd(atflCd: string): Promise { + const response = await fetch( + `${ENDPOINT.ATTACH_SERVICE.MOVIE_THUMBNAIL}/atflCd/${atflCd}`, + ); + const blob = await response.blob(); + return URL.createObjectURL(blob); + } + public async downloadAttachmentByAtflCd( atflCd: string, ): Promise { diff --git a/apps/cs/src/entities/attachment/model/attachment-interface.ts b/apps/cs/src/entities/attachment/model/attachment-interface.ts index 5ad0fc3ea..0f1b5d1ee 100644 --- a/apps/cs/src/entities/attachment/model/attachment-interface.ts +++ b/apps/cs/src/entities/attachment/model/attachment-interface.ts @@ -40,6 +40,8 @@ export interface AttachmentService { deleteAttachmentByAtflCd: (atflCd: string) => Promise; getImageUrlByAtflId: (atflId: string) => Promise; getImageUrlByAtflCd: (atflCd: string) => Promise; - getMovieThumbnailUrl: (atflId: string) => Promise; + getStreamVideoUrlByAtflId: (atflId: string) => Promise; + getMovieThumbnailUrlByAtflId: (atflId: string) => Promise; + getMovieThumbnailUrlByAtflCd: (atflCd: string) => Promise; downloadAttachmentByAtflCd: (atflCd: string) => Promise; } diff --git a/apps/cs/src/shared/config/api.ts b/apps/cs/src/shared/config/api.ts index 792fc822e..0ff7efe42 100644 --- a/apps/cs/src/shared/config/api.ts +++ b/apps/cs/src/shared/config/api.ts @@ -10,6 +10,7 @@ export const ENDPOINT = { MOVIE_THUMBNAIL: "/attach-service/api/v1/movie/thumbnail", ATTACHMENTS: "/attach-service/api/v1/atfl/attachments", DOWNLOAD: "/attach-service/api/v1/atflcd/download", + STREAM_VIDEO: "/attach-service/api/v1/stream/video", }, USER_SERVICE: { LOGIN: "/user-service/login", diff --git a/apps/cs/src/widgets/post/model/grid-view-table-columns.tsx b/apps/cs/src/widgets/post/model/grid-view-table-columns.tsx index 242c7ee2f..96f7866db 100644 --- a/apps/cs/src/widgets/post/model/grid-view-table-columns.tsx +++ b/apps/cs/src/widgets/post/model/grid-view-table-columns.tsx @@ -2,10 +2,11 @@ import dayjs from "dayjs"; import Image from "next/image"; import type { ColumnDef } from "@tanstack/react-table"; import { Badge, Checkbox, Skeleton } from "@common/components"; +import { AttachmentApi } from "@/entities/attachment"; import type { Post } from "@/entities/post"; import { useQuery } from "@tanstack/react-query"; import { ENDPOINT } from "@/shared/config"; -import { AttachmentApi } from "@/entities/attachment"; +import { useMenuStore } from "@/shared/lib"; export const createColumns = ( thumbRefs: React.MutableRefObject>, @@ -81,9 +82,17 @@ type ThumbImageProps = { const ThumbImage = ({ atflCd, pstNo, thumbRefs }: ThumbImageProps) => { const prevImage = thumbRefs.current.get(pstNo); + const { bbsInfo } = useMenuStore((state) => state); + const { data: imageUrl, isLoading } = useQuery({ queryKey: [ENDPOINT.ATTACH_SERVICE.IMAGES, atflCd], - queryFn: () => AttachmentApi.getImageUrlByAtflCd(atflCd), + queryFn: () => { + if (bbsInfo?.bbsTypeCd === "BBSIMAGE") { + return AttachmentApi.getImageUrlByAtflCd(atflCd); + } else if (bbsInfo?.bbsTypeCd === "BBSMOVIE") { + return AttachmentApi.getMovieThumbnailUrlByAtflCd(atflCd); + } + }, select: (url) => { if (url) thumbRefs.current.set(pstNo, url); return url; diff --git a/apps/cs/src/widgets/post/ui/post-page.tsx b/apps/cs/src/widgets/post/ui/post-page.tsx index a45445204..6389bc799 100644 --- a/apps/cs/src/widgets/post/ui/post-page.tsx +++ b/apps/cs/src/widgets/post/ui/post-page.tsx @@ -23,12 +23,11 @@ import { Skeleton, } from "@common/components"; import { PostApi, type Post, type PostParams } from "@/entities/post"; -import type { BoardType } from "@/entities/board"; import { ENDPOINT } from "@/shared/config"; import { useMenuStore, useUserStore } from "@/shared/lib"; import { GridViewDataTable } from "@/shared/ui/grid-view-data-table"; -import { columns } from "../model/post-table-columns"; -import { createColumns } from "../model/grid-view-table-columns"; +import { columns as tableColumns } from "../model/post-table-columns"; +import { createColumns as createGridViewColumns } from "../model/grid-view-table-columns"; function PostPage({ bbsId }: { bbsId: string }) { const router = useRouter(); @@ -36,7 +35,7 @@ function PostPage({ bbsId }: { bbsId: string }) { const { confirm } = useConfirm(); const { userInfo } = useUserStore((state) => state); const { bbsInfo, pageMenuAuthority } = useMenuStore((state) => state); - const bbsType = bbsInfo?.bbsTypeCd as BoardType; + const thumbRefs = useRef>(new Map()); const [postParams, setPostParams] = useState({ keywordType: "title", @@ -48,8 +47,6 @@ function PostPage({ bbsId }: { bbsId: string }) { }); const [rowSelection, setRowSelection] = useState({}); - const thumbRefs = useRef>(new Map()); - const { data: upndFixPostList } = useQuery({ queryKey: [ENDPOINT.BOARD_SERVICE.POSTS_USER, bbsId, bbsInfo], queryFn: () => @@ -62,10 +59,7 @@ function PostPage({ bbsId }: { bbsId: string }) { ...post, isUpndFixPost: post.upndFixYn === "Y", })); - return { - ...data, - content: newContent, - }; + return { ...data, content: newContent }; }, enabled: bbsInfo?.upndFixUseYn === "Y", }); @@ -85,9 +79,14 @@ function PostPage({ bbsId }: { bbsId: string }) { enabled: false, }); + const isGridViewPage = + bbsInfo?.bbsTypeCd === "BBSIMAGE" || bbsInfo?.bbsTypeCd === "BBSMOVIE"; + const table = useReactTable({ - data: [...(upndFixPostList?.content ?? []), ...(postList?.content ?? [])], - columns, + data: isGridViewPage + ? (postList?.content ?? []) + : [...(upndFixPostList?.content ?? []), ...(postList?.content ?? [])], + columns: isGridViewPage ? createGridViewColumns(thumbRefs) : tableColumns, state: { pagination, rowSelection }, rowCount: postList?.totalElements ?? 0, manualPagination: true, @@ -97,17 +96,7 @@ function PostPage({ bbsId }: { bbsId: string }) { onRowSelectionChange: setRowSelection, }); - const gridViewTable = useReactTable({ - data: postList?.content ?? [], - columns: createColumns(thumbRefs), - state: { pagination, rowSelection }, - rowCount: postList?.totalElements ?? 0, - manualPagination: true, - enableMultiRowSelection: true, - getCoreRowModel: getCoreRowModel(), - onPaginationChange: setPagination, - onRowSelectionChange: setRowSelection, - }); + const DataTableComponent = isGridViewPage ? GridViewDataTable : DataTable; const onPostDelete = async () => { const selectedPosts = table @@ -211,19 +200,11 @@ function PostPage({ bbsId }: { bbsId: string }) {
{isFetched ? ( - bbsType === "BBSIMAGE" || bbsType === "BBSMOVIE" ? ( - - ) : ( - - ) + ) : ( )} diff --git a/apps/cs/src/widgets/post/ui/post.tsx b/apps/cs/src/widgets/post/ui/post.tsx index 379bcdd38..3cac19401 100644 --- a/apps/cs/src/widgets/post/ui/post.tsx +++ b/apps/cs/src/widgets/post/ui/post.tsx @@ -36,7 +36,10 @@ function Post({ bbsId, pstNo }: { bbsId: string; pstNo: string }) { queryKey: [ENDPOINT.ATTACH_SERVICE.DOWNLOAD, postData?.atflCd], queryFn: () => AttachmentApi.downloadAttachmentByAtflCd(postData?.atflCd as string), - enabled: !!postData?.atflCd && bbsInfo?.bbsTypeCd !== "BBSIMAGE", + enabled: + !!postData?.atflCd && + bbsInfo?.bbsTypeCd !== "BBSIMAGE" && + bbsInfo?.bbsTypeCd !== "BBSMOVIE", }); const { data: imageUrl, isLoading } = useQuery({ @@ -46,6 +49,22 @@ function Post({ bbsId, pstNo }: { bbsId: string; pstNo: string }) { enabled: !!postData?.atflCd, }); + const { data: videoAttachment } = useQuery({ + queryKey: [ENDPOINT.ATTACH_SERVICE.ATTACHMENTS, postData?.atflCd], + queryFn: () => AttachmentApi.getAttachmentsInfo(postData?.atflCd as string), + select: (data) => data[0], + enabled: !!postData?.atflCd && bbsInfo?.bbsTypeCd === "BBSMOVIE", + }); + + const { data: videoUrl } = useQuery({ + queryKey: [ENDPOINT.ATTACH_SERVICE.STREAM_VIDEO, videoAttachment?.atflId], + queryFn: () => + AttachmentApi.getStreamVideoUrlByAtflId( + videoAttachment?.atflId as string, + ), + enabled: !!videoAttachment?.atflId, + }); + const { mutate: deletePost } = useMutation({ mutationFn: (pstPswd: string) => PostApi.deletePost(bbsId, pstNo, pstPswd), onSuccess: () => { @@ -142,6 +161,11 @@ function Post({ bbsId, pstNo }: { bbsId: string; pstNo: string }) { )} )} + {bbsInfo?.bbsTypeCd === "BBSMOVIE" && ( +
+
+ )} 
             {postData?.pstCn ?? ""}
diff --git a/apps/cs/src/widgets/post/ui/with-preview-file-uploader.tsx b/apps/cs/src/widgets/post/ui/with-preview-file-uploader.tsx index 618108017..9496280e6 100644 --- a/apps/cs/src/widgets/post/ui/with-preview-file-uploader.tsx +++ b/apps/cs/src/widgets/post/ui/with-preview-file-uploader.tsx @@ -50,7 +50,7 @@ function WithPreviewFileUploader({ imageUrl = await AttachmentApi.getImageUrlByAtflId(atflId); } if (bbsInfo?.bbsTypeCd === "BBSMOVIE") { - imageUrl = await AttachmentApi.getMovieThumbnailUrl(atflId); + imageUrl = await AttachmentApi.getMovieThumbnailUrlByAtflId(atflId); } setThumbnailUrl(imageUrl); }