{"version":3,"file":"SectionNavigation.Cf2hsGiR.mjs","names":["useRef","useState"],"sources":["https:/framerusercontent.com/modules/w8rNanDIoJ1gy8mdQNT5/NBGAoFpCGCkHps7beTCf/SectionNavigation.js"],"sourcesContent":["// 상세페이지 내비게이션 - 좌우 스크롤 가능하며 각 텍스트는 섹션과 연결되어 클릭 시 해당 섹션으로 스크롤\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{useRef,useState,useEffect,startTransition}from\"react\";/**\n * 상세페이지 섹션 네비게이션\n *\n * @framerIntrinsicWidth 800\n * @framerIntrinsicHeight 60\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight auto\n */export default function SectionNavigation(props){const{items=[{label:\"혜택\",targetId:\"section1\"},{label:\"브랜드 위크\",targetId:\"section2\"},{label:\"에센셜아이템\",targetId:\"section3\"},{label:\"포인트아이템\",targetId:\"section4\"}],backgroundColor=\"#FFFFFF\",inactiveColor=\"#666666\",activeColor=\"#000000\",inactiveFont,activeFont,padding=20,gap=40,showScrollIndicator=true,scrollBehavior=\"smooth\",indicatorColor=\"#000000\",scrollOffset=0,style}=props;const navRef=useRef(null);const scrollContainerRef=useRef(null);const itemRefs=useRef([]);const[activeIndex,setActiveIndex]=useState(0);const[canScrollLeft,setCanScrollLeft]=useState(false);const[canScrollRight,setCanScrollRight]=useState(false);const isScrollingToSection=useRef(false);const[indicatorStyle,setIndicatorStyle]=useState({left:0,width:0});const checkScrollability=()=>{if(!scrollContainerRef.current)return;const{scrollLeft,scrollWidth,clientWidth}=scrollContainerRef.current;startTransition(()=>{setCanScrollLeft(scrollLeft>0);setCanScrollRight(scrollLeft<scrollWidth-clientWidth-1);});};useEffect(()=>{checkScrollability();const container=scrollContainerRef.current;if(container){container.addEventListener(\"scroll\",checkScrollability);return()=>container.removeEventListener(\"scroll\",checkScrollability);}},[items]);useEffect(()=>{if(typeof window!==\"undefined\"){const handleResize=()=>checkScrollability();window.addEventListener(\"resize\",handleResize);return()=>window.removeEventListener(\"resize\",handleResize);}},[]);// Update indicator position when active index changes\nuseEffect(()=>{const updateIndicator=()=>{if(!itemRefs.current[activeIndex]||!scrollContainerRef.current||!navRef.current)return;const activeItem=itemRefs.current[activeIndex];const container=scrollContainerRef.current;const nav=navRef.current;const navRect=nav.getBoundingClientRect();const itemRect=activeItem.getBoundingClientRect();const left=itemRect.left-navRect.left;const width=itemRect.width;startTransition(()=>{setIndicatorStyle({left,width});});};updateIndicator();const container=scrollContainerRef.current;if(container){container.addEventListener(\"scroll\",updateIndicator);return()=>container.removeEventListener(\"scroll\",updateIndicator);}},[activeIndex]);// Observe sections\nuseEffect(()=>{if(typeof window===\"undefined\")return;const observerOptions={root:null,rootMargin:`-${scrollOffset+1}px 0px -80% 0px`,threshold:0};const observerCallback=entries=>{if(isScrollingToSection.current)return;entries.forEach(entry=>{if(entry.isIntersecting){const targetId=entry.target.id;const index=items.findIndex(item=>item.targetId===targetId);if(index!==-1){startTransition(()=>setActiveIndex(index));// Center the active item\nif(scrollContainerRef.current&&itemRefs.current[index]){const container=scrollContainerRef.current;const item=itemRefs.current[index];const containerWidth=container.clientWidth;const itemLeft=item.offsetLeft;const itemWidth=item.offsetWidth;const scrollTo=itemLeft-containerWidth/2+itemWidth/2;container.scrollTo({left:scrollTo,behavior:scrollBehavior});}}}});};const observer=new IntersectionObserver(observerCallback,observerOptions);items.forEach(item=>{const element=document.getElementById(item.targetId);if(element){observer.observe(element);}});return()=>{observer.disconnect();};},[items,scrollBehavior,scrollOffset]);const handleItemClick=(index,targetId)=>{isScrollingToSection.current=true;startTransition(()=>setActiveIndex(index));// Center the clicked item\nif(scrollContainerRef.current&&itemRefs.current[index]){const container=scrollContainerRef.current;const item=itemRefs.current[index];const containerWidth=container.clientWidth;const itemLeft=item.offsetLeft;const itemWidth=item.offsetWidth;const scrollTo=itemLeft-containerWidth/2+itemWidth/2;container.scrollTo({left:scrollTo,behavior:scrollBehavior});}if(typeof window!==\"undefined\"){const targetElement=document.getElementById(targetId);if(targetElement){const top=targetElement.getBoundingClientRect().top+window.pageYOffset-scrollOffset;window.scrollTo({top,behavior:scrollBehavior});setTimeout(()=>{isScrollingToSection.current=false;},1e3);}}};const isFixedWidth=style?.width===\"100%\";return /*#__PURE__*/_jsxs(\"div\",{ref:navRef,style:{...style,position:\"relative\",backgroundColor,overflow:\"hidden\",display:\"flex\",alignItems:\"center\",...isFixedWidth?{}:{minWidth:\"max-content\"}},children:[/*#__PURE__*/_jsxs(\"div\",{ref:scrollContainerRef,style:{display:\"flex\",gap:`${gap}px`,overflowX:\"auto\",overflowY:\"hidden\",scrollbarWidth:\"none\",msOverflowStyle:\"none\",WebkitOverflowScrolling:\"touch\",padding:`${padding}px`,paddingBottom:`${padding}px`,width:\"100%\"},onScroll:checkScrollability,children:[/*#__PURE__*/_jsx(\"style\",{children:`\n                        div::-webkit-scrollbar {\n                            display: none;\n                        }\n                    `}),items.map((item,index)=>/*#__PURE__*/_jsx(\"button\",{ref:el=>{itemRefs.current[index]=el;},onClick:()=>handleItemClick(index,item.targetId),style:{background:\"none\",border:\"none\",cursor:\"pointer\",padding:0,whiteSpace:\"nowrap\",color:activeIndex===index?activeColor:inactiveColor,transition:\"color 0.2s ease\",position:\"relative\",...activeIndex===index?activeFont:inactiveFont},onMouseEnter:e=>{if(activeIndex!==index){e.currentTarget.style.color=activeColor;}},onMouseLeave:e=>{if(activeIndex!==index){e.currentTarget.style.color=inactiveColor;}},children:item.label},index))]}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",bottom:0,left:indicatorStyle.left,width:indicatorStyle.width,height:\"2px\",backgroundColor:indicatorColor,transition:\"left 0.6s cubic-bezier(0.16, 1, 0.3, 1), width 0.6s cubic-bezier(0.16, 1, 0.3, 1)\",pointerEvents:\"none\"}}),showScrollIndicator&&canScrollRight&&/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",right:0,top:0,bottom:0,width:\"60px\",background:`linear-gradient(to right, transparent, ${backgroundColor})`,pointerEvents:\"none\"}})]});}addPropertyControls(SectionNavigation,{items:{type:ControlType.Array,title:\"Navigation Items\",control:{type:ControlType.Object,controls:{label:{type:ControlType.String,title:\"Label\",defaultValue:\"Section\"},targetId:{type:ControlType.String,title:\"Target Section ID\",defaultValue:\"section1\",description:\"섹션의 ID (예: section1)\"}}},defaultValue:[{label:\"혜택\",targetId:\"section1\"},{label:\"브랜드 위크\",targetId:\"section2\"},{label:\"에센셜아이템\",targetId:\"section3\"},{label:\"포인트아이템\",targetId:\"section4\"}]},backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"#FFFFFF\"},inactiveColor:{type:ControlType.Color,title:\"Inactive Color\",defaultValue:\"#666666\"},activeColor:{type:ControlType.Color,title:\"Active Color\",defaultValue:\"#000000\"},indicatorColor:{type:ControlType.Color,title:\"Indicator Color\",defaultValue:\"#000000\"},inactiveFont:{type:ControlType.Font,title:\"Inactive Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"18px\",variant:\"Medium\",letterSpacing:\"-0.02em\",lineHeight:\"1em\"}},activeFont:{type:ControlType.Font,title:\"Active Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"18px\",variant:\"Bold\",letterSpacing:\"-0.02em\",lineHeight:\"1em\"}},padding:{type:ControlType.Number,title:\"Padding\",defaultValue:20,min:0,max:60,step:4,unit:\"px\"},gap:{type:ControlType.Number,title:\"Gap\",defaultValue:40,min:10,max:100,step:5,unit:\"px\"},showScrollIndicator:{type:ControlType.Boolean,title:\"Scroll Indicator\",defaultValue:true,enabledTitle:\"Show\",disabledTitle:\"Hide\"},scrollBehavior:{type:ControlType.Enum,title:\"Scroll Behavior\",options:[\"smooth\",\"auto\"],optionTitles:[\"Smooth\",\"Instant\"],defaultValue:\"smooth\",displaySegmentedControl:true},scrollOffset:{type:ControlType.Number,title:\"Scroll Offset\",defaultValue:0,min:0,max:300,step:4,unit:\"px\",description:\"상단 고정 헤더 높이만큼 설정 (예: 80px)\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"SectionNavigation\",\"slots\":[],\"annotations\":{\"framerIntrinsicWidth\":\"800\",\"framerIntrinsicHeight\":\"60\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerSupportedLayoutHeight\":\"auto\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./SectionNavigation.map"],"mappings":"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"}