저번에 디자인 했던 갤러리 메인페이지, 세부 페이지에 이어 포스팅 페이지를 디자인 해보겠습니다!!
DB 관련 작업은 planet scale, prisma 환경에서 진행합니다.

 
 

## 🗃 DB 수정하기
기존 blog에서 사용하던 Post DB를 조금 손보는 것으로 DB 수정은 쉽고 빠르게 진행되었어요.

 

> prisma 환경에서 작성한 Post model
```
model Post {
 id Int @id @default(autoincrement())
 createdAt DateTime @default(now())
 updatedAt DateTime @updatedAt
 isHide Boolean @default(false)
 thumbnailURL String? @db.MediumText
 title String @db.MediumText
 content String? @db.LongText
 imageURLs String? @db.MediumText
 tags String? @db.MediumText
 category Int?
 type PostType @default(POST)
 comments Comment[]
 recomments Recomment[]
}

enum PostType {
 POST
 GALLERY
}
```

해당 포스트가 블로그 포스트인지 갤러리 포스트인지 구분하기 위한 '**type**' 컬럼, 이미지 주소를 저장할 '**imageURLs**' 컬럼을 추가해주었습니다.
 
## 🛠 API 만들기
>gallery 포스트 등록 및 수정
```ts
const {
 body: { content, tags, title, isHide, postId, createdAt, imageURLs },
} = req;
if (!postId) {
 const post = await client.post.create({
 data: {
 createdAt,
 content: content ? content : null,
 tags: tags ? tags : null,
 title,
 imageURLs,
 isHide: isHide ? isHide : false,
 type: "GALLERY",
 },
 });
 return res.json({
 result: true,
 id: post.id,
 });
} else {
 await client.post.update({
 where: {
 id: postId,
 },
 data: {
 content: content ? content : null,
 tags: tags ? tags : null,
 title,
 createdAt,
 imageURLs,
 isHide: isHide ? isHide : false,
 },
 });
 return res.json({
 result: true,
 });
}
```
gallery 포스트 등록 및 수정 api를 호출했을 때 실행할 함수입니다.
postId를 담아오면 해당 id의 post데이터를 수정하도록 했고 postId가 없으면 신규 post를 등록하도록 했습니다.
 

>gallery 포스트 리스트 불러오기
```ts
const { page } = req.query;
const postCount = await client.post.count({
 where: { isHide: false, type: "GALLERY" },
});
const galleryPosts = await client.post.findMany({
 where: { isHide: false, type: "GALLERY" },
 select: {
 id: true,
 title: true,
 createdAt: true,
 imageURLs: true,
 _count: {
 select: {
 comments: true,
 recomments: true,
 },
 },
 },
 take: 8,
 skip: 8 * (+page - 1),
 orderBy: { createdAt: "desc" },
});
return res.json({
 result: true,
 postCount,
 galleryPosts: galleryPosts.map((post) => {
 return {
 ...post,
 commentCount: post._count.comments + post._count.recomments,
 };
 }),
});
```
gallery 포스트 리스트를 불러오는 api를 호출했을 때 실행할 함수입니다.
한번 호출할 때 page를 쿼리로 넘기고 페이지에 맞는 포스트를 8개씩 가져오도록 작성했어요. 그리고 리스트를 보여줄 때 댓글 갯수도 보여줘야하기 때문에 댓글 수도 count를 가져오도록 했습니다.
 
>포스트 정보 불러오기 & 삭제
```ts
if (req.method === "GET") {
 const { id } = req.query;
 const post = await client.post.findUnique({
 where: { id: +id },
 });
 res.json({
 result: true,
 post,
 });
}
if (req.method === "DELETE") {
 const { id } = req.query;
 await client.post.delete({
 where: {
 id: +id,
 },
 });
 res.json({
 result: true,
 });
}
```
gallery 포스트 정보 불러오기와 삭제 api를 호출했을 때 실행할 함수입니다.
정보 불러오기와 삭제는 특별할 것 없이 기능이 동작하도록 작성했습니다.
 

## 🗃 마무리
![](https://imagedelivery.net/R2WiK4wfRK3oBXTwjgzQfA/7880b730-3510-4422-39d0-10305ed22c00/public)

api 테스트는 postman을 이용하여 진행했어요. 새로 작성한 모든 API와 기존에 수정한 블로그 포스트 API를 테스트해본 결과 모두 정상적으로 동작하는 것을 확인했습니다!!

저번에 디자인 했던 갤러리 메인페이지, 세부 페이지에 이어 포스팅 페이지를 디자인 해보겠습니다!!
DB 관련 작업은 planet scale, prisma 환경에서 진행합니다.

 
 

## 🗃 DB

[갤러리 만들기 #3] DB 수정과 API 만들기