e.stopPropagation()}>
{items.map((item,i)=>(
{onGo(item.tab,item.extra);onClose();}}
style={{
display:"flex",alignItems:"flex-start",gap:12,
padding:"14px 16px",
borderBottom:i
{item.icon}
{item.title}
{item.unread&&
}
{item.desc}
{item.time&&
{item.time}
}
))}
);
}
function MemberApp({member, data, onSave, onLogout}) {
const [tab,setTab] = useState("home");
const [showProfile, setShowProfile] = useState(false);
const [showNoti, setShowNoti] = useState(false);
// 유효기간 실시간 체크
useEffect(()=>{
if(member.expiryDate){
const today=new Date().toISOString().slice(0,10);
if(today > member.expiryDate) onLogout();
}
},[member.expiryDate]);
const tabs = [
{id:"home",lb:"홈",ic:"⌂"},
{id:"progress",lb:"진도",ic:"📈"},
{id:"lessons",lb:"수업",ic:"📋"},
{id:"record",lb:"기록",ic:"✏️"},
{id:"message",lb:"메시지",ic:"💬"},
{id:"reserve",lb:"예약",ic:"📅"},
{id:"ai", lb:"AI코칭",ic:"🤖"},
];
// 알림 목록 계산
const notiItems = [];
// 읽지 않은 피드백
const unreadFb = (member.selfRecords||[]).filter(r=>r.trainerFeedback&&!r.feedbackRead);
if(unreadFb.length>0) notiItems.push({
icon:"✍️",title:"트레이너 피드백",
desc:`${unreadFb.length}개의 피드백이 도착했어요`,
tab:"record",unread:true,color:ABLUE,
});
// 읽지 않은 메시지
if((member.unreadMessages||0)>0) notiItems.push({
icon:"💬",title:"새 메시지",
desc:`${member.unreadMessages}개의 메시지가 있어요`,
tab:"message",unread:true,color:ABLUE,
});
// 예약 상태 변경 (확정/취소된 것)
const recentRes = (member.reservations||[]).filter(r=>r.status==="확정"||r.status==="취소");
recentRes.slice(0,2).forEach(r=>{
notiItems.push({
icon:r.status==="확정"?"✅":"❌",
title:`예약 ${r.status}`,
desc:`${r.date} ${r.time} 수업이 ${r.status}됐어요`,
tab:"reserve",unread:false,
color:r.status==="확정"?GREEN:RED,
});
});
// 새 복습 포인트
const unreadReview = (member.reviewPoints||[]).filter(p=>!p.read);
if(unreadReview.length>0) notiItems.push({
icon:"🎬",title:"복습 포인트 도착",
desc:`트레이너가 ${unreadReview.length}개의 복습 포인트를 남겼어요`,
tab:"record",unread:true,color:"#5856d6",
});
// D-7 유효기간
if(member.expiryDate){
const today=new Date().toISOString().slice(0,10);
const days=Math.ceil((new Date(member.expiryDate)-new Date(today))/(1000*60*60*24));
if(days>=0&&days<=7) notiItems.push({
icon:"⏳",title:"유효기간 임박",
desc:`${days}일 후 만료돼요. 트레이너에게 문의하세요`,
tab:"message",unread:true,color:AMBER,
});
}
const totalNoti = notiItems.filter(n=>n.unread).length;
const unread = totalNoti;
const goTab = (tabId) => { setTab(tabId); setShowNoti(false); };
return(
{showProfile&&
setShowProfile(false)}/>}
{showNoti&&setShowNoti(false)}/>}
{showNoti&&
setShowNoti(false)} onGo={(t)=>goTab(t)}/>}
{tab==="message"?(
):(
{tab==="home" && }
{tab==="progress" && }
{tab==="lessons" && }
{tab==="record" && }
{tab==="ai" && }
{tab==="reserve" && }
)}
{tabs.map(t=>(
))}
안녕하세요
{name}님
{subtitle&&
{subtitle}
}
{progLabel}{prog}%
{startLabel}{endLabel}
);
const StatCard = ({label, value, sub, accent=false}) => (
{label}
{value}
{sub&&{sub}
}
);
const NextLessonCard = ({nxt}) => nxt?(
다음 수업
{nxt.date.slice(8)}
{nxt.date.slice(5,7)}월
{nxt.time}
SNOBBLE TRAINING
):null;
// ── 다이어트 홈 ────────────────────────────────────────────────────────────────
function MHomeDiet({m}) {
const logs=m.ptLogs||[], p=m.profile;
// 인바디 최신 기록이 있으면 우선 사용
const latestInbody = (m.inbodyRecords||[]).sort((a,b)=>b.date.localeCompare(a.date))[0];
const curWeight = latestInbody?.weight || p?.weight || 0;
const prog=p&&p.startWeight&&p.targetWeight&&p.startWeight!==p.targetWeight
?Math.max(0,Math.min(100,Math.round(((p.startWeight-curWeight)/(p.startWeight-p.targetWeight))*100))):0;
const nxt=(m.reservations||[]).find(r=>r.status==="확정");
const lost=p?(p.startWeight-p.weight).toFixed(1):0;
const remain=p?Math.max(0,p.weight-p.targetWeight).toFixed(1):0;
return(
{m.unreadFeedback>0&&(
📬 피드백 {m.unreadFeedback}건
기록 탭에서 확인하세요
)}
);
}
// ── 근력증진 홈 ────────────────────────────────────────────────────────────────
function MHomeStrength({m}) {
const logs = m.ptLogs||[];
const nxt = (m.reservations||[]).find(r=>r.status==="확정");
const totalSessions = logs.length;
const sorted = [...logs].sort((a,b)=>(a.session||0)-(b.session||0));
const lastLog = sorted[sorted.length-1];
// 최근 3회차 세션 번호
const recentSessions = sorted.slice(-3).map(l=>l.session||0);
// 종목별 히스토리: 같은 종목끼리만 비교
// 최근 3회차 안에 나온 종목 중 증량된 것만 → 홈 신기록
const exMap = {};
sorted.forEach(log=>{
(log.exercises||[]).filter(e=>!e.isCardio&&e.name&&e.name.trim()).forEach(e=>{
const key = e.name.trim();
if(!exMap[key]) exMap[key]=[];
exMap[key].push({session:log.session||0, weight:parseFloat(e.weight)||0, reps:parseFloat(e.reps)||0, sets:parseFloat(e.sets)||0, date:log.date});
});
});
// 신기록 배지: 최근 3회차 안에 나타난 종목 + 직전 동일 종목 대비 증량
const prAlerts = [];
Object.entries(exMap).forEach(([name, records])=>{
if(records.length<2) return;
const latest = records[records.length-1];
const prev = records[records.length-2];
if(!recentSessions.includes(latest.session)) return; // 최근 3회차 아님
if(latest.weight > prev.weight && latest.weight > 0){
prAlerts.push({name, weight:latest.weight, gain:+(latest.weight-prev.weight).toFixed(1)});
}
});
// 총 볼륨
const calcVol = (log) => (log?.exercises||[])
.filter(e=>!e.isCardio)
.reduce((a,e)=>{const w=parseFloat(e.weight)||0,r=parseFloat(e.reps)||0,s=parseFloat(e.sets)||0;return a+w*r*s;},0);
const totalVol = logs.reduce((acc,l)=>acc+calcVol(l),0);
return(
=1000?`${(totalVol/1000).toFixed(1)}t`:`${Math.round(totalVol)}kg`}
sub="중량×횟수×세트 합산"/>
{/* 신기록 배지 — 최근 3회차 안에 직전 대비 증량된 종목만 */}
{prAlerts.length>0&&(
🏆 최근 수업 증량 종목
{prAlerts.map((a,i)=>(
{a.name} {a.weight}kg +{a.gain}kg↑
))}
최근 3회차 기준 · 진도 탭에서 전체 확인
)}
{/* 최근 수업 요약 */}
{lastLog&&(
최근 수업 — {lastLog.session}회차
{lastLog.date}
{lastLog.condition&&· {lastLog.condition}}
{(lastLog.exercises||[]).filter(e=>e.name&&!e.isCardio).map((e,i)=>(
{e.name}{parseFloat(e.weight)>0&& {e.weight}kg}
))}
다음 집중 → {lastLog.nextFocus}
)}
)}
);
}
// ── 통증해결 홈 ────────────────────────────────────────────────────────────────
function MHomePain({m, data, onSave}) {
const logs=m.ptLogs||[], p=m.profile;
const nxt=(m.reservations||[]).find(r=>r.status==="확정");
const today=new Date().toISOString().slice(0,10);
// 오늘 통증 기록 찾기
const todayRec=(m.selfRecords||[]).find(r=>r.date===today);
const todayPain=todayRec?.painLog||null;
const [areas, setAreas]=useState(todayPain?.areas||[]);
const [intensity, setIntensity]=useState(todayPain?.intensity||0);
const [memo, setMemo]=useState(todayPain?.memo||"");
const [saved, setSaved]=useState(!!todayPain);
const savePain=()=>{
const painLog={areas,intensity,memo,date:today};
const recs=m.selfRecords||[];
const existing=recs.find(r=>r.date===today);
const upd=existing
?recs.map(r=>r.date===today?{...r,painLog}:r)
:[{id:`r${Date.now()}`,date:today,condition:"",meals:{아침:"",점심:"",저녁:"",간식:""},exerciseLogs:[],reviewChecks:{},painLog,trainerFeedback:"",feedbackRead:false},...recs];
onSave({...data,members:data.members.map(x=>x.id===m.id?{...x,selfRecords:upd}:x)});
setSaved(true);
};
// 최근 7일 통증 강도 트렌드
const recentPain=(m.selfRecords||[])
.filter(r=>r.painLog&&r.date>=new Date(Date.now()-7*86400000).toISOString().slice(0,10))
.sort((a,b)=>a.date.localeCompare(b.date));
const avgIntensity=recentPain.length>0
?Math.round(recentPain.reduce((a,r)=>a+(r.painLog?.intensity||0),0)/recentPain.length*10)/10:0;
const intensityColor=(v)=>v<=3?"#34c759":v<=6?AMBER:RED;
return(
{/* 히어로 */}
안녕하세요
{m.name}님
통증 해결 프로그램 · {logs.length}회차
{recentPain.length>0&&(
{recentPain.map((r,i)=>{
const iv=r.painLog?.intensity||0;
const h=Math.max(4,iv*8);
return(
);
})}
)}
{recentPain.length===0&&(
아직 통증 기록이 없어요. 아래에서 기록해주세요.
)}
{/* 오늘 통증 체크 */}
{/* 부위 선택 */}
통증 부위 (복수 선택)
{PAIN_AREAS.map(a=>(
))}
{/* 강도 슬라이더 */}
통증 강도
{Array.from({length:10},(_,i)=>i+1).map(n=>(
))}
없음보통극심
{/* 메모 */}