Merge pull request #265 from manNomi/fix/pr

manNomi · web-flow · commit 99d7a95c4a41 · 2025-08-28T03:44:38.000+09:00
Fix/pr
diff --git a/.env b/.env
@@ -9,8 +9,6 @@ NEXT_PUBLIC_COOKIE_LOGIN_ENABLED=true
 NEXT_PUBLIC_IMAGE_URL=https://d1q5o8tzvz4j3d.cloudfront.net
 NEXT_PUBLIC_UPLOADED_IMAGE_URL=https://d23lwokhcc3r0c.cloudfront.net
 
-# google maps
-NEXT_PUBLIC_GOOGLE_MAP_API_KEY=AIzaSyAm-HhRKVeHOF6uXmf6Mgw1yJPxwnlEf0w
 
 # google analytics
 NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=G-V1KLYZC1DS
diff --git a/src/api/community/client/queryKey.ts b/src/api/community/client/queryKey.ts
@@ -0,0 +1,3 @@
+export enum QueryKeys {
+  posts = "posts",
+}
diff --git a/src/api/community/client/useDeletePost.ts b/src/api/community/client/useDeletePost.ts
@@ -0,0 +1,62 @@
+import { useRouter } from "next/navigation";
+
+import { AxiosResponse } from "axios";
+
+import { axiosInstance } from "@/utils/axiosInstance";
+
+import { QueryKeys } from "./queryKey";
+
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+/**
+ * @description 게시글 삭제 API 응답 타입
+ * @property {string} message - 성공 메시지
+ * @property {number} postId - 삭제된 게시글 ID
+ */
+interface DeletePostResponse {
+  message: string;
+  postId: number;
+}
+
+/**
+ * @description postId를 받아 해당 게시글을 삭제하는 API 함수
+ * @param postId - 삭제할 게시글의 ID
+ * @returns Promise<AxiosResponse<DeletePostResponse>>
+ */
+export const deletePostApi = (postId: number): Promise<AxiosResponse<DeletePostResponse>> => {
+  return axiosInstance.delete(`/posts/${postId}`);
+};
+
+/**
+ * @description 게시글 삭제를 위한 useMutation 커스텀 훅
+ */
+const useDeletePost = () => {
+  const router = useRouter();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    // mutation 실행 시 호출될 함수
+    mutationFn: deletePostApi,
+
+    // mutation 성공 시 실행될 콜백
+    onSuccess: () => {
+      // 'posts' 쿼리 키를 가진 모든 쿼리를 무효화하여
+      // 게시글 목록을 다시 불러오도록 합니다.
+      // ['posts', 'list'] 등 구체적인 키를 사용하셔도 좋습니다.
+      queryClient.invalidateQueries({ queryKey: [QueryKeys.posts] });
+
+      alert("게시글이 성공적으로 삭제되었습니다.");
+
+      // 게시글 목록 페이지 이동
+      router.replace("/community/FREE");
+    },
+
+    // mutation 실패 시 실행될 콜백
+    onError: (error) => {
+      console.error("게시글 삭제 실패:", error);
+      alert("게시글 삭제에 실패했습니다. 잠시 후 다시 시도해주세요.");
+    },
+  });
+};
+
+export default useDeletePost;
diff --git a/src/api/university/client/usePostUniversityFavorite.ts b/src/api/university/client/usePostUniversityFavorite.ts
@@ -0,0 +1,54 @@
+import { AxiosResponse } from "axios";
+
+import { axiosInstance } from "@/utils/axiosInstance";
+
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+/**
+ * @description 위시리스트 학교 추가 API 응답 타입
+ * @property {number} universityInfoForApplyId - 추가된 학교 정보 ID
+ * @property {string} message - 성공 메시지
+ */
+interface UniversityFavoriteResponse {
+  universityInfoForApplyId: number;
+  message: string;
+}
+
+/**
+ * @description 위시리스트에 학교를 추가하는 API 함수
+ * @param universityInfoForApplyId - 추가할 학교 정보의 ID
+ * @returns Promise<AxiosResponse<UniversityFavoriteResponse>>
+ */
+export const postUniversityFavoriteApi = (
+  universityInfoForApplyId: number,
+): Promise<AxiosResponse<UniversityFavoriteResponse>> =>
+  axiosInstance.post(`/univ-apply-infos/${universityInfoForApplyId}/like`);
+
+/**
+ * @description 위시리스트 학교 추가를 위한 useMutation 커스텀 훅
+ */
+const usePostUniversityFavorite = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    // mutation 실행 시 호출될 함수
+    mutationFn: postUniversityFavoriteApi,
+
+    // mutation 성공 시 실행될 콜백
+    onSuccess: () => {
+      // 위시리스트 관련 쿼리를 무효화하여 데이터를 다시 불러옵니다.
+      // ['favorites'], ['univ-apply-infos', 'like'] 등 구체적인 키를 사용하세요.
+      queryClient.invalidateQueries({ queryKey: ["favorites"] });
+      alert("위시리스트에 학교를 추가했습니다.");
+    },
+
+    // mutation 실패 시 실행될 콜백
+    onError: (error) => {
+      const errorMessage = (error as any)?.response?.data?.message || "요청에 실패했습니다.";
+      console.error("위시리스트 추가 실패:", errorMessage);
+      alert(errorMessage || "요청에 실패했습니다. 잠시 후 다시 시도해주세요.");
+    },
+  });
+};
+
+export default usePostUniversityFavorite;
diff --git a/src/app/community/[boardCode]/[postId]/CommentSection.tsx b/src/app/community/[boardCode]/[postId]/CommentSection.tsx
@@ -49,6 +49,8 @@ const CommentSection = ({ comments, postId, refresh }: CommentSectionProps) => {
       });
   };
 
+  console.log("comments", comments);
+
   return (
     <div className="min-h-[50vh] pb-[49px]">
       {comments?.map((comment) => (
@@ -92,6 +94,8 @@ const Comment = ({
     setActiveDropdown(activeDropdown === commentId ? null : commentId);
   };
 
+  const isDeleted = comment.content === "";
+
   return (
     <div
       className={clsx(
@@ -126,7 +130,12 @@ const Comment = ({
       )}
       <div className="flex w-full flex-col">
         <div className="flex justify-between">
-          <CommentProfile user={comment.postFindSiteUserResponse} />
+          <CommentProfile
+            user={{
+              ...comment.postFindSiteUserResponse,
+              nickname: isDeleted ? "알 수 없음" : comment.postFindSiteUserResponse.nickname,
+            }}
+          />
           {comment.isOwner && (
             <CommentDropdown
               commentId={comment.id}
@@ -136,7 +145,9 @@ const Comment = ({
             />
           )}
         </div>
-        <div className="mt-3 text-sm font-normal leading-normal text-black">{comment.content}</div>
+        <div className="mt-3 text-sm font-normal leading-normal text-black">
+          {isDeleted ? "삭제된 댓글입니다" : comment.content}
+        </div>
         <div className="mt-2 overflow-hidden text-xs font-normal leading-normal text-[#7c7c7c]">
           {convertISODateToDateTime(comment.createdAt) || "1970. 01. 01. 00:00"}
         </div>
@@ -152,14 +163,14 @@ const CommentProfile = ({ user }: { user: CommunityUser }) => {
         <Image
           className="h-full w-full rounded-full"
           src={
-            user.profileImageUrl ? convertUploadedImageUrl(user.profileImageUrl) : "/images/placeholder/profile64.svg"
+            user?.profileImageUrl ? convertUploadedImageUrl(user?.profileImageUrl) : "/images/placeholder/profile64.svg"
           }
           width={40}
           height={40}
           alt="alt"
         />
       </div>
-      <div className="overflow-hidden text-sm font-medium leading-normal text-black">{user.nickname}</div>
+      <div className="overflow-hidden text-sm font-medium leading-normal text-black">{user?.nickname}</div>
     </div>
   );
 };
diff --git a/src/app/community/[boardCode]/[postId]/KebabMenu.tsx b/src/app/community/[boardCode]/[postId]/KebabMenu.tsx
@@ -1,9 +1,11 @@
 "use client";
 
+import { useRouter } from "next/navigation";
 import { useEffect, useRef, useState } from "react";
 
 import ReportPanel from "@/components/ui/ReportPanel";
 
+import useDeletePost from "@/api/community/client/useDeletePost";
 import { IconSetting } from "@/public/svgs/mentor";
 
 const useClickOutside = (ref, handler) => {
@@ -38,10 +40,14 @@ const IconLink = () => (
 // --- 메인 컴포넌트 ---
 type KebabMenuProps = {
   postId: number;
+  boardCode: string;
+  isOwner?: boolean;
 };
 
-const KebabMenu = ({ postId }: KebabMenuProps) => {
+const KebabMenu = ({ postId, boardCode, isOwner = false }: KebabMenuProps) => {
   const dropdownRef = useRef<HTMLDivElement>(null);
+  const { mutate: deletePost } = useDeletePost();
+  const router = useRouter();
 
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
 
@@ -77,7 +83,9 @@ const KebabMenu = ({ postId }: KebabMenuProps) => {
       {isDropdownOpen && (
         <div className="absolute right-0 top-full z-10 mt-2 w-40 origin-top-right rounded-lg border border-gray-100 bg-white shadow-lg">
           <ul className="p-1">
-            <ReportPanel idx={postId} />
+            <li>
+              <ReportPanel idx={postId} />
+            </li>
             <li key={"URL 복사"}>
               <button
                 onClick={handleCopyUrl}
@@ -89,6 +97,32 @@ const KebabMenu = ({ postId }: KebabMenuProps) => {
                 <span>{"URL 복사"}</span>
               </button>
             </li>
+            {isOwner && (
+              <>
+                <li key={"수정하기"}>
+                  <button
+                    onClick={() => {
+                      router.push(`/community/${boardCode}/${postId}/modify`);
+                    }}
+                    className={`flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-sm text-gray-700 hover:bg-gray-50`}
+                  >
+                    <span>{"수정하기"}</span>
+                  </button>
+                </li>
+                <li key={"삭제하기"}>
+                  <button
+                    onClick={() => {
+                      if (confirm("정말로 삭제하시겠습니까?")) {
+                        deletePost(postId);
+                      }
+                    }}
+                    className={`flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-sm text-gray-700 hover:bg-gray-50`}
+                  >
+                    <span>{"삭제하기"}</span>
+                  </button>
+                </li>
+              </>
+            )}
           </ul>
         </div>
       )}
diff --git a/src/app/community/[boardCode]/[postId]/PostPageContent.tsx b/src/app/community/[boardCode]/[postId]/PostPageContent.tsx
@@ -35,7 +35,7 @@ const PostPageContent = ({ boardCode, postId }: PostPageContentProps) => {
         handleBack={() => {
           router.push(`/community/${boardCode}`);
         }}
-        icon={<KebabMenu postId={postId} />}
+        icon={<KebabMenu isOwner={post.isOwner} postId={postId} boardCode={boardCode} />}
       />
       <Content post={post} postId={postId} />
       <CommentSection comments={post.postFindCommentResponses} postId={postId} refresh={refresh} />
diff --git a/src/app/university/[id]/InfoSection.tsx b/src/app/university/[id]/InfoSection.tsx
@@ -44,7 +44,7 @@ const InfoSection = ({
             </span>
           </div>
         </div>
-        {/* 기숙사 */}
+        {/* 자격요건 */}
         {detailsForApplyFold ? (
           <div
             className="flex h-[50px] items-center justify-between rounded-sm bg-k-50 px-3"
@@ -58,7 +58,7 @@ const InfoSection = ({
           >
             <div className="flex items-center gap-2.5">
               <DetailsForApplyIcon />
-              <span className="text-base font-semibold text-k-900">기숙사</span>
+              <span className="text-base font-semibold text-k-900">자격요건</span>
             </div>
             <div className="flex h-7 w-[50px] items-center justify-center rounded-full bg-k-50">
               <FoldIcon />
@@ -123,7 +123,7 @@ const InfoSection = ({
             <div className="flex items-center justify-between rounded-sm">
               <div className="flex items-center gap-2.5">
                 <DetailsForAccommodationIcon />
-                <span className="text-base font-semibold text-k-900">기숙사</span>
+                <span className="text-base font-semibold text-k-900">자격요건</span>
               </div>
               <div className="flex h-7 w-[50px] items-center justify-center rounded-full bg-k-50">
                 <UnFoldIcon />
diff --git a/src/app/university/[id]/UniversityBtns.tsx b/src/app/university/[id]/UniversityBtns.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import usePostUniversityFavorite from "@/api/university/client/usePostUniversityFavorite";
+
+const likeIcon = (
+  <svg xmlns="http://www.w3.org/2000/svg" width="19" height="16" viewBox="0 0 19 16" fill="none">
+    <path
+      d="M13.3562 0C11.7398 0 10.3052 0.634385 9.33325 1.72476C8.3613 0.634385 6.9267 0 5.31026 0C3.9024 0.00169364 2.55268 0.558508 1.55717 1.54831C0.561652 2.53811 0.0016233 3.88008 -8.01086e-05 5.27987C-8.01086e-05 11.0669 8.51337 15.6908 8.87544 15.8852C9.01614 15.9606 9.17345 16 9.33325 16C9.49306 16 9.65037 15.9606 9.79107 15.8852C10.1531 15.6908 18.6666 11.0669 18.6666 5.27987C18.6649 3.88008 18.1049 2.53811 17.1093 1.54831C16.1138 0.558508 14.7641 0.00169364 13.3562 0ZM12.9145 11.3885C11.7939 12.334 10.596 13.1849 9.33325 13.9325C8.07048 13.1849 6.87258 12.334 5.75199 11.3885C4.00843 9.90136 1.93095 7.63342 1.93095 5.27987C1.93095 4.38877 2.28699 3.53416 2.92073 2.90405C3.55447 2.27394 4.41402 1.91995 5.31026 1.91995C6.74245 1.91995 7.9413 2.67194 8.43935 3.88311C8.51184 4.05967 8.63557 4.21076 8.79478 4.31712C8.95399 4.42348 9.14145 4.48028 9.33325 4.48028C9.52506 4.48028 9.71252 4.42348 9.87173 4.31712C10.0309 4.21076 10.1547 4.05967 10.2272 3.88311C10.7252 2.67194 11.9241 1.91995 13.3562 1.91995C14.2525 1.91995 15.112 2.27394 15.7458 2.90405C16.3795 3.53416 16.7356 4.38877 16.7356 5.27987C16.7356 7.63342 14.6581 9.90136 12.9145 11.3885Z"
+      fill="#4672EE"
+    />
+  </svg>
+);
+
+const copyIcon = (
+  <svg xmlns="http://www.w3.org/2000/svg" width="17" height="19" viewBox="0 0 17 19" fill="none">
+    <path
+      d="M8.5 2.13333V11.7667M11.7143 4.4L8.5 1L5.28571 4.4M1 10.0667V15.7333C1 16.3345 1.22576 16.911 1.62763 17.3361C2.02949 17.7612 2.57454 18 3.14286 18H13.8571C14.4255 18 14.9705 17.7612 15.3724 17.3361C15.7742 16.911 16 16.3345 16 15.7333V10.0667"
+      stroke="#4672EE"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);
+
+interface UniversityBtnsProps {
+  universityId: number;
+}
+const UniversityBtns = ({ universityId }: UniversityBtnsProps) => {
+  const { mutate: postUniversityFavorite } = usePostUniversityFavorite();
+
+  const handleCopy = () => {
+    alert("URL이 복사되었습니다.");
+    navigator.clipboard.writeText(window.location.href).then(() => {});
+  };
+  return (
+    <>
+      <button
+        onClick={() => postUniversityFavorite(universityId)}
+        className={`/* stroke: #FFF; stroke-width: 1px; */ /* fill: linear-gradient(...) */ /* CSS의 fill은 SVG 속성이지만, 버튼 배경으로 적용합니다. */ /* backdrop-filter: blur(2px); */ /* filter: drop-shadow(...) */ /* 기타 스타일 */ rounded-full border border-white/80 bg-[linear-gradient(136deg,rgba(255,255,255,0.4)_14.87%,rgba(199,212,250,0.8)_89.1%)] p-3 drop-shadow-[2px_2px_6px_#C7D4FA] backdrop-blur-[2px] transition-transform duration-200 ease-in-out hover:scale-110 focus:outline-none focus:ring-2 focus:ring-white/50 active:scale-95`}
+      >
+        {likeIcon}
+      </button>
+      <button
+        onClick={handleCopy}
+        className={`/* stroke: #FFF; stroke-width: 1px; */ /* fill: linear-gradient(...) */ /* CSS의 fill은 SVG 속성이지만, 버튼 배경으로 적용합니다. */ /* backdrop-filter: blur(2px); */ /* filter: drop-shadow(...) */ /* 기타 스타일 */ rounded-full border border-white/80 bg-[linear-gradient(136deg,rgba(255,255,255,0.4)_14.87%,rgba(199,212,250,0.8)_89.1%)] p-3 drop-shadow-[2px_2px_6px_#C7D4FA] backdrop-blur-[2px] transition-transform duration-200 ease-in-out hover:scale-110 focus:outline-none focus:ring-2 focus:ring-white/50 active:scale-95`}
+      >
+        {copyIcon}
+      </button>
+    </>
+  );
+};
+
+export default UniversityBtns;
diff --git a/src/app/university/[id]/UniversityDetail.tsx b/src/app/university/[id]/UniversityDetail.tsx
@@ -1,4 +1,5 @@
 import Image from "next/image";
+import Link from "next/link";
 
 import { convertImageUrl } from "@/utils/fileUtils";
 
@@ -9,6 +10,7 @@ import MajorSection from "./MajorSection";
 import MapSection from "./MapSection";
 import SubTitleSection from "./SubTitleSection";
 import TitleSection from "./TitleSection";
+import UniversityBtns from "./UniversityBtns";
 
 import { University } from "@/types/university";
 
@@ -18,9 +20,12 @@ interface UniversityDetailProps {
 }
 
 const UniversityDetail = ({ university, koreanName }: UniversityDetailProps) => {
-  console.log("university", university);
   return (
     <div className="relative">
+      <div className="absolute top-4 flex w-full justify-between gap-3 px-5">
+        <UniversityBtns universityId={university.id} />
+      </div>
+
       <div className="relative -z-10 h-60 w-full bg-blue-100">
         <Image alt="대학 이미지" src={convertImageUrl(university.backgroundImageUrl)} fill className="object-cover" />
       </div>
diff --git a/src/components/ui/Dropdown/index.tsx b/src/components/ui/Dropdown/index.tsx
@@ -10,7 +10,7 @@ interface DropdownProps {
 }
 
 const Dropdown = ({ options }: DropdownProps) => (
-  <div className="w-37 absolute right-0 top-full z-[1000] flex flex-col rounded-lg shadow-[0px_10px_50px_0px_rgba(0,0,0,0.1)]">
+  <div className="absolute right-0 top-full z-[1000] flex w-36 flex-col rounded-lg shadow-[0px_10px_50px_0px_rgba(0,0,0,0.1)]">
     {options.map((option, index) => (
       <button
         key={option.label}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export enum QueryKeys {`
	`2`	`+ posts = "posts",`
	`3`	`+}`