fullUrl, wedding 불러오기 개선, 전체보기에서 방명록 삭제

LinkMarry · Jan 19, 2025 · c911a1a · c911a1a
1 parent 36f31f8
commit c911a1a
Show file tree

Hide file tree

Showing 8 changed files with 68 additions and 44 deletions.
diff --git 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 ?? (() => {})}
             />
             <FooterTemplate background={templateColor}/>
         </S.container>

diff --git 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<Comment>();
     const [showCreateGuestCommentDialog, setShowCreateGuestCommentDialog] = useState(false);
     const [showRemoveGuestCommentDialog, setShowRemoveGuestCommentDialog] = useState(false);
     const [showGuestCommentsDetailDialog, setShowGuestCommentsDetailDialog] = useState(false);
-    
+
     return (
         <S.root background={templateColor}>
             <Column gap={40} $alignItems={'stretch'}>
@@ -58,7 +60,7 @@ function GuestCommentsTemplate(
                         }}
                     />
                     <Text
-                        style={{alignSelf: 'flex-end', paddingRight: 4}}
+                        style={{alignSelf: 'flex-end', paddingRight: 4, cursor: 'pointer'}}
                         size={14} weight={300} color={colors.g600}
                         onClick={() => {
                             setShowGuestCommentsDetailDialog(true);
@@ -85,11 +87,19 @@ function GuestCommentsTemplate(
             {showGuestCommentsDetailDialog && (
                 <GuestCommentsDetailDialog
                     comments={guestComments}
+                    onRemove={comment => {
+                        setSelectedRemoveGuestComment(comment);
+                        setShowRemoveGuestCommentDialog(true);
+                    }}
                     dismiss={() => setShowGuestCommentsDetailDialog(false)}
                 />
             )}
             {showCreateGuestCommentDialog && (
-                <CreateGuestCommentDialog url={url} dismiss={() => setShowCreateGuestCommentDialog(false)}/>
+                <CreateGuestCommentDialog
+                    url={url}
+                    dismiss={() => setShowCreateGuestCommentDialog(false)}
+                    onRefresh={onRefresh}
+                />
             )}
         </S.root>
     );
@@ -199,7 +209,7 @@ export function BasicGuestComment(
                 />
             </Row>
             <Text size={16} color={colors.g600} weight={300}>
-                {comment.content}
+                {comment.comment}
             </Text>
         </S.basicContainer>
     );
@@ -221,7 +231,7 @@ export function StickerGuestComment(
             />
             <Column flex={1}>
                 <Text size={16} weight={300} color={colors.g600}>
-                    {comment.content}
+                    {comment.comment}
                 </Text>
                 <Spacer/>
                 <Column gap={4}>

diff --git 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<HTMLInputElement>(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
@@ -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
@@ -14,34 +14,40 @@ 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);
 
         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 (
         <Row $justifyContent={'center'}>
             {wedding && (
-                <TemplateComponent wedding={wedding}/>
+                <TemplateComponent 
+                    wedding={wedding}
+                    onRefresh={getWedding}
+                />
             )}
             {isError && (
                 <Text type={'h5'} style={{marginTop: 20}}>청첩장을 찾을 수 없습니다</Text>

diff --git 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
@@ -47,7 +47,7 @@ function InvitationDashboardGuestComment() {
                         <S.body.row>
                             <S.body.dateCell>2024.dummy..</S.body.dateCell>
                             <S.body.nameCell>{comment.name}</S.body.nameCell>
-                            <S.body.messageCell>{comment.content}</S.body.messageCell>
+                            <S.body.messageCell>{comment.comment}</S.body.messageCell>
                         </S.body.row>
                     )) : <div>...</div>}{/* TODO: Shimmer */}
                 </Column>

diff --git 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'
     },