application 설정

마이페이지 나의 과목 조회

공지사항, 구독 api 제작하기!

import { useEffect, useState } from 'react';
import NoticeList from './NoticeList';
import * as styles from './TopTab.styles';
import SearchBar from './anouncement/SearchBar'
import ButtonGroup from './anouncement/SelectButton';
import { getFunSystemAPIwithCategory, getNoticeAPIwithCategory } from '@/apis/noticeAPIS';
import { NoticeItemProps } from './NoticeItem';

const TopTab = () => {
  
  const [noticeData, setNoticeData] = useState<NoticeItemProps[]>([]);
  const [funSystemData, setFunSystemData] = useState<NoticeItemProps[]>([]);
  const [index, setIndex] = useState(0);
  const [category, setCategory] = useState("ALL");

  const [page, setPage] = useState(0);
  const [fetching, setFetching] = useState(false); //데이터 받아오는 중인지 표시 

  const fetchNoticeData = async (searchText?: String, nowCategory?:String) => {
    try{
      if(page == 0){
        setNoticeData([]);
      }
      setFetching(true);
      if(nowCategory){
        const noticeData = await getNoticeAPIwithCategory(searchText, nowCategory,page);
        if(noticeData){
          setNoticeData((prev)=>[...prev,...noticeData.data.content]);
        }else{
          console.error('공지사항 데이터를 불러오는 중 오류 발생:', noticeData.message);
        }
      }else{ 
        const noticeData = await getNoticeAPIwithCategory(searchText,category,page);
        if(noticeData){
          setNoticeData((prev)=>[...prev,...noticeData.data.content]);
        }else{
          console.error('공지사항 데이터를 불러오는 중 오류 발생:', noticeData.message);
        }
      }
      setPage(page+1);
      setFetching(false);
    }catch(error){
      console.error('공지사항 데이터를 불러오는 중 오류 발생:', error);
    }
  };

  const fetchFunSystemData = async (searchText?: String, nowCategory?:String) => {
    try{
      if(page == 0){
        setFunSystemData([]);
      }
      setFetching(true);
      if(nowCategory){
        const funSystemData = await getFunSystemAPIwithCategory(searchText, nowCategory,page);
        if(funSystemData){
          setFunSystemData((prev)=>[...prev,...funSystemData.data.content]);
        }else{
          console.error('펀시스템 데이터를 불러오는 중 오류 발생:', funSystemData.message);
        }
      }else{ 
        const funSystemData = await getFunSystemAPIwithCategory(searchText,category,page);
        if(funSystemData){
          setFunSystemData((prev)=>[...prev,...funSystemData.data.content]);
        }else{
          console.error('펀시스템 데이터를 불러오는 중 오류 발생:', funSystemData.message);
        }
      }
      setPage(page+1);
      setFetching(false);
    }catch(error){
      console.error('펀시스템 데이터를 불러오는 중 오류 발생:', error);
    }
  };

  useEffect(()=>{
    window.addEventListener("scroll",handleScroll);
    
    fetchNoticeData();
    fetchFunSystemData();

    return() =>{
      window.removeEventListener("scroll",handleScroll);
    }
  }, []);
  
  const handleScroll = () => {
    const scrollHeight = document.documentElement.scrollHeight;
    const scrollTop = document.documentElement.scrollTop;
    const clientHeight = document.documentElement.clientHeight;
    if (scrollTop + clientHeight >= scrollHeight - 300 && !fetching) {
      index ? fetchFunSystemData("",category):fetchNoticeData("",category);
    }
   };

  const handleSearch = (searchText : String) =>{
    setPage(0);
    index ? fetchFunSystemData(searchText):fetchNoticeData(searchText);
  }
  const handleCategoryButton = (category :string) =>{
    setPage(0);
    index ? fetchFunSystemData("",category):fetchNoticeData("",category);
  }

  const selectMenuHandler = (n: number) => {
    setPage(0);
    setIndex(n);
    n ? fetchFunSystemData("","ALL"):fetchNoticeData("","ALL");
    setCategory("ALL");
    

  };

  return (
    <styles.TabContentBox>
      <styles.Rectangle242>
        {["공지사항", "펀시스템"].map((title, idx) => (
          <styles.TabFontBox
            key={idx}
            isSelected={idx === index}
            onClick={() => selectMenuHandler(idx)}
          >
            {title}
          </styles.TabFontBox>
        ))}
      </styles.Rectangle242>
      <SearchBar onSearch={handleSearch}/>
      <ButtonGroup index = {index} category={handleCategoryButton}/>

      {index === 0 ? (
        <NoticeList items={noticeData}/>
      ) : (
        <NoticeList items={funSystemData} />
      )}
      
    </styles.TabContentBox>
  );
};

export default TopTab;

만드는 법

과목 조회에 필요한 Entity, Repository 작성 과목 조회 후 응답할 Response 작성 Controller, Service 수정 테스트 데이터 밀어넣는 동작 작업 test.sql만 편집하면 데이터 생성, 추가, 삭제 등 초기 세팅 가능 통합 및 유닛 테스트용 Annotation 작성 통합 및 유닛 테스트 작성

dev_daitssu 로 진행!!!

89. [PostgreSQL] PostgreSQL 설치 및 사용 방법 정리 (리눅스 기준)

postgresql 접속법

인프라 정보 (1)

db 서버? 리스트

daitssu 로 이동