[김희진] sprint 10 & 11

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

app/(auth)/_components/AuthFooter.tsx

@@ -0,0 +1,34 @@
+import Image from "next/image";
+import Link from "next/link";
+import google from "@/public/icons/google.svg";
+import kakao from "@/public/icons/kakao.svg";
+
+interface FooterProps {
+  title: string;
+  href: string;
+  hrefMessage: string;
+}
+
+export default function AuthFooter({ title, href, hrefMessage }: FooterProps) {
+  return (
+    <>
+      <div className="flex w-full items-center justify-between rounded-lg bg-[#e6f2ff] px-[23px] py-4">
+        <p className="text-gray800 text-Regular16">간편 로그인하기</p>
+        <div className="flex gap-4">
+          <Link href="https://www.google.com">
+            <Image src={google} width={42} height={42} alt="google" />
+          </Link>
+          <Link href="https://www.kakaocorp.com/page">
+            <Image src={kakao} width={42} height={42} alt="kakao" />
+          </Link>
+        </div>
+      </div>
+      <div className="text-Regular14 text-gray800 flex items-center justify-center">
+        {title}
+        <Link className="text-blue ml-1 underline" href={href}>
+          {hrefMessage}
+        </Link>
+      </div>
+    </>
+  );
+}

app/(auth)/layout.tsx

@@ -0,0 +1,37 @@
+import Image from "next/image";
+import Link from "next/link";
+import { cookies } from "next/headers";
+import { redirect } from "next/navigation";
+
+export default async function AuthLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const cookie = await cookies();
+  const accessToken = cookie.get("accessToken")?.value;
+
+  if (accessToken) {
+    redirect("/");
+  }
+
+  return (
+    <div className="flex h-screen items-center justify-center">
+      <div className="flex w-[640px] flex-col items-center justify-center gap-10 px-4 sm:px-6">
+        <Link className="flex items-center gap-5" href="/">
+          <Image
+            src="/icons/panda.svg"
+            width={103}
+            height={103}
+            alt="logo"
+            className="hidden sm:block"
+          />
+          <h1 className="font-rokaf text-blue text-[66px] font-bold">
+            판다마켓
+          </h1>
+        </Link>
+        {children}
+      </div>
+    </div>
+  );
+}

app/(auth)/login/page.tsx

@@ -0,0 +1,15 @@
+import AuthFooter from "../_components/AuthFooter";
+import LoginForm from "@/components/Login/LoginForm";
+
+export default function Login() {
+  return (
+    <div className="flex w-full flex-col gap-6">
+      <LoginForm />
+      <AuthFooter
+        href="/signup"
+        title="판다마켓이 처음이신가요?"
+        hrefMessage="회원가입"
+      />
+    </div>
+  );
+}

app/(auth)/signup/page.tsx

@@ -0,0 +1,15 @@
+import SignupForm from "@/components/Signup/SignupForm";
+import AuthFooter from "../_components/AuthFooter";
+
+export default function Signup() {
+  return (
+    <div className="flex w-full flex-col gap-6">
+      <SignupForm />
+      <AuthFooter
+        href="/login"
+        title="이미 회원이신가요?"
+        hrefMessage="로그인"
+      />
+    </div>
+  );
+}

app/(pages)/addboard/page.tsx

@@ -0,0 +1,9 @@
+import AddBoardForm from "@/components/AddBoard/AddBoardForm";
+
+export default function AddBoard() {
+  return (
+    <div className="mt-6 flex h-full items-start justify-center px-4 sm:px-6">
+      <AddBoardForm />
+    </div>
+  );
+}

app/(pages)/board/[id]/page.tsx

@@ -0,0 +1,37 @@
+import Image from "next/image";
+import Link from "next/link";
+import Comment from "@/components/Comment/Comment";
+import Button from "@/components/common/Button/Button";
+import DetailBoard from "@/components/DetailBoard/DetailBoard";
+import CommentList from "@/components/Comment/CommentList";
+
+export default async function DetailBoardPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+  const articleId = Number(id);
+
+  return (
+    <>
+      <div className="flex flex-col gap-8">
+        <DetailBoard articleId={articleId} />
+        <Comment articleId={articleId} />
+        <CommentList articleId={articleId} />
+      </div>
+      <Link href="/board">
+        <Button paddingX={64} paddingY={12} className="m-auto">
+          목록으로 돌아가기
+          <Image
+            src="/icons/return.svg"
+            alt="return"
+            width={24}
+            height={24}
+            className="ml-1"
+          />
+        </Button>
+      </Link>
+    </>
+  );
+}

app/(pages)/board/action.ts

@@ -0,0 +1,55 @@
+import { apiClient } from "@/lib/apiClient";
+
+export interface BoardItem {
+  updatedAt: string;
+  createdAt: string;
+  likeCount: number;
+  writer: {
+    nickname: string;
+    id: number;
+  };
+  image: string;
+  content: string;
+  title: string;
+  id: number;
+}
+
+export interface Boards {
+  totalCount?: 0;
+  list: BoardItem[];
+}
+
+interface Params {
+  page: number;
+  pageSize: number;
+  orderBy: string;
+  keyword: string;
+}
+
+export const INITIAL_BOARDS_VALUE = {
+  id: 0,
+  title: "",
+  content: "",
+  image: "",
+  likeCount: 0,
+  createdAt: "",
+  updatedAt: "",
+  writer: {
+    id: 0,
+    nickname: "",
+  },
+};
+
+export async function getBoards(params: Params) {
+  const { page, pageSize, orderBy, keyword } = params;
+  const query = new URLSearchParams({
+    page: String(page),
+    pageSize: String(pageSize),
+    orderBy,
+    keyword,
+  });
+
+  const response = await apiClient.get<Boards>(`/articles?${query}`);
+
+  return response.data;
+}

app/(pages)/board/layout.tsx

@@ -0,0 +1,13 @@
+export default function PagesLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex items-center justify-center">
+      <div className="flex w-full max-w-[1200px] min-w-[343px] flex-col gap-10 px-4 py-5 md:p-6">
+        {children}
+      </div>
+    </div>
+  );
+}

app/(pages)/board/page.tsx

@@ -0,0 +1,25 @@
+import { Metadata } from "next";
+import { Suspense } from "react";
+import Best from "@/components/BestBoards/Best";
+import All from "@/components/AllBoards/All";
+import AllLoading from "@/components/AllBoards/Loading/AllLoading";
+import BestLoading from "@/components/BestBoards/Loading/BestLoading";
+
+export const metadata: Metadata = {
+  title: "판다마켓 | 자유게시판",
+};
+
+export const revalidate = 60;
+
+export default async function Board() {
+  return (
+    <>
+      <Suspense fallback={<BestLoading />}>
+        <Best />
+      </Suspense>
+      <Suspense fallback={<AllLoading />}>
+        <All />
+      </Suspense>
+    </>
+  );
+}

app/(pages)/layout.tsx

@@ -0,0 +1,14 @@
+import Header from "@/components/common/Header/Header";
+
+export default async function PagesLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex h-screen flex-col">
+      <Header />
+      {children}
+    </div>
+  );
+}

app/(pages)/page.tsx

@@ -0,0 +1,60 @@
+import Image from "next/image";
+import Link from "next/link";
+import Button from "@/components/common/Button/Button";
+import HomeCardSection from "@/components/HomePage/HomeCardSection";
+import HomeFooter from "@/components/HomePage/HomeFooter";
+
+export default function HomePage() {
+  return (
+    <div className="bg-white">
+      <div className="mb-24">
+        <div className="flex w-full items-end justify-center bg-[#CFE5FF] lg:h-[540px]">
+          <div className="flex w-full flex-col items-center justify-center gap-20 overflow-x-hidden lg:flex-row lg:gap-0 lg:pl-2">
+            <div className="mt-12 flex w-full shrink-0 flex-col items-center gap-6 lg:w-[357px] lg:items-start">
+              <h1 className="text-bold32 text-gray700 md:text-bold40 text-center lg:text-left">
+                일상의 모든 물건을
+                <br />
+                거래해 보세요
+              </h1>
+              <Link href="/items">
+                <Button paddingX={110} paddingY={16}>
+                  <p className="text-semi18 sm:text-semi20 shrink-0">
+                    구경하러가기
+                  </p>
+                </Button>
+              </Link>
+            </div>
+            <Image
+              src="/icons/hiPanda.svg"
+              alt="hi-panda"
+              width={730}
+              height={340}
+              className="h-auto w-full max-w-[730px] min-w-[448px]"
+            />
+          </div>
+        </div>
+
+        <HomeCardSection />
+      </div>
+
+      <div className="flex items-end justify-center bg-[#CFE5FF] lg:h-[540px]">
+        <div className="mt-28 flex w-full max-w-300 flex-col items-center justify-between gap-40 px-5 lg:flex-row lg:gap-0">
+          <p className="text-gray700 text-bold32 sm:text-bold40 shrink-0 text-center lg:text-left">
+            믿을 수 있는
+            <br />
+            판다마켓 중고 거래
+          </p>
+          <Image
+            src="/icons/twoPandas.svg"
+            alt="two-pandas"
+            width={746}
+            height={397}
+            className="h-auto w-full max-w-[746px] min-w-[375px]"
+          />
+        </div>
+      </div>
+
+      <HomeFooter />
+    </div>
+  );
+}