ProjectFRIDAY · Mango-Juice · Mar 8, 2023 · Mar 7, 2023 · Mar 7, 2023 · Mar 7, 2023
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,19 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "plugins": [
+    [
+      "@babel/plugin-transform-runtime",
+      {
+        "regenerator": true
+      }
+    ],
+    [
+      "babel-plugin-styled-components", 
+      {
+        "ssr": true,
+        "displayName": true,
+        "pure": true 
+      }
+    ]
+  ]
+}
diff --git a/.gitignore b/.gitignore
@@ -13,6 +13,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local
@@ -41,4 +42,7 @@ psd
 thumb
 sketch
 
+### next.js ###
+.next
+
 # End of https://www.toptal.com/developers/gitignore/api/react
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 # 프로젝트 이름 및 소개
-![fd web 로고](./src/assets/images/FD_Web.png)<br></br>
+![fd web 로고](./public/assets/images/FD_Web.png)<br></br>
 <b>FD Web</b> : FRIDAY의 대표 홈페이지 제작 (링크: https://www.fridayproject.co.kr/)<br><br>
 
 ## ⏰ 개발 기간

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,9 +11,13 @@
     "@testing-library/react": "^13.2.0",
     "@testing-library/user-event": "^13.5.0",
     "animate.css": "^4.1.1",
+    "axios": "^1.3.4",
+    "babel-plugin-styled-components": "^2.0.7",
     "eslint-config-prettier": "^8.5.0",
     "framer-motion": "^9.0.3",
     "install": "^0.13.0",
+    "next": "^13.2.3",
+    "next-images": "^1.8.4",
     "npm": "^8.13.2",
     "polished": "^4.2.2",
     "prop-types": "^15.8.1",
@@ -23,7 +27,7 @@
     "react-dom": "^18.1.0",
     "react-lottie": "^1.2.3",
     "react-material-ui-carousel": "^3.4.2",
-    "react-router-dom": "^6.3.0",
+    "react-notion": "^0.10.0",
     "react-scripts": "5.0.1",
     "react-slick": "^0.29.0",
     "recoil": "^0.7.4",
@@ -33,10 +37,10 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "dev": "next",
+    "start": "next start",
+    "build": "next build",
+    "export": "next export"
   },
   "eslintConfig": {
     "extends": [
@@ -56,5 +60,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@babel/plugin-transform-runtime": "^7.21.0"
   }
 }
diff --git a/pages/_app.js b/pages/_app.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import GlobalStyle from '../src/styles/GlobalStyle';
+import { RecoilRoot } from 'recoil';
+import { ThemeProvider } from 'styled-components';
+import { AnimatePresence } from 'framer-motion';
+
+const theme = {
+  primaryColor: '#01baae',
+  secondaryColor: '#000',
+  TitleFont: 'TimesNewRomanPSMT',
+};
+
+export default function MyApp({ Component, pageProps }) {
+  return (
+    <React.StrictMode>
+      <div className="App">
+        <RecoilRoot>
+          <ThemeProvider theme={theme}>
+            <GlobalStyle />
+            <AnimatePresence mode="wait">
+              <Component {...pageProps} />
+            </AnimatePresence>
+          </ThemeProvider>
+        </RecoilRoot>
+      </div>
+    </React.StrictMode>
+  );
+}
diff --git a/pages/_document.js b/pages/_document.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import Document, { Html, Head, Main, NextScript } from 'next/document';
+import { ServerStyleSheet } from 'styled-components';
+
+class MyDocument extends Document {
+  static async getInitialProps(ctx) {
+    const sheet = new ServerStyleSheet();
+    const originalRenderPage = ctx.renderPage;
+    try {
+      ctx.renderPage = () =>
+        originalRenderPage({
+          enhanceApp: App => props => sheet.collectStyles(<App {...props} />),
+        });
+
+      const initialProps = await Document.getInitialProps(ctx);
+      return {
+        ...initialProps,
+        styles: (
+          <>
+            {initialProps.styles}
+            {sheet.getStyleElement()}
+          </>
+        ),
+      };
+    } finally {
+      sheet.seal();
+    }
+  }
+
+  render() {
+    return (
+      <Html>
+        <Head />
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+
+export default MyDocument;
diff --git a/pages/blog.js b/pages/blog.js
@@ -0,0 +1,77 @@
+import React from 'react';
+import { useSetRecoilState } from 'recoil';
+import { menuAtom } from '../src/recoil/atom';
+import AnimatedPage from '../src/components/template/AnimatedPage';
+import { getBlogItems } from '../src/data/source/NotionApi';
+import BlogList from '../src/components/blog/BlogList';
+import styled from 'styled-components';
+import ScrollToTopButton from '../src/components/ScrollToTopButton';
+import { useRouter } from 'next/router';
+
+const TitleContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100px;
+  margin: 10vw 0;
+`;
+
+const StyledH1 = styled.div`
+  font-size: 10vw;
+  text-align: center;
+  line-height: 1;
+`;
+
+const BackgroundText = styled.div`
+  opacity: 0.4;
+  filter: blur(10px);
+  font-family: SegoeUISymbol;
+  font-size: 10vw;
+  text-align: center;
+  color: #f1efef;
+  @media only screen and (max-width: 800px) {
+    filter: blur(4px);
+  }
+`;
+
+const Text = styled.div`
+  background-color: rgba(0, 122, 114, 0.86);
+  padding: 1.3rem 1rem;
+  font-size: 40px;
+  margin-bottom: 3rem;
+  text-align: center;
+`;
+
+const Blog = () => {
+  const router = useRouter();
+  const setMenu = useSetRecoilState(menuAtom);
+  const [blogItems, setBlogItems] = React.useState([]);
+
+  React.useEffect(() => {
+    getBlogItems()
+      .then(data => {
+        setBlogItems(data);
+      })
+      .catch(err => {
+        alert('포스트를 불러오는데 실패했습니다.');
+        router.push('/');
+      });
+  }, []);
+
+  return (
+    <AnimatedPage>
+      {setMenu(1)}
+      <TitleContainer>
+        <StyledH1 className="title">Friday</StyledH1>
+        <BackgroundText>VALUABLE</BackgroundText>
+      </TitleContainer>
+      <Text className="title">Friday Blog</Text>
+      <BlogList blogItems={blogItems} />
+      <ScrollToTopButton />
+    </AnimatedPage>
+  );
+};
+
+export default Blog;
diff --git a/src/pages/Contact.js → pages/contact.js b/src/pages/Contact.js → pages/contact.js
@@ -1,11 +1,12 @@
 import React from 'react';
 import styled, { css } from 'styled-components';
-import { menuAtom } from '../recoil/atom';
+import { menuAtom } from '../src/recoil/atom';
 import { useSetRecoilState } from 'recoil';
-import mailIcon from '../assets/images/icons/gmail.png';
-import kakaoIcon from '../assets/images/icons/kakao.png';
-import instagramIcon from '../assets/images/icons/instagram.png';
-import AnimatedPage from '../components/template/AnimatedPage';
+import AnimatedPage from '../src/components/template/AnimatedPage';
+
+const mailIcon = "/assets/images/icons/gmail.png";
+const kakaoIcon = "/assets/images/icons/kakao.png";
+const instagramIcon = "/assets/images/icons/instagram.png";
 
 const GradientBackground = styled.div`
   width: 100%;

diff --git a/src/pages/Main.js → pages/index.js b/src/pages/Main.js → pages/index.js
@@ -1,15 +1,15 @@
 import React from 'react';
 import { useSetRecoilState } from 'recoil';
 import Lottie from 'react-lottie';
-import FridayAnimation from '../lottie/friday.json';
-import ProjectIntro from '../components/main/ProjectIntro';
-import PhilosophyText from '../components/main/PhilosophyText';
+import ProjectIntro from '../src/components/main/ProjectIntro';
+import PhilosophyText from '../src/components/main/PhilosophyText';
 import styled from 'styled-components';
-import MainTop from '../components/main/MainTop';
-import Review from '../components/main/Review';
-import JoinFriday from '../components/JoinFriday';
-import { menuAtom } from '../recoil/atom';
-import AnimatedPage from '../components/template/AnimatedPage';
+import MainTop from '../src/components/main/MainTop';
+import Review from '../src/components/main/Review';
+import JoinFriday from '../src/components/JoinFriday';
+import { menuAtom } from '../src/recoil/atom';
+import AnimatedPage from '../src/components/template/AnimatedPage';
+import FridayAnimation from '../public/assets/lottie/friday.json';
 
 const GradientContainer = styled.div`
   padding: 5vh 0;

diff --git a/pages/post.js b/pages/post.js
@@ -0,0 +1,55 @@
+import React, { useEffect, useState } from 'react';
+import { useSetRecoilState } from 'recoil';
+import { useRouter } from 'next/router';
+import { getNotionPost } from '../src/data/source/NotionApi';
+import AnimatedPage from '../src/components/template/AnimatedPage';
+import ScrollToTopButton from '../src/components/ScrollToTopButton';
+import { menuAtom } from '../src/recoil/atom';
+import { NotionRenderer } from 'react-notion';
+import styled from 'styled-components';
+
+import 'react-notion/src/styles.css';
+import 'prismjs/themes/prism-tomorrow.css';
+
+const Container = styled.div`
+  width: 100%;
+  background-color: #fffcfa;
+  min-height: 100vh;
+  padding: 3rem 0;
+`;
+
+const Post = () => {
+  const setMenu = useSetRecoilState(menuAtom);
+
+  const router = useRouter();
+  const { id } = router.query;
+
+  const [notionData, setNotionData] = useState({});
+
+  useEffect(() => {
+    if (id) {
+      getNotionPost(id)
+        .then(data => {
+          setNotionData(data);
+        })
+        .catch(err => {
+          alert('포스트를 불러오는데 실패했습니다.');
+          router.push('/blog');
+        });
+    }
+  }, [id]);
+
+  return (
+    <AnimatedPage blackHeader={true}>
+      <Container>
+        {setMenu(1)}
+        {Object.keys(notionData).length && <NotionRenderer blockMap={notionData} fullPage={true} />}
+        <ScrollToTopButton />
+      </Container>
+      <style>{'body { background-color: #fffcfa; }'}</style>
+      <style>{'.notion-page-header { display: none; }'}</style>
+    </AnimatedPage>
+  );
+};
+
+export default Post;
diff --git a/src/pages/Project.js → pages/project.js b/src/pages/Project.js → pages/project.js
@@ -1,14 +1,14 @@
 import React from 'react';
 import { useRecoilState, useSetRecoilState } from 'recoil';
-import { menuAtom } from '../recoil/atom';
-import { prjState, visibleState } from '../recoil/atom';
+import { menuAtom } from '../src/recoil/atom';
+import { prjState, visibleState } from '../src/recoil/atom';
 import styled from 'styled-components';
-import Icons from '../components/Icons';
-import card from '../components/project/Card';
-import Modal from '../components/project/Modal';
-import Projects from '../components/project/Projects';
-import JoinFriday from '../components/JoinFriday';
-import AnimatedPage from '../components/template/AnimatedPage';
+import Icons from '../src/components/Icons';
+import card from '../src/components/project/Card';
+import Modal from '../src/components/project/Modal';
+import Projects from '../src/components/project/Projects';
+import JoinFriday from '../src/components/JoinFriday';
+import AnimatedPage from '../src/components/template/AnimatedPage';
 
 const TitleContainer = styled.div`
   display: flex;

diff --git a/pages/recruit.js b/pages/recruit.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import TitleBackgroundCard from '../src/components/recruit/TitleBackgroundCard';
+import ProcessCard from '../src/components/recruit/ProcessCard';
+import RecruitAreaCard from '../src/components/recruit/RecruitAreaCard';
+import FAQCard from '../src/components/recruit/FAQCard';
+import { menuAtom } from '../src/recoil/atom';
+import { useSetRecoilState } from 'recoil';
+import AnimatedPage from '../src/components/template/AnimatedPage';
+
+function Recruit() {
+  const setMenu = useSetRecoilState(menuAtom);
+  return (
+    <AnimatedPage>
+      {setMenu(1)}
+      <TitleBackgroundCard />
+      <ProcessCard />
+      <RecruitAreaCard />
+      <FAQCard />
+    </AnimatedPage>
+  );
+}
+
+export default Recruit;
diff --git a/src/assets/fonts/SegoeUI.TTF → public/assets/fonts/SegoeUI.TTF b/src/assets/fonts/SegoeUI.TTF → public/assets/fonts/SegoeUI.TTF
diff --git a/src/assets/fonts/SegoeUI.eot → public/assets/fonts/SegoeUI.eot b/src/assets/fonts/SegoeUI.eot → public/assets/fonts/SegoeUI.eot
diff --git a/src/assets/fonts/SegoeUI.woff → public/assets/fonts/SegoeUI.woff b/src/assets/fonts/SegoeUI.woff → public/assets/fonts/SegoeUI.woff
diff --git a/src/assets/fonts/SegoeUI.woff2 → public/assets/fonts/SegoeUI.woff2 b/src/assets/fonts/SegoeUI.woff2 → public/assets/fonts/SegoeUI.woff2
diff --git a/src/assets/fonts/TimesNewRomanMTStd.eot → public/assets/fonts/TimesNewRomanMTStd.eot b/src/assets/fonts/TimesNewRomanMTStd.eot → public/assets/fonts/TimesNewRomanMTStd.eot
diff --git a/src/assets/fonts/TimesNewRomanMTStd.ttf → public/assets/fonts/TimesNewRomanMTStd.ttf b/src/assets/fonts/TimesNewRomanMTStd.ttf → public/assets/fonts/TimesNewRomanMTStd.ttf
diff --git a/src/assets/fonts/TimesNewRomanMTStd.woff → public/assets/fonts/TimesNewRomanMTStd.woff b/src/assets/fonts/TimesNewRomanMTStd.woff → public/assets/fonts/TimesNewRomanMTStd.woff
diff --git a/src/assets/fonts/TimesNewRomanMTStd.woff2 → public/assets/fonts/TimesNewRomanMTStd.woff2 b/src/assets/fonts/TimesNewRomanMTStd.woff2 → public/assets/fonts/TimesNewRomanMTStd.woff2
diff --git a/src/assets/fonts/TimesNewRomanPSMT.ttf → public/assets/fonts/TimesNewRomanPSMT.ttf b/src/assets/fonts/TimesNewRomanPSMT.ttf → public/assets/fonts/TimesNewRomanPSMT.ttf
diff --git a/public/assets/fonts/TossFaceFontMac.ttf b/public/assets/fonts/TossFaceFontMac.ttf
diff --git a/src/assets/images/FD_Web.png → public/assets/images/FD_Web.png b/src/assets/images/FD_Web.png → public/assets/images/FD_Web.png
diff --git a/src/assets/images/Friday.jpg → public/assets/images/Friday.jpg b/src/assets/images/Friday.jpg → public/assets/images/Friday.jpg
diff --git a/src/assets/images/Friday2.jpg → public/assets/images/Friday2.jpg b/src/assets/images/Friday2.jpg → public/assets/images/Friday2.jpg
diff --git a/src/assets/images/aos.png → public/assets/images/aos.png b/src/assets/images/aos.png → public/assets/images/aos.png
diff --git a/src/assets/images/comento.png → public/assets/images/comento.png b/src/assets/images/comento.png → public/assets/images/comento.png
diff --git a/src/assets/images/deliverN.png → public/assets/images/deliverN.png b/src/assets/images/deliverN.png → public/assets/images/deliverN.png
diff --git a/src/assets/images/icons/gmail.png → public/assets/images/icons/gmail.png b/src/assets/images/icons/gmail.png → public/assets/images/icons/gmail.png
diff --git a/src/assets/images/icons/instagram.png → public/assets/images/icons/instagram.png b/src/assets/images/icons/instagram.png → public/assets/images/icons/instagram.png
diff --git a/src/assets/images/icons/kakao.png → public/assets/images/icons/kakao.png b/src/assets/images/icons/kakao.png → public/assets/images/icons/kakao.png
diff --git a/src/assets/images/ios.png → public/assets/images/ios.png b/src/assets/images/ios.png → public/assets/images/ios.png
diff --git a/src/assets/images/job/android.png → public/assets/images/job/android.png b/src/assets/images/job/android.png → public/assets/images/job/android.png
diff --git a/src/assets/images/job/be.jpg → public/assets/images/job/be.jpg b/src/assets/images/job/be.jpg → public/assets/images/job/be.jpg
diff --git a/src/assets/images/job/design.jpg → public/assets/images/job/design.jpg b/src/assets/images/job/design.jpg → public/assets/images/job/design.jpg
diff --git a/src/assets/images/job/fe.jpg → public/assets/images/job/fe.jpg b/src/assets/images/job/fe.jpg → public/assets/images/job/fe.jpg
diff --git a/src/assets/images/job/ios.jpg → public/assets/images/job/ios.jpg b/src/assets/images/job/ios.jpg → public/assets/images/job/ios.jpg
diff --git a/src/assets/images/job/mobile.jpeg → public/assets/images/job/mobile.jpeg b/src/assets/images/job/mobile.jpeg → public/assets/images/job/mobile.jpeg
diff --git a/src/assets/images/job/pm.jpg → public/assets/images/job/pm.jpg b/src/assets/images/job/pm.jpg → public/assets/images/job/pm.jpg
diff --git a/src/assets/images/momTimer.png → public/assets/images/momTimer.png b/src/assets/images/momTimer.png → public/assets/images/momTimer.png
diff --git a/src/assets/images/nalo.png → public/assets/images/nalo.png b/src/assets/images/nalo.png → public/assets/images/nalo.png
diff --git a/src/assets/images/ootd.png → public/assets/images/ootd.png b/src/assets/images/ootd.png → public/assets/images/ootd.png
diff --git a/src/assets/images/planDial.png → public/assets/images/planDial.png b/src/assets/images/planDial.png → public/assets/images/planDial.png
diff --git a/src/assets/images/promise.png → public/assets/images/promise.png b/src/assets/images/promise.png → public/assets/images/promise.png
diff --git a/src/assets/images/recruitBackground.png → public/assets/images/recruitBackground.png b/src/assets/images/recruitBackground.png → public/assets/images/recruitBackground.png
diff --git a/src/assets/images/remoa.png → public/assets/images/remoa.png b/src/assets/images/remoa.png → public/assets/images/remoa.png
diff --git a/src/assets/images/review/jinyoung.jpg → public/assets/images/review/jinyoung.jpg b/src/assets/images/review/jinyoung.jpg → public/assets/images/review/jinyoung.jpg
diff --git a/src/assets/images/review/mina.jpg → public/assets/images/review/mina.jpg b/src/assets/images/review/mina.jpg → public/assets/images/review/mina.jpg
diff --git a/src/assets/images/review/seonghwan.jpg → public/assets/images/review/seonghwan.jpg b/src/assets/images/review/seonghwan.jpg → public/assets/images/review/seonghwan.jpg
diff --git a/src/assets/images/review/wonhee.jpg → public/assets/images/review/wonhee.jpg b/src/assets/images/review/wonhee.jpg → public/assets/images/review/wonhee.jpg
diff --git a/src/assets/images/texti.png → public/assets/images/texti.png b/src/assets/images/texti.png → public/assets/images/texti.png
diff --git a/src/assets/images/tunnel.jpg → public/assets/images/tunnel.jpg b/src/assets/images/tunnel.jpg → public/assets/images/tunnel.jpg
diff --git a/src/lottie/friday.json → public/assets/lottie/friday.json b/src/lottie/friday.json → public/assets/lottie/friday.json
diff --git a/src/lottie/scroll.json → public/assets/lottie/scroll.json b/src/lottie/scroll.json → public/assets/lottie/scroll.json
diff --git a/src/assets/videos/tunnel.mp4 → public/assets/videos/tunnel.mp4 b/src/assets/videos/tunnel.mp4 → public/assets/videos/tunnel.mp4