feat(img) : next img

Refs:[#13,#14]
chhw130 · Dec 11, 2023 · 4a1fe6e · 4a1fe6e
1 parent 8776909
commit 4a1fe6e
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 11 deletions.
diff --git a/component/form/UserInfoForm.tsx b/component/form/UserInfoForm.tsx
@@ -53,8 +53,6 @@ interface UserInfoFormPropsType {
 }
 
 const UserInfoForm = ({ setFunnel, setProgress }: UserInfoFormPropsType) => {
-  const params = useParams();
-
   const options = ["남성", "여성"];
 
   const { getRootProps, getRadioProps } = useRadioGroup({

diff --git a/next.config.js b/next.config.js
@@ -1,4 +1,8 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+  images: {
+    domains: ["images.pexels.com"],
+  },
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/src/app/ChakraLayout.tsx b/src/app/ChakraLayout.tsx
@@ -7,7 +7,6 @@ import dynamic from "next/dynamic";
 const ChakraProvider = dynamic(() =>
   import("@chakra-ui/provider").then((mod) => mod.ChakraProvider)
 );
-import localFont from "next/font/local";
 
 // const BMJUA = localFont({
 //   src: [

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -13,7 +13,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html lang="ko" style={{ height: "100%" }} suppressHydrationWarning>
       <body suppressHydrationWarning={true}>
         <QueryLayout>
           <ChakraLayout>{children}</ChakraLayout>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,11 +1,69 @@
+"use client";
+import { Box, ButtonGroup, Flex, Heading, Text } from "@chakra-ui/react";
 import MainButton from "../../component/button/MainButton";
+import { useRouter } from "next/navigation";
+import Image from "next/image";
 
 export default function Home() {
+  const router = useRouter();
   return (
-    <main>
-      <MainButton w={"350px"} h={"52px"}>
-        시작하기
-      </MainButton>
-    </main>
+    <Flex
+      as={"main"}
+      flexDir={"column"}
+      w={"90%"}
+      height={"100vh"}
+      margin={"0 auto"}
+      justifyContent={"center"}
+      alignItems={"center"}
+    >
+      <Image
+        src={"https://images.pexels.com/photos/842711/pexels-photo-842711.jpeg"}
+        alt="식선생"
+        width={100}
+        height={100}
+      />
+      <Box as="section" paddingBottom={"100px"}>
+        <Heading
+          as={"h1"}
+          color={"#000000"}
+          fontSize={"24px"}
+          fontWeight={"semibold"}
+          textAlign={"center"}
+          lineHeight={10}
+          padding={"15px"}
+        >
+          살빼려면
+          <br />
+          오늘 얼마만큼 운동해야하지?
+        </Heading>
+        <Text
+          as={"h2"}
+          color={"#787878"}
+          fontSize={"17px"}
+          textAlign={"center"}
+          lineHeight={7}
+        >
+          오늘 먹은 음식을 식선생에게 외쳐보세요! <br />
+          필요 운동량과 안찌는 식단을 한번에 알려드려요
+        </Text>
+      </Box>
+
+      <ButtonGroup
+        width={"90%"}
+        pos={"fixed"}
+        bottom={"30px"}
+        margin={"0 auto"}
+      >
+        <MainButton
+          w={"100%"}
+          h={"52px"}
+          onClick={() => {
+            router.push("/signup");
+          }}
+        >
+          다음으로
+        </MainButton>
+      </ButtonGroup>
+    </Flex>
   );
 }