chore: 스타일 수정 및 error 페이지 emptytemplate으로 연결

J1P5 · Dec 9, 2024 · 3f1bbd8 · 3f1bbd8
1 parent a753291
commit 3f1bbd8
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 5 deletions.
diff --git a/src/components/organisms/ChatMessages/styled.ts b/src/components/organisms/ChatMessages/styled.ts
@@ -59,7 +59,7 @@ export const ChatMessagesWrapper: ReturnType<typeof styled.div> = styled.div`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
-  margin-bottom: 80px; // WriteBoxWrapper 만큼 빼야됨!!
+  margin-bottom: 5rem; // WriteBoxWrapper 만큼 빼야됨!!
 
   flex-grow: 1; /* 부모 컨테이너의 나머지 공간을 차지 */
   overflow-y: auto; /* 내부 스크롤 활성화 */

diff --git a/src/components/templates/ChatRoomTemplate/TopSheet.tsx b/src/components/templates/ChatRoomTemplate/TopSheet.tsx
@@ -82,7 +82,7 @@ interface TopSheetProps {
   post: IPost;
 }
 export const TopSheet = ({ post }: TopSheetProps) => {
-  const [isOpen, setIsOpen] = useState(true);
+  const [isOpen, setIsOpen] = useState(false);
   const toggleSheet = () => {
     setIsOpen((prev) => !prev);
   };

diff --git a/src/components/templates/EmptyTemplate/index.tsx b/src/components/templates/EmptyTemplate/index.tsx
@@ -14,7 +14,8 @@ export interface IEmptyTemplateProps {
     | "completed"
     | "blockedUser"
     | "marketPrice"
-    | "chatRoom";
+    | "chatRoom"
+    | "error";
 }
 
 export const EmptyTemplate = ({ type = "default" }: IEmptyTemplateProps) => {
@@ -32,6 +33,7 @@ export const EmptyTemplate = ({ type = "default" }: IEmptyTemplateProps) => {
     marketPrice:
       "아직 개발중인 기능이예요. ㅠㅠ\n 정식 출시때는 포함이 될거예요!",
     chatRoom: "채팅 내역을 불러오는데 실패했어요",
+    error: "잘못된 접근이예요..!\n다시 메인화면으로 갈까요?",
   };
   const urls = {
     chat: "/",
@@ -44,6 +46,7 @@ export const EmptyTemplate = ({ type = "default" }: IEmptyTemplateProps) => {
     blockedUser: "/",
     marketPrice: "/",
     chatRoom: "/chat",
+    error: "/",
   };
   const buttnTexts = {
     chat: "메인으로 돌아가기",
@@ -56,6 +59,7 @@ export const EmptyTemplate = ({ type = "default" }: IEmptyTemplateProps) => {
     blockedUser: "/",
     marketPrice: "메인으로 돌아가기",
     chatRoom: "채팅방 목록으로 돌아가기",
+    error: "메인으로 돌아가기",
   };
   const msg = messages[type] || messages.default; // 기본 메시지 설정
   const redirectUrl = urls[type] || urls.default; // 기본 URL 설정

diff --git a/src/router.tsx b/src/router.tsx
@@ -23,13 +23,13 @@ import {
   TransactionPage,
 } from "pages";
 import { AuthGuard, LoginGuard, RequiredGuard } from "pages/guards";
-import { RootLayout } from "components/templates";
+import { EmptyTemplate, RootLayout } from "components/templates";
 
 export const routes: RouteObject[] = [
   {
     path: "/",
     element: <RootLayout />,
-    errorElement: <>404</>,
+    errorElement: <EmptyTemplate type={"error"} />,
     children: [
       // 권한 요청
       { path: "permission-request", element: <PermissionRequestPage /> },