[정혜연] sprint9

components/board/AllIArticleSection.jsx

@@ -0,0 +1,137 @@
+import { useEffect, useState, useRef, useCallback } from "react";
+import axios from "@/lib/axios";
+import Link from "next/link";
+import styles from "@/styles/Boards.module.css";
+import SearchForm from "@/components/ui/SearchForm";
+import Dropdown from "@/components/button/DropdownButton";
+import ArticleList from "@/components/board/ArticleList";
+
+export default function AllArticleSection() {
+  const [articles, setArticles] = useState([]); //게시글 데이터
+  const [page, setPage] = useState(1); //쿼리스트링
+  const [pageSize] = useState(30); // 한 페이지당 게시글 수(무한스크롤 일단 임시코드)
+  const [orderBy, setOrderBy] = useState("recent"); // 기본 정렬: 최신순
+  const [keyword, setKeyword] = useState(""); // 검색 키워드
+
+  const [isLoading, setIsLoading] = useState(false); //로딩 상태
+  const [hasMore, setHasMore] = useState(true); //다음 페이지(데이터)가 있는지
+
+  const observer = useRef();
+
+  //게시글 불러오기
+  const getArticles = async (currentPage, currentOrderBy, currentKeyword) => {
+    setIsLoading(true);
+    try {
+      const response = await axios.get(`/articles`, {
+        params: {
+          page: currentPage,
+          pageSize,
+          orderBy: currentOrderBy,
+          keyword: currentKeyword,
+        },
+      });
+
+      const nextArticles = response.data.list;
+
+      // 첫 페이지(쿼리스트링)일 경우 새로운 데이터 업데이트, 아닐 경우 기존 데이터 배열 뒤에 추가
+      setArticles((prev) => {
+        if (currentPage === 1) return nextArticles;
+        return [...prev, ...nextArticles];
+      });
+
+      // 다음 페이지(데이터)가 있는지 확인
+      setHasMore(nextArticles.length > 0);
+    } catch (error) {
+      console.error("Error fetching articles:", error);
+    }
+    setIsLoading(false);
+  };
+
+  //임시 무한스크롤 코드
+  const lastArticleElementRef = useCallback(
+    (node) => {
+      if (isLoading) return;
+      if (observer.current) observer.current.disconnect();
+
+      observer.current = new IntersectionObserver((entries) => {
+        if (entries[0].isIntersecting && hasMore) {
+          setPage((prevPage) => prevPage + 1);
+        }
+      });
+
+      if (node) observer.current.observe(node);
+    },
+    [isLoading, hasMore]
+  );
+
+  //드롭다운 데이터
+  const handleOrderChange = (value) => {
+    const order = value === "최신순" ? "recent" : "like";
+    setOrderBy(order);
+    setPage(1);
+    getArticles(1, order, keyword);
+  };
+
+  //검색
+  const handleSearch = (searchKeyword) => {
+    setKeyword(searchKeyword);
+    setPage(1);
+    getArticles(1, orderBy, searchKeyword);
+
+    if (searchKeyword === "") {
+      getArticles(1, orderBy, ""); // 기본 게시글 목록 호출
+    } else {
+      getArticles(1, orderBy, searchKeyword); // 검색된 게시글 목록 호출
+    }
+  };
+
+  //최초 게시글 불러오기
+  useEffect(() => {
+    getArticles(page, orderBy, keyword);
+  }, [page]);
+
+  return (
+    <>
+      <div className={styles.container}>
+        <div className={styles.allArticle}>
+          <p className={styles.containerTitle}>게시글</p>
+          <Link className={`${styles.button} button`} href="/boards/write">
+            글쓰기
+          </Link>
+        </div>
+
+        <div className={styles.searchContainer}>
+          <SearchForm onSearch={handleSearch} />
+          <Dropdown onSelect={handleOrderChange} />
+        </div>
+
+        <ArticleList articles={articles} />
+
+        <div>
+          {articles.map((article, index) => {
+            if (index === articles.length - 1) {
+              return (
+                <div key={article.id} ref={lastArticleElementRef}>
+                  <h3>{article.title}</h3>
+                  <p>{article.content}</p>
+                </div>
+              );
+            } else {
+              return (
+                <div key={article.id}>
+                  <h3>{article.title}</h3>
+                  <p>{article.content}</p>
+                </div>
+              );
+            }
+          })}
+        </div>
+
+        {isLoading && <p className={styles.loading}>로딩 중...</p>}
+        {!hasMore && (
+          <p className={styles.noMoreData}>더 이상 게시글이 없습니다.</p>
+        )}
+      </div>
+    </>
+  );
+}

components/board/ArticleList.jsx

@@ -0,0 +1,58 @@
+import Link from "next/link";
+import Image from "next/image";
+import like from "@/public/icons/ic_heart.svg";
+import profile from "@/public/icons/ic_profile.png";
+import styles from "@/styles/Boards.module.css";
+import defaultImg from "@/public/icons/img_default.png";
+
+export default function ArticleList({ articles = [] }) {
+  return (
+    <div>
+      {articles.map((articles) => (
+        <div key={articles.id} className={styles.articleContainer}>
+          <div className={styles.articleInfo}>
+            <Link href={`/boards/${articles.id}`}>
+              <p className={styles.articleTitle}>{articles.title}</p>
+            </Link>
+            {articles.image ? (
+              <Image
+                src={articles.image}
+                alt={articles.title || "대표이미지"}
+                width={72}
+                height={72}
+                style={{
+                  borderRadius: "8px",
+                  border: "1px solid var(--gray-100)",
+                }}
+              />
+            ) : (
+              <Image
+                src={defaultImg}
+                alt={"대표이미지"}
+                width={72}
+                height={72}
+                style={{
+                  borderRadius: "8px",
+                  border: "1px solid var(--gray-100)",
+                }}
+              />
+            )}
+          </div>
+          <div className={styles.writerInfo}>
+            <div className={styles.writer}>
+              <Image src={profile} alt="profile" width={24} height={24} />
+              <p className={styles.nickname}>{articles.writer.nickname}</p>
+              <p className={styles.date}>
+                {new Date(articles.createdAt).toLocaleDateString()}
+              </p>
+            </div>
+            <div className={styles.like}>
+              <Image src={like} alt="likeCount" />
+              <p className={styles.likeCount}>{articles.likeCount}</p>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

components/board/BestArticle.jsx

@@ -0,0 +1,65 @@
+import Link from "next/link";
+import Image from "next/image";
+import like from "@/public/icons/ic_heart.svg";
+import profile from "@/public/icons/ic_profile.png";
+import styles from "@/styles/Boards.module.css";
+import defaultImg from "@/public/icons/img_default.png";
+import badge from "@/public/icons/img_badge.png";
+
+export default function BestArticle({ articles = [] }) {
+  return (
+    <div className={styles.bestArticle}>
+      {articles.map((articles) => (
+        <div key={articles.id} className={styles.bestArticleContainer}>
+          <Image
+            src={badge}
+            alt="badge"
+            width={102}
+            style={{ alignItems: "top" }}
+          />
+          <div className={styles.articleInfo}>
+            <Link href={`/boards/${articles.id}`}>
+              <p className={styles.articleTitle}>{articles.title}</p>
+            </Link>
+            {articles.image ? (
+              <Image
+                src={articles.image}
+                alt={articles.title || "대표이미지"}
+                width={72}
+                height={72}
+                style={{
+                  borderRadius: "8px",
+                  border: "1px solid var(--gray-100)",
+                }}
+              />
+            ) : (
+              <Image
+                src={defaultImg}
+                alt={"대표이미지"}
+                width={72}
+                height={72}
+                style={{
+                  borderRadius: "8px",
+                  border: "1px solid var(--gray-100)",
+                }}
+              />
+            )}
+          </div>
+          <div className={styles.writerInfo}>
+            <div className={styles.writer}>
+              <Image src={profile} alt="profile" width={24} height={24} />
+              <p className={styles.nickname}>{articles.writer.nickname}</p>
+              <p className={styles.date}>
+                {new Date(articles.createdAt).toLocaleDateString()}
+              </p>
+            </div>
+            <div className={styles.like}>
+              <Image src={like} alt="likeCount" />
+              <p className={styles.likeCount}>{articles.likeCount}</p>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

components/board/BestArticleSection.jsx

@@ -0,0 +1,38 @@
+import { useEffect, useState } from "react";
+import axios from "@/lib/axios";
+import styles from "@/styles/Boards.module.css";
+import BestArticle from "./BestArticle";
+
+export default function BestArticleSection() {
+  const [bestArticles, setBestArticles] = useState([]);
+
+  // 베스트 게시글 불러오기
+  async function getBestArticles() {
+    try {
+      const res = await axios.get("/articles");
+      const nextBestArticles = res.data.list;
+
+      // likeCount 기준으로 정렬 후 상위 3개 추출
+      const sortedArticles = nextBestArticles
+        .sort((a, b) => b.likeCount - a.likeCount)
+        .slice(0, 3);
+
+      setBestArticles(sortedArticles);
+    } catch (error) {
+      console.error("Error fetching articles:", error);
+    }
+  }
+
+  useEffect(() => {
+    getBestArticles();
+  }, []);
+
+  return (
+    <>
+      <div className={styles.container}>
+        <p className={styles.containerTitle}>베스트 게시글</p>
+        <BestArticle articles={bestArticles} />
+      </div>
+    </>
+  );
+}

components/button/DropdownButton.jsx

@@ -0,0 +1,88 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+
+const DropdownContainer = styled.div`
+  position: relative;
+`;
+
+const DropdownButton = styled.button`
+  width: 100%;
+  padding: 12px 20px;
+  margin: auto;
+  font-size: 16px;
+  font-weight: 400;
+  text-align: center;
+  background-color: #ffffff;
+  border: 1px solid #ccc;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background-color: #f9f9f9;
+  }
+`;
+
+const DropdownList = styled.ul`
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  background-color: #ffffff;
+  border: 1px solid #ccc;
+  border-radius: 12px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+`;
+
+const DropdownItem = styled.li`
+  display: block;
+  justify-content: center;
+  align-items: center;
+  padding: 12px 20px;
+  font-size: 16px;
+  line-height: 26px;
+  font-weight: 400;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background-color: #f0f0f0;
+  }
+`;
+
+// DropdownButton.jsx
+const Dropdown = ({ onSelect }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState("최신순");
+
+  const toggleDropdown = () => setIsOpen(!isOpen);
+
+  // 선택된 값에 따라 상태 업데이트
+  const handleSelect = (value) => {
+    setSelected(value);
+    setIsOpen(false); // 드롭다운 닫기
+    onSelect(value); // 선택된 값 부모로 전달
+  };
+
+  return (
+    <DropdownContainer>
+      <DropdownButton onClick={toggleDropdown}>{selected} ㅤㅤ▼</DropdownButton>
+      {isOpen && (
+        <DropdownList>
+          <DropdownItem onClick={() => handleSelect("최신순")}>
+            최신순
+          </DropdownItem>
+          <DropdownItem onClick={() => handleSelect("인기순")}>
+            인기순
+          </DropdownItem>
+        </DropdownList>
+      )}
+    </DropdownContainer>
+  );
+};
+
+export default Dropdown;