guestComments -> guestCommentsList, CreateDesignDialog field 개선

src/App.tsx

@@ -18,7 +18,7 @@ import TemplateComponent from "@src/component/template/TemplateComponent";
 import {dummyWedding} from "@remote/value/Wedding";
 import TemplatesPage from "@page/templates/TemplatesPage";
 import GlobalStyle from "@src/GlobalStyle";
-import WeddingPage from "@page/wedding/WeddingPage";
+import WeddingPage from "@page/WeddingPage";
 
 const {Kakao} = window as any;
 

src/component/template/TemplateComponent.tsx

@@ -101,7 +101,7 @@ function TemplateComponent(
                 templateColor={templateColor}
                 url={wedding.url}
                 baseInfo={wedding.baseInfo}
-                guestComments={wedding.guestComments}
+                guestComments={wedding.guestCommentList}
                 guestComment={wedding.guestComment}
             />
             <FooterTemplate background={templateColor}/>

src/page/wedding/WeddingPage.tsx → src/page/WeddingPage.tsx

@@ -6,36 +6,46 @@ import {Row} from "@designsystem/component/flexLayout";
 import TemplateComponent from "@src/component/template/TemplateComponent";
 import {getDeviceType} from "@remote/enumeration/Device";
 import Cookies from "js-cookie";
+import Text from "@designsystem/component/text";
 
 function WeddingPage() {
     const {url} = useParams();
     const [wedding, setWedding] = useState<Wedding>();
+    const [isError, setIsError] = useState(false);
 
     useEffect(() => {
         if (!url) return;
-        
+
         const cookieKey = `firstVisitor_${url}`;
 
         const isFirstVisitor = !Cookies.get(cookieKey);
 
         if (isFirstVisitor) {
-            Cookies.set(cookieKey, "false", { expires: 365 }); // 1년 동안 유지
+            Cookies.set(cookieKey, "false", {expires: 365}); // 1년 동안 유지
         }
-        
+
         (async () => {
-            const {data} = await weddingApi.getWeddingInvitation(url, {
-                deviceType: getDeviceType(),
-                firstVisitor: isFirstVisitor
-            });
-            setWedding(data);
+            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}/>
             )}
+            {isError && (
+                <Text type={'h5'} style={{marginTop: 20}}>청첩장을 찾을 수 없습니다</Text>
+            )}
         </Row>
     );
 }

src/page/invitation/dashboard/dialog/CreateDesignDialog.tsx

@@ -8,6 +8,8 @@ import TextField from "@designsystem/component/textField";
 import Text from "@designsystem/component/text";
 import weddingApi from "@remote/api/WeddingApi";
 import {useNavigate} from "react-router-dom";
+import OptionTextField from "@page/invitation/design/component/OptionTextField";
+import makeText from "@designsystem/foundation/text/textType";
 
 interface CreateDesignDialogProps {
     dismiss: () => void;
@@ -18,33 +20,35 @@ function CreateDesignDialog(
         dismiss
     }: CreateDesignDialogProps
 ) {
-    const domainFieldRef = useRef<HTMLInputElement>(null);
-    const [isError, setIsError] = useState(false);
+    const [url, setUrl] = useState('');
     const [isFetching, setIsFetching] = useState(false);
     const navigate = useNavigate();
 
     const createDesign = async () => {
-        if (!domainFieldRef.current) return;
-        const url = domainFieldRef.current.value;
-
         if (url === '') {
             alert('도메인 URL을 입력해 주세요');
             return;
         }
-        
+
         setIsFetching(true);
-        
+
         try {
             await weddingApi.checkUrlConflict(url);
             navigate(`/dashboard/design?url=${url}`);
         } catch (error) {
             console.error(error);
-            setIsError(true);
+            alert('이미 사용 중인 URL 입니다.');
         } finally {
             setIsFetching(false);
         }
     };
 
+    const onChange = (value: string) => {
+        // 허용할 문자: 영어 대소문자, 숫자, '-', '_', '.' (공백 및 기타 문자는 제거)
+        const sanitizedValue = value.replace(/[^a-zA-Z0-9-_.]/g, '');
+        setUrl(sanitizedValue);
+    };
+
     return (
         <BaseDialog dismiss={dismiss}>
             <S.container>
@@ -53,7 +57,17 @@ function CreateDesignDialog(
                         <Text type={'p1'}>새로운 디자인을 생성해주세요.</Text>
                         <Text type={'p5'} color={colors.g400}>청첩장에 사용할 도메인을 입력해주세요.</Text>
                     </Column>
-                    <TextField ref={domainFieldRef} isError={isError} supportingText={isError ? '이미 사용 중인 URL 입니다.' : undefined}/>
+                    <Column gap={4}>
+                        <S.textField>
+                            <Text type={'p5'} color={colors.g400} style={{userSelect: 'none'}}>
+                                linkmarry.com/wedding/
+                            </Text>
+                            <input type="text" value={url} onChange={event => onChange(event.target.value)}/>
+                        </S.textField>
+                        <Text type={'p5'} color={colors.g600} style={{marginLeft: 4}}>
+                            영어 대소문자, 숫자, '-', '_', '.'만 허용합니다
+                        </Text>
+                    </Column>
                     <Button text={'생성하기'} role={'assistive'} onClick={createDesign} enabled={!isFetching}/>
                 </Column>
             </S.container>
@@ -69,6 +83,27 @@ const S = {
         background: ${colors.white};
         border-radius: 12px;
         justify-content: center;
+    `,
+    textField: styled.div`
+        display: flex;
+        min-height: 44px;
+        align-items: center;
+        border: 1px solid ${colors.g200};
+        background: ${colors.white};
+        border-radius: 8px;
+        padding-left: 16px;
+        padding-right: 16px;
+        flex: 1;
+        align-self: stretch;
+
+        input {
+            align-self: stretch;
+            margin: 4px 0;
+            outline: none;
+            width: 80px;
+            border: none;
+            ${makeText('p5')};
+        }
     `
 }
 

src/page/invitation/design/InvitationDesign.tsx

@@ -71,7 +71,7 @@ function InvitationDesign() {
         weddingPlace,
         greeting,
         guestComment,
-        guestComments: dummyComments,
+        guestCommentList: dummyComments,
         baseMusic,
         linkShare,
         moneyInfo,

src/remote/value/Wedding.ts

@@ -39,7 +39,7 @@ export default interface Wedding {
     guestComment: GuestComment;
 
     // 방명록 리스트
-    guestComments: Comment[];
+    guestCommentList: Comment[];
 
     // 배경음악
     baseMusic: BaseMusic;
@@ -78,7 +78,7 @@ export const dummyWedding: Wedding = {
     weddingPlace: dummyWeddingPlace,
     greeting: dummyGreeting,
     guestComment: dummyGuestComment,
-    guestComments: dummyComments,
+    guestCommentList: dummyComments,
     baseMusic: dummyBaseMusic,
     linkShare: dummyLinkShare,
     moneyInfo: dummyMoneyInfo,