[Flutter] 28. 모두의 블로그 앱 만들기 (6) - 게시글 상세 페이지

김주희

Jun 10, 2025

[Flutter] 28. 모두의 블로그 앱 만들기 (6) - 게시글 상세 페이지

Contents

창고가 postId를 모르는 문제 통신 PostDetailVM 창고 데이터 타입 창고 데이터 렌더링 Reply

아이디 날리기

imgUrl + title + content + id 필요

데이터 다 있어도 클릭하면 다시 통신

분리시키자

여러번 넘겨야 할 경우 전역적으로 설정

창고가 postId를 모르는 문제

FamilyNotifier

매개변수 전달하고 싶을때 쓰는 notifier 존재한다.

문법이니 이해하지 말고 그냥 쓰면 된다.

ref.watch

postDetailProvider 괄호 안에 매개변수를 전달하면 된다.


dart에서는 list (컬렉션) 안에 if문 사용 가능 (expression이 아니지만 되나봄..)


~ 4:30
1. 창고 타입 만들기 
replies 제외하고 상태 만들기 id~User까지 상태로 관리
+ 시간 남으면 replies 
2.

통신

api 문서

post_repository

테스트


┌───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
│ #0   PostRepository.getOne (package:flutter_blog/data/repository/post_repository.dart:17:14)
│ #1   <asynchronous suspension>
├┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄
│ 🐛 {
│ 🐛   "success": true,
│ 🐛   "response": {
│ 🐛     "id": 1,
│ 🐛     "title": "title 1",
│ 🐛     "content": "content 1",
│ 🐛     "createdAt": "2025-06-09T09:07:25",
│ 🐛     "updatedAt": "2025-06-09T09:07:25",
│ 🐛     "bookmarkCount": 1,
│ 🐛     "isBookmark": true,
│ 🐛     "user": {
│ 🐛       "id": 1,
│ 🐛       "username": "ssar",
│ 🐛       "imgUrl": "/images/1.png"
│ 🐛     },
│ 🐛     "replies": [
│ 🐛       {
│ 🐛         "id": 5,
│ 🐛         "comment": "comment 5",
│ 🐛         "createdAt": "2025-06-09T09:07:25",
│ 🐛         "replyUser": {
│ 🐛           "id": 3,
│ 🐛           "username": "love",
│ 🐛           "imgUrl": "/images/1.png"
│ 🐛         }
│ 🐛       },
│ 🐛       {
│ 🐛         "id": 4,
│ 🐛         "comment": "comment 4",
│ 🐛         "createdAt": "2025-06-09T09:07:25",
│ 🐛         "replyUser": {
│ 🐛           "id": 2,
│ 🐛           "username": "cos",
│ 🐛           "imgUrl": "/images/1.png"
│ 🐛         }
│ 🐛       },
│ 🐛       {
│ 🐛         "id": 3,
│ 🐛         "comment": "comment 3",
│ 🐛         "createdAt": "2025-06-09T09:07:25",
│ 🐛         "replyUser": {
│ 🐛           "id": 2,
│ 🐛           "username": "cos",
│ 🐛           "imgUrl": "/images/1.png"
│ 🐛         }
│ 🐛       },
│ 🐛       {
│ 🐛         "id": 2,
│ 🐛         "comment": "comment 2",
│ 🐛         "createdAt": "2025-06-09T09:07:25",
│ 🐛         "replyUser": {
│ 🐛           "id": 1,
│ 🐛           "username": "ssar",
│ 🐛           "imgUrl": "/images/1.png"
│ 🐛         }
│ 🐛       },
│ 🐛       {
│ 🐛         "id": 1,
│ 🐛         "comment": "comment 1",
│ 🐛         "createdAt": "2025-06-09T09:07:25",
│ 🐛         "replyUser": {
│ 🐛           "id": 1,
│ 🐛           "username": "ssar",
│ 🐛           "imgUrl": "/images/1.png"
│ 🐛         }
│ 🐛       }
│ 🐛     ]
│ 🐛   },
│ 🐛   "status": 200,
│ 🐛   "errorMessage": null
│ 🐛 }
└───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────

PostDetailVM

창고 데이터 타입

창고

init

데이터 렌더링

PostDetailBody

PostDetailProfile

PostDetailButtons

내가 쓴 글인 경우

cos로 로그인한 상태에서 cos가 작성한 게시글을 보면 삭제/수정 아이콘이 보인다.

내가 쓴 글이 아닌 경우

ssar로 로그인한 상태에서 cos가 작성한 게시글을 보면 삭제/수정 아이콘이 보이지 않는다.

Reply

댓글 페이징 처리

그냥 하면 lazy 로딩이니까 join할건데 이렇게 되면 페이징 처리 불가능

네이티브 쿼리

select *

from post_tb p left outer join reply_tb r

on p.id = r.post_id

where id = 1;

post만 조회하고 댓글을 따로 조회해서 dto에서 합치기

from post_tb p left outer join (인라인뷰) r

select *
from reply_tb
where post_id = 1
limit 0, 5;

→ 이것만을 위한 api가 필요함

⇒ 1. select 두번이 쉽다 어차피 댓글만 뽑아내는 api 필요하니까

Flutter