From a55d06655f59f8b2305a9554fda59f19db30a4e2 Mon Sep 17 00:00:00 2001 From: caadiq Date: Sat, 3 Jan 2026 10:16:38 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EC=BB=A4=EC=8A=A4=ED=85=80=20=ED=88=B4?= =?UTF-8?q?=ED=8C=81=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20=EB=B0=8F=20=EB=A9=94=EB=89=B4=20=EC=95=A0=EB=8B=88?= =?UTF-8?q?=EB=A9=94=EC=9D=B4=EC=85=98=20=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 마우스 따라다니는 커스텀 Tooltip 컴포넌트 구현 - AdminAlbums 관리 버튼에 툴팁 적용 - 앨범 상세 점3개 메뉴 열기/닫기 애니메이션 추가 - 컨셉 포토에 lazy loading 추가 --- frontend/src/components/Tooltip.jsx | 70 +++++++++++++++++++ frontend/src/pages/pc/AlbumDetail.jsx | 49 +++++++------ .../src/pages/pc/admin/AdminAlbumPhotos.jsx | 1 - frontend/src/pages/pc/admin/AdminAlbums.jsx | 46 ++++++------ 4 files changed, 124 insertions(+), 42 deletions(-) create mode 100644 frontend/src/components/Tooltip.jsx diff --git a/frontend/src/components/Tooltip.jsx b/frontend/src/components/Tooltip.jsx new file mode 100644 index 0000000..7872d8d --- /dev/null +++ b/frontend/src/components/Tooltip.jsx @@ -0,0 +1,70 @@ +import { useState, useRef } from 'react'; +import ReactDOM from 'react-dom'; +import { motion, AnimatePresence } from 'framer-motion'; + +/** + * 커스텀 툴팁 컴포넌트 + * 마우스 커서를 따라다니는 방식 + * @param {React.ReactNode} children - 툴팁을 표시할 요소 + * @param {string} text - 툴팁에 표시할 텍스트 (content prop과 호환) + * @param {string} content - 툴팁에 표시할 텍스트 (text prop과 호환) + */ +const Tooltip = ({ children, text, content, className = "" }) => { + const [isVisible, setIsVisible] = useState(false); + const [position, setPosition] = useState({ bottom: 0, left: 0 }); + const triggerRef = useRef(null); + + // text 또는 content prop 사용 + const tooltipText = text || content; + + const handleMouseEnter = (e) => { + // 마우스 커서 위치를 기준으로 툴팁 위치 설정 (커서 위로) + setPosition({ + bottom: window.innerHeight - e.clientY + 10, + left: e.clientX + }); + setIsVisible(true); + }; + + const handleMouseMove = (e) => { + // 마우스 이동 시 툴팁 위치 업데이트 + setPosition({ + bottom: window.innerHeight - e.clientY + 10, + left: e.clientX + }); + }; + + return ( + <> +
setIsVisible(false)} + > + {children} +
+ {isVisible && tooltipText && ReactDOM.createPortal( + + + {tooltipText} + + , + document.body + )} + + ); +}; + +export default Tooltip; diff --git a/frontend/src/pages/pc/AlbumDetail.jsx b/frontend/src/pages/pc/AlbumDetail.jsx index babfc43..a624bf7 100644 --- a/frontend/src/pages/pc/AlbumDetail.jsx +++ b/frontend/src/pages/pc/AlbumDetail.jsx @@ -230,30 +230,38 @@ function AlbumDetail() {
- {showMenu && ( - <> -
setShowMenu(false)} - /> -
- -
- - )} + + + + )} +
)}
@@ -381,6 +389,7 @@ function AlbumDetail() { {`컨셉 diff --git a/frontend/src/pages/pc/admin/AdminAlbumPhotos.jsx b/frontend/src/pages/pc/admin/AdminAlbumPhotos.jsx index 4d10589..63bd38d 100644 --- a/frontend/src/pages/pc/admin/AdminAlbumPhotos.jsx +++ b/frontend/src/pages/pc/admin/AdminAlbumPhotos.jsx @@ -969,7 +969,6 @@ function AdminAlbumPhotos() { } }} className="w-10 h-8 bg-primary/10 text-primary rounded-lg text-center text-sm font-bold border-0 focus:outline-none focus:ring-2 focus:ring-primary [appearance:textfield]" - title="순서를 직접 입력할 수 있습니다" /> diff --git a/frontend/src/pages/pc/admin/AdminAlbums.jsx b/frontend/src/pages/pc/admin/AdminAlbums.jsx index 179c74f..899f7e5 100644 --- a/frontend/src/pages/pc/admin/AdminAlbums.jsx +++ b/frontend/src/pages/pc/admin/AdminAlbums.jsx @@ -6,6 +6,7 @@ import { Home, ChevronRight, LogOut, Calendar, AlertTriangle, X } from 'lucide-react'; import Toast from '../../../components/Toast'; +import Tooltip from '../../../components/Tooltip'; function AdminAlbums() { const navigate = useNavigate(); @@ -287,27 +288,30 @@ function AdminAlbums() {
- - - + + + + + + + + +