From c911a1a4d5620103a731dc24bf4d42b5ff671d30 Mon Sep 17 00:00:00 2001 From: hhhello Date: Sun, 19 Jan 2025 12:51:25 +0900 Subject: [PATCH] =?UTF-8?q?fullUrl,=20wedding=20=EB=B6=88=EB=9F=AC?= =?UTF-8?q?=EC=98=A4=EA=B8=B0=20=EA=B0=9C=EC=84=A0,=20=EC=A0=84=EC=B2=B4?= =?UTF-8?q?=EB=B3=B4=EA=B8=B0=EC=97=90=EC=84=9C=20=EB=B0=A9=EB=AA=85?= =?UTF-8?q?=EB=A1=9D=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/template/TemplateComponent.tsx | 5 ++- .../component/GuestCommentsTemplate.tsx | 22 ++++++++--- .../dialog/CreateGuestCommentDialog.tsx | 8 ++-- .../dialog/GuestCommentsDetailDialog.tsx | 4 +- src/page/WeddingPage.tsx | 38 +++++++++++-------- .../component/DashboardInvitationCell.tsx | 7 ++-- .../InvitationDashboardGuestComment.tsx | 2 +- src/remote/value/Comment.ts | 26 ++++++------- 8 files changed, 68 insertions(+), 44 deletions(-) diff --git a/src/component/template/TemplateComponent.tsx b/src/component/template/TemplateComponent.tsx index 8b5be8e..6730e31 100644 --- a/src/component/template/TemplateComponent.tsx +++ b/src/component/template/TemplateComponent.tsx @@ -19,11 +19,13 @@ import InvitationLetterTemplate, { interface Template1Props { wedding: Wedding; + onRefresh?: () => void; } function TemplateComponent( { - wedding + wedding, + onRefresh }: Template1Props ) { const {templateColor, templateFont, templateFontSize} = wedding.template; @@ -103,6 +105,7 @@ function TemplateComponent( baseInfo={wedding.baseInfo} guestComments={wedding.guestCommentList} guestComment={wedding.guestComment} + onRefresh={onRefresh ?? (() => {})} /> diff --git a/src/component/template/component/GuestCommentsTemplate.tsx b/src/component/template/component/GuestCommentsTemplate.tsx index d113d87..b13cd5f 100644 --- a/src/component/template/component/GuestCommentsTemplate.tsx +++ b/src/component/template/component/GuestCommentsTemplate.tsx @@ -22,6 +22,7 @@ interface GuestCommentsTemplateProps { baseInfo: BaseInfo; guestComments: Comment[]; guestComment: GuestComment; + onRefresh: () => void; } function GuestCommentsTemplate( @@ -30,14 +31,15 @@ function GuestCommentsTemplate( url, baseInfo, guestComments, - guestComment + guestComment, + onRefresh }: GuestCommentsTemplateProps ) { const [selectedRemoveGuestComment, setSelectedRemoveGuestComment] = useState(); const [showCreateGuestCommentDialog, setShowCreateGuestCommentDialog] = useState(false); const [showRemoveGuestCommentDialog, setShowRemoveGuestCommentDialog] = useState(false); const [showGuestCommentsDetailDialog, setShowGuestCommentsDetailDialog] = useState(false); - + return ( @@ -58,7 +60,7 @@ function GuestCommentsTemplate( }} /> { setShowGuestCommentsDetailDialog(true); @@ -85,11 +87,19 @@ function GuestCommentsTemplate( {showGuestCommentsDetailDialog && ( { + setSelectedRemoveGuestComment(comment); + setShowRemoveGuestCommentDialog(true); + }} dismiss={() => setShowGuestCommentsDetailDialog(false)} /> )} {showCreateGuestCommentDialog && ( - setShowCreateGuestCommentDialog(false)}/> + setShowCreateGuestCommentDialog(false)} + onRefresh={onRefresh} + /> )} ); @@ -199,7 +209,7 @@ export function BasicGuestComment( /> - {comment.content} + {comment.comment} ); @@ -221,7 +231,7 @@ export function StickerGuestComment( /> - {comment.content} + {comment.comment} diff --git a/src/component/template/dialog/CreateGuestCommentDialog.tsx b/src/component/template/dialog/CreateGuestCommentDialog.tsx index cfdd4f0..91f6908 100644 --- a/src/component/template/dialog/CreateGuestCommentDialog.tsx +++ b/src/component/template/dialog/CreateGuestCommentDialog.tsx @@ -9,17 +9,18 @@ import Textarea from "@designsystem/component/textarea"; import Button from "@designsystem/component/button"; import weddingApi from "@remote/api/WeddingApi"; import {useNavigate} from "react-router-dom"; -import {AxiosError, isAxiosError} from "axios"; interface CreateGuestCommentDialogProps { url: string; dismiss: () => void; + onRefresh: () => void; } function CreateGuestCommentDialog( { url, - dismiss + dismiss, + onRefresh }: CreateGuestCommentDialogProps ) { const nameRef = useRef(null); @@ -52,7 +53,8 @@ function CreateGuestCommentDialog( url }); alert('방명록 작성 완료'); - navigate(0); + onRefresh(); + dismiss(); } catch (error) { alert('방명록 작성 실패'); } diff --git a/src/component/template/dialog/GuestCommentsDetailDialog.tsx b/src/component/template/dialog/GuestCommentsDetailDialog.tsx index 84d4a61..c1a7d87 100644 --- a/src/component/template/dialog/GuestCommentsDetailDialog.tsx +++ b/src/component/template/dialog/GuestCommentsDetailDialog.tsx @@ -12,12 +12,14 @@ import Icon, {IconType} from "@designsystem/foundation/icon"; interface GuestCommentsDetailDialogProps { comments: Comment[]; + onRemove: (comment: Comment) => void; dismiss: () => void; } function GuestCommentsDetailDialog( { comments, + onRemove, dismiss }: GuestCommentsDetailDialogProps ) { @@ -61,7 +63,7 @@ function GuestCommentsDetailDialog( comment={comment} background={colors.white} onRemove={() => { - + onRemove(comment); }} style={{ boxShadow: '0px 2px 8px 0px rgba(0, 0, 0, 0.12)' diff --git a/src/page/WeddingPage.tsx b/src/page/WeddingPage.tsx index 607fbe8..8cfa7f3 100644 --- a/src/page/WeddingPage.tsx +++ b/src/page/WeddingPage.tsx @@ -14,8 +14,13 @@ function WeddingPage() { const [isError, setIsError] = useState(false); useEffect(() => { + (async () => { + await getWedding(); + })(); + }, []); + + const getWedding = async () => { if (!url) return; - const cookieKey = `firstVisitor_${url}`; const isFirstVisitor = !Cookies.get(cookieKey); @@ -23,25 +28,26 @@ function WeddingPage() { if (isFirstVisitor) { Cookies.set(cookieKey, "false", {expires: 365}); // 1년 동안 유지 } - - (async () => { - try { - const {data} = await weddingApi.getWeddingInvitation(url, { - deviceType: getDeviceType(), - firstVisitor: isFirstVisitor - }); - setWedding(data); - } catch (error) { - console.error(error); - setIsError(true); - } - })(); - }, []); + + try { + const {data} = await weddingApi.getWeddingInvitation(url, { + deviceType: getDeviceType(), + firstVisitor: isFirstVisitor + }); + setWedding(data); + } catch (error) { + console.error(error); + setIsError(true); + } + } return ( {wedding && ( - + )} {isError && ( 청첩장을 찾을 수 없습니다 diff --git a/src/page/invitation/dashboard/component/DashboardInvitationCell.tsx b/src/page/invitation/dashboard/component/DashboardInvitationCell.tsx index cc43154..ade043f 100644 --- a/src/page/invitation/dashboard/component/DashboardInvitationCell.tsx +++ b/src/page/invitation/dashboard/component/DashboardInvitationCell.tsx @@ -28,6 +28,7 @@ function DashboardInvitationCell( ) { const [showPopover, setShowPopover] = useState(false); const navigate = useNavigate(); + const fullUrl = `${window.location.origin}/wedding/${weddingInfo.url}` const onClickPopover = async (type: DashboardPopoverClickType) => { switch (type) { @@ -41,7 +42,7 @@ function DashboardInvitationCell( ${baseInfo.groomName}, ${baseInfo.brideName}님의 링크메리 모바일 청첩장이 도착하였습니다. 청첩장을 확인하시려면 아래 링크를 클릭해 주세요. 따뜻한 축하와 함께 자리를 빛내 주시면 감사하겠습니다. 😊`, - url: `${window.location.origin}/wedding/${weddingInfo.url}`, + url: fullUrl, }); } catch (error) { console.error(error); @@ -50,11 +51,11 @@ ${baseInfo.groomName}, ${baseInfo.brideName}님의 링크메리 모바일 청첩 break; case 'copyLink': try { - await navigator.clipboard.writeText(weddingInfo.url); + await navigator.clipboard.writeText(fullUrl); alert("복사되었습니다. 원하는 곳에 붙여넣기하여 주세요."); } catch (error) { console.error(error); - prompt("키보드의 ctrl+C 또는 마우스 오른쪽의 복사하기를 이용해주세요.", weddingInfo.url); + prompt("키보드의 ctrl+C 또는 마우스 오른쪽의 복사하기를 이용해주세요.", fullUrl); } break; case 'editLink': diff --git a/src/page/invitation/dashboard/guestComment/InvitationDashboardGuestComment.tsx b/src/page/invitation/dashboard/guestComment/InvitationDashboardGuestComment.tsx index a6d7f7d..99465be 100644 --- a/src/page/invitation/dashboard/guestComment/InvitationDashboardGuestComment.tsx +++ b/src/page/invitation/dashboard/guestComment/InvitationDashboardGuestComment.tsx @@ -47,7 +47,7 @@ function InvitationDashboardGuestComment() { 2024.dummy.. {comment.name} - {comment.content} + {comment.comment} )) :
...
}{/* TODO: Shimmer */} diff --git a/src/remote/value/Comment.ts b/src/remote/value/Comment.ts index c995edd..9048d11 100644 --- a/src/remote/value/Comment.ts +++ b/src/remote/value/Comment.ts @@ -6,7 +6,7 @@ export default interface Comment { name: string; // 방명록 내용 - content: string; + comment: string; // 작성일시 createdDate: string; @@ -16,74 +16,74 @@ export const dummyComments: Comment[] = [ { id: 0, name: '작성자', - content: '결혼 축하한다~~\n' + + comment: '결혼 축하한다~~\n' + '행복하게 잘 살아라!!', createdDate: '2025-01-01 10:10:10' }, { id: 1, name: '작성자', - content: '싸우지 말고 잘 살아라~\n' + + comment: '싸우지 말고 잘 살아라~\n' + '결혼식장 기대된다!!! ☺️', createdDate: '2025-01-01 10:10:10' }, { id: 2, name: '작성자', - content: 'ㅊㅊ', + comment: 'ㅊㅊ', createdDate: '2025-01-01 10:10:10' }, { id: 3, name: '작성자', - content: 'ㅊㅊ', + comment: 'ㅊㅊ', createdDate: '2025-01-01 10:10:10' }, { id: 3, name: '작성자', - content: 'ㅊㅊ', + comment: 'ㅊㅊ', createdDate: '2025-01-01 10:10:10' }, { id: 3, name: '작성자', - content: 'ㅊㅊ', + comment: 'ㅊㅊ', createdDate: '2025-01-01 10:10:10' }, { id: 3, name: '작성자', - content: 'ㅊㅊ', + comment: 'ㅊㅊ', createdDate: '2025-01-01 10:10:10' },{ id: 3, name: '작성자', - content: 'ㅊㅊ', + comment: 'ㅊㅊ', createdDate: '2025-01-01 10:10:10' }, { id: 3, name: '작성자', - content: 'ㅊㅊ', + comment: 'ㅊㅊ', createdDate: '2025-01-01 10:10:10' }, { id: 3, name: '작성자', - content: 'ㅊㅊ', + comment: 'ㅊㅊ', createdDate: '2025-01-01 10:10:10' }, { id: 3, name: '작성자', - content: 'ㅊㅊ', + comment: 'ㅊㅊ', createdDate: '2025-01-01 10:10:10' }, { id: 3, name: '작성자', - content: 'ㅊㅊ', + comment: 'ㅊㅊ', createdDate: '2025-01-01 10:10:10' },