{/* Decorative tint */}

{/* Top: sender + meta */} {/* Message */} {request.message && (

"{request.message}"

)} {/* Actions */}

); } function ReceivedCollectionRow({ item, accent, onClick }) { return ( ); } function shadeHex(hex, percent) { const h = hex.replace('#', ''); const r = parseInt(h.slice(0, 2), 16); const g = parseInt(h.slice(2, 4), 16); const b = parseInt(h.slice(4, 6), 16); const adj = (n) => Math.max(0, Math.min(255, Math.round(n + (percent / 100) * 255))); return '#' + [adj(r), adj(g), adj(b)].map(n => n.toString(16).padStart(2, '0')).join(''); } // ───────────────────────────────────────────────────────────── // MeScreen — profile, stats, quota, settings entry // ───────────────────────────────────────────────────────────── function MeScreen({ accent, profile, quotaUsed, quotaTotal, dailyCap, todayBoost, streakDays = 14, practiceDays, onEditProfile, onOpenSettings, onOpenNotifications, onOpenHelp, onOpenAbout, onUpgradeQuota }) { const totalCards = (window.EXPANDED_CARDS || []).length || 0; const remaining = Math.max(0, quotaTotal - quotaUsed); const ratio = Math.min(1, quotaUsed / quotaTotal); // Hamster tap reactions — clicking the character on the quota widget const TAP_REACTIONS = React.useMemo(() => [ { face: 'wink', bubble: '윙크 한 번!', emoji: '😉' }, { face: 'starry', bubble: '반짝반짝!', emoji: '✨' }, { face: 'blush', bubble: '간지러워…', emoji: '🥹' }, { face: 'happy', bubble: '안녕!', emoji: '👋' }, { face: 'wink', bubble: '오늘도 잘 부탁!', emoji: '🤝' }, ], []); const [tap, setTap] = React.useState({ face: null, bubble: null, key: 0 }); const handlePouchTap = () => { const idx = tap.key % TAP_REACTIONS.length; const r = TAP_REACTIONS[idx]; setTap({ face: r.face, bubble: r.bubble, key: tap.key + 1 }); }; React.useEffect(() => { if (!tap.bubble) return; const t = setTimeout(() => setTap(s => ({ ...s, face: null, bubble: null })), 1500); return () => clearTimeout(t); }, [tap.bubble, tap.key]); // Cute, context-aware label for the quota widget const pouchLabel = quotaUsed === 0 ? '오늘 볼주머니가 비어 있어요' : ratio >= 0.92 ? '오늘 볼주머니가 통통해요' : ratio >= 0.65 ? '오늘 볼주머니가 두둑해지는 중' : ratio >= 0.30 ? '오늘 볼주머니가 채워지는 중' : '오늘 볼주머니가 가뿐해요'; const autoFace = ratio >= 0.85 ? 'sleepy' : ratio >= 0.5 ? 'happy' : 'basic'; const displayFace = tap.face || autoFace; return (

{/* Top bar — sticky */}

나

{/* Hero — compact horizontal */}

{window.HamsterAvatar && }

{profile?.name || '윤재'}

CheekPouch와 124일 째

{/* Stats */}

{/* Streak calendar */} {/* Quota */}

{/* Decorative aura behind hamster */}

{/* Hamster — puffs based on quota ratio; tap to react */}

{window.SunflowerGlyph && } {pouchLabel}

{quotaUsed} / {quotaTotal}개 오늘 모은 씨앗

{/* Seed row (replaces flat progress bar) */} {(() => { const cap = dailyCap || quotaTotal; const boost = todayBoost || Math.max(0, quotaTotal - cap); const total = cap + boost; const seeds = []; for (let i = 0; i < cap; i++) { seeds.push({ type: 'daily', filled: i < quotaUsed }); } for (let i = 0; i < boost; i++) { seeds.push({ type: 'boost', filled: (cap + i) < quotaUsed }); } return (

{seeds.map((s, i) => ( window.Seed ? : null ))}

); })()}

{/* Quick links */}

설정

} label="앱 설정" sub="주 언어 · 테마 · 소리" onClick={onOpenSettings} first /> } label="알림" sub="복습 · 여행 모드" onClick={onOpenNotifications} /> } label="도움말" sub="자주 묻는 질문" onClick={onOpenHelp} /> } label="CheekPouch에 대하여" sub="버전 · 팜·개인정보" onClick={onOpenAbout} />

); } function StreakCalendar({ accent, streakDays = 14, practiceDays }) { // practiceDays: optional Set of "days-ago" numbers that were practice days. // Default: build deterministic plausible set — recent streakDays solid, // plus a few earlier scattered. const today = new Date(); const days = practiceDays || (() => { const s = new Set(); for (let i = 0; i < streakDays; i++) s.add(i); // scatter earlier [streakDays + 2, streakDays + 3, streakDays + 5, streakDays + 8, streakDays + 11, streakDays + 13, streakDays + 18, streakDays + 22, streakDays + 26].forEach(d => s.add(d)); return s; })(); // Build a 7×5 (35-day) grid ending today, oldest at top-left const cells = 35; const grid = []; for (let i = cells - 1; i >= 0; i--) { const d = new Date(today); d.setDate(d.getDate() - i); grid.push({ daysAgo: i, date: d.getDate(), isToday: i === 0, practiced: days.has(i), }); } const monthLabel = `${today.getMonth() + 1}월`; const dayLabels = ['월', '화', '수', '목', '금', '토', '일']; // Compute current weekday offset so the last column is "today" // Simpler: just lay out chronologically, label by weekday under each col return (

학습 달력

최근 5주 · {monthLabel}

학습한 날

{/* Grid: 7 cols x 5 rows */}

{grid.map((c, i) => { // Intensity: today gets ring, practiced gets fill const opacity = c.practiced ? (c.daysAgo < streakDays ? 1 : 0.55) : 0; return (

{c.date}

); })}

{/* Encouragement */}

🔥 {streakDays}일 연속 학습 중이에요. 오늘도 화이팅!

); } function quotaBarColor(ratio) { // Smooth green → yellow → red gradient based on ratio // 0..0.5: green → yellow, 0.5..1: yellow → red let r, g, b; if (ratio <= 0.5) { const t = ratio / 0.5; // #4A8A52 (74,138,82) → #D6A53A (214,165,58) r = Math.round(74 + (214 - 74) * t); g = Math.round(138 + (165 - 138) * t); b = Math.round(82 + (58 - 82) * t); } else { const t = (ratio - 0.5) / 0.5; // #D6A53A → #B5483C (181,72,60) r = Math.round(214 + (181 - 214) * t); g = Math.round(165 + (72 - 165) * t); b = Math.round(58 + (60 - 58) * t); } return `rgb(${r}, ${g}, ${b})`; } function StatTile({ value, label, sub, accent, highlight }) { return (

{label}

{value} {sub}

); } function MeRow({ icon, label, sub, onClick, first }) { return ( ); } function GearGlyph() { return ( ); } function BellGlyph() { return ( ); } function HelpGlyph() { return ( ); } function InfoGlyph() { return ( ); } // ───────────────────────────────────────────────────────────── // FriendDetailScreen // ───────────────────────────────────────────────────────────── function FriendDetailScreen({ friend, accent, onBack }) { const sharedCollections = [ { name: '오사카 카페 투어', count: 12, color: friend.accent, cover: { kind: 'icon', icon: 'cup' } }, { name: '오사카 길찾기', count: 6, color: friend.accent, cover: { kind: 'icon', icon: 'map' } }, { name: '간사이 식당 한마디', count: 9, color: friend.accent, cover: { kind: 'icon', icon: 'fork' } }, ].slice(0, friend.sharedCount); return (

{/* Top bar — sticky */}

{/* Hero */}

{window.HamsterAvatar && }

{friend.name}

마지막 활동 {timeAgo(friend.lastActive)} · 공유 주머니 {friend.sharedCount}개

{/* Shared collections */}

공유 주머니 · {sharedCollections.length}개

{sharedCollections.length === 0 ? (

아직 공유한 주머니가 없어요

) : (

{sharedCollections.map((c, i) => (

{c.count} 개

{window.CoverIcon && }

{c.name}

))}

)}

); } // ───────────────────────────────────────────────────────────── // Invite destination glyphs // ───────────────────────────────────────────────────────────── function MessageBubbleGlyph({ color = '#FFF' }) { return ( ); } function KakaoChatGlyph({ color = '#191919' }) { return ( ); } function EnvelopeGlyph({ color = '#FFF' }) { return ( ); } function MoreDotsGlyph() { return ( ); } // ───────────────────────────────────────────────────────────── // InviteSheet // ───────────────────────────────────────────────────────────── function InviteSheet({ accent, onClose }) { const [copied, setCopied] = React.useState(false); const [sentVia, setSentVia] = React.useState(null); // {label, message} const code = 'CHK-7K2M'; const url = `https://cheekpouch.app/i/${code}`; const shareMsg = `나랑 같이 CheekPouch 써볼래? 가입하면 우리 둘 다 매일 볼주머니가 +1개씩 영구 증가!\n초대 코드: ${code}\n${url}`; const copy = () => { if (navigator.clipboard) { navigator.clipboard.writeText(`${code}\n${url}`).catch(() => {}); } setCopied(true); setTimeout(() => setCopied(false), 1600); }; const flashSent = (label, message) => { setSentVia({ label, message }); setTimeout(() => setSentVia(null), 2200); }; // Try to open an external scheme; if it fails (iframe / no app), fall back to clipboard. const openScheme = (href, fallbackLabel, fallbackMsg) => { let opened = false; try { const a = document.createElement('a'); a.href = href; a.rel = 'noopener'; a.target = '_top'; document.body.appendChild(a); a.click(); a.remove(); opened = true; } catch (e) { opened = false; } if (navigator.clipboard) { navigator.clipboard.writeText(shareMsg).catch(() => {}); } flashSent(fallbackLabel, fallbackMsg || (opened ? `${fallbackLabel} 앱을 열었어요` : `초대 메시지를 복사했어요`)); }; const sendMessage = () => { openScheme(`sms:&body=${encodeURIComponent(shareMsg)}`, '메시지'); }; const sendKakao = () => { // Real Kakao share needs SDK; for prototype we copy + toast. if (navigator.clipboard) { navigator.clipboard.writeText(shareMsg).catch(() => {}); } flashSent('카카오톡', '초대 메시지를 복사했어요 — 카톡에 붙여넣어 주세요'); }; const sendMail = () => { const subject = encodeURIComponent('CheekPouch 초대장'); const body = encodeURIComponent(shareMsg); openScheme(`mailto:?subject=${subject}&body=${body}`, '메일'); }; const sendMore = async () => { const data = { title: 'CheekPouch 초대', text: shareMsg, url }; try { if (navigator.share && (!navigator.canShare || navigator.canShare(data))) { await navigator.share(data); flashSent('공유', '초대를 보냈어요'); return; } } catch (e) { /* user cancelled or failed */ } if (navigator.clipboard) { navigator.clipboard.writeText(shareMsg).catch(() => {}); } flashSent('공유', '초대 메시지를 복사했어요'); }; const dests = [ { label: '메시지', bg: '#34C759', icon: , onClick: sendMessage }, { label: '카톡', bg: '#FEE500', icon: , onClick: sendKakao }, { label: '메일', bg: '#0A84FF', icon: , onClick: sendMail }, { label: '더보기', bg: 'rgba(60,42,20,0.08)', iconAccent: true, icon: , onClick: sendMore }, ]; return (

{window.HamsterAvatar && }

친구를 초대하면
매일 +1개씩 받아요

친구가 CheekPouch에 가입하면
매일 받는 한도가 영구적으로 늘어요

{/* Invite code */}

초대 코드

{code}

{/* Destinations */}

{dests.map(d => ( ))}

{/* Inline status feedback */}

{sentVia && (

{sentVia.message}

)}

); } Object.assign(window, { TabBar, FriendsScreen, MeScreen, FriendDetailScreen, InviteSheet, NudgeSheet, NudgeToast, TAB_HEIGHT, SAMPLE_FRIENDS, RECEIVED_COLLECTIONS, SAMPLE_SHARE_REQUESTS, }); // ───────────────────────────────────────────────────────────── // NudgeSheet — send a friendly poke to a friend // ───────────────────────────────────────────────────────────── const NUDGE_PRESETS = [ { id: 'today', emoji: '👋', label: '오늘 한 장 어때?', desc: '오늘 씨앗 안 담은 친구에게' }, { id: 'trip', emoji: '✈️', label: '여행 D-3, 준비됐어?', desc: '여행 가는 친구에게' }, { id: 'review', emoji: '🔁', label: '복습할 시간이에요', desc: '한동안 안 본 친구에게' }, { id: 'share', emoji: '💌', label: '주머니 하나 받아갈래?', desc: '내 주머니 공유 의향' }, { id: 'cheer', emoji: '🥕', label: '잘하고 있어요!', desc: '응원 한마디' }, ]; function NudgeSheet({ friend, accent, onClose, onSend }) { const [picked, setPicked] = React.useState(NUDGE_PRESETS[0].id); const [custom, setCustom] = React.useState(''); const [mode, setMode] = React.useState('preset'); // 'preset' | 'custom' const inputRef = React.useRef(null); React.useEffect(() => { if (mode === 'custom' && inputRef.current) { setTimeout(() => inputRef.current.focus(), 80); } }, [mode]); const selected = NUDGE_PRESETS.find(p => p.id === picked); const send = () => { const text = mode === 'custom' ? custom.trim() : selected.label; if (!text) return; onSend({ text, emoji: mode === 'custom' ? '✏️' : selected.emoji }); }; const canSend = mode === 'preset' ? !!selected : custom.trim().length > 0; return (

{/* Header with target friend */}

{window.HamsterAvatar && }

{friend.name}에게 넛지

가볍게 알림을 보내요

{/* Mode segments */}

{[ { value: 'preset', label: '추천 메시지' }, { value: 'custom', label: '직접 쓰기' }, ].map(o => { const on = mode === o.value; return ( ); })}

{mode === 'preset' ? (

{NUDGE_PRESETS.map(p => { const on = picked === p.id; return ( ); })}

) : (

setCustom(e.target.value)}
                placeholder="짧은 메시지를 적어주세요"
                maxLength={60}
                style={{
                  width: '100%', minHeight: 100,
                  background: TB.surface2,
                  border: `1px solid ${TB.hairlineStrong}`,
                  borderRadius: 14,
                  padding: 14,
                  fontFamily: 'inherit', fontSize: 15, color: TB.ink,
                  outline: 'none', resize: 'none',
                  letterSpacing: '-0.01em', lineHeight: 1.45,
                  boxSizing: 'border-box',
                }}
              />
              <div style={{
                marginTop: 6,
                fontSize: 11, color: TB.ink3,
                textAlign: 'right',
                fontVariantNumeric: 'tabular-nums',
              }}>{custom.length} / 60</div>
            </div>
          )}
        </div>

<div style={{ padding: '12px 22px 0', display: 'flex', gap: 10 }}>
          <button onClick={onClose} style={{
            flex: 1, height: 48, borderRadius: 14,
            background: 'transparent', color: TB.ink2,
            border: `1px solid ${TB.hairlineStrong}`,
            fontFamily: 'inherit', fontSize: 15, fontWeight: 500,
            cursor: 'pointer',
            WebkitTapHighlightColor: 'transparent',
          }}>취소</button>
          <button onClick={send} disabled={!canSend} style={{
            flex: 2, height: 48, borderRadius: 14,
            background: canSend ? accent : `${accent}30`,
            color: '#FFF', border: 'none',
            fontFamily: 'inherit', fontSize: 15, fontWeight: 600,
            letterSpacing: '-0.01em',
            cursor: canSend ? 'pointer' : 'default',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
            WebkitTapHighlightColor: 'transparent',
          }}>
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
              <path d="M2 8L14 2L11 14L8 9L2 8Z" fill="currentColor" stroke="currentColor"
                    strokeWidth="0.5" strokeLinejoin="round"/>
            </svg>
            넛지 보내기
          </button>
        </div>
      </div>
    </div>
  );
}

// Floating success toast
function NudgeToast({ friendName, message, accent, onClose, title, icon }) {
  React.useEffect(() => {
    const t = setTimeout(onClose, 2400);
    return () => clearTimeout(t);
  }, [onClose]);

return (
    <div style={{
      position: 'absolute',
      bottom: TAB_HEIGHT + 18,
      left: 22, right: 22,
      zIndex: 300,
      padding: '12px 14px',
      background: TB.toastBg,
      borderRadius: 14,
      display: 'flex', alignItems: 'center', gap: 10,
      boxShadow: '0 8px 28px rgba(31,24,18,0.32)',
      animation: 'cp-toast-in 0.32s cubic-bezier(0.22, 1, 0.36, 1)',
    }}>
      <span style={{
        width: 26, height: 26, borderRadius: 26,
        background: accent,
        color: '#FFF',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        flexShrink: 0,
      }}>
        {icon || (
          <svg width="13" height="13" viewBox="0 0 14 14" fill="none">
            <path d="M3 7.2l2.8 2.8L11 5" stroke="#FFF" strokeWidth="2.2"
                  strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        )}
      </span>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{
          fontSize: 13.5, fontWeight: 600, color: '#FFF',
          letterSpacing: '-0.01em',
          overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
        }}>{title || `${friendName}님에게 넛지를 보냈어요`}</div>
        {message && (
          <div style={{
            marginTop: 2,
            fontSize: 11.5, color: 'rgba(255,255,255,0.66)',
            letterSpacing: '-0.01em',
            overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
          }}>{title ? message : `"${message}"`}</div>
        )}
      </div>
    </div>
  );
}