[#24] api: diary 페이지 api 연결

Happy-Dreaming · Apr 10, 2024 · ee7e66b · ee7e66b
1 parent e0d4b6f
commit ee7e66b
Show file tree

Hide file tree

Showing 5 changed files with 207 additions and 138 deletions.
diff --git a/app/api/diary/route.ts b/app/api/diary/route.ts
@@ -1,124 +1,127 @@
-import { NextRequest, NextResponse } from 'next/server';
-import { verifyToken } from '../../lib/token';
-import { DIARY } from '../../../constants';
-import { isLengthInRange } from '../../../utils';
-import { createNewDiary, getAllDiaryByUser } from '../../lib/diary';
-import { cookies } from 'next/headers';
-import { addUserPoints } from '../../lib/point';
+import { NextRequest, NextResponse } from "next/server";
+import { verifyToken } from "../../lib/token";
+import { DIARY } from "../../../constants";
+import { isLengthInRange } from "../../../utils";
+import { createNewDiary, getAllDiaryByUser } from "../../lib/diary";
+import { cookies } from "next/headers";
+import { addUserPoints } from "../../lib/point";
 
 export async function GET(req: NextRequest) {
-  const page = req.nextUrl.searchParams.get('page');
-  const pageSize = req.nextUrl.searchParams.get('pageSize');
-  const skip = (Number(page) - 1) * Number(pageSize);
-  try {
-    const userId = verifyToken(
-      cookies().get('dreaming_accessToken')?.value ?? ''
-    ).userId;
-  } catch (e) {
-    console.log(e);
-    return new Response(
-      JSON.stringify({
-        error: '토큰이 만료되었습니다.',
-      }),
-      {
-        status: 401,
-      }
-    );
-  }
+    const page = req.nextUrl.searchParams.get("page");
+    const pageSize = req.nextUrl.searchParams.get("pageSize");
+    const skip = (Number(page) - 1) * Number(pageSize);
+    try {
+        const userId = verifyToken(
+            cookies().get("dreaming_accessToken")?.value ?? ""
+        ).userId;
+    } catch (e) {
+        console.log(e);
+        return new Response(
+            JSON.stringify({
+                error: "토큰이 만료되었습니다.",
+            }),
+            {
+                status: 401,
+            }
+        );
+    }
 
-  try {
-    const userId = verifyToken(
-      cookies().get('dreaming_accessToken')?.value ?? ''
-    ).userId;
-    const getAllPosts = await getAllDiaryByUser(
-      userId,
-      parseInt(skip + ''),
-      parseInt(pageSize as string)
-    );
+    try {
+        const userId = verifyToken(
+            cookies().get("dreaming_accessToken")?.value ?? ""
+        ).userId;
+        const getAllPosts = await getAllDiaryByUser(
+            userId,
+            parseInt(skip + ""),
+            parseInt(pageSize as string)
+        );
 
-    if (userId && getAllPosts) {
-      return new Response(JSON.stringify(getAllPosts), {
-        status: 200,
-      });
+        if (userId && getAllPosts) {
+            return new Response(JSON.stringify(getAllPosts), {
+                status: 200,
+            });
+        }
+    } catch (e) {
+        return NextResponse.json(
+            {
+                error: "유저의 다이어리를 불러올 수 없어요",
+            },
+            {
+                status: 502,
+            }
+        );
     }
-  } catch (e) {
-    return NextResponse.json(
-      {
-        error: '유저의 다이어리를 불러올 수 없어요',
-      },
-      {
-        status: 502,
-      }
-    );
-  }
 }
 
 export async function POST(req: NextRequest) {
-  const userId = verifyToken(
-    cookies().get('dreaming_accessToken')?.value ?? ''
-  ).userId;
+    const userId = verifyToken(
+        cookies().get("dreaming_accessToken")?.value ?? ""
+    ).userId;
 
-  if (!userId) {
-    return new Response(
-      JSON.stringify({
-        error: '토큰이 만료되었습니다.',
-      }),
-      {
-        status: 401,
-      }
-    );
-  }
+    if (!userId) {
+        return new Response(
+            JSON.stringify({
+                error: "토큰이 만료되었습니다.",
+            }),
+            {
+                status: 401,
+            }
+        );
+    }
 
-  const { title, content, isShare } = await req.json();
-  if (!isLengthInRange(title, DIARY.TITLE.MIN_LENGTH, DIARY.TITLE.MAX_LENGTH)) {
-    return NextResponse.json(
-      {
-        error: '0글자 이상 1000글자 이하의 제목을 입력해주세요',
-      },
-      {
-        status: 400,
-      }
-    );
-  }
+    const { title, content, isShare } = await req.json();
+    if (
+        !isLengthInRange(title, DIARY.TITLE.MIN_LENGTH, DIARY.TITLE.MAX_LENGTH)
+    ) {
+        return NextResponse.json(
+            {
+                error: "0글자 이상 1000글자 이하의 제목을 입력해주세요",
+            },
+            {
+                status: 400,
+            }
+        );
+    }
 
-  if (
-    !isLengthInRange(
-      content,
-      DIARY.CONTENT.MIN_LENGTH,
-      DIARY.CONTENT.MAX_LENGTH
-    )
-  ) {
-    return NextResponse.json(
-      {
-        error: '0글자 이상 5000글자 이하의 글을 입력해주세요',
-      },
-      {
-        status: 400,
-      }
-    );
-  }
-  try {
-    const decodedToken = verifyToken(
-      cookies().get('dreaming_accessToken')?.value ?? ''
-    );
+    if (
+        !isLengthInRange(
+            content,
+            DIARY.CONTENT.MIN_LENGTH,
+            DIARY.CONTENT.MAX_LENGTH
+        )
+    ) {
+        return NextResponse.json(
+            {
+                error: "0글자 이상 5000글자 이하의 글을 입력해주세요",
+            },
+            {
+                status: 400,
+            }
+        );
+    }
+    try {
+        const decodedToken = verifyToken(
+            cookies().get("dreaming_accessToken")?.value ?? ""
+        );
 
-    const newPost = await createNewDiary({
-      title,
-      content,
-      isShare,
-      writer: Number(decodedToken?.userId),
-    });
+        const newPost = await createNewDiary({
+            title,
+            content,
+            isShare,
+            writer: Number(decodedToken?.userId),
+        });
 
-    await addUserPoints(userId + '');
-    return new Response(JSON.stringify(newPost), {
-      status: 200,
-    });
-  } catch (e) {
-    return NextResponse.json(
-      { error: '새로운 다이어리를 생성할 수 없어요' },
-      {
-        status: 502,
-      }
-    );
-  }
+        await addUserPoints(userId + "");
+        return new Response(JSON.stringify(newPost), {
+            status: 200,
+        });
+    } catch (e) {
+        console.log(e);
+        return NextResponse.json(
+            { error: "새로운 다이어리를 생성할 수 없어요" },
+            {
+                status: 502,
+            }
+        );
+    }
 }
diff --git a/app/components/Diary/Diary.tsx b/app/components/Diary/Diary.tsx
@@ -9,33 +9,62 @@ import { BsFillPersonFill } from "react-icons/bs";
 import { BsHeartFill } from "react-icons/bs";
 import { BsChatDotsFill } from "react-icons/bs";
 
-function Diary() {
+export interface DiaryProps {
+    id: string;
+    title: string;
+    isShare: boolean;
+    contents: string;
+    writerId: number;
+    like: number;
+    updated_At: string;
+}
+
+const Diary: React.FC<DiaryProps> = ({
+    id,
+    title,
+    isShare,
+    contents,
+    writerId,
+    like,
+    updated_At,
+}) => {
     return (
-        <Link href="/read">
+        //writerId 넣어서 read에 보내기
+        <Link href={`/read/${id}`}>
             <div className={styles.container}>
                 <p className={styles.title}>
-                    제목 <MdLock className={styles.lockIcon} />
+                    {title}
+                    {!isShare ? <MdLock className={styles.lockIcon} /> : null}
                 </p>
-                <p className={styles.content}>글 내용 미리보기</p>
+                <p className={styles.content}>{contents}</p>
                 <div className={styles.postFooter}>
                     <div className={styles.postInfo}>
                         <p>
-                            <BsFillPersonFill className={styles.postInfoIcon} />{" "}
-                            효키키
-                        </p>
-                        <p>
-                            <BsHeartFill className={styles.postInfoIcon} /> 100
-                        </p>
-                        <p>
-                            <BsChatDotsFill className={styles.postInfoIcon} />{" "}
-                            200
+                            <BsFillPersonFill className={styles.postInfoIcon} />
+                            {writerId}
                         </p>
+                        {isShare ? (
+                            <>
+                                <p>
+                                    <BsHeartFill
+                                        className={styles.postInfoIcon}
+                                    />
+                                    {like}
+                                </p>
+                                {/* <p>
+                                    <BsChatDotsFill
+                                        className={styles.postInfoIcon}
+                                    />
+                                    200
+                                </p> */}
+                            </>
+                        ) : null}
                     </div>
-                    <p className={styles.date}>2024.04.05</p>
+                    <p className={styles.date}>{updated_At}</p>
                 </div>
             </div>
         </Link>
     );
-}
+};
 
 export default Diary;
diff --git a/app/components/LinkToDiary/LinkToDiary.tsx b/app/components/LinkToDiary/LinkToDiary.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 
 function LinkToDiary() {
     return (
-        <Link href="/postDiary">
+        <Link href="/post">
             <div className={styles.container}>
                 <div className={styles.icon}>
                     <img src="/icon_moon.png" alt="icon" />

diff --git a/app/diary/diary.module.css b/app/diary/diary.module.css
@@ -75,6 +75,12 @@
     color: var(--main_color);
 }
 
+.nothing {
+    margin-top: 2vh;
+    font-size: var(--font_size_content);
+    color: var(--font_color_gray);
+}
+
 .pagination {
     width: 80vw;
     margin: 2.5vh 0;