From c49210af891353adf1da66752ab9fb40f28b584f Mon Sep 17 00:00:00 2001 From: JangGusWjd Date: Sat, 15 Jun 2024 00:39:38 +0900 Subject: [PATCH 1/6] =?UTF-8?q?Fix=20:=20=EC=BB=A4=EB=AE=A4=EB=8B=88?= =?UTF-8?q?=ED=8B=B0=20=EA=B8=80=EC=93=B0=EA=B8=B0=20url=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/community/CommunityMain.tsx | 10 ++-- src/components/community/CommunityWrite.tsx | 10 ++-- src/pages/community/CommunityApp.tsx | 61 ++++++++++----------- 3 files changed, 41 insertions(+), 40 deletions(-) diff --git a/src/components/community/CommunityMain.tsx b/src/components/community/CommunityMain.tsx index 82a839d..7c1f199 100644 --- a/src/components/community/CommunityMain.tsx +++ b/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([]); const [searchKeyword, setSearchKeyword] = useState(""); @@ -52,6 +50,10 @@ const CommunityMain: React.FC<{ onWriteButtonClick: () => void }> = ({ navigate(`/community/${contentId}`); }; + const handleWriteClick = () => { + navigate("/community/write"); + }; + return (
@@ -102,7 +104,7 @@ const CommunityMain: React.FC<{ onWriteButtonClick: () => void }> = ({ 우리학교는 - diff --git a/src/components/community/CommunityWrite.tsx b/src/components/community/CommunityWrite.tsx index e1be72c..d898b62 100644 --- a/src/components/community/CommunityWrite.tsx +++ b/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({ title: "", contents: "", @@ -54,6 +52,10 @@ const CommunityWrite: React.FC<{ onBackToMain: () => void }> = ({ } }; + const handleBackClick = () => { + navigate("/community"); + }; + return (

✏️ 커뮤니티 글 작성

@@ -104,7 +106,7 @@ const CommunityWrite: React.FC<{ onBackToMain: () => void }> = ({
- +
diff --git a/src/pages/community/CommunityApp.tsx b/src/pages/community/CommunityApp.tsx index 2d21c34..c7e7424 100644 --- a/src/pages/community/CommunityApp.tsx +++ b/src/pages/community/CommunityApp.tsx @@ -3,7 +3,6 @@ import CommunityWrite from "../../components/community/CommunityWrite"; import PopularCommunity from "../../components/community/PopularCommunity"; import CommunityDetail from "../../components/community/CommunityDetail"; import styled from "styled-components"; -import { useState } from "react"; import { Routes, Route } from "react-router-dom"; const CommunityContainer = styled.div` @@ -15,38 +14,36 @@ const CommunityContainer = styled.div` `; const CommunityApp = () => { - const [isWriting, setIsWriting] = useState(false); - - const handleWriteButtonClick = () => { - setIsWriting(true); - }; - - const handleBackToMain = () => { - setIsWriting(false); - }; return ( - - {isWriting ? ( - <> - - - - ) : ( - <> - - - } - /> - } /> - - {/* */} - - - )} - + + + + + + } + /> + + + + + } + /> + + + + + } + /> + ); }; From 31d4b20894f3610ea8b6a0d67b00bd4fe328d6f9 Mon Sep 17 00:00:00 2001 From: JangGusWjd Date: Sat, 15 Jun 2024 00:40:30 +0900 Subject: [PATCH 2/6] =?UTF-8?q?Update=20:=20=EC=9D=B8=EA=B8=B0=EA=B8=80=20?= =?UTF-8?q?api=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/community/PopularCommunity.tsx | 51 ++++----- src/components/main/MainCommunity.tsx | 103 ++++++++---------- 2 files changed, 69 insertions(+), 85 deletions(-) diff --git a/src/components/community/PopularCommunity.tsx b/src/components/community/PopularCommunity.tsx index 2975891..0c911b9 100644 --- a/src/components/community/PopularCommunity.tsx +++ b/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([]); + 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 (

🔥 주간 인기 게시글

    - {data.map((item, index) => ( -
  • + {communityData.map((item, index) => ( +
  • handleItemClick(item.id)}>

    {item.title}

    logo -

    {item.writer}

    +

    + {item.school_name} {item.major_name}{" "} + {String(item.admission_date).slice(-2)}학번 +

    • ))} diff --git a/src/components/main/MainCommunity.tsx b/src/components/main/MainCommunity.tsx index ef044d4..7a5ff27 100644 --- a/src/components/main/MainCommunity.tsx +++ b/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([]); 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 (
    @@ -77,7 +50,7 @@ const MainCommunity = () => {

    - {data.map((item, index) => ( + {communityData.slice(0, 4).map((item, index) => (
    {index === 0 && } @@ -86,27 +59,37 @@ const MainCommunity = () => { {index === 3 && }
    -

    {item.writer}

    -

    {item.date}

    +

    {maskName(item.user_name)}

    +

    + {new Date(item.post_date).toLocaleString("ko-KR", { + dateStyle: "medium", + timeStyle: "short", + })} +

    -

    {item.school}

    +

    + {item.school_name} {item.major_name}{" "} + {String(item.admission_date).slice(-2)}학번 +

    - {item.category} + {item.category_name}

    {item.title}

    -

    {item.content}

    +

    {item.contents}

    -

    {item.chat}

    +

    {item.comment}

    {item.like}

    -

    {item.scrap}

    +

    {item.bookmark}

    - +
    ))} From 7091d8b8bbcf16aa51994777a5d40a06ad9e8826 Mon Sep 17 00:00:00 2001 From: JangGusWjd Date: Sat, 15 Jun 2024 00:41:12 +0900 Subject: [PATCH 3/6] =?UTF-8?q?Update=20:=20=EC=8A=A4=ED=84=B0=EB=94=94=20?= =?UTF-8?q?=EC=9D=B8=EA=B8=B0=EA=B8=80=20api=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/main/MainStudy.tsx | 94 +++++++++++---------------- src/components/study/PopularStudy.tsx | 51 +++++++-------- src/components/study/StudyList.tsx | 29 ++++++--- 3 files changed, 84 insertions(+), 90 deletions(-) diff --git a/src/components/main/MainStudy.tsx b/src/components/main/MainStudy.tsx index 2c1314c..24a3358 100644 --- a/src/components/main/MainStudy.tsx +++ b/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([]); + 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 (
    @@ -66,24 +44,30 @@ const MainStudy = () => { src={require("../../assets/img/dku-logo.png")} alt="logo" /> -

    {item.school}

    +

    + {item.school_name} {item.major_name}{" "} + {String(item.admission_date).slice(-2)}학번 +

    -

    +

    handleItemClick(item.id)} + style={{ cursor: "pointer" }} + > 자세히보기 >

    {item.title}

    -

    {item.content}

    +

    {stripHtmlTags(item.contents)}

    - -

    ~{item.deadline}

    + {/* +

    */}
    -

    {item.chat}

    +

    {item.comment}

    {item.like}

    diff --git a/src/components/study/PopularStudy.tsx b/src/components/study/PopularStudy.tsx index ca88b3e..f7529c7 100644 --- a/src/components/study/PopularStudy.tsx +++ b/src/components/study/PopularStudy.tsx @@ -1,39 +1,38 @@ import "../../styles/study/PopularStudy.scss"; - -const data = [ - { - title: "리액트 JS, 타입스크립트 스터디 모집", - writer: "단국대학교 소프트웨어학과 20학번", - }, - { - title: "웹 개발 스터디 모집합니다!", - writer: "서울대학교 컴퓨터공학과 19학번", - }, - { - title: "자료구조 알고리즘 스터디 참여자 모집", - writer: "한양대학교 정보통신공학과 21학번", - }, - { - title: "파이썬 기초부터 공부해요!", - writer: "성균관대학교 컴퓨터공학과 22학번", - }, - { - title: "자바 개발자 모집합니다!", - writer: "연세대학교 소프트웨어학과 18학번", - }, -]; +import { useNavigate } from "react-router-dom"; +import { useState, useEffect } from "react"; +import { fetchData } from "../../api/fetchData"; +import { StudyData } from "../../types/Types"; const PopularStudy = () => { + const [studyData, setStudyData] = useState([]); + 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}`); + }; return (

    🔥 주간 인기 스터디

      - {data.map((item, index) => ( -
    • + {studyData.map((item, index) => ( +
    • handleItemClick(item.id)}>

      {item.title}

      logo -

      {item.writer}

      +

      + {item.school_name} {item.major_name}{" "} + {String(item.admission_date).slice(-2)}학번 +

      • ))} diff --git a/src/components/study/StudyList.tsx b/src/components/study/StudyList.tsx index 03038e3..be82a12 100644 --- a/src/components/study/StudyList.tsx +++ b/src/components/study/StudyList.tsx @@ -4,7 +4,6 @@ import { ReactComponent as LikeIcon } from "../../assets/icon/like-color.svg"; import "../../styles/study/StudyList.scss"; import { useState, useEffect } from "react"; import { useNavigate } from "react-router-dom"; -// import data, { StudyData } from "../../data/StudyData"; import { fetchData } from "../../api/fetchData"; import { StudyData } from "../../types/Types"; @@ -18,21 +17,34 @@ const StudyList: React.FC = ({ searchText, }) => { const [studyData, setStudyData] = useState([]); + const [selectedFilter2, setSelectedFilter2] = useState("recent"); useEffect(() => { const fetchStudyData = async () => { let endpoint = "/studys/posts/"; if (searchText.trim() !== "") { endpoint = `/studys/posts/search/?hashtag=${searchText}&keyword=${searchText}`; + } else { + switch (selectedFilter2) { + case "like": + endpoint = "/studys/posts/?sort_by=likes"; + break; + case "comment": + endpoint = "/studys/posts/?sort_by=comments"; + break; + case "recent": + default: + endpoint = "/studys/posts/?sort_by=latest"; + break; + } } + const data = await fetchData(endpoint); - if (data) { - setStudyData(data.sort((a: any, b: any) => b.id - a.id)); - } + setStudyData(data); }; fetchStudyData(); - }, [searchText]); + }, [searchText, selectedFilter2]); const filteredStudyData: StudyData[] = studyData.filter( (item) => @@ -41,7 +53,6 @@ const StudyList: React.FC = ({ (selectedFilter === "recruited" && item.is_recruited === true) ); - const [selectedFilter2, setSelectedFilter2] = useState("recent"); const handleFilterChange = (filter: any) => { setSelectedFilter2(filter); }; @@ -79,10 +90,10 @@ const StudyList: React.FC = ({ 좋아요순
    • handleFilterChange("popular")} + className={selectedFilter2 === "comment" ? "selected" : ""} + onClick={() => handleFilterChange("comment")} > - 인기순 + 댓글많은순