오전 회의 내용

메인페이지

배너 바로 옆에는 책에 대해서 포커싱(책소개)
배너 (자동 스와이프) 부분에서 우리가 아래에 보여주는 컨텐츠들을 축약해서
사진 하나씩 보여주도록 하기 EX) 도서소개 관련 사진 하나 / 커뮤니티 관련 사진 하나
(이 부분은 나중에 좀 더 회의로 다룰 예정)
정렬은 가운데 정렬로 가되 스타일은 롱블랙 사이트를 참고하는 걸로
메인 베너 옆에 도서소개가 있는데 아래쪽에 도서관련 내용을 한번 더 보여줘도 투머치는 아닐듯

로그인페이지

사진 컨셉은 2번 레퍼런스로 진행(명화)
회원가입에서도 소셜 로그인 삽입(로그인 페이지에도 소셜 로그인 있음)

마이페이지

회원 정보 탭 삭제 -> 프로필 변경은 수정하기 버튼을 눌렀을 때 변경 가능하도록
탭에 들어갈 내용 내가쓴 글 / 팔로잉 / 좋아요 / 문의내역(고객센터)

북커톡

장르 / 자유수다 / 도서추천
장르 버튼 눌렀을 때 아래에 장르 카테고리 세부적으로 뜨게
카테고리
도서추천
장르별
자유수다
장르별
글쓰기 버튼 추가
배치는 일단 카테고리를 다 보여주고 , 나중에 대분류 개수가 많아지면 다시 회의 나눠보는 걸로!

도서소개 페이지

일단 구현 해보고 나중에 다시 얘기

설문조사 페이지

일단 구현 해보고 나중에 다시 얘기

회원등급

아이디어 구상중

메인 / 검색 파트 책임자 나중에 정하기

============================================================

저녁 회의 내용

각자 필수 구현 파트가 오늘까지였는데 무사히 완료하여서 짧게 진행(짧은 휴가)

오늘 한 일(+고민한 내용)

설문조사 페이지를 구현하면서 질문내용이 담겨져있는 컴포넌트 / 그 결과에 따른 책을 추천해주는 컴포넌트를 구분짓고, 어떤 결과값을 선택하냐에 따라 수많은 책을 추천해주는 컴포넌트를 구현했어야만 했다. 그럴 시에 내가 혼자 수많은 컴포넌트를 만들어야해서 말이 안된다 생각하였고, params를 이용해서 결과값이 나오는 컴포넌트를 1개로 줄일 수 있었다.

import { useNavigate } from 'react-router-dom';

const BestSellerCheapSurvey = () => {
  const navigate = useNavigate();

  const answerClickHandler = (genre: string) => {
    if (genre === '소설') {
      navigate(`/bestSellerCheapSurvey2`);
    } else {
      navigate(`/bestSellerCheap/${genre}`);
    }
  };
  return (
    <div>
      <h2>어떤 장르의 책을 읽고 싶나요??</h2>
      <button onClick={() => answerClickHandler('인문학')}>인문학</button>
      <button onClick={() => answerClickHandler('자기계발')}>자기계발</button>
      <button onClick={() => answerClickHandler('소설')}>소설</button>
      <button onClick={() => answerClickHandler('만화')}>만화</button>
      <button onClick={() => answerClickHandler('경제경영')}>경제경영</button>
      <button onClick={() => answerClickHandler('한국시')}>한국시</button>
    </div>
  );
};

export default BestSellerCheapSurvey;

이런 식으로 버튼을 통해 결과값을 책 추천해주는 컴포넌트에 전달해줘야하는데 어떻게 할지 고민하다가

import axios from 'axios';
import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';

type Bestseller = {
  bestRank: number;
  title: string;
  author: string;
  cover: string;
  pubDate: string;
  description: string;
  categoryName: string;
  priceStandard: number;
};

const BestSellerCheap = () => {
  const [bestsellers, setBestsellers] = useState<Bestseller[]>([]);
  const [filteredBooks, setFilteredBooks] = useState<Bestseller[]>([]);
  const { genre } = useParams<{ genre?: string }>();

  useEffect(() => {
    fetchData();
  }, [genre]);
  console.log(genre);
  const fetchData = async () => {
    try {
      const result = await axios.get('http://localhost:8080/bestseller');
      setBestsellers(result.data.item);
    } catch (error) {
      console.log('Error fetching data:', error);
    }
  };

  useEffect(() => {
    filterBooksByGenre();
  }, [bestsellers, genre]);

  const filterBooksByGenre = () => {
    if (genre && genre !== 'all') {
      const filtered = bestsellers.filter((book) => book.categoryName.includes(genre));
      setFilteredBooks(filtered);
    } else {
      setFilteredBooks(bestsellers);
    }
  };

  return (
    <div>
      {filteredBooks.map((item, idx) => (
        <div key={idx}>
          <h2>{item.bestRank}</h2>
          <h3>{item.title}</h3>
          <h3>{item.author}</h3>
          <h3>{item.pubDate}</h3>
          <h3>{item.description}</h3>
          <img src={item.cover} alt="book img" />
        </div>
      ))}
    </div>
  );
};

export default BestSellerCheap;

이렇게 useParams를 사용해서 가져온 genre를 filter하는데 써서 딱 원하는 책만 추천하게 구현을 할 수 있게 되었다.
단 여기서 추가적인 고민이 생겼었는데,
질문에 질문을 더해서 여러번 필터를 거른 결과값을 출력해야하는 문제가 있었다.
여기서도 다행히 단순하게 접근했는데,
질문하는 컴포넌트 자체를 2개를 만들고, 첫번째 질문을 하면 navigate를 활용해서 2번째 질문 컴포넌트로 이동시켜서, 두번째 질문을 선택하게 하고, 두번째 질문 컴포넌트에서 질문이 끝난다면 최종적으로 결과값나오는 컴포넌트로 navigate로 이동시켜서 거기서 필터를 잘 해주는 방법인 것이다.

다행히 필수 기능 구현은 가능해서, 짧은 휴식을 거치고 팔로우 기능.. 열심히 다뤄보도록 하겠다 아자아자!!