// Wave Logger — Today screen // Tokens from the brief, refined slightly for hi-fi polish. const wl = { // base bg: '#FBFDFC', bgWarm: '#F6FAF9', card: '#FFFFFF', ink: '#1C3A36', ink2: '#3E6E66', ink3: '#8AA8A2', // brand teal: '#2A9D8F', tealDeep: '#1E7E72', tealSoft: '#DDEEEA', tealTint: '#EEF7F4', hairline: '#E6EEEC', // night/evening accent moonCream: '#FEF3D8', moonInk: '#B8923A', // mascot seed: '#AFCFBE', board: '#FAAD32', wave: '#74A7DC', waveDeep: '#4187CA', cream: '#FEF9F4', // warning danger: '#C2675B', }; // ─── Icons ──────────────────────────────────────────────────── const Ico = { upload: (c = wl.ink2) => ( ), cloud: (c = wl.ink2) => ( ), github: (c = wl.ink2) => ( ), moon: (c = wl.moonInk, fill = wl.moonCream) => ( ), chevDown: (c = wl.ink3) => ( ), check: (c = wl.teal) => ( ), plus: (c = wl.ink2) => ( ), arrowUp: (c = '#fff') => ( ), link: (c = wl.ink2) => ( ), tag: (c = wl.ink2) => ( ), bed: (c = wl.ink2) => ( ), nap: (c = wl.ink2) => ( ), spark: (c = wl.teal) => ( ), list: (c = wl.ink2) => ( ), sparkles: (c = wl.ink2) => ( ), waves: (c = wl.ink2) => ( ), }; // ─── Tab bar icons ──────────────────────────────────────────── const TabIcon = { today: (active) => ( // wave + seedling ), records: (active) => ( // calendar-ish stacked log ), settings: (active) => ( ), }; // ─── Mascot — tiny inline SVG for inline use (small sizes) ──── function Mascot({ size = 44, mood = 'neutral' }) { // mood: neutral, calm (eyes closed), tiny const eyes = mood === 'calm' ? <> : <>; return ( {/* leaves */} {/* body */} {eyes} {/* board */} ); } // ─── Status bar (iOS-ish, simple) ────────────────────────────── function StatusBar({ time = '21:14', dark = false }) { const c = dark ? '#fff' : '#000'; return (
{time}
); } // ─── Header: date + 정리 button (+ optional 올리기) ─────────── function Header({ date = '5월 22일 (금)', evening = false, showUpload = true }) { return (
{/* left: 올리기 */}
{showUpload && ( )}
{/* center: date */}
{date}
{/* right: 정리 */}
); } // ─── Tracker summary strip (thin, tap=expand) ───────────────── function TrackerStrip({ expanded = false, sleep = '7h', nap = '30분', checks = '2/3' }) { return (
수면 {sleep} · 낮잠 {nap} · {Ico.check(wl.teal)} {checks}
); } // ─── Expanded tracker — BOTTOM SHEET (overlay) ──────────────── // Layout matches user spec: 수면 (취침/기상 wheels) · 낮잠 (toggle+chips/wheel) // · custom trackers (체크 / 숫자(단위) / 척도 1~5). function PencilIco({ c = wl.ink3 }) { return ( ); } // Wheel picker — visual only (one barrel column) function WheelCol({ items, value, w = 56 }) { // items: array of strings; we render 5 visible rows with value centered const idx = items.indexOf(value); const before = [items[idx - 2], items[idx - 1]].filter(Boolean); const after = [items[idx + 1], items[idx + 2]].filter(Boolean); const Row = (txt, op) => (
{txt}
); return (
{Row(before[0] || '', 0.18)} {Row(before[1] || '', 0.4)} {Row(value, 1)} {Row(after[0] || '', 0.4)} {Row(after[1] || '', 0.18)}
); } function WheelTimePicker({ h = '23', m = '30' }) { const hours = Array.from({ length: 24 }, (_, i) => String(i).padStart(2, '0')); const mins = ['00', '05', '10', '15', '20', '25', '30', '35', '40', '45', '50', '55']; return (
{/* selection band */}
:
); } function SectionTitle({ children, right }) { return (
{children} {right && {right}}
); } function PickRow({ label, value, last, onTap, opening }) { return (
{label} {value || '눌러서 맞추기'}
); } function NapChips({ selected = '30' }) { const chips = ['15', '30', '45', '60', '90']; return (
{chips.map(c => { const a = c === selected; return ( ); })}
); } function Toggle({ on }) { return (
); } function CustomRow({ name, kind, value, unit, last }) { return (
{name} {unit && {unit}}
{kind === 'check' && (
{value && }
)} {kind === 'number' && (
0 ? wl.ink : wl.ink3, fontVariantNumeric: 'tabular-nums', }}>{value}
)} {kind === 'scale' && (
{[1,2,3,4,5].map(n => { const on = value && n <= value; return (
{n}
); })}
)}
); } function TrackerSheet({ napOn = false, napDuration = '30', showWheel = false }) { return (
{/* header */}
오늘의 트래커 5월 22일 (금)
{/* ─── 잠 그룹 (수면 + 낮잠) — collapsible header + 한 흐름의 subGroup ─── */}
{/* group header — chevron toggle */}
{Ico.bed(wl.tealDeep)} 잠
{napOn ? `수면 7h · 낮잠 ${napDuration}분` : '수면 7h · 낮잠 —'}
{/* unified subGroup — 수면(취침/기상) + 낮잠 토글이 한 흐름으로 */}
{showWheel && } {/* 낮잠 토글 — 단순 한 줄 행 (라벨 + Switch) */}
낮잠
{napOn && }
{/* ─── 항목 그룹 (체크/숫자/척도) — 잠과 동일한 카드 + 헤더 ─── */}
{/* group header */}
{Ico.list(wl.tealDeep)} 항목
3 / 4 완료
{/* close affordance — chevron up at bottom edge */}
); } // ─── Settings → 트래커 편집 (bottom sheet) ──────────────────── function EditorChip({ active, children, color = wl.tealDeep }) { return ( ); } function DayChip({ active, children }) { return ( {children} ); } function EditorItem({ name, kind, unit, days = 'all', highlight }) { return (
{/* name + reorder + delete */}
{name}
{/* kind row */}
종류
체크 숫자 척도 1~5
{kind === 'number' && (
단위 {unit}
)}
{/* days row */}
요일
매일 {['일','월','화','수','목','금','토'].map((d,i) => ( {d} ))}
); } function TrackerEditorSheet() { return (
{/* drag handle */}
트래커 편집
매일 트래커에서 기록할 항목들. 순서를 잡고 종류와 요일을 설정해요.
저장 위치 · 옵시디언 일일노트 frontmatter
trackers: {'{'} 물: 6, 운동: 3, 영양제: true {'}'}
{/* footer CTA */}
완료
); } // ─── Filter chips row (below tracker) ───────────────────────── function FilterChips({ active = 'all', evening = false }) { const chips = [ { id: 'all', label: '전체', color: wl.tealDeep, bg: '#fff', activeBg: wl.tealSoft, activeBorder: '#B7DDD3' }, { id: 'record', label: '기록', color: tagColors.record, bg: '#fff', activeBg: '#DDEEEA', activeBorder: '#B7DDD3' }, { id: 'tracker', label: '트래커', color: tagColors.tracker, bg: '#fff', activeBg: '#E0ECF8', activeBorder: '#BFD7EE' }, { id: 'cleanup', label: '하루정리', color: tagColors.cleanup, bg: '#fff', activeBg: '#FBEEDB', activeBorder: '#EBD3A9' }, ]; return (
{chips.map(c => { const a = c.id === active; return ( ); })}
); } // ─── Stream day separator ───────────────────────────────────── function DaySep({ label = '오늘' }) { return (
{label}
); } function Dots() { return (
); } // Tag color palette — user-defined tags + system categories const tagColors = { default: wl.tealDeep, // categories record: '#1E7E72', // 기록 tracker: '#3F86C9', // 트래커 cleanup: '#C28A4B', // 하루정리 // common user tags '#기쁨': '#8B6FB8', // soft purple '#감사': '#C99459', '#차분': '#3F86C9', '#배운것': '#1E7E72', '#해낸것': '#1E7E72', '#성장': '#4F9F76', '#시드닝': '#D89149', // warm orange (project-y) }; function tagColor(tag) { if (!tag) return tagColors.default; if (tagColors[tag]) return tagColors[tag]; return tagColors.default; } // ─── Chat bubble (own message — right-aligned) ──────────────── function Bubble({ time, tag, tagKind, children }) { const tc = tagKind ? tagColors[tagKind] : tagColor(tag); return (
{time}
{tag &&
{tag}
} {children}
); } // ─── Link embed inside a bubble (richer) ────────────────────── function LinkBubble({ time, tag, tagKind, comment, title, source, thumb }) { const tc = tagKind ? tagColors[tagKind] : tagColor(tag); return (
{time}
{tag &&
{tag}
} {comment &&
{comment}
}
{/* thumbnail — abstract wave illustration */}
{title}
{Ico.link(wl.ink3)} {source}
); } // ─── Empty-stream prompt with mascot ────────────────────────── function EmptyPrompt({ mood = 'neutral', title = '오늘 첫 줄을 남겨볼까요?', sub = '떠오른 생각 · 본 영상 · 한 문장…', image }) { return (
{image ? (
) : (
)}
{title}
{sub}
); } // ─── Input bar ──────────────────────────────────────────────── function InputBar({ value = '메시지 입력…', focused = false, cursor = false }) { const showCursor = focused || cursor; const showSend = focused && !cursor; // send active only when text exists return (
{showCursor && } {value}
); } // ─── Tab bar ────────────────────────────────────────────────── function TabBar({ active = 'today' }) { const Tab = ({ id, label, icon }) => { const a = active === id; return (
{icon(a)} {label}
); }; return (
); } // ─── + 시트 (compose panel + Korean keyboard) ───────────────── // No dim, no overlay — it sits inline above the input bar and pushes // up the keyboard. Recent tag chips, free-form tag input, and a // link/source line. function ComposePanel() { const recent = [ { t: '#독서', color: tagColors.default }, { t: '#운동', color: tagColors.default }, { t: '#영양제', color: tagColors.default }, { t: '#피아노연습', color: tagColors.default }, { t: '#시드닝', color: '#D89149' }, { t: '#기쁨', color: '#8B6FB8' }, { t: '#배운것', color: wl.tealDeep }, ]; return (
{/* recent tag chips — horizontally scrollable */}
{recent.map(({ t, color }) => ( ))}
{/* # 직접 태그 입력 */}
# 직접 태그 입력
{/* 링크/출처 입력 */}
링크(주소 붙여넣기) 또는 출처(책·영상 제목)
); } // ─── iOS Korean keyboard ────────────────────────────────────── function Keyboard() { const r1 = ['ㅂ','ㅈ','ㄷ','ㄱ','ㅅ','ㅛ','ㅕ','ㅑ','ㅐ','ㅔ']; const r2 = ['ㅁ','ㄴ','ㅇ','ㄹ','ㅎ','ㅗ','ㅓ','ㅏ','ㅣ']; const r3 = ['ㅋ','ㅌ','ㅊ','ㅍ','ㅠ','ㅜ','ㅡ']; const Key = ({ ch, w = 32, bg = '#fff', big = false, children }) => (
{children ?? ch}
); const Suggest = ({ t, mid }) => (
{t}
); return (
{/* suggestion strip */}
{/* row 1 */}
{r1.map(ch => )}
{/* row 2 (offset, 9 keys) */}
{r2.map(ch => )}
{/* row 3 — shift + letters + backspace */}
{r3.map(ch => )}
{/* bottom row */}
123 한 {/* dot ... actually emoji */}
{/* globe + mic strip */}
); } // ─── 정리 confirm dialog ────────────────────────────────────── function CleanupDialog() { return ( <>
오늘의 항해를 정리할까요?
지금까지의 기록을 GitHub에 안전하게 백업해요.
오늘 화면은 비워지지만, [기록]에서 다시 볼 수 있어요.
); } // ─── Toast: 정리 완료 ───────────────────────────────────────── function DoneToast() { return (
{Ico.check(wl.tealDeep)}
오늘은 이미 올렸어요
이후 추가한 기록은 다음 올리기 때 함께 올라갈게요
); } // ─── 하루 정리 (cleanup) ────────────────────────────────────── // In-stream block: section heading + 오늘 상태 card + editable question chips. function SproutIco({ size = 16 }) { // small leaf/sprout — replaces 🌱 seedling emoji return ( ); } function MoodFace({ level, active = false, size = 32 }) { // level: 1 (worst) .. 5 (best). Drawn in the app's flat-line style. const stroke = active ? wl.tealDeep : wl.ink2; const fill = active ? '#FFF' : '#FFFEF8'; const eye = active ? wl.tealDeep : wl.ink2; // mouth by level const mouthMap = { 1: , 2: , 3: , 4: , 5: , }; // happy → squinty arc eyes; sad/neutral → dots const eyes = level >= 4 ? ( <> ) : ( <> ); return ( {eyes} {mouthMap[level]} ); } function StatusCard({ mood = null, energy = null }) { const Cell = ({ on, children }) => (
{children}
); return (
오늘 상태
{/* 기분 */}
기분
{[1, 2, 3, 4, 5].map(lv => ( ))}
{/* 활력 */}
활력
{[1, 2, 3, 4, 5].map(n => ( {n} ))}
); } function QuestionChip({ q, active = false }) { return (
{q}
); } function WrapupBlock({ mood, energy, activeQ }) { const questions = ['오늘 해낸 건?', '오늘 뭐 배웠어?', '오늘 성장한 점은?']; return (
{/* section heading — wave icon ties this to the "정리" CTA in the header */}
{Ico.waves(wl.tealDeep)} 하루 정리
{questions.map((q, i) => ( ))}
); } function AnswerHintBar({ q }) { return (
답하는 중 · {q} 취소
); } // ─── 하루 마무리 질문 — 편집 바텀시트 ───────────────────────── function WrapupEditorSheet() { const items = [ { tag: '해낸것', value: '오늘 해낸 건?' }, { tag: '배운것', value: '오늘 뭐 배웠어?' }, { tag: '성장', value: '오늘 성장한 점은?' }, ]; const FieldRow = ({ tag, value, highlight }) => (
{/* drag + value-input + delete */}
{value}
{/* tag row */}
태그
# {tag}
); return (
{/* grabber */}
{/* title */}
하루 마무리 질문
저녁에 뜨는 질문이에요. 순서·문구·태그를 자유롭게 바꿔요.
{/* list */}
{items.map(({ tag, value }, i) => ( ))}
{/* footer CTA */}
완료
); } // ─── Today Screen — composes everything ─────────────────────── function TodayScreen({ variant = 'default' }) { const W = 390, H = 844; const dark = false; // Stream content per variant const isEmpty = variant === 'empty' || variant === 'cleaned'; const showTracker = variant !== 'empty'; const trackerExpanded = variant === 'expanded' || variant === 'expanded-nap' || variant === 'expanded-wheel'; const showEditor = variant === 'editor'; const showPlus = variant === 'plus'; const showDialog = variant === 'dialog'; const showToast = variant === 'cleaned'; const isWrapup = variant === 'wrapup' || variant === 'wrapup-answering' || variant === 'wrapup-edit'; const wrapupAnswering = variant === 'wrapup-answering'; const wrapupEditing = variant === 'wrapup-edit'; const eveningTone = variant === 'evening' || variant === 'dialog' || isWrapup; const time = isWrapup ? '17:06' : (eveningTone ? '21:14' : (variant === 'empty' ? '07:32' : '15:47')); const date = (variant === 'empty' || isWrapup) ? '5월 23일 (토)' : '5월 22일 (금)'; const sheetActive = trackerExpanded || showEditor || showPlus || showDialog || wrapupEditing; return (
{/* Dynamic island */}
{showTracker && ( variant === 'empty' || variant === 'cleaned' ? : isWrapup ? : )} {showTracker && } {/* Stream */}
{isEmpty ? ( ) : (
{isWrapup ? ( <> 오전 연습. 손목 풀고 시작. 앙상블 합주 — 마디 32~48 합이 진짜 좋았다. 오늘 앙상블 갔다왔다. ) : variant === 'evening' ? ( <> 새벽에 한 번 깼는데 다시 잘 잤다. 아침에 든 생각 한 줄 — 천천히 가도 되는 날. 급하지 않은 일은 내일로 미뤄도 무너지지 않는다. 창문 열어두고 차 한 잔.
오늘 저녁은 조용했다. 오늘 한 줄: 천천히 가도 무너지지 않는다는 걸 다시 배움. ) : ( <> 아침에 든 생각 한 줄. 새 프로젝트 첫 줄 적었다. 가볍게 시작. 이 앱에 관한 아이디어 떠오르는 거~~ 마찰 줄이기 = 매일 쓰게 만드는 가장 큰 레버. )}
)}
{showPlus && (
)} {isWrapup && !wrapupEditing && (
)}
{showPlus && } {isWrapup && !wrapupEditing && (
{/* grabber */}
)} {wrapupAnswering && } {showPlus ? : }
{/* Overlays */} {trackerExpanded && <>
} {showEditor && <>
} {showDialog && } {showToast && } {wrapupEditing && <>
} {/* Home indicator — hidden when keyboard up */} {!showPlus &&
}
); } Object.assign(window, { TodayScreen, Mascot, wl, Ico, MoodFace, SproutIco, StatusCard, Bubble, LinkBubble, StatusBar, TabBar, Header, TrackerStrip, FilterChips, DaySep, Toggle, PencilIco, WrapupEditorSheet, TrackerEditorSheet, PickRow, WheelTimePicker, Keyboard, tagColors, TrackerSheet, CustomRow, NapChips, }); // ─── Splash screens ─────────────────────────────────────────── // Two variants — minimal centered, and tagline/poetic. function SplashWaves({ color = '#74B2E7', opacity = 1 }) { // Decorative SVG wave layers in the icon style return ( ); } function SplashScreen({ variant = 'minimal' }) { const W = 390, H = 844; const bg = variant === 'poetic' ? 'linear-gradient(180deg, #F0F6FA 0%, #F8FBFC 50%, #FBFDFC 100%)' : '#FBFDFC'; return (
{/* Dynamic island */}
{variant === 'minimal' && ( <> {/* center icon + name */}
wayvel
파도타기
{/* subtle wave decoration at bottom */} {/* tiny loading dot */}
{[0, 1, 2].map(i => (
))}
)} {variant === 'poetic' && ( <> {/* top: icon */}
{/* center: brand quote */}
파도를 멈출 순 없지만,
파도 타는 법을
배울 수는 있다.
— Jon Kabat-Zinn
{/* bottom waves */} {/* mascot peeking from waves */} )} {/* Home indicator */}
); } Object.assign(window, { SplashScreen });