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

[feat] 메인페이지 완료
Kusitms-28th-Kobaco-B · Mar 5, 2024 · b9a33f0 · b9a33f0
2 parents e1a0216 + b17929d
commit b9a33f0
Show file tree

Hide file tree

Showing 30 changed files with 601 additions and 416 deletions.
diff --git a/package.json b/package.json
@@ -23,7 +23,10 @@
     "react": "^18",
     "react-dom": "^18",
     "react-youtube": "^10.1.0",
-    "styled-components": "^6.1.8"
+    "recoil": "^0.7.7",
+    "recoil-persist": "^5.1.0",
+    "styled-components": "^6.1.8",
+    "swiper": "^11.0.7"
   },
   "devDependencies": {
     "@types/node": "^20",

diff --git a/public/kobacoIcon.png b/public/kobacoIcon.png
diff --git a/public/main/AdSearch.png b/public/main/AdSearch.png
diff --git a/public/main/CharacterAnalysis.png b/public/main/CharacterAnalysis.png
diff --git a/public/main/Comparative.png b/public/main/Comparative.png
diff --git a/public/main/DataAnalysis.png b/public/main/DataAnalysis.png
diff --git a/public/main/ItemAnalysis.png b/public/main/ItemAnalysis.png
diff --git a/public/main/RefBoard.png b/public/main/RefBoard.png
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -100,3 +100,16 @@ a {
     color-scheme: dark;
   }
 } */
+
+.swiper {
+  width: 100%;
+  padding-top: 50px;
+  padding-bottom: 50px;
+}
+
+.swiper-slide {
+  background-position: center;
+  background-size: cover;
+  width: 300px;
+  height: 300px;
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -3,15 +3,16 @@ import "./globals.css";
 import { Noto_Sans_KR } from "@next/font/google";
 import Footer from "@/components/footer/Footer";
 import Navbar from "@/components/navbar/Navbar";
+import RecoilContextProvider from "@/context/recoilContext";
 
 const notoSansKR = Noto_Sans_KR({
   weight: ["400", "500", "700"],
   subsets: [],
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Kobaco AISAC",
+  description: "Kobaco Ai analysis System for Ad Creation",
 };
 
 export default function RootLayout({
@@ -21,10 +22,13 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
+      <meta property="og:image" content={"public/kobacoIcon.png"} />
       <body className={notoSansKR.className}>
-        <Navbar />
-        {children}
-        <Footer />
+        <RecoilContextProvider>
+          <Navbar />
+          {children}
+          <Footer />
+        </RecoilContextProvider>
       </body>
     </html>
   );

diff --git a/src/app/main/page.tsx b/src/app/main/page.tsx
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,97 +1,12 @@
-import Image from "next/image";
-import Link from "next/link";
-import styles from "./page.module.css";
+import NOSSR from "@/components/common/NOSSR";
+import MainPage from "@/components/main/MainPage";
 
-export default function Home() {
+const Main = async () => {
   return (
-    <main className={styles.main}>
-      <div className={styles.description}>
-        <p>
-          Get started by editing&nbsp;
-          <code className={styles.code}>src/app/page.tsx</code>
-        </p>
-        <div>
-          <a
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            By{" "}
-            <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              className={styles.vercelLogo}
-              width={100}
-              height={24}
-              priority
-            />
-          </a>
-        </div>
-      </div>
-
-      <div className={styles.center}>
-        <Image
-          className={styles.logo}
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
-      </div>
-
-      <div className={styles.grid}>
-        <a
-          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Docs <span>-&gt;</span>
-          </h2>
-          <p>Find in-depth information about Next.js features and API.</p>
-        </a>
-
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Learn <span>-&gt;</span>
-          </h2>
-          <p>Learn about Next.js in an interactive course with&nbsp;quizzes!</p>
-        </a>
-
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Templates <span>-&gt;</span>
-          </h2>
-          <p>Explore starter templates for Next.js.</p>
-        </a>
-
-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Deploy <span>-&gt;</span>
-          </h2>
-          <p>
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
-      </div>
-      <Link href="/main">main page link</Link>
-    </main>
+    <NOSSR>
+      <MainPage />
+    </NOSSR>
   );
-}
+};
+
+export default Main;
diff --git a/src/components/common/ButtonStyle.tsx b/src/components/common/ButtonStyle.tsx
@@ -3,8 +3,8 @@ import { motion } from "framer-motion";
 import styled from "styled-components";
 
 export const Button = styled(motion.button)<{
-  bgColor: string;
-  textColor: string;
+  background: string;
+  text: string;
 }>`
   display: inline-flex;
   padding: 0.75rem 2.5rem;
@@ -13,8 +13,8 @@ export const Button = styled(motion.button)<{
   gap: 0.625rem;
   border-radius: 2.1875rem;
   border: 1px solid ${colors.main};
-  background: ${(props) => props.bgColor};
-  color: ${(props) => props.textColor};
+  background: ${(props) => props.background};
+  color: ${(props) => props.text};
   font-size: 0.875rem;
   font-style: normal;
   font-weight: 500;

diff --git a/src/components/common/NOSSR.tsx b/src/components/common/NOSSR.tsx
@@ -0,0 +1,9 @@
+import dynamic from "next/dynamic";
+import React from "react";
+
+const NOSSR: React.FC<React.PropsWithChildren> = (props) => (
+  <React.Fragment>{props.children}</React.Fragment>
+);
+export default dynamic(() => Promise.resolve(NOSSR), {
+  ssr: false,
+});
diff --git a/src/components/main/StoryModal.tsx → src/components/common/VideoModal.tsx b/src/components/main/StoryModal.tsx → src/components/common/VideoModal.tsx
@@ -1,15 +1,17 @@
-import { useState } from "react";
-import { SearchModalBox, SearchModalContent } from "../common/ModalStyle";
+import { SearchModalBox, SearchModalContent } from "./ModalStyle";
 import styled from "styled-components";
 import Image from "next/image";
-import { Button } from "../common/ButtonStyle";
 import { colors } from "@/styles/theme";
-import { videoKey } from "@/constants/videoKey";
 import YouTube from "react-youtube";
 
-const StoryModal = (props) => {
+interface VideoProps {
+  title: string;
+  clickModal: any;
+  videoKey: string;
+}
+const VideoModal = (props: VideoProps) => {
   // 전달받은 state 함수
-  const { clickModal } = props;
+  const { title, clickModal, videoKey } = props;
 
   return (
     // 뒷배경을 클릭하면 모달을 나갈 수 있게 해야하므로 뒷 배경 onClick에 state함수를 넣는다.
@@ -23,7 +25,7 @@ const StoryModal = (props) => {
           <CloseButton onClick={clickModal}>
             <Image src="/main/Cross.svg" alt="close" width={30} height={30} />
           </CloseButton>
-          <Title>스토리보드 제작 이용 가이드</Title>
+          <Title>{title}</Title>
           <YouTube
             videoId={videoKey}
             opts={{
@@ -46,7 +48,7 @@ const StoryModal = (props) => {
   );
 };
 
-export default StoryModal;
+export default VideoModal;
 
 const ModalContent = styled.div`
   position: relative;

diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx
@@ -2,26 +2,29 @@
 
 import { footerFirstData, footerSecondData } from "@/lib/footer/FooterData";
 import { styled } from "styled-components";
+import NOSSR from "../common/NOSSR";
 
 export default function Footer() {
   return (
-    <Layout>
-      <FooterBox>
-        {footerFirstData.map((data: string, index: number) => {
-          return <FooterText key={index}>{data}</FooterText>;
-        })}
-      </FooterBox>
-      <FooterBox>
-        {footerSecondData.map((data: string, index: number) => {
-          return <FooterText key={index}>{data}</FooterText>;
-        })}
-      </FooterBox>
-      <FooterText>
-        <span>
-          Copyright(C) Korea Broadcast Advertising Corp. All Righrts Reserved
-        </span>
-      </FooterText>
-    </Layout>
+    <NOSSR>
+      <Layout>
+        <FooterBox>
+          {footerFirstData.map((data: string, index: number) => {
+            return <FooterText key={index}>{data}</FooterText>;
+          })}
+        </FooterBox>
+        <FooterBox>
+          {footerSecondData.map((data: string, index: number) => {
+            return <FooterText key={index}>{data}</FooterText>;
+          })}
+        </FooterBox>
+        <FooterText>
+          <span>
+            Copyright(C) Korea Broadcast Advertising Corp. All Righrts Reserved
+          </span>
+        </FooterText>
+      </Layout>
+    </NOSSR>
   );
 }