Merge pull request #247 from FE9-2/dev

cccwon2 · web-flow · commit 0163b13c0853 · 2024-12-24T16:18:18.000+09:00
12/24 - 4시 배포
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,14 +17,14 @@
     "@channel.io/channel-web-sdk-loader": "^2.0.0",
     "@hookform/resolvers": "^3.9.0",
     "@lottiefiles/react-lottie-player": "^3.5.4",
+    "@next/third-parties": "^15.1.2",
     "@studio-freight/lenis": "^1.0.42",
     "@supabase/supabase-js": "^2.47.10",
     "@tanstack/react-query": "^5.59.19",
     "axios": "^1.7.7",
     "date-fns": "^4.1.0",
     "form-data": "^4.0.1",
     "framer-motion": "^11.15.0",
-    "motion": "^11.15.0",
     "next": "14.2.15",
     "next-auth": "^4.24.10",
     "next-sitemap": "^4.2.3",
@@ -38,7 +38,6 @@
     "react-icons": "^5.3.0",
     "react-intersection-observer": "^9.14.0",
     "react-kakao-maps-sdk": "^1.1.27",
-    "react-modal": "^3.16.1",
     "react-responsive": "^10.0.0",
     "tailwind-merge": "^2.5.4",
     "zod": "^3.23.8",
diff --git a/public/sitemap.xml b/public/sitemap.xml
@@ -1,19 +1,19 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
-<url><loc>https://www.workroot.life/signup/applicant</loc><lastmod>2024-12-24T02:01:26.330Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://www.workroot.life/signup/owner</loc><lastmod>2024-12-24T02:01:26.331Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://www.workroot.life/login</loc><lastmod>2024-12-24T02:01:26.332Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://www.workroot.life/addform</loc><lastmod>2024-12-24T02:01:26.332Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://www.workroot.life/signup</loc><lastmod>2024-12-24T02:01:26.332Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://www.workroot.life/my-workform/applicant</loc><lastmod>2024-12-24T02:01:26.332Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://www.workroot.life/my-workform</loc><lastmod>2024-12-24T02:01:26.332Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://www.workroot.life/my-workform/owner</loc><lastmod>2024-12-24T02:01:26.332Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://www.workroot.life/mypage</loc><lastmod>2024-12-24T02:01:26.332Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://www.workroot.life/work-list</loc><lastmod>2024-12-24T02:01:26.332Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://www.workroot.life</loc><lastmod>2024-12-24T02:01:26.332Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://www.workroot.life/auth/callback</loc><lastmod>2024-12-24T02:01:26.332Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://www.workroot.life/work-talk</loc><lastmod>2024-12-24T02:01:26.332Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://www.workroot.life/work-talk/add</loc><lastmod>2024-12-24T02:01:26.332Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://www.workroot.life/stories/design-system/pages/albaList</loc><lastmod>2024-12-24T02:01:26.332Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://www.workroot.life/privacy</loc><lastmod>2024-12-24T02:01:26.332Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.workroot.life/signup</loc><lastmod>2024-12-24T07:12:16.222Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.workroot.life</loc><lastmod>2024-12-24T07:12:16.224Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.workroot.life/signup/applicant</loc><lastmod>2024-12-24T07:12:16.224Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.workroot.life/login</loc><lastmod>2024-12-24T07:12:16.224Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.workroot.life/addform</loc><lastmod>2024-12-24T07:12:16.224Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.workroot.life/my-workform/applicant</loc><lastmod>2024-12-24T07:12:16.224Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.workroot.life/my-workform</loc><lastmod>2024-12-24T07:12:16.224Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.workroot.life/my-workform/owner</loc><lastmod>2024-12-24T07:12:16.224Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.workroot.life/mypage</loc><lastmod>2024-12-24T07:12:16.224Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.workroot.life/work-list</loc><lastmod>2024-12-24T07:12:16.224Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.workroot.life/work-talk/add</loc><lastmod>2024-12-24T07:12:16.224Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.workroot.life/auth/callback</loc><lastmod>2024-12-24T07:12:16.225Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.workroot.life/work-talk</loc><lastmod>2024-12-24T07:12:16.225Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.workroot.life/privacy</loc><lastmod>2024-12-24T07:12:16.225Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.workroot.life/signup/owner</loc><lastmod>2024-12-24T07:12:16.225Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.workroot.life/stories/design-system/pages/albaList</loc><lastmod>2024-12-24T07:12:16.225Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
 </urlset>
diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx
@@ -5,7 +5,7 @@ import { motion, AnimatePresence } from "framer-motion";
 import Image from "next/image";
 import Lenis from "@studio-freight/lenis";
 import { useMediaQuery } from "react-responsive";
-import TypewriterText from "../components/animation/typewriterText";
+import TypewriterText from "../components/animation/TypewriterText";
 
 const slides = [
   {
diff --git a/src/app/(pages)/(workform)/apply/[formId]/page.tsx b/src/app/(pages)/(workform)/apply/[formId]/page.tsx
@@ -87,7 +87,7 @@ export default function Apply() {
       await queryClient.invalidateQueries({ queryKey: ["formDetail", formId] });
 
       toast.success("지원이 완료되었습니다.");
-      router.push("/my-workform");
+      router.push(`/work/${formId}`);
     },
 
     onError: (error) => {
diff --git a/src/app/(pages)/mypage/components/sections/CommentsSection.tsx b/src/app/(pages)/mypage/components/sections/CommentsSection.tsx
@@ -9,6 +9,7 @@ import ContentSection from "@/app/components/layout/ContentSection";
 import useWidth from "@/hooks/useWidth";
 import ScrollTopButton from "@/app/components/button/default/ScrollTopButton";
 import SamllLoadingSpinner from "@/app/components/loading-spinner/SmallLoadingSpinner";
+import LoadingSpinner from "@/app/components/loading-spinner/LoadingSpinner";
 
 export default function CommentsSection() {
   const [currentPage, setCurrentPage] = useState(1);
@@ -43,6 +44,10 @@ export default function CommentsSection() {
     window.scrollTo(0, 0);
   };
 
+  if (isLoading) {
+    return <LoadingSpinner />;
+  }
+
   if (error) {
     return (
       <div className="flex h-[calc(100vh-300px)] items-center justify-center">
diff --git a/src/app/(pages)/mypage/components/sections/PostsSection.tsx b/src/app/(pages)/mypage/components/sections/PostsSection.tsx
@@ -11,6 +11,8 @@ import ScrollTopButton from "@/app/components/button/default/ScrollTopButton";
 import BoardPostItem from "@/app/components/card/board/BoardPostItem";
 import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinner";
 import SamllLoadingSpinner from "@/app/components/loading-spinner/SmallLoadingSpinner";
+import LoadingSpinner from "@/app/components/loading-spinner/LoadingSpinner";
+import { useUser } from "@/hooks/queries/user/me/useUser";
 
 export default function PostsSection() {
   const { orderBy } = useMySortStore();
@@ -36,7 +38,7 @@ export default function PostsSection() {
     limit: postsPerPage,
     orderBy: orderBy.posts,
   });
-
+  const { user } = useUser();
   useEffect(() => {
     if (inView && hasNextPage && !isFetchingNextPage) {
       fetchNextPage();
@@ -51,6 +53,10 @@ export default function PostsSection() {
     );
   }
 
+  if (isLoading) {
+    return <LoadingSpinner />;
+  }
+
   return (
     <div className="flex flex-col items-center">
       {/* 메인 콘텐츠 영역 */}
@@ -70,7 +76,13 @@ export default function PostsSection() {
                 {data.pages.map((page) => (
                   <React.Fragment key={page.nextCursor}>
                     {page.data.map((post) => (
-                      <BoardPostItem post={post} key={post.id} />
+                      <BoardPostItem
+                        post={post}
+                        key={post.id}
+                        isAuthor={!!(post.writer.id === user?.id)}
+                        limit={postsPerPage}
+                        orderBy={orderBy.posts}
+                      />
                     ))}
                   </React.Fragment>
                 ))}
diff --git a/src/app/(pages)/mypage/page.tsx b/src/app/(pages)/mypage/page.tsx
@@ -6,10 +6,13 @@ import CommentsSection from "./components/sections/CommentsSection";
 import ScrapsSection from "./components/sections/ScrapsSection";
 import { userRoles } from "@/constants/userRoles";
 import { useUser } from "@/hooks/queries/user/me/useUser";
+import toast from "react-hot-toast";
+import { useRouter } from "next/navigation";
 
 export default function MyPage() {
   const searchParams = useSearchParams();
   const currentTab = searchParams.get("tab") || "posts";
+  const router = useRouter();
   const { user } = useUser();
   const isApplicant = user?.role === userRoles.APPLICANT;
 
@@ -19,5 +22,10 @@ export default function MyPage() {
     ...(isApplicant && { scrap: <ScrapsSection /> }),
   }[currentTab];
 
+  if (!user) {
+    toast.error("로그인이 필요한 페이지입니다.");
+    router.push("/login");
+  }
+
   return TabContent;
 }
diff --git a/src/app/components/button/dropdown/KebabDropdown.tsx b/src/app/components/button/dropdown/KebabDropdown.tsx
@@ -29,11 +29,14 @@ const KebabDropdown = ({ options, className = "" }: KebabDropdownProps) => {
     <div ref={dropdownRef} className={cn("relative inline-block text-left", className)}>
       <button
         type="button"
-        onClick={() => setIsOpen(!isOpen)}
-        className="rounded-full hover:bg-grayscale-50"
+        onClick={(e) => {
+          setIsOpen(!isOpen);
+          e.stopPropagation();
+        }}
+        className="rounded-full transition-transform hover:scale-125 hover:bg-grayscale-50"
         aria-label="메뉴 더보기"
       >
-        <BsThreeDotsVertical className="text-sm text-grayscale-200 lg:text-xl" />
+        <BsThreeDotsVertical className="text-md text-grayscale-200 lg:text-xl" />
       </button>
 
       {isOpen && (
@@ -42,7 +45,8 @@ const KebabDropdown = ({ options, className = "" }: KebabDropdownProps) => {
             <button
               type="button"
               key={`${index}-${option.label}`}
-              onClick={() => {
+              onClick={(e) => {
+                e.stopPropagation();
                 option.onClick();
                 setIsOpen(false);
               }}
diff --git a/src/app/components/card/board/BoardComment.tsx b/src/app/components/card/board/BoardComment.tsx
@@ -67,7 +67,7 @@ const BoardComment = ({
 
   return (
     <Link href={`work-talk/${postId}`}>
-      <div className="relative flex h-[202px] w-[327px] flex-col gap-2 rounded-[16px] border border-line-200 bg-grayscale-50 p-6 shadow-md md:w-[600px] lg:h-[264px] lg:w-full">
+      <div className="relative flex h-[202px] w-[327px] flex-col gap-2 rounded-[16px] border border-line-200 bg-grayscale-50 p-6 shadow-md transition-transform hover:scale-105 md:w-[600px] lg:h-[264px] lg:w-full">
         {/* Post Section */}
         <div className="flex w-full flex-col gap-4 border-b border-line-100 pb-2 lg:pb-4">
           <div className="flex items-center gap-[6px] lg:gap-2">
diff --git a/src/app/components/card/board/BoardPostItem.tsx b/src/app/components/card/board/BoardPostItem.tsx
@@ -1,17 +1,71 @@
+"use client";
 import { PostListType } from "@/types/response/post";
 import { formatLocalDate } from "@/utils/workDayFormatter";
 import Image from "next/image";
 import Link from "next/link";
+import KebabDropdown from "../../button/dropdown/KebabDropdown";
+import { useRouter } from "next/navigation";
+import useModalStore from "@/store/modalStore";
+import { useDeleteComment } from "@/hooks/queries/post/comment/useDeleteComment";
+import { useQueryClient } from "@tanstack/react-query";
+
+const BoardPostItem = ({
+  post,
+  isAuthor,
+  limit,
+  orderBy,
+}: {
+  post: PostListType;
+  isAuthor: boolean;
+  limit: number;
+  orderBy: string;
+}) => {
+  const router = useRouter();
+  const deleteComment = useDeleteComment(String(post.id));
+  const queryClient = useQueryClient();
+  const { openModal, closeModal } = useModalStore();
+
+  const handleDelete = () => {
+    openModal("customForm", {
+      isOpen: true,
+      title: "게시글을 삭제할까요?",
+      content: "삭제된 게시글은 복구할 수 없습니다.",
+      confirmText: "삭제하기",
+      cancelText: "취소",
+      onConfirm: () => {
+        deleteComment.mutate(undefined, {
+          onSuccess: async () => {
+            await queryClient.invalidateQueries({ queryKey: ["post"] });
+            await queryClient.invalidateQueries({ queryKey: ["myPosts", { limit, orderBy }] });
+            closeModal();
+          },
+        });
+      },
+      onCancel: () => {
+        closeModal();
+      },
+    });
+  };
+
+  const dropdownOptions = [
+    {
+      label: "수정하기",
+      onClick: () => router.push(`/work-talk/${post.id}/edit`),
+    },
+    {
+      label: "삭제하기",
+      onClick: handleDelete,
+    },
+  ];
 
-const BoardPostItem = ({ post }: { post: PostListType }) => {
   return (
     <Link
       href={`/work-talk/${post.id}`}
       className="block cursor-pointer transition-transform duration-300 hover:scale-[1.02]"
     >
       <div className="relative flex h-[202px] min-w-[327px] flex-col justify-between rounded-[16px] border border-line-200 bg-grayscale-50 p-6 shadow-md md:w-[600px] lg:h-[264px] lg:w-full">
         <div className="flex flex-col gap-2">
-          <h3 className="text-[16px] font-semibold text-black-400 lg:text-[20px]">{post.title}</h3>
+          <h3 className="line-clamp-1 text-[16px] font-semibold text-black-400 lg:text-[20px]">{post.title}</h3>
           <p className="line-clamp-3 overflow-hidden text-[14px] text-grayscale-500 lg:text-[18px]">{post.content}</p>
         </div>
 
@@ -48,6 +102,9 @@ const BoardPostItem = ({ post }: { post: PostListType }) => {
             </div>
           </div>
         </div>
+        <div className="absolute right-3 top-6 size-9 bg-white text-center" onClick={(e) => e.stopPropagation()}>
+          {isAuthor && <KebabDropdown options={dropdownOptions} />}
+        </div>
       </div>
     </Link>
   );
diff --git a/src/app/components/card/cardList/AlbaListItem.tsx b/src/app/components/card/cardList/AlbaListItem.tsx
@@ -195,7 +195,7 @@ const AlbaListItem = ({
                   <BsThreeDotsVertical className="h-6 w-6" />
                 </button>
                 {showDropdown && (
-                  <div className="absolute right-0 top-8 z-10 w-32 rounded-lg border border-grayscale-200 bg-white py-2 shadow-lg">
+                  <div className="absolute right-0 top-8 z-10 w-32 overflow-hidden rounded-lg border border-grayscale-200 bg-white shadow-lg">
                     {isApplicant ? (
                       <>
                         <button
diff --git a/src/app/components/card/cardList/apply/MyApplicationListItem.tsx b/src/app/components/card/cardList/apply/MyApplicationListItem.tsx
@@ -53,7 +53,7 @@ const MyApplicationListItem = ({ createdAt, status, resumeId, resumeName, form }
           </div>
 
           {/* 공고 제목 */}
-          <div className="text-grayscale-900 text-lg font-bold md:text-xl">{form.title}</div>
+          <div className="text-grayscale-900 line-clamp-1 text-lg font-bold md:text-xl">{form.title}</div>
 
           {/* 공고 설명 (2줄 제한) */}
           <p className="text-grayscale-600 line-clamp-2 h-[48px] text-sm md:line-clamp-2 md:text-base">
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -7,6 +7,7 @@ import { viewport } from "./viewport";
 import { hakgyoFont, nexonFont } from "./fonts";
 import MouseTrail from "./components/mouseTrail/MouseTrail";
 import CustomCursor from "./components/mouseTrail/CustomCursor";
+import { GoogleAnalytics } from "@next/third-parties/google";
 
 export { metadata, viewport };
 
@@ -23,6 +24,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           <Header />
           <main className="min-h-[80vh] pt-16">{children}</main>
         </ClientLayout>
+        <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_ID || ""} />
       </body>
     </html>
   );
diff --git a/src/app/stories/design-system/components/card/cardList/BoardPostItem.stories.tsx b/src/app/stories/design-system/components/card/cardList/BoardPostItem.stories.tsx
@@ -29,5 +29,5 @@ const post = {
   createdAt: new Date(),
 };
 export const Default: Story = {
-  args: { post },
+  args: { post, isAuthor: true, limit: 10, orderBy: "최신순" },
 };

Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@ import { motion, AnimatePresence } from "framer-motion";`
`5`	`5`	`import Image from "next/image";`
`6`	`6`	`import Lenis from "@studio-freight/lenis";`
`7`	`7`	`import { useMediaQuery } from "react-responsive";`
`8`		`-import TypewriterText from "../components/animation/typewriterText";`
	`8`	`+import TypewriterText from "../components/animation/TypewriterText";`
`9`	`9`
`10`	`10`	`const slides = [`
`11`	`11`	`{`