[윤혜림] Sprint9

.gitignore

@@ -1,35 +1,73 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+# Created by https://www.toptal.com/developers/gitignore/api/macos,git,react
+# Edit at https://www.toptal.com/developers/gitignore?templates=macos,git,react
 
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
+### Git ###
+# Created by git for backups. To disable backups in Git:
+# $ git config --global mergetool.keepBackup false
+*.orig
 
-# testing
-/coverage
+# Created by git when using merge tools for conflicts
+*.BACKUP.*
+*.BASE.*
+*.LOCAL.*
+*.REMOTE.*
+*_BACKUP_*.txt
+*_BASE_*.txt
+*_LOCAL_*.txt
+*_REMOTE_*.txt
 
-# next.js
-/.next/
-/out/
+### macOS ###
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
 
-# production
-/build
+# Icon must end with two \r
+Icon
 
-# misc
-.DS_Store
-*.pem
 
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+### macOS Patch ###
+# iCloud generated files
+*.icloud
+
+### react ###
+.DS_*
+*.log
+logs
+**/*.backup.*
+**/*.back.*
+
+node_modules
+node_modules/
+node_modules/.cache
+bower_components
+
+*.sublime*
 
-# local env files
-.env*.local
+psd
+thumb
+sketch
 
-# vercel
-.vercel
+### next ###
+.next
 
-# typescript
-*.tsbuildinfo
-next-env.d.ts
+# End of https://www.toptal.com/developers/gitignore/api/macos,git,react

README.md

@@ -1,40 +1 @@
-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 `pages/index.tsx`. The page auto-updates as you edit the file.
-
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
-
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
-
-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.
+## Next.js Project 시작

api/api.tsx

@@ -0,0 +1,60 @@
+import { CommentDataProps, ProductDataProps } from "../api/types";
+const BASE_URL = "https://panda-market-api.vercel.app";
+
+// 베스트/전체 상품 리스트
+export async function getProductData(params = {}) {
+  const query = new URLSearchParams(params).toString();
+  const response = await fetch(`${BASE_URL}/products?${query}`);
+
+  if (!response.ok) {
+    throw new Error("상품을 불러오는 데 실패했습니다.");
+  }
+  const body = await response.json();
+  return body;
+}
+
+// 디테일 상품 정보
+export async function getProductId(
+  productId: string | string[],
+  setProductData: React.Dispatch<
+    React.SetStateAction<ProductDataProps | undefined>
+  >,
+  setLoading: React.Dispatch<React.SetStateAction<boolean>>
+) {
+  const response = await fetch(`${BASE_URL}/products/${productId}`);
+
+  try {
+    const body = await response.json();
+    setProductData(body);
+  } catch (error) {
+    console.log(error);
+  }
+
+  if (!response.ok) {
+    throw new Error("정보를 불러오는 데 실패했습니다.");
+  }
+
+  setLoading(false);
+}
+
+// 디테일 댓글
+export async function getComments(
+  productId: string | string[],
+  setCommentsData: React.Dispatch<
+    React.SetStateAction<CommentDataProps | undefined>
+  >
+) {
+  const response = await fetch(
+    `${BASE_URL}/products/${productId}/comments?limit=10`
+  );
+  try {
+    const body = await response.json();
+    setCommentsData(body);
+  } catch (error) {
+    console.log(error);
+  }
+
+  if (!response.ok) {
+    throw new Error("정보를 불러오는 데 실패했습니다.");
+  }
+}

api/types.ts

@@ -0,0 +1,35 @@
+import { StaticImport, StaticRequire } from "next/dist/shared/lib/get-img-props";
+
+export interface ProductDataProps {
+  createdAt: string;
+  description: string;
+  favoriteCount: number;
+  id: number;
+  images:string | StaticImport;
+  isFavorite: boolean;
+  name: string;
+  ownerId: number;
+  ownerNickname: string;
+  price: number;
+  tags: string[];
+  updatedAt: string;
+}
+
+interface ListWriter {
+  id: number;
+  image?: string | null;
+  nickname: string;
+}
+
+interface ListComment {
+  content: string;
+  createdAt: string;
+  id: number;
+  updatedAt: string;
+  writer: ListWriter;
+}
+
+export interface CommentDataProps {
+  list: ListComment[];
+  nextCursor: number;
+}

components/app/Dayjs.tsx

@@ -0,0 +1,31 @@
+import dayjs from "dayjs";
+import duration, { Duration } from "dayjs/plugin/duration";
+dayjs.extend(duration);
+
+export function getTimeDiff(timeToCompare: string) {
+  const timeDiffDuration: Duration = dayjs.duration(
+    dayjs().diff(timeToCompare)
+  );
+  const yearDiff: number = parseInt(timeDiffDuration.format("Y"));
+  const monthDiff: number = parseInt(timeDiffDuration.format("M"));
+  const dateDiff: number = parseInt(timeDiffDuration.format("D"));
+  const hourDiff: number = parseInt(timeDiffDuration.format("H"));
+  const minuteDiff: number = parseInt(timeDiffDuration.format("m"));
+  const secondDiff: number = parseInt(timeDiffDuration.format("s"));
+
+  if (yearDiff > 0) {
+    return `${yearDiff}년 전`;
+  } else if (monthDiff > 0) {
+    return `${monthDiff}달 전`;
+  } else if (dateDiff > 0) {
+    return `${dateDiff}일 전`;
+  } else if (hourDiff > 0) {
+    return `${hourDiff}시간 전`;
+  } else if (minuteDiff > 0) {
+    return `${minuteDiff}분 전`;
+  } else if (secondDiff > 0) {
+    return `${secondDiff}초 전`;
+  } else {
+    return "";
+  }
+}

components/app/Footer.tsx

@@ -0,0 +1,60 @@
+import styles from "../../styles/app/footer.module.css";
+import IconInsta from "@/public/assets/images/app/home/ic_instagram.svg";
+import IconFacebook from "@/public/assets/images/app/home/ic_facebook.svg";
+import IconYoutube from "@/public/assets/images/app/home/ic_youtube.svg";
+import IconTwitter from "@/public/assets/images/app/home/ic_twitter.svg";
+import Link from "next/link";
+
+function Footer() {
+  return (
+    <footer className={styles.footer}>
+      <div className={styles.footerWrap}>
+        <p className={styles.copyright}>&copy;codeit - 2024</p>
+        <div className={styles.btnLink}>
+          <Link href="/privacy">Privacy Policy</Link>
+          <Link href="/faq">FAQ</Link>
+        </div>
+        <ul className={styles.socialBox}>
+          <li>
+            <Link
+              href="https://www.facebook.com/"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <IconFacebook />
+            </Link>
+          </li>
+          <li>
+            <Link
+              href="https://www.twitter.com/"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <IconTwitter />
+            </Link>
+          </li>
+          <li>
+            <Link
+              href="https://www.youtube.com/"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <IconYoutube />
+            </Link>
+          </li>
+          <li>
+            <Link
+              href="https://www.instagram.com/"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <IconInsta />
+            </Link>
+          </li>
+        </ul>
+      </div>
+    </footer>
+  );
+}
+
+export default Footer;

components/app/ItemListNav.tsx

@@ -0,0 +1,54 @@
+import { useRouter } from "next/router";
+import Link from "next/link";
+import Image from "next/image";
+import styles from "../../styles/app/navi.module.css";
+import NavLogoImg from "@/public/assets/images/app/navi/logo.svg";
+import profileDefaultImg from "@/public/assets/images/app/navi/profile_default.png";
+
+const menuData = [
+  { id: 1, name: "자유게시판", path: "/boards" },
+  { id: 2, name: "중고마켓", path: "/items" },
+];
+
+function ItemListNav() {
+  const router = useRouter();
+
+  return (
+    <div className={styles.fixContainer}>
+      <nav className={styles.navCover}>
+        <div className={styles.pageControl}>
+          <Link href="/" prefetch={true}>
+            <div className={styles.btnLogo}>
+              <NavLogoImg />
+              <p className={styles.companyName}>판다마켓</p>
+            </div>
+          </Link>
+          <div className={styles.btnWrap}>
+            {menuData.map((menu) => {
+              return (
+                <Link
+                  key={menu.id}
+                  href={menu.path}
+                  prefetch={true}
+                  className={`${styles.btnNavMenu} ${
+                    menu.path === router.pathname ? styles.isActive : ""
+                  }`}
+                >
+                  {menu.name}
+                </Link>
+              );
+            })}
+          </div>
+        </div>
+        {/* 사용자 정보를 담은 프로필 또는 아바타이므로 이 기능만 제공해주는 콤포넌트를 분리하는 것도 추후 고려 */}
+        <div className={styles.userControl}>
+          <div className={styles.circle}>
+            <Image src={profileDefaultImg} alt="기본프로필이미지" />
+          </div>
+        </div>
+      </nav>
+    </div>
+  );
+}
+
+export default ItemListNav;

components/app/Loading.tsx

@@ -0,0 +1,11 @@
+import styles from "../../styles/app/loading.module.css";
+
+export const Loading = () => {
+  return (
+    <div className={styles.loaderContainer}>
+      <span className={styles.loader}></span>
+    </div>
+  );
+};
+
+export default Loading;