Merge pull request #82 from JangGusWjd/dev/main-api

[FE-DEV, UPDATE] 인기글 api 연결, 커뮤니티 글쓰기 url 변경, 로그인 여부에 따른 접근 권한 부여

src/components/community/CommunityMain.tsx

@@ -9,9 +9,7 @@ import { useNavigate } from "react-router-dom";
 import { fetchData } from "../../api/fetchData";
 import { CommunityData } from "../../types/Types";
 
-const CommunityMain: React.FC<{ onWriteButtonClick: () => void }> = ({
-  onWriteButtonClick,
-}) => {
+const CommunityMain = () => {
   const [selectedCategory, setSelectedCategory] = useState("전체보기");
   const [communityData, setCommunityData] = useState<CommunityData[]>([]);
   const [searchKeyword, setSearchKeyword] = useState("");
@@ -52,6 +50,10 @@ const CommunityMain: React.FC<{ onWriteButtonClick: () => void }> = ({
     navigate(`/community/${contentId}`);
   };
 
+  const handleWriteClick = () => {
+    navigate("/community/write");
+  };
+
   return (
     <div className="community-container">
       <div className="search">
@@ -102,7 +104,7 @@ const CommunityMain: React.FC<{ onWriteButtonClick: () => void }> = ({
             우리학교는
           </li>
         </ul>
-        <button onClick={onWriteButtonClick}>
+        <button onClick={handleWriteClick}>
           <PencilIcon />
           글쓰기
         </button>

src/components/community/CommunityWrite.tsx

@@ -4,9 +4,7 @@ import { useState } from "react";
 import { postTokenData } from "../../api/postData";
 import { CommunityWriteData } from "../../types/Types";
 
-const CommunityWrite: React.FC<{ onBackToMain: () => void }> = ({
-  onBackToMain,
-}) => {
+const CommunityWrite = () => {
   const [writeData, setWriteData] = useState<CommunityWriteData>({
     title: "",
     contents: "",
@@ -54,6 +52,10 @@ const CommunityWrite: React.FC<{ onBackToMain: () => void }> = ({
     }
   };
 
+  const handleBackClick = () => {
+    navigate("/community");
+  };
+
   return (
     <div className="community-container">
       <h1>✏️ 커뮤니티 글 작성</h1>
@@ -104,7 +106,7 @@ const CommunityWrite: React.FC<{ onBackToMain: () => void }> = ({
           </div>
         </div>
         <div className="button-zip">
-          <button onClick={onBackToMain}>취소</button>
+          <button onClick={handleBackClick}>취소</button>
           <button onClick={handleSubmit}>등록</button>
         </div>
       </form>

src/components/community/PopularCommunity.tsx

@@ -1,37 +1,38 @@
-const data = [
-  {
-    title: "카카오 모집 공고 떴는데..",
-    writer: "단국대학교 소프트웨어학과 20학번",
-  },
-  {
-    title: "운영체제 질문 좀 받아주실분",
-    writer: "단국대학교 소프트웨어학과 20학번",
-  },
-  {
-    title: "프론트엔드 개발자 되려면",
-    writer: "단국대학교 소프트웨어학과 20학번",
-  },
-  {
-    title: "네이버 부스트캠프 모집",
-    writer: "단국대학교 소프트웨어학과 20학번",
-  },
-  {
-    title: "SKT DEVOCEAN YOUNG 3기 모집",
-    writer: "단국대학교 소프트웨어학과 20학번",
-  },
-];
+import { useNavigate } from "react-router-dom";
+import { useState, useEffect } from "react";
+import { fetchData } from "../../api/fetchData";
+import { CommunityData } from "../../types/Types";
 
 const PopularCommunity = () => {
+  const [communityData, setCommunityData] = useState<CommunityData[]>([]);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const fetchCommunityData = async () => {
+      const data = await fetchData("/boards/posts/?sort_by=weekly_popular");
+      setCommunityData(data);
+    };
+
+    fetchCommunityData();
+  }, []);
+
+  const handleItemClick = (contentId: number) => {
+    navigate(`/community/${contentId}`);
+  };
+
   return (
     <div className="popular-study-container">
       <h1>🔥 주간 인기 게시글</h1>
       <ul>
-        {data.map((item, index) => (
-          <li key={index}>
+        {communityData.map((item, index) => (
+          <li key={index} onClick={() => handleItemClick(item.id)}>
             <p>{item.title}</p>
             <div>
               <img src={require("../../assets/img/dku-logo.png")} alt="logo" />
-              <p>{item.writer}</p>
+              <p>
+                {item.school_name} {item.major_name}{" "}
+                {String(item.admission_date).slice(-2)}학번
+              </p>
             </div>
           </li>
         ))}

src/components/main/MainCommunity.tsx

@@ -8,63 +8,36 @@ import { ReactComponent as LikeIcon } from "../../assets/icon/like-color.svg";
 import { ReactComponent as ScrapIcon } from "../../assets/icon/scrap-color.svg";
 import "../../styles/main/MainCommunity.scss";
 import { useNavigate } from "react-router-dom";
-
-const data = [
-  {
-    writer: "홍**",
-    school: "서울대학교 컴퓨터공학과 19학번",
-    date: "2024-05-15",
-    category: "인턴리뷰",
-    title: "인턴 경험 공유합니다!",
-    content:
-      "저는 최근에 네이버에서 소프트웨어 엔지니어링 부서에서 3개월 동안 인턴을 하게 되었습니다. 이 경험은 제게 매우 의미있고 흥미로웠습니다. 프로젝트 팀원들과의 협업을 통해 실제 업무 환경에서의 소프트웨어 개발 과정을 경험할 수 있었으며, 새로운 기술과 도구들을 배우고 적용해보는 과정에서 많은 성장을 이루었습니다. 또한, 업무 중 발생하는 다양한 문제들을 해결하는 과정에서 창의적인 해결책을 모색하고 구현함으로써 실무 역량을 키워나갈 수 있었습니다. 이러한 경험을 통해 소프트웨어 엔지니어로서의 역량을 향상시키고, 향후의 경력 발전에 큰 도움이 될 것으로 기대하고 있습니다.",
-    chat: 30,
-    like: 45,
-    scrap: 10,
-  },
-  {
-    writer: "김**",
-    school: "한양대학교 컴퓨터소프트웨어학부 20학번",
-    date: "2024-05-17",
-    category: "잡담/수다",
-    title: "자바스크립트 스터디원 구합니다!",
-    content:
-      "자바스크립트를 공부하고 있는데 함께 공부할 동료를 구합니다. 관심 있으신 분은 연락주세요!",
-    chat: 23,
-    like: 33,
-    scrap: 7,
-  },
-  {
-    writer: "박**",
-    school: "단국대학교 소프트웨어학과 21학번",
-    date: "2024-05-17",
-    category: "학과질문",
-    title: "대기업 취업에 관한 질문드립니다.",
-    content:
-      "최근에 대기업 취업 준비를 시작했는데, 어떤 준비가 필요한지 조언 부탁드립니다.",
-    chat: 12,
-    like: 20,
-    scrap: 5,
-  },
-  {
-    writer: "이**",
-    school: "중앙대학교 소프트웨어학부 22학번",
-    date: "2024-05-18",
-    category: "대외활동",
-    title: "봉사활동 참여자 모집합니다!",
-    content:
-      "다음 주에 봉사활동을 진행하려고 하는데, 함께 참여할 사람을 찾습니다. 관심 있으신 분은 연락주세요!",
-    chat: 6,
-    like: 15,
-    scrap: 2,
-  },
-];
+import { useState, useEffect } from "react";
+import { fetchData } from "../../api/fetchData";
+import { CommunityData } from "../../types/Types";
 
 const MainCommunity = () => {
+  const [communityData, setCommunityData] = useState<CommunityData[]>([]);
   const navigate = useNavigate();
+
+  useEffect(() => {
+    const fetchCommunityData = async () => {
+      const data = await fetchData("/boards/posts/?sort_by=weekly_popular");
+      setCommunityData(data);
+    };
+
+    fetchCommunityData();
+  }, []);
+
   const goCommunity = () => {
     navigate("/community");
   };
+
+  const handleItemClick = (contentId: number) => {
+    navigate(`/community/${contentId}`);
+  };
+
+  const maskName = (name: string) => {
+    if (name.length <= 1) return name;
+    return name[0] + "**";
+  };
+
   return (
     <div>
       <div className="title">
@@ -77,7 +50,7 @@ const MainCommunity = () => {
         </p>
       </div>
       <div className="content">
-        {data.map((item, index) => (
+        {communityData.slice(0, 4).map((item, index) => (
           <div key={index} className="content-box">
             <div className="content-box-top">
               {index === 0 && <IconOne />}
@@ -86,27 +59,37 @@ const MainCommunity = () => {
               {index === 3 && <IconFour />}
               <div className="content-writer-info">
                 <div>
-                  <p>{item.writer}</p>
-                  <p>{item.date}</p>
+                  <p>{maskName(item.user_name)}</p>
+                  <p>
+                    {new Date(item.post_date).toLocaleString("ko-KR", {
+                      dateStyle: "medium",
+                      timeStyle: "short",
+                    })}
+                  </p>
                 </div>
-                <p>{item.school}</p>
+                <p>
+                  {item.school_name} {item.major_name}{" "}
+                  {String(item.admission_date).slice(-2)}학번
+                </p>
               </div>
             </div>
             <div className="content-middle">
-              <span className="category">{item.category}</span>
+              <span className="category">{item.category_name}</span>
               <h1>{item.title}</h1>
-              <p>{item.content}</p>
+              <p>{item.contents}</p>
             </div>
             <div className="content-box-bottom">
               <div className="content-numbers">
                 <ChatIcon stroke="#66BB6A" />
-                <p className="color-chat">{item.chat}</p>
+                <p className="color-chat">{item.comment}</p>
                 <LikeIcon stroke="#FF8181" />
                 <p className="color-like">{item.like}</p>
                 <ScrapIcon />
-                <p className="color-scrap">{item.scrap}</p>
+                <p className="color-scrap">{item.bookmark}</p>
               </div>
-              <button>자세히보기</button>
+              <button onClick={() => handleItemClick(item.id)}>
+                자세히보기
+              </button>
             </div>
           </div>
         ))}

src/components/main/MainStudy.tsx

@@ -1,57 +1,35 @@
-import { ReactComponent as CalendarIcon } from "../../assets/icon/calender.svg";
+// import { ReactComponent as CalendarIcon } from "../../assets/icon/calender.svg";
 import { ReactComponent as ChatIcon } from "../../assets/icon/chat-color.svg";
 import { ReactComponent as LikeIcon } from "../../assets/icon/like-color.svg";
 import "../../styles/main/MainStudy.scss";
-
-const studyData = [
-  {
-    school: "한양대학교 컴퓨터공학과 20학번",
-    title: "프론트엔드 개발 스터디 모집합니다!",
-    content:
-      "React 및 JavaScript를 공부하고 있는데 함께 공부할 스터디원을 모집합니다. 관심 있으신 분은 연락주세요!",
-    deadline: "24.05.21",
-    chat: 21,
-    like: 30,
-  },
-  {
-    school: "서울대학교 컴퓨터공학부 19학번",
-    title: "백엔드 개발 스터디 참여자 모집합니다!",
-    content:
-      "Java와 Spring을 중심으로 백엔드 개발을 공부하고 있는데 함께 공부할 스터디원을 찾습니다. 관심 있으신 분은 연락주세요!",
-    deadline: "24.05.25",
-    chat: 10,
-    like: 23,
-  },
-  {
-    school: "성균관대학교 컴퓨터공학과 20학번",
-    title: "데이터 분석 스터디 모집합니다!",
-    content:
-      "Python과 Pandas 등을 활용하여 데이터 분석을 공부하고 있습니다. 함께 공부할 스터디원을 모집합니다. 관심 있으신 분은 연락주세요!",
-    deadline: "24.05.28",
-    chat: 7,
-    like: 20,
-  },
-  {
-    school: "고려대학교 컴퓨터소프트웨어학부 20학번",
-    title: "알고리즘 스터디 참여자 구합니다!",
-    content:
-      "다양한 알고리즘 문제를 풀고 함께 공부할 스터디원을 찾습니다. 관심 있으신 분은 연락주세요!",
-    deadline: "24.05.20",
-    chat: 11,
-    like: 15,
-  },
-  {
-    school: "경희대학교 컴퓨터공학과 20학번",
-    title: "인공지능 스터디 참여자 모집합니다!",
-    content:
-      "머신러닝 및 딥러닝을 공부하고 있는데 함께 공부할 스터디원을 모집합니다. 관심 있으신 분은 연락주세요!",
-    deadline: "24.05.31",
-    chat: 7,
-    like: 10,
-  },
-];
+import { useNavigate } from "react-router-dom";
+import { useState, useEffect } from "react";
+import { fetchData } from "../../api/fetchData";
+import { StudyData } from "../../types/Types";
 
 const MainStudy = () => {
+  const [studyData, setStudyData] = useState<StudyData[]>([]);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const fetchStudyData = async () => {
+      const data = await fetchData("/studys/posts/?sort_by=weekly_popular");
+      setStudyData(data);
+    };
+
+    fetchStudyData();
+  }, []);
+
+  const handleItemClick = (studyId: number) => {
+    navigate(`/study/${studyId}`);
+  };
+
+  const stripHtmlTags = (htmlString: string) => {
+    const tempDiv = document.createElement("div");
+    tempDiv.innerHTML = htmlString;
+    return tempDiv.textContent || tempDiv.innerText || "";
+  };
+
   return (
     <div>
       <div className="title">
@@ -66,24 +44,30 @@ const MainStudy = () => {
                   src={require("../../assets/img/dku-logo.png")}
                   alt="logo"
                 />
-                <p>{item.school}</p>
+                <p>
+                  {item.school_name} {item.major_name}{" "}
+                  {String(item.admission_date).slice(-2)}학번
+                </p>
               </div>
-              <p>
+              <p
+                onClick={() => handleItemClick(item.id)}
+                style={{ cursor: "pointer" }}
+              >
                 자세히보기 <span>&gt;</span>
               </p>
             </div>
             <div className="study-middle">
               <h1>{item.title}</h1>
-              <p>{item.content}</p>
+              <p>{stripHtmlTags(item.contents)}</p>
             </div>
             <div className="study-bottom">
               <div className="study-deadline">
-                <CalendarIcon />
-                <p>~{item.deadline}</p>
+                {/* <CalendarIcon />
+                <p></p> */}
               </div>
               <div className="study-numbers">
                 <ChatIcon stroke="#1B1C3A" />
-                <p>{item.chat}</p>
+                <p>{item.comment}</p>
                 <LikeIcon stroke="#1B1C3A" />
                 <p>{item.like}</p>
               </div>