Merge pull request #14 from Kusitms-28th-Kobaco-B/feat/#6

[feat] 메인페이지

package.json

@@ -22,6 +22,7 @@
     "next": "14.1.0",
     "react": "^18",
     "react-dom": "^18",
+    "react-youtube": "^10.1.0",
     "styled-components": "^6.1.8"
   },
   "devDependencies": {

src/app/main/page.tsx

@@ -1,33 +1,11 @@
-import ContentBlock from "@/components/main/ContentBlock";
-import CopyBlock from "@/components/main/CopyBlock";
-import Intro from "@/components/main/Intro";
-import StoryBlock from "@/components/main/StoryBlock";
-import { mainPageData } from "@/lib/data";
+import MainPage from "@/components/main/MainPage";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Kobaco AISAC",
   description: "Kobaco Ai analysis System for Ad Creation",
 };
 
-const MainPage = async () => {
-  return (
-    <>
-      <Intro />
-      <ContentBlock
-        title={mainPageData[0].title}
-        description={mainPageData[0].description}
-        card={mainPageData[0].card}
-      />
-      <ContentBlock
-        title={mainPageData[1].title}
-        description={mainPageData[1].description}
-        card={mainPageData[1].card}
-      />
-      <CopyBlock />
-      <StoryBlock />
-    </>
-  );
-};
+const Main = async () => <MainPage />;
 
-export default MainPage;
+export default Main;

src/app/page.tsx

@@ -1,4 +1,5 @@
 import Image from "next/image";
+import Link from "next/link";
 import styles from "./page.module.css";
 
 export default function Home() {
@@ -90,6 +91,7 @@ export default function Home() {
           </p>
         </a>
       </div>
+      <Link href="/main">main page link</Link>
     </main>
   );
 }

src/components/common/ButtonStyle.tsx

@@ -0,0 +1,23 @@
+import { colors } from "@/styles/theme";
+import { motion } from "framer-motion";
+import styled from "styled-components";
+
+export const Button = styled(motion.button)<{
+  bgColor: string;
+  textColor: string;
+}>`
+  display: inline-flex;
+  padding: 0.75rem 2.5rem;
+  justify-content: center;
+  align-items: center;
+  gap: 0.625rem;
+  border-radius: 2.1875rem;
+  border: 1px solid ${colors.main};
+  background: ${(props) => props.bgColor};
+  color: ${(props) => props.textColor};
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  cursor: pointer;
+`;

src/components/common/ModalStyle.tsx

@@ -0,0 +1,31 @@
+import styled from "styled-components";
+
+// 모달 창 뒷배경
+export const SearchModalBox = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.4);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 100;
+`;
+
+// 모달 스타일
+export const SearchModalContent = styled.div<{
+  width: string;
+  height: string;
+}>`
+  padding: 1.62rem;
+  width: ${(props) => props.width};
+  height: ${(props) => props.height};
+  flex-shrink: 0;
+  border-radius: 0.875rem;
+  background: #1e1e1e;
+  display: flex;
+  flex-direction: column;
+  z-index: 100;
+`;

src/components/main/ContentBlock.tsx

@@ -18,6 +18,8 @@ interface Card {
 }
 
 export default function ContentBlock(props: ContentBlockProps) {
+  const { title, description, card } = props;
+
   const Variants = {
     default: {
       scale: 1,
@@ -30,28 +32,27 @@ export default function ContentBlock(props: ContentBlockProps) {
       },
     },
   };
+
   return (
-    <>
-      <Layout>
-        <Title>{props.title}</Title>
-        <Description>{props.description}</Description>
-        <CardBlock>
-          {props.card.map((v, i) => (
-            <CardWrapper
-              initial="default"
-              whileHover="scaleUp"
-              variants={Variants}
-            >
-              <ImageWrapper>
-                <Image src={v.img} alt={`card-image.${i}`} fill />
-              </ImageWrapper>
-              <CardTitle>{v.title}</CardTitle>
-              <CardDescription>{v.description}</CardDescription>
-            </CardWrapper>
-          ))}
-        </CardBlock>
-      </Layout>
-    </>
+    <Layout>
+      <Title>{title}</Title>
+      <Description>{description}</Description>
+      <CardBlock>
+        {card.map((v, i) => (
+          <CardWrapper
+            initial="default"
+            whileHover="scaleUp"
+            variants={Variants}
+          >
+            <ImageWrapper>
+              <Image src={v.img} alt={`card-image.${i}`} fill />
+            </ImageWrapper>
+            <CardTitle>{v.title}</CardTitle>
+            <CardDescription>{v.description}</CardDescription>
+          </CardWrapper>
+        ))}
+      </CardBlock>
+    </Layout>
   );
 }
 const Layout = styled.div`
@@ -105,6 +106,7 @@ const CardWrapper = styled(motion.div)`
     ),
     #262525;
   backdrop-filter: blur(2px);
+  cursor: pointer;
 `;
 const ImageWrapper = styled.div`
   position: relative;

src/components/main/CopyBlock.tsx

@@ -5,6 +5,7 @@ import { motion } from "framer-motion";
 import Image from "next/image";
 import { useState } from "react";
 import styled from "styled-components";
+import { Button } from "../common/ButtonStyle";
 
 export default function CopyBlock() {
   const [active, setActive] = useState(1);
@@ -35,6 +36,19 @@ export default function CopyBlock() {
     },
   ];
 
+  const Variants = {
+    default: {
+      scale: 1,
+    },
+    scaleUp: {
+      scale: 1.1,
+      transition: {
+        duration: 0.2,
+        delay: 0,
+      },
+    },
+  };
+
   return (
     <>
       <Layout>
@@ -45,10 +59,22 @@ export default function CopyBlock() {
           }
         </Description>
         <ButtonWrapper>
-          <Button bgColor={colors.main} textColor={colors.white}>
+          <Button
+            bgColor={colors.main}
+            textColor={colors.white}
+            initial="default"
+            whileHover="scaleUp"
+            variants={Variants}
+          >
             새 카피 만들기
           </Button>
-          <Button bgColor={colors.mainLight6} textColor={colors.main}>
+          <Button
+            bgColor={colors.mainLight6}
+            textColor={colors.main}
+            initial="default"
+            whileHover="scaleUp"
+            variants={Variants}
+          >
             카피 갤러리
           </Button>
         </ButtonWrapper>
@@ -144,20 +170,6 @@ const ButtonWrapper = styled.div`
   gap: 1rem;
   margin-top: 2rem;
 `;
-const Button = styled.button<{ bgColor: string; textColor: string }>`
-  padding: 0.75rem 2.5rem;
-  justify-content: center;
-  align-items: center;
-  gap: 0.625rem;
-  border-radius: 2.1875rem;
-  border: 1px solid ${colors.main};
-  background: ${(props) => props.bgColor};
-  color: ${(props) => props.textColor};
-  font-size: 0.875rem;
-  font-style: normal;
-  font-weight: 500;
-  line-height: normal;
-`;
 const CardBlock = styled.div`
   display: inline-flex;
   gap: 5rem;