chore: #420 이메일 복사 기능 추가

apps/web/src/layout/GlobalLayout.tsx

@@ -9,6 +9,7 @@ import { Modal } from "@/component/common/Modal";
 import { Typography } from "@/component/common/typography";
 import { PreventExternalBrowser } from "@/helper/preventExternalBrowser.tsx";
 import { useBottomSheet } from "@/hooks/useBottomSheet";
+import { useToast } from "@/hooks/useToast";
 import ChannelService from "@/lib/channel-talk/service";
 import { useBridge } from "@/lib/provider/bridge-provider";
 
@@ -20,6 +21,7 @@ export default function GlobalLayout() {
   const { safeAreaHeight } = useBridge();
   const location = useLocation();
   const { openBottomSheet, closeBottomSheet } = useBottomSheet();
+  const { toast } = useToast();
 
   useEffect(() => {
     Hotjar.init(siteId, hotjarVersion);
@@ -58,15 +60,16 @@ export default function GlobalLayout() {
         onConfirm={closeBottomSheet}
         title="인프라 이전 안내"
         content={
-          <Typography
-            as="p"
-            variant={"body16Medium"}
-            color={"gray600"}
-            css={css`
-              white-space: pre-wrap;
-            `}
-          >
-            {`안녕하세요, 레이어 서비스입니다.
+          <>
+            <Typography
+              as="p"
+              variant={"body16Medium"}
+              color={"gray600"}
+              css={css`
+                white-space: pre-wrap;
+              `}
+            >
+              {`안녕하세요, 레이어 서비스입니다.
 항상 저희 서비스를 이용해 주셔서 감사드립니다.
 
 서비스 품질 향상을 위한 인프라 이전을 진행하고자 하오니 잠시 양해를 부탁드립니다.
@@ -82,13 +85,42 @@ export default function GlobalLayout() {
 
     레이어 서비스
 
-해당 기간동안 궁금하신 점은 [email protected] 로 문의를 주시면 빠르게 확인 후 순차적으로 답변 드리겠습니다.
+해당 기간동안 궁금하신 점은`}
+            </Typography>
+            <Typography
+              variant={"body16Medium"}
+              color={"blue500"}
+              css={css`
+                text-decoration: underline;
+                cursor: pointer;
+              `}
+              onClick={async () => {
+                try {
+                  await navigator.clipboard.writeText("[email protected]");
+                  toast.success("이메일이 클립보드에 복사되었습니다");
+                } catch (e) {
+                  toast.success("다시 시도해주세요");
+                }
+              }}
+            >
+              [email protected]
+            </Typography>
+            <Typography
+              as="p"
+              variant={"body16Medium"}
+              color={"gray600"}
+              css={css`
+                white-space: pre-wrap;
+              `}
+            >
+              {`로 문의를 주시면 빠르게 확인 후 순차적으로 답변 드리겠습니다.
 
 이용에 불편을 드려 죄송합니다.
 보다 안정적인 서비스를 제공하기 위해 노력하는 레이어가 되겠습니다.
 
 감사합니다.`}
-          </Typography>
+            </Typography>
+          </>
         }
       />
       <Modal />

apps/web/src/style/global.css

@@ -63,6 +63,10 @@ textarea {
   resize: none;
 }
 
+p {
+  margin: 0;
+}
+
 ::-webkit-scrollbar {
   border: none;
   width: 1rem;