Merge to Main

apps/web/src/app.tsx

@@ -20,7 +20,6 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
           <Suspense fallback={<LoadingModal purpose={"데이터를 가져오고 있어요"} />}>
             {/* <ReactQueryDevtools initialIsOpen={false} /> */}
             {/* <DevTools /> */}
-
             <Routers />
             <Toast />
           </Suspense>

apps/web/src/app/login/SetNicknamePage.tsx

@@ -33,7 +33,7 @@ export function SetNickNamePage() {
       <Spacing size={0.3} />
       <Typography variant="T4">닉네임을 설정해주세요!</Typography>
       <Spacing size={4} />
-      <Input value={nickName} onChange={handleInputChange} placeholder="Text" count={true} maxLength={maxLength} />
+      <Input value={nickName} onChange={handleInputChange} placeholder="닉네임을 입력해주세요" count={true} maxLength={maxLength} />
       <Spacing size={3.6} />
       <TipCard message={"실명으로 활동하는 걸 추천해요!"} />
 

apps/web/src/component/BottomSheet/BottomSheet.tsx

@@ -64,7 +64,7 @@ export function BottomSheet({ id, title, contents, handler = false, quitButton =
             border-top-right-radius: 1.6rem;
             box-shadow: 0 4rem 4rem rgba(0, 0, 0, 0.25);
             transition: transform 200ms ease-out;
-            z-index: 10001;
+            z-index: 100000000;
             padding: 2rem;
             box-sizing: border-box;
             background-color: #fff;

apps/web/src/component/announcement/Announcement.tsx

@@ -0,0 +1,69 @@
+import { css } from "@emotion/react";
+import Cookies from "js-cookie";
+
+import { BottomSheet } from "@/component/BottomSheet";
+import { ButtonProvider } from "@/component/common/button";
+import { Icon } from "@/component/common/Icon";
+import { Typography } from "@/component/common/typography";
+
+type AnnouncementProps = { title: string; content: React.ReactNode; onConfirm: () => void; sheetId: string };
+
+export function Announcement({ title, content, onConfirm, sheetId }: AnnouncementProps) {
+  const SHOW_ANNOUNCEMENT_KEY = "announcement-checked";
+
+  const hideAnnouncement = Cookies.get(SHOW_ANNOUNCEMENT_KEY);
+
+  if (hideAnnouncement) return;
+
+  return (
+    <BottomSheet
+      sheetHeight={620}
+      id={sheetId}
+      contents={
+        <div
+          css={css`
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 2rem;
+            overflow: hidden;
+            height: 100%;
+          `}
+        >
+          <div
+            css={css`
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+              gap: 1.6rem;
+            `}
+          >
+            <Icon icon={"ic_letter"} size={4.8} />
+            <Typography variant={"title18Bold"} color={"gray900"}>
+              {title}
+            </Typography>
+          </div>
+          <div
+            css={css`
+              overflow-y: auto;
+              ::-webkit-scrollbar {
+                display: block;
+              }
+            `}
+          >
+            {content}
+          </div>
+
+          <ButtonProvider.Primary
+            onClick={() => {
+              Cookies.set(SHOW_ANNOUNCEMENT_KEY, new Date().toISOString(), { expires: 1 });
+              onConfirm();
+            }}
+          >
+            확인
+          </ButtonProvider.Primary>
+        </div>
+      }
+    />
+  );
+}

apps/web/src/component/common/input/TextArea.tsx

@@ -46,6 +46,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(function
           id={id || textareaContext?.id}
           css={css`
             flex-grow: 1;
+            overflow: auto;
             ::placeholder {
               color: ${DESIGN_TOKEN_COLOR["gray500"]};
               ${DESIGN_TOKEN_TEXT["body15Medium"]}

apps/web/src/helper/preventExternalBrowser.tsx

@@ -0,0 +1,18 @@
+import { Fragment, PropsWithChildren } from "react";
+
+export function PreventExternalBrowser({ children }: PropsWithChildren) {
+  const agent = navigator.userAgent;
+  const URL = document.URL;
+  const isKakao = agent.includes("KAKAO");
+  const isInstagram = agent.includes("Instagram");
+
+  if (isKakao) {
+    window.open(`kakaotalk://web/openExternal?url=${encodeURIComponent(URL)}`);
+  } else if (isInstagram) {
+    /**
+     * NOTE: 현재는 해당 인스타그램 인앱 탈출 코드가 작동하지 않는 것 같음
+     * 추후 카카오톡처럼 인스타그램 인앱 방지 분석 후 코드 추가 예정
+     */
+  }
+  return <Fragment> {children} </Fragment>;
+}

apps/web/src/layout/GlobalLayout.tsx

@@ -1,21 +1,40 @@
 import { css } from "@emotion/react";
 import Hotjar from "@hotjar/browser";
+// import { PATHS } from "@layer/shared";
 import { useEffect } from "react";
 import { Outlet } from "react-router-dom";
+// import { useLocation } from "react-router-dom";
 
+import { Announcement } from "@/component/announcement/Announcement";
 import { Modal } from "@/component/common/Modal";
+import { Typography } from "@/component/common/typography";
+import { PreventExternalBrowser } from "@/helper/preventExternalBrowser.tsx";
+import { useBottomSheet } from "@/hooks/useBottomSheet";
+// import ChannelService from "@/lib/channel-talk/service";
 import { useBridge } from "@/lib/provider/bridge-provider";
 
 const siteId = import.meta.env.VITE_HOTJAR_KEY as number;
 const hotjarVersion = import.meta.env.VITE_HOTJAR_VERSION as number;
+const SHEET_ID = "announcement";
 
 export default function GlobalLayout() {
   const { safeAreaHeight } = useBridge();
+  const { openBottomSheet, closeBottomSheet } = useBottomSheet();
 
   useEffect(() => {
     Hotjar.init(siteId, hotjarVersion);
+    openBottomSheet({ id: SHEET_ID });
   }, []);
 
+  /* NOTE - 인프라 이전 기간동안 채널톡 모든 페이지 노출 */
+  // useEffect(() => {
+  //   if (location.pathname.startsWith(PATHS.myInfo())) {
+  //     ChannelService.showChannelButton();
+  //   } else {
+  //     ChannelService.hideChannelButton();
+  //   }
+  // }, [location]);
+
   return (
     <div
       css={css`
@@ -35,8 +54,69 @@ export default function GlobalLayout() {
         ${safeAreaHeight && { height: `calc(100dvh-${safeAreaHeight * 2}px)` }}
       `}
     >
+      <Announcement
+        sheetId={SHEET_ID}
+        onConfirm={closeBottomSheet}
+        title="인프라 이전 안내"
+        content={
+          <>
+            <Typography
+              variant={"body16Medium"}
+              color={"gray600"}
+              css={css`
+                white-space: pre-wrap;
+              `}
+            >
+              {`안녕하세요, 레이어 서비스입니다.
+항상 저희 서비스를 이용해 주셔서 감사드립니다.
+
+서비스 품질 향상을 위한 인프라 이전을 진행하고자 하오니 잠시 양해를 부탁드립니다.
+작업 진행 시간 동안 서비스가 접속이 되지 않거나 느려지는 현상이 있을 수 있으니 이용에 참고하시기 바랍니다.
+
+1. 점검 시간
+
+    `}
+            </Typography>
+            <Typography variant={"subtitle16SemiBold"}>2024년 11월 10일(일) 13:00 ~ 22:00</Typography>
+            <Typography
+              variant={"body16Medium"}
+              color={"gray600"}
+              css={css`
+                white-space: pre-wrap;
+              `}
+            >
+              {`
+    ※ 모든 시간은 한국시간 기준입니다.
+    ※ 작업 진행상황에 따라 일정은 변경될 수 있습니다.
+
+2. 대상 서비스
+
+    레이어 서비스
+
+해당 기간동안 궁금하신 점은 `}
+            </Typography>
+            <Typography variant={"subtitle16SemiBold"}>페이지 하단의 문의하기</Typography>
+            <Typography
+              variant={"body16Medium"}
+              color={"gray600"}
+              css={css`
+                white-space: pre-wrap;
+              `}
+            >
+              {`를 통해 채팅 남겨주시면 빠르게 확인 후 순차적으로 답변 드리겠습니다.
+
+이용에 불편을 드려 죄송합니다.
+보다 안정적인 서비스를 제공하기 위해 노력하는 레이어가 되겠습니다.
+
+감사합니다.`}
+            </Typography>
+          </>
+        }
+      />
       <Modal />
-      <Outlet />
+      <PreventExternalBrowser>
+        <Outlet />
+      </PreventExternalBrowser>
     </div>
   );
 }