feat: not-support-box in chat, notification

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;

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';

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>
     </>
   );

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>
     </>
   );