diff --git a/src/App.tsx b/src/App.tsx index 42ee90b..19bec43 100644 --- a/src/App.tsx +++ b/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; diff --git a/src/component/template/TemplateComponent.tsx b/src/component/template/TemplateComponent.tsx index 036b84e..8b5be8e 100644 --- a/src/component/template/TemplateComponent.tsx +++ b/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} /> diff --git a/src/page/wedding/WeddingPage.tsx b/src/page/WeddingPage.tsx similarity index 58% rename from src/page/wedding/WeddingPage.tsx rename to src/page/WeddingPage.tsx index 701a4d6..607fbe8 100644 --- a/src/page/wedding/WeddingPage.tsx +++ b/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(); + 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 ( {wedding && ( )} + {isError && ( + 청첩장을 찾을 수 없습니다 + )} ); } diff --git a/src/page/invitation/dashboard/dialog/CreateDesignDialog.tsx b/src/page/invitation/dashboard/dialog/CreateDesignDialog.tsx index f64f901..af53b31 100644 --- a/src/page/invitation/dashboard/dialog/CreateDesignDialog.tsx +++ b/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(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 ( @@ -53,7 +57,17 @@ function CreateDesignDialog( 새로운 디자인을 생성해주세요. 청첩장에 사용할 도메인을 입력해주세요. - + + + + linkmarry.com/wedding/ + + onChange(event.target.value)}/> + + + 영어 대소문자, 숫자, '-', '_', '.'만 허용합니다 + +