Merge pull request #415 from TripInfoWeb/dev

Release: v1.1.0

Author: HyunJinNo

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,30 @@
+---
+name: Bug Report
+about: 어떤 버그인지 설명해 주세요.
+title: "Bug: 버그 설명"
+labels: Bug
+assignees: ""
+---
+
+## ❓ 어떤 버그인가요?
+
+- 어떤 버그인지 설명해 주세요.
+
+## 🖥️ 발생 환경
+
+- OS: (Ex. Windows, macOS, Ubuntu)
+- 브라우저: (Ex. Chrome, Firefox)
+- 버전: (Ex. v1.0.3)
+
+## 🕘 발생 일시
+
+- 버그가 발생한 날짜와 시간을 입력해 주세요. (Ex. 2024년 10월 1일, 오후 3시 30분)
+
+## 📝 예상 결과
+
+- 예상했던 정상적인 결과가 어떤 것이었는지 설명해주세요
+
+## 📚 참고할만한 자료(선택)
+
+- 추가적으로 참고할 만한 사항이 있으면 적어주세요.
+- 없는 경우 해당 단락을 삭제해 주세요.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,27 @@
+---
+name: Feature Request
+about: 새로운 기능 추가 요청을 작성해 주세요.
+title: "Feat: 기능 설명"
+labels: Feat
+assignees: ""
+---
+
+## ❓ 어떤 기능인가요?
+
+- 추가 요청하려는 기능에 대해 설명해 주세요.
+
+## 📝 기능 설명
+
+- 추가하려는 기능의 세부 설명 및 목적을 작성해 주세요.
+
+## ✅ TODO
+
+구현해야 하는 기능에 대해 체크리스트를 작성해 주세요.
+
+- [ ] TODO 1
+- [ ] TODO 2
+
+## 📚 참고할만한 자료(선택)
+
+- 추가적으로 참고할 만한 사항이 있으면 적어주세요.
+- 없는 경우 해당 단락을 삭제해 주세요.

.github/pull_request_template.md

@@ -0,0 +1,36 @@
+- 제목: Feat: 기능명
+  Ex. Feat: pull request template 작성
+
+-- 절취선 위 부분의 내용은 모두 삭제하고 PR을 작성해 주세요. --
+
+---- 절취선 ----
+
+## ☑️ 개발 유형
+
+- [x] Front-end
+
+## ✔️ PR 유형
+
+- [ ] 새로운 기능 추가
+- [ ] 버그 수정
+- [ ] CSS 등 사용자 UI 디자인 변경
+- [ ] 기존 기능에 영향을 주지 않는 변경사항 (Ex. 오타 수정, 탭 사이즈 변경, 변수명 변경, 코드 리팩토링 등)
+- [ ] 주석 관련 작업
+- [ ] 문서 관련 작업
+- [ ] 테스트 추가 혹은 테스트 리팩토링
+- [ ] 빌드 부분 혹은 패키지 매니저 수정
+- [ ] 파일 혹은 폴더명 수정
+- [ ] 파일 혹은 폴더 삭제
+
+## 📝 작업 내용
+
+이번 PR에서 작업한 내용을 간략히 설명해주세요.
+
+- [x] 구현한 기능 1
+- [x] 구현한 기능 2
+
+## #️⃣ Related Issue
+
+해당 Pull Request과 관련된 Issue Link를 작성해 주세요
+
+Ex. #123

README.md

@@ -1,6 +1,6 @@
 {
   "name": "solitour-frontend",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "private": true,
   "scripts": {
     "dev": "next dev",

package-lock.json

@@ -0,0 +1,103 @@
+import {
+  CreateInformationCommentRequestDto,
+  UpdateInformationCommentRequestDto,
+} from "@/types/InformationCommentDto";
+import { NextRequest } from "next/server";
+
+/**
+ * @method GET
+ * @url /api/informations/comments/:informationId?page=0
+ * @description 댓글 목록 조회
+ */
+export async function GET(
+  request: NextRequest,
+  { params }: { params: { id: string } },
+) {
+  const cookie = request.cookies.get("access_token");
+  const searchParams = request.nextUrl.searchParams;
+  const page = searchParams.get("page") ?? "0";
+
+  return await fetch(
+    `${process.env.BACKEND_URL}/api/informations/comments/${params.id}?page=${page}`,
+    {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Cookie: `${cookie?.name}=${cookie?.value}`,
+      },
+      cache: "no-store",
+    },
+  );
+}
+
+/**
+ * @method POST
+ * @url /api/informations/comments/:informationId
+ * @description 댓글 작성
+ */
+export async function POST(
+  request: NextRequest,
+  { params }: { params: { id: number } },
+) {
+  const cookie = request.cookies.get("access_token");
+  const body: CreateInformationCommentRequestDto = await request.json();
+  return await fetch(
+    `${process.env.BACKEND_URL}/api/informations/comments/${params.id}`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Cookie: `${cookie?.name}=${cookie?.value}`,
+      },
+      body: JSON.stringify(body),
+      cache: "no-store",
+    },
+  );
+}
+
+/**
+ * @method PUT
+ * @url /api/informations/comments/:informationId
+ * @description 댓글 수정
+ */
+export async function PUT(
+  request: NextRequest,
+  { params }: { params: { id: number } },
+) {
+  const cookie = request.cookies.get("access_token");
+  const body: UpdateInformationCommentRequestDto = await request.json();
+  return await fetch(
+    `${process.env.BACKEND_URL}/api/informations/comments/${params.id}`,
+    {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+        Cookie: `${cookie?.name}=${cookie?.value}`,
+      },
+      body: JSON.stringify(body),
+      cache: "no-store",
+    },
+  );
+}
+
+/**
+ * @method DELETE
+ * @url /api/informations/comments/:informationCommentId
+ * @description 댓글 삭제
+ */
+export async function DELETE(
+  request: NextRequest,
+  { params }: { params: { id: number } },
+) {
+  const cookie = request.cookies.get("access_token");
+  return await fetch(
+    `${process.env.BACKEND_URL}/api/informations/comments/${params.id}`,
+    {
+      method: "DELETE",
+      headers: {
+        Cookie: `${cookie?.name}=${cookie?.value}`,
+      },
+      cache: "no-store",
+    },
+  );
+}

package.json

@@ -1,6 +1,7 @@
 import Breadcrumbs from "@/components/common/Breadcrumb";
 import InformationViewer from "@/components/informations/detail/InformationViewer";
 import RecommendationList from "@/components/informations/detail/RecommendationList";
+import CommentListContainer from "@/containers/informations/detail/comment/CommentListContainer";
 import { InformationDetailDto } from "@/types/InformationDto";
 import { cookies } from "next/headers";
 
@@ -61,7 +62,7 @@ export default async function page({ params: { id } }: Props) {
         ]}
       />
       <InformationViewer informationId={informationId} data={data} />
-      {/* <CommentListContainer informationId={informationId} /> */}
+      <CommentListContainer informationId={informationId} />
       <RecommendationList data={data} />
     </div>
   );

src/app/api/informations/comments/[id]/route.ts

@@ -1,7 +1,6 @@
 import useModalState from "@/hooks/useModalState";
 import useOutsideClick from "@/hooks/useOutsideClick";
 import useAuthStore from "@/store/authStore";
-import { ModalState } from "@/types/ModalState";
 import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
@@ -10,10 +9,11 @@ import UserImage from "./UserImage";
 
 const UserDropDown = () => {
   const authStore = useAuthStore();
-  const modalState = useModalState(); 
+  const modalState = useModalState();
   const router = useRouter();
   const ref = useRef<any>();
   const ref1 = useRef<any>();
+
   const logoutHandler = async () => {
     // api로 로그아웃 요청해서 쿠키제거
     const response = await fetch("/api/auth/logout", {
@@ -23,6 +23,7 @@ const UserDropDown = () => {
     if (!response.ok) {
       throw new Error(response.statusText);
     }
+
     authStore.initialize();
     router.push("/");
     router.refresh();
@@ -34,7 +35,7 @@ const UserDropDown = () => {
 
   return (
     <button
-      className="flex items-center gap-x-2 w-full"
+      className="flex w-full items-center gap-x-2"
       onClick={(e) => {
         if (!modalState.isOpen) {
           modalState.openModal();
@@ -44,7 +45,10 @@ const UserDropDown = () => {
             // 클릭된 요소가 ref 요소 내부에 포함되지 않으면
             if (!ref.current.contains(e.target as Node)) {
               modalState.closeModal();
-            } else if (ref.current.contains(e.target as Node) && !ref1.current.contains(e.target as Node)) {
+            } else if (
+              ref.current.contains(e.target as Node) &&
+              !ref1.current.contains(e.target as Node)
+            ) {
               modalState.closeModal();
             }
           }
@@ -60,45 +64,46 @@ const UserDropDown = () => {
       <span className="overflow-hidden text-ellipsis whitespace-nowrap font-bold">
         {authStore.nickname}
       </span>
-      {
-        modalState.isOpen &&
+      {modalState.isOpen && (
         <section
           ref={ref1}
-          onClick={(e)=>e.preventDefault()}
-          className={"fixed right-0 top-[4rem] gap-y-4 p-4 rounded-2xl h-auto bg-white w-[20rem] flex flex-col outline outline-[0.0625rem] outline-offset-[-0.0625rem] outline-primary-20 outline-gray2 cursor-default"}>
-          <div className="relative w-full flex justify-center h-[12rem] items-center p-4 rounded-[1rem] ">
+          onClick={(e) => e.preventDefault()}
+          className="outline-primary-20 fixed right-0 top-[4rem] flex h-auto w-[20rem] cursor-default flex-col gap-y-4 rounded-2xl bg-white p-4 outline outline-[0.0625rem] outline-offset-[-0.0625rem] outline-gray2"
+        >
+          <div className="relative flex h-[12rem] w-full items-center justify-center p-4">
             <Image
+              className="rounded-full border-[0.03125rem] border-[#B8EDD9] bg-lightGreen"
               src={authStore.userImage.address}
-              alt={"유저 이미지"}
+              alt="유저 이미지"
               width={140}
               height={140}
             />
           </div>
           <Link
-            href={"/mypage?mainCategory=정보&category=owner"}
-            className={"flex gap-x-2 items-center px-8 py-2 justify-center bg-white outline outline-[0.0625rem] outline-offset-[-0.0625rem] outline-gray3 outline-primary-20 rounded-[1rem]"}
+            href="/mypage?mainCategory=정보&category=owner"
+            className="outline-primary-20 flex items-center justify-center gap-x-2 rounded-[1rem] bg-white px-8 py-2 outline outline-[0.0625rem] outline-offset-[-0.0625rem] outline-gray3"
             onClick={() => modalState.closeModal()}
             prefetch={true}
           >
-            <div className={"relative w-[1.25rem] h-[1.25rem]"}>
+            <div className="relative h-[1.25rem] w-[1.25rem]">
               <Image
                 className="aspect-square"
                 src="/home/mypage-icon.svg"
                 alt="signin-icon"
                 fill
               />
             </div>
-         마이페이지
+            마이페이지
           </Link>
           <button
             onClick={logoutHandler}
-            className="px-8 py-2 bg-main rounded-2xl font-semibold text-white"
+            className="rounded-2xl bg-main px-8 py-2 font-semibold text-white"
           >
-        로그아웃
+            로그아웃
           </button>
-        </section> 
-      }
+        </section>
+      )}
     </button>
   );
 };
-export default UserDropDown;
+export default UserDropDown;

src/app/informations/(detail)/[id]/page.tsx

@@ -1,12 +1,16 @@
 import HashSpinner from "./HashSpinner";
 
-interface Props {
+interface DeleteModalProps {
   loading: boolean;
   onDeleteClick: () => void;
   onCancelClick: () => void;
 }
 
-const DeleteModal = ({ loading, onDeleteClick, onCancelClick }: Props) => {
+const DeleteModal = ({
+  loading,
+  onDeleteClick,
+  onCancelClick,
+}: DeleteModalProps) => {
   return (
     <div className="fixed left-0 top-0 z-50 flex h-full w-full items-center justify-center bg-black/25">
       <HashSpinner loading={loading} />