카테고리별 게시글 표현

카테고리 더미 생성

GENERAL_CONCERNS("일반고민") 12,
    CAREER_JOBS("취업/진로") 2,
    WORK_LIFE("직장") 3,
    RELATIONSHIPS("연애")1,
    SOCIAL_INTERACTIONS("대인관계")2,
    ADDICTION_OBSESSION("중독/집착"),
    FINANCE_BUSINESS("금전/사업");

GENERAL_CONCERNS("일반고민") 12,
    CAREER_JOBS("취업/진로") 8,
    WORK_LIFE("직장") 7,
    RELATIONSHIPS("연애")9,
    SOCIAL_INTERACTIONS("대인관계"),8
    ADDICTION_OBSESSION("중독/집착"),10
    FINANCE_BUSINESS("금전/사업"); 10

-- comm_tb
INSERT INTO comm_tb (user_id, content, title, category, created_at)
VALUES (1, '집에 가고 싶어서 고민 적습니다', '집에 가고 싶어요', 'GENERAL_CONCERNS', NOW()),
       (1, '회사에서 스트레스 받아요', '회사 고민', 'WORK_LIFE', NOW()),
       (1,  '취업/진로 내용1', '취업/진로 제목1', 'CAREER_JOBS', NOW()),
       (1,  '취업/진로 내용2', '취업/진로 제목2', 'CAREER_JOBS', NOW()),
       (1,  '취업/진로 내용3', '취업/진로 제목3', 'CAREER_JOBS', NOW()),
       (1,  '취업/진로 내용4', '취업/진로 제목4', 'CAREER_JOBS', NOW()),
       (1,  '취업/진로 내용5', '취업/진로 제목5', 'CAREER_JOBS', NOW()),
       (1,  '취업/진로 내용6', '취업/진로 제목6', 'CAREER_JOBS', NOW()),
       (1, '금전/사업내용8', '금전/사업제목8', 'FINANCE_BUSINESS', NOW()),

       (2, '저녁 메뉴를 못 정하겠어요. 추천받고 싶습니다', '배고파요', 'GENERAL_CONCERNS', NOW()),
       (2,  '취업/진로 내용7', '취업/진로 제목7', 'CAREER_JOBS', NOW()),
       (2,  '취업/진로 내용8', '취업/진로 제목8', 'CAREER_JOBS', NOW()),
       (2,  '취업/진로 내용9', '취업/진로 제목9', 'CAREER_JOBS', NOW()),
       (2,  '취업/진로 내용10','취업/진로 제목10', 'CAREER_JOBS', NOW()),
       (2, '직장내용1', '직장제목1', 'WORK_LIFE', NOW()),
       (2, '직장내용2', '직장제목2', 'WORK_LIFE', NOW()),
       (2, '다이어트 중인데 뭐 먹죠?', '다이어트 고민', 'GENERAL_CONCERNS', NOW()),
       (2, '금전/사업내용9', '금전/사업제목9', 'FINANCE_BUSINESS', NOW()),

       (3, '금전/사업내용10', '금전/사업제목10', 'FINANCE_BUSINESS', NOW()),
       (3, '수업시간에 잠이 오면 어떻게 해야 할까요?', '매일매일 졸아요', 'GENERAL_CONCERNS', NOW()),
       (3, '시험 공부가 너무 힘들어요', '시험이 다가오는 것이 무서워요', 'GENERAL_CONCERNS', NOW()),
       (3, '직장내용3', '직장제목3', 'WORK_LIFE', NOW()),
       (3, '직장내용4', '직장제목4', 'WORK_LIFE', NOW()),
       (3, '직장내용5', '직장제목5', 'WORK_LIFE', NOW()),
       (3, '직장내용6', '직장제목6', 'WORK_LIFE', NOW()),
       (3, '직장내용7', '직장제목7', 'WORK_LIFE', NOW()),
       (3, '직장내용8', '직장제목8', 'WORK_LIFE', NOW()),
       (3, '직장내용9', '직장제목9', 'WORK_LIFE', NOW()),

       (4, '친구와 싸웠어요', '친구 고민', 'SOCIAL_INTERACTIONS', NOW()),
       (4, '여행 가고 싶은데 어디가 좋을까요?', '여행 고민', 'GENERAL_CONCERNS', NOW()),
       (4, '직장내용10', '직장제목10', 'WORK_LIFE', NOW()),
       (4, '직장내용11', '직장제목11', 'WORK_LIFE', NOW()),
       (4, '직장내용12', '직장제목12', 'WORK_LIFE', NOW()),
       (4, '연애내용1', '연애제목1', 'RELATIONSHIPS', NOW()),
       (4, '연애내용2', '연애제목2','RELATIONSHIPS', NOW()),
       (4, '연애내용3', '연애제목3', 'RELATIONSHIPS', NOW()),

       (5, '취미를 찾고 싶어요', '취미 고민', 'GENERAL_CONCERNS', NOW()),
       (5, '연애내용4', '연애제목4', 'RELATIONSHIPS', NOW()),
       (5, '연애내용5', '연애제목5','RELATIONSHIPS', NOW()),
       (5, '연애내용6', '연애제목6', 'RELATIONSHIPS', NOW()),
       (5, '연애내용7', '연애제목7', 'RELATIONSHIPS', NOW()),
       (5, '연애내용8', '연애제목8','RELATIONSHIPS', NOW()),
       (5, '연애내용9', '연애제목9', 'RELATIONSHIPS', NOW()),
       (5, '운동을 시작해보려고 하는데...', '나가기 싫어요', 'GENERAL_CONCERNS', NOW()),

       (6, '혼자 밥 먹기 너무 싫어요', '혼밥 고민', 'SOCIAL_INTERACTIONS', NOW()),
       (6, '영화 추천 좀 해주세요', '영화 고민', 'GENERAL_CONCERNS', NOW()),
       (6, '연애내용10', '연애제목10', 'RELATIONSHIPS', NOW()),
       (6, '연애내용11', '연애제목11','RELATIONSHIPS', NOW()),
       (6, '연애내용12', '연애제목12', 'RELATIONSHIPS', NOW()),
       (6, '대인관계내용1', '대인관계제목1', 'SOCIAL_INTERACTIONS', NOW()),
       (6, '대인관계내용2', '대인관계제목2', 'SOCIAL_INTERACTIONS', NOW()),
       (6, '대인관계내용3', '대인관계제목3', 'SOCIAL_INTERACTIONS', NOW()),

       (7, '새로운 프로젝트가 너무 어려워요', '프로젝트 고민', 'WORK_LIFE', NOW()),
       (7, '팀원과의 갈등이 있어요', '팀원 고민', 'WORK_LIFE', NOW()),
       (7, '대인관계내용4', '대인관계제목4', 'SOCIAL_INTERACTIONS', NOW()),
       (7, '대인관계내용5', '대인관계제목5', 'SOCIAL_INTERACTIONS', NOW()),
       (7, '대인관계내용6', '대인관계제목6', 'SOCIAL_INTERACTIONS', NOW()),
       (7, '대인관계내용7', '대인관계제목7', 'SOCIAL_INTERACTIONS', NOW()),
       (7, '대인관계내용8', '대인관계제목8', 'SOCIAL_INTERACTIONS', NOW()),
       (7, '대인관계내용9', '대인관계제목9', 'SOCIAL_INTERACTIONS', NOW()),

       (8, '자기계발을 어떻게 해야 할까요?', '자기계발 고민', 'CAREER_JOBS', NOW()),
       (8, '취업 준비가 막막해요', '취업ㅠㅠ', 'CAREER_JOBS', NOW()),
       (8, '대인관계내용10', '대인관계제목10', 'SOCIAL_INTERACTIONS', NOW()),
       (8, '대인관계내용11', '대인관계제목11', 'ADDICTION_OBSESSION', NOW()),
       (8, '대인관계내용12', '대인관계제목12', 'ADDICTION_OBSESSION', NOW()),
       (8, '중독/집착내용1', '중독/집착제목1', 'ADDICTION_OBSESSION', NOW()),
       (8, '중독/집착내용2', '중독/집착제목2', 'ADDICTION_OBSESSION', NOW()),
       (8, '중독/집착내용3', '중독/집착제목3', 'ADDICTION_OBSESSION', NOW()),

       (9, '연애가 너무 어려워요', '연애.................. 어려움', 'RELATIONSHIPS', NOW()),
       (9, '혼자서도 잘 할 수 있을까요?', '혼자 고민', 'GENERAL_CONCERNS', NOW()),
       (9, '중독/집착내용4', '중독/집착제목4', 'ADDICTION_OBSESSION', NOW()),
       (9, '중독/집착내용5', '중독/집착제목5', 'ADDICTION_OBSESSION', NOW()),
       (9, '중독/집착내용6', '중독/집착제목6', 'ADDICTION_OBSESSION', NOW()),
       (9, '중독/집착내용7', '중독/집착제목7', 'ADDICTION_OBSESSION', NOW()),
       (9, '중독/집착내용8', '중독/집착제목8', 'ADDICTION_OBSESSION', NOW()),
       (9, '중독/집착내용9', '중독/집착제목9', 'ADDICTION_OBSESSION', NOW()),
       (10, '집에서 취미 생활 하기 좋은 게 뭐가 있을까요?', '취미 생활', 'GENERAL_CONCERNS', NOW()),
       (10, '중독/집착내용10', '중독/집착제목10', 'ADDICTION_OBSESSION', NOW()),
       (10, '금전/사업내용1', '금전/사업제목1', 'FINANCE_BUSINESS', NOW()),
       (10, '금전/사업내용2', '금전/사업제목2', 'FINANCE_BUSINESS', NOW()),
       (10, '금전/사업내용3', '금전/사업제목3', 'FINANCE_BUSINESS', NOW()),
       (10, '금전/사업내용4', '금전/사업제목4', 'FINANCE_BUSINESS', NOW()),
       (10, '금전/사업내용5', '금전/사업제목5', 'FINANCE_BUSINESS', NOW()),
       (10, '금전/사업내용6', '금전/사업제목6', 'FINANCE_BUSINESS', NOW()),
       (10, '금전/사업내용7', '금전/사업제목7', 'FINANCE_BUSINESS', NOW()),
       (10, '심리학 책 추천 좀 해주세요', '마음을 책으로 배울 수 있을까요?', 'GENERAL_CONCERNS', NOW());

쿼리생성

    @Query("SELECT c FROM Comm c LEFT JOIN FETCH c.replies WHERE c.category = :category")
    List<Comm> findByCategoryWithReplies(@Param("category") CommCategory category);

commservice

    //카테고리별 게시글과 관련된 댓글을 함께 조회하는 쿼리
    public List<Comm> getCommsByCategoryV2(CommCategory category) {
        return commRepository.findByCategoryWithReplies(category);
    }

무조건 테스트!!

    @Test
    void getCommsByCategoryV2Test() {
        List<Comm> findByCategoryWithReplies = commRepository.findByCategoryWithReplies(FINANCE_BUSINESS);
        findByCategoryWithReplies.forEach(comm -> System.out.println("comm = " + comm));
    }

만난 오류들

{{> layout/header}}

<!--커뮤니티 시작-->
<section id="section01">
    <div class="container">
        <div class="page-wrapper">
            <h3 class="page-title mb-20">
                커뮤니티 사연보기
            </h3>
            <div class="page-content">
                <div class="comm">
                    <div class="comm-nav">
                        <div class="navbar navbar-expand-lg navbar-light bg-light">
                            <div class="container-fluid">
                                <a class="navbar-brand" href="/comm">모든 사연</a>
                                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown"
                                        aria-expanded="false"
                                        aria-label="Toggle navigation">
                                    <span class="navbar-toggler-icon"></span>
                                </button>
                                <div class="collapse navbar-collapse" id="navbarNavDropdown">
                                    <ul class="navbar-nav">
                                        <li class="nav-item">
                                            <a class="nav-link {{#categoryHelper.isActiveCategory}}GENERAL_CONCERNS{{/categoryHelper.isActiveCategory}}" href="/comm?category=GENERAL_CONCERNS">일반고민</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link {{#categoryHelper.isActiveCategory}}CAREER_JOBS{{/categoryHelper.isActiveCategory}}" href="/comm?category=CAREER_JOBS">취업/진로</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link {{#categoryHelper.isActiveCategory}}WORK_LIFE{{/categoryHelper.isActiveCategory}}" href="/comm?category=WORK_LIFE">직장</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link {{#categoryHelper.isActiveCategory}}RELATIONSHIPS{{/categoryHelper.isActiveCategory}}" href="/comm?category=RELATIONSHIPS">연애</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link {{#categoryHelper.isActiveCategory}}SOCIAL_INTERACTIONS{{/categoryHelper.isActiveCategory}}" href="/comm?category=SOCIAL_INTERACTIONS">대인관계</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link {{#categoryHelper.isActiveCategory}}ADDICTION_OBSESSION{{/categoryHelper.isActiveCategory}}" href="/comm?category=ADDICTION_OBSESSION">중독/집착</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link {{#categoryHelper.isActiveCategory}}FINANCE_BUSINESS{{/categoryHelper.isActiveCategory}}" href="/comm?category=FINANCE_BUSINESS">금전/사업</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--필터 시작-->
                    <div class="comm-filter mb-20">
                        <button class="active black-background">✨최신순</button>
                        <button>👩‍⚕️전문답변</button>
                        <button>😍공감순</button>
                    </div>
                    <!--필터 끝-->
                    <!--컨텐츠 시작-->
                    <div class="c-card">

                        {{#allCommsWithReplyList}}

                            <div class="c-card-body">
                                <a href="/comm-detail/{{id}}">
                                    <h4 class="card-title mb-10">{{title}}</h4>
                                    <div class="community-cartegory">
                                        <div class="category main-color">{{category}}</div>
                                        <div class="user-info">
                                            <figure><img src="/images/level1.png" alt="회원이미지"></figure>
                                            <span>{{writerName}}</span>
                                        </div>
                                    </div>
                                    <p class="card-text mb-20">{{content}}</p>
                                </a>
                                <div class="link-wrapper">
                                    <a href="#" class="card-link like">❤<em class="count">1</em></a>
                                    <a href="#" class="card-link reply">💌<em class="count">{{replies}}</em></a>
                                </div>

                                {{#expertReplies}}
                                    {{#userRole}}
                                        <div class="expert-reply">
                                            <div class="expert-reply-info mb-10">
                                                <figure><img src="/images/user.png" alt={{profileImage}}></figure>
                                                <span class="expert-reply-name active-color">{{expertName}}
                                                    님의 전문답변</span>
                                            </div>
                                            <p class="reply-content">
                                                {{solution}}
                                            </p>
                                        </div>
                                    {{/userRole}}
                                {{/expertReplies}}
                            </div>

                        {{/allCommsWithReplyList}}

                    </div>

                    <!--컨텐츠 끝-->

                    <!--페이지네이션 시작-->
                    <div class="comm-pagination">
                        <nav aria-label="...">
                            <ul class="pagination">
                                <li class="page-item disabled">
                                    <span class="page-link">Previous</span>
                                </li>
                                <li class="page-item"><a class="page-link" href="#">1</a></li>
                                <li class="page-item active" aria-current="page">
                                    <span class="page-link">2</span>
                                </li>
                                <li class="page-item"><a class="page-link" href="#">3</a></li>
                                <li class="page-item">
                                    <a class="page-link" href="#">Next</a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                    <!--페이지네이션 끝-->
                </div>
            </div>
        </div>
    </div>
</section>
<!--컨텐츠 끝-->
</div>
<!--커뮤니티 끝-->
{{> layout/footer}}

06.28 현재상황

import React from "react";
import { useSearchParams } from "react-router-dom";

function List(props) {
  const [searchParams, setSearchParams] = useSearchParams();
  let page = searchParams.get("page");

  // 두번째 방법
  //const navigate = useNavigate();

  function next() {
    // 쿼리스트링 값이 변경되면서 화면 새로 불러짐
    setSearchParams({ page: Number(page) + 1 });

    //let newPage = Number(page) + 1;
    //navigate("/list?page=" + newPage);
  }

  console.log("화면 새로 불러짐");
  return (
    <div>
      <h1>List page : {page}</h1>
      <button onClick={next}>다음페이지</button>
    </div>
  );
}

export default List;

import React from "react";
import { useNavigate, useParams } from "react-router-dom";

function Info(props) {
  const { id } = useParams();

  const navigate = useNavigate();

  function moveList() {
    navigate(`/list?page=0`);
  }

  return (
    <div>
      <h1>Info 번호 : {id}</h1>
      <button onClick={moveList}>리스트페이지이동</button>
    </div>
  );
}

export default Info;