[오영택] sprint 5,9

next_mission/.eslintrc.json

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

next_mission/.prettierrc

@@ -0,0 +1,11 @@
+{
+  "arrowParens": "always",
+  "endOfLine": "lf",
+  "printWidth": 80,
+  "quoteProps": "as-needed",
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "useTabs": false,
+  "trailingComma": "es5"
+}

next_mission/api/itemApi.ts

@@ -0,0 +1,79 @@
+import { ProductListFetcherParams } from '@/types/productTypes';
+
+export async function getProducts({
+  orderBy,
+  pageSize,
+  page = 1,
+}: ProductListFetcherParams) {
+  const params = new URLSearchParams({
+    orderBy,
+    pageSize: String(pageSize),
+    page: String(page),
+  })
+
+  try {
+    const res = await fetch(
+      `https://panda-market-api.vercel.app/products?${params}`
+    );
+
+    if (!res.ok) {
+      throw new Error(`HTTP error: ${res.status}`)
+    }
+    const body = await res.json();
+    return body;
+  } catch (error) {
+    console.error('상품을 불러오는데 실패했습니다', error);
+    throw error;
+  }
+}
+
+export async function getProductDetail(productId: number) {
+  if (!productId) {
+    throw new Error("Invalid product ID");
+  }
+
+  try {
+    const res = await fetch(
+      `https://panda-market-api.vercel.app/products/${productId}`
+    );
+    if (!res.ok) {
+      throw new Error(`HTTP error: ${res.status}`);
+    }
+    const body = await res.json();
+    return body;
+  } catch (error) {
+    console.error('상품정보를 불러오는데 실패했습니다', error);
+    throw error;
+  };
+}
+
+export async function getProductComments({
+  productId,
+  limit = 10,
+}: {
+  productId: number;
+  limit?: number;
+}) {
+  if (!productId) {
+    throw new Error('Invalid product ID');
+  }
+
+  const params = {
+    limit: String(limit),
+  };
+
+  try {
+    const query = new URLSearchParams(params).toString();
+    const res = await fetch(
+      `https://panda-market-api.vercel.app/products/${productId}/comments?${query}`
+    );
+    if (!res.ok) {
+      throw new Error(`HTTP error: ${res.status}`);
+    }
+    const body = await res.json();
+    return body;
+  } catch (error) {
+    console.error('상품 댓글을 불러오는데 실패했습니다', error);
+    throw error;
+  }
+}

next_mission/components/boards/AllArticlesSection.tsx

@@ -0,0 +1,81 @@
+import { Article, ArticleSortOption } from '@/types/articleTypes';
+import Button from '../ui/Button';
+import SearchBar from '../ui/SearchBar';
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+import Empty from '../ui/Empty';
+import ArticleItem from './ArticleItem';
+import Dropdown from '../ui/Dropdown';
+
+interface AllArticlesSectionProps {
+  initialArticles: Article[];
+}
+
+const AllArticlesSection: React.FC<AllArticlesSectionProps> = ({
+  initialArticles,
+}) => {
+  const [articles, setArticles] = useState(initialArticles);
+  const [orderBy, setOrderBy] = useState('recent');
+
+  const router = useRouter();
+  const keyword = (router.query.q as string) || '';
+
+  const handleSortSelection = (sortOption: ArticleSortOption) => {
+    setOrderBy(sortOption);
+  };
+
+  const handleInputKeyword = (inputKeyword: string) => {
+    const query = { ...router.query };
+    if (inputKeyword.trim()) {
+      query.q = inputKeyword;
+    } else {
+      delete query.q; // 객체이므로 삭제 가능
+    }
+    router.replace({
+      pathname: router.pathname,
+      query,
+    });
+  };
+
+  useEffect(() => {
+    const fetchArticles = async () => {
+      let url = `https://panda-market-api.vercel.app/articles?orderBy=${orderBy}`;
+      if (keyword.trim()) {
+        url += `&keyword=${encodeURIComponent(keyword)}`;
+      }
+      const res = await fetch(url);
+      const data = await res.json();
+      setArticles(data.list);
+    };
+
+    fetchArticles();
+  }, [orderBy, keyword]);
+
+  return (
+    <div className="flex flex-col gap-6 w-[1200px] m-auto">
+      <div className="flex justify-between">
+        <header>게시글</header>
+        <Button>글쓰기</Button>
+      </div>
+
+      <div className="flex justify-between">
+        <SearchBar onSearch={handleInputKeyword} />
+        <Dropdown
+          onSortSelection={handleSortSelection}
+          sortOptions={[
+            { key: 'recent', label: '최신순' },
+            { key: 'like', label: '인기순' },
+          ]}
+        />
+      </div>
+
+      {articles.length
+        ? articles.map((article) => (
+            <ArticleItem key={`article-${article.id}`} article={article} />
+          ))
+        : keyword && <Empty text={`'${keyword}'로 검색된 결과가 없습니다.`} />}
+    </div>
+  );
+};
+
+export default AllArticlesSection;

next_mission/components/boards/ArticleItem.tsx

@@ -0,0 +1,60 @@
+import { Article } from '@/types/articleTypes';
+import Image from 'next/image';
+import Link from 'next/link';
+import LikeCount from '../ui/LikeCount';
+import { format } from 'date-fns';
+
+// Todo : LikeCount gap 동적으로 입력하기
+
+interface ArticleProps {
+  article: Article;
+}
+
+const ArticleItem: React.FC<ArticleProps> = ({ article }) => {
+  const dateString = format(article.createdAt, 'yyyy. MM. dd');
+  return (
+    <>
+      <Link
+        href={`/boards/${article.id}`}
+        className="flex flex-col gap-6 h-[136px] border-b border-[#e5e7eb]"
+      >
+        <div className="flex flex-col gap-4 justify-between">
+          <div className="flex justify-between gap-8 h-[72px]">
+            <h2 className="text-xl font-semibold text-[#1f2937]">
+              {article.title}
+            </h2>
+            {article.image && (
+              <div className="w-[72px] h-[72px] rounded-md border border-[#e5e7eb] relative">
+                <Image
+                  fill
+                  src={article.image}
+                  alt={`${article.id}번 게시글 이미지`}
+                  className="object-contain w-12 h-11 absolute"
+                />
+              </div>
+            )}
+          </div>
+          <div className="flex gap-2 justify-between">
+            <div className="flex gap-2 items-center">
+              <span>아바타</span>
+              <div className="flex gap-2 h-[17px] text-[#4b5563] text-sm">
+                {article.writer.nickname}
+                <span className="text-[#9ca3af] text-sm">{dateString}</span>
+              </div>
+            </div>
+            <LikeCount
+              count={article.likeCount}
+              width={24}
+              height={24}
+              gap={8}
+              leading={24}
+              fontSize={16}
+            />
+          </div>
+        </div>
+      </Link>
+    </>
+  );
+};
+
+export default ArticleItem;

next_mission/components/boards/BestArticleCard.tsx

@@ -0,0 +1,49 @@
+import Link from 'next/link';
+import MedalIcon from '@/public/images/icons/ic_medal.svg';
+import Image from 'next/image';
+import { Article } from '@/types/articleTypes';
+import { format } from 'date-fns';
+import LikeCount from '../ui/LikeCount';
+
+const BestArticleCard = ({ article }: { article: Article }) => {
+  const dateString = format(article.createdAt, 'yyyy. MM. dd');
+  return (
+    <Link
+      href={`/boards/${article.id}`}
+      className="w-[384px] h-[169px] bg-[#F9FAFB] rounded-lg"
+    >
+      <div className="flex flex-col gap-3 w-[336px] h-[153px] m-auto">
+        <div className="flex gap-1 items-center w-[102px] h-[30px] bg-[#3692FF] justify-center text-white rounded-b-3xl text-base font-semibold">
+          <MedalIcon width={16} height={16} />
+          Best
+        </div>
+
+        <div className="flex w-[336px] h-[72px] gap-3">
+          <h2 className="w-[256px] font-semibold text-xl text-[#1f2937]">
+            {article.title}
+          </h2>
+          {article.image && (
+            <div className="w-[72px] h-[72px] rounded-md border border-[#e5e7eb] relative">
+              <Image
+                fill
+                src={article.image}
+                alt={`${article.id}번 게시글 이미지`}
+                className="object-contain w-12 h-11 absolute"
+              />
+            </div>
+          )}
+        </div>
+
+        <div className="flex justify-between">
+          <div className="flex gap-2 items-center text-[#4b5563] font-normal h-4 text-sm">
+            {article.writer.nickname}
+            <LikeCount count={article.likeCount} fontSize={14} />
+          </div>
+          <span>{dateString}</span>
+        </div>
+      </div>
+    </Link>
+  );
+};
+
+export default BestArticleCard;

next_mission/components/boards/BestArticlesSection.tsx

@@ -0,0 +1,64 @@
+import { useEffect, useState } from 'react';
+import BestArticleCard from './BestArticleCard';
+import { Article, ArticleListData } from '@/types/articleTypes';
+import useViewport from '@/hooks/useViewport';
+
+const getPageSize = (width: number): number => {
+  if (width < 768) {
+    return 1; // Mobile
+  } else if (width < 1280) {
+    return 2; // Tablet
+  } else {
+    return 3; // Desktop
+  }
+};
+
+const BestArticlesSection = () => {
+  const [bestArticles, setBestArticles] = useState<Article[]>([]);
+  const [pageSize, setPageSize] = useState<number | null>(null);
+
+  const viewportWidth = useViewport();
+
+  useEffect(() => {
+    if (viewportWidth === 0) return;
+
+    const newPageSize = getPageSize(viewportWidth);
+
+    if (newPageSize !== pageSize) {
+      setPageSize(newPageSize);
+
+      const fetchBestArticles = async (size: number) => {
+        try {
+          const res = await fetch(
+            `https://panda-market-api.vercel.app/articles?orderBy=like&pageSize=${size}`
+          );
+          const data: ArticleListData = await res.json();
+          setBestArticles(data.list);
+        } catch (error) {
+          console.error('베스트 게시물을 받아오는 데 실패했습니다.', error);
+        }
+      };
+
+      fetchBestArticles(newPageSize);
+    }
+  }, [viewportWidth, pageSize]);
+
+  return (
+    <div className="flex flex-col m-auto gap-6 w-[1200px]">
+      <header className="font-bold text-xl text-[#111827]">
+        베스트 게시글
+      </header>
+
+      <div className="flex justify-between">
+        {bestArticles.map((article) => (
+          <BestArticleCard
+            key={`best-article-${article.id}`}
+            article={article}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default BestArticlesSection;