design(nofound) : notfound페이지

potenday-project · Dec 16, 2023 · daf9f54 · daf9f54
1 parent 73e7fe2
commit daf9f54
Show file tree

Hide file tree

Showing 4 changed files with 117 additions and 8 deletions.
diff --git a/component/card/ChattingRoom.tsx b/component/card/ChattingRoom.tsx
@@ -36,8 +36,8 @@ const ChattingRoom = ({
     <>
       <Flex
         w={"100%"}
-        bgColor={"#F4F4F4"}
         h={"100%"}
+        bgColor={"#F4F4F4"}
         borderRadius={"12px 12px 0 0"}
         flexDir={"column"}
       >
@@ -68,11 +68,10 @@ const ChattingRoom = ({
         <VStack
           w={"100%"}
           alignItems={"flex-start"}
-          h={"520px"}
+          h={"62vh"}
           spacing={"16px"}
-          marginTop={"10px"}
-          marginBottom={"30px"}
-          paddingBottom={"50px"}
+          marginTop={"1vh"}
+          paddingBottom={"15%"}
           overflow={"hidden"}
           overflowY={"scroll"}
           css={{

diff --git a/component/icon/NotFoundIcon.tsx b/component/icon/NotFoundIcon.tsx
diff --git a/component/icon/SaladIcon.tsx b/component/icon/SaladIcon.tsx
@@ -74,8 +74,8 @@ const SaladIcon = () => {
           <path
             d="M14.9844 16.7344C15.7809 17.0865 17.4808 17.649 19.6599 17.649C21.8401 17.649 22.4375 15.8558 25.6021 15.9953C28.1334 16.1078 30.1021 17.3903 30.4531 17.9303"
             stroke="url(#paint12_radial_388_5001)"
-            stroke-width="0.666667"
-            stroke-linecap="round"
+            strokeWidth="0.666667"
+            strokeLinecap="round"
           />
         </g>
         <g filter="url(#filter5_f_388_5001)">

diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
@@ -1,7 +1,67 @@
+"use client";
+import { Button, ButtonGroup, Text, VStack } from "@chakra-ui/react";
 import React from "react";
+import NotFoundIcon from "../../component/icon/NotFoundIcon";
+import { useRouter } from "next/navigation";
 
 const NotFound = () => {
-  return <div>NotfoundPAge</div>;
+  const router = useRouter();
+  return (
+    <>
+      <VStack
+        as={"main"}
+        flexDir={"column"}
+        w={"100%"}
+        pos={"relative"}
+        maxW={"390px"}
+        height={"100vh"}
+        padding={"60px 22px"}
+        margin={"0 auto"}
+        justifyContent={"center"}
+        alignItems={"center"}
+        bgColor={"#2B2C2C"}
+      >
+        <VStack spacing={"20px"}>
+          <NotFoundIcon />
+          <Text
+            color={"#A6A6A6"}
+            textAlign={"center"}
+            fontSize={"24px"}
+            fontWeight={"semibold"}
+          >
+            찾을 수 없는 페이지에요
+            <br />
+            다시 들어와볼까요?
+          </Text>
+        </VStack>
+        <ButtonGroup
+          pos={"absolute"}
+          bottom={"10vh"}
+          padding={"0 22px"}
+          gap={"5px"}
+        >
+          <Button
+            w={"166px"}
+            h={"52px"}
+            bgColor={"#474747"}
+            color={"white"}
+            onClick={() => router.push("/")}
+          >
+            메인으로
+          </Button>
+          <Button
+            w={"166px"}
+            h={"52px"}
+            bgColor={"#40E98E"}
+            color={"#2B2C2C"}
+            onClick={() => router.back()}
+          >
+            뒤로가기
+          </Button>
+        </ButtonGroup>
+      </VStack>
+    </>
+  );
 };
 
 export default NotFound;