// 스윙 영상 리스트 + 스윙 상세 (샷 분포도 / 목표 적중률) // ===== 스윙 영상 (스윙영상 탭) — Figma 04.0.CategoryHome_Video ===== const SW_MONTHS = ["2026년 1월","2025년 12월","2025년 11월","2025년 10월","2025년 9월","2025년 8월"]; const SW_SHOTS = ["전체","티샷","세컨샷","어프로치","퍼팅","리플레이샷"]; // FS SwingShotType const SW_SORTS = ["최신순","좋아요순"]; // FS SwingSortType const SW_MY = { "2026년 1월":[ {date:"1월 20일", store:"골드레이크 · 골드/레이크", ic:"multi", clips:[{dist:"20.1m",club:"어프로치",shot:"어프로치"},{dist:"153.9m",club:"드라이버",shot:"티샷",best:true},{dist:"3.9m",club:"퍼터",shot:"퍼팅"}]}, {date:"1월 12일", store:"서산수", ic:"tree", clips:[{dist:"88.2m",club:"7번 아이언",shot:"세컨샷"},{dist:"151.4m",club:"드라이버",shot:"티샷"}]}, {date:"1월 4일", store:"루트52", ic:"fire", clips:[{dist:"20.1m",club:"어프로치",shot:"어프로치"},{dist:"175.5m",club:"드라이버",shot:"티샷",best:true},{dist:"120.1m",club:"6번 아이언",shot:"세컨샷"}]}, ], "2025년 12월":[ {date:"12월 24일", store:"판교점 · 마스터", ic:"multi", clips:[{dist:"178.2m",club:"드라이버",shot:"티샷"},{dist:"95.5m",club:"8번 아이언",shot:"세컨샷"},{dist:"2.1m",club:"퍼터",shot:"퍼팅"}]}, {date:"12월 10일", store:"서산수", ic:"tree", clips:[{dist:"30.4m",club:"웨지",shot:"어프로치"},{dist:"165.8m",club:"드라이버",shot:"티샷",best:true}]}, ], }; const SW_TRAINING = { "2026년 1월":[ {date:"1월 18일", store:"판교점 · 연습", ic:"tree", clips:[{dist:"185.2m",club:"드라이버",shot:"티샷",best:true},{dist:"142.1m",club:"5번 아이언",shot:"세컨샷"},{dist:"90.4m",club:"9번 아이언",shot:"세컨샷"}]}, {date:"1월 9일", store:"판교점 · 연습", ic:"tree", clips:[{dist:"28.3m",club:"웨지",shot:"어프로치"},{dist:"172.0m",club:"드라이버",shot:"티샷"}]}, ], "2025년 12월":[ {date:"12월 28일", store:"강남점 · 연습", ic:"tree", clips:[{dist:"160.5m",club:"드라이버",shot:"티샷"},{dist:"110.2m",club:"7번 아이언",shot:"세컨샷",best:true}]}, ], }; const SW_COMMUNITY = [ {author:"나는쏘니야", store:"골드레이크", clips:[{dist:"40.0m",club:"어프로치",shot:"어프로치",likes:24},{dist:"180.2m",club:"드라이버",shot:"티샷",likes:57}]}, {author:"라이언석", store:"판교점", clips:[{dist:"155.1m",club:"드라이버",shot:"티샷",likes:12},{dist:"12.3m",club:"퍼터",shot:"퍼팅",likes:8}]}, {author:"어피치", store:"강남점", clips:[{dist:"92.4m",club:"7번 아이언",shot:"세컨샷",likes:41},{dist:"33.0m",club:"웨지",shot:"어프로치",likes:19}]}, ]; // 스윙 데이터(구질/비거리/캐리/볼스피드/발사각/백스핀) — 클립 시드로 생성 (구질 등은 FS 나의 샷 데이터와 동일 구성) const SW_SHAPES = ["푸시슬라이스","스트레이트","드로우","페이드","훅"]; const swSeed = (c)=>{ const t=(c?.club||"")+(c?.dist||"")+(c?.shot||""); let s=0; for(let i=0;i{ const seed=swSeed(c); const d=parseFloat(c?.dist)||120; const k=seed%7; return [["구질",SW_SHAPES[seed%5]],["비거리",c?.dist||"-"],["캐리",(d*0.72).toFixed(1)+"m"],["볼스피드",(24+k*1.7).toFixed(1)+"m/s"],["발사각",(12+k*1.9).toFixed(1)+"°"],["백스핀",(1800+k*230).toLocaleString()+"rpm"]]; }; // 같은 스톡 영상 → 클립별 필터로 시각 구분 const swFilter = (c)=> ["none","hue-rotate(16deg) brightness(1.05)","hue-rotate(-14deg) saturate(1.15)","brightness(.92) contrast(1.08)","hue-rotate(28deg)"][swSeed(c)%5]; // 광고 배너 function SwBanner(){ return (
광동제약과 함께 하는
행운가드득 클래식 시즌2
{[0,1,2].map(i=>)}
); } const swStoreIc = (ic)=> ic==="fire" ? : ic==="tree" ? : ; // 썸네일 셀 (check!==undefined 이면 선택 모드) function SwThumb({ clip, extra, onClick, check }){ const sel = check===true; return ( ); } function SwingScreen({ onNav, onOpenDetail }){ const [tab, setTab] = React.useState("screen"); // screen | training | community const [month, setMonth] = React.useState("2026년 1월"); const [monthSheet, setMonthSheet] = React.useState(false); const [shot, setShot] = React.useState("전체"); const [sort, setSort] = React.useState("최신순"); const [sortSheet, setSortSheet] = React.useState(false); const [demoEmpty, setDemoEmpty] = React.useState(false); // 데모: 영상 없을 때 const [select, setSelect] = React.useState(false); // 트레이닝 선택 모드 const [sel, setSel] = React.useState(()=>new Set()); const [dlg, setDlg] = React.useState(null); // "delete" | "save" const [toast, setToast] = React.useState(null); const pop=(m)=>{ setToast(m); window.clearTimeout(pop._t); pop._t=window.setTimeout(()=>setToast(null),2200); }; const community = tab==="community", train = tab==="training"; const shiftMonth = (d)=>{ if(select) return; const i=SW_MONTHS.indexOf(month); const n=i+d; if(n>=0&&n onOpenDetail && onOpenDetail({...clip, ...meta, community}); const matchShot = (c)=> shot==="전체" ? true : shot==="리플레이샷" ? !!c.best : c.shot===shot; const srcRounds = demoEmpty ? [] : (train ? (SW_TRAINING[month]||[]) : (SW_MY[month]||[])); const fRounds = srcRounds.map(r=>({...r, clips:r.clips.filter(matchShot)})).filter(r=>r.clips.length>0); const comm = demoEmpty ? [] : (sort==="좋아요순" ? SW_COMMUNITY.map(u=>({...u, clips:[...u.clips].sort((a,b)=>b.likes-a.likes)})) : SW_COMMUNITY); // 선택 모드 키 const allKeys=[]; fRounds.forEach((r,ri)=>r.clips.forEach((c,ci)=>allKeys.push(ri+"_"+ci))); const toggleKey=(k)=> setSel(s=>{ const n=new Set(s); n.has(k)?n.delete(k):n.add(k); return n; }); const allSel = allKeys.length>0 && allKeys.every(k=>sel.has(k)); const exitSelect=()=>{ setSelect(false); setSel(new Set()); }; const doAction=(type)=>{ setDlg(null); const n=sel.size; exitSelect(); pop(type==="delete"?"영상이 삭제되었습니다.":n+"개 영상을 저장했습니다."); }; return (
{toast &&
{toast}
}
{[["screen","스크린"],["training","트레이닝"],["community","커뮤니티"]].map(([id,label])=>( ))}
{/* 월 네비 + 데모 토글 */}
{/* 필터/정렬/선택 헤더 */} {select ? (
) : community ? (
) : (
{SW_SHOTS.map(fl=>( ))}
{train && fRounds.length>0 && }
)} {community ? ( comm.length===0 ? (
등록된 스윙영상이 없어요.
) : (
{comm.map((u,ui)=>(
{u.author[0]}
{u.author} · {u.store}
{u.clips.map((clip,ci)=>{clip.likes}} onClick={()=>open(clip,{author:u.author,store:u.store})}/>)}
))}
) ) : fRounds.length===0 ? (
저장된 스윙영상이 없어요.
) : ( fRounds.map((r,ri)=>(
{r.date} {swStoreIc(r.ic)}{r.store}
{r.clips.map((clip,ci)=>{ const k=ri+"_"+ci; return ( select ? toggleKey(k) : open(clip,{date:r.date,store:r.store})}/> ); })}
)) )}
{/* 선택 모드 하단 액션 */} {select ? (
) : } {monthSheet && ( setMonthSheet(false)} footer={}> {SW_MONTHS.map(m=>setMonth(m)}/>)} )} {sortSheet && ( setSortSheet(false)}> {SW_SORTS.map(s=>{setSort(s); setSortSheet(false);}}/>)} )} {dlg && (
setDlg(null)} style={{position:"absolute",inset:0,background:"rgba(0,0,0,.45)",zIndex:50,display:"flex",alignItems:"center",justifyContent:"center",padding:"0 30px"}}>
e.stopPropagation()} style={{width:"100%",maxWidth:320,background:"#fff",borderRadius:16,padding:"24px 22px 18px",textAlign:"center"}}>
{dlg==="delete"?"영상을 삭제하시겠습니까?":"선택한 영상을 저장하시겠습니까?"}
{dlg==="delete"?"삭제를 누르면, 선택한 정면/측면 영상이 영구 삭제됩니다.":"3G/5G/LTE 환경에서 연결 시 데이터 통화료가 부과될 수 있습니다."}
)}
); } // 스윙 비디오 상세 (정면/측면 탭 + 플레이어 + 나의 스윙 정보 + 올리기 / 좋아요) function SwingVideoDetail({ clip, onBack, onOpenUpload, onOpenDraw, onOpenAi }){ const c = clip || {dist:"40.0m",club:"어프로치",shot:"어프로치",date:"1월 20일",store:"골드레이크 · 골드/레이크"}; const community = c.community; const [aspect, setAspect] = React.useState("정면"); // 정면 | 측면 (FS TrainingAspectType) const SW_SPEEDS = [0.25,0.5,0.75,1,1.5]; // FS SwingExoVideoPlayer const [speed, setSpeed] = React.useState(1); const cycleSpeed = ()=> setSpeed(s=>{ const i=SW_SPEEDS.indexOf(s); return SW_SPEEDS[(i+1)%SW_SPEEDS.length]; }); const [liked, setLiked] = React.useState(false); const [menu, setMenu] = React.useState(false); const [comm, setComm] = React.useState(false); const [cmtText, setCmtText] = React.useState(""); const [toast, setToast] = React.useState(null); const pop = (m)=>{ setToast(m); window.clearTimeout(pop._t); pop._t=window.setTimeout(()=>setToast(null),2200); }; const iconBtn = (svg,onClick)=> ; const data = swData(c); return (
{iconBtn(, ()=>pop("공유 링크를 복사했어요."))} {!community && iconBtn(, ()=>pop("영상을 저장했어요."))}
}/> {toast &&
{toast}
} {/* 정면 / 측면 */}
{["정면","측면"].map(a=>( ))}
{/* 유저 */}
{(c.author||"나는쏘니야")[0]}
{c.author||"나는쏘니야"}
{c.store||"골드레이크 · 골드/레이크"}
{/* 플레이어 (측면=미러 데모) */}
{!community && }
{/* 배속 (FS: 0.25/0.5/0.75/1/1.5) */}
{/* 클럽/거리/날짜 */}
{c.club}{c.shot && {c.shot}} {c.dist}
{c.date||"1월 20일"}
{/* 나의 스윙 정보 */}
나의 스윙 정보
{data.map(([k,v],i)=>(
{k}
{v}
))}
{/* AI 스윙 분석 결과 진입 (나의 스윙 · IP 카메라 매장) */} {!community && onOpenAi && (
)}
·매장 설정에 따라 옵션 일반 또는 초고속 카메라가 노출됩니다.
{/* 하단 */}
{community ? (
) : ( )}
{menu && ( setMenu(false)}> {!community && { setMenu(false); onOpenDraw&&onOpenDraw(); }}/>} { setMenu(false); pop("영상을 저장했어요."); }}/> { setMenu(false); pop("삭제되었어요."); }}/> )} {comm && ( setComm(false)} footer={
setCmtText(e.target.value)} placeholder="댓글을 입력하세요" style={{flex:1,height:44,border:"1px solid var(--line-strong)",borderRadius:22,padding:"0 16px",fontSize:14,outline:"none"}}/>
}>
{[["버디사냥꾼","임팩트 자세 정말 좋네요! 👍","2시간 전"],["어프로치장인","팔로우 스루가 부드러워요","5시간 전"],["골든하이머","저도 이 코스에서 연습해봐야겠어요","1일 전"]].map(([n,c,t],i)=>(
{n[0]}
{n}{t}
{c}
))}
)} ); } // 커뮤니티에 올리기 function SwingUpload({ clip, onBack, onDone }){ const [text, setText] = React.useState(""); const [toast, setToast] = React.useState(false); const submit = ()=>{ setToast(true); window.setTimeout(()=>{ onDone&&onDone(); }, 1100); }; return (
{toast &&
커뮤니티에 등록되었어요.
}
내용