a

LinkMarry · Feb 1, 2025 · c1cdb39 · c1cdb39
1 parent 42c25e8
commit c1cdb39
Show file tree

Hide file tree

Showing 13 changed files with 58 additions and 35 deletions.
diff --git a/public/index.html b/public/index.html
@@ -17,20 +17,6 @@
     })(window, document, 'script', 'dataLayer', 'GTM-5THQMPTZ');</script>
     <!-- End Google Tag Manager -->
 
-    <!-- Google tag (gtag.js) -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-BTBTLKHSGH"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-
-        function gtag() {
-            dataLayer.push(arguments);
-        }
-
-        gtag('js', new Date());
-
-        gtag('config', 'G-BTBTLKHSGH');
-    </script>
-
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=AW-16841271697"></script>
     <script>

diff --git a/src/component/template/TemplateComponent.tsx b/src/component/template/TemplateComponent.tsx
@@ -156,7 +156,6 @@ function TemplateComponent(
                         return <RsvpTemplate
                             key={index}
                             templateColor={templateColor}
-                            rsvp={wedding.rsvp}
                             baseInfo={wedding.baseInfo}
                             weddingSchedule={wedding.weddingSchedule}
                             onClickCreateRsvp={() => setShowRsvpDialog(true)}

diff --git a/src/component/template/component/CongratulationsTemplate.tsx b/src/component/template/component/CongratulationsTemplate.tsx
@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, {useRef, useState} from 'react';
 import {Column, Row} from "@designsystem/component/flexLayout";
 import Text from "@designsystem/component/text";
 import colors from "@designsystem/foundation/colors";
@@ -8,6 +8,7 @@ import styled from "styled-components";
 import BaseInfo, {getBaseInfoByBrideMarkFirst} from "@remote/value/BaseInfo";
 import ContactingCongratulationDialog from "@src/component/template/dialog/ContactingCongratulationDialog";
 import Phone from "@remote/value/Phone";
+import useScrollOnUpdate from "@hook/useScrollOnUpdate";
 
 interface CongratulationsProps {
     baseInfo: BaseInfo;
@@ -23,10 +24,14 @@ function CongratulationsTemplate(
     }: CongratulationsProps
 ) {
     const [showContactingCongratulationDialog, setShowContactingCongratulationDialog] = useState(false);
+
+    const congratulationsRef = useRef<HTMLDivElement>(null);
+    useScrollOnUpdate(congratulationsRef, [phone]);
+
     const {first, second} = getBaseInfoByBrideMarkFirst(baseInfo);
 
     return (
-        <S.root background={templateColor}>
+        <S.root background={templateColor} ref={congratulationsRef}>
             <Column gap={96} $alignItems={'stretch'}>
                 <Column gap={40} $alignItems={'stretch'}>
                     <Column gap={8} $alignItems={'center'}>

diff --git a/src/component/template/component/GalleryTemplate.tsx b/src/component/template/component/GalleryTemplate.tsx
@@ -6,6 +6,7 @@ import styled, {css} from "styled-components";
 import {hideScrollBar} from "@util/css.util";
 import {Row} from "@designsystem/component/flexLayout";
 import Icon, {IconType} from "@designsystem/foundation/icon";
+import useScrollOnUpdate from "@hook/useScrollOnUpdate";
 
 export type GallerySlideStyle = 'style1' | 'style2';
 
@@ -57,10 +58,13 @@ function GallerySlide(
         slideStyle: GallerySlideStyle;
     }
 ) {
-    const scrollContainerRef = useRef<HTMLDivElement | null>(null);
-
     const [currentImageIndex, setCurrentImageIndex] = useState<number>(0); // 현재 보여지는 이미지의 인덱스를 추적
+
+    const galleryRef = useRef<HTMLDivElement>(null);
+    const scrollContainerRef = useRef<HTMLDivElement>(null);
 
+    useScrollOnUpdate(galleryRef, [imgList]);
+
     const getGridImgWidth = (): number => {
         let imageWidth = rootRef.current?.getBoundingClientRect().width ?? 0;
         if (slideStyle === 'style1') {
@@ -99,7 +103,7 @@ function GallerySlide(
     }, []);
 
     return (
-        <S.slideWrapper>
+        <S.slideWrapper ref={galleryRef}>
             <S.scroll ref={scrollContainerRef} $slideStyle={slideStyle}>
                 {imgList.map((img, index) => (
                     <S.slideImg

diff --git a/src/component/template/component/GuestCommentsTemplate.tsx b/src/component/template/component/GuestCommentsTemplate.tsx
@@ -1,4 +1,4 @@
-import React, {HTMLAttributes, useState} from 'react';
+import React, {HTMLAttributes, useRef, useState} from 'react';
 import styled, {CSSProperties} from "styled-components";
 import Comment from "@remote/value/Comment";
 import {Column, Row} from "@designsystem/component/flexLayout";
@@ -14,6 +14,7 @@ import GuestComment from "@remote/value/GuestComment";
 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";
+import useScrollOnUpdate from "@hook/useScrollOnUpdate";
 
 interface GuestCommentsTemplateProps {
     templateColor: string;
@@ -37,8 +38,11 @@ function GuestCommentsTemplate(
     const [showRemoveGuestCommentDialog, setShowRemoveGuestCommentDialog] = useState(false);
     const [showGuestCommentsDetailDialog, setShowGuestCommentsDetailDialog] = useState(false);
 
+    const guestCommentRef = useRef<HTMLDivElement>(null);
+    useScrollOnUpdate(guestCommentRef, [guestComment])
+
     return (
-        <S.root background={templateColor}>
+        <S.root background={templateColor} ref={guestCommentRef}>
             <Column gap={40} $alignItems={'stretch'}>
                 <Column gap={12} $alignItems={'center'}>
                     <Text

diff --git a/src/component/template/component/InvitationLetterTemplate.tsx b/src/component/template/component/InvitationLetterTemplate.tsx
@@ -1,10 +1,11 @@
-import React from 'react';
+import React, {useRef} from 'react';
 import {Column, Row} from "@designsystem/component/flexLayout";
 import HorizontalDivider from "@designsystem/component/horizontalDivider";
 import colors from "@designsystem/foundation/colors";
 import Text from "@designsystem/component/text";
 import Greeting from "@remote/value/Greeting";
 import BaseInfo, {getBaseInfoByBrideMarkFirst} from "@remote/value/BaseInfo";
+import useScrollOnUpdate from "@hook/useScrollOnUpdate";
 
 export type InvitationLetterStyle = 'style1' | 'style2' | 'style3';
 
@@ -22,9 +23,11 @@ function InvitationLetterTemplate(
     }: InvitationLetterTemplateProps
 ) {
     const {first, second} = getBaseInfoByBrideMarkFirst(baseInfo);
+    const invitationLetterRef = useRef<HTMLDivElement>(null);
+    useScrollOnUpdate(invitationLetterRef, [greeting]);
 
     return (
-        <Column gap={40} padding={'72px 60px'} background={colors.white} $alignItems={'center'}>
+        <Column gap={40} padding={'72px 60px'} background={colors.white} $alignItems={'center'} ref={invitationLetterRef}>
             {invitationLetterStyle === 'style1' ? (
                 <Text className={'override-font'} weight={300} size={12} font={'Aleo'} color={colors.g300}>
                     Wedding Invitation

diff --git a/src/component/template/component/LocationTemplate.tsx b/src/component/template/component/LocationTemplate.tsx
@@ -5,6 +5,7 @@ import Text from "@designsystem/component/text";
 import colors from "@designsystem/foundation/colors";
 import styled from "styled-components";
 import WeddingPlace from "@remote/value/WeddingPlace";
+import useScrollOnUpdate from "@hook/useScrollOnUpdate";
 
 const {kakao} = window as any;
 
@@ -20,6 +21,8 @@ function LocationTemplate(
     }: LocationProps
 ) {
     const kakaoMapRef = useRef<HTMLDivElement>(null);
+    const weddingPlaceRef = useRef<HTMLDivElement>(null);
+    useScrollOnUpdate(weddingPlaceRef, [weddingPlace]);
 
     useEffect(() => {
         if (!kakao || !kakao.maps) {
@@ -36,7 +39,7 @@ function LocationTemplate(
     }, []);
 
     return (
-        <S.root background={templateColor}>
+        <S.root background={templateColor} ref={weddingPlaceRef}>
             <Spacer h={92}/>
             <Column gap={40} $alignItems={'center'}>
                 <Text color={colors.g600} size={20} weight={300}>

diff --git a/src/component/template/component/MoneyInfoTemplate.tsx b/src/component/template/component/MoneyInfoTemplate.tsx
@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, {useRef, useState} from 'react';
 import styled from "styled-components";
 import MoneyInfo, {getMoneyInfoByBrideMarkFirst} from "@remote/value/MoneyInfo";
 import colors from "@designsystem/foundation/colors";
@@ -7,6 +7,7 @@ import Icon, {IconType} from "@designsystem/foundation/icon";
 import {Column, Row} from "@designsystem/component/flexLayout";
 import Text from "@designsystem/component/text";
 import BaseInfo, {getBaseInfoByBrideMarkFirst} from "@remote/value/BaseInfo";
+import useScrollOnUpdate from "@hook/useScrollOnUpdate";
 
 interface MoneyInfoTemplateProps {
     baseInfo: BaseInfo;
@@ -19,8 +20,11 @@ function MoneyInfoTemplate(
         moneyInfo
     }: MoneyInfoTemplateProps
 ) {
+    const moneyInfoRef = useRef<HTMLDivElement>(null);
+    useScrollOnUpdate(moneyInfoRef, [moneyInfo]);
+
     return (
-        <S.root>
+        <S.root ref={moneyInfoRef}>
             <Column gap={40} $alignItems={'center'}>
                 <Text size={20} weight={300} color={colors.g600}>마음 전하실 곳</Text>
                 <MoneyInfoComponent baseInfo={baseInfo} moneyInfo={moneyInfo}/>

diff --git a/src/component/template/component/RsvpTemplate.tsx b/src/component/template/component/RsvpTemplate.tsx
@@ -16,7 +16,6 @@ interface RsvpTemplateProps {
     templateColor: TemplateColor;
     baseInfo: BaseInfo;
     weddingSchedule: WeddingSchedule;
-    rsvp: Rsvp;
     onClickCreateRsvp: () => void;
 }
 
@@ -25,7 +24,6 @@ function RsvpTemplate(
         templateColor,
         baseInfo,
         weddingSchedule,
-        rsvp,
         onClickCreateRsvp
     }: RsvpTemplateProps
 ) {

diff --git a/src/component/template/component/VideoTemplate.tsx b/src/component/template/component/VideoTemplate.tsx
@@ -1,9 +1,10 @@
-import React, {useRef} from 'react';
+import React, {useEffect, useRef} from 'react';
 import Video from "@remote/value/Video";
 import {Column} from "@designsystem/component/flexLayout";
 import Text from "@designsystem/component/text";
 import colors from "@designsystem/foundation/colors";
 import styled from "styled-components";
+import useScrollOnUpdate from "@hook/useScrollOnUpdate";
 
 interface VideoTemplateProps {
     video: Video;
@@ -15,8 +16,12 @@ function VideoTemplate(
     }: VideoTemplateProps
 ) {
     const isYoutubeUrl = video.videoUrl.startsWith('https://www.youtube.com');
+    const videoRef = useRef<HTMLDivElement>(null);
+
+    useScrollOnUpdate(videoRef, [video]);
+
     return (
-        <S.container>
+        <S.container ref={videoRef}>
             <Column gap={12} $alignItems="center">
                 <Text size={20} weight={300} color={colors.g600}>VIDEO</Text>
                 <Text size={16} weight={300} color={colors.g600}>{video.videoTitle}</Text>

diff --git a/src/designsystem/component/text.tsx b/src/designsystem/component/text.tsx
@@ -1,4 +1,4 @@
-import React, {CSSProperties, HTMLAttributes} from 'react';
+import React, {CSSProperties, ForwardedRef, forwardRef, HTMLAttributes} from 'react';
 import styled, {css} from "styled-components";
 import {LinkMarryFont, TextType, textTypeMap} from "@designsystem/foundation/text/textType";
 import colors from "@designsystem/foundation/colors";
@@ -24,11 +24,13 @@ function Text(
         lineHeight,
         children,
         ...props
-    }: TextProps
+    }: TextProps,
+    ref: ForwardedRef<HTMLSpanElement>
 ) {
     const properties = type ? textTypeMap[type] : undefined;
     return (
         <TextStyle
+            ref={ref}
             properties={{
                 fontFamily: font ?? properties?.fontFamily,
                 fontWeight: weight ?? properties?.fontWeight,
@@ -51,4 +53,4 @@ const TextStyle = styled.span<{
     `}
 `
 
-export default Text;
+export default forwardRef(Text);
diff --git a/src/hook/useScrollOnUpdate.ts b/src/hook/useScrollOnUpdate.ts
@@ -0,0 +1,11 @@
+import {RefObject, useEffect} from "react";
+
+export default function useScrollOnUpdate<T extends HTMLElement>(
+    ref: RefObject<T | null>,
+    deps: any[]
+) {
+    useEffect(() => {
+        ref.current?.scrollIntoView({behavior: "smooth", block: "center"});
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, deps);
+}
diff --git a/src/page/invitation/design/option/WeddingPlaceOption.tsx b/src/page/invitation/design/option/WeddingPlaceOption.tsx
@@ -5,7 +5,6 @@ import HorizontalDivider from "@designsystem/component/horizontalDivider";
 import OptionLabel from "@page/invitation/design/component/OptionLabel";
 import Checkbox from "@designsystem/component/checkbox";
 import OptionTextField from "@page/invitation/design/component/OptionTextField";
-import Button from "@designsystem/component/button";
 import KakaoMapDialog from "@src/component/dialog/KakaoMapDialog";
 import WeddingPlace from "@remote/value/WeddingPlace";
 import Textarea from "@designsystem/component/textarea";