헤더에 판매하기 버튼 추가

src/features/createPost/lib/useOpenCreatePost.ts

@@ -0,0 +1,23 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useAuthStore } from "@/features/auth/model/auth.store";
+import { usePostCreateModal } from "./usePostCreateModal";
+
+export const useOpenCreatePostWithAuth = () => {
+  const router = useRouter();
+  const isLogined = useAuthStore((state) => state.isLogined);
+
+  const { openPostCreateModal } = usePostCreateModal();
+
+  const handleOpen = () => {
+    if (!isLogined) {
+      router.push("/login");
+      return;
+    }
+
+    openPostCreateModal();
+  };
+
+  return { handleOpen };
+};

src/widgets/header/ui/HeaderDesktop.tsx

@@ -1,7 +1,9 @@
 "use client";
 
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 import SearchForm from "./SearchForm";
+import { useOpenCreatePostWithAuth } from "@/features/createPost/lib/useOpenCreatePost";
 
 interface HeaderDesktopProps {
   isLogined: boolean;
@@ -23,6 +25,11 @@ const HeaderDesktop = ({
   navItems,
   onOpenChat,
 }: HeaderDesktopProps) => {
+  const pathname = usePathname();
+  const { handleOpen } = useOpenCreatePostWithAuth();
+
+  const hideSellButton = pathname.startsWith("/my");
+
   return (
     <div className="hidden w-full items-center justify-between md:flex">
       <div className="text-white">
@@ -34,16 +41,33 @@ const HeaderDesktop = ({
 
         {isLogined ? (
           <ul className="flex text-sm font-normal text-white">
+            {!hideSellButton && (
+              <li className="flex items-center justify-center px-3">
+                <button
+                  type="button"
+                  onClick={handleOpen}
+                  className="flex cursor-pointer items-center justify-center"
+                >
+                  <img
+                    src="/icons/sell.svg"
+                    alt="판매하기"
+                    className="h-4 w-4"
+                  />
+                  <p className="ml-1">판매하기</p>
+                </button>
+              </li>
+            )}
+
             {navItems.map(({ href, label, icon, hasDivider }) => (
               <li
                 key={href}
                 className={`flex items-center justify-center px-3 first:pr-3 last:pl-3 ${
                   hasDivider
                     ? "relative before:absolute before:left-0 before:h-4 before:w-px before:bg-white after:absolute after:right-0 after:h-4 after:w-px after:bg-white"
                     : ""
-                } `}
+                }`}
               >
-                {href === "/chat" && onOpenChat ? (
+                {href === "/chat" ? (
                   <button
                     type="button"
                     onClick={() => onOpenChat()}

src/widgets/header/ui/MobileSideMenu.tsx

@@ -2,9 +2,11 @@
 
 import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
+import { usePathname } from "next/navigation";
 import Link from "next/link";
 import { useModalStore } from "@/shared/model/modal.store";
 import { useAuthStore } from "@/features/auth/model/auth.store";
+import { useOpenCreatePostWithAuth } from "@/features/createPost/lib/useOpenCreatePost";
 import cn from "@/shared/lib/cn";
 
 export default function MobileSideMenu({
@@ -19,10 +21,14 @@ export default function MobileSideMenu({
   }) => void;
 }) {
   const router = useRouter();
+  const pathname = usePathname();
   const { isLogined, logout } = useAuthStore();
   const { openModal, closeModal } = useModalStore();
+  const { handleOpen } = useOpenCreatePostWithAuth();
   const [isVisible, setIsVisible] = useState(false);
 
+  const hideSellButton = pathname.startsWith("/my");
+
   useEffect(() => {
     const timer = requestAnimationFrame(() => setIsVisible(true));
     return () => cancelAnimationFrame(timer);
@@ -85,15 +91,20 @@ export default function MobileSideMenu({
                   </button>
                 </li>
 
-                <li>
-                  {/* <Link
-                    href="/ai"
-                    className="block px-4 py-3 text-white hover:bg-white/10"
-                    onClick={handleClose}
-                  >
-                    분석하기
-                  </Link> */}
-                </li>
+                {!hideSellButton && (
+                  <li>
+                    <button
+                      type="button"
+                      onClick={() => {
+                        handleOpen();
+                        handleClose();
+                      }}
+                      className="w-full px-4 py-3 text-left text-white hover:bg-white/10"
+                    >
+                      판매하기
+                    </button>
+                  </li>
+                )}
 
                 <li>
                   <Link
@@ -150,6 +161,7 @@ export default function MobileSideMenu({
                     로그인
                   </Link>
                 </li>
+
                 <li>
                   <Link
                     href="/signup"