From 21e78bb8a3c3362b0df3bead9b19d2efc2f0ec47 Mon Sep 17 00:00:00 2001
From: Lee <43488305+poiu694@users.noreply.github.com>
Date: Mon, 19 Feb 2024 14:54:50 +0900
Subject: [PATCH 1/2] feat: not-support-box

---
 src/web/src/components/NotSupportBox.tsx | 38 ++++++++++++++++++++++++
 src/web/src/components/index.ts          |  1 +
 2 files changed, 39 insertions(+)
 create mode 100644 src/web/src/components/NotSupportBox.tsx

diff --git a/src/web/src/components/NotSupportBox.tsx b/src/web/src/components/NotSupportBox.tsx
new file mode 100644
index 00000000..8de55bcc
--- /dev/null
+++ b/src/web/src/components/NotSupportBox.tsx
@@ -0,0 +1,38 @@
+import { memo } from 'react';
+
+import { cn } from '@/utils';
+import { Typography } from './common';
+
+interface NotSupportBoxProps {
+  className?: string;
+  description?: string;
+}
+
+function NotSupportBox({ className, description }: NotSupportBoxProps) {
+  return (
+    <div
+      className={cn(
+        'flex flex-col gap-[40px] h-full justify-center items-center px-4',
+        className,
+      )}
+    >
+      <div className="flex items-center justify-center w-[200px] h-[200px] rounded-full bg-yellow-100">
+        <Typography size="headline-1" className="text-[100px]">
+          😅
+        </Typography>
+      </div>
+      <div className="w-full flex flex-col justify-center items-center gap-3">
+        <Typography size="headline-7" color="grey-600">
+          아직 지원하지 않는 기능입니다.
+        </Typography>
+        <Typography size="body-1" color="grey-600">
+          {description}
+        </Typography>
+      </div>
+    </div>
+  );
+}
+
+const MemoizedNotSupportBox = memo(NotSupportBox);
+
+export default MemoizedNotSupportBox;
diff --git a/src/web/src/components/index.ts b/src/web/src/components/index.ts
index 9a5e4f89..16f36282 100644
--- a/src/web/src/components/index.ts
+++ b/src/web/src/components/index.ts
@@ -10,6 +10,7 @@ export { default as FloatingButton } from './FloatingButton';
 export { default as Header } from './Header';
 export { default as MainPostBox } from './MainPostBox';
 export { default as MenuModal } from './MenuModal';
+export { default as NotSupportBox } from './NotSupportBox';
 export { default as QuotePostBox } from './QuotePostBox';
 export { default as NotSupportText } from './NotSupportText';
 export { default as StepTitle } from './StepTitle';

From 071e626a2a04411448c405ba3264dbe614c1c54f Mon Sep 17 00:00:00 2001
From: Lee <43488305+poiu694@users.noreply.github.com>
Date: Mon, 19 Feb 2024 14:55:10 +0900
Subject: [PATCH 2/2] feat: apply not support box in chat, notification

---
 src/web/src/pages/ChatPage.tsx         | 6 +++---
 src/web/src/pages/NotificationPage.tsx | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/web/src/pages/ChatPage.tsx b/src/web/src/pages/ChatPage.tsx
index aeb21225..b4f426b8 100644
--- a/src/web/src/pages/ChatPage.tsx
+++ b/src/web/src/pages/ChatPage.tsx
@@ -1,7 +1,7 @@
 import { toast } from 'react-toastify';
 import { Helmet, HelmetProvider } from 'react-helmet-async';
 
-import { ContentLayout, Header } from '@/components';
+import { ContentLayout, Header, NotSupportBox } from '@/components';
 
 function ChatPage() {
   const handleNotSupport = () => {
@@ -32,8 +32,8 @@ function ChatPage() {
           onClick: handleNotSupport,
         }}
       />
-      <ContentLayout>
-        <h1 className="text-headline-1">CHAT</h1>
+      <ContentLayout className="h-full mt-0 mb-0">
+        <NotSupportBox description="채팅 기능은 아직 준비중이에요!" />
       </ContentLayout>
     </>
   );
diff --git a/src/web/src/pages/NotificationPage.tsx b/src/web/src/pages/NotificationPage.tsx
index 9482675d..0aa93bc1 100644
--- a/src/web/src/pages/NotificationPage.tsx
+++ b/src/web/src/pages/NotificationPage.tsx
@@ -1,7 +1,7 @@
 import { toast } from 'react-toastify';
 import { Helmet, HelmetProvider } from 'react-helmet-async';
 
-import { ContentLayout, Header } from '@/components';
+import { ContentLayout, Header, NotSupportBox } from '@/components';
 
 function NotificationPage() {
   const handleNotSupport = () => {
@@ -32,8 +32,8 @@ function NotificationPage() {
           onClick: handleNotSupport,
         }}
       />
-      <ContentLayout>
-        <h1 className="text-headline-1">NOTIFICATION</h1>
+      <ContentLayout className="h-full mt-0 mb-0">
+        <NotSupportBox description="알림 기능은 아직 준비중이에요!" />
       </ContentLayout>
     </>
   );