Compare commits
145 Commits
dev
..
27d405b154
| Author | SHA1 | Date | |
|---|---|---|---|
| 27d405b154 | |||
| 8604fb5030 | |||
| 98172b3c56 | |||
| 8d659ea956 | |||
| 46a8cb5515 | |||
| 4c846c5bee | |||
| e2d3be29da | |||
| 20f67bbc76 | |||
| 8e7955b5d7 | |||
| 2329da1090 | |||
| 60794733a1 | |||
| b39190baa2 | |||
| 48c3664136 | |||
| 091b42eb81 | |||
| d5be3c4fcd | |||
| b7d8ede48f | |||
| 6bb6a9727d | |||
| 5534a2438b | |||
| 791aaad1c0 | |||
| 6b8001b4ad | |||
| ddf0074047 | |||
| 27b8ace100 | |||
| 6cbe1440b3 | |||
| 077b9598ef | |||
| 9c932e7258 | |||
| 98e413b1a1 | |||
| bcc0c4821f | |||
| d56a8c75c3 | |||
| aed3f996fc | |||
| 8cca35151c | |||
| c114e7672b | |||
| 0b8064e569 | |||
| 5349cf55f4 | |||
| 199b0c84e9 | |||
| ad219fd0bb | |||
| 3b542cb33d | |||
| f0b5f87656 | |||
| 9be60000d9 | |||
| c2499c382a | |||
| bf40cbb254 | |||
| 3eee749ab9 | |||
| 8733cf1ee0 | |||
| 6125bf9ad8 | |||
| 09a00a1c37 | |||
| 1da98b6618 | |||
| 2d6af690d4 | |||
| 3f809b80bb | |||
| d8ab99d1ec | |||
| e64de9c247 | |||
| b8260e9860 | |||
| a6829d4157 | |||
| a3bdd2e76d | |||
| 4e03bf6393 | |||
| 639a50f8bc | |||
| 6fe7f8b168 | |||
| a86d77b2c5 | |||
| d87dd0f56b | |||
| 11ab23ed14 | |||
| 82b08df826 | |||
| a5c81cc0f2 | |||
| 091abd40be | |||
| 38484c51a6 | |||
| 1c8d9c427c | |||
| 383977bcb5 | |||
| e455e8b3a8 | |||
| 25b5938ab8 | |||
| b4b8833fc1 | |||
| 02290413b2 | |||
| c8c774f060 | |||
| 0f56db744c | |||
| b5d6204a2d | |||
| 67ac385e26 | |||
| 2e48570876 | |||
| 40b517ad10 | |||
| f9aca601b6 | |||
| 9f8d9bd7b5 | |||
| a25fef65f8 | |||
| 5abe6cfc09 | |||
| d5ea6f048e | |||
| 74017243bb | |||
| ca6c8be229 | |||
| f54db96a30 | |||
| 1ae5f7ec69 | |||
| 5f99fb3b5c | |||
| a56b8265c7 | |||
| 2582bbb59b | |||
| eaa5c33d2c | |||
| 76b86712ef | |||
| 73895edca6 | |||
| 162768d030 | |||
| 89eca761b5 | |||
| bbe6e93130 | |||
| bb6621fae5 | |||
| 6b7955e098 | |||
| 868f889505 | |||
| 5f23f5f0b8 | |||
| 20210f6716 | |||
| 3862c33690 | |||
| 1d9a2a584e | |||
| 28182cc324 | |||
| 3e1410a522 | |||
| 8a9badb01d | |||
| ecd850f468 | |||
| 9d15644180 | |||
| 3fb0e36413 | |||
| 32522ed512 | |||
| 33b3e3dc26 | |||
| 6253ddef3d | |||
| 2cc4bb301f | |||
| 33be9a80da | |||
| 981920b38e | |||
| f1a5e729f1 | |||
| f03062c92f | |||
| 3c5686e8fa | |||
| 5604a232fb | |||
| 2978ec7c90 | |||
| 0f8134eca4 | |||
| 214334a01c | |||
| 468852d839 | |||
| 3066e3b37e | |||
| 488cc79bca | |||
| af272f0ffb | |||
| da8f64b738 | |||
| 6448756aef | |||
| e8c5237ed0 | |||
| 3f94ca4d2b | |||
| c8690b6d62 | |||
| 5bf4e9f516 | |||
| 0bd0e847c5 | |||
| efb1b7d1b3 | |||
| 90fedccd84 | |||
| 208f87c24f | |||
| 0feb655327 | |||
| 0606f280b4 | |||
| 05912d8e7e | |||
| 80e717e281 | |||
| f0932cbc0c | |||
| b9833f6d23 | |||
| f479a35cef | |||
| ef2e0db4fd | |||
| a352655662 | |||
| fcfb279b16 | |||
| d94513934b | |||
| a255204ad8 | |||
| 050efaf902 |
@@ -15,8 +15,8 @@ android {
|
|||||||
applicationId "kr.sblog.slimbudget"
|
applicationId "kr.sblog.slimbudget"
|
||||||
minSdkVersion rootProject.ext.minSdkVersion
|
minSdkVersion rootProject.ext.minSdkVersion
|
||||||
targetSdkVersion rootProject.ext.targetSdkVersion
|
targetSdkVersion rootProject.ext.targetSdkVersion
|
||||||
versionCode 3
|
versionCode 2
|
||||||
versionName "1.0.2"
|
versionName "1.0.1"
|
||||||
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
|
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
|
||||||
aaptOptions {
|
aaptOptions {
|
||||||
// Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.
|
// Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.
|
||||||
|
|||||||
+39
-47
@@ -52,23 +52,23 @@
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 🚧 현재 상태 (2026-06-30)
|
## 🚧 현재 상태 (블로커)
|
||||||
- ✅ 개발자 계정 신원확인 완료 → 앱 생성 완료(`kr.sblog.slimbudget`)
|
- **개인 개발자 계정 신원확인 대기 중** — 앱 생성 버튼 잠김
|
||||||
- ✅ 필수 설정(데이터안전·콘텐츠등급(전체이용가)·앱액세스(둘러보기)·광고없음·비거래자·방침URL) 완료
|
- 주소 증빙서류 제출 이슈: 한국 서류 이름 마스킹/주소 미표기 → 도시가스/카드/은행창구 등 무마스킹 서류 확보 중
|
||||||
- ✅ 스토어 등록정보·이미지(아이콘512·피처·스크린샷7) 완료
|
- 승인 소요: 보통 2~3 영업일, 길면 1~2주
|
||||||
- ✅ **비공개 테스트 트랙에 v2(AAB) 게시 → 검토 통과**
|
|
||||||
- ✅ 구글 로그인 SHA-1 이슈 해결(Play 앱서명 SHA-1 등록) → 로그인 정상
|
|
||||||
- ⏳ **테스터 12명 opt-in 대기**(업체 의뢰) → 14일 → 프로덕션 신청
|
|
||||||
- 📌 조직 계정 전환은 보류(사업자등록 → DUNS 필요. 기프트콘 기능 때 함께)
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 📋 남은 로드맵 (프로덕션까지)
|
## 📋 남은 로드맵
|
||||||
|
|
||||||
1. ⏳ **테스터 12명 opt-in** (업체 의뢰) — 14일 카운트 시작 조건
|
1. **신원확인 승인** (대기) → "앱 만들기" 활성화
|
||||||
2. ⏳ **14일 연속** 12명 유지 → **프로덕션 액세스 신청** (자료: production-access-draft.md)
|
2. **앱 만들기** — 이름 "돈돼지 가계부", 한국어, 무료
|
||||||
3. **v3 AAB 업로드** — 이번 세션 변경(외화·월별예산·전체화면모달 등) 반영 (14일 카운트 리셋 안 됨)
|
3. **익명 셋업** (아래 체크리스트)
|
||||||
4. 승인 → **프로덕션 출시**
|
4. **필수 설정** — 데이터안전·콘텐츠등급·앱액세스(둘러보기 안내)·광고 없음·금융기능 선언·방침 URL (자료: play-store-listing.md)
|
||||||
|
5. **스토어 등록정보** — 문구 + 아이콘512·피처·스크린샷7
|
||||||
|
6. **비공개 테스트 트랙** — AAB 업로드 + **테스터 12명 opt-in**
|
||||||
|
7. **14일 연속** 12명 유지 → **프로덕션 액세스 신청** (자료: production-access-draft.md)
|
||||||
|
8. 승인 → **프로덕션 출시**
|
||||||
|
|
||||||
### ⚠️ 폐쇄 테스트 의무 (개인 계정 + 2023-11-13 이후 개설)
|
### ⚠️ 폐쇄 테스트 의무 (개인 계정 + 2023-11-13 이후 개설)
|
||||||
- **테스터 12명 이상 · 14일 연속** 폐쇄 테스트 후 프로덕션 신청 가능
|
- **테스터 12명 이상 · 14일 연속** 폐쇄 테스트 후 프로덕션 신청 가능
|
||||||
@@ -85,48 +85,40 @@
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## ✅ 적용 완료 (전부 웹/소스 배포됨)
|
## 💡 출시 전 다듬기 후보 (대기 시간 활용, 선택)
|
||||||
|
신규(빈손) 유저 경험 위주 — 저위험·고효율 순:
|
||||||
|
1. ✅ **빈 상태 → 행동 유도** (완료) — 홈 '시작하기' 카드 + 가계부내역/계좌 빈 상태 CTA. 데이터 0 계정에서만 노출
|
||||||
|
2. ✅ **오프라인·네트워크 오류 배너** (완료) — http net:error 이벤트 + App.vue 상단 고정 배너(오프라인/서버연결실패, 새로고침 버튼)
|
||||||
|
3. ✅ **앱 잠금(PIN)** (완료) — 자체 구현(해시 저장, 기본 OFF), 시작·복귀 시 잠금, 설정 토글+PIN설정 모달, 'PIN 분실→로그아웃' 갇힘 방지. 생체는 추후(네이티브 플러그인 필요)
|
||||||
|
4. ✅ **전역 에러 폴백** (완료) — errorHandler + onErrorCaptured → 흰 화면 대신 '문제 발생 + 새로고침'
|
||||||
|
5. ✅ **안드로이드 뒤로가기 개선** (완료) — 오버레이 닫기 우선 → 화면 뒤로 → 최상위 '한 번 더 누르면 종료' 토스트
|
||||||
|
6. 첫 실행 온보딩(1번과 중복이라 보류) / Play 인앱 리뷰(플러그인 필요, 출시 후) / 생체인증(출시 후)
|
||||||
|
|
||||||
**v2(versionCode 2, 1.0.1, 06-29)에 포함 — 비공개 테스트 게시·검토통과**
|
> ⚠️ 앱 잠금은 시작 흐름을 가로채는 기능이라 **실기기 검증 권장**: 설정→앱잠금 ON→PIN 설정→백그라운드 후 복귀→잠금화면 확인→PIN 해제. (현재 설치 APK엔 미반영 — 재빌드·재설치 필요)
|
||||||
- 신규 유저 빈 상태 CTA(홈 '시작하기'·내역·계좌) / 오프라인·네트워크 오류 배너
|
|
||||||
- 앱 잠금(PIN, 옵트인) + 카메라/갤러리 복귀 오작동 수정
|
|
||||||
- 전역 에러 폴백(흰 화면 방지) / 안드로이드 뒤로가기 통합(오버레이→뒤로→종료토스트)
|
|
||||||
- 분류 순서변경 보호('순서변경' 토글)
|
|
||||||
|
|
||||||
**v2 이후 추가 — 웹 배포됨, v3 빌드 대기**
|
|
||||||
- 앱 잠금 **1시간 유예**(잦은 PIN 입력 해소)
|
|
||||||
- **외화 입/지출** — 통화+환율 자동조회(open.er-api.com 무료)→원화 환산, 원본 보존. `amount`는 환산 원화라 통계·예산 무변경
|
|
||||||
- **월별 예산 + 전월/다음달 복사** — budget에 year/month 추가, 기존 예산은 현재 월로 1회 이관
|
|
||||||
- 내역추가 **전체화면 모달**(바깥 닫힘 방지) / 분류 **아코디언**(대분류 삼각형) / 계좌 셀렉트 정리(종류별 안내·이름만)
|
|
||||||
- 구글 로그인 **Play 서명 SHA-1 등록**(Google Cloud Android OAuth 클라 추가)
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 📌 남은 백로그 (출시 후 업데이트)
|
## 📌 출시 후 업데이트 백로그 (나중에 진행)
|
||||||
1. **앱 업데이트 안내** — 새 버전 알림 + 구글플레이 바로가기
|
> 첫 출시엔 미포함. 정식 출시 후 업데이트로 진행할 항목.
|
||||||
2. **관리자 신고글 목록 페이지**
|
|
||||||
3. **가계부 작성 포인트** — 건당 10P, 일 50P 제한
|
|
||||||
4. **게시판 포인트 정책 개편** — 작성 50P(도배 제외)·키워드필터·추천+5/비추-1(일50)·남글추천+1(일10)/취소-1
|
|
||||||
5. (선택) 첫 실행 온보딩 / Play 인앱 리뷰 / 생체 인증 / 외화 환율 자동 고도화
|
|
||||||
6. **조직 계정 전환 + 기프트콘 교환** — 사업자등록→DUNS→앱이전, B2B 기프트콘 매입
|
|
||||||
|
|
||||||
### 🤖 AI 기능 (★ 정식 출시 전 적용 희망)
|
1. **앱 업데이트 안내 메시지** — 새 버전 있을 때 안내 + 구글플레이 바로가기(스토어 페이지로 이동)
|
||||||
- 전제: **LLM API 키**(Claude Haiku 4.5 권장 — 학습 미사용·톤 우수·저렴 / 또는 Gemini 무료쿼터) + **개인정보처리방침·데이터안전 갱신**(제3자 LLM 추가). 백엔드 프록시·키 서버보관·실패 시 폴백.
|
2. **관리자 신고글 목록 페이지** — 관리자가 게시판 신고된 글 목록을 확인하는 화면
|
||||||
- **AI 입력 보조** (편의성, 1순위)
|
3. **가계부 작성 포인트** — 가계부 내역 작성 시 건당 10포인트, **일 50포인트 제한**
|
||||||
- ① **자연어 한 줄 입력** — "어제 스타벅스 5천원" → 폼 자동 채움(기존 parseText를 LLM 기반으로). 음성=기기STT+①
|
4. **게시판 포인트 정책 개편**
|
||||||
- ② **영수증 사진 → AI 구조화** — 멀티모달 LLM이 총액·날짜·가맹점·분류 추천(기존 Vision OCR 보강/대체)
|
1) 게시글 작성 30 → **50포인트**, **도배성 게시물은 적립 제외**
|
||||||
- ③ **자동 분류 추천** — 가맹점/메모→분류 제안
|
2) 게시글 등록 **키워드 필터링**
|
||||||
- 원칙: AI는 폼 prefill만, **사용자 확인 후 저장**
|
3) **추천 +5 / 비추 -1** (일일 최대 적립 50포인트)
|
||||||
- **AI 재무 코멘트** — 자산·수입·예상지출 기반 한마디("이러다 파산각" 등). 일1회 캐시·집계수치만 전송.
|
4) 다른 사용자 글에 **추천 누르면 +1** (일일 10 제한), 추천 **취소 시 -1**
|
||||||
|
5. ✅ **[수정완료] 분류 화면 순서변경 보호** — 기본 drag 잠금 + '순서변경' 토글로만 가능. (v2 포함)
|
||||||
|
|
||||||
---
|
8. ✅ **[기능완료] 외화 입/지출 입력** — 통화 선택+환율 자동조회(open.er-api.com 무료)→원화 환산. `account_entry`에 currency/original_amount/exchange_rate 추가, `amount`는 환산 원화 유지(통계·예산 무변경). 백엔드+프론트 배포됨. (테스터 반영은 v3 빌드 필요)
|
||||||
|
|
||||||
## 🔨 빌드 상태
|
> **v2 빌드 완료(versionCode 2, versionName 1.0.1, 2026-06-29)** — #5·#6 + 다듬기. 비공개 테스트 업로드 대기.
|
||||||
- **v2** (versionCode 2, 1.0.1): 비공개 테스트 게시·검토통과
|
> **다음 빌드 v3 후보**: #8 외화 결제 (+ 이후 백로그). 모아서 versionCode 3으로 빌드.
|
||||||
- **v3** (versionCode 3): 위 'v2 이후 추가' 반영 — 빌드 후 비공개 트랙 업로드 (테스터에게 최신본 제공, 14일 카운트 리셋 안 됨)
|
6. ✅ **[버그·수정완료] 앱 잠금이 카메라/갤러리 복귀 시 오작동** — appLock.suppressLock() 추가, 파일선택은 App.vue 전역 리스너, 카메라/공유는 호출부에서 suppress. (코드 배포됨 — 테스터에게 반영하려면 versionCode 2로 AAB 재빌드 업로드 필요)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 다음 세션 재개 지점
|
## 다음 세션 재개 지점
|
||||||
**테스터 12명 opt-in 진행상황 확인**(업체 의뢰) → 12명 + 14일 연속 충족되면 **프로덕션 액세스 신청**(`production-access-draft.md`).
|
**신원확인 승인 여부 확인** → 승인됐으면 "앱 만들기 → 익명 셋업 → 필수설정/등록정보 입력" 진행.
|
||||||
v3 AAB를 비공개 트랙에 업로드해 테스터가 최신본을 받게.
|
대기 중이면 **테스터 12명 Gmail 확보** + **출시 전 다듬기(빈 상태/오프라인)** 진행 권장.
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
1<script setup>
|
<script setup>
|
||||||
import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
|
import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
|
||||||
import { accountApi } from '@/api/accountApi'
|
import { accountApi } from '@/api/accountApi'
|
||||||
import { reminders } from '@/native/reminders'
|
import { reminders } from '@/native/reminders'
|
||||||
@@ -127,56 +127,6 @@ const repayTargetIsCard = computed(() => {
|
|||||||
const w = wallets.value.find((x) => x.id === form.toWalletId)
|
const w = wallets.value.find((x) => x.id === form.toWalletId)
|
||||||
return !!w && w.type === 'CARD'
|
return !!w && w.type === 'CARD'
|
||||||
})
|
})
|
||||||
// 금리가 설정된 대출 계좌를 선택한 경우 자동계산 활성
|
|
||||||
const repayTargetLoanWallet = computed(() => {
|
|
||||||
const w = wallets.value.find((x) => x.id === form.toWalletId)
|
|
||||||
return w?.type === 'LOAN' && w.loanRate ? w : null
|
|
||||||
})
|
|
||||||
// 납입금액 입력용 (원리금균등만 사용)
|
|
||||||
const loanPaymentAmount = ref(null)
|
|
||||||
|
|
||||||
function monthlyInterestOf(loan) {
|
|
||||||
return Math.round(Math.abs(loan.balance || 0) * (Number(loan.loanRate) / 100 / 12))
|
|
||||||
}
|
|
||||||
|
|
||||||
// 상환방식별 자동계산: 원금균등·만기일시는 납입금액 입력 불필요
|
|
||||||
const loanAutoResult = computed(() => {
|
|
||||||
const loan = repayTargetLoanWallet.value
|
|
||||||
if (!loan) return null
|
|
||||||
const interest = monthlyInterestOf(loan)
|
|
||||||
if (loan.loanMethod === 'BULLET') {
|
|
||||||
return { interest, principal: 0, total: interest, needsInput: false }
|
|
||||||
}
|
|
||||||
if (loan.loanMethod === 'EQUAL_PRINCIPAL' && loan.loanAmount && loan.loanMonths) {
|
|
||||||
const principal = Math.round(Number(loan.loanAmount) / loan.loanMonths)
|
|
||||||
return { interest, principal, total: principal + interest, needsInput: false }
|
|
||||||
}
|
|
||||||
return { interest: null, principal: null, total: null, needsInput: true }
|
|
||||||
})
|
|
||||||
|
|
||||||
watch(loanAutoResult, (r) => {
|
|
||||||
if (r && !r.needsInput) {
|
|
||||||
form.interest = r.interest
|
|
||||||
form.principal = r.principal
|
|
||||||
loanPaymentAmount.value = r.total
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
function calcLoanRepayment(payment) {
|
|
||||||
const loan = repayTargetLoanWallet.value
|
|
||||||
if (!loan || !payment || payment <= 0) return
|
|
||||||
const interest = monthlyInterestOf(loan)
|
|
||||||
form.interest = Math.min(interest, payment)
|
|
||||||
form.principal = Math.max(0, payment - form.interest)
|
|
||||||
}
|
|
||||||
watch(loanPaymentAmount, (val) => {
|
|
||||||
if (loanAutoResult.value?.needsInput && val) calcLoanRepayment(Number(val))
|
|
||||||
})
|
|
||||||
watch(() => form.toWalletId, () => {
|
|
||||||
loanPaymentAmount.value = null
|
|
||||||
form.principal = null
|
|
||||||
form.interest = null
|
|
||||||
})
|
|
||||||
// 카드 지출일 때만 할부 입력 노출 (2~24개월, 일시불은 빈값)
|
// 카드 지출일 때만 할부 입력 노출 (2~24개월, 일시불은 빈값)
|
||||||
const showInstallment = computed(() => form.type === 'EXPENSE' && form.walletKind === 'CARD')
|
const showInstallment = computed(() => form.type === 'EXPENSE' && form.walletKind === 'CARD')
|
||||||
const installmentMonthly = computed(() => {
|
const installmentMonthly = computed(() => {
|
||||||
@@ -326,39 +276,25 @@ async function loadCategories() {
|
|||||||
categories.value = []
|
categories.value = []
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// ===== 분류: 대분류 아코디언 → 소분류 선택 =====
|
// 현재 구분(수입/지출)에 맞는 분류 + 편집 중 현재 값 보존
|
||||||
const categoryMajor = ref('') // 펼쳐진 대분류 이름
|
// ===== 분류: 대분류 → 소분류 2단 선택 (긴 드롭다운 스크롤 방지) =====
|
||||||
// 현재 구분의 대분류 객체 목록
|
const categoryMajor = ref('') // 선택된 대분류 이름
|
||||||
const majorOptionsData = computed(() =>
|
// 현재 구분의 대분류(부모 없음) 이름 + 편집 중 현재 대분류 보존
|
||||||
categories.value.filter((c) => c.type === form.type && c.parentId == null)
|
const majorOptions = computed(() => {
|
||||||
)
|
const names = categories.value
|
||||||
// 대분류를 4개씩 행으로 묶음
|
.filter((c) => c.type === form.type && c.parentId == null)
|
||||||
const majorRows = computed(() => {
|
.map((c) => c.name)
|
||||||
const items = majorOptionsData.value
|
if (categoryMajor.value && !names.includes(categoryMajor.value)) names.unshift(categoryMajor.value)
|
||||||
const rows = []
|
return names
|
||||||
for (let i = 0; i < items.length; i += 4) rows.push(items.slice(i, i + 4))
|
})
|
||||||
return rows
|
// 선택된 대분류의 소분류 이름 목록 (없으면 대분류 자체가 분류)
|
||||||
|
const subOptions = computed(() => {
|
||||||
|
const major = categories.value.find(
|
||||||
|
(c) => c.type === form.type && c.parentId == null && c.name === categoryMajor.value,
|
||||||
|
)
|
||||||
|
if (!major) return []
|
||||||
|
return categories.value.filter((c) => c.parentId === major.id).map((c) => c.name)
|
||||||
})
|
})
|
||||||
// 현재 펼쳐진 대분류 객체
|
|
||||||
const selectedMajorObj = computed(() =>
|
|
||||||
majorOptionsData.value.find((m) => m.name === categoryMajor.value) ?? null
|
|
||||||
)
|
|
||||||
|
|
||||||
// 특정 대분류의 소분류 목록
|
|
||||||
function subsByMajor(majorId) {
|
|
||||||
return categories.value.filter((c) => c.parentId === majorId)
|
|
||||||
}
|
|
||||||
// 대분류 클릭: 소분류 있으면 펼침 토글, 없으면 바로 선택
|
|
||||||
function onMajorClick(major) {
|
|
||||||
if (categoryMajor.value === major.name) {
|
|
||||||
categoryMajor.value = ''
|
|
||||||
form.category = ''
|
|
||||||
} else {
|
|
||||||
categoryMajor.value = major.name
|
|
||||||
if (!subsByMajor(major.id).length) form.category = major.name
|
|
||||||
else form.category = ''
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// form.category 로부터 대분류 추론 (편집 진입 시)
|
// form.category 로부터 대분류 추론 (편집 진입 시)
|
||||||
function syncCategoryMajor() {
|
function syncCategoryMajor() {
|
||||||
const cur = form.category
|
const cur = form.category
|
||||||
@@ -374,25 +310,19 @@ function syncCategoryMajor() {
|
|||||||
categoryMajor.value = cur
|
categoryMajor.value = cur
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// 대분류 변경: 소분류 있으면 소분류 선택 대기 / 없으면 대분류가 곧 분류
|
||||||
|
function onMajorChange() {
|
||||||
|
form.category = subOptions.value.length ? '' : categoryMajor.value
|
||||||
|
}
|
||||||
// 필터용 전체 분류명 (중복 제거)
|
// 필터용 전체 분류명 (중복 제거)
|
||||||
const allCategoryNames = computed(() => [...new Set(categories.value.map((c) => c.name))])
|
const allCategoryNames = computed(() => [...new Set(categories.value.map((c) => c.name))])
|
||||||
|
|
||||||
// 모달 내 분류 인라인 추가
|
// 모달 내 분류 인라인 추가
|
||||||
const addingCategory = ref(false)
|
const addingCategory = ref(false)
|
||||||
const addingAsMajor = ref(true) // true=대분류 추가, false=소분류 추가
|
|
||||||
const newCategoryName = ref('')
|
const newCategoryName = ref('')
|
||||||
const catSubmitting = ref(false)
|
const catSubmitting = ref(false)
|
||||||
function startAddMajorCategory() {
|
function startAddCategory() {
|
||||||
categoryMajor.value = ''
|
|
||||||
form.category = ''
|
|
||||||
newCategoryName.value = ''
|
newCategoryName.value = ''
|
||||||
addingAsMajor.value = true
|
|
||||||
addingCategory.value = true
|
|
||||||
}
|
|
||||||
function startAddSubCategory() {
|
|
||||||
newCategoryName.value = ''
|
|
||||||
addingAsMajor.value = false
|
|
||||||
addingCategory.value = true
|
addingCategory.value = true
|
||||||
}
|
}
|
||||||
function cancelAddCategory() {
|
function cancelAddCategory() {
|
||||||
@@ -1185,67 +1115,27 @@ onMounted(async () => {
|
|||||||
</option>
|
</option>
|
||||||
</select>
|
</select>
|
||||||
</label>
|
</label>
|
||||||
<!-- 금리 설정된 대출 계좌: 방식별 자동계산 -->
|
<label>원금<input v-model.number="form.principal" type="number" min="0" placeholder="원 (이체로 기록)" :disabled="submitting" /></label>
|
||||||
<template v-if="repayTargetLoanWallet">
|
<label>이자<input v-model.number="form.interest" type="number" min="0" placeholder="원 (지출·분류 이자)" :disabled="submitting" /></label>
|
||||||
<!-- 원리금균등: 납입금액 직접 입력 -->
|
|
||||||
<template v-if="loanAutoResult?.needsInput">
|
|
||||||
<label>납입금액(원리금균등)
|
|
||||||
<input v-model.number="loanPaymentAmount" type="number" min="0"
|
|
||||||
placeholder="이번 달 납입할 총금액" :disabled="submitting" />
|
|
||||||
</label>
|
|
||||||
</template>
|
|
||||||
<!-- 원금균등·만기일시: 자동계산 결과 표시 -->
|
|
||||||
<template v-else>
|
|
||||||
<div class="loan-breakdown">
|
|
||||||
<span class="bd-label">{{ repayTargetLoanWallet.loanMethod === 'BULLET' ? '만기일시' : '원금균등' }} 자동계산</span>
|
|
||||||
<span>납입 <b>{{ (loanAutoResult?.total || 0).toLocaleString('ko-KR') }}원</b></span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<!-- 계산 결과 표시 + 수동 조정 -->
|
|
||||||
<div v-if="(form.interest ?? null) !== null || (form.principal ?? null) !== null" class="loan-breakdown">
|
|
||||||
<span>이자 <b>{{ (form.interest || 0).toLocaleString('ko-KR') }}원</b></span>
|
|
||||||
<span>원금 <b>{{ (form.principal || 0).toLocaleString('ko-KR') }}원</b></span>
|
|
||||||
</div>
|
|
||||||
<label>이자(조정)<input v-model.number="form.interest" type="number" min="0" :disabled="submitting" /></label>
|
|
||||||
<label>원금(조정)<input v-model.number="form.principal" type="number" min="0" :disabled="submitting" /></label>
|
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
<label>원금<input v-model.number="form.principal" type="number" min="0" placeholder="원 (이체로 기록)" :disabled="submitting" /></label>
|
|
||||||
<label>이자<input v-model.number="form.interest" type="number" min="0" placeholder="원 (지출·분류 이자)" :disabled="submitting" /></label>
|
|
||||||
</template>
|
|
||||||
<label v-if="repayTargetIsCard">연회비<input v-model.number="form.annualFee" type="number" min="0" placeholder="원 (지출·분류 연회비)" :disabled="submitting" /></label>
|
<label v-if="repayTargetIsCard">연회비<input v-model.number="form.annualFee" type="number" min="0" placeholder="원 (지출·분류 연회비)" :disabled="submitting" /></label>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<label v-if="form.type === 'INCOME' || form.type === 'EXPENSE'">분류
|
<label v-if="form.type === 'INCOME' || form.type === 'EXPENSE'">분류
|
||||||
<div v-if="!addingCategory" class="cat-picker">
|
<div v-if="!addingCategory" class="cat-input cascade">
|
||||||
<!-- 대분류 행별 렌더링: 선택된 대분류가 속한 행 바로 아래 소분류 삽입 -->
|
<select v-model="categoryMajor" :disabled="submitting" @change="onMajorChange" title="대분류">
|
||||||
<template v-for="(row, rowIdx) in majorRows" :key="rowIdx">
|
<option value="">대분류 선택</option>
|
||||||
<div class="acc-major-grid">
|
<option v-for="m in majorOptions" :key="m" :value="m">{{ m }}</option>
|
||||||
<button
|
</select>
|
||||||
v-for="m in row" :key="m.id"
|
<select v-if="subOptions.length" v-model="form.category" :disabled="submitting" title="소분류">
|
||||||
type="button" class="acc-chip major"
|
<option value="">소분류 선택</option>
|
||||||
:class="{ active: categoryMajor === m.name }"
|
<option v-for="s in subOptions" :key="s" :value="s">{{ s }}</option>
|
||||||
:disabled="submitting"
|
</select>
|
||||||
@click="onMajorClick(m)"
|
<button type="button" class="cat-add-btn" :disabled="submitting" @click="startAddCategory">+ 추가</button>
|
||||||
>{{ m.name }}</button>
|
|
||||||
</div>
|
|
||||||
<div v-if="selectedMajorObj && row.some(m => m.id === selectedMajorObj.id) && subsByMajor(selectedMajorObj.id).length" class="acc-sub-grid">
|
|
||||||
<button
|
|
||||||
v-for="s in subsByMajor(selectedMajorObj.id)" :key="s.id"
|
|
||||||
type="button" class="acc-chip sub"
|
|
||||||
:class="{ active: form.category === s.name }"
|
|
||||||
:disabled="submitting"
|
|
||||||
@click="form.category = s.name"
|
|
||||||
>{{ s.name }}</button>
|
|
||||||
<button type="button" class="acc-chip add-chip sub-add" :disabled="submitting" @click="startAddSubCategory">+ 소분류</button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<button type="button" class="acc-chip add-chip" :disabled="submitting" @click="startAddMajorCategory">+ 대분류</button>
|
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="cat-input">
|
<div v-else class="cat-input">
|
||||||
<input
|
<input
|
||||||
v-model="newCategoryName" type="text"
|
v-model="newCategoryName" type="text"
|
||||||
:placeholder="addingAsMajor ? (form.type === 'EXPENSE' ? '새 지출 대분류' : '새 수입 대분류') : `${categoryMajor} > 새 소분류`"
|
:placeholder="form.type === 'EXPENSE' ? '새 지출 분류' : '새 수입 분류'"
|
||||||
:disabled="catSubmitting" @keyup.enter.prevent="confirmAddCategory"
|
:disabled="catSubmitting" @keyup.enter.prevent="confirmAddCategory"
|
||||||
/>
|
/>
|
||||||
<button type="button" class="cat-add-btn primary" :disabled="catSubmitting" @click="confirmAddCategory">확인</button>
|
<button type="button" class="cat-add-btn primary" :disabled="catSubmitting" @click="confirmAddCategory">확인</button>
|
||||||
@@ -1981,6 +1871,13 @@ button.primary {
|
|||||||
display: flex;
|
display: flex;
|
||||||
gap: 0.4rem;
|
gap: 0.4rem;
|
||||||
}
|
}
|
||||||
|
.cat-input.cascade {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.cat-input.cascade select {
|
||||||
|
flex: 1 1 40%;
|
||||||
|
}
|
||||||
|
.cat-input select,
|
||||||
.cat-input input {
|
.cat-input input {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
@@ -1995,78 +1892,6 @@ button.primary {
|
|||||||
border-color: hsla(160, 100%, 37%, 1);
|
border-color: hsla(160, 100%, 37%, 1);
|
||||||
color: hsla(160, 100%, 37%, 1);
|
color: hsla(160, 100%, 37%, 1);
|
||||||
}
|
}
|
||||||
/* 분류 칩 그리드 */
|
|
||||||
.cat-picker {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.4rem;
|
|
||||||
}
|
|
||||||
.acc-major-grid,
|
|
||||||
.acc-sub-grid {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 0.35rem;
|
|
||||||
}
|
|
||||||
.acc-sub-grid {
|
|
||||||
padding: 0.4rem;
|
|
||||||
border-radius: 6px;
|
|
||||||
background: var(--color-background-soft);
|
|
||||||
}
|
|
||||||
.acc-chip {
|
|
||||||
flex: 1 1 calc(25% - 0.35rem);
|
|
||||||
min-width: 0;
|
|
||||||
padding: 0.38rem 0.4rem;
|
|
||||||
border: 1px solid var(--color-border);
|
|
||||||
border-radius: 6px;
|
|
||||||
background: transparent;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 0.82rem;
|
|
||||||
color: var(--color-text);
|
|
||||||
text-align: center;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
.acc-chip.major.active {
|
|
||||||
border-color: hsla(160, 100%, 37%, 1);
|
|
||||||
background: hsla(160, 100%, 37%, 0.1);
|
|
||||||
color: hsla(160, 100%, 37%, 1);
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
.acc-chip.sub {
|
|
||||||
background: var(--color-background);
|
|
||||||
}
|
|
||||||
.acc-chip.sub.active {
|
|
||||||
border-color: hsla(160, 100%, 37%, 1);
|
|
||||||
background: hsla(160, 100%, 37%, 0.1);
|
|
||||||
color: hsla(160, 100%, 37%, 1);
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
.acc-chip.add-chip {
|
|
||||||
opacity: 0.55;
|
|
||||||
border-style: dashed;
|
|
||||||
}
|
|
||||||
.acc-chip.add-chip.sub-add {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
}
|
|
||||||
.loan-breakdown {
|
|
||||||
display: flex;
|
|
||||||
gap: 1rem;
|
|
||||||
padding: 0.45rem 0.6rem;
|
|
||||||
border-radius: 6px;
|
|
||||||
background: var(--color-background-soft);
|
|
||||||
font-size: 0.85rem;
|
|
||||||
color: var(--color-text);
|
|
||||||
}
|
|
||||||
.loan-breakdown b {
|
|
||||||
color: hsla(160, 100%, 37%, 1);
|
|
||||||
}
|
|
||||||
.loan-breakdown .bd-label {
|
|
||||||
width: 100%;
|
|
||||||
font-size: 0.78rem;
|
|
||||||
opacity: 0.6;
|
|
||||||
margin-bottom: 0.1rem;
|
|
||||||
}
|
|
||||||
.tag-field {
|
.tag-field {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|||||||
@@ -33,12 +33,6 @@ const form = reactive({
|
|||||||
openingBalance: 0,
|
openingBalance: 0,
|
||||||
openingDate: '',
|
openingDate: '',
|
||||||
currentValue: null,
|
currentValue: null,
|
||||||
// 대출(LOAN) 전용
|
|
||||||
loanAmount: null,
|
|
||||||
loanRate: null,
|
|
||||||
loanMethod: '',
|
|
||||||
loanMonths: null,
|
|
||||||
loanStart: '',
|
|
||||||
})
|
})
|
||||||
const submitting = ref(false)
|
const submitting = ref(false)
|
||||||
const formError = ref(null)
|
const formError = ref(null)
|
||||||
@@ -202,7 +196,7 @@ function issuerLabel(t) {
|
|||||||
return t === 'BANK' ? '은행명' : t === 'CARD' ? '카드사' : t === 'INVEST' ? '증권사' : '대출기관'
|
return t === 'BANK' ? '은행명' : t === 'CARD' ? '카드사' : t === 'INVEST' ? '증권사' : '대출기관'
|
||||||
}
|
}
|
||||||
function openingLabel(t) {
|
function openingLabel(t) {
|
||||||
return t === 'BANK' || t === 'CASH' ? '초기 잔액' : t === 'CARD' ? '초기 미결제 금액' : t === 'INVEST' ? '투자금(투입원금)' : '기록 시작 시 잔액'
|
return t === 'BANK' || t === 'CASH' ? '초기 잔액' : t === 'CARD' ? '초기 미결제 금액' : t === 'INVEST' ? '투자금(투입원금)' : '대출 잔액(원금)'
|
||||||
}
|
}
|
||||||
// 투자 수익률(%) — 투입원금 대비 평가손익
|
// 투자 수익률(%) — 투입원금 대비 평가손익
|
||||||
function returnPct(w) {
|
function returnPct(w) {
|
||||||
@@ -235,11 +229,6 @@ function openCreate() {
|
|||||||
openingBalance: 0,
|
openingBalance: 0,
|
||||||
openingDate: '',
|
openingDate: '',
|
||||||
currentValue: null,
|
currentValue: null,
|
||||||
loanAmount: null,
|
|
||||||
loanRate: null,
|
|
||||||
loanMethod: '',
|
|
||||||
loanMonths: null,
|
|
||||||
loanStart: '',
|
|
||||||
})
|
})
|
||||||
formError.value = null
|
formError.value = null
|
||||||
formOpen.value = true
|
formOpen.value = true
|
||||||
@@ -256,11 +245,6 @@ function openEdit(w) {
|
|||||||
openingBalance: isLiability(w.type) ? -(w.openingBalance || 0) : w.openingBalance || 0,
|
openingBalance: isLiability(w.type) ? -(w.openingBalance || 0) : w.openingBalance || 0,
|
||||||
openingDate: w.openingDate || '',
|
openingDate: w.openingDate || '',
|
||||||
currentValue: w.currentValue ?? null,
|
currentValue: w.currentValue ?? null,
|
||||||
loanAmount: w.loanAmount ?? null,
|
|
||||||
loanRate: w.loanRate ?? null,
|
|
||||||
loanMethod: w.loanMethod || '',
|
|
||||||
loanMonths: w.loanMonths ?? null,
|
|
||||||
loanStart: w.loanStart || '',
|
|
||||||
})
|
})
|
||||||
formError.value = null
|
formError.value = null
|
||||||
formOpen.value = true
|
formOpen.value = true
|
||||||
@@ -274,7 +258,6 @@ async function submit() {
|
|||||||
}
|
}
|
||||||
submitting.value = true
|
submitting.value = true
|
||||||
const magnitude = Number(form.openingBalance) || 0
|
const magnitude = Number(form.openingBalance) || 0
|
||||||
const isLoan = form.type === 'LOAN'
|
|
||||||
const payload = {
|
const payload = {
|
||||||
type: form.type,
|
type: form.type,
|
||||||
name: form.name.trim(),
|
name: form.name.trim(),
|
||||||
@@ -288,11 +271,6 @@ async function submit() {
|
|||||||
form.type === 'INVEST' && form.currentValue !== '' && form.currentValue != null
|
form.type === 'INVEST' && form.currentValue !== '' && form.currentValue != null
|
||||||
? Number(form.currentValue)
|
? Number(form.currentValue)
|
||||||
: null,
|
: null,
|
||||||
loanAmount: isLoan && form.loanAmount ? Number(form.loanAmount) : null,
|
|
||||||
loanRate: isLoan && form.loanRate !== null && form.loanRate !== '' ? Number(form.loanRate) : null,
|
|
||||||
loanMethod: isLoan && form.loanMethod ? form.loanMethod : null,
|
|
||||||
loanMonths: isLoan && form.loanMonths ? Number(form.loanMonths) : null,
|
|
||||||
loanStart: isLoan && form.loanStart ? form.loanStart : null,
|
|
||||||
}
|
}
|
||||||
try {
|
try {
|
||||||
if (editId.value) await accountApi.updateWallet(editId.value, payload)
|
if (editId.value) await accountApi.updateWallet(editId.value, payload)
|
||||||
@@ -319,9 +297,6 @@ async function remove(w) {
|
|||||||
function cardTypeLabel(v) {
|
function cardTypeLabel(v) {
|
||||||
return v === 'CHECK' ? '체크' : v === 'CREDIT' ? '신용' : ''
|
return v === 'CHECK' ? '체크' : v === 'CREDIT' ? '신용' : ''
|
||||||
}
|
}
|
||||||
function loanMethodLabel(v) {
|
|
||||||
return v === 'EQUAL_PAYMENT' ? '원리금균등' : v === 'EQUAL_PRINCIPAL' ? '원금균등' : v === 'BULLET' ? '만기일시' : ''
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
await load()
|
await load()
|
||||||
@@ -387,10 +362,6 @@ onBeforeUnmount(() => sortable?.destroy())
|
|||||||
>{{ revealedAccts.has(w.id) ? '🙈' : '👁' }}</button>
|
>{{ revealedAccts.has(w.id) ? '🙈' : '👁' }}</button>
|
||||||
</template>
|
</template>
|
||||||
<template v-if="w.type === 'INVEST'"> · 투자금 {{ won(w.investedAmount) }}</template>
|
<template v-if="w.type === 'INVEST'"> · 투자금 {{ won(w.investedAmount) }}</template>
|
||||||
<template v-if="w.type === 'LOAN'">
|
|
||||||
<span v-if="w.loanAmount"> · 실행 {{ won(w.loanAmount) }}원</span>
|
|
||||||
<span v-if="w.loanRate"> · {{ w.loanRate }}%<span v-if="w.loanMethod"> / {{ loanMethodLabel(w.loanMethod) }}</span></span>
|
|
||||||
</template>
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="balance-wrap">
|
<div class="balance-wrap">
|
||||||
@@ -487,33 +458,6 @@ onBeforeUnmount(() => sortable?.destroy())
|
|||||||
</template>
|
</template>
|
||||||
<label>기준일<input v-model="form.openingDate" type="date" :disabled="submitting" /></label>
|
<label>기준일<input v-model="form.openingDate" type="date" :disabled="submitting" /></label>
|
||||||
|
|
||||||
<!-- 대출 전용 -->
|
|
||||||
<template v-if="form.type === 'LOAN'">
|
|
||||||
<label>대출 실행 금액(원금)
|
|
||||||
<input v-model.number="form.loanAmount" type="number" min="0"
|
|
||||||
placeholder="처음 빌린 금액 (예: 10000000)" :disabled="submitting" />
|
|
||||||
</label>
|
|
||||||
<label>연이자율(%)
|
|
||||||
<input v-model.number="form.loanRate" type="number" min="0" max="100" step="0.01"
|
|
||||||
placeholder="예: 5.25" :disabled="submitting" />
|
|
||||||
</label>
|
|
||||||
<label>상환방식
|
|
||||||
<select v-model="form.loanMethod" :disabled="submitting">
|
|
||||||
<option value="">(선택 안 함)</option>
|
|
||||||
<option value="EQUAL_PAYMENT">원리금균등상환</option>
|
|
||||||
<option value="EQUAL_PRINCIPAL">원금균등상환</option>
|
|
||||||
<option value="BULLET">만기일시상환</option>
|
|
||||||
</select>
|
|
||||||
</label>
|
|
||||||
<label>대출기간(개월)
|
|
||||||
<input v-model.number="form.loanMonths" type="number" min="1"
|
|
||||||
placeholder="예: 120 (10년)" :disabled="submitting" />
|
|
||||||
</label>
|
|
||||||
<label>대출시작일
|
|
||||||
<input v-model="form.loanStart" type="date" :disabled="submitting" />
|
|
||||||
</label>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<p v-if="formError" class="msg error">{{ formError }}</p>
|
<p v-if="formError" class="msg error">{{ formError }}</p>
|
||||||
|
|
||||||
<div class="buttons">
|
<div class="buttons">
|
||||||
|
|||||||
@@ -66,6 +66,17 @@ async function reload() {
|
|||||||
const majorListEl = ref(null)
|
const majorListEl = ref(null)
|
||||||
const reorderMode = ref(false)
|
const reorderMode = ref(false)
|
||||||
|
|
||||||
|
// ===== 대분류 펼침(아코디언) — 삼각형 누르면 소분류 표시 =====
|
||||||
|
const expanded = ref(new Set())
|
||||||
|
function toggleExpand(id) {
|
||||||
|
const s = new Set(expanded.value)
|
||||||
|
if (s.has(id)) s.delete(id)
|
||||||
|
else s.add(id)
|
||||||
|
expanded.value = s
|
||||||
|
}
|
||||||
|
function isExpanded(id) {
|
||||||
|
return expanded.value.has(id)
|
||||||
|
}
|
||||||
let sortables = []
|
let sortables = []
|
||||||
function destroySortables() {
|
function destroySortables() {
|
||||||
sortables.forEach((s) => s.destroy())
|
sortables.forEach((s) => s.destroy())
|
||||||
@@ -129,9 +140,16 @@ async function addCategory() {
|
|||||||
if (!name) return
|
if (!name) return
|
||||||
error.value = null
|
error.value = null
|
||||||
try {
|
try {
|
||||||
await accountApi.createCategory({ type: activeType.value, name, parentId: newParent.value || null })
|
const parentId = newParent.value || null
|
||||||
|
await accountApi.createCategory({ type: activeType.value, name, parentId })
|
||||||
newName.value = ''
|
newName.value = ''
|
||||||
await reload()
|
await reload()
|
||||||
|
// 소분류를 추가했으면 그 대분류를 펼쳐 바로 보이게
|
||||||
|
if (parentId) {
|
||||||
|
const s = new Set(expanded.value)
|
||||||
|
s.add(Number(parentId))
|
||||||
|
expanded.value = s
|
||||||
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
showError(e, '추가에 실패했습니다.')
|
showError(e, '추가에 실패했습니다.')
|
||||||
}
|
}
|
||||||
@@ -227,12 +245,18 @@ onBeforeUnmount(destroySortables)
|
|||||||
<div class="cat-row major-row">
|
<div class="cat-row major-row">
|
||||||
<div class="cat-main">
|
<div class="cat-main">
|
||||||
<span v-show="reorderMode" class="drag-handle major-handle" title="대분류 순서 변경(소분류 함께 이동)">≡</span>
|
<span v-show="reorderMode" class="drag-handle major-handle" title="대분류 순서 변경(소분류 함께 이동)">≡</span>
|
||||||
|
<button
|
||||||
|
type="button" class="expand-btn" :class="{ open: isExpanded(g.major.id), empty: !g.children.length }"
|
||||||
|
:title="g.children.length ? (isExpanded(g.major.id) ? '소분류 접기' : '소분류 펼치기') : '소분류 없음'"
|
||||||
|
:disabled="!g.children.length" @click="toggleExpand(g.major.id)"
|
||||||
|
>▶</button>
|
||||||
<input v-model="g.major.name" class="cat-name" @keyup.enter="saveCategory(g.major)" />
|
<input v-model="g.major.name" class="cat-name" @keyup.enter="saveCategory(g.major)" />
|
||||||
|
<span v-if="g.children.length && !isExpanded(g.major.id)" class="sub-count">{{ g.children.length }}</span>
|
||||||
<IconBtn icon="check" title="저장" size="sm" @click="saveCategory(g.major)" />
|
<IconBtn icon="check" title="저장" size="sm" @click="saveCategory(g.major)" />
|
||||||
<IconBtn icon="trash" title="삭제" variant="danger" size="sm" @click="removeCategory(g.major)" />
|
<IconBtn icon="trash" title="삭제" variant="danger" size="sm" @click="removeCategory(g.major)" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<ul class="sub-list" :data-parent="g.major.id">
|
<ul v-show="isExpanded(g.major.id) || reorderMode" class="sub-list" :data-parent="g.major.id">
|
||||||
<li v-for="s in g.children" :key="s.id" :data-id="s.id" class="sub-item cat-row child">
|
<li v-for="s in g.children" :key="s.id" :data-id="s.id" class="sub-item cat-row child">
|
||||||
<div class="cat-main">
|
<div class="cat-main">
|
||||||
<span v-show="reorderMode" class="drag-handle sub-handle" title="소분류 순서 변경">≡</span>
|
<span v-show="reorderMode" class="drag-handle sub-handle" title="소분류 순서 변경">≡</span>
|
||||||
@@ -444,7 +468,37 @@ button.danger {
|
|||||||
.sub-mark {
|
.sub-mark {
|
||||||
opacity: 0.45;
|
opacity: 0.45;
|
||||||
}
|
}
|
||||||
|
/* 대분류 펼침 삼각형 */
|
||||||
|
.expand-btn {
|
||||||
|
flex: none;
|
||||||
|
width: 1.4rem;
|
||||||
|
height: 1.4rem;
|
||||||
|
border: 0;
|
||||||
|
background: transparent;
|
||||||
|
color: var(--color-text);
|
||||||
|
font-size: 0.7rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform 0.15s ease;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
.expand-btn.open {
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
.expand-btn.empty {
|
||||||
|
opacity: 0.15;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
.sub-count {
|
||||||
|
flex: none;
|
||||||
|
min-width: 1.2rem;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 0.72rem;
|
||||||
|
padding: 0.05rem 0.3rem;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: var(--color-border);
|
||||||
|
color: var(--color-text);
|
||||||
|
opacity: 0.75;
|
||||||
|
}
|
||||||
.hint.sm {
|
.hint.sm {
|
||||||
font-size: 0.78rem;
|
font-size: 0.78rem;
|
||||||
margin: 0 0 0.75rem;
|
margin: 0 0 0.75rem;
|
||||||
|
|||||||
Reference in New Issue
Block a user