From 12513e52b8ad173059e9bc21631960673c61c81a Mon Sep 17 00:00:00 2001
From: ghdtnals <hongsumin58@gmail.com>
Date: Thu, 11 Dec 2025 12:27:20 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=ED=97=A4=EB=8D=94=EC=97=90=20=ED=8C=90?=
 =?UTF-8?q?=EB=A7=A4=ED=95=98=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/icons/sell.svg                         |  7 +++++
 .../createPost/lib/useOpenCreatePost.ts       | 23 ++++++++++++++
 src/widgets/header/ui/HeaderDesktop.tsx       | 28 +++++++++++++++--
 src/widgets/header/ui/MobileSideMenu.tsx      | 30 +++++++++++++------
 4 files changed, 77 insertions(+), 11 deletions(-)
 create mode 100644 public/icons/sell.svg
 create mode 100644 src/features/createPost/lib/useOpenCreatePost.ts

diff --git a/public/icons/sell.svg b/public/icons/sell.svg
new file mode 100644
index 00000000..d9c6a9f5
--- /dev/null
+++ b/public/icons/sell.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="256" height="256" viewBox="0 0 256 256" xml:space="preserve">
+<g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: #A8ABB3; fill-rule: nonzero; opacity: 1;" transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)">
+	<path d="M 80.829 28.501 C 74.406 14.581 60.352 5.588 45.027 5.588 c -18.641 0 -34.29 13.013 -38.367 30.428 l -1.097 -1.803 c -0.862 -1.416 -2.707 -1.866 -4.123 -1.003 c -1.415 0.861 -1.865 2.707 -1.003 4.123 l 5.614 9.227 c 0.011 0.018 0.027 0.031 0.038 0.049 c 0.093 0.145 0.2 0.279 0.316 0.406 c 0.027 0.03 0.049 0.064 0.077 0.093 c 0.148 0.149 0.311 0.282 0.488 0.398 c 0.046 0.03 0.097 0.051 0.145 0.079 c 0.135 0.078 0.272 0.15 0.419 0.207 c 0.07 0.027 0.142 0.045 0.214 0.067 c 0.132 0.04 0.264 0.074 0.403 0.096 c 0.036 0.006 0.07 0.021 0.106 0.025 C 8.377 47.993 8.496 48 8.615 48 c 0.2 0 0.398 -0.021 0.592 -0.06 c 0.118 -0.024 0.228 -0.066 0.341 -0.103 c 0.073 -0.024 0.148 -0.039 0.219 -0.068 c 0.128 -0.053 0.246 -0.124 0.364 -0.194 c 0.049 -0.029 0.103 -0.05 0.151 -0.082 c 0.164 -0.11 0.317 -0.235 0.457 -0.375 l 7.672 -7.672 c 1.172 -1.171 1.172 -3.071 0 -4.242 c -1.171 -1.172 -3.071 -1.172 -4.242 0 l -1.513 1.513 c 3.694 -14.43 16.807 -25.13 32.372 -25.13 c 12.993 0 24.908 7.625 30.354 19.427 c 0.693 1.504 2.477 2.16 3.98 1.467 C 80.867 31.787 81.523 30.005 80.829 28.501 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: #A8ABB3; fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round"/>
+	<path d="M 89.562 52.668 l -5.614 -9.227 c -0.01 -0.017 -0.025 -0.03 -0.036 -0.047 c -0.095 -0.149 -0.205 -0.287 -0.324 -0.417 c -0.024 -0.027 -0.044 -0.058 -0.069 -0.084 c -0.148 -0.15 -0.312 -0.283 -0.489 -0.399 c -0.045 -0.03 -0.095 -0.05 -0.142 -0.077 c -0.135 -0.079 -0.274 -0.151 -0.421 -0.208 c -0.07 -0.027 -0.142 -0.044 -0.214 -0.066 c -0.132 -0.04 -0.264 -0.074 -0.403 -0.096 c -0.036 -0.006 -0.07 -0.021 -0.107 -0.025 c -0.052 -0.006 -0.103 0.003 -0.155 -0.001 C 81.52 42.016 81.455 42 81.385 42 c -0.061 0 -0.117 0.014 -0.177 0.018 c -0.093 0.005 -0.184 0.014 -0.276 0.028 c -0.128 0.019 -0.25 0.049 -0.372 0.084 c -0.08 0.023 -0.159 0.044 -0.236 0.073 c -0.135 0.051 -0.262 0.116 -0.387 0.185 c -0.059 0.033 -0.12 0.059 -0.177 0.096 c -0.18 0.116 -0.349 0.247 -0.5 0.398 l -7.672 7.672 c -1.172 1.171 -1.172 3.071 0 4.242 c 1.172 1.172 3.07 1.172 4.242 0 l 1.513 -1.513 c -3.694 14.43 -16.807 25.13 -32.372 25.13 c -13.459 0 -25.544 -8.011 -30.788 -20.408 c -0.646 -1.526 -2.405 -2.243 -3.932 -1.594 c -1.526 0.646 -2.24 2.405 -1.594 3.932 c 6.185 14.622 20.439 24.07 36.314 24.07 c 18.641 0 34.29 -13.013 38.367 -30.429 l 1.097 1.803 c 0.564 0.928 1.553 1.44 2.565 1.44 c 0.531 0 1.069 -0.141 1.557 -0.437 C 89.974 55.93 90.423 54.084 89.562 52.668 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: #A8ABB3; fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round"/>
+	<path d="M 48.004 42.905 l -4.029 -1.476 c -0.062 -0.022 -0.125 -0.043 -0.188 -0.062 c -1.598 -0.469 -2.847 -1.626 -3.428 -3.174 c -0.491 -1.31 -0.443 -2.733 0.136 -4.006 c 0.579 -1.273 1.619 -2.245 2.929 -2.736 c 1.309 -0.492 2.732 -0.444 4.006 0.136 c 1.273 0.579 2.246 1.619 2.737 2.929 c 0.581 1.551 2.31 2.334 3.862 1.755 c 1.551 -0.582 2.337 -2.311 1.755 -3.863 c -1.343 -3.581 -4.331 -6.071 -7.785 -6.944 v -1.941 c 0 -1.657 -1.343 -3 -3 -3 c -1.657 0 -3 1.343 -3 3 v 2.092 c -0.228 0.069 -0.456 0.133 -0.682 0.217 c -2.811 1.054 -5.042 3.139 -6.285 5.872 c -1.242 2.732 -1.346 5.785 -0.292 8.596 c 1.238 3.299 3.878 5.77 7.255 6.794 l 4.029 1.476 c 0.063 0.023 0.125 0.044 0.188 0.063 c 1.598 0.469 2.847 1.625 3.428 3.175 c 0.491 1.31 0.442 2.732 -0.136 4.006 c -0.579 1.273 -1.619 2.245 -2.93 2.736 c -1.311 0.49 -2.733 0.44 -4.006 -0.136 c -1.273 -0.579 -2.245 -1.619 -2.736 -2.93 c -0.582 -1.552 -2.312 -2.342 -3.862 -1.755 c -1.551 0.581 -2.337 2.311 -1.756 3.862 c 1.054 2.811 3.139 5.042 5.872 6.284 c 0.623 0.283 1.264 0.493 1.914 0.658 v 1.944 c 0 1.657 1.343 3 3 3 c 1.657 0 3 -1.343 3 -3 v -2.088 c 0.228 -0.07 0.456 -0.137 0.682 -0.221 c 2.811 -1.054 5.043 -3.139 6.285 -5.872 c 1.242 -2.732 1.346 -5.785 0.292 -8.595 C 54.022 46.401 51.381 43.93 48.004 42.905 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: #A8ABB3; fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round"/>
+</g>
+</svg>
\ No newline at end of file
diff --git a/src/features/createPost/lib/useOpenCreatePost.ts b/src/features/createPost/lib/useOpenCreatePost.ts
new file mode 100644
index 00000000..13bc5f35
--- /dev/null
+++ b/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 };
+};
diff --git a/src/widgets/header/ui/HeaderDesktop.tsx b/src/widgets/header/ui/HeaderDesktop.tsx
index ca51edf0..77fb9964 100644
--- a/src/widgets/header/ui/HeaderDesktop.tsx
+++ b/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,6 +41,23 @@ 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}
@@ -41,9 +65,9 @@ const HeaderDesktop = ({
                   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()}
diff --git a/src/widgets/header/ui/MobileSideMenu.tsx b/src/widgets/header/ui/MobileSideMenu.tsx
index 042e977f..dbdb4b59 100644
--- a/src/widgets/header/ui/MobileSideMenu.tsx
+++ b/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"