diff --git a/src/App.tsx b/src/App.tsx
index 19bec43..2f6c12b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -65,7 +65,7 @@ function App() {
                 <Route path={'wedding/:url'} element={<WeddingPage/>}/>
                 <Route path={'sample'} element={(
                     <div style={{display: 'flex', justifyContent: 'center'}}>
-                        <TemplateComponent wedding={dummyWedding}/>
+                        <TemplateComponent wedding={dummyWedding} isPreview={true}/>
                     </div>
                 )}/>
             </Routes>
diff --git a/src/component/template/TemplateComponent.tsx b/src/component/template/TemplateComponent.tsx
index 6730e31..fd7f78c 100644
--- a/src/component/template/TemplateComponent.tsx
+++ b/src/component/template/TemplateComponent.tsx
@@ -1,4 +1,4 @@
-import React, {useRef} from 'react';
+import React, {useRef, useState} from 'react';
 import Wedding from "@remote/value/Wedding";
 import * as S from '@src/component/template/TemplateComponent.style';
 import MoneyInfoTemplate from "@src/component/template/component/MoneyInfoTemplate";
@@ -16,24 +16,34 @@ import {DDayStyle} from "@src/component/template/component/weddingday/DDay";
 import InvitationLetterTemplate, {
     InvitationLetterStyle
 } from "@src/component/template/component/InvitationLetterTemplate";
+import RsvpDialog from "@src/component/template/dialog/rsvp/RsvpDialog";
+import Cookies from "js-cookie";
+import CreateRsvpDialog from "@src/component/template/dialog/rsvp/CreateRsvpDialog";
 
 interface Template1Props {
     wedding: Wedding;
+    isPreview?: boolean;
     onRefresh?: () => void;
 }
 
 function TemplateComponent(
     {
         wedding,
+        isPreview = false,
         onRefresh
     }: Template1Props
 ) {
+    const [showRsvpDialog, setShowRsvpDialog] = useState(
+        isPreview ? false : Cookies.get(`hide_RsvpDialog_${wedding.url}`) === undefined
+    );
+    const [showCreateRsvpDialog, setShowCreateRsvpDialog] = useState(false);
     const {templateColor, templateFont, templateFontSize} = wedding.template;
     const rootRef = useRef<HTMLDivElement>(null);
 
     (() => {
         const addFontSize = templateFontSizeRecord[templateFontSize].addFontSize;
         increaseFontSize(rootRef, addFontSize);
+        Cookies.remove('hide_RsvpDialog')
     })();
 
     const slideStyle: Record<TemplateName, GallerySlideStyle | undefined> = {
@@ -53,7 +63,7 @@ function TemplateComponent(
         템플릿5: 'style2',
         템플릿6: 'style1',
     }
-    
+
     const invitationLetterStyle: Record<TemplateName, InvitationLetterStyle> = {
         템플릿1: 'style1',
         템플릿2: 'style1',
@@ -105,9 +115,31 @@ function TemplateComponent(
                 baseInfo={wedding.baseInfo}
                 guestComments={wedding.guestCommentList}
                 guestComment={wedding.guestComment}
-                onRefresh={onRefresh ?? (() => {})}
+                onRefresh={onRefresh ?? (() => {
+                })}
             />
             <FooterTemplate background={templateColor}/>
+            {showRsvpDialog && (
+                <RsvpDialog
+                    url={wedding.url}
+                    baseInfo={wedding.baseInfo}
+                    weddingSchedule={wedding.weddingSchedule}
+                    weddingPlace={wedding.weddingPlace}
+                    rsvp={wedding.rsvp}
+                    onConfirm={() => {
+                        setShowRsvpDialog(false);
+                        setShowCreateRsvpDialog(true);
+                    }}
+                    dismiss={() => setShowRsvpDialog(false)}
+                />
+            )}
+            {showCreateRsvpDialog && (
+                <CreateRsvpDialog
+                    url={wedding.url}
+                    rsvp={wedding.rsvp}
+                    dismiss={() => setShowCreateRsvpDialog(false)}
+                />
+            )}
         </S.container>
     );
 }
diff --git a/src/component/template/component/GuestCommentsTemplate.tsx b/src/component/template/component/GuestCommentsTemplate.tsx
index b13cd5f..822d04e 100644
--- a/src/component/template/component/GuestCommentsTemplate.tsx
+++ b/src/component/template/component/GuestCommentsTemplate.tsx
@@ -12,9 +12,9 @@ import {trimString} from "@util/string.util";
 import Button from "@designsystem/component/button";
 import BaseInfo from "@remote/value/BaseInfo";
 import GuestComment from "@remote/value/GuestComment";
-import RemoveGuestCommentDialog from "@src/component/template/dialog/RemoveGuestCommentDialog";
-import GuestCommentsDetailDialog from "@src/component/template/dialog/GuestCommentsDetailDialog";
-import CreateGuestCommentDialog from "@src/component/template/dialog/CreateGuestCommentDialog";
+import RemoveGuestCommentDialog from "@src/component/template/dialog/guestcomment/RemoveGuestCommentDialog";
+import GuestCommentsDetailDialog from "@src/component/template/dialog/guestcomment/GuestCommentsDetailDialog";
+import CreateGuestCommentDialog from "@src/component/template/dialog/guestcomment/CreateGuestCommentDialog";
 
 interface GuestCommentsTemplateProps {
     templateColor: string;
diff --git a/src/component/template/dialog/CreateGuestCommentDialog.tsx b/src/component/template/dialog/guestcomment/CreateGuestCommentDialog.tsx
similarity index 100%
rename from src/component/template/dialog/CreateGuestCommentDialog.tsx
rename to src/component/template/dialog/guestcomment/CreateGuestCommentDialog.tsx
diff --git a/src/component/template/dialog/GuestCommentsDetailDialog.tsx b/src/component/template/dialog/guestcomment/GuestCommentsDetailDialog.tsx
similarity index 100%
rename from src/component/template/dialog/GuestCommentsDetailDialog.tsx
rename to src/component/template/dialog/guestcomment/GuestCommentsDetailDialog.tsx
diff --git a/src/component/template/dialog/RemoveGuestCommentDialog.tsx b/src/component/template/dialog/guestcomment/RemoveGuestCommentDialog.tsx
similarity index 100%
rename from src/component/template/dialog/RemoveGuestCommentDialog.tsx
rename to src/component/template/dialog/guestcomment/RemoveGuestCommentDialog.tsx
diff --git a/src/component/template/dialog/rsvp/ConfirmCreateRsvpDialog.tsx b/src/component/template/dialog/rsvp/ConfirmCreateRsvpDialog.tsx
new file mode 100644
index 0000000..9927852
--- /dev/null
+++ b/src/component/template/dialog/rsvp/ConfirmCreateRsvpDialog.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import styled from "styled-components";
+import BaseDialog, {applyBaseDialogContent} from "@designsystem/component/dialog/baseDialog";
+import colors from "@designsystem/foundation/colors";
+import {Column, Row} from "@designsystem/component/flexLayout";
+import Text from "@designsystem/component/text";
+import Button from "@designsystem/component/button";
+
+interface ConfirmRsvpDialogProps {
+    dismiss: () => void;
+    onConfirm: () => void;
+}
+
+function ConfirmCreateRsvpDialog(
+    {
+        dismiss,
+        onConfirm
+    }: ConfirmRsvpDialogProps
+) {
+    return (
+        <BaseDialog dismiss={dismiss}>
+            <S.container>
+                <Column gap={4} $alignItems={'center'}>
+                    <Text type={'h6'}>참석의사 전달</Text>
+                    <Text type={'caption1'}>참석의사 전달시 수정이 불가능합니다</Text>
+                </Column>
+                <Row gap={12} $alignSelf={'stretch'}>
+                    <Button text={'취소'} role={'assistive'} onClick={dismiss} style={{flex: 1}}/>
+                    <Button text={'확인'} onClick={onConfirm} style={{flex: 1}}/>
+                </Row>
+            </S.container>
+        </BaseDialog>
+    );
+}
+
+const S = {
+    container: styled.div`
+        display: flex;
+        flex-direction: column;
+        gap: 48px;
+        ${applyBaseDialogContent()};
+        border-radius: 12px;
+        padding: 44px 36px;
+        align-items: center;
+        background: ${colors.white};
+        max-width: 388px;
+        width: 90vw;
+    `
+}
+
+export default ConfirmCreateRsvpDialog;
\ No newline at end of file
diff --git a/src/component/template/dialog/rsvp/CreateRsvpDialog.tsx b/src/component/template/dialog/rsvp/CreateRsvpDialog.tsx
new file mode 100644
index 0000000..6ad6bba
--- /dev/null
+++ b/src/component/template/dialog/rsvp/CreateRsvpDialog.tsx
@@ -0,0 +1,175 @@
+import React, {useRef, useState} from 'react';
+import BaseDialog, {applyBaseDialogContent} from "@designsystem/component/dialog/baseDialog";
+import styled from "styled-components";
+import colors from "@designsystem/foundation/colors";
+import {Column, Row} from "@designsystem/component/flexLayout";
+import Spacer from "@designsystem/component/spacer";
+import Text from "@designsystem/component/text";
+import Icon, {IconType} from "@designsystem/foundation/icon";
+import Button from "@designsystem/component/button";
+import OptionSegmentedButton from "@page/invitation/design/component/OptionSegmentedButton";
+import OptionTextField from "@page/invitation/design/component/OptionTextField";
+import weddingApi from "@remote/api/WeddingApi";
+import GuestType from "@remote/enumeration/GuestType";
+import Rsvp from "@remote/value/Rsvp";
+import ConfirmCreateRsvpDialog from "@src/component/template/dialog/rsvp/ConfirmCreateRsvpDialog";
+
+interface CreateRsvpDialogProps {
+    url: string;
+    rsvp: Rsvp;
+    dismiss: () => void;
+}
+
+function CreateRsvpDialog(
+    {
+        url,
+        rsvp,
+        dismiss
+    }: CreateRsvpDialogProps
+) {
+    const [guestType, setGuestType] = useState(0);
+    const [isAttend, setIsAttend] = useState(0);
+    const [isMeal, setIsMeal] = useState(0);
+    const [showConfirmCreateRsvpDialog, setShowConfirmCreateRsvpDialog] = useState(false);
+
+    const guestNameRef = useRef<HTMLInputElement>(null);
+    const guestPhoneRef = useRef<HTMLInputElement>(null);
+    const guestCntRef = useRef<HTMLInputElement>(null);
+    const guestCommentRef = useRef<HTMLInputElement>(null);
+
+    const createRsvp = async () => {
+        const guestName = guestNameRef.current!!;
+        const guestPhone = guestPhoneRef.current!!;
+        const guestCnt = guestCntRef.current!!;
+        const guestComment = guestCommentRef.current!!;
+
+        if (guestName.value === '') {
+            alert('참석자 성함을 입력해 주세요');
+            return;
+        }
+
+        if (guestPhone.value === '' && rsvp.attendPhoneStatus) {
+            alert('연락처를 입력해 주세요');
+            return;
+        }
+
+        if (guestCnt.value === '' && rsvp.attendGuestCntStatus) {
+            alert('동행 인원을 입력해 주세요');
+            return;
+        }
+
+        await weddingApi.createRsvp({
+            url,
+            guestType: guestType === 0 ? GuestType.GROOM : GuestType.BRIDE,
+            isAttend: isAttend === 0,
+            isMeal: isMeal === 0,
+            guestName: guestName.value,
+            guestPhone: guestPhone.value,
+            guestCnt: Number(guestCnt.value),
+            guestComment: guestComment.value,
+        });
+        dismiss();
+    };
+
+    return (
+        <BaseDialog dismiss={dismiss}>
+            <S.container>
+                <Row $alignItems={'center'} padding={'24px 0'} style={{position: 'relative'}}>
+                    <Spacer/>
+                    <Text type={'p2'}>참석 의사 전달</Text>
+                    <Spacer/>
+                    <Icon
+                        type={IconType.CrossLine}
+                        tint={colors.g600}
+                        size={20}
+                        style={{
+                            cursor: 'pointer',
+                            right: 32,
+                            position: 'absolute'
+                        }}
+                        onClick={dismiss}
+                    />
+                </Row>
+                <Column gap={36} padding={'36px 40px 0 40px'} $alignItems={'stretch'}>
+                    <Column gap={28} $alignItems={'stretch'}>
+                        <Column gap={4} $alignItems={'stretch'}>
+                            <Text type={'p5'}>어느 분의 하객인가요?</Text>
+                            <OptionSegmentedButton selectedIndex={guestType} items={['신랑', '신부']}
+                                                   onClickItem={index => {
+                                                       setGuestType(index);
+                                                   }}/>
+                        </Column>
+                        <Column gap={4} $alignItems={'stretch'}>
+                            <Text type={'p5'}>참석 여부를 선택해 주세요.</Text>
+                            <OptionSegmentedButton selectedIndex={isAttend} items={['참석할게요', '참석이 어려워요']}
+                                                   onClickItem={index => {
+                                                       setIsAttend(index);
+                                                   }}/>
+                        </Column>
+                        {rsvp.attendMealStatus && (
+                            <Column gap={4} $alignItems={'stretch'}>
+                                <Text type={'p5'}>식사 여부를 선택해 주세요.</Text>
+                                <OptionSegmentedButton
+                                    selectedIndex={isMeal} items={['식사함', '식사안함']}
+                                    onClickItem={index => {
+                                        setIsMeal(index);
+                                    }}
+                                />
+                            </Column>
+                        )}
+                        <Row gap={18} $alignItems={'center'}>
+                            <Text type={'p5'} style={{width: 75}}>참석자 성함</Text>
+                            <OptionTextField ref={guestNameRef} placeholder={'참석자 본인 성함'} style={{flex: 1}}/>
+                        </Row>
+                        {rsvp.attendPhoneStatus && (
+                            <Row gap={18} $alignItems={'center'}>
+                                <Text type={'p5'} style={{width: 75}}>연락처</Text>
+                                <OptionTextField ref={guestPhoneRef} placeholder={'- 없이 입력'} style={{flex: 1}}/>
+                            </Row>
+                        )}
+                        {rsvp.attendGuestCntStatus && (
+                            <Row gap={18} $alignItems={'center'}>
+                                <Text type={'p5'} style={{width: 75}}>동행 인원</Text>
+                                <OptionTextField ref={guestCntRef} placeholder={'본인 제외한 추가 참석 인원'} fieldProps={{
+                                    defaultValue: 0,
+                                    type: 'number'
+                                }} style={{flex: 1}}/>
+                            </Row>
+                        )}
+                        {rsvp.attendEtcStatus && (
+                            <Column gap={4} $alignItems={'stretch'}>
+                                <Text type={'p5'}>추가로 전달할 내용을 입력해 주세요.</Text>
+                                <OptionTextField ref={guestCommentRef} autoWidth={false} placeholder={'내용 입력'}/>
+                            </Column>
+                        )}
+                    </Column>
+                    <Button text={'참석의사 전달하기'} onClick={() => setShowConfirmCreateRsvpDialog(true)}/>
+                </Column>
+            </S.container>
+            {showConfirmCreateRsvpDialog && (
+                <ConfirmCreateRsvpDialog
+                    dismiss={() => setShowConfirmCreateRsvpDialog(false)}
+                    onConfirm={createRsvp}
+                />
+            )}
+        </BaseDialog>
+    );
+}
+
+const S = {
+    container: styled.div`
+        display: flex;
+        flex-direction: column;
+        max-width: 436px;
+        width: 100vw;
+        max-height: 100vh;
+        overflow-y: hidden;
+        align-items: stretch;
+        background: ${colors.white};
+        padding-bottom: 36px;
+        border-radius: 4px;
+        ${applyBaseDialogContent()};
+    `
+}
+
+export default CreateRsvpDialog;
\ No newline at end of file
diff --git a/src/component/template/dialog/rsvp/RsvpDialog.tsx b/src/component/template/dialog/rsvp/RsvpDialog.tsx
new file mode 100644
index 0000000..a26dc4f
--- /dev/null
+++ b/src/component/template/dialog/rsvp/RsvpDialog.tsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import BaseDialog, {applyBaseDialogContent} from "@designsystem/component/dialog/baseDialog";
+import styled from "styled-components";
+import colors from "@designsystem/foundation/colors";
+import {Column} from "@designsystem/component/flexLayout";
+import HorizontalDivider from "@designsystem/component/horizontalDivider";
+import Text from "@designsystem/component/text";
+import BaseInfo from "@remote/value/BaseInfo";
+import WeddingSchedule from "@remote/value/WeddingSchedule";
+import WeddingPlace from "@remote/value/WeddingPlace";
+import {format, parse} from "date-fns";
+import {ko} from "date-fns/locale";
+import Button from "@designsystem/component/button";
+import Cookies from "js-cookie";
+import Rsvp from "@remote/value/Rsvp";
+
+interface RsvpDialogProps {
+    url: string;
+    baseInfo: BaseInfo;
+    weddingSchedule: WeddingSchedule;
+    weddingPlace: WeddingPlace;
+    rsvp: Rsvp;
+    onConfirm: () => void;
+    dismiss: () => void;
+}
+
+function RsvpDialog(
+    {
+        url,
+        baseInfo,
+        weddingSchedule,
+        weddingPlace,
+        rsvp,
+        onConfirm,
+        dismiss
+    }: RsvpDialogProps
+) {
+    const dateString = `${weddingSchedule.weddingDate} ${weddingSchedule.weddingTime}`;
+    const date = parse(dateString, 'yyyy-MM-dd HH:mm', new Date());
+    const isValidDate = !isNaN(date.getTime());
+
+    return (
+        <BaseDialog dismiss={dismiss}>
+            <S.container>
+                <Column gap={24} $alignItems={'stretch'}>
+                    <Column gap={4} $alignItems={'center'}>
+                        <Text type={'h6'} style={{wordBreak: 'break-all', textAlign: 'center'}}>{rsvp.rsvpTitle}</Text>
+                        <Text type={'caption1'} style={{wordBreak: 'break-all', textAlign: 'center'}} color={colors.g400}>{rsvp.rsvpContent}</Text>
+                    </Column>
+                    <HorizontalDivider/>
+                    <Text type={'caption1'}>
+                        <Column $alignItems={'center'}>
+                            <span>신랑 {baseInfo.groomName} & 신부 {baseInfo.brideName}</span>
+                            {isValidDate && (
+                                <span>{format(date, 'yyyy년 M월 d일 EEEE a h시', {locale: ko})}</span>
+                            )}
+                            <span>{weddingPlace.placeName} ({weddingPlace.floorHall})</span>
+                        </Column>
+                    </Text>
+                </Column>
+                <Column gap={12} $alignItems={'center'} $alignSelf={'stretch'}>
+                    <Button text={'참석의사 전달하기'} onClick={onConfirm} style={{alignSelf: 'stretch'}}/>
+                    <Text type={'caption1'} color={colors.g400} style={{cursor: 'pointer'}} onClick={() => {
+                        Cookies.set(`hide_RsvpDialog_${url}`, 'true', {expires: 1});
+                        dismiss();
+                    }}>오늘 하루 보지 않기</Text>
+                </Column>
+            </S.container>
+        </BaseDialog>
+    );
+}
+
+const S = {
+    container: styled.div`
+        display: flex;
+        ${applyBaseDialogContent()};
+        flex-direction: column;
+        max-width: 436px;
+        width: 100vw;
+        border-radius: 12px;
+        background: ${colors.white};
+        padding: 44px 24px;
+        align-items: stretch;
+        gap: 48px;
+    `
+}
+
+export default RsvpDialog;
\ No newline at end of file
diff --git a/src/page/WeddingPage.tsx b/src/page/WeddingPage.tsx
index 8cfa7f3..ecb8093 100644
--- a/src/page/WeddingPage.tsx
+++ b/src/page/WeddingPage.tsx
@@ -44,7 +44,7 @@ function WeddingPage() {
     return (
         <Row $justifyContent={'center'}>
             {wedding && (
-                <TemplateComponent 
+                <TemplateComponent
                     wedding={wedding}
                     onRefresh={getWedding}
                 />
diff --git a/src/page/invitation/design/InvitationDesign.tsx b/src/page/invitation/design/InvitationDesign.tsx
index 69a9166..922634d 100644
--- a/src/page/invitation/design/InvitationDesign.tsx
+++ b/src/page/invitation/design/InvitationDesign.tsx
@@ -490,7 +490,7 @@ function InvitationDesign() {
             <S.preview>
                 <S.previewScrollableContent>
                     <S.previewContent>
-                        <TemplateComponent wedding={wedding}/>
+                        <TemplateComponent wedding={wedding} isPreview={true}/>
                     </S.previewContent>
                 </S.previewScrollableContent>
             </S.preview>
diff --git a/src/page/invitation/design/component/OptionLabel.tsx b/src/page/invitation/design/component/OptionLabel.tsx
index 032d36f..eb8a3b0 100644
--- a/src/page/invitation/design/component/OptionLabel.tsx
+++ b/src/page/invitation/design/component/OptionLabel.tsx
@@ -14,7 +14,7 @@ function OptionLabel(
 ) {
     return (
         <S.wrapper {...props}>
-            <Text type={'p4'}>{label}</Text>
+            <Text type={'p4'} style={{whiteSpace: 'nowrap'}}>{label}</Text>
         </S.wrapper>
     );
 }
diff --git a/src/page/invitation/design/component/OptionTextField.tsx b/src/page/invitation/design/component/OptionTextField.tsx
index 7f4494e..dc15e97 100644
--- a/src/page/invitation/design/component/OptionTextField.tsx
+++ b/src/page/invitation/design/component/OptionTextField.tsx
@@ -7,6 +7,7 @@ interface OptionTextFieldProps extends HTMLAttributes<HTMLDivElement> {
     fieldProps?: InputHTMLAttributes<HTMLInputElement>;
     placeholder?: string;
     width?: number;
+    autoWidth?: boolean;
     leadingContent?: ReactNode;
 }
 
@@ -14,14 +15,16 @@ function OptionTextField(
     {
         fieldProps,
         placeholder,
-        width = 98,
+        width,
+        autoWidth = true,
         leadingContent,
         ...props
     }: OptionTextFieldProps,
     ref: ForwardedRef<HTMLInputElement>
 ) {
+    const adjustedWidth = autoWidth ? (width ?? 98) : width;
     return (
-        <S.container width={width} {...props}>
+        <S.container width={adjustedWidth} {...props}>
             {leadingContent}
             <S.textField ref={ref} {...fieldProps} placeholder={placeholder}/>
         </S.container>
@@ -29,9 +32,9 @@ function OptionTextField(
 }
 
 const S = {
-    container: styled.div<{ width: number }>`
+    container: styled.div<{ width?: number }>`
         display: flex;
-        ${({width}) => css`
+        ${({width}) => width && css`
             width: ${width}px;
         `};
         height: 44px;