Merge pull request #28 from KUSITMS-27-chilling/feat/add-center-news-…

…api/hyewon

feat: 관심센터 새소식 api 연결 및 커뮤니티 탭바 오류 수정

src/components/CenterNews/CenterNews.tsx

@@ -10,13 +10,15 @@ import {
   LearningGroundText,
   CenterNewsOut
 } from './CenterNews.styled';
-import { LGDataArr } from '../../types/centerNews';
-import { useState } from 'react';
+import { LGData, LGProgram } from '../../types/centerNews';
+import { useEffect, useState } from 'react';
 import { loginState } from '../../recoil/user';
 import { useRecoilValue } from 'recoil';
+import axios from 'axios';
 
-function CenterNews({ lgData }: LGDataArr) {
-  const [programs, setPrograms] = useState(lgData[0].programs);
+function CenterNews() {
+  const [lgData, setLgData] = useState<LGData[]>([]);
+  const [programs, setPrograms] = useState<LGProgram[]>([]);
   const state = useRecoilValue(loginState);
 
   function regionClick(e: React.MouseEvent<HTMLButtonElement>) {
@@ -37,6 +39,58 @@ function CenterNews({ lgData }: LGDataArr) {
     })
   }
 
+  async function getMyRegions(token: string) {
+    if(token !== null) {
+      await axios.get(`${import.meta.env.VITE_APP_HOST}/user/regions`, {
+        headers: {
+          Authorization: `Bearer ${token}`
+        }
+      }).then((res) => {
+        getCenterNews(res.data.data.regions);
+      })
+      .catch((err) => console.log(err));
+    }
+  }
+
+  async function getCenterNews(regions: string[]) {
+    const tempArr: LGData[] = await Promise.all(
+      regions.map(async (el) => {
+        const response = await axios.get(`${import.meta.env.VITE_APP_HOST}/program/new/${el}`);
+        const res = response.data.data.newPrograms;
+        const tempPrograms: LGProgram[] = [];
+        for (let key in res) {
+          const tempProgram: LGProgram = {
+            programTitle: res[key].programName,
+            programPeriod: dateToStr(res[key].startDate, res[key].endDate)
+          }
+          tempPrograms.push(tempProgram);
+        }
+        return {
+          region: el.slice(0, -1),
+          programs: tempPrograms
+        };
+      })
+    );
+    setPrograms(tempArr[0].programs);
+    setLgData(tempArr);
+  }
+
+
+  function dateToStr(start: string, end: string) {
+    let str = '';
+    let dateParts = start.split('-');
+    str = `${dateParts[0]}. ${dateParts[1]}. ${dateParts[2]} ~ `;
+    dateParts = end.split('-');
+    str += `${dateParts[0]}. ${dateParts[1]}. ${dateParts[2]}`;
+    return str;
+  }
+
+  useEffect(() => {
+    setLgData([]);
+    const token = localStorage.getItem('access_token');
+    if(token !== null) getMyRegions(token);
+  }, [state])
+
   return(
     <CenterNewsContainer>
       <CenterNewsHeader>
@@ -54,7 +108,7 @@ function CenterNews({ lgData }: LGDataArr) {
         <>
           <RegionContainer>
           {
-            lgData &&
+            (lgData.length > 0) &&
             lgData.map((el, idx) => {
               if(idx == 0){
                 return (
@@ -75,7 +129,7 @@ function CenterNews({ lgData }: LGDataArr) {
           </LearningGroundHeader>
           <LearningGroundList>
             {
-              lgData &&
+              (lgData.length > 0) &&
               programs.map((el, idx) => (
                 <LearningGroundProgram key={idx}>
                   <LearningGroundText>{el.programTitle}</LearningGroundText>

src/components/Commu/CommuTab/CommuTab.tsx

@@ -5,16 +5,19 @@ import {
 import { commuTabKind } from "../../../recoil/community";
 import { useSetRecoilState } from "recoil";
 import { useEffect } from "react";
-import { Navigate ,useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
+import { CommuTabType } from "../../../types/communityTab";
 
-function CommuTab(props: any) {
+function CommuTab({ thisCommu }: { thisCommu: CommuTabType }) {
   const setCommuTab = useSetRecoilState(commuTabKind);
-  useEffect(() => {
-    setCommuTab('review');
-  },[])
-
   const navigate = useNavigate();
 
+  useEffect(() => {
+    setCommuTab(thisCommu);
+    const el = document.getElementById(`community-tab__${thisCommu}`);
+    el?.click();
+  }, []);
+
   function btnClick(e: React.MouseEvent<HTMLDivElement>) {
     const tabArr = document.querySelectorAll('.community-tab__btn');
     tabArr.forEach((el) => {
@@ -35,7 +38,7 @@ function CommuTab(props: any) {
       return;
     }
 
-    if(e.currentTarget.id == 'community-tab__free-board') {
+    if(e.currentTarget.id == 'community-tab__freeBoard') {
       navigate('/commu');
       setCommuTab('freeBoard');
       return;
@@ -45,12 +48,12 @@ function CommuTab(props: any) {
   return(
     <CommuTabContainer>
       <CommuTabBtn id="community-tab__review"
-        className="community-tab__btn active" 
+        className="community-tab__btn" 
         onClick={e => btnClick(e)}>수강 후기</CommuTabBtn>
       <CommuTabBtn id="community-tab__together"
         className="community-tab__btn" 
         onClick={e => btnClick(e)}>같이 듣기</CommuTabBtn>
-      <CommuTabBtn id="community-tab__free-board"
+      <CommuTabBtn id="community-tab__freeBoard"
         className="community-tab__btn" 
         onClick={e => btnClick(e)}>자유게시판</CommuTabBtn>
     </CommuTabContainer>

src/components/DetailContent/DetailContent.tsx

@@ -35,7 +35,9 @@ function DetailContent() {
             goalNum: response[key].goalNum,
             currentNum: response[key].currentNum,
             tags: response[key].tags,
-            programName: response[key].programName
+            listenIdx: response[key].listenIdx,
+            programName: response[key].programName,
+            detailOrCommu: 'detail'
           }
 
           setTogetherArr(togetherArr => [object, ...togetherArr]);
@@ -51,6 +53,7 @@ function DetailContent() {
         const response = res.data.data.reviews;
         for(let key in response) {
           const object: ReviewData = {
+            userImg: response[key].profile,
             userNick: response[key].nickName,
             time: '18시간 전',
             title: response[key].title,

src/components/Review/Review.tsx

@@ -18,7 +18,7 @@ function Review({ props }: ReviewProps) {
   const [viewContent, setViewContent] = useState('');
   const [overLength, setOverLength] = useState(false);
   const { userImg, userNick, time, title, lecture, content, region, detailPlace, reviewImg, reviewIdx, detailOrCommu } = props;
-
+  
   function countImg() {
     if(reviewImg && (reviewImg?.length > 0)) {
       setCount(reviewImg.length);

src/components/ReviewDetail/ReviewDetail.tsx

@@ -59,48 +59,47 @@ function ReviewDetail({ reviewIdx }: { reviewIdx: number }) {
     fetchData();
 },  [reviewIdx]);
 
-console.log(data);
 
   return (
     <div>
       <CardForm>
         {
           data && (
             <>
-                    <CardTop>
-        <div className='profile'></div>
-            <div className='right'>
-                <div className='user-title'>
-                    <div className='user-name'>{data.nickName}</div>
-                    <div className='user-grade'></div>
+              <CardTop>
+                <div className='profile'></div>
+                <div className='right'>
+                    <div className='user-title'>
+                        <div className='user-name'>{data.nickName}</div>
+                        <div className='user-grade'></div>
+                    </div>
+                    <div className='tag-day'>
+                        <div className='tag-category-box'>
+                        {data.favFields.map((favField, idx) => (
+                        <div className="tag-category" key={idx}>#{favField}</div>
+                      ))}
+                        {/* <div className='tag-category'>#{data.favFields[0]}</div>
+                        <div className='tag-category'>#{data.favFields[1]}</div> */}
+                    </div>
+                        <div className='day'>{data.createdAt}</div>
+                    </div>
                 </div>
-                <div className='tag-day'>
-                    <div className='tag-category-box'>
-                    {data.favFields.map((favField) => (
-                    <div className="tag-category">#{favField}</div>
-                  ))}
-                    {/* <div className='tag-category'>#{data.favFields[0]}</div>
-                    <div className='tag-category'>#{data.favFields[1]}</div> */}
-                </div>
-                    <div className='day'>{data.createdAt}</div>
-                </div>
-            </div>
-        </CardTop>
-        <Line></Line>
-        <CardTitle>
-            <div className='content-title'>{data.title}</div>
-            <div className='content-classname'>{data.programName}</div>
-        </CardTitle>
-        <CardContent>
-            <div className='img'>{data.image}</div>
-            <div className='content-tag'>
-                <div className='content'>{data.content}</div>
-                <div className='tag'>
-                    <div className='tag-region'>#{data.tags[0]}</div>
-                    <div className='tag-center'>#{data.tags[1]}</div>
-                </div>
-            </div>
-        </CardContent>
+              </CardTop>
+              <Line></Line>
+              <CardTitle>
+                  <div className='content-title'>{data.title}</div>
+                  <div className='content-classname'>{data.programName}</div>
+              </CardTitle>
+              <CardContent>
+                  <div className='img'>{data.image}</div>
+                  <div className='content-tag'>
+                      <div className='content'>{data.content}</div>
+                      <div className='tag'>
+                          <div className='tag-region'>#{data.tags[0]}</div>
+                          <div className='tag-center'>#{data.tags[1]}</div>
+                      </div>
+                  </div>
+              </CardContent>
             </>
           )
         }

src/components/TogetherDetail/TogetherDetail.tsx

@@ -72,7 +72,6 @@ function TogetherDetail({ listenIdx }: { listenIdx: number }) {
                     `${import.meta.env.VITE_APP_HOST}/listen/${listenIdx}`
                 );
                 setData(response.data.data);
-                console.log(data);
             } catch (e) {
                 console.log(e);
             }
@@ -94,8 +93,8 @@ function TogetherDetail({ listenIdx }: { listenIdx: number }) {
                 </div>
                 <div className='tag-day'>
                     <div className='tag-category-box'>
-                    {data.favField.map((favFields) => (
-                    <div className="tag-category">#{favFields}</div>
+                    {data.favField.map((favFields, idx) => (
+                    <div className="tag-category" key={idx}>#{favFields}</div>
                   ))}
                     {/* <div className='tag-category'>#{data.favField[0]}</div>
                     <div className='tag-category'>#{data.favField[1]}</div> */}

src/pages/Commu/CommunityPage.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import Review from '../../components/Review'
 import { 
   MainBanner
 } from "./CommunityPage.styled"
@@ -9,19 +8,20 @@ import CommuTab from '../../components/Commu/CommuTab';
 import CommuHeader from '../../components/Commu/CommuHeader';
 import CommuList from '../../components/Commu/CommuList';
 import { Category } from '../../types/tabCategory';
-import { detailOrCommu } from '../../types/review';
+import { commuTabKind } from '../../recoil/community';
+import { useRecoilValue } from 'recoil';
 
 function CommunityPage() {
-  const commu: detailOrCommu = 'community';
   const category: Category = 'community';
+  const commuTab = useRecoilValue(commuTabKind);
 
   return (
     <div>
       <>
       <Header/>
       <TabBar prop={category} />
       <MainBanner />
-      <CommuTab />
+      <CommuTab thisCommu={commuTab} />
       <CommuHeader />
       <CommuList />
       </>

src/pages/Main/MainPage.tsx

@@ -97,68 +97,14 @@ function MainPage() {
     else getPrograms();
   }, [state])
 
-
-  const lgData: LGData[] = [
-    {
-      region: '종로',
-      programs: [
-        {
-          programTitle: '보태니컬 동양화 배우기',
-          programPeriod: '2023. 04. 01 ~ 2023. 05. 21'
-        },
-        {
-          programTitle: '명화 서양화 배우기',
-          programPeriod: '2023. 04. 01 ~ 2023. 05. 21'
-        },    
-        {
-          programTitle: '보태니컬 동양화 배우기',
-          programPeriod: '2023. 04. 01 ~ 2023. 05. 21'
-        },    
-        {
-          programTitle: '명화 서양화 배우기',
-          programPeriod: '2023. 04. 01 ~ 2023. 05. 21'
-        },    
-        {
-          programTitle: '보태니컬 동양화 배우기',
-          programPeriod: '2023. 04. 01 ~ 2023. 05. 21'
-        }
-      ]
-    },
-    {
-      region: '성북',
-      programs: [
-        {
-          programTitle: '명화 서양화 배우기',
-          programPeriod: '2023. 04. 01 ~ 2023. 05. 21'
-        },
-        {
-          programTitle: '보태니컬 동양화 배우기',
-          programPeriod: '2023. 04. 01 ~ 2023. 05. 21'
-        },    
-        {
-          programTitle: '명화 서양화 배우기',
-          programPeriod: '2023. 04. 01 ~ 2023. 05. 21'
-        },    
-        {
-          programTitle: '보태니컬 동양화 배우기',
-          programPeriod: '2023. 04. 01 ~ 2023. 05. 21'
-        },    
-        {
-          programTitle: '명화 서양화 배우기',
-          programPeriod: '2023. 04. 01 ~ 2023. 05. 21'
-        }
-      ]
-    }
-  ]
-
     return (
       <>
         <Header />
         <MainBanner />
         <MainBody_Today> 
 
           <MainBody_Today_In>
-            <CenterNews lgData={lgData} />
+            <CenterNews />
             <TodayMy />
           </MainBody_Today_In>
 

src/pages/ReviwDetail/RevieDetailPage.tsx

@@ -14,14 +14,13 @@ import{
 
 const RevieDetailPage =() => {
     const { reviewIdx } = useParams();
-    console.log(reviewIdx);
     const category: Category = 'community';
   return (
     <div>
       <Header/>
       <TabBar prop={category} />
       <MainBanner />
-      <CommuTab />
+      <CommuTab thisCommu='review' />
       <ReviewDetailBox>
         <ReviewDetail reviewIdx ={Number(reviewIdx)}/>
       </ReviewDetailBox>