최종 PR

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": []
+}

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/babel", "next/core-web-vitals"]
+}

.gitignore

@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.env

README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

app/(route)/detail/page.tsx

@@ -0,0 +1,106 @@
+"use client";
+import Image from "next/image";
+import styled from "styled-components";
+import BookImage from "../../_assets/images/dummy_book.png";
+import { useSearchParams } from "next/navigation";
+
+export default function Detail() {
+  const searchParams = useSearchParams();
+
+  const title = searchParams.get("title");
+  const contents = searchParams.get("contents");
+  const datetime = searchParams.get("datetime");
+  const isbn = searchParams.get("isbn");
+  const authors = searchParams.get("authors");
+  const publisher = searchParams.get("publisher");
+  const translators = searchParams.get("translators");
+  const price = searchParams.get("price");
+  const sale_price = searchParams.get("sale_price");
+  const url = searchParams.get("url") as string;
+  const thumbnail = searchParams.get("thumbnail") as string;
+
+  return (
+    <>
+      <BackGround></BackGround>
+      <Wrapper>
+        <Inner>
+          <Thumbnail>
+            {thumbnail && <Image src={thumbnail} alt="썸네일" width="300" height="400" />}
+          </Thumbnail>
+          <DetailWrapper>
+            <Title>{title}</Title>
+            <BookDetail>
+              <p>소개 : {contents}</p>
+              <p>도서번호 : {isbn}</p>
+              <p>출판일 : {datetime}</p>
+              <p>작가 : {authors}</p>
+              <p>번역가 : {translators}</p>
+              <p>출판사 : {publisher}</p>
+              <p>정가 : {price} 원</p>
+              <p>판매가 : {sale_price} 원</p>
+              <a href={url}>상세 페이지 바로가기</a>
+            </BookDetail>
+          </DetailWrapper>
+        </Inner>
+      </Wrapper>
+    </>
+  );
+}
+const BackGround = styled.div`
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+
+  width: 100vw;
+  height: 100vh;
+
+  background-color: black;
+  opacity: 30%;
+`;
+
+const Wrapper = styled.div`
+  position: relative;
+  z-index: 2;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  height: 100%;
+`;
+
+const Thumbnail = styled.div`
+  box-shadow: 7.918px 7.918px 19.796px 0px rgba(0, 0, 0, 0.25);
+  height: 400px;
+`;
+
+const Inner = styled.div`
+  display: flex;
+  gap: 60px;
+`;
+
+const DetailWrapper = styled.div`
+  & p {
+    font-size: 20px;
+    color: #ffffff;
+  }
+`;
+
+const Title = styled.h2`
+  margin-bottom: 20px;
+
+  color: #fbff48;
+  font-family: "Pretendard";
+  font-size: 32px;
+  font-weight: 600;
+`;
+
+const BookDetail = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  & p {
+    line-height: 24px;
+  }
+`;

app/(route)/main/page.tsx

@@ -0,0 +1,72 @@
+"use client";
+import Image from "next/image";
+import styles from "./page.module.css";
+import styled from "styled-components";
+import Link from "next/link";
+
+export default function OnBoarding() {
+  return (
+    <Wrapper>
+      <Line />
+      <Title>PICK-A-BOOK</Title>
+      <Intro>
+        That&apos;s the thing about books.
+        <br /> They let you travel without <br />
+        moving your feet.
+      </Intro>
+      <Link href="/search" passHref>
+        <StartButton>시작하기</StartButton>
+      </Link>
+    </Wrapper>
+  );
+}
+
+const Title = styled.h2`
+  font-family: "Bebas";
+  font-size: 270px;
+  text-align: center;
+`;
+
+const Line = styled.hr`
+  width: 100%;
+  height: 20px;
+
+  background-color: #fbff48;
+  border: none;
+`;
+const Intro = styled.p`
+  text-align: end;
+  line-height: 30px;
+`;
+const Wrapper = styled.div`
+  position: relative;
+
+  padding-top: 100px;
+
+  height: 100vh;
+
+  color: #fbff48;
+  font-size: 24px;
+  font-family: "Pretendard";
+  font-weight: 500;
+`;
+
+const StartButton = styled.button`
+  position: absolute;
+  bottom: 100px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+  height: 80px;
+
+  border: 5px solid #fbff48;
+  background: none;
+
+  color: #fbff48;
+  font-family: "Pretendard";
+  font-weight: 600;
+  font-size: 28px;
+`;