# 낚시터 UI · 장비와 집중 설정

낚시터 준비 화면에 적용한 장비 선택·효과 팝업·집중 설정과 시안 기준 배치, 실제 장착 연결 및 검증 범위.

**상태:** Flutter 인게임 적용·main 병합·푸시 완료 · 기초 구현 + 사용자 시각 조정 · 최종 외관 확인은 사용자 담당/미완료

**최종 수정:** 2026-11-02 · **코드 기준:** `e14ef25b7bbc45451c8a4da89a6256bb34ddc86d`

이번 문서는 **집중 시작 전 낚시터 화면**의 최종 적용 결과다. 장비 드롭다운·효과 팝업·집중 설정·지역 이미지와 상단 헤더 배치는 작업 커밋 `503407d`에 포함되며, `e14ef25`로 main에 병합하고 원격 반영을 확인했다. 설치된 휴대폰 앱의 업데이트나 스토어 배포를 완료했다는 뜻은 아니다.

[집중 UI · 인게임 적용 결과](/focus-ui/)의 진행 중 타이머·태그·제목·완료 보상과 구분한다. 기존 승인 시안과 [TO WORK](/to-work/)는 제작 근거로 보존하며, 구매·장착·미끼 소비·보상 확률 규칙은 [장비와 경제](/equipment-economy/)와 기존 저장 로직을 유지한다.

## 화면 정보의 순서

| 순서 | 표시와 동작 |
|---|---|
| 1. 상단 헤더 | 햄버거 메뉴·Little Cast 로고·실제 코인 잔액. 낚시터에서 상단 안전 여백을 반영해 시안의 여유를 복원 |
| 2. 장소 정보 | 해역 제목과 자동 계산한 주야간·전환까지 남은 시간 |
| 3. 지역 이미지 | 산호초·계곡·북극·심해 전환. 받침이 배경의 커스틱 무늬 안에 걸치는 구도 |
| 4. 장비 | 낚싯대·미끼 선택 캡슐을 나란히 놓고 아래에 **장비 효과 보기** |
| 5. 집중 시간 | 얇은 숫자의 시간 표시와 시간 줄이기·늘리기 |
| 6. 집중 설정 | 접을 수 있는 물빛 패널. 시간 프리셋·태그·제목·보호 집중 |
| 7. 시작 | **여기서 낚시하기**. 집중 설정보다 넓은 기존 물 버튼 |

시간·설정·시작 버튼을 한 화면에 강제로 넣기 위해 지역 그림과 정보 간격을 추가 압축하지 않는다. 시안의 이미지 비중과 그룹별 여백을 우선하며 **짧은 화면·큰 글씨·설정을 펼친 상태는 스크롤로 이어진다.**

## 장비 선택 드롭다운

기존 물빛 캡슐 버튼을 누르면 둥근 물빛 목록과 흰색 테두리가 열린다. 항목마다 기존 제품 그림과 이름을 보여주고, 현재 장착한 항목은 밝은 캡슐·체크와 선택 접근성 정보로 구분한다.

| 항목 | 목록과 표시 기준 |
|---|---|
| 낚싯대 | 기본 제공 또는 실제 보유한 낚싯대만 표시 |
| 기본 미끼 | 기본 제공 항목이며 **무제한**으로 표시 |
| 소모성 미끼 | 재고가 있는 종류만 표시하고 **보유 N개** 안내 |
| 미보유·재고 없음 | 선택 목록에서 제외. 이 목록에서 구매·해금을 처리하지 않음 |

선택하면 기존 `runtime.equipProduct`를 통해 실제 장착을 저장하고 버튼 이름과 다음 목록의 선택 상태를 갱신한다. 목록 밖이나 뒤로 가기로 닫으면 장착을 바꾸지 않는다. 상단 헤더를 누른 경우도 닫히도록 루트 Navigator에 목록을 표시한다.

저장 중 중복 선택을 막고, 미보유·재고 소진·사용 불가·저장 예외는 안내한다. **미끼 선택 자체로 재고를 소모하지 않는다.** 기존 세션 예약·정상 완료 시 차감 계약을 유지하며, 이미 시작한 집중의 장비를 바꾸지 않는다.

## 장비 효과 팝업

**장비 효과 보기**는 물빛 그라데이션·흰 테두리·둥근 패널 안에 효과 카드 두 개와 기존 물 버튼 **닫기**를 표시한다. 코인 그림도 기존 자산을 사용한다. 짧은 화면이나 큰 글씨에서는 내용을 스크롤할 수 있다.

| 카드 | 실제 표시와 계산 |
|---|---|
| 희귀 등급별 확률 | 낚싯대와 미끼의 `rarityBonusBps` 합계를 100으로 나눠 **+N%p**로 표시 |
| 획득 코인 | 낚싯대와 미끼의 `coinBonusBps` 합계를 100으로 나눠 **+N%**로 표시 |

소수 끝의 불필요한 0은 제거한다. 확률의 퍼센트포인트와 코인의 퍼센트를 구분하며 기존 합산 규칙을 유지한다. 팝업은 효과 안내이며 구매·재추첨·보상 지급을 실행하지 않는다. 제품별 수치는 [장비와 경제](/equipment-economy/)를 따른다.

## 집중 설정

집중 설정은 **시간 표시 아래·시작 버튼 위**에 놓고, 버튼보다 좁은 너비로 가운데 정렬한다. 기존 공용 유리 표면·남색 글자·파란 보조 글자·흰 테두리를 사용한다.

| 옵션 | 동작과 표현 |
|---|---|
| 시간 프리셋 | **15·25·45·60·90분**, 현재 선택한 시간만 밝은 물빛 캡슐. 큰 글씨에서는 줄바꿈 |
| 집중 태그 | 선택한 태그의 색상 점·이름·오른쪽 화살표. 기존 태그 선택 화면으로 연결 |
| 집중 제목 | 편집 아이콘·현재 제목 또는 ‘이번 집중의 제목’. 기존 제목 입력으로 연결 |
| 보호 집중 | 기존 설정 저장과 권한·센서 준비 흐름을 유지하는 스위치 |

긴 태그·제목은 두 줄 말줄임과 전체 값 툴팁을 제공한다. 선택·편집·보호 설정의 기존 콜백을 재사용하며, 이 UI 변경으로 새로운 태그 정책이나 OS 권한 계약을 추가하지 않는다.

## 시안 기준 배치와 최종 수치

![산호초 낚시터 승인 시안: 상단 메뉴·로고·코인, 해역 제목과 주간 배지, 커스틱에 놓인 산호 받침, 장비 선택·시간·물 버튼](/images/lobby-reef.jpg)

*기존 승인 원본의 축소 사본이다. 받침이 커스틱 위에 놓인 구도와 정보별 여백을 참고한다. 집중 설정 추가 전 시안이므로 현재 Flutter 실행 화면이나 이번 변경의 검증 캡처로 사용하지 않는다. 기존 원화·문서 이미지는 수정하지 않았다.*

아래 수치는 **Flutter 논리 픽셀의 최종 코드 기준**이다. 화면 배율·원화 픽셀과 구분하며, 작은 화면에서 실제 그림 크기는 제목·주야간을 제외한 가용 영역에도 영향을 받는다.

| 요소 | 최종 적용 기준 |
|---|---|
| 본문 폭 | 최대 **600** |
| 지역 이미지 | 기준 폭360에서 높이 **246**, 본문 폭에 비례 확대. 종횡비와 알파 유효 영역을 보존 |
| 배경 바닥 기준 | 실행 배경 높이의 **48%**를 실제 중앙 cover 배율·크롭으로 화면 좌표에 환산 |
| 받침의 겹침 | 일반 배치에서 그림 하단을 커스틱 시작선보다 **64** 아래에 놓아 받침이 무늬에 걸치도록 구성 |
| 장소 상단 | 본문 장소 영역 위 안쪽 여백 **36**. 제목·주야간을 함께 배치 |
| 주야간 → 그림 | **24** |
| 그림 → 장비 | **32** |
| 장비 효과 → 집중 시간 | **32** |
| 준비 화면 시계 | **50**, 얇은 굵기와 숫자 고정 폭 |
| 시계 → 집중 설정 | **16** |
| 집중 설정 → 시작 버튼 | **20** |
| 집중 설정·시작 너비 | 좌우 여백 각각 **60 / 46**. 설정이 버튼보다 전체 **28** 좁음 |
| 본문 아래 여유 | **20** |
| 상단 헤더 | 낚시터에서 위 여백 `max(4, 32 - 실제 상단 안전 여백)`. 웹은32, 안전 여백24이면8로 중복을 방지 |

지역 그림의 알파 하단은 `bottomCenter`로 맞춘다. 모든 공용 이미지의 기본 정렬은 그대로 두고 지역 이미지에만 아래 정렬을 지정한다. 다른 화면의 헤더 위 여백은 기존 **4**를 유지한다.

## 적용과 검증 범위

다음은 **앱 변경을 main에 통합할 때의 기록**이며, 이번 기획서 문서 편집에서 Flutter 테스트를 다시 수행했다는 뜻은 아니다.

| 확인 | 결과 |
|---|---|
| 작업 커밋·main 통합 | `503407d` → **`e14ef25`**, 원격 main SHA 일치 확인 |
| 코드 포맷 | `dart format lib test`, **205개 파일 변경 없음** |
| Flutter | 정적 분석 문제 없음, main 전체 테스트 **546개 통과** |
| 장비 선택 | 실제 장착·다시 열 때 선택 유지·미보유/재고 없음 제외·미끼 재고 유지·바깥 탭 취소 |
| 배치 | **360×640 / 360×800 / 390×844 / 768×1024 / 1024×768 / 652×1084**에서 네 지역의 커스틱 겹침 확인 |
| 접근성과 도달성 | 두 배 글씨·긴 값·스크롤 도달성, 상단 안전 여백24에서 메뉴·로고·코인 정렬과 큰 이미지 비중 확인 |
| 최종 독립 코드 리뷰 | `gpt-6.1-sol / medium`, 병합을 막는 Critical·Important 결함 없음 |

기초 구현 + 사용자 시각 조정 방식을 유지한다. 자동 배치 검사는 모든 기기의 외관 승인·실제 Android/iOS 설치·터치·키보드·스토어 배포를 대신하지 않는다. **최종 외관 확인은 사용자 담당/미완료**다. 장비 테스트의 고정120ms 대기를 실제 상태 변화 대기로 개선하는 비차단 후속 항목은 결과 노트에 기록했다.

## 코드와 적용 근거

- [main 통합 커밋](https://github.com/voidreader/LittleCast/commit/e14ef25b7bbc45451c8a4da89a6256bb34ddc86d)
- [낚시터 준비 화면과 정보 간격](https://github.com/voidreader/LittleCast/blob/e14ef25b7bbc45451c8a4da89a6256bb34ddc86d/lib/focus/presentation/focus_home_page.dart)
- [장비 선택 목록·저장 처리](https://github.com/voidreader/LittleCast/blob/e14ef25b7bbc45451c8a4da89a6256bb34ddc86d/lib/focus/presentation/equipment_menu.dart)
- [장비 효과 팝업](https://github.com/voidreader/LittleCast/blob/e14ef25b7bbc45451c8a4da89a6256bb34ddc86d/lib/focus/presentation/equipment_effects_dialog.dart)
- [집중 설정 패널](https://github.com/voidreader/LittleCast/blob/e14ef25b7bbc45451c8a4da89a6256bb34ddc86d/lib/focus/presentation/focus_settings_panel.dart)
- [배경 커스틱 좌표](https://github.com/voidreader/LittleCast/blob/e14ef25b7bbc45451c8a4da89a6256bb34ddc86d/lib/design/lobby_ground.dart)
- [헤더와 본문 좌표](https://github.com/voidreader/LittleCast/blob/e14ef25b7bbc45451c8a4da89a6256bb34ddc86d/lib/main_shell.dart)
- [최종 헤더·받침 위치 결과](https://github.com/voidreader/LittleCast/blob/e14ef25b7bbc45451c8a4da89a6256bb34ddc86d/docs/results/2026-11-01-lobby-header-placement.md)
- [시안 이미지 비중·정보 간격 결과](https://github.com/voidreader/LittleCast/blob/e14ef25b7bbc45451c8a4da89a6256bb34ddc86d/docs/results/2026-11-01-lobby-reference-spacing.md)
- [장비 드롭다운 검증과 후속 항목](https://github.com/voidreader/LittleCast/blob/e14ef25b7bbc45451c8a4da89a6256bb34ddc86d/docs/results/2026-11-01-equipment-menu.md)

[화면별 동작](/screens/) · [장비와 경제](/equipment-economy/) · [집중 UI 적용 결과](/focus-ui/) · [AI용 Markdown](/fishing-ui.md) · [근거와 변경 이력](/sources/)