FEAT :: 첫 화면 완성(반응형 x)

.babelrc

@@ -0,0 +1,13 @@
+{
+  "presets": ["next/babel"],
+  "plugins": [
+    [
+      "styled-components",
+      {
+        "ssr": true,
+        "displayName": true,
+        "preprocess": true
+      }
+    ]
+  ]
+}

components/Landing/LandingContents/index.tsx

@@ -0,0 +1,29 @@
+import RecipeButton from "@/components/etc/Button/RecipeButton";
+import React from "react";
+import * as S from "./style";
+
+function LandingContents() {
+  return (
+    <>
+      <S.LandingContents>
+        <S.MainWrapper>
+          <S.Title>Recipe GPT</S.Title>
+          <div>
+            <S.Description>가지고 있는 재료로</S.Description>
+            <S.Description>요리할 수 있는 레시피를</S.Description>
+            <S.Description>확인해보세요!</S.Description>
+          </div>
+          <RecipeButton>레시피 확인하기</RecipeButton>
+        </S.MainWrapper>
+        <S.Fryfan
+          src="./images/frypan.svg"
+          alt="프라이팬 사진"
+          width={650}
+          height={650}
+        />
+      </S.LandingContents>
+    </>
+  );
+}
+
+export default LandingContents;

components/Landing/LandingContents/style.ts

@@ -0,0 +1,43 @@
+import Image from "next/image";
+import styled from "styled-components";
+
+export const LandingContents = styled.div`
+  backdrop-filter: blur(20px);
+  position: absolute;
+  left: 50%;
+  width: calc(100% - 300px);
+  top: 100px;
+  transform: translateX(-50%);
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 50px 50px 0px 0px;
+  padding: 9.5rem 6.5rem;
+`;
+
+export const MainWrapper = styled.div`
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4rem;
+`;
+
+export const Title = styled.h1`
+  font-size: 4.5rem;
+  font-weight: bold;
+  color: white;
+  margin: 0;
+  letter-spacing: -0.9px;
+`;
+
+export const Description = styled.h3`
+  margin: 0;
+  letter-spacing: -0.9px;
+  font-weight: bold;
+  color: white;
+  font-size: 4rem;
+`
+
+export const Fryfan = styled(Image)`
+  position: absolute;
+  top: 0;
+  right: -10rem;
+`;

components/Landing/LandingMain/index.tsx

@@ -0,0 +1,19 @@
+import Image from "next/image";
+import React from "react";
+import * as S from "./style";
+
+function LandingMain() {
+  return (
+    <>
+      <S.MainBackground>
+        <S.MainBackgroundImage
+          alt="메인 화면 디자인 사진"
+          src="./images/MainBackground.svg"
+          fill
+        />
+      </S.MainBackground>
+    </>
+  );
+}
+
+export default LandingMain;

components/Landing/LandingMain/style.ts

@@ -0,0 +1,20 @@
+import styled from "styled-components";
+import Image from "next/image";
+
+export const MainBackground = styled.div`
+  width: 100%;
+  position: relative;
+`;
+
+export const MainBackgroundImage = styled(Image)`
+  height: auto !important;
+  position: relative !important;
+  filter: blur(10px);
+`;
+
+export const BackgroundBlur = styled.div`
+  width: 100%;
+  height: 100px;
+  position: absolute;
+  top: 0;
+`;

components/Landing/index.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import LandingContents from "./LandingContents";
+import LandingMain from "./LandingMain";
+
+function Landing() {
+  return (
+    <>
+      <LandingMain />
+      <LandingMain />
+      <LandingMain />
+      <LandingContents />
+    </>
+  );
+}
+
+export default Landing;

components/etc/Button/RecipeButton/index.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import * as S from "./style";
+import { HiChevronRight } from "react-icons/hi";
+
+function RecipeButton({ children }: { children: string }) {
+  return (
+    <S.RecipeButton>
+      {children}
+      <HiChevronRight size={40}/>
+    </S.RecipeButton>
+  );
+}
+
+export default RecipeButton;

components/etc/Button/RecipeButton/style.ts

@@ -0,0 +1,14 @@
+import styled from "styled-components";
+
+export const RecipeButton = styled.button`
+  background-color: #1c1b17;
+  padding: 1.5rem 1.5rem 1.5rem 2.5rem;
+  color: white;
+  display: inline-flex;
+  font-size: 2rem;
+  border-radius: 30px 30px 0 30px;
+  border: none;
+  justify-content: space-between;
+  align-items: center;
+  width: 23rem;
+`;

next.config.js

@@ -1,6 +1,9 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  reactStrictMode: true,
-}
+  reactStrictMode: false,
+  compiler: {
+    styledComponents: true,
+  },
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;

package.json

@@ -13,11 +13,13 @@
     "@types/react": "18.0.29",
     "@types/react-dom": "18.0.11",
     "@types/styled-components": "^5.1.26",
+    "babel-plugin-styled-components": "^2.0.7",
     "eslint": "8.36.0",
     "eslint-config-next": "13.2.4",
     "next": "13.2.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-icons": "^4.8.0",
     "styled-components": "^5.3.9",
     "styled-normalize": "^8.0.7",
     "typescript": "5.0.2"

pages/_app.tsx

@@ -1,5 +1,13 @@
 import type { AppProps } from "next/app";
+import { ThemeProvider } from "styled-components";
+import { theme } from "@/styles/theme";
+import GlobalStyle from "@/styles/globals";
 
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
+  return (
+    <ThemeProvider theme={theme}>
+      <Component {...pageProps} />
+      <GlobalStyle />
+    </ThemeProvider>
+  );
 }

pages/_document.tsx

@@ -2,7 +2,7 @@ import { Html, Head, Main, NextScript } from 'next/document'
 
 export default function Document() {
   return (
-    <Html lang="en">
+    <Html lang="ko">
       <Head />
       <body>
         <Main />

pages/index.tsx

@@ -1,3 +1,13 @@
+import Landing from "@/components/Landing";
+import Head from "next/head";
+
 export default function Home() {
-  return <></>;
+  return (
+    <>
+      <Head>
+        <title>Recipe GPT</title>
+      </Head>
+      <Landing />
+    </>
+  );
 }

styles/globals.tsx

@@ -6,7 +6,22 @@ const GlobalStyle = createGlobalStyle`
 
   * {
     box-sizing: border-box;
-    font-family: 'NanumSquare', sans-serif;
+    font-family: 'Pretendard-Regular';
+  }
+
+  @font-face {
+    font-family: 'Pretendard-Regular';
+    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff') format('woff');
+    font-weight: 400;
+    font-style: normal;
+  }
+
+  html{
+    font-size: 14px;
+  }
+
+  body{
+    margin: 0;
   }
 
   button{