diff --git a/README.md b/README.md index db105ff..559f224 100644 --- a/README.md +++ b/README.md @@ -98,3 +98,7 @@ QR·4자리 코드는 기본 10분의 임시 공간 초대입니다. 초대 코 로그인 계정의 임시 저장과 받은 파일을 합쳐 개인별 2GiB로 제한합니다. 같은 원본은 한 계정에서 한 번 계산하고 다른 계정의 한도와 분리합니다. 한도가 차면 파일 수신·다운로드는 계속하고 받은 항목에 저장하지 않았다는 안내를 표시합니다. 익명 업로드는 기기 세션당 2GiB, 서버 전체 20GiB이며 화면에는 내역을 표시하지 않습니다. 근처 위치 검색과 기종 구분은 [기기 발견 문서](docs/NEARBY_DISCOVERY.md)를 참고하세요. 양쪽 기기가 위치를 허용하면 약 100m 내 기기를 표시하며, 대기 화면은 반복 목록 검색을 하지 않습니다. + +로고 원본은 `apps/web/public/logo.svg`, 아이콘 원본은 `apps/web/public/icon.svg`입니다. 헤더·서비스 정보 로고는 SVG 경로를 사용하므로 기기 기본 폰트에 영향을 받지 않습니다. 흰 글자는 테마에 맞춰 변경하고 청록색 점은 유지합니다. 아이콘 원본을 교체한 뒤 `node scripts/generate-icons.mjs`를 실행하면 192px·512px·Android maskable PNG가 다시 생성됩니다. + +기기 이름은 서버 DB에 저장되며 동일 브라우저의 기기 세션 쿠키가 유효한 동안 유지됩니다. 쿠키를 지우거나 다른 브라우저로 접속하면 새 기기로 인식됩니다. diff --git a/apps/web/public/icon-192.png b/apps/web/public/icon-192.png index 63848ae..96f415b 100644 Binary files a/apps/web/public/icon-192.png and b/apps/web/public/icon-192.png differ diff --git a/apps/web/public/icon-512.png b/apps/web/public/icon-512.png index 1e8f541..d5f748d 100644 Binary files a/apps/web/public/icon-512.png and b/apps/web/public/icon-512.png differ diff --git a/apps/web/public/icon-maskable.png b/apps/web/public/icon-maskable.png index 834dbe2..a001acc 100644 Binary files a/apps/web/public/icon-maskable.png and b/apps/web/public/icon-maskable.png differ diff --git a/apps/web/public/icon.svg b/apps/web/public/icon.svg index 5f6ccf1..2586ada 100644 --- a/apps/web/public/icon.svg +++ b/apps/web/public/icon.svg @@ -1 +1,12 @@ - + + + + + + + + + + + + diff --git a/apps/web/public/logo.svg b/apps/web/public/logo.svg new file mode 100644 index 0000000..d16444d --- /dev/null +++ b/apps/web/public/logo.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/apps/web/src/App.vue b/apps/web/src/App.vue index 23d7141..1be53ed 100644 --- a/apps/web/src/App.vue +++ b/apps/web/src/App.vue @@ -40,6 +40,7 @@ import { version as appVersion } from '../package.json'; import AccountPanel from './AccountPanel.vue'; import SendComposer from './SendComposer.vue'; import InstallButton from './InstallButton.vue'; +import LogoMark from './LogoMark.vue'; import { createNearbySearch } from './nearbySearch'; import { useVisibleViewport } from './viewport'; useVisibleViewport(); @@ -631,7 +632,7 @@ async function spaceAction(space, action, memberId) {
기기 사이를 가볍게.
@@ -1129,7 +1130,7 @@ async function spaceAction(space, action, memberId) { diff --git a/apps/web/src/LogoMark.vue b/apps/web/src/LogoMark.vue new file mode 100644 index 0000000..525ae62 --- /dev/null +++ b/apps/web/src/LogoMark.vue @@ -0,0 +1,20 @@ + + diff --git a/apps/web/src/style.css b/apps/web/src/style.css index 3e1fd96..48a7795 100644 --- a/apps/web/src/style.css +++ b/apps/web/src/style.css @@ -116,17 +116,14 @@ button:active:not(:disabled) { border-bottom: 1px solid var(--line); } .wordmark { - font-size: 43px; - font-weight: 750; - letter-spacing: -3.5px; + display: block; + width: 64px; + height: 32px; border: 0; background: none; padding: 0; line-height: 1; } -.wordmark span { - color: var(--brand); -} .desktop-nav { display: flex; gap: 34px; @@ -1257,9 +1254,6 @@ h1 span { height: 80px; gap: 0; } - .wordmark { - font-size: 37px; - } .desktop-nav { display: none; } @@ -2893,9 +2887,6 @@ a.button { .site-header { gap: 18px; } -.site-header .wordmark { - font-size: 32px; -} .header-brand { display: flex; align-items: flex-end; @@ -3035,7 +3026,8 @@ a.button { gap: 10px; } .site-header .wordmark { - font-size: 28px; + width: 56px; + height: 28px; } .device-footer { align-items: flex-start; @@ -3447,8 +3439,9 @@ a.button { font-size: 13px; } .service-brand { - font-size: 30px; - letter-spacing: -0.07em; + display: block; + width: 64px; + height: 32px; } .service-info p { margin: 0; @@ -3500,3 +3493,48 @@ a.button { color: var(--muted); font-size: 12px; } + +.brand-logo { + display: block; + color: var(--ink); +} +.wordmark .brand-logo { + width: 100%; + height: 100%; +} +.brand-logo svg { + display: block; + width: 100%; + height: 100%; +} +.modal .device-settings-form { + height: auto; + align-items: flex-end; +} +.modal .device-settings-form input, +.modal .device-settings-form .button { + height: 44px; + min-height: 44px; + border-radius: 12px; + padding: 8px 12px; +} +.modal .device-settings-form .button { + min-width: 72px; +} +.modal .device-settings-form input:focus-visible { + outline-offset: -2px; +} +.modal .discovery-setting { + border: 0; + padding-bottom: 0; +} +.modal .discovery-setting input { + margin: 0; + width: 100%; + height: 100%; +} +@media (max-width: 639px) { + .modal .device-settings-form { + align-items: stretch; + } +} diff --git a/docs/VERIFICATION.md b/docs/VERIFICATION.md index 958c24b..f6e8a83 100644 --- a/docs/VERIFICATION.md +++ b/docs/VERIFICATION.md @@ -113,3 +113,11 @@ - 서비스 정보는 hop. 제목을 유지하고 운영체제 설명과 아이콘 목록으로 정리했다. 제작사명은 왼쪽, 웹 패키지 버전(v0.1.0)은 오른쪽에 표시한다. PC·모바일 화면을 확인했다. 연결 참여/만들기 폼의 설명 여백과 간격을 줄이고 기기 카드의 온라인 표시는 제거했으며 승인 대기 표시는 유지했다. - 기기 목록의 수동 새로고침 버튼을 제거했다. 접속 이벤트에 따른 목록 자동 갱신은 유지한다. 사용자가 수정한 헤더 버튼 간격과 서비스 정보 줄 간격도 함께 반영했다. + +## 2026-10-12 사용자 로고·아이콘과 기기 설정 마무리 + +- 사용자가 넣은 logo.svg를 헤더와 서비스 정보에 적용했다. 폰트 대신 SVG 경로를 사용하고 흰 글자를 테마 색상으로 바꾸며 청록색 점은 유지한다. 동시에 표시되는 SVG clipPath ID도 분리한다. +- 새 icon.svg로 192px·512px PNG와 Android maskable PNG를 재생성했다. maskable은 중앙 안전 영역에 글자와 점이 들어오도록 여백을 넣는다. 재생성 스크립트를 추가했다. +- 발견 허용은 실제 체크박스 입력과 switch 역할을 유지한 Tailwind 토글로 표시한다. 키보드 포커스·비활성·동작 줄이기 상태를 지원하고 아래 구분선을 제거했다. +- 이름 저장 버튼은 ‘저장’으로 변경하고 입력창과 44px 높이·둥근 모서리를 맞췄다. PC 폼의 이전 30px 고정 높이를 없애 제목과 입력창이 겹치지 않도록 했다. +- 전체 빌드, PC/모바일 레이아웃·테마별 로고 색·기기명 유지·토글 및 방 관리·파일/링크 전송·PWA 브라우저 검증을 통과했다. PNG 크기·청록색 점 보존과 maskable의 불투명 배경·중앙 안전 영역도 확인했다. 실제 Galaxy/iPhone의 설치 아이콘 반영은 운영 재배포 후 확인한다. diff --git a/scripts/generate-icons.mjs b/scripts/generate-icons.mjs new file mode 100644 index 0000000..5dac1bb --- /dev/null +++ b/scripts/generate-icons.mjs @@ -0,0 +1,22 @@ +import { createRequire } from 'node:module'; +import { readFile } from 'node:fs/promises'; +import { fileURLToPath } from 'node:url'; +const require = createRequire(new URL('../apps/server/package.json', import.meta.url)); +const sharp = require('sharp'); +const asset = (name) => fileURLToPath(new URL(`../apps/web/public/${name}`, import.meta.url)); +const source = await readFile(asset('icon.svg')); +await Promise.all( + [192, 512].map((size) => + sharp(source, { density: (72 * size) / 64 }) + .resize(size, size) + .png() + .toFile(asset(`icon-${size}.png`)), + ), +); +// Leave margin so the letter and dot remain inside Android's central safe zone. +const padded = await sharp(source, { density: 432 }).resize(384, 384).png().toBuffer(); +await sharp({ create: { width: 512, height: 512, channels: 4, background: '#111111' } }) + .composite([{ input: padded, left: 64, top: 64 }]) + .png() + .toFile(asset('icon-maskable.png')); +console.log('Generated icon-192.png, icon-512.png, icon-maskable.png from icon.svg'); diff --git a/tests/e2e/device-menu.mjs b/tests/e2e/device-menu.mjs index 74a366c..6af8531 100644 --- a/tests/e2e/device-menu.mjs +++ b/tests/e2e/device-menu.mjs @@ -43,7 +43,7 @@ try { async function rename(page, name) { await page.locator('.device-name').click(); await page.getByRole('textbox', { name: '기기 이름' }).fill(name); - await page.getByRole('button', { name: '이름 저장' }).click(); + await page.getByRole('button', { name: '저장' }).click(); await page.locator('.device-name').filter({ hasText: name }).waitFor(); } await rename(host, '방장 Mac'); diff --git a/tests/e2e/layout.mjs b/tests/e2e/layout.mjs index 845965a..d6c5e12 100644 --- a/tests/e2e/layout.mjs +++ b/tests/e2e/layout.mjs @@ -46,6 +46,24 @@ try { }); await page.goto(url); await page.locator('.app-shell[data-online="true"]').waitFor(); + await page.locator('.wordmark .brand-logo svg').waitFor(); + const letterColor = () => + page + .locator('.wordmark path[fill="currentColor"]') + .first() + .evaluate((el) => getComputedStyle(el).fill); + const dotColor = () => + page.locator('.wordmark path[fill="#00FFFF"]').evaluate((el) => getComputedStyle(el).fill); + assert.equal(await letterColor(), 'rgb(245, 245, 245)'); + assert.equal(await dotColor(), 'rgb(0, 255, 255)'); + await page.getByRole('button', { name: '더보기', exact: true }).click(); + await page.getByRole('menuitem', { name: '라이트 테마로 전환', exact: true }).click(); + assert.equal(await letterColor(), 'rgb(23, 23, 23)'); + assert.equal(await dotColor(), 'rgb(0, 255, 255)'); + await page.screenshot({ path: 'tests/e2e/brand-light.png' }); + await page.getByRole('button', { name: '더보기', exact: true }).click(); + await page.getByRole('menuitem', { name: '다크 테마로 전환', exact: true }).click(); + assert.equal( await page .locator('.header-actions > .theme-toggle,.header-actions > .pwa-install-button') @@ -64,6 +82,15 @@ try { await more.click(); await page.getByRole('menuitem', { name: '서비스 정보', exact: true }).click(); await page.getByRole('dialog', { name: '서비스 정보', exact: true }).waitFor(); + const clipIds = await page + .locator('.brand-logo clipPath') + .evaluateAll((nodes) => nodes.map((node) => node.id)); + assert.equal( + new Set(clipIds).size, + clipIds.length, + '동시에 표시한 로고의 clipPath ID가 겹치지 않음', + ); + assert.equal(await more.getAttribute('aria-expanded'), 'false'); await page.screenshot({ path: 'tests/e2e/service-info-desktop.png' }); await page.setViewportSize({ width: 390, height: 844 }); @@ -205,6 +232,18 @@ try { .evaluate((el) => getComputedStyle(el).fontSize), '16px', ); + const mobileInput = await page.getByLabel('기기 이름', { exact: true }).boundingBox(); + const mobileSave = await settings + .getByRole('button', { name: '저장', exact: true }) + .boundingBox(); + assert.equal(mobileInput.height, mobileSave.height); + await page.getByRole('switch', { name: '다른 기기에서 발견 허용' }).waitFor(); + assert.equal( + await page + .locator('.discovery-setting') + .evaluate((el) => getComputedStyle(el).borderBottomWidth), + '0px', + ); const settingsBounds = await settings.boundingBox(); assert(Math.abs(settingsBounds.y + settingsBounds.height - 900) < 2, '모바일 설정 하단 시트'); await page.getByLabel('기기 이름', { exact: true }).focus(); @@ -261,8 +300,22 @@ try { await page.keyboard.press('Escape'); await sheet.waitFor({ state: 'hidden' }); await page.locator('.footer-device-summary').click(); + const deviceModal = page.getByRole('dialog', { name: '설정', exact: true }); + const titleBounds = await deviceModal.locator('header').boundingBox(); + const formBounds = await deviceModal.locator('.device-settings-form').boundingBox(); + assert( + formBounds.y >= titleBounds.y + titleBounds.height + 12, + '제목과 기기 이름 폼이 겹치지 않음', + ); + const desktopInput = await page.getByLabel('기기 이름', { exact: true }).boundingBox(); + const desktopSave = await deviceModal + .getByRole('button', { name: '저장', exact: true }) + .boundingBox(); + assert.equal(desktopInput.height, desktopSave.height); + assert(Math.abs(desktopInput.y - desktopSave.y) < 1, 'PC 입력창과 버튼이 같은 위치에 정렬됨'); + await page.screenshot({ path: 'tests/e2e/device-settings-desktop.png' }); await page.getByLabel('기기 이름', { exact: true }).fill('나의 테스트 기기'); - await page.getByRole('button', { name: '이름 저장', exact: true }).click(); + await page.getByRole('button', { name: '저장', exact: true }).click(); await page.locator('.footer-device-name').filter({ hasText: '나의 테스트 기기' }).waitFor(); await page.locator('.footer-device-summary').click(); await page.getByLabel('다른 기기에서 발견 허용').uncheck(); diff --git a/tests/e2e/phase1.mjs b/tests/e2e/phase1.mjs index 06de01f..3b62d2f 100644 --- a/tests/e2e/phase1.mjs +++ b/tests/e2e/phase1.mjs @@ -81,7 +81,7 @@ try { await receiver.locator('.app-shell[data-online="true"]').waitFor(); await sender.locator('.device-name').click(); await sender.getByRole('textbox', { name: '기기 이름' }).fill('보내는 Mac'); - await sender.getByRole('button', { name: '이름 저장' }).click(); + await sender.getByRole('button', { name: '저장' }).click(); await sender.locator('.device-name').filter({ hasText: '보내는 Mac' }).waitFor(); await sender.getByRole('button', { name: '다른 기기 연결', exact: true }).click(); await sender.getByRole('button', { name: '연결 공간 만들기' }).click(); @@ -401,7 +401,7 @@ try { assert.equal(await second.locator('.device-name').innerText(), oldDevice); await second.locator('.device-name').click(); await second.getByRole('textbox', { name: '기기 이름' }).fill('재연결된 Mac'); - await second.getByRole('button', { name: '이름 저장' }).click(); + await second.getByRole('button', { name: '저장' }).click(); await second.locator('.device-name').filter({ hasText: '재연결된 Mac' }).waitFor(); assert.deepEqual(errors, []); console.log(