카테고리별로 게시판이 나뉘어야 한다.
일반고민을 누르면 일반고민 사연만 나오게
취업/진로 버튼을 누리면, 취업/진로버튼만 나오게끔.
카테고리 더미 생성
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));
}게시글이 잘 나옴
만난 오류들
⇒ 주소 매핑 중복
카테고리 주소는 어디에 매핑해야 하나?
⇒ comm 게시물에 하면, 매개변수가 달라서 함께 넣지 못한다.
⇒ 기존 코드를 유지한 채 comm에 넣으려고 하면,
⇒ 쿼리 파라미터 이름 인식x
⇒
@RequestParam 애노테이션에 명시적으로 이름을 지정
⇒컴파일러가 매개변수 이름 정보를 사용할 수 있도록 설정하지 않았기 때문에 발생하는 문제⇒—다시 해보자
⇒mustache<>,연동문제
⇒해결,태그 이름이 일치하지 않는 오류가 발생
⇒ Java 코드에서 적절한 헬퍼 메서드를 제공
detail-main
{{> 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 현재상황
카테고리를 누르면 해당 url로 바뀌는 것까지 구현
⇒ 지금 해야 할 것은, 해당 url로 누르면 글들이 해당 카테고리만 조회되게
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;Share article
