온스페이스로 마음미술관 앱 만들기: 마스터 프롬프트 전문 가이드

Build "마음미술관 (My Mood Museum)", a mobile-first Expo app for a portrait phone (design 390 x 844, scale by ratios) that must also run unchanged in the web preview. Build everything below in ONE pass, in the order given, then self-check against the checklist at the end.

== HARD RULES ==
1. Stack: React Native core (View, Text, Pressable, TextInput, Animated, Easing, FlatList, ScrollView, Modal, Linking, Platform, KeyboardAvoidingView) + expo-router single screen app/index.tsx + expo-image (pictures) + expo-sensors DeviceMotion (tilt). Nothing else. Never import three, expo-gl, skia, svg, reanimated, lottie, gesture-handler.
2. Never edit babel.config.js, metro.config.js, app.json, tsconfig, or package.json (read-only). Never create config files or platform-specific .native/.web files. No "mobile only" fallback screens.
3. All helper modules under src/ (screens, museum, services, domain). Animated with useNativeDriver: true for transform/opacity; Easing.out(Easing.cubic); durations exactly as written.
4. Style: background #F4F1EC; wall #FBF9F6; floor #EDE7DF with far strip #E4DDD3; spotlight #FFF4DC; frame border #DCC7A8 with white mat #FFFFFF; blank canvas #EEE8E0; label plate #CFC6BA; accent #F2B94F; dark overlay/text #2A2622; secondary text #7A7268. Shadows opacity 0.10–0.16 radius 10–16 (elevation 4–6). Corners 14–20 px. Titles 26–30 px weight 800, body 15 px. No gradients, no emoji in UI, Korean UI text exactly as quoted.
5. No ceiling, side walls, furniture, avatar, or joystick anywhere. Depth comes only from layer parallax and a perspective-tilted floor.

== STATE (src/domain/appState.ts) ==
Types: Artwork { id, title, artist, date, imageUrl, objectUrl }; Commentary { id, connection, detail, question }; Saved = Artwork + { mood, labelKo, commentary, createdAt }.
State: { screen: 'ask'|'reveal'|'gallery'|'detail'|'wall', mood, labelKo, artworks: Artwork[], commentary: Commentary[], selectedIndex, loading, error, saved: Saved[], user }.
Actions: SUBMIT_MOOD, SEARCH_DONE, SEARCH_FAILED, REVEAL_DONE, OPEN_DETAIL, CLOSE_DETAIL, OPEN_WALL, CLOSE_WALL, ASK_AGAIN, SET_COMMENTARY, SET_SAVED, SET_USER.

== SCREEN 1: ASK (src/screens/AskScreen.tsx) ==
Full screen. Eyebrow "MY MOOD MUSEUM" (12 px, letterSpacing 3, #7A7268) at 14% height; title "오늘 마음은\n어떤가요?" (30 px, 800); a white input card (radius 20, padding 20, min height 140, shadow) with multiline TextInput placeholder "요즘 지쳐서 아무것도 하기 싫어요"; full-width button "내 마음에 맞는 명화 찾기" (height 56, radius 18, #2A2622, white text) above the keyboard. Empty/whitespace input shows "마음을 한 줄만 적어 주세요" and does not submit. Living background: Animated backgroundColor (this is the only useNativeDriver:false animation) moving over 600 ms between #F4F1EC (0 chars), #EEF1F6 (1–20), #F6EEF0 (21+).

== DATA FLOW on submit ==
a) AI call 1 (OnSpace built-in AI, no third-party key): convert the Korean mood to strict JSON { "query", "labelKo" }; query must be one of: hope, calm, solitude, nature, night, sea, flowers; labelKo a short Korean label like "회복과 고요". Invalid output or word outside the allowlist → { query: "nature", labelKo: "자연" }. Enforce the allowlist in code.
b) The Met Collection API (https://metmuseum.github.io/, no key): GET https://collectionapi.metmuseum.org/public/collection/v1/search?hasImages=true&q=<query> → objectIDs. Take at most the first 12; fetch /public/collection/v1/objects/<id> with max 3 in flight; skip 404/errors one by one; keep only isPublicDomain === true with non-empty primaryImageSmall (fallback primaryImage); dedupe by objectID; first 3 valid. Map: id=objectID, title, artist=artistDisplayName || "작가 미상", date=objectDate, imageUrl=primaryImageSmall || primaryImage, objectUrl=objectURL. Fewer than 3 → SEARCH_FAILED("작품을 충분히 찾지 못했어요. 다시 시도해 주세요."). Prefetch the 3 images with expo-image Image.prefetch on SEARCH_DONE. Never load primaryImage into a view.
c) AI call 2, in parallel with prefetch, once for all three: input = mood + per artwork only { id, title, artist, date }; output strict JSON array of { id, connection, detail, question } in Korean (connection: how it relates to the mood, 1–2 sentences; detail: one visual element to look at; question: one reflective question). It must not invent artwork facts. Match by id; missing id → "해설을 준비하지 못했어요". Commentary never blocks the reveal (detail shows "해설을 불러오는 중" until it arrives).

== SCREEN 2: GALLERY with rooms (src/screens/GalleryScreen.tsx, src/museum/RoomPage.tsx, src/museum/layout.ts) ==
Layout for window W x H: wallHeight = 0.58H; frameWidth = 0.68W; frameHeight = frameWidth * 1.25; frameLeft = (W - frameWidth)/2; frameTop = 0.12H; wall spotlight ellipse 0.95W x 0.5H at top 0.04H; floor spotlight ellipse 0.6W x 0.12H at top 0.62H.
Header: left "다시 묻기" (ASK_AGAIN), center "오늘의 주제 · <labelKo>", right "내 미술관" (OPEN_WALL) with a badge "♥ <count>" when saved.length > 0.
Body: Animated.FlatList of 3 RoomPage items, horizontal, pagingEnabled, getItemLayout fixed, onScroll → scrollX (useNativeDriver true). Footer: 3 pagination dots (#2A2622 active, #CFC6BA inactive) and a hint "옆으로 넘겨 다음 방으로" that disappears after the first swipe. Web: ArrowLeft/ArrowRight page the list (window keydown in useEffect, Platform.OS === 'web'); focus the page on first click.
RoomPage root: a View sized exactly W x H with overflow: 'hidden'. Every parallax layer is a child of this root, so a lagging wall/spotlight/floor is clipped at its own room's edge and never bleeds into the neighbouring room (without this clip, rooms 1–2 show a wall shifted off to one side with an empty strip next to the frame while still off-screen). RoomPage layers (absolute children of that root, in order, with parallax offset = scrollX - index*W and translateX = offset * (1 - factor)): back wall (zIndex 1, factor 0.30); wall spotlight ellipse #FFF4DC opacity 0.9 (zIndex 2, factor 0.55); floor container from 0.58H to bottom, overflow hidden (zIndex 1, factor 0.70) containing an inner 130%-wide floor with a 28 px far strip, tilted with transform [{perspective:900},{translateY:-h/2},{rotateX:'30deg'},{translateY:h/2}] so the far edge stays on the 0.58H line, plus the floor spotlight ellipse #F7F3EE; frame (zIndex 3, factor 1.00): outer #DCC7A8 padding 14 radius 12 shadow → mat #FFFFFF padding 10 → canvas #EEE8E0 holding an expo-image Image contentFit "contain" (300 ms fade); label plate 120 x 14 #CFC6BA; caption: title (15 px, 700) and "artist · date" (13 px, #7A7268) centered under the frame. The frame is a Pressable → OPEN_DETAIL(index).

== CINEMATIC REVEAL (screen 'reveal' renders the gallery locked on room 0) ==
Each RoomPage receives a prop startFullyRevealed: boolean. Hidden start (startFullyRevealed false): dim overlay #2A2622 opacity 0.6 (zIndex 5, pointerEvents none after reveal), spotlight opacity 0, frame translateY -360 opacity 0, picture opacity 0, caption opacity 0. Revealed start (startFullyRevealed true): dim 0, spotlight 1, frame translateY 0 opacity 1, picture 1, caption 1. Every Animated.Value MUST be constructed with its initial value derived from startFullyRevealed at useRef time, e.g. const fin = startFullyRevealed; useRef(new Animated.Value(fin ? 0 : 0.6)).current for the dim, useRef(new Animated.Value(fin ? 1 : 0)).current for picture/spotlight/caption. Never construct every value as hidden and then fix it in a useEffect: useRef only applies once at mount and the effect runs a frame later, so a room mounted already-revealed would flash a black overlay for at least one frame. play() = Animated.sequence: (1) room 0 only: centered white text "당신의 마음을 읽는 중..." fades in 300 ms and the room waits here while loading is true, switching to "<labelKo>의 방을 여는 중..." once labelKo is known; (2) spotlight opacity 0→1 in 500 ms; (3) frame translateY -360→0 and opacity 0→1 in 650 ms; (4) picture opacity 0→1 in 400 ms; (5) caption 0→1 in 300 ms while dim 0.6→0 in 500 ms; (6) frame border flashes #F2B94F for 300 ms. When room 0 finishes → REVEAL_DONE and scrolling unlocks (scrollEnabled false until then). Rooms 1 and 2 play once when they first become ≥60% visible (onViewableItemsChanged). SEARCH_FAILED: fade the dim out and show a centered card with the message and a button "다시 시도" (ASK_AGAIN).

== TILT (src/museum/useTilt.ts) ==
Returns Animated tiltX, tiltY in about -1..1, spring-smoothed (stiffness 120, damping 18). Native: expo-sensors DeviceMotion; if isAvailableAsync() is false do nothing; setUpdateInterval(50); x = clamp(rotation.gamma/0.6,-1,1), y = clamp((rotation.beta-0.8)/0.6,-1,1); subscribe only while screen is gallery or detail; unsubscribe otherwise and on unmount. Web: window mousemove, x = clientX/innerWidth*2-1, y = clientY/innerHeight*2-1. Apply as extra translate: wall 6 px, wall spotlight 10 px, floor 8 px, frame 16 px, picture inside the frame +4 px.

== SCREEN 3: DETAIL (src/screens/DetailScreen.tsx) ==
Full-screen #2A2622. Picture (expo-image contain, full width, top 58%) with Ken Burns scale 1.0→1.06 over 12 s looping back and forth, plus tilt 10 px. Open: picture fades in 350 ms, card slides up 400 ms. Card (white, radius 20, bottom 42%): title (20 px, 800), "artist · date" (14 px, #7A7268), then three lines appearing 500 ms apart (fade + 8 px rise): connection, detail, question. Row: link "The Met에서 보기" (Linking.openURL(objectUrl)) and button "내 미술관에 저장하기". "닫기" top-left and Android hardware back → CLOSE_DETAIL back to the same room.

== AUTH + SAVE + WALL ==
Email OTP login via OnSpace Cloud, triggered only by "내 미술관에 저장하기" while logged out (return to the card and complete the save after login) or by the wall's empty-state button "로그인하고 시작하기". Table saved_artworks: user_id, met_object_id, title, artist, date, image_url, object_url, mood_text, label_ko, commentary_json, created_at; unique (user_id, met_object_id); duplicate save shows "이미 내 미술관에 있어요"; never store image bytes. src/services/favorites.ts: save(...) and listMine() ordered by created_at desc; call listMine() on start and after login → SET_SAVED.
SCREEN 4: WALL (src/screens/WallScreen.tsx): vertical ScrollView on #FBF9F6 with a thin floor strip at the bottom; saved artworks hang as frames (same frame style, 46% width) alternating left/right with title, "artist · date", the mood in quotes (13 px, #7A7268), and the saved date. Right after a save the newest frame drops in from -200 px over 600 ms. Empty state: one empty frame with "아직 걸린 작품이 없어요". Back button → CLOSE_WALL; logout button at the top.

== SELF-CHECK before you finish (answer each with DONE/NOT DONE and one line of evidence) ==
1. No forbidden imports; no config files touched; no platform-specific files.
2. Ask screen validates empty input and animates the background.
3. Allowlist enforced in code with the nature fallback.
4. Met filter: ≤12 candidates, ≤3 concurrent, 404 skipped, public domain only, primaryImageSmall only, 3 distinct works.
5. Reveal durations exactly as written; room 0 waits for the API; rooms 1–2 reveal on first view; swipe locked until room 0 finishes.
6. Parallax factors 0.30/0.55/0.70/1.00 and the floor's far edge stays on the 0.58H line.
6a. RoomPage root has overflow: 'hidden' and all parallax layers are its children: swipe to room 1 and 2, then check that the wall, spotlight and floor sit centered behind the frame with no empty strip, and nothing from one room is visible inside another.
6b. Animated initial values come from startFullyRevealed at useRef time: a room mounted with startFullyRevealed true shows no dark frame on its first render (no 0.6 dim, no hidden picture), and a hidden room still starts at dim 0.6 / picture 0 before play().
7. Tilt works on device and mouse on web; no subscription on ask/wall screens.
8. Detail: Ken Burns, staggered commentary lines, link, save, close and Android back.
9. Save requires login, duplicates blocked, wall restores after logout/login, newest frame drops in.
10. Same code runs in the web preview and on a real phone; frames fully visible on 390 x 844.
Then list every file you created and every package that was installed.