배포 전

.env.example

@@ -0,0 +1,2 @@
+NOTION_TOKEN=""
+NOTION_DATABASE_ID=""

.gitignore

@@ -27,6 +27,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel

components/dark-mode-toggle-button.js

@@ -0,0 +1,28 @@
+import { useTheme } from 'next-themes'
+
+export default function DarkModeToggleButton() {
+
+  // theme : 현재 값 가져오기 getter
+  // setTheme : 현재 값 바꾸기 setter
+  // onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')} 만약에 현재 값이 다크모드면 라이트모드로 하고 아니면 다크모드로 하라
+  const { theme, setTheme } = useTheme()
+
+  return (
+    <>
+      <button className="inline-flex items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-50 hover:text-orange-500 dark:bg-slate-600 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-yellow-300 rounded text-base mt-4 md:mt-0" type="button" onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
+
+        {/* 라이트 모드 */}
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="visible dark:invisible dark:h-0 dark:w-0 h-5 w-5">
+          <path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z" />
+        </svg>
+
+        {/* 다크 모드 */}
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="invisible dark:visible dark:h-5 dark:w-5 h-0 w-0">
+          <path fillRule="evenodd" d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z" clipRule="evenodd" />
+        </svg>
+
+
+      </button>
+    </>
+  );
+}

components/footer.js

@@ -0,0 +1,46 @@
+import Link from 'next/link';
+
+export default function Footer() {
+  return (
+    <>
+      <footer className="body-font">
+        <div className="">
+          <div className="container px-5 py-6 mx-auto flex items-center sm:flex-row flex-col">
+            <Link href="/" legacyBehavior>
+              <a className="flex title-font font-medium items-center md:justify-start justify-center text-gray-900">
+                <span className="ml-3 text-xl">최인영 포트폴리오</span>
+              </a>
+            </Link>            
+            <p className="text-sm text-gray-500 sm:ml-6 sm:mt-0 mt-4">© 2020 Tailblocks —
+              <a href="https://twitter.com/knyttneve" rel="noopener noreferrer" className="text-gray-600 ml-1" target="_blank">@knyttneve</a>
+            </p>
+            <span className="inline-flex sm:ml-auto sm:mt-0 mt-4 justify-center sm:justify-start">
+              <a className="text-gray-500">
+                <svg fill="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" className="w-5 h-5" viewBox="0 0 24 24">
+                  <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
+                </svg>
+              </a>
+              <a className="ml-3 text-gray-500">
+                <svg fill="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" className="w-5 h-5" viewBox="0 0 24 24">
+                  <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
+                </svg>
+              </a>
+              <a className="ml-3 text-gray-500">
+                <svg fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" className="w-5 h-5" viewBox="0 0 24 24">
+                  <rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
+                  <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
+                </svg>
+              </a>
+              <a className="ml-3 text-gray-500">
+                <svg fill="currentColor" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="0" className="w-5 h-5" viewBox="0 0 24 24">
+                  <path stroke="none" d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"></path>
+                  <circle cx="4" cy="4" r="2" stroke="none"></circle>
+                </svg>
+              </a>
+            </span>
+          </div>
+        </div>
+      </footer>
+    </>
+  );
+}

components/header.js

@@ -0,0 +1,35 @@
+import Link from 'next/link';
+import DarkModeToggleButton from './dark-mode-toggle-button';
+
+export default function Header() {
+  return (
+    <>
+      <header className="text-gray-600 body-font">
+        <div className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
+          <Link href="/" legacyBehavior>
+            <a className="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" className="w-10 h-10 text-white p-2 bg-indigo-500 rounded-full" viewBox="0 0 24 24">
+                <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
+              </svg>
+              <span className="ml-3 text-xl">최인영 포트폴리오</span>
+            </a>
+          </Link>
+          <nav className="md:ml-auto flex flex-wrap items-center text-base justify-center">
+            <Link href="/" legacyBehavior>
+              <a className="mr-5 hover:text-gray-900">홈</a>
+            </Link>
+            <Link href="/projects" legacyBehavior>
+              <a className="mr-5 hover:text-gray-900">프로젝트</a>
+            </Link>
+            <Link href="/" legacyBehavior>
+              <a className="mr-5 hover:text-gray-900">연락하기</a>
+            </Link>
+            {/* <a className="mr-5 hover:text-gray-900">Fourth Link</a> */}
+          </nav>
+          {/* 다크모드 토글 버튼 작업해야함 */}
+          <DarkModeToggleButton/>
+        </div>
+      </header>
+    </>
+  );
+}

components/home/animation.js

@@ -0,0 +1,18 @@
+import React from 'react'
+
+import Lottie from 'react-lottie-player'
+// Alternatively:
+// import Lottie from 'react-lottie-player/dist/LottiePlayerLight'
+
+import lottieJson from '/public/animation.json'
+
+export default function Animation() {
+  return (
+    <Lottie
+      loop
+      animationData={lottieJson}
+      play
+      style={{ width: `100%`, height: `100%` }}
+    />
+  )
+}

components/home/hero.js

@@ -0,0 +1,30 @@
+import Animation from './animation';
+import Link from 'next/link';
+
+export default function Hero() {
+  return (
+
+    <>
+      <div className="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
+        <h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">
+          안녕하세요 최인영입니다!
+          <br className="hidden lg:inline-block"/>
+          오늘도 빡코딩?
+        </h1>
+        <p className="mb-8 leading-relaxed">
+          없으면 열락의 영락과 지혜는 끓는다. 수 대고, 하였으며, 있는가? 수 없으면 얼마나 아름다우냐? 어디 가슴에 보배를 거선의 관현악이며, 피에 미묘한 칼이다. 놀이 역사를 이상의 인간의 몸이 우는 사는가 갑 내려온 교향악이다. 못하다 붙잡아 튼튼하며, 무엇을 되는 철환하였는가? 예수는 그들의 위하여 풀이 트고, 칼이다. 같이, 있는 보이는 이것이다. 때에, 그것은 굳세게 남는 있는 아름답고 것이다. 열락의 곳이 대고, 얼음과 품고 때에, 우리는 있다.
+        </p>
+        <div className="flex justify-center">
+          <Link href="/projects" legacyBehavior>
+            <a className="btn-project">프로젝트 보러가기</a>
+          </Link>
+
+          {/* <button className="ml-4 inline-flex text-gray-700 bg-gray-100 border-0 py-2 px-6 focus:outline-none hover:bg-gray-200 rounded text-lg">Button</button> */}
+        </div>
+      </div>
+      <div className="lg:max-w-lg lg:w-full md:w-1/2 w-5/6">
+        <Animation/>
+      </div>
+    </>
+  );
+}

components/layout.js

@@ -0,0 +1,12 @@
+import Header from "./header";
+import Footer from "./footer";
+
+export default function Layout({children}) {
+  return (
+    <div className="bg-primary">
+      <Header/>
+      <div>{children}</div>
+      <Footer/>
+    </div>
+  );
+}

components/projects/project-item.js

@@ -0,0 +1,59 @@
+import Image from "next/legacy/image";
+
+export default function ProjectItem({data}){
+
+    const title = data.properties.Name.title[0].plain_text
+    const github = data.properties.Github.url
+    const description = data.properties.Description.rich_text[0].plain_text
+    const imgSrc = data.cover.file?.url || data.cover.external.url
+    const tags = data.properties.Tags.multi_select
+    const start = data.properties.WorkPeriod.date.start
+    const end = data.properties.WorkPeriod.date.end
+
+    const calculatedPeriod = (start, end) => {
+        const startDateStringArray = start.split('-');
+        const endDateStringArray = end.split('-');
+
+        let startDate = new Date(startDateStringArray[0], startDateStringArray[1], startDateStringArray[2]);
+        let endDate = new Date(endDateStringArray[0], endDateStringArray[1], endDateStringArray[2]);
+
+        console.log(`startDate: ${startDate}`)
+        console.log(`endDate: ${endDate}`)
+
+        const diffInMs = Math.abs(endDate - startDate);
+        const result = diffInMs / (1000 * 60 * 60 * 24);
+
+        console.log(`기간 : ${result}`)
+        return result;
+    };
+
+    return (
+      <div className="project-card">
+        <Image
+            className="rounded-t-xl"
+            src={imgSrc}
+            alt="cover image"
+            width="100%"
+            height="50%"
+            layout="responsive"
+            objectFit="cover"
+            quality={100}
+        />
+
+        <div className="p-4 flex flex-col">
+            <h1 className="text-2xl font-bold">{title}</h1>
+            <h3 className="mt-4 text-xl">{description}</h3>
+            <a href={github}>깃허브 바로가기</a>
+            <p className="my-1 ">
+                작업기간 : {start} ~ {end} ({calculatedPeriod(start, end)}일)
+            </p>
+            <div className="flex items-start mt-2">
+                {tags.map((aTag) => (
+                    <h1 className="px-2 py-1 mr-2 rounded-md bg-sky-200 dark:bg-sky-700 w-30" key={aTag.id}>{aTag.name}</h1>
+                ))}
+            </div>
+
+        </div>
+      </div>
+    );
+}

config/index.js

@@ -0,0 +1,2 @@
+export const DATABASE_ID = process.env.NOTION_DATABASE_ID
+export const TOKEN = process.env.NOTION_TOKEN

next.config.js

@@ -1,6 +1,13 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  images: {
+      domains: [
+          'www.notion.so',
+          'images.unsplash.com',
+          's3.us-west-2.amazonaws.com'
+      ]
+  }
 }
 
-module.exports = nextConfig
+module.exports = nextConfig