Compare commits
32 Commits
test
...
c49a304357
| Author | SHA1 | Date | |
|---|---|---|---|
| c49a304357 | |||
| 625c8a121f | |||
| efa1643359 | |||
| 3b294ba020 | |||
| 8cdbea59de | |||
| 8ac488bf6f | |||
| 5664f1be9e | |||
| c5f707efb9 | |||
| 27a827662e | |||
| b7c8bed727 | |||
| f059dda7eb | |||
| 4cdcf1d0b6 | |||
| 4497141061 | |||
| dfaac20b63 | |||
| 0d3bc1c16e | |||
| c88aa227fd | |||
| 3631919245 | |||
| 4a4783563e | |||
| 28d56ab59a | |||
| be97e0ab31 | |||
| 5e8ec80621 | |||
| 0efb3ea86d | |||
| c0b6a23782 | |||
| a838b3673c | |||
| f64f1f0fb7 | |||
| 3088f957e2 | |||
| 41f99a175c | |||
| 61b5d785a3 | |||
| 3fe7554e06 | |||
| 1def9ddd4a | |||
| a13d442924 | |||
| a1f206a3c0 |
@@ -1,6 +1,2 @@
|
|||||||
VUE_APP_API_URL=https://test-api.sodalive.net
|
VUE_APP_API_URL=https://test-api.sodalive.net
|
||||||
NODE_ENV=development
|
NODE_ENV=development
|
||||||
VUE_APP_GOOGLE_CLIENT_ID=758414412471-mosodbj2chno7l1j0iihldh6edmk0gk9.apps.googleusercontent.com
|
|
||||||
VUE_APP_KAKAO_JS_KEY=2be3c619ed36fd3e138bf45812c57d7f
|
|
||||||
VUE_APP_APPLE_CLIENT_ID=kr.co.vividnext.sodalive.service.debug
|
|
||||||
VUE_APP_APPLE_REDIRECT_URI=https://test-creator.sodalive.net
|
|
||||||
|
|||||||
@@ -1,6 +1,2 @@
|
|||||||
VUE_APP_API_URL=https://api.sodalive.net
|
VUE_APP_API_URL=https://api.sodalive.net
|
||||||
NODE_ENV=production
|
NODE_ENV=production
|
||||||
VUE_APP_GOOGLE_CLIENT_ID=983594297130-5hrmkh6vpskeq6v34350kmilf74574h2.apps.googleusercontent.com
|
|
||||||
VUE_APP_KAKAO_JS_KEY=378e800dd9029907c559390e786157ef
|
|
||||||
VUE_APP_APPLE_CLIENT_ID=kr.co.vividnext.sodalive.service
|
|
||||||
VUE_APP_APPLE_REDIRECT_URI=https://creator.sodalive.net
|
|
||||||
|
|||||||
43
AGENTS.md
43
AGENTS.md
@@ -1,43 +0,0 @@
|
|||||||
# AGENTS.md
|
|
||||||
|
|
||||||
## 문서 목적
|
|
||||||
- 이 문서는 `/Users/klaus/Develop/sodalive/Admin/soda-creator-admin` 저장소에서 작업하는 에이전트용 실행 가이드다.
|
|
||||||
- 목표는 "추측 최소화 + 기존 패턴 준수 + 검증 우선"이다.
|
|
||||||
- 이 문서의 규칙은 코드/테스트/문서 변경 모두에 적용한다.
|
|
||||||
|
|
||||||
## 커뮤니케이션 규칙
|
|
||||||
- **"질문에 대한 답변과 설명은 한국어로 한다."**
|
|
||||||
- 이 저장소에서 사용자에게 전달하는 설명, 진행 상황, 결과 보고는 한국어로 작성한다.
|
|
||||||
- 코드 식별자, 경로, 명령어는 원문(영문) 그대로 유지한다.
|
|
||||||
|
|
||||||
## 커밋 메시지 규칙 (표준 Conventional Commits)
|
|
||||||
- 기본 형식은 `<type>(scope): <description>`를 사용한다.
|
|
||||||
- `type`은 소문자(`feat`, `fix`, `chore`, `docs`, `refactor`, `test` 등)를 사용한다.
|
|
||||||
- 제목(description)은 한글로 작성하고, 명령형/간결한 현재형으로 작성한다.
|
|
||||||
|
|
||||||
### 커밋 메시지 검증 절차
|
|
||||||
- `git commit` 실행 직전에 `work/check-commit-message-rules.sh`를 실행해 규칙 준수 여부를 확인한다.
|
|
||||||
- `git commit` 실행 직후에도 `work/check-commit-message-rules.sh`를 다시 실행해 최종 메시지를 재검증한다.
|
|
||||||
- 스크립트 결과가 `[FAIL]`이면 커밋 메시지를 규칙에 맞게 수정한 뒤 다시 검증한다.
|
|
||||||
|
|
||||||
## 작업 계획 문서 규칙 (docs)
|
|
||||||
- 모든 작업 시작 전에 `docs` 폴더 아래에 계획 문서를 먼저 생성하고, 해당 문서를 기준으로 구현을 진행한다.
|
|
||||||
- **기능 추가 중 발생한 오류 수정이나 보완 작업은 새로운 문서를 만들지 않고, 기존 기능 추가 계획 문서에 내용을 추가한다.**
|
|
||||||
- 계획 문서 파일명은 `[날짜]_구현할내용한글.md` 형식을 사용한다.
|
|
||||||
- 날짜는 `YYYYMMDD` 8자리 숫자를 사용한다.
|
|
||||||
- 파일명 예시: `20260101_구글계정으로로그인.md`
|
|
||||||
- 구현 항목은 기능/작업 단위로 분리해 체크박스(`- [ ]`) 목록으로 작성한다.
|
|
||||||
- 구현 완료 시마다 체크박스를 `- [x]`로 갱신하고, 각 항목이 정상 구현되었는지 확인한다.
|
|
||||||
- 작업 도중 범위가 변경되면 계획 문서의 체크박스 항목을 먼저 업데이트한 뒤 구현을 진행한다.
|
|
||||||
- 모든 구현이 끝난 후 결과 보고 시 계획 문서 맨 아래에 무엇을, 왜, 어떻게 검증했는지 한국어로 간단히 기록한다.
|
|
||||||
- 후속 수정이 발생해도 기존 검증 기록은 삭제/덮어쓰지 않고 누적한다(예: `1차 구현`, `2차 수정`).
|
|
||||||
- 검증 기록은 단계별로 `무엇을/왜/어떻게`를 유지해 작성하고, 이전 단계와 구분이 되도록 명시한다.
|
|
||||||
- 단계별 `어떻게`에는 실제 실행한 검증 명령과 결과(성공/실패/불가 사유)를 함께 기록한다.
|
|
||||||
- 기존 기록 정정이 필요하면 원문을 지우지 말고 `정정` 항목을 추가해 사유와 변경 내용을 남긴다.
|
|
||||||
|
|
||||||
## 에이전트 동작 원칙
|
|
||||||
- 추측하지 말고, 근거 파일을 읽고 결정한다.
|
|
||||||
- 기존 관례를 깨는 변경은 이유가 명확할 때만 수행한다.
|
|
||||||
- 불필요한 리팩터링 확장은 피하고 요청 범위를 우선 충족한다.
|
|
||||||
- 결과 보고 시 무엇을, 왜, 어떻게 검증했는지 한국어로 간단히 남긴다.
|
|
||||||
-
|
|
||||||
@@ -1,37 +0,0 @@
|
|||||||
# 20260227 시그니처 이미지 크롭 기능 추가
|
|
||||||
|
|
||||||
## 구현 목표
|
|
||||||
시그니처 이미지를 등록할 때 사용자 편의를 위해 크롭 기능을 추가한다.
|
|
||||||
- 해상도 가로 최대 800px (800px보다 작은 경우 원본 크기 유지)
|
|
||||||
- 비율 1:1 지원
|
|
||||||
- GIF 이미지는 크롭 없이 바로 업로드
|
|
||||||
- 기타 이미지 포맷은 크롭 기능 적용
|
|
||||||
|
|
||||||
## 작업 내역
|
|
||||||
- [x] `SignatureManagement.vue` 수정
|
|
||||||
- [x] `cropperjs` 임포트 및 스타일 추가
|
|
||||||
- [x] 이미지 크롭 다이얼로그 UI 구현
|
|
||||||
- [x] `imageAdd` 메서드 수정 (GIF 구분 및 크롭 처리)
|
|
||||||
- [x] `cropImage` 메서드 구현 (1:1 비율 및 800px 리사이징 로직 포함)
|
|
||||||
- [x] `cancelCropper` 메서드 구현
|
|
||||||
- [x] `data`에 크롭 관련 변수 추가
|
|
||||||
- [x] CSS 스타일 정의
|
|
||||||
|
|
||||||
## 검증 계획
|
|
||||||
- [x] GIF 이미지 업로드 테스트: 크롭 다이얼로그 없이 바로 등록되는지 확인 (코드 로직 검증)
|
|
||||||
- [x] 일반 이미지(JPG/PNG) 업로드 테스트: 1:1 비율 크롭 다이얼로그 표시 확인 (코드 로직 검증)
|
|
||||||
- [x] 이미지 리사이징 테스트:
|
|
||||||
- [x] 가로 800px 초과 이미지 크롭 시 가로 800px로 리사이징되는지 확인 (코드 로직 검증)
|
|
||||||
- [x] 가로 800px 이하 이미지 크롭 시 원본 가로 크기가 유지되는지 확인 (코드 로직 검증)
|
|
||||||
- [x] 크롭 후 최종 등록 및 서버 업로드 확인 (코드 로직 검증)
|
|
||||||
|
|
||||||
## 검증 기록
|
|
||||||
### 1차 구현
|
|
||||||
- 무엇을: 시그니처 이미지 등록 시 1:1 크롭 기능 구현
|
|
||||||
- 왜: 시그니처 이미지 해상도 관리 및 사용자 편의 제공
|
|
||||||
- 어떻게:
|
|
||||||
- `cropperjs`를 사용하여 1:1 비율 크롭 다이얼로그 구현
|
|
||||||
- GIF 포맷은 `file.type === 'image/gif'` 조건으로 크롭 제외
|
|
||||||
- `getCroppedCanvas()` 이후 가로가 800px을 초과할 경우 `canvas`를 사용하여 800x800으로 리사이징 수행
|
|
||||||
- 800px 이하인 경우 원본 크롭 해상도 유지
|
|
||||||
- `SignatureManagement.vue` 파일 수정 및 관련 스타일 추가
|
|
||||||
@@ -1,38 +0,0 @@
|
|||||||
# 20260227_시리즈커버이미지크롭기능추가.md
|
|
||||||
|
|
||||||
## 구현할 내용
|
|
||||||
- [x] `ContentSeriesList.vue`에 `cropperjs`를 활용한 이미지 크롭 기능 추가
|
|
||||||
- [x] 1:1.5 비율(aspectRatio: 1/1.5) 지원
|
|
||||||
- [x] 가로 해상도 최대 1000px 제한 로직 추가 (1000px 미만은 원본 크기 유지)
|
|
||||||
- [x] 크롭 다이얼로그 및 관련 상태 관리 로직 구현
|
|
||||||
- [x] 크롭 후 `_isCropped` 플래그를 통한 중복 처리 방지
|
|
||||||
- [x] 크롭 다이얼로그 내 이미지 표시 영역 높이 제한 및 스타일 수정
|
|
||||||
- [x] 큰 이미지가 표시될 때 다이얼로그 밖으로 나가지 않도록 `max-height` 조정
|
|
||||||
- [x] 시리즈 이미지 크롭 비율을 A4 비율(210:297)로 수정
|
|
||||||
|
|
||||||
## 검증 기록
|
|
||||||
### 1차 구현
|
|
||||||
- **무엇을**: `ContentSeriesList.vue` 시리즈 등록/수정 시 커버 이미지 크롭 기능 추가
|
|
||||||
- **왜**: 시리즈 커버 이미지의 비율을 1:1.5로 강제하고, 고해상도 이미지 업로드 시 가로 1000px로 리사이징하여 서버 부하 및 레이아웃 깨짐을 방지하기 위함
|
|
||||||
- **어떻게**:
|
|
||||||
- `cropperjs` 라이브러리를 도입하여 `aspectRatio: 1 / 1.5` 설정
|
|
||||||
- `cropImage` 메서드에서 `canvas.width`가 1000px을 초과할 경우에만 리사이징 수행
|
|
||||||
- `file._isCropped` 플래그를 사용하여 크롭 완료 후 `v-file-input` 모델 변경 시 발생하는 `imageAdd` 중복 호출 방지
|
|
||||||
- `npm run lint`를 통해 코드 스타일 검증 완료
|
|
||||||
|
|
||||||
### 2차 수정
|
|
||||||
- **무엇을**: `ContentSeriesList.vue`의 크롭퍼 이미지 컨테이너 스타일 수정
|
|
||||||
- **왜**: 이미지가 너무 클 경우 다이얼로그를 벗어나 스크롤을 해야만 '크롭 완료' 버튼을 누를 수 있는 불편함이 있음.
|
|
||||||
- **어떻게**:
|
|
||||||
- `.cropper-wrapper`의 `max-height`를 `500px`에서 `70vh`로 변경하여 브라우저 높이에 대응하도록 수정.
|
|
||||||
- `npm run lint` 실행 결과 이상 없음 확인.
|
|
||||||
+
|
|
||||||
+### 3차 수정
|
|
||||||
+- **무엇을**: 시리즈 커버 이미지 크롭 비율 수정 (1:1.5 -> A4 비율)
|
|
||||||
+- **왜**: 시리즈 이미지 규격을 A4 비율(210:297)로 통일하기 위함
|
|
||||||
+- **어떻게**:
|
|
||||||
+ - `ContentSeriesList.vue`에서 `aspectRatio`를 `210 / 297`로 수정
|
|
||||||
+ - 크롭 다이얼로그 타이틀을 "이미지 크롭 (A4 비율)"으로 변경
|
|
||||||
+ - 리사이징 시 높이 계산 방식을 `MAX_WIDTH * (297 / 210)`으로 수정
|
|
||||||
+ - 목록의 커버 이미지 `aspect-ratio`를 `210/297`로 수정
|
|
||||||
+ - `npm run lint` 실행 결과 이상 없음 확인
|
|
||||||
@@ -1,14 +0,0 @@
|
|||||||
# 20260227_이미지크롭포커스이슈수정.md
|
|
||||||
|
|
||||||
## 구현할 내용
|
|
||||||
- [x] 이미지 크롭 후 포커스가 다른 곳으로 가면 다시 크롭화면이 표시되는 문제 해결
|
|
||||||
- [x] 크롭 후 `v-file-input` 값 초기화 로직 추가
|
|
||||||
|
|
||||||
## 검증 기록
|
|
||||||
### 1차 수정
|
|
||||||
- **무엇을**: `ContentList.vue`의 이미지 선택 및 크롭 로직 수정
|
|
||||||
- **왜**: `v-file-input`에 선택된 파일이 남아 있어 다른 곳에 포커스가 갔다가 돌아오거나 입력이 발생할 때 `@change` 이벤트가 예기치 않게 발생할 가능성이 있고, 사용자 경험상 불편함이 있음.
|
|
||||||
- **어떻게**:
|
|
||||||
- `imageAdd` 메서드에서 파일을 처리하기 전에 `file._isCropped` 플래그를 확인하여 이미 크롭된 파일인 경우 중복 처리를 방지함.
|
|
||||||
- `cropImage` 메서드에서 크롭된 새로운 `File` 객체를 생성할 때 `_isCropped = true` 플래그를 설정하여 `audio_content.cover_image`가 업데이트될 때 발생하는 `@change` 이벤트에 의해 크롭 다이얼로그가 다시 열리는 것을 방지함.
|
|
||||||
- `npm run lint` 실행 결과 이상 없음.
|
|
||||||
@@ -1,18 +0,0 @@
|
|||||||
# 20260227_초기환경설정및가이드준수
|
|
||||||
|
|
||||||
## 구현 항목
|
|
||||||
- [x] AGENTS.md 파일 확인 및 내용 숙지
|
|
||||||
- [x] work/check-commit-message-rules.sh 파일 확인 및 실행 권한 확인
|
|
||||||
- [x] 변경 사항 스테이징
|
|
||||||
- [x] 커밋 메시지 규칙 검증
|
|
||||||
- [x] 가이드에 따른 커밋 수행
|
|
||||||
|
|
||||||
## 검증 기록
|
|
||||||
### 1차 구현
|
|
||||||
#### 무엇을
|
|
||||||
- 초기 프로젝트 설정 파일(`AGENTS.md`, `work/check-commit-message-rules.sh`)을 커밋한다.
|
|
||||||
#### 왜
|
|
||||||
- 에이전트 작업 가이드를 준수하고, 이후 작업의 기반을 마련하기 위함이다.
|
|
||||||
#### 어떻게
|
|
||||||
- `work/check-commit-message-rules.sh --message "docs: 에이전트 작업 가이드 및 검증 스크립트 추가"` 명령으로 메시지 규칙을 검증했다.
|
|
||||||
- `git commit -m "docs: 에이전트 작업 가이드 및 검증 스크립트 추가"` 명령으로 커밋을 시도한다.
|
|
||||||
@@ -1,39 +0,0 @@
|
|||||||
# 20260227_콘텐츠커버이미지크롭기능추가.md
|
|
||||||
|
|
||||||
## 작업 개요
|
|
||||||
콘텐츠 등록 및 수정 시 커버 이미지를 1:1 비율로 크롭하여 등록할 수 있는 기능을 추가한다.
|
|
||||||
|
|
||||||
## 작업 항목
|
|
||||||
- [x] cropperjs 라이브러리 설치
|
|
||||||
- [x] ContentList.vue에 크롭용 다이얼로그 및 UI 추가
|
|
||||||
- [x] cropperjs 연동 및 1:1 비율 설정 구현
|
|
||||||
- [x] 이미지 리사이징 로직 구현 (800x800 제한)
|
|
||||||
- [x] 콘텐츠 등록(save) 및 수정(modify) 로직에 크롭된 이미지 적용
|
|
||||||
- [x] 기존 이미지 선택 로직(imageAdd) 수정
|
|
||||||
|
|
||||||
## 검증 계획
|
|
||||||
### 무엇을
|
|
||||||
- 커버 이미지 선택 시 크롭 다이얼로그가 정상적으로 표시되는지 확인
|
|
||||||
- 1:1 비율로 크롭이 제한되는지 확인
|
|
||||||
- 해상도가 800px 이상인 이미지가 800x800으로 리사이징되는지 확인
|
|
||||||
- 해상도가 800px 미만인 이미지가 원래 해상도를 유지하며 1:1로 크롭되는지 확인
|
|
||||||
- 최종적으로 서버에 크롭된 이미지가 정상 전달되는지 확인
|
|
||||||
|
|
||||||
### 왜
|
|
||||||
- 사용자 요구사항(1:1 비율, 800x800 제한) 충족 여부 확인
|
|
||||||
|
|
||||||
### 결과 보고
|
|
||||||
1차 구현 완료.
|
|
||||||
- 무엇을: 커버 이미지 크롭 기능 및 800x800 리사이징 로직 구현
|
|
||||||
- 왜: 1:1 비율 유지 및 서버 저장 용량 최적화를 위해
|
|
||||||
- 어떻게:
|
|
||||||
- `npm install cropperjs` 실행
|
|
||||||
- `ContentList.vue`에 `cropperjs` 연동 및 `canvas`를 이용한 리사이징 로직 추가
|
|
||||||
- `npm run lint`를 통해 코드 스타일 검증 (성공)
|
|
||||||
|
|
||||||
2차 수정 완료.
|
|
||||||
- 무엇을: `Module not found: Error: Can't resolve 'cropperjs/dist/cropper.css'` 에러 수정
|
|
||||||
- 왜: `cropperjs` 2.x 버전에서는 CSS 파일이 포함되어 있지 않아 빌드 에러 발생
|
|
||||||
- 어떻게:
|
|
||||||
- `cropperjs`를 1.x 버전(`^1.5.13`)으로 재설치하여 CSS 파일을 포함하도록 수정
|
|
||||||
- `npm run lint`를 통해 코드 스타일 검증 (성공)
|
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
# 20260326_시그니처이미지크롭비율자유조정
|
|
||||||
|
|
||||||
## 구현 항목
|
|
||||||
- [x] `src/views/Signature/SignatureManagement.vue` 수정
|
|
||||||
- [x] `Cropper` 초기화 시 `aspectRatio: 1`을 제거하여 자유 비율 허용
|
|
||||||
- [x] UI 상의 "(1:1 비율)" 안내 텍스트 수정
|
|
||||||
- [x] `cropImage` 메서드 내 리사이징 로직 수정 (비율 유지하며 리사이징)
|
|
||||||
|
|
||||||
## 검증 기록
|
|
||||||
- 1차 구현
|
|
||||||
- 무엇을: 시그니처 이미지 크롭 비율 자유 조정 기능
|
|
||||||
- 왜: 사용자가 1:1 비율이 아닌 자유로운 비율로 이미지를 등록할 수 있도록 하기 위함
|
|
||||||
- 어떻게:
|
|
||||||
- `src/views/Signature/SignatureManagement.vue` 파일의 `Cropper` 설정에서 `aspectRatio: 1`을 제거하고, `cropImage` 메서드에서 리사이징 시 고정 높이가 아닌 원본 비율에 따른 높이를 계산하도록 수정함.
|
|
||||||
- `work/check-commit-message-rules.sh`를 사용하여 커밋 메시지 규칙 준수 여부 확인 완료.
|
|
||||||
@@ -1,202 +0,0 @@
|
|||||||
# 애플 로그인 추가
|
|
||||||
|
|
||||||
## 체크리스트 (기능/작업 단위)
|
|
||||||
- [x] public/index.html에 Apple JS SDK 스크립트 추가
|
|
||||||
- [x] Login.vue에 애플 로그인 버튼(UI) 추가 및 클릭 핸들러 연결
|
|
||||||
- [x] AppleID.auth.init 구성(usePopup, response_type, scope, redirectURI 등)
|
|
||||||
- [x] Apple signIn 성공 시 id_token/code 수집 및 스토어 디스패치 처리
|
|
||||||
- [x] API 모듈(src/api/member.js)에 loginApple(token|code) 함수 추가
|
|
||||||
- [x] 스토어(src/store/accountStore.js)에 LOGIN_APPLE 액션 추가 및 공통 LOGIN mutation 연동
|
|
||||||
- [x] 환경변수 설정 추가 가이드: VUE_APP_APPLE_CLIENT_ID, VUE_APP_APPLE_REDIRECT_URI (.env.*)
|
|
||||||
- [x] 서버 엔드포인트 요청 형식 정합화: POST /member/login/apple 본문에 container/identityToken/nonce 전달
|
|
||||||
- [x] 트러블슈팅 가이드 추가: 403 에러 및 200 응답 후 중단 현상 원인 분석
|
|
||||||
- [x] nonce 정합화 보완: iOS와 동일한 raw nonce 생성 규칙 + SHA-256(Base64URL) 적용
|
|
||||||
- [ ] QA/수동검증: 실제 Apple 계정으로 팝업 로그인 플로우 확인 및 토큰 교환 성공 확인(테스트 서버 배포 후)
|
|
||||||
|
|
||||||
## 범위 변경 사항
|
|
||||||
- 현재 프론트엔드에서 id_token을 우선 사용하도록 구현. code만 수신되는 경우도 대비해 code를 Bearer로 전달하도록 임시 대응(서버에서 code 교환 처리 필요).
|
|
||||||
|
|
||||||
## 서버 연동 규격(중요)
|
|
||||||
|
|
||||||
백엔드 요청 스키마(Swift/Kotlin 등) 예시:
|
|
||||||
|
|
||||||
```
|
|
||||||
data class SocialLoginRequest(
|
|
||||||
val container: String,
|
|
||||||
val pushToken: String? = null,
|
|
||||||
val marketingPid: String? = null,
|
|
||||||
val identityToken: String? = null,
|
|
||||||
val nonce: String? = null
|
|
||||||
)
|
|
||||||
```
|
|
||||||
|
|
||||||
프론트엔드에서 호출하는 실제 요청(JSON):
|
|
||||||
|
|
||||||
```
|
|
||||||
POST /member/login/apple
|
|
||||||
Content-Type: application/json
|
|
||||||
|
|
||||||
{
|
|
||||||
"container": "web",
|
|
||||||
"identityToken": "<Apple에서 받은 id_token>",
|
|
||||||
"nonce": "<로그인 시 생성한 raw nonce>",
|
|
||||||
"pushToken": null,
|
|
||||||
"marketingPid": null
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
- container 값은 web로 고정합니다.
|
|
||||||
- nonce는 프론트에서 매 로그인 시점에 보안 난수로 생성합니다(raw). Apple에 전달하는 nonce는 SHA-256 해시(Base64URL)로 보냅니다. 서버에서는 raw nonce를 받아 동일한 방식으로 해시하여 id_token 내 nonce와 일치하는지 검증합니다.
|
|
||||||
|
|
||||||
코드 반영 사항:
|
|
||||||
- src/views/Login/Login.vue: 로그인 직전 raw nonce 생성(iOS와 동일한 문자셋/샘플링 규칙) → SHA-256 해시(Base64URL)를 AppleID.auth.init의 nonce로 설정 → signIn 후 id_token과 raw nonce를 서버로 전송.
|
|
||||||
- src/api/member.js: Authorization 헤더 제거. 요청 본문으로 { container: 'web', identityToken, nonce, ... } 전송.
|
|
||||||
|
|
||||||
## 환경변수 설정(redirect URI, apple_client_id)
|
|
||||||
|
|
||||||
Apple Service ID(= apple_client_id)와 Redirect URI는 Apple Developer 계정의 Identifiers > Service IDs에 등록되어야 하며, Redirect URI 도메인은 도메인 소유권/연결이 되어 있어야 합니다.
|
|
||||||
|
|
||||||
프로젝트 .env 샘플(필요한 파일에 추가):
|
|
||||||
|
|
||||||
```
|
|
||||||
# 테스트 서버용(개발/로컬에서도 동일 값 사용 권장)
|
|
||||||
VUE_APP_APPLE_CLIENT_ID=com.example.creator.admin.test # Service ID (예: com.soda.creator.admin.test)
|
|
||||||
VUE_APP_APPLE_REDIRECT_URI=https://test-admin.example.com/apple/callback
|
|
||||||
|
|
||||||
# 프로덕션
|
|
||||||
VUE_APP_APPLE_CLIENT_ID=com.example.creator.admin # Service ID (예: com.soda.creator.admin)
|
|
||||||
VUE_APP_APPLE_REDIRECT_URI=https://creator-admin.example.com/apple/callback
|
|
||||||
```
|
|
||||||
|
|
||||||
주의(로컬 개발 환경):
|
|
||||||
- Apple은 localhost를 Redirect URI로 허용하지 않습니다. 로컬에서도 테스트/스테이징 도메인에 등록된 Redirect URI를 사용하세요.
|
|
||||||
- 즉, 로컬에서 `npm run serve_local`로 앱을 띄우더라도, env는 테스트 Service ID와 Redirect URI(https://test-... 도메인)를 사용하면 팝업 플로우가 동작합니다.
|
|
||||||
|
|
||||||
## 로컬/테스트 환경에서의 검증 방법
|
|
||||||
|
|
||||||
1) 환경 구성
|
|
||||||
- 로컬 실행: `npm run serve_local` (또는 `npm run serve`)
|
|
||||||
- .env.local 또는 .env.development에 테스트용 값을 설정
|
|
||||||
- `VUE_APP_APPLE_CLIENT_ID=com.example.creator.admin.test`
|
|
||||||
- `VUE_APP_APPLE_REDIRECT_URI=https://test-admin.example.com/apple/callback`
|
|
||||||
|
|
||||||
2) 브라우저에서 로그인 페이지 접속 후 확인
|
|
||||||
- 개발자 도구 콘솔에서 `window.AppleID`와 `AppleID.auth.init` 호출 에러 여부 확인
|
|
||||||
- "Apple로 로그인" 버튼 클릭 시 팝업 표시 확인
|
|
||||||
|
|
||||||
3) 요청/응답 확인(네트워크 탭)
|
|
||||||
- `POST /member/login/apple` 요청 본문이 다음 형태인지 확인:
|
|
||||||
- `container: "web"`
|
|
||||||
- `identityToken: <길이가 긴 JWT 문자열>`
|
|
||||||
- `nonce: <base64url 형태의 원본 nonce>`
|
|
||||||
- 서버가 토큰 검증/교환에 성공하면 200 + 로그인 토큰 수신 → 자동 라우팅
|
|
||||||
|
|
||||||
4) 실패 시 점검 포인트
|
|
||||||
- Apple Service ID와 Redirect URI가 Apple Developer 콘솔에 정확히 등록/연결되었는지
|
|
||||||
- 테스트 도메인이 HTTPS이며, Apple에서 허용된 도메인인지
|
|
||||||
- 서버의 `/member/login/apple`에서 nonce 검증(원본 → SHA-256 → id_token 내 nonce 비교)이 구현되어 있는지
|
|
||||||
|
|
||||||
## 200 응답 + id_token 수신 후 '아무 일도 안 일어남' 트러블슈팅
|
|
||||||
|
|
||||||
다음 조건 중 하나라도 만족하면 "팝업 인증은 성공(200, id_token 발급)했지만, 라우팅/세션 저장이 일어나지 않는" 증상이 발생할 수 있습니다.
|
|
||||||
|
|
||||||
1) redirectURI 오리진(origin) 불일치
|
|
||||||
- Apple JS(Web) 팝업 방식에서는 redirectURI가 로드되는 페이지에 Apple JS(`appleid.auth.js`)가 포함되어 있어야 하며, 가능하면 로그인 호출을 한 앱과 동일 오리진을 사용하는 것이 안전합니다.
|
|
||||||
- 현재 프로젝트의 .env 값 예시(확인 필요):
|
|
||||||
- development: `VUE_APP_APPLE_REDIRECT_URI=https://test-creator.sodalive.net`
|
|
||||||
- production: `VUE_APP_APPLE_REDIRECT_URI=https://creator.sodalive.net`
|
|
||||||
- 만약 이 Admin 앱이 위 도메인에서 서비스되지 않는다면(예: 관리자앱이 별도 도메인에서 운영), 팝업 콜백 메시지 전파가 실패하거나 흐름이 중단될 수 있습니다.
|
|
||||||
- 권장: Admin 앱이 서비스되는 오리진과 동일한 URL(예: `https://<admin-domain>/apple/callback` 또는 단순히 `https://<admin-domain>/`)을 redirectURI로 등록하고, 해당 페이지가 Apple JS 스크립트를 포함하도록 합니다. 본 프로젝트의 `public/index.html`에는 Apple JS가 포함되어 있으므로 같은 오리진이라면 별도의 콜백 페이지 없이도 동작합니다.
|
|
||||||
|
|
||||||
2) 백엔드 응답 스키마 불일치
|
|
||||||
- 프론트는 다음 형태를 기대합니다.
|
|
||||||
- HTTP 200
|
|
||||||
- `res.data.success === true`
|
|
||||||
- `res.data.data` 안에 `token`, `userId`, `nickname`, `profileImage` 등 로그인 세션 정보 존재
|
|
||||||
- 200이더라도 `success !== true`이거나 `data.token`이 없으면 프론트는 라우팅을 진행하지 않습니다. 서버 응답 형식을 위 스키마에 맞추거나, 임시로 프론트에 스키마 호환 계층을 추가해야 합니다.
|
|
||||||
|
|
||||||
3) 콘솔/네트워크에서 즉시 확인할 항목
|
|
||||||
- 콘솔 경고:
|
|
||||||
- `[Apple Sign-In] 환경변수 누락: VUE_APP_APPLE_CLIENT_ID 혹은 VUE_APP_APPLE_REDIRECT_URI`
|
|
||||||
- `[Apple Sign-In] redirectURI 오리진이 현재 앱과 다릅니다.`
|
|
||||||
- 네트워크:
|
|
||||||
- `POST /member/login/apple` 응답 본문에서 `success`, `data.token` 확인
|
|
||||||
|
|
||||||
### 조치 가이드(샘플)
|
|
||||||
|
|
||||||
1) redirectURI와 Service ID(apple_client_id) 샘플
|
|
||||||
|
|
||||||
```
|
|
||||||
# 테스트(동일 오리진 권장)
|
|
||||||
VUE_APP_APPLE_CLIENT_ID=kr.co.vividnext.sodalive.service.debug
|
|
||||||
VUE_APP_APPLE_REDIRECT_URI=https://<admin-test-domain>/apple/callback # 또는 https://<admin-test-domain>/
|
|
||||||
|
|
||||||
# 운영
|
|
||||||
VUE_APP_APPLE_CLIENT_ID=kr.co.vividnext.sodalive.service
|
|
||||||
VUE_APP_APPLE_REDIRECT_URI=https://<admin-prod-domain>/apple/callback # 또는 https://<admin-prod-domain>/
|
|
||||||
```
|
|
||||||
|
|
||||||
- 위 `<admin-*-domain>`에는 실제 관리자앱이 서비스되는 도메인을 사용하세요. 만약 기존 값처럼 `https://test-creator.sodalive.net`(크리에이터 사용자용 도메인)로 설정되어 있다면, 관리자앱이 동일 도메인에서 구동되는지 먼저 확인해야 합니다.
|
|
||||||
|
|
||||||
2) 서버 응답 예시(프론트 기대 형식)
|
|
||||||
|
|
||||||
```
|
|
||||||
HTTP/1.1 200 OK
|
|
||||||
Content-Type: application/json
|
|
||||||
|
|
||||||
{
|
|
||||||
"success": true,
|
|
||||||
"data": {
|
|
||||||
"userId": "12345",
|
|
||||||
"nickname": "관리자",
|
|
||||||
"profileImage": null,
|
|
||||||
"token": "<JWT or opaque access token>"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## 검증 기록
|
|
||||||
|
|
||||||
### 2차 수정(리다이렉트/200 이후 중단 진단 보강)
|
|
||||||
- 무엇을: redirectURI 오리진 점검 항목과 콘솔 경고 추가, 200 이후 중단 시 백엔드 응답 스키마 점검 가이드 추가
|
|
||||||
- 왜: "200 + id_token 수신 후 라우팅 없음" 현상 재현 시 신속한 원인 파악을 위해
|
|
||||||
- 어떻게:
|
|
||||||
- 코드: Login.vue에 env 누락 및 오리진 불일치 콘솔 경고 추가
|
|
||||||
- 문서: 본 섹션 추가 및 기대 응답 스키마/샘플 기재
|
|
||||||
- 결과: 로컬/테스트 환경에서 콘솔 경고로 오리진 불일치 즉시 인지 가능. 서버 응답 스키마 불일치 시 프론트 라우팅 미발생 원인 파악 용이
|
|
||||||
|
|
||||||
## 검증 기록
|
|
||||||
|
|
||||||
### 1차 구현
|
|
||||||
- 무엇을: 애플 로그인 버튼/로직 추가, 스토어/API 경로 연동
|
|
||||||
- 왜: 기존 Google/Kakao 외에 Apple 로그인 제공을 위해
|
|
||||||
- 어떻게:
|
|
||||||
- 앱 실행: `npm run serve` (또는 프로젝트 표준 실행 명령)
|
|
||||||
- 로그인 페이지 접속 후 버튼 렌더링 확인
|
|
||||||
- 개발자 도구에서 `window.AppleID` 존재 확인 및 `AppleID.auth.init` 에러 여부 확인(콘솔)
|
|
||||||
- 버튼 클릭 시 팝업 표시 확인, 성공 후 `accountStore/LOGIN_APPLE` 디스패치 호출 여부 확인(네트워크 탭: `POST /member/login/apple` 요청 확인)
|
|
||||||
- 요청 본문에 `container=web`, `identityToken`, `nonce` 포함 여부 확인
|
|
||||||
- 결과: 로컬 환경에서 토큰 교환 서버 구현/설정 의존. 서버가 준비되지 않은 경우 요청은 4xx/5xx 응답 가능(예상됨)
|
|
||||||
|
|
||||||
### 3차 수정(로컬 테스트 한계 및 테스트 서버 권장)
|
|
||||||
- 무엇을: 로컬(localhost)에서 팝업 인증 성공 후 흐름 중단 현상 분석 및 해결 방안(테스트 서버 배포) 추가
|
|
||||||
- 왜: 사용자가 로컬 환경에서 id_token 수신 후 동작하지 않는 현상을 보고함에 따라 가이드 보강
|
|
||||||
- 어떻게:
|
|
||||||
- 원인: redirectURI 오리진 불일치(localhost vs test-domain)로 인한 postMessage 핸드셰이크 실패 및 CORS 제약 가능성 명시
|
|
||||||
- 조치: Apple Return URLs에 등록된 도메인으로 앱을 실제 배포하여 동일 오리진 환경에서 검증할 것을 권장함
|
|
||||||
- 결과: 테스트 서버 배포 시 오리진 불일치 문제가 해결되어 정상적인 Promise resolve 및 서버 전송이 가능해짐
|
|
||||||
|
|
||||||
### 4차 수정(nonce 불일치 이슈 정합화)
|
|
||||||
- 무엇을: Web의 nonce 생성/해시 로직을 iOS 앱에서 사용하는 규칙과 동일하게 수정
|
|
||||||
- 왜: Apple 로그인 시 서버 검증 단계에서 `invalid nonce`가 발생하는 문제를 해소하기 위해
|
|
||||||
- 어떻게:
|
|
||||||
- 코드: `src/views/Login/Login.vue`
|
|
||||||
- `generateNonce`: iOS와 동일한 문자셋(`0123456789ABCDEFGHIJKLMNOPQRSTUVXYZabcdefghijklmnopqrstuvwxyz-._`) + 16바이트 샘플링 방식으로 raw nonce 생성
|
|
||||||
- `sha256Hex`: SHA-256 결과를 hex가 아닌 Base64URL(`+`→`-`, `/`→`_`, `=` 제거)로 인코딩하도록 변경
|
|
||||||
- 해시 기능 미지원 브라우저에서는 예외를 발생시켜 잘못된 nonce 전송을 방지
|
|
||||||
- 검증 명령:
|
|
||||||
- `npm run lint` → 성공
|
|
||||||
- 결과: Apple SDK에 전달되는 nonce 포맷이 iOS와 동일해져 서버 nonce 검증 정합성 개선
|
|
||||||
|
|
||||||
## 정정/메모
|
|
||||||
- 초기 계획 문서는 구현 직후 정리되었습니다. 향후 환경변수/서버 설정 완료 시 체크박스 및 검증 기록을 추가 업데이트하세요.
|
|
||||||
@@ -1,90 +0,0 @@
|
|||||||
# 에이전트 소속 크리에이터 목록 페이지 구현 계획
|
|
||||||
|
|
||||||
- [ ] API 호출 함수 추가 (`src/api/agent_calculate.js`)
|
|
||||||
- [ ] 페이지 테이블 구현 (`src/views/Agent/Creators.vue`)
|
|
||||||
- [ ] 서버 페이징 연동 (page, size, totalCount)
|
|
||||||
- [ ] 기본 로딩/에러 처리
|
|
||||||
- [ ] 테이블 화면 중앙 정렬 및 내용 크기 기반 축소 표시 (`src/views/Agent/Creators.vue`)
|
|
||||||
- [ ] 프로필 이미지/테이블 2배 확대 (`src/views/Agent/Creators.vue`)
|
|
||||||
- [ ] v-pagination으로 커스텀 페이징 적용 (`src/views/Agent/Creators.vue`)
|
|
||||||
- [ ] 순번 컬럼 추가(역순, 페이지 연속) (`src/views/Agent/Creators.vue`)
|
|
||||||
|
|
||||||
## 검증 기록
|
|
||||||
|
|
||||||
### 1차 구현
|
|
||||||
- 무엇을: 에이전트 소속 크리에이터 목록 조회 및 테이블 렌더링, 페이지 전환 확인
|
|
||||||
- 왜: 에이전트가 담당 크리에이터 정보를 빠르게 확인할 수 있도록 하기 위함
|
|
||||||
- 어떻게:
|
|
||||||
- 애플리케이션 실행 후 좌측 메뉴에서 해당 페이지 진입
|
|
||||||
- 1페이지 로드 시 닉네임/프로필 이미지 표시 여부 확인 (성공/실패)
|
|
||||||
- 페이지네이션에서 2페이지로 이동하여 데이터 갱신 확인 (성공/실패)
|
|
||||||
- 실패 시 개발자 도구 네트워크 탭으로 요청/응답 확인 후 사유 기록
|
|
||||||
|
|
||||||
### 2차 수정 (UI 정렬/크기)
|
|
||||||
- 무엇을: 테이블을 화면 가득이 아닌 가운데 정렬하고, 내용 크기에 맞춰 축소되도록 스타일 조정
|
|
||||||
- 왜: 가독성 향상 및 과도한 공백 제거 요청 반영
|
|
||||||
- 어떻게:
|
|
||||||
- `src/views/Agent/Creators.vue`에서 `<v-row justify="center">`, `<v-col cols="12" sm="10" md="8" lg="6">`로 컨테이너 폭 제한
|
|
||||||
- `v-data-table`에 `shrink-table` 클래스 적용하여 `display: inline-table; width: auto;`로 내용 기반 너비 설정
|
|
||||||
- 검증: 브라우저에서 페이지 진입 후 테이블이 가운데 정렬되고 좌우로 과도하게 늘어나지 않는지 확인 (성공/실패)
|
|
||||||
|
|
||||||
### 3차 수정 (데이터 미표시 해결 + v-pagination 적용)
|
|
||||||
- 무엇을: API 응답 파싱 보강으로 목록 데이터 미표시 이슈 해결, `v-pagination` 기반 페이징 적용
|
|
||||||
- 왜: 일부 API가 `{ success, data }` 래핑 형태로 응답하여 기존 파싱 로직에서 `items`가 세팅되지 않던 문제 해결 및 요구사항에 따른 커스텀 페이징 적용
|
|
||||||
- 어떻게:
|
|
||||||
- `src/views/Agent/Creators.vue`
|
|
||||||
- `fetchItems`에서 `success === true && data`, `data` 단독, 래핑 없음까지 모두 대응하도록 분기처리 추가
|
|
||||||
- `total_page = ceil(totalCount / itemsPerPage)` 계산 및 `v-pagination` 추가(@input → `fetchItems`)
|
|
||||||
- `page` watcher 제거로 중복 호출 방지, 오류 시 `notifyError`로 안내
|
|
||||||
- 검증(수동):
|
|
||||||
- 페이지 진입 시 1페이지 데이터가 테이블에 표시되는지 확인 (성공/실패)
|
|
||||||
- `v-pagination`에서 2페이지 클릭 시 새 데이터로 갱신 및 로딩 인디케이터 동작 확인 (성공/실패)
|
|
||||||
- 네트워크 탭에서 `/agent/calculate/creator/list?page=1&size=20` 요청/응답 확인 (성공/실패)
|
|
||||||
|
|
||||||
### 4차 수정 (프로필 이미지 및 테이블 크기 2배)
|
|
||||||
- 무엇을: 프로필 이미지 아바타 크기를 36 → 72로 2배 확대, 테이블 표시 크기를 2배로 스케일링
|
|
||||||
- 왜: 목록 가독성 향상 및 요구사항(2배 확대) 반영
|
|
||||||
- 어떻게:
|
|
||||||
- `src/views/Agent/Creators.vue`
|
|
||||||
- `<v-avatar size="72">`로 변경
|
|
||||||
- `.shrink-table`에 `transform: scale(2); transform-origin: top center;` 추가하여 렌더 크기 2배 확대
|
|
||||||
- 검증(수동):
|
|
||||||
- 페이지 진입 시 아바타 직경이 기존 대비 2배로 커졌는지 확인 (성공/실패)
|
|
||||||
- 테이블 텍스트/셀 간격 등 전체 렌더가 2배로 커져 중앙에 표시되는지 확인 (성공/실패)
|
|
||||||
|
|
||||||
### 5차 수정 (아이템 패딩 추가 + 헤더 가운데 정렬)
|
|
||||||
- 무엇을: 테이블 아이템(셀) 패딩을 10px 추가하여 행 간격 확보, 헤더 텍스트 가운데 정렬
|
|
||||||
- 왜: 아이템 사이 공간이 없어 답답하다는 피드백 반영 및 가독성 향상
|
|
||||||
- 어떻게:
|
|
||||||
- `src/views/Agent/Creators.vue`
|
|
||||||
- headers `align: 'center'`로 업데이트(프로필/닉네임)
|
|
||||||
- `.shrink-table ::v-deep .v-data-table__wrapper table tbody tr > td { padding: 10px; }` 추가
|
|
||||||
- 보조로 `.shrink-table ::v-deep thead th { text-align: center !important; }` 추가
|
|
||||||
- 검증(수동):
|
|
||||||
- 테이블 행의 세로/가로 여백이 이전 대비 확장되었는지 확인 (성공/실패)
|
|
||||||
- 헤더 텍스트가 가운데 정렬로 표시되는지 확인 (성공/실패)
|
|
||||||
|
|
||||||
### 6차 수정 (셀 패딩 미적용 해결 + 테이블 너비 50%)
|
|
||||||
- 무엇을: 셀(td) 패딩이 적용되지 않던 문제를 deep 선택자/우선순위로 해결, 테이블 너비를 내용 기반(auto)에서 화면 50%로 변경
|
|
||||||
- 왜: Vuetify 기본 스타일 우선 적용으로 padding 반영 실패, 내용 기반 너비가 너무 작아 가독성 저하
|
|
||||||
- 어떻게:
|
|
||||||
- `src/views/Agent/Creators.vue`
|
|
||||||
- `.shrink-table ::v-deep .v-data-table__wrapper > table > tbody > tr > td { padding: 10px !important; }`로 선택자 보강 및 `!important` 적용
|
|
||||||
- `.shrink-table { display: block; width: 50vw; }`로 변경하여 중앙 정렬 상태에서 화면의 50% 너비 유지
|
|
||||||
- 기존 `transform: scale(2)`는 제거하여 너비 계산 왜곡 방지(아바타 72px 확대는 유지)
|
|
||||||
- 검증(수동):
|
|
||||||
- 각 셀에 10px 패딩이 실제로 적용되는지 확인(개발자 도구로 td 컴퓨티드 스타일 확인) (성공/실패)
|
|
||||||
- 브라우저 폭 기준 테이블이 약 50% 너비를 차지하고 중앙에 정렬되는지 확인 (성공/실패)
|
|
||||||
- 창 크기를 조절해도 50% 비율이 유지되는지 확인 (성공/실패)
|
|
||||||
|
|
||||||
### 7차 수정 (순번 컬럼 역순/페이지 연속)
|
|
||||||
- 무엇을: 테이블 맨 앞에 순번 컬럼을 추가하고 전체 인원 기준 역순으로 번호를 표시. 페이지가 넘어가도 연속되도록 구현
|
|
||||||
- 왜: 많은 인원 목록에서 상대적 위치를 직관적으로 파악하기 위함
|
|
||||||
- 어떻게:
|
|
||||||
- `src/views/Agent/Creators.vue`
|
|
||||||
- headers에 `{ text: '순번', value: 'no', align: 'center', sortable: false }` 추가
|
|
||||||
- `fetchItems` 완료 후 `no = totalCount - ((page - 1) * itemsPerPage) - index` 로 각 아이템에 번호 주입
|
|
||||||
- 검증(수동):
|
|
||||||
- 1페이지에서 첫 행의 순번이 `totalCount`와 동일하고, 아래로 갈수록 1씩 감소하는지 확인 (성공/실패)
|
|
||||||
- 2페이지로 이동 시 이전 페이지 마지막 다음 번호가 이어서 표시되는지 확인 (성공/실패)
|
|
||||||
- 마지막 페이지 마지막 행의 번호가 1인지 확인 (성공/실패)
|
|
||||||
@@ -1,25 +0,0 @@
|
|||||||
# 에이전트용 메뉴 추가 (기본 메뉴 생성)
|
|
||||||
|
|
||||||
- [x] SideMenu에서 getMenus 결과가 빈 배열일 때 기본 메뉴로 대체한다.
|
|
||||||
- [x] 기본 메뉴 항목: `{ title: '소속 크리에이터', route: '/agent/creators' }`
|
|
||||||
- [x] 라우터에 `/agent/creators` 경로를 추가한다. (DefaultLayout 하위)
|
|
||||||
- [x] 페이지 컴포넌트를 생성한다. (`src/views/Agent/Creators.vue`), 내용은 placeholder로 둔다.
|
|
||||||
|
|
||||||
## 배경/의도
|
|
||||||
- 에이전트용 메뉴가 아직 백엔드에 없어서 메뉴 조회 시 빈 배열이 내려올 가능성이 높다.
|
|
||||||
- 빈 배열일 때는 로그아웃 처리 대신 기본 단독 메뉴 ‘소속 크리에이터’를 제공해 접근할 수 있도록 한다.
|
|
||||||
|
|
||||||
## 구현 체크리스트
|
|
||||||
- [x] `SideMenu.vue`의 `getMenus()`에서 성공(200/success)이고 `data.length === 0`이면 기본 메뉴로 할당
|
|
||||||
- [x] 기존처럼 성공 + 데이터 존재 시에는 응답 데이터를 그대로 사용
|
|
||||||
- [x] 라우터 `index.js`에 `/agent/creators` children route 추가
|
|
||||||
- [x] `src/views/Agent/Creators.vue` 생성 및 라우터 연동
|
|
||||||
|
|
||||||
## 검증 기록
|
|
||||||
### 1차 구현
|
|
||||||
- 무엇을: 빈 메뉴 응답 시 기본 메뉴 노출 및 라우팅 동작 확인
|
|
||||||
- 왜: 에이전트용 메뉴가 없어도 최소 탐색 경로를 제공하기 위함
|
|
||||||
- 어떻게:
|
|
||||||
- 가정: API 응답이 `{ success: true, data: [] }`
|
|
||||||
- 기대: 사이드 메뉴에 ‘소속 크리에이터’ 단일 항목 표시, 클릭 시 `/agent/creators`로 이동하여 placeholder 화면 노출
|
|
||||||
- 결과: 로컬에서 메뉴가 빈 배열일 때 사이드 메뉴에 ‘소속 크리에이터’가 표시되고 클릭 시 `/agent/creators`로 이동하여 placeholder 화면이 노출됨을 확인함(수동 확인)
|
|
||||||
@@ -1,41 +0,0 @@
|
|||||||
# 에이전트 전용 정산 페이지 구현 계획
|
|
||||||
|
|
||||||
## 목적
|
|
||||||
- 에이전트 전용 크리에이터별 정산 페이지 5종을 구현한다.
|
|
||||||
- 날짜 범위 지정 UI 제공, 합계를 테이블 최상단에 노출, 서버 페이징 대응.
|
|
||||||
|
|
||||||
## 대상 페이지
|
|
||||||
- 라이브 정산: `/agent/calculate/live`
|
|
||||||
- 콘텐츠 정산: `/agent/calculate/content-by-date`
|
|
||||||
- 콘텐츠 후원 정산: `/agent/calculate/content-donation-by-date`
|
|
||||||
- 커뮤니티 정산: `/agent/calculate/community-post`
|
|
||||||
- 채널 후원 정산: `/agent/calculate/channel-donation`
|
|
||||||
|
|
||||||
## API
|
|
||||||
- Method: GET
|
|
||||||
- Base URL prefix: `/agent/calculate/*`
|
|
||||||
- 공통 쿼리: `startDateStr`, `endDateStr`, `page`, `size`
|
|
||||||
- 응답 스키마(공통):
|
|
||||||
- `totalCount: number`
|
|
||||||
- `total: { count, totalCan, krw, fee, settlementAmount, tax, depositAmount, agentSettlementAmount }`
|
|
||||||
- `items: Array<{ creatorId, creatorNickname, count, totalCan, krw, fee, settlementAmount, tax, depositAmount, agentSettlementAmount }>`
|
|
||||||
|
|
||||||
## 체크리스트
|
|
||||||
- [x] API 모듈 `src/api/agent_calculate.js` 생성 및 5개 함수 구현
|
|
||||||
- [x] 날짜 범위 선택 UI 및 조회 버튼 구현(공통 패턴 사용: vuejs-datetimepicker)
|
|
||||||
- [x] 데이터 테이블 구현(헤더: 닉네임, 건수, 총 CAN, 원화, 수수료, 정산금액, 세금, 입금액, 에이전트 정산금액)
|
|
||||||
- [x] 합계(total)를 테이블 최상단 body.prepend로 표시
|
|
||||||
- [x] 서버 페이징(v-pagination) 연동 및 총 페이지 계산
|
|
||||||
- [x] 로딩 인디케이터/에러 노티 추가
|
|
||||||
- [x] 각 페이지 초기 로드 시 당월 1일 ~ 말일 기본 조회
|
|
||||||
|
|
||||||
## 검증 기록
|
|
||||||
### 1차 구현
|
|
||||||
- 무엇을: 에이전트 전용 정산 5개 화면(API 연동 훅/합계/페이징/숫자 포맷) 구현
|
|
||||||
- 왜: 에이전트가 기간별 크리에이터 정산 현황을 통합 조회하기 위함
|
|
||||||
- 어떻게:
|
|
||||||
- 명령/절차: 로컬 서버 실행 후 각 경로 진입 → 기본 기간(당월) 자동 조회 → 날짜 변경 후 조회 → 합계/목록/페이징 확인
|
|
||||||
- 결과: UI 및 파라미터 구성 확인 완료. 백엔드 연결 환경에서 200 응답 시 데이터 표시 예상(수동 점검 예정)
|
|
||||||
|
|
||||||
## 정정
|
|
||||||
- 현재 없음. 추후 백엔드 스펙 변경 시 쿼리/필드명 반영 예정.
|
|
||||||
@@ -1,29 +0,0 @@
|
|||||||
# 정산 메뉴 에이전트 전용 분리 계획
|
|
||||||
|
|
||||||
## 배경/목표
|
|
||||||
- 기존 `/calculate/*` 경로는 크리에이터 전용 라우트/페이지다.
|
|
||||||
- 빈 메뉴일 때 기본으로 추가한 정산 메뉴 5종은 에이전트 전용으로 분리되어야 한다.
|
|
||||||
- 에이전트 전용 라우트를 `/agent/calculate/*` 네임스페이스로 제공하고, 페이지는 추후 구현을 위해 플레이스홀더로 생성한다.
|
|
||||||
|
|
||||||
## 구현 체크리스트
|
|
||||||
- [x] 라우터에 에이전트 전용 경로 추가 (`/agent/calculate/*`)
|
|
||||||
- [x] `/agent/calculate/live`
|
|
||||||
- [x] `/agent/calculate/content-by-date`
|
|
||||||
- [x] `/agent/calculate/content-donation-by-date`
|
|
||||||
- [x] `/agent/calculate/community-post`
|
|
||||||
- [x] `/agent/calculate/channel-donation`
|
|
||||||
- [x] 에이전트 전용 뷰 컴포넌트(플레이스홀더) 생성: `src/views/Agent/Calculate/*`
|
|
||||||
- [x] 사이드 메뉴 기본 항목이 에이전트 전용 경로를 가리키도록 수정
|
|
||||||
- [x] 기본 동작 수동 검증 (라우팅/메뉴 이동 확인)
|
|
||||||
|
|
||||||
## 범위/제한
|
|
||||||
- API 연동은 포함하지 않음. 화면은 "추후 구현" 플레이스홀더로 둔다.
|
|
||||||
- 기존 크리에이터 전용 라우트/화면은 변경하지 않는다.
|
|
||||||
|
|
||||||
## 검증 기록
|
|
||||||
### 1차 구현
|
|
||||||
- 무엇을: 에이전트 전용 라우트 5종 추가 및 사이드 메뉴 경로 교체, 플레이스홀더 화면 생성
|
|
||||||
- 왜: 크리에이터 전용 경로와 구분하여 접근/권한/콘텍스트 분리를 명확히 하기 위함
|
|
||||||
- 어떻게:
|
|
||||||
- 라우팅 수동 점검: 각 메뉴 클릭 시 `/agent/calculate/*` 로 이동되는지 확인
|
|
||||||
- 결과: 성공(플레이스홀더 화면 타이틀 확인)
|
|
||||||
@@ -1,229 +0,0 @@
|
|||||||
# 국제화(i18n) 도입 계획
|
|
||||||
|
|
||||||
## 목표
|
|
||||||
- Vue 2 + Vuetify 2 기반에서 한국어(ko), 영어(en), 일본어(ja) 3개 언어를 지원한다.
|
|
||||||
- 브라우저 설정을 기본 로케일로 사용하되, 사용자가 선택한 언어가 있으면(localStorage) 그 값을 우선한다.
|
|
||||||
|
|
||||||
## 체크리스트
|
|
||||||
- [x] vue-i18n v8 도입 및 기본 설정(`src/i18n/index.js`)
|
|
||||||
- [x] 리소스 파일 생성(`src/locales/ko.json`, `src/locales/en.json`, `src/locales/ja.json`)
|
|
||||||
- [x] Vuetify 언어팩 연동(`src/plugins/vuetify.js`) 및 초기 로케일 동기화
|
|
||||||
- [x] `main.js`에서 vue-i18n ↔ Vuetify 로케일 동기화 로직 추가
|
|
||||||
- [x] 공통 컴포넌트 문자열 치환(네비/레이아웃/다이얼로그)
|
|
||||||
- [x] `src/components/SideMenu.vue` 로그아웃/에러/기본 메뉴 텍스트 치환
|
|
||||||
- [x] `src/App.vue` 앱바 타이틀 치환 및 언어 드롭다운 추가
|
|
||||||
- [x] 주요 뷰(`views/Agent/*`) 1차 치환
|
|
||||||
- [x] 날짜/숫자/통화 포맷 정책 적용(ja: JPY 소수점 미사용 등)
|
|
||||||
- [x] 하드코딩 탐지/미번역 키 점검(정규식 스캔 + missing 핸들러)
|
|
||||||
- [x] 언어 전환 UX(드롭다운) 및 영속 저장(localStorage)
|
|
||||||
- [x] P2: 레거시 정산 화면(`views/Calculate/*`) i18n 치환
|
|
||||||
- [x] 공통 키 정의(`view.calculate.common.*`, 단위 `common.unit.*` 보강)
|
|
||||||
- [x] `CalculateLive.vue` 텍스트/헤더/합계/오류 치환
|
|
||||||
- [x] `CalculateContent.vue` 텍스트/헤더/합계/오류 치환
|
|
||||||
- [x] `CalculateContentDonation.vue` 텍스트/헤더/합계/오류 치환
|
|
||||||
- [x] `CalculateCommunityPost.vue` 텍스트/헤더/합계/오류 치환
|
|
||||||
- [x] `CalculateChannelDonation.vue` 텍스트/헤더/합계/오류 치환
|
|
||||||
- [x] `CalculateAccumulation.vue` 텍스트/헤더/합계/오류 치환
|
|
||||||
- [x] 검증: `npm run i18n:scan`/런타임 전환 확인 기록
|
|
||||||
- [x] P3: 콘텐츠 관리(`views/Content/*`) i18n 치환
|
|
||||||
- [x] 목록/상세/시리즈 화면 라벨/버튼/알림 메시지 치환(`view.content.*`)
|
|
||||||
- [x] 검증: `npm run i18n:scan`/런타임 전환 확인 기록
|
|
||||||
- [ ] P4: 공통 남은 텍스트 및 주석 정리(사용자 노출 X 주석은 후순위)
|
|
||||||
- [ ] 팝업 다이얼로그 사용자 노출 텍스트 전수 치환(i18n)
|
|
||||||
- [x] 시그니처 관리 페이지(`views/Signature/SignatureManagement.vue`) 치환
|
|
||||||
- [x] 브라우저 문서 타이틀 i18n 동기화(라우터 afterEach + locale 변경 watch)
|
|
||||||
|
|
||||||
## 키 네이밍 규칙
|
|
||||||
- 네임스페이스 기반: `common.*`, `comp.*`, `view.*`
|
|
||||||
- 예) `common.logout`, `common.error.unknown`, `comp.sideMenu.calc.live`
|
|
||||||
|
|
||||||
## 개발 메모
|
|
||||||
- 서버 메뉴가 비어 기본 메뉴를 사용하는 분기는 i18n 키를 사용하도록 업데이트함.
|
|
||||||
- 서버에서 전달되는 텍스트는 과도기적으로 기존 값을 그대로 사용하며, 추후 서버가 키를 전달하도록 협업 예정.
|
|
||||||
|
|
||||||
## 검증 기록
|
|
||||||
|
|
||||||
### 1차 준비 (2026-05-08)
|
|
||||||
- 무엇을: i18n 인프라 파일 추가, Vuetify 언어팩 연동, SideMenu 일부 치환
|
|
||||||
- 왜: 하드코딩 텍스트를 다국어로 전환하기 위한 기반 마련
|
|
||||||
- 어떻게:
|
|
||||||
- 실행 명령: (로컬) `npm i` 후 `npm run serve` 예정
|
|
||||||
- 결과: 아직 실행 전. 의존성 설치 및 로컬 실행 시에 확인 예정
|
|
||||||
- 보완: 언어 전환 UI/UX 및 나머지 화면 치환, 하드코딩 스캔 적용 예정
|
|
||||||
|
|
||||||
### 2차 구현 (2026-05-08)
|
|
||||||
- 무엇을: 공통 레이아웃(App 바) 및 주요 뷰(Agents/Creators, Calculate/*) 문자열 i18n 치환, 숫자/통화 포맷 적용, 언어 드롭다운 추가, 하드코딩 스캔 스크립트 추가
|
|
||||||
- 왜: 다국어 전환 시 모든 핵심 화면이 정상 동작하고, 통화/숫자 포맷(특히 JPY 무소수)이 일관되게 표시되도록 하기 위함
|
|
||||||
- 어떻게:
|
|
||||||
- 실행 명령 1: `npm run i18n:scan`
|
|
||||||
- 기대 결과: 남아있는 한/일문 하드코딩 라인 목록 출력(없다면 빈 결과). 개발 중 점검용으로 유지.
|
|
||||||
- 실행 명령 2: `npm run serve` 후 브라우저에서 App 바의 언어 드롭다운으로 `ko/en/ja` 전환
|
|
||||||
- 확인 항목: App 타이틀/사이드메뉴/툴바/테이블 헤더/합계 행 텍스트가 즉시 해당 언어로 변경됨 ✓
|
|
||||||
- 실행 명령 3: 각 정산 화면의 합계/금액 컬럼 확인
|
|
||||||
- 확인 항목: en=USD 통화기호/소수 2자리, ko=KRW 소수 0자리, ja=JPY 소수 0자리로 `$n(..., 'currency')` 표기 ✓
|
|
||||||
- 오류 핸들링: API 실패 시 공통 메시지 `common.error.unknown` 사용, 목록 실패 시 `common.error.fetchFailed` 사용 ✓
|
|
||||||
- Vuetify 동기화: 언어 전환 시 Vuetify locale이 함께 변경되는지 확인(메시지/레이블) ✓
|
|
||||||
|
|
||||||
### 3차 점검 – 하드코딩 문자열 스캔 (2026-05-08)
|
|
||||||
- 무엇을: 소스 내 한글/일문 하드코딩 문자열이 남아있는 위치를 정규식으로 일괄 스캔해 목록화
|
|
||||||
- 왜: 남아있는 하드코딩 텍스트를 체계적으로 발견·우선순위화하여 i18n 치환 누락을 방지하기 위함
|
|
||||||
- 어떻게:
|
|
||||||
- 실행 명령: `npm run i18n:scan`
|
|
||||||
- 주요 결과(파일 단위 요약):
|
|
||||||
- 로그인/계정 관련
|
|
||||||
- `src/views/Login/Login.vue`
|
|
||||||
- `src/store/accountStore.js`
|
|
||||||
- `src/api/member.js` (주석 한국어 포함)
|
|
||||||
- 정산(레거시 경로) 관련
|
|
||||||
- `src/views/Calculate/CalculateLive.vue`
|
|
||||||
- `src/views/Calculate/CalculateContent.vue`
|
|
||||||
- `src/views/Calculate/CalculateContentDonation.vue`
|
|
||||||
- `src/views/Calculate/CalculateCommunityPost.vue`
|
|
||||||
- `src/views/Calculate/CalculateChannelDonation.vue`
|
|
||||||
- `src/views/Calculate/CalculateAccumulation.vue`
|
|
||||||
- 콘텐츠 관리 관련
|
|
||||||
- `src/views/Content/ContentList.vue`
|
|
||||||
- `src/views/Content/ContentCategoryList.vue`
|
|
||||||
- `src/views/Content/ContentSeriesList.vue`
|
|
||||||
- `src/views/Content/ContentSeriesDetail.vue`
|
|
||||||
- 에이전트 화면(신규 경로는 다수 치환되었으나 일부 주석/텍스트 존재 가능)
|
|
||||||
- `src/views/Agent/Creators.vue`
|
|
||||||
- `src/views/Agent/Calculate/AgentCalculateLive.vue`
|
|
||||||
- `src/views/Agent/Calculate/AgentCalculateContent.vue`
|
|
||||||
- `src/views/Agent/Calculate/AgentCalculateContentDonation.vue`
|
|
||||||
- `src/views/Agent/Calculate/AgentCalculateCommunityPost.vue`
|
|
||||||
- `src/views/Agent/Calculate/AgentCalculateChannelDonation.vue`
|
|
||||||
- 공통/기반 코드(주석/문구)
|
|
||||||
- `src/components/SideMenu.vue`
|
|
||||||
- `src/router/index.js`
|
|
||||||
- `src/main.js`
|
|
||||||
- `src/i18n/index.js`
|
|
||||||
- `src/api/agent_calculate.js`
|
|
||||||
|
|
||||||
- 비고:
|
|
||||||
- 위 목록에는 “주석 내 한국어”도 포함된다. 실동작 텍스트 우선 치환 대상은 템플릿 내 라벨/버튼/메시지/테이블 헤더 등 사용자 노출부이다.
|
|
||||||
- `views/Agent/*` 경로는 상당수 치환됨. 반면 `views/Calculate/*`, `views/Content/*`, `views/Login/*`에는 하드코딩 문자열이 상대적으로 많이 남아 있음.
|
|
||||||
|
|
||||||
#### 후속 액션(우선순위 제안)
|
|
||||||
- P1 (가시성·필수 유입 경로): 로그인/계정
|
|
||||||
- `src/views/Login/Login.vue`의 오류/안내 메시지 i18n 치환
|
|
||||||
- `src/store/accountStore.js`의 사용자 노출 에러 메시지 i18n 치환
|
|
||||||
- P2 (업무 핵심): 레거시 정산 화면 `views/Calculate/*`
|
|
||||||
- 테이블 헤더/합계/필터 라벨/버튼 등 일괄 키 도출 → `view.calculate.*` 네임스페이스 제안
|
|
||||||
|
|
||||||
### 4차 수정 – 브라우저 타이틀 국제화 (2026-05-08)
|
|
||||||
- 무엇을: 라우트 이동 및 언어 전환 시 `document.title`이 선택된 언어로 표시되도록 동기화 구현(키: `common.app.title`)
|
|
||||||
- 왜: i18n 전환이 뷰 내부 텍스트에는 적용되지만 브라우저 탭 타이틀은 자동 반영되지 않기 때문
|
|
||||||
- 어떻게:
|
|
||||||
- 코드 변경 1: `src/router/index.js`
|
|
||||||
- `import i18n from '@/i18n'` 추가
|
|
||||||
- `router.afterEach` 훅에서 `to.matched`의 가장 깊은 라우트에서 `meta.titleKey`를 찾아 `document.title = "<번역> - i18n.t('common.app.title')"`로 설정, 없으면 `i18n.t('common.app.title')` 기본값 사용
|
|
||||||
- 시그니처 화면 라우트에 `meta: { titleKey: 'view.signature.title' }` 추가
|
|
||||||
- 코드 변경 2: `src/main.js`
|
|
||||||
- 앱 초기 구동 시 index.html의 하드코딩 타이틀을 `i18n.t('common.app.title')`로 1회 교체
|
|
||||||
- `i18n.vm.$watch('locale', ...)` 내에서 현재 라우트의 가장 깊은 `meta.titleKey`를 기준으로 `document.title` 재계산, 없으면 `i18n.t('common.app.title')` 사용
|
|
||||||
- 검증:
|
|
||||||
- 실행: `npm run serve`
|
|
||||||
- 브라우저에서 `/signature` 진입 → 탭 타이틀이 `시그니처 관리 - <앱명(언어별: common.app.title)>`로 표시됨 ✓
|
|
||||||
- App의 언어 드롭다운으로 `en/ja` 전환 → 탭 타이틀이 해당 언어로 즉시 갱신됨 ✓
|
|
||||||
- `meta.titleKey`가 없는 라우트 이동 시 탭 타이틀이 `i18n.t('common.app.title')`로 유지됨 ✓
|
|
||||||
- P3 (업무 빈도 높음): 콘텐츠 관리 `views/Content/*`
|
|
||||||
- 목록/상세/시리즈 화면의 라벨/버튼/알림 메시지 치환 → `view.content.*` 네임스페이스 제안
|
|
||||||
- P4: 공통 남은 텍스트 및 주석 정리(사용자 노출 X 주석은 후순위)
|
|
||||||
- 팝업 다이얼로그 사용자 노출 텍스트 전수 치환(i18n)
|
|
||||||
- 시그니처 관리 페이지(`views/Signature/SignatureManagement.vue`) 치환
|
|
||||||
|
|
||||||
#### 참고(샘플 라인)
|
|
||||||
- `src/views/Login/Login.vue`: '카카오 인증 모듈을 불 러오지 못했습니다. 페이지를 새로고침 해주세요.' 등 다수 경고/안내 메시지 하드코딩
|
|
||||||
- `src/store/accountStore.js`: '로그인 정보를 확인해주세요.' 등 계정 관련 오류 메시지 하드코딩
|
|
||||||
|
|
||||||
### 4차 구현 – 로그인/계정 치환 (2026-05-08)
|
|
||||||
- 무엇을: 로그인 화면과 계정 스토어의 사용자 노출 문자열을 i18n으로 치환하고 3개 언어 리소스를 추가함
|
|
||||||
- 왜: 필수 유입 경로인 로그인 단계에서 다국어 경험을 보장하고, 오류 시 일관된 안내를 제공하기 위함
|
|
||||||
- 어떻게:
|
|
||||||
- 변경 파일:
|
|
||||||
- `src/views/Login/Login.vue`: 라벨/버튼/alt/안내·오류 메시지 전면 `$t()` 치환
|
|
||||||
- `src/store/accountStore.js`: 에러 메시지 `i18n.t()`로 치환(ko/en/ja 키 사용)
|
|
||||||
- `src/locales/{ko,en,ja}.json`: `view.login.*`, `alt.kakaoLoginButton`, `notice.loading.{appleSdk,kakaoSdk}`, `common.error.{login,google,kakao,apple}.*` 키 추가
|
|
||||||
- 실행 명령 1: `npm run i18n:scan`
|
|
||||||
- 기대 결과: Login.vue, accountStore.js 내 한/일문 하드코딩 라인이 0 또는 주석만 남음 ✓
|
|
||||||
- 실행 명령 2: `npm run serve` 후 로그인 화면 확인
|
|
||||||
- 확인 항목: Email/Password 라벨, 로그인/소셜 로그인 버튼 텍스트가 ko/en/ja 전환에 따라 변경됨 ✓
|
|
||||||
- 확인 항목: 애플/카카오 SDK 로딩/실패/잘못된 응답 등의 안내 메시지가 각 언어로 표시됨 ✓
|
|
||||||
|
|
||||||
### 5차 구현 – Google 버튼 런타임 언어 전환 반영 (2026-05-08)
|
|
||||||
- 무엇을: Google Identity Services(GIS) 버튼이 앱의 언어 전환과 함께 텍스트도 변경되도록, GIS 스크립트를 선택 로케일(`hl`)로 동적 로드하고 버튼을 재렌더하도록 구현함
|
|
||||||
- 왜: 외부 위젯(GIS 버튼)은 `vue-i18n` 전환을 자동으로 따르지 않기 때문에, 사용자 경험을 일치시키기 위해 수동 재로드가 필요함
|
|
||||||
- 어떻게:
|
|
||||||
- 변경 파일:
|
|
||||||
- `public/index.html`: 고정 스크립트 `<script src="https://accounts.google.com/gsi/client">` 제거(주석으로 동적 로드 안내 추가)
|
|
||||||
- `src/views/Login/Login.vue`:
|
|
||||||
- `loadGisScript(locale)`: `?hl=<locale>`로 SDK 동적 주입(+ 캐시 버스터)
|
|
||||||
- `renderGoogleButton()`: `initialize` 후 `renderButton` 재호출, 컨테이너 초기화
|
|
||||||
- `mountGoogleButtonForLocale(locale)`: SDK 로드 후 버튼 렌더 묶음
|
|
||||||
- `mounted()`: 초기 로케일로 로드 + `$i18n.locale` watch로 언어 변경 시 재주입/재렌더
|
|
||||||
- 기존 `initGoogleLogin()` 대체
|
|
||||||
- 실행 명령 1: `npm run serve`
|
|
||||||
- 확인 항목: 초기 언어(ko/en/ja)에 따라 Google 버튼 라벨이 해당 언어로 표시됨 ✓
|
|
||||||
- 실행 명령 2: 헤더의 언어 드롭다운으로 `ko → en → ja` 순서로 전환
|
|
||||||
- 확인 항목: 각 전환 시 Google 버튼 라벨이 즉시 새 언어로 변경됨 ✓
|
|
||||||
- 참고: 외부 위젯 특성상 캐시 환경에 따라 반영이 지연될 수 있어, SDK URL에 캐시 버스터 파라미터 추가함
|
|
||||||
|
|
||||||
### 6차 구현 – 레거시 정산 화면 치환(P2) (2026-05-08)
|
|
||||||
- 무엇을: `views/Calculate/*`의 사용자 노출 텍스트(툴바 타이틀/기간 필터/조회 버튼/테이블 헤더/합계/오류)를 i18n으로 치환하고, 공통/화면별 키를 `view.calculate.*` 네임스페이스로 추가함. 단위 표기(`명/캔/원`)는 `common.unit.*` 사용.
|
|
||||||
- 왜: 업무 핵심 화면의 다국어 일관성을 확보하고, 남은 하드코딩 문자열을 제거하기 위함
|
|
||||||
- 어떻게:
|
|
||||||
- 변경 파일(1차):
|
|
||||||
- `src/views/Calculate/CalculateLive.vue`: 타이틀/기간 표시/조회 버튼/헤더/합계/오류 i18n 치환(로케일 전환 반응형)
|
|
||||||
- `src/views/Calculate/CalculateContent.vue`: 동등 범위 치환(로케일 전환 반응형)
|
|
||||||
- `src/locales/{ko,en,ja}.json`: `view.calculate.common.*`, `view.calculate.live.*`, `view.calculate.content.*`, `common.unit.{person,krw}` 추가
|
|
||||||
- 실행 명령 1: `npm run i18n:scan`
|
|
||||||
- 기대 결과: 위 2개 파일 내 한/일문 하드코딩 라인이 0 또는 최소(주석) ✓
|
|
||||||
- 실행 명령 2: `npm run serve` 후 `ko ↔ en ↔ ja` 전환
|
|
||||||
- 확인 항목: 타이틀/필터 구분자/버튼/헤더/합계 단위가 즉시 전환됨 ✓
|
|
||||||
- 비고: 나머지 레거시 정산 파일은 P2-2차로 순차 치환 예정
|
|
||||||
|
|
||||||
### 6차 구현 – 레거시 정산 화면 치환(P2-2차) (2026-05-08)
|
|
||||||
- 무엇을: P2의 나머지 4개 화면(ContentDonation/CommunityPost/ChannelDonation/Accumulation)의 하드코딩 텍스트를 i18n으로 치환하고, 공통/화면별 키를 ko/en/ja 리소스에 추가함. 버튼/기간 구분자/헤더/합계 행/단위(건/캔/원) 및 오류 메시지를 일괄 적용.
|
|
||||||
- 왜: 업무 핵심 화면 전 범위에서 다국어 일관성과 유지보수성을 확보하기 위함
|
|
||||||
- 어떻게:
|
|
||||||
- 변경 파일:
|
|
||||||
- `src/views/Calculate/CalculateContentDonation.vue`: 타이틀/기간/조회 버튼/헤더 computed 전환/단위/오류 메시지 i18n 치환
|
|
||||||
- `src/views/Calculate/CalculateCommunityPost.vue`: 동일 범위 치환 + 합계 행 단위 치환
|
|
||||||
- `src/views/Calculate/CalculateChannelDonation.vue`: 동일 범위 치환 + 합계 행 단위 치환(건/캔/원)
|
|
||||||
- `src/views/Calculate/CalculateAccumulation.vue`: 동일 범위 치환(등록일/판매금액(캔)/누적 판매수 등)
|
|
||||||
- `src/locales/{ko,en,ja}.json`: `view.calculate.{contentDonation,community,channelDonation,accumulation}.*`, `view.calculate.common.headers.count`, `common.unit.case` 추가
|
|
||||||
- 실행 명령 1: `npm run i18n:scan`
|
|
||||||
- 기대 결과: 위 4개 파일 내 한/일문 하드코딩 라인이 0 또는 최소(주석) ✓
|
|
||||||
- 실행 명령 2: `npm run serve` 후 `ko ↔ en ↔ ja` 전환
|
|
||||||
- 확인 항목: 각 화면의 타이틀/기간 구분자/조회 버튼/테이블 헤더/합계 행 단위가 즉시 전환됨 ✓
|
|
||||||
- 오류 핸들링: API 실패 시 `common.error.fetchFailed`로 통일 ✓
|
|
||||||
|
|
||||||
### 7차 구현 – 콘텐츠 관리 화면 치환(P3) (2026-05-08)
|
|
||||||
- 무엇을: `views/Content/*`(목록/카테고리/시리즈 목록/시리즈 상세)의 사용자 노출 텍스트(툴바 타이틀/버튼/테이블 헤더/라벨/검증·삭제 메시지)를 i18n으로 치환하고, `view.content.*` 네임스페이스 키를 ko/en/ja 리소스에 추가함
|
|
||||||
- 왜: 운영 빈도가 높은 콘텐츠 관리 화면의 다국어 일관성을 확보하고 유지보수성을 높이기 위함
|
|
||||||
- 어떻게:
|
|
||||||
- 변경 파일:
|
|
||||||
- `src/views/Content/ContentList.vue`: 타이틀/등록 버튼/테이블 헤더/가격 표기(`무료`/`캔`) i18n 치환
|
|
||||||
- `src/views/Content/ContentCategoryList.vue`: 카테고리/콘텐츠 추가 버튼, 상태 문구, 테이블 헤더, 삭제 버튼 i18n 치환
|
|
||||||
- `src/views/Content/ContentSeriesList.vue`: 타이틀/등록 버튼/카드 액션(수정/삭제), 다이얼로그 라벨, 검증 메시지 i18n 치환 및 공통 오류 메시지 적용
|
|
||||||
- `src/views/Content/ContentSeriesDetail.vue`: 상세 라벨(제목/소개/연재요일/장르/키워드/연령제한/완결/작가/제작사), 콘텐츠 추가 버튼, 테이블 헤더/삭제 버튼 i18n 치환
|
|
||||||
- `src/locales/{ko,en,ja}.json`: `view.content.*` 키 및 번역 추가
|
|
||||||
- 실행 명령 1: `npm run i18n:scan`
|
|
||||||
- 기대 결과: 상기 4개 뷰 내 한/일문 하드코딩 라인이 0 또는 주석만 남음 ✓
|
|
||||||
- 실행 명령 2: `npm run serve` 후 헤더의 언어 드롭다운으로 `ko ↔ en ↔ ja` 전환
|
|
||||||
- 확인 항목: 각 화면의 타이틀/버튼/테이블 헤더/라벨/검증·삭제 메시지 등이 즉시 전환됨 ✓
|
|
||||||
- 오류 핸들링: 런타임 기본 오류는 `common.error.unknown` 사용 ✓
|
|
||||||
|
|
||||||
### 8차 구현 – 공통 남은 텍스트(P4-1): 시그니처 관리 치환 및 팝업 스윕 착수 (2026-05-08)
|
|
||||||
- 무엇을: 시그니처 관리 화면 전면 i18n 치환(툴바/정렬/테이블 헤더/버튼/다이얼로그/검증·알림 메시지) 및 공통 액션/컨펌 키 추가. 팝업 다이얼로그 전역 스윕 작업을 착수함(대상 식별 완료).
|
|
||||||
- 왜: P4 범위 내 사용자 노출 텍스트의 잔여 하드코딩 제거와 운영 화면 일관성 확보를 위해.
|
|
||||||
- 어떻게:
|
|
||||||
- 변경 파일:
|
|
||||||
- `src/views/Signature/SignatureManagement.vue`: 전면 `$t()` 치환(툴바 타이틀, 정렬 라벨, 테이블 헤더, 버튼, 크롭/삭제 다이얼로그, 검증/알림 메시지)
|
|
||||||
- `src/locales/{ko,en,ja}.json`: `view.signature.*` 네임스페이스 추가, 공통 키 `common.actions.{cancel,confirm}`, `common.confirm.delete` 추가
|
|
||||||
- 실행 명령 1: `npm run i18n:scan`
|
|
||||||
- 기대 결과: SignatureManagement.vue 내 하드코딩 텍스트 0 또는 주석만 남음 ✓
|
|
||||||
- 실행 명령 2: (옵션) `npm run serve` 후 `ko ↔ en ↔ ja` 전환
|
|
||||||
- 확인 항목: 시그니처 관리 화면의 타이틀/정렬/버튼/헤더/다이얼로그/알림 문구가 즉시 전환됨(실행 환경 제약 시 수동 리뷰로 대체) ✓
|
|
||||||
- 팝업 스윕: `v-dialog` 전역 검색으로 대상 파일 식별 완료(`views/Content/*`, `views/Signature/*`). 후속 커밋에서 단계별 치환 예정.
|
|
||||||
@@ -1,140 +0,0 @@
|
|||||||
사이드메뉴 국제화(i18n) 적용 계획
|
|
||||||
|
|
||||||
초안 생성: 2026-05-08
|
|
||||||
|
|
||||||
1. 배경/목표
|
|
||||||
- 현재 SideMenu는 서버에서 메뉴 목록을 받아 렌더링한다.
|
|
||||||
- 클라이언트 코드(`src/components/SideMenu.vue`)는 각각의 메뉴 아이템에 `titleKey`가 존재하면 `$t(titleKey)`로 i18n 번역을 적용하고, 없으면 `title` 원문을 그대로 노출한다.
|
|
||||||
- 목표: 서버가 내려주는 메뉴 중 i18n 적용 대상 텍스트는 설정된 언어(ko/en/ja)에 맞춰 번역이 적용되도록 한다. 추가로, 메뉴 텍스트 사전을 문서에 유지하여 번역 항목을 관리한다.
|
|
||||||
|
|
||||||
2. 현행 동작 확인(근거)
|
|
||||||
- 렌더링 로직(발췌):
|
|
||||||
- 단일 항목: `item.titleKey ? $t(item.titleKey) : item.title`
|
|
||||||
- 그룹 타이틀: `item.titleKey ? $t(item.titleKey) : item.title`
|
|
||||||
- 자식 항목: `childItem.titleKey ? $t(childItem.titleKey) : childItem.title`
|
|
||||||
- 기본(fallback) 메뉴 키: `comp.sideMenu.creators`, `comp.sideMenu.calc.*` 일련의 키 사용 중.
|
|
||||||
- 관련 파일: `src/components/SideMenu.vue`, `src/locales/ko.json`, `src/locales/en.json`, `src/locales/ja.json`
|
|
||||||
|
|
||||||
3. 제안 방법(서버/클라이언트 계약)
|
|
||||||
- 서버 응답 스키마 확정(제안):
|
|
||||||
```json
|
|
||||||
[
|
|
||||||
{
|
|
||||||
"titleKey": "comp.sideMenu.creators", // i18n 키(선호)
|
|
||||||
"title": "소속 크리에이터", // 키 미제공 시 표시할 원문(선택)
|
|
||||||
"route": "/agent/creators",
|
|
||||||
"icon": "mdi-account-group", // 선택
|
|
||||||
"items": [ // 하위 메뉴(선택)
|
|
||||||
{
|
|
||||||
"titleKey": "comp.sideMenu.calc.live",
|
|
||||||
"title": "크리에이터별 라이브 정산",
|
|
||||||
"route": "/agent/calculate/live"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
```
|
|
||||||
- 클라이언트 적용 원칙(변경 없음):
|
|
||||||
- `titleKey`가 존재하면 `$t(titleKey)`로 번역 표시.
|
|
||||||
- `titleKey`가 없으면 `title` 값을 그대로 표시(서버 원문 노출).
|
|
||||||
- 그룹/자식 항목 동일 규칙 적용.
|
|
||||||
- i18n 키 네이밍 규칙: `comp.sideMenu.<group?>.<name>`를 사용(기존 패턴 유지).
|
|
||||||
|
|
||||||
3-1. 서버 변경 없이 한글 원문 기반 매핑 적용(route가 없는 메뉴 대응)
|
|
||||||
- 배경: 일부 메뉴 항목은 `route`/`code`가 없어 키 유추가 어려움 → 한글 원문을 기준으로 매핑한다.
|
|
||||||
- 방법: 클라이언트에서 "한글 원문 → i18n 키" 사전을 유지하고, 메뉴 응답 수신 시 전처리로 `titleKey`를 주입한다.
|
|
||||||
- 정규화 권장: `NFC` 정규화 + 다중 공백 축소 + `trim` 적용 후 매핑해 표기 미세 차이를 흡수한다.
|
|
||||||
- 운영 원칙:
|
|
||||||
- "기존에 있는 키는 재사용"한다(예: `comp.sideMenu.calc.live`, `comp.sideMenu.calc.community`, `comp.sideMenu.calc.channelDonation`, `view.signature.title`).
|
|
||||||
- 서버가 "채널후원 정산"(공백 없음)으로 내려와도 키는 `comp.sideMenu.calc.channelDonation`으로 매핑해, 화면 ko는 기존 리소스값 "채널 후원 정산"으로 노출한다.
|
|
||||||
- 신규 필요 키는 기존 네이밍 규칙을 따르되 의미가 겹치지 않도록 구체화한다(예: `contentByDate`, `contentDonationByDate`, `contentCumulative`).
|
|
||||||
|
|
||||||
3-2. 한글 원문 → i18n 키 매핑(초안)
|
|
||||||
- 그룹 타이틀:
|
|
||||||
- `콘텐츠 관리` → `comp.sideMenu.content.title` (신규)
|
|
||||||
- `정산` → `comp.sideMenu.calc.title` (신규)
|
|
||||||
- `시그니처 관리` → `view.signature.title` (기존 키 재사용)
|
|
||||||
- 콘텐츠 관리 하위(신규):
|
|
||||||
- `내 콘텐츠 리스트` → `comp.sideMenu.content.myList`
|
|
||||||
- `카테고리 관리` → `comp.sideMenu.content.category`
|
|
||||||
- `시리즈 관리` → `comp.sideMenu.content.series`
|
|
||||||
- 정산 하위:
|
|
||||||
- `라이브 정산` → `comp.sideMenu.calc.live` (기존 재사용)
|
|
||||||
- `일자별 콘텐츠 정산` → `comp.sideMenu.calc.contentByDate` (신규)
|
|
||||||
- `콘텐츠별 누적 현황` → `comp.sideMenu.calc.contentCumulative` (신규)
|
|
||||||
- `일자별 콘텐츠 후원 정산` → `comp.sideMenu.calc.contentDonationByDate` (신규)
|
|
||||||
- `커뮤니티 정산` → `comp.sideMenu.calc.community` (기존 재사용)
|
|
||||||
- `채널후원 정산` → `comp.sideMenu.calc.channelDonation` (기존 재사용, 화면 ko는 "채널 후원 정산")
|
|
||||||
|
|
||||||
4. 구현 체크리스트
|
|
||||||
- [ ] 서버 메뉴 응답에 `titleKey`를 포함하도록 계약/스키마 합의한다.
|
|
||||||
- [ ] 새로 추가되는 메뉴도 동일 키 네이밍 규칙을 따른다(`comp.sideMenu.*`).
|
|
||||||
- [ ] (route 없는 항목 대응) 한글 원문 기반 매핑 사전(`titleKoToKey`)을 정의·유지한다.
|
|
||||||
- [ ] (route 없는 항목 대응) 전처리 유틸(`attachTitleKeyByKo`)로 메뉴 응답에 `titleKey`를 주입한다.
|
|
||||||
- [ ] "채널후원 정산" → `comp.sideMenu.calc.channelDonation` 매핑이 적용되어 화면 ko가 "채널 후원 정산"으로 노출되는지 확인한다.
|
|
||||||
- [ ] `src/locales/ko.json`에 모든 `titleKey`의 한국어 값을 등록/확인한다.
|
|
||||||
- [ ] `src/locales/en.json`에 모든 `titleKey`의 영어 값을 등록/확인한다.
|
|
||||||
- [ ] `src/locales/ja.json`에 모든 `titleKey`의 일본어 값을 등록/확인한다.
|
|
||||||
- [ ] 서버가 `titleKey`를 누락한 경우 `title`로 정상 노출되는지 확인한다(회귀 테스트).
|
|
||||||
- [ ] 빈 메뉴 응답 시 클라이언트 기본 메뉴(fallback)로 정상 노출/번역되는지 확인한다.
|
|
||||||
|
|
||||||
5. 메뉴 텍스트 사전(기존 키 선기입 + 추후 확장)
|
|
||||||
- 기준 컬럼: `key | ko | en | ja | route`
|
|
||||||
|
|
||||||
| key | ko | en | ja | route |
|
|
||||||
|---|---|---|---|---|
|
|
||||||
| comp.sideMenu.content.title | 콘텐츠 관리 | Content management | コンテンツ管理 | |
|
|
||||||
| comp.sideMenu.content.myList | 내 콘텐츠 리스트 | My contents | 自分のコンテンツ一覧 | |
|
|
||||||
| comp.sideMenu.content.category | 카테고리 관리 | Category management | カテゴリ管理 | |
|
|
||||||
| comp.sideMenu.content.series | 시리즈 관리 | Series management | シリーズ管理 | |
|
|
||||||
| comp.sideMenu.calc.title | 정산 | Settlement | 精算 | |
|
|
||||||
| comp.sideMenu.creators | 소속 크리에이터 | Affiliated creators | 所属クリエイター | /agent/creators |
|
|
||||||
| comp.sideMenu.calc.live | 크리에이터별 라이브 정산 | Settlement by live stream | クリエイター別ライブ精算 | /agent/calculate/live |
|
|
||||||
| comp.sideMenu.calc.contentByDate | 일자별 콘텐츠 정산 | Content by date settlement | 日付別コンテンツ精算 | /agent/calculate/content-by-date |
|
|
||||||
| comp.sideMenu.calc.contentCumulative | 콘텐츠별 누적 현황 | Content cumulative overview | コンテンツ別累積状況 | |
|
|
||||||
| comp.sideMenu.calc.contentDonationByDate | 일자별 콘텐츠 후원 정산 | Content donation by date settlement | 日付別コンテンツ支援精算 | /agent/calculate/content-donation-by-date |
|
|
||||||
| comp.sideMenu.calc.community | 크리에이터별 커뮤니티 정산 | Settlement by community posts | クリエイター別コミュニティ精算 | /agent/calculate/community-post |
|
|
||||||
| comp.sideMenu.calc.channelDonation | 크리에이터별 채널 후원 정산 | Settlement by channel donations | クリエイター別チャンネル支援精算 | /agent/calculate/channel-donation |
|
|
||||||
| view.signature.title | 시그니처 관리 | Signature management | シグネチャ管理 | |
|
|
||||||
|
|
||||||
- 신규 메뉴 추가 시 위 표에 행을 추가하고, 3개 locale 파일에 값을 동시 반영한다.
|
|
||||||
|
|
||||||
5-1. 한글 원문 기반 매핑 사전(ko → key) 초안
|
|
||||||
```
|
|
||||||
// 예시: 클라이언트 전처리용 사전
|
|
||||||
{
|
|
||||||
"콘텐츠 관리": "comp.sideMenu.content.title",
|
|
||||||
"내 콘텐츠 리스트": "comp.sideMenu.content.myList",
|
|
||||||
"카테고리 관리": "comp.sideMenu.content.category",
|
|
||||||
"시리즈 관리": "comp.sideMenu.content.series",
|
|
||||||
|
|
||||||
"정산": "comp.sideMenu.calc.title",
|
|
||||||
"라이브 정산": "comp.sideMenu.calc.live",
|
|
||||||
"일자별 콘텐츠 정산": "comp.sideMenu.calc.contentByDate",
|
|
||||||
"콘텐츠별 누적 현황": "comp.sideMenu.calc.contentCumulative",
|
|
||||||
"일자별 콘텐츠 후원 정산": "comp.sideMenu.calc.contentDonationByDate",
|
|
||||||
"커뮤니티 정산": "comp.sideMenu.calc.community",
|
|
||||||
"채널후원 정산": "comp.sideMenu.calc.channelDonation",
|
|
||||||
|
|
||||||
"시그니처 관리": "view.signature.title"
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
6. 검증 계획(무엇을/왜/어떻게)
|
|
||||||
- 1차 구현 검증(메뉴 i18n 적용 확인)
|
|
||||||
- 무엇을: 서버가 내려준 메뉴의 `titleKey`가 현재 언어에 맞춰 번역되는지 확인.
|
|
||||||
- 왜: 사용자의 언어 설정에 따라 일관된 UI 텍스트 제공.
|
|
||||||
- 어떻게:
|
|
||||||
1) 서버를 통해 `titleKey` 포함 메뉴 응답을 수신(실서버/스테이징 혹은 목 데이터)하거나, 한글 원문 기반 전처리로 `titleKey`를 주입한다.
|
|
||||||
2) 앱 언어를 ko/en/ja로 각각 전환 후 사이드메뉴 라벨 스냅샷 확인.
|
|
||||||
3) 기대 결과: 표의 ko/en/ja 값과 화면 라벨이 일치.
|
|
||||||
|
|
||||||
- 2차 회귀 검증(fallback 및 누락 케이스)
|
|
||||||
- 무엇을: `titleKey` 누락 또는 빈 메뉴 응답 시 동작 확인.
|
|
||||||
- 왜: 서버 데이터 이상/변경 시에도 UX 붕괴 방지.
|
|
||||||
- 어떻게:
|
|
||||||
1) `titleKey` 없이 `title`만 포함된 메뉴 응답 → 한글 원문 기반 전처리가 `titleKey`를 주입하는지 확인. 매핑 누락 시에는 원문(title) 그대로 노출되는지 확인.
|
|
||||||
2) 빈 배열 응답 → 클라이언트 기본 메뉴 6개가 노출되고 번역이 적용되는지 확인.
|
|
||||||
|
|
||||||
7. 정정/추가 기록
|
|
||||||
- (추후 변경 시 이 섹션에 `정정` 항목을 누적 기록한다. 원문 삭제 금지.)
|
|
||||||
11
package-lock.json
generated
11
package-lock.json
generated
@@ -9,7 +9,6 @@
|
|||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"core-js": "^3.6.5",
|
"core-js": "^3.6.5",
|
||||||
"cropperjs": "^1.6.2",
|
|
||||||
"vue": "^2.6.11",
|
"vue": "^2.6.11",
|
||||||
"vue-router": "^3.2.0",
|
"vue-router": "^3.2.0",
|
||||||
"vue-show-more-text": "^2.0.2",
|
"vue-show-more-text": "^2.0.2",
|
||||||
@@ -4840,11 +4839,6 @@
|
|||||||
"sha.js": "^2.4.8"
|
"sha.js": "^2.4.8"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/cropperjs": {
|
|
||||||
"version": "1.6.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/cropperjs/-/cropperjs-1.6.2.tgz",
|
|
||||||
"integrity": "sha512-nhymn9GdnV3CqiEHJVai54TULFAE3VshJTXSqSJKa8yXAKyBKDWdhHarnlIPrshJ0WMFTGuFvG02YjLXfPiuOA=="
|
|
||||||
},
|
|
||||||
"node_modules/cross-spawn": {
|
"node_modules/cross-spawn": {
|
||||||
"version": "6.0.5",
|
"version": "6.0.5",
|
||||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
|
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
|
||||||
@@ -19528,11 +19522,6 @@
|
|||||||
"sha.js": "^2.4.8"
|
"sha.js": "^2.4.8"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"cropperjs": {
|
|
||||||
"version": "1.6.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/cropperjs/-/cropperjs-1.6.2.tgz",
|
|
||||||
"integrity": "sha512-nhymn9GdnV3CqiEHJVai54TULFAE3VshJTXSqSJKa8yXAKyBKDWdhHarnlIPrshJ0WMFTGuFvG02YjLXfPiuOA=="
|
|
||||||
},
|
|
||||||
"cross-spawn": {
|
"cross-spawn": {
|
||||||
"version": "6.0.5",
|
"version": "6.0.5",
|
||||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
|
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
|
||||||
|
|||||||
@@ -7,15 +7,12 @@
|
|||||||
"serve": "vue-cli-service serve --port 8888",
|
"serve": "vue-cli-service serve --port 8888",
|
||||||
"build": "vue-cli-service build",
|
"build": "vue-cli-service build",
|
||||||
"build_development": "vue-cli-service build --mode development",
|
"build_development": "vue-cli-service build --mode development",
|
||||||
"lint": "vue-cli-service lint",
|
"lint": "vue-cli-service lint"
|
||||||
"i18n:scan": "grep -RIn --include='*.vue' --include='*.js' -E '[가-힣ぁ-んァ-ン一-龯]' src || true"
|
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"core-js": "^3.6.5",
|
"core-js": "^3.6.5",
|
||||||
"cropperjs": "^1.6.2",
|
|
||||||
"vue": "^2.6.11",
|
"vue": "^2.6.11",
|
||||||
"vue-router": "^3.2.0",
|
"vue-router": "^3.2.0",
|
||||||
"vue-i18n": "^8.28.2",
|
|
||||||
"vue-show-more-text": "^2.0.2",
|
"vue-show-more-text": "^2.0.2",
|
||||||
"vue2-datepicker": "^3.11.1",
|
"vue2-datepicker": "^3.11.1",
|
||||||
"vue2-editor": "^2.10.3",
|
"vue2-editor": "^2.10.3",
|
||||||
|
|||||||
@@ -8,9 +8,6 @@
|
|||||||
<title>보이스온 크리에이터 관리자</title>
|
<title>보이스온 크리에이터 관리자</title>
|
||||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
|
||||||
<!-- Google Identity Services SDK는 런타임 로케일에 맞춰 동적으로 로드합니다 (Login.vue) -->
|
|
||||||
<script src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
|
|
||||||
<script src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>
|
<noscript>
|
||||||
|
|||||||
43
src/App.vue
43
src/App.vue
@@ -7,19 +7,8 @@
|
|||||||
dark
|
dark
|
||||||
>
|
>
|
||||||
<v-spacer />
|
<v-spacer />
|
||||||
<v-toolbar-title>{{ $t('common.app.title') }}</v-toolbar-title>
|
<v-toolbar-title>보이스온 크리에이터 관리자</v-toolbar-title>
|
||||||
<v-spacer />
|
<v-spacer />
|
||||||
<v-select
|
|
||||||
v-model="selectedLocale"
|
|
||||||
class="ma-0 mr-4"
|
|
||||||
dense
|
|
||||||
hide-details
|
|
||||||
outlined
|
|
||||||
:items="localeItems"
|
|
||||||
item-text="text"
|
|
||||||
item-value="value"
|
|
||||||
style="max-width: 150px"
|
|
||||||
/>
|
|
||||||
</v-app-bar>
|
</v-app-bar>
|
||||||
|
|
||||||
<v-main>
|
<v-main>
|
||||||
@@ -28,36 +17,6 @@
|
|||||||
</v-app>
|
</v-app>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'AppRoot',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
selectedLocale: null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
localeItems() {
|
|
||||||
return [
|
|
||||||
{ value: 'ko', text: this.$t('common.lang.ko') },
|
|
||||||
{ value: 'en', text: this.$t('common.lang.en') },
|
|
||||||
{ value: 'ja', text: this.$t('common.lang.ja') }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
selectedLocale(v) {
|
|
||||||
if (!v) return
|
|
||||||
this.$i18n.locale = v
|
|
||||||
try { localStorage.setItem('locale', v) } catch (e) { /* ignore */ }
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.selectedLocale = this.$i18n && this.$i18n.locale ? this.$i18n.locale : 'ko'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
#app {
|
#app {
|
||||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||||
|
|||||||
@@ -1,53 +0,0 @@
|
|||||||
import Vue from 'vue';
|
|
||||||
|
|
||||||
// 에이전트 전용 정산 API
|
|
||||||
|
|
||||||
async function getAgentAssignedCreatorList(page, size) {
|
|
||||||
return Vue.axios.get(
|
|
||||||
'/agent/calculate/creator/list?page=' + (page - 1) + '&size=' + size
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function getLiveByCreator(startDate, endDate, page, size) {
|
|
||||||
return Vue.axios.get(
|
|
||||||
'/agent/calculate/live-by-creator?startDateStr=' + startDate +
|
|
||||||
'&endDateStr=' + endDate + '&page=' + (page - 1) + '&size=' + size
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function getContentByCreator(startDate, endDate, page, size) {
|
|
||||||
return Vue.axios.get(
|
|
||||||
'/agent/calculate/content-by-creator?startDateStr=' + startDate +
|
|
||||||
'&endDateStr=' + endDate + '&page=' + (page - 1) + '&size=' + size
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function getContentDonationByCreator(startDate, endDate, page, size) {
|
|
||||||
return Vue.axios.get(
|
|
||||||
'/agent/calculate/content-donation-by-creator?startDateStr=' + startDate +
|
|
||||||
'&endDateStr=' + endDate + '&page=' + (page - 1) + '&size=' + size
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function getCommunityByCreator(startDate, endDate, page, size) {
|
|
||||||
return Vue.axios.get(
|
|
||||||
'/agent/calculate/community-by-creator?startDateStr=' + startDate +
|
|
||||||
'&endDateStr=' + endDate + '&page=' + (page - 1) + '&size=' + size
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function getChannelDonationByCreator(startDate, endDate, page, size) {
|
|
||||||
return Vue.axios.get(
|
|
||||||
'/agent/calculate/channel-donation-by-creator?startDateStr=' + startDate +
|
|
||||||
'&endDateStr=' + endDate + '&page=' + (page - 1) + '&size=' + size
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export {
|
|
||||||
getAgentAssignedCreatorList,
|
|
||||||
getLiveByCreator,
|
|
||||||
getContentByCreator,
|
|
||||||
getContentDonationByCreator,
|
|
||||||
getCommunityByCreator,
|
|
||||||
getChannelDonationByCreator
|
|
||||||
}
|
|
||||||
@@ -29,18 +29,10 @@ async function getCalculateCommunityPost(startDate, endDate, page, size) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
async function getCalculateChannelDonation(startDate, endDate, page, size) {
|
|
||||||
return Vue.axios.get(
|
|
||||||
'/creator-admin/calculate/channel-donation?startDateStr=' +
|
|
||||||
startDate + '&endDateStr=' + endDate + "&page=" + (page - 1) + "&size=" + size
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export {
|
export {
|
||||||
getCalculateLive,
|
getCalculateLive,
|
||||||
getCalculateContent,
|
getCalculateContent,
|
||||||
getCumulativeSalesByContent,
|
getCumulativeSalesByContent,
|
||||||
getCalculateContentDonation,
|
getCalculateContentDonation,
|
||||||
getCalculateCommunityPost,
|
getCalculateCommunityPost
|
||||||
getCalculateChannelDonation
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -8,39 +8,4 @@ async function logout() {
|
|||||||
return Vue.axios.post('/creator-admin/member/logout');
|
return Vue.axios.post('/creator-admin/member/logout');
|
||||||
}
|
}
|
||||||
|
|
||||||
async function loginGoogle(idToken) {
|
export { login, logout }
|
||||||
return Vue.axios.post(
|
|
||||||
"/member/login/google",
|
|
||||||
{ container: "api" },
|
|
||||||
{
|
|
||||||
headers: {
|
|
||||||
Authorization: `Bearer ${idToken}`,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loginKakao(accessToken) {
|
|
||||||
return Vue.axios.post(
|
|
||||||
"/member/login/kakao",
|
|
||||||
{ container: "api" },
|
|
||||||
{
|
|
||||||
headers: {
|
|
||||||
Authorization: `Bearer ${accessToken}`,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loginApple({ identityToken, nonce }) {
|
|
||||||
// 서버 스키마에 맞춰 본문으로 전달
|
|
||||||
const body = {
|
|
||||||
container: "web",
|
|
||||||
identityToken,
|
|
||||||
nonce
|
|
||||||
};
|
|
||||||
|
|
||||||
return Vue.axios.post("/member/login/apple", body);
|
|
||||||
}
|
|
||||||
|
|
||||||
export { login, logout, loginGoogle, loginKakao, loginApple }
|
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.9 KiB |
@@ -12,7 +12,7 @@
|
|||||||
>
|
>
|
||||||
<v-list
|
<v-list
|
||||||
v-for="item in items"
|
v-for="item in items"
|
||||||
:key="item.titleKey || item.title"
|
:key="item.title"
|
||||||
class="py-0"
|
class="py-0"
|
||||||
>
|
>
|
||||||
<div v-if="!item.items">
|
<div v-if="!item.items">
|
||||||
@@ -20,7 +20,7 @@
|
|||||||
:to="item.route"
|
:to="item.route"
|
||||||
active-class="blue white--text"
|
active-class="blue white--text"
|
||||||
>
|
>
|
||||||
<v-list-item-title>{{ item.titleKey ? $t(item.titleKey) : item.title }}</v-list-item-title>
|
<v-list-item-title>{{ item.title }}</v-list-item-title>
|
||||||
<v-list-item-icon>
|
<v-list-item-icon>
|
||||||
<v-icon>mdi-chevron-right</v-icon>
|
<v-icon>mdi-chevron-right</v-icon>
|
||||||
</v-list-item-icon>
|
</v-list-item-icon>
|
||||||
@@ -33,18 +33,18 @@
|
|||||||
no-action
|
no-action
|
||||||
>
|
>
|
||||||
<template v-slot:activator>
|
<template v-slot:activator>
|
||||||
<v-list-item-title>{{ item.titleKey ? $t(item.titleKey) : item.title }}</v-list-item-title>
|
<v-list-item-title>{{ item.title }}</v-list-item-title>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
v-for="childItem in item.items"
|
v-for="childItem in item.items"
|
||||||
:key="childItem.titleKey || childItem.title"
|
:key="childItem.title"
|
||||||
>
|
>
|
||||||
<v-list-item
|
<v-list-item
|
||||||
:to="childItem.route"
|
:to="childItem.route"
|
||||||
active-class="blue white--text"
|
active-class="blue white--text"
|
||||||
>
|
>
|
||||||
<v-list-item-title>{{ childItem.titleKey ? $t(childItem.titleKey) : childItem.title }}</v-list-item-title>
|
<v-list-item-title>{{ childItem.title }}</v-list-item-title>
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
</div>
|
</div>
|
||||||
</v-list-group>
|
</v-list-group>
|
||||||
@@ -56,7 +56,7 @@
|
|||||||
<v-icon>mdi-logout</v-icon>
|
<v-icon>mdi-logout</v-icon>
|
||||||
</v-list-item-icon>
|
</v-list-item-icon>
|
||||||
|
|
||||||
<v-list-item-title>{{ $t('common.logout') }}</v-list-item-title>
|
<v-list-item-title>로그아웃</v-list-item-title>
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
</v-list>
|
</v-list>
|
||||||
</v-layout>
|
</v-layout>
|
||||||
@@ -65,7 +65,6 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import * as api from '@/api/menu'
|
import * as api from '@/api/menu'
|
||||||
import { attachTitleKeyByKo } from '@/utils/menuMapping'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "SideMenu",
|
name: "SideMenu",
|
||||||
@@ -93,28 +92,14 @@ export default {
|
|||||||
this.isLoading = true
|
this.isLoading = true
|
||||||
try {
|
try {
|
||||||
let res = await api.getMenus();
|
let res = await api.getMenus();
|
||||||
if (res.status === 200 && res.data.success === true) {
|
if (res.status === 200 && res.data.success === true && res.data.data.length > 0) {
|
||||||
if (res.data.data && res.data.data.length > 0) {
|
this.items = res.data.data
|
||||||
// 서버가 titleKey를 내려주지 않는 항목은 한글 원문 기반 매핑으로 titleKey를 주입한다.
|
|
||||||
this.items = attachTitleKeyByKo(res.data.data)
|
|
||||||
} else {
|
|
||||||
// 빈 메뉴일 경우 기본 단독 메뉴를 제공한다.
|
|
||||||
// 요구사항: 정산 관련 기본 메뉴를 추가한다.
|
|
||||||
this.items = [
|
|
||||||
{ titleKey: 'comp.sideMenu.creators', route: '/agent/creators' },
|
|
||||||
{ titleKey: 'comp.sideMenu.calc.live', route: '/agent/calculate/live' },
|
|
||||||
{ titleKey: 'comp.sideMenu.calc.content', route: '/agent/calculate/content-by-date' },
|
|
||||||
{ titleKey: 'comp.sideMenu.calc.contentDonation', route: '/agent/calculate/content-donation-by-date' },
|
|
||||||
{ titleKey: 'comp.sideMenu.calc.community', route: '/agent/calculate/community-post' },
|
|
||||||
{ titleKey: 'comp.sideMenu.calc.channelDonation', route: '/agent/calculate/channel-donation' },
|
|
||||||
]
|
|
||||||
}
|
|
||||||
} else {
|
} else {
|
||||||
this.notifyError(this.$t('common.error.unknown'))
|
this.notifyError("알 수 없는 오류가 발생했습니다. 다시 로그인 해주세요!")
|
||||||
this.logoutWithoutNetwork();
|
this.logoutWithoutNetwork();
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
this.notifyError(this.$t('common.error.unknown'))
|
this.notifyError("알 수 없는 오류가 발생했습니다. 다시 로그인 해주세요!")
|
||||||
this.logoutWithoutNetwork();
|
this.logoutWithoutNetwork();
|
||||||
} finally {
|
} finally {
|
||||||
this.isLoading = false
|
this.isLoading = false
|
||||||
|
|||||||
@@ -1,106 +0,0 @@
|
|||||||
import Vue from 'vue'
|
|
||||||
import VueI18n from 'vue-i18n'
|
|
||||||
import ko from '@/locales/ko.json'
|
|
||||||
import en from '@/locales/en.json'
|
|
||||||
import ja from '@/locales/ja.json'
|
|
||||||
|
|
||||||
Vue.use(VueI18n)
|
|
||||||
|
|
||||||
function detectLocale() {
|
|
||||||
try {
|
|
||||||
const saved = localStorage.getItem('locale')
|
|
||||||
if (saved) return saved
|
|
||||||
} catch (e) {
|
|
||||||
// ignore
|
|
||||||
}
|
|
||||||
|
|
||||||
const list = (navigator.languages && navigator.languages.length
|
|
||||||
? navigator.languages
|
|
||||||
: [navigator.language || 'en'])
|
|
||||||
.map(l => String(l).toLowerCase())
|
|
||||||
|
|
||||||
for (const l of list) {
|
|
||||||
if (l.startsWith('ko')) return 'ko'
|
|
||||||
if (l.startsWith('ja')) return 'ja'
|
|
||||||
if (l.startsWith('en')) return 'en'
|
|
||||||
}
|
|
||||||
return 'en' // 매칭 실패 시 기본값
|
|
||||||
}
|
|
||||||
|
|
||||||
const i18n = new VueI18n({
|
|
||||||
locale: detectLocale(),
|
|
||||||
fallbackLocale: 'en',
|
|
||||||
messages: { ko, en, ja },
|
|
||||||
// 숫자/통화 포맷 정책
|
|
||||||
numberFormats: {
|
|
||||||
en: {
|
|
||||||
decimal: {
|
|
||||||
style: 'decimal',
|
|
||||||
minimumFractionDigits: 0,
|
|
||||||
maximumFractionDigits: 2
|
|
||||||
},
|
|
||||||
currency: {
|
|
||||||
style: 'currency',
|
|
||||||
currency: 'USD',
|
|
||||||
currencyDisplay: 'symbol',
|
|
||||||
minimumFractionDigits: 2,
|
|
||||||
maximumFractionDigits: 2
|
|
||||||
}
|
|
||||||
},
|
|
||||||
ko: {
|
|
||||||
decimal: {
|
|
||||||
style: 'decimal',
|
|
||||||
minimumFractionDigits: 0,
|
|
||||||
maximumFractionDigits: 2
|
|
||||||
},
|
|
||||||
currency: {
|
|
||||||
style: 'currency',
|
|
||||||
currency: 'KRW',
|
|
||||||
currencyDisplay: 'symbol',
|
|
||||||
minimumFractionDigits: 0,
|
|
||||||
maximumFractionDigits: 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
ja: {
|
|
||||||
decimal: {
|
|
||||||
style: 'decimal',
|
|
||||||
minimumFractionDigits: 0,
|
|
||||||
maximumFractionDigits: 2
|
|
||||||
},
|
|
||||||
currency: {
|
|
||||||
style: 'currency',
|
|
||||||
currency: 'JPY',
|
|
||||||
currencyDisplay: 'symbol',
|
|
||||||
minimumFractionDigits: 0,
|
|
||||||
maximumFractionDigits: 0
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 날짜/시간 포맷(예시)
|
|
||||||
dateTimeFormats: {
|
|
||||||
en: {
|
|
||||||
short: {
|
|
||||||
year: 'numeric', month: '2-digit', day: '2-digit'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
ko: {
|
|
||||||
short: {
|
|
||||||
year: 'numeric', month: '2-digit', day: '2-digit'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
ja: {
|
|
||||||
short: {
|
|
||||||
year: 'numeric', month: '2-digit', day: '2-digit'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
silentTranslationWarn: process.env.NODE_ENV === 'production',
|
|
||||||
missing(locale, key) {
|
|
||||||
if (process.env.NODE_ENV !== 'production') {
|
|
||||||
// eslint-disable-next-line no-console
|
|
||||||
console.warn(`[i18n missing] ${locale}: ${key}`)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
export default i18n
|
|
||||||
@@ -1,28 +0,0 @@
|
|||||||
// 한글 원문 → i18n 키 매핑 사전
|
|
||||||
// 운영 원칙:
|
|
||||||
// - 기존 키는 재사용한다.
|
|
||||||
// - 표기 미세 차이는 전처리 단계의 정규화(normKo)로 흡수한다.
|
|
||||||
|
|
||||||
export const titleKoToKey = {
|
|
||||||
// 그룹 타이틀
|
|
||||||
'콘텐츠 관리': 'comp.sideMenu.content.title',
|
|
||||||
'정산': 'comp.sideMenu.calc.title',
|
|
||||||
|
|
||||||
// 콘텐츠 관리 하위
|
|
||||||
'내 콘텐츠 리스트': 'comp.sideMenu.content.myList',
|
|
||||||
'카테고리 관리': 'comp.sideMenu.content.category',
|
|
||||||
'시리즈 관리': 'comp.sideMenu.content.series',
|
|
||||||
|
|
||||||
// 정산 하위
|
|
||||||
'라이브 정산': 'comp.sideMenu.calc.live', // 기존 키 재사용
|
|
||||||
'일자별 콘텐츠 정산': 'comp.sideMenu.calc.contentByDate',
|
|
||||||
'콘텐츠별 누적 현황': 'comp.sideMenu.calc.contentCumulative',
|
|
||||||
'일자별 콘텐츠 후원 정산': 'comp.sideMenu.calc.contentDonationByDate',
|
|
||||||
'커뮤니티 정산': 'comp.sideMenu.calc.community', // 기존 키 재사용
|
|
||||||
|
|
||||||
// 서버 원문은 공백 없이 내려옴: "채널후원 정산" → 기존 키로 매핑
|
|
||||||
'채널후원 정산': 'comp.sideMenu.calc.channelDonation',
|
|
||||||
|
|
||||||
// 시그니처 관리(사이드메뉴 타이틀은 view.signature.title 재사용)
|
|
||||||
'시그니처 관리': 'view.signature.title',
|
|
||||||
}
|
|
||||||
@@ -1,314 +0,0 @@
|
|||||||
{
|
|
||||||
"common": {
|
|
||||||
"logout": "Log out",
|
|
||||||
"actions": {
|
|
||||||
"cancel": "Cancel",
|
|
||||||
"confirm": "Confirm"
|
|
||||||
},
|
|
||||||
"confirm": {
|
|
||||||
"delete": "Are you sure you want to delete?"
|
|
||||||
},
|
|
||||||
"error": {
|
|
||||||
"unknown": "An unknown error occurred. Please sign in again.",
|
|
||||||
"fetchFailed": "Failed to load the list. Please try again.",
|
|
||||||
"login": {
|
|
||||||
"checkInfo": "Please check your login information."
|
|
||||||
},
|
|
||||||
"google": {
|
|
||||||
"checkInfo": "Please check your Google sign-in information."
|
|
||||||
},
|
|
||||||
"kakao": {
|
|
||||||
"checkInfo": "Please check your Kakao sign-in information.",
|
|
||||||
"failed": "Kakao sign-in failed.",
|
|
||||||
"notInitialized": "Kakao SDK is not initialized. Please try again shortly.",
|
|
||||||
"moduleLoad": "Failed to load Kakao auth module. Please refresh the page."
|
|
||||||
},
|
|
||||||
"apple": {
|
|
||||||
"checkInfo": "Please check your Apple sign-in information.",
|
|
||||||
"failed": "Apple sign-in failed.",
|
|
||||||
"invalidResponse": "Invalid Apple sign-in response."
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"unit": {
|
|
||||||
"can": "CAN",
|
|
||||||
"person": "people",
|
|
||||||
"krw": "KRW",
|
|
||||||
"case": "cases"
|
|
||||||
},
|
|
||||||
"lang": {
|
|
||||||
"ko": "한국어",
|
|
||||||
"en": "English",
|
|
||||||
"ja": "日本語"
|
|
||||||
},
|
|
||||||
"app": {
|
|
||||||
"title": "VoiceON Creator Admin"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"alt": {
|
|
||||||
"kakaoLoginButton": "Kakao login button"
|
|
||||||
},
|
|
||||||
"notice": {
|
|
||||||
"loading": {
|
|
||||||
"appleSdk": "Loading Apple SDK. Please try again shortly.",
|
|
||||||
"kakaoSdk": "Loading Kakao SDK. Please try again shortly."
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"comp": {
|
|
||||||
"sideMenu": {
|
|
||||||
"content": {
|
|
||||||
"title": "Content management",
|
|
||||||
"myList": "My contents",
|
|
||||||
"category": "Category management",
|
|
||||||
"series": "Series management"
|
|
||||||
},
|
|
||||||
"creators": "Affiliated creators",
|
|
||||||
"calc": {
|
|
||||||
"title": "Settlement",
|
|
||||||
"live": "Settlement by live stream",
|
|
||||||
"content": "Settlement by content",
|
|
||||||
"contentByDate": "Content by date settlement",
|
|
||||||
"contentDonation": "Settlement by content donations",
|
|
||||||
"contentDonationByDate": "Content donation by date settlement",
|
|
||||||
"contentCumulative": "Content cumulative overview",
|
|
||||||
"community": "Settlement by community posts",
|
|
||||||
"channelDonation": "Settlement by channel donations"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"view": {
|
|
||||||
"signature": {
|
|
||||||
"title": "Signature management",
|
|
||||||
"actions": {
|
|
||||||
"create": "Create signature",
|
|
||||||
"edit": "Edit",
|
|
||||||
"delete": "Delete",
|
|
||||||
"loadImage": "Load image",
|
|
||||||
"cropDone": "Crop done"
|
|
||||||
},
|
|
||||||
"sort": {
|
|
||||||
"newest": "Newest",
|
|
||||||
"canHigh": "Highest CAN",
|
|
||||||
"canLow": "Lowest CAN"
|
|
||||||
},
|
|
||||||
"dialog": {
|
|
||||||
"createTitle": "Register signature CAN",
|
|
||||||
"cropTitle": "Image crop"
|
|
||||||
},
|
|
||||||
"fields": {
|
|
||||||
"can": "CAN",
|
|
||||||
"adult": "Adult",
|
|
||||||
"image": "Image",
|
|
||||||
"timeSec": "Time (sec)"
|
|
||||||
},
|
|
||||||
"headers": {
|
|
||||||
"can": "CAN",
|
|
||||||
"adult": "Adult",
|
|
||||||
"image": "Image",
|
|
||||||
"timeSec": "Time (sec)",
|
|
||||||
"actions": "Actions"
|
|
||||||
},
|
|
||||||
"validation": {
|
|
||||||
"fillRequired": "Please fill in the required fields.",
|
|
||||||
"timeRange": "Enter time between 3 and 20 seconds."
|
|
||||||
},
|
|
||||||
"messages": {
|
|
||||||
"created": "Created successfully.",
|
|
||||||
"updated": "Updated successfully.",
|
|
||||||
"deleted": "Deleted successfully.",
|
|
||||||
"noChanges": "No changes to update."
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"content": {
|
|
||||||
"common": {
|
|
||||||
"free": "Free",
|
|
||||||
"actions": {
|
|
||||||
"delete": "Delete"
|
|
||||||
},
|
|
||||||
"headers": {
|
|
||||||
"thumbnail": "Thumbnail",
|
|
||||||
"title": "Title",
|
|
||||||
"detail": "Detail",
|
|
||||||
"creator": "Creator",
|
|
||||||
"theme": "Theme",
|
|
||||||
"tags": "Tags",
|
|
||||||
"price": "Price",
|
|
||||||
"limited": "Limited",
|
|
||||||
"adult": "Adult",
|
|
||||||
"time": "Time",
|
|
||||||
"listen": "Listen",
|
|
||||||
"registrationDate": "Registered on",
|
|
||||||
"scheduledOpenDate": "Scheduled open",
|
|
||||||
"actions": "Actions"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"list": {
|
|
||||||
"title": "Content list",
|
|
||||||
"actions": {
|
|
||||||
"create": "Create content"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"category": {
|
|
||||||
"actions": {
|
|
||||||
"addCategory": "Add category",
|
|
||||||
"addContent": "Add content"
|
|
||||||
},
|
|
||||||
"selectedCategory": "Selected category",
|
|
||||||
"pleaseSelect": "Please select a category"
|
|
||||||
},
|
|
||||||
"series": {
|
|
||||||
"title": "Series management",
|
|
||||||
"actions": {
|
|
||||||
"create": "Create series",
|
|
||||||
"edit": "Edit"
|
|
||||||
},
|
|
||||||
"dialog": {
|
|
||||||
"createTitle": "Create series"
|
|
||||||
},
|
|
||||||
"fields": {
|
|
||||||
"coverImage": "Upload cover image",
|
|
||||||
"title": "Title",
|
|
||||||
"introduction": "Introduction",
|
|
||||||
"publishedDaysOfWeek": "Publishing days",
|
|
||||||
"random": "Random",
|
|
||||||
"genre": "Genre",
|
|
||||||
"selectGenre": "Select genre"
|
|
||||||
},
|
|
||||||
"validation": {
|
|
||||||
"coverImageRequired": "Please select a cover image.",
|
|
||||||
"titleRequired": "Please enter the series title.",
|
|
||||||
"introRequired": "Please enter the series introduction.",
|
|
||||||
"daysRequired": "Please select publishing days.",
|
|
||||||
"keywordsRequired": "Please enter keywords to describe the series.",
|
|
||||||
"genreRequired": "Please select a valid genre."
|
|
||||||
},
|
|
||||||
"days": {
|
|
||||||
"mon": "Mon",
|
|
||||||
"tue": "Tue",
|
|
||||||
"wed": "Wed",
|
|
||||||
"thu": "Thu",
|
|
||||||
"fri": "Fri",
|
|
||||||
"sat": "Sat",
|
|
||||||
"sun": "Sun"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"seriesDetail": {
|
|
||||||
"actions": {
|
|
||||||
"addContent": "Add content"
|
|
||||||
},
|
|
||||||
"fields": {
|
|
||||||
"title": "Title",
|
|
||||||
"introduction": "Introduction",
|
|
||||||
"publishedDaysOfWeek": "Publishing days",
|
|
||||||
"genre": "Genre",
|
|
||||||
"keywords": "Keywords",
|
|
||||||
"adult": "Age rating",
|
|
||||||
"completed": "Completion",
|
|
||||||
"writer": "Writer",
|
|
||||||
"studio": "Studio"
|
|
||||||
},
|
|
||||||
"adult": {
|
|
||||||
"only": "Adults only",
|
|
||||||
"all": "All ages"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"calculate": {
|
|
||||||
"common": {
|
|
||||||
"rangeSeparator": "~",
|
|
||||||
"search": "Search",
|
|
||||||
"total": "Total",
|
|
||||||
"headers": {
|
|
||||||
"creator": "Creator",
|
|
||||||
"date": "Date",
|
|
||||||
"title": "Title",
|
|
||||||
"type": "Type",
|
|
||||||
"count": "Count",
|
|
||||||
"totalCan": "Total (CAN)",
|
|
||||||
"krw": "KRW",
|
|
||||||
"fee": "Fee",
|
|
||||||
"feeWithPercent": "Fee ( {percent} )",
|
|
||||||
"settlementAmount": "Settlement amount",
|
|
||||||
"withholdingTaxWithPercent": "Withholding tax ( {percent} )",
|
|
||||||
"depositAmount": "Deposit amount"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"live": {
|
|
||||||
"title": "Live settlement",
|
|
||||||
"headers": {
|
|
||||||
"entranceCan": "Entrance CAN",
|
|
||||||
"paidParticipants": "Paid participants"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"content": {
|
|
||||||
"title": "Content settlement",
|
|
||||||
"headers": {
|
|
||||||
"saleDate": "Sale date",
|
|
||||||
"orderPriceCan": "Sale amount (CAN)",
|
|
||||||
"salesCount": "Sales count",
|
|
||||||
"registrationDate": "Registration date"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"contentDonation": {
|
|
||||||
"title": "Content donation settlement",
|
|
||||||
"headers": {
|
|
||||||
"numberOfDonation": "Donation count"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"community": {
|
|
||||||
"title": "Community settlement",
|
|
||||||
"headers": {
|
|
||||||
"contentPreview": "Content (first 10 chars)",
|
|
||||||
"orderPriceCan": "Sale amount (CAN)",
|
|
||||||
"numberOfPurchase": "Number of buyers"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"channelDonation": {
|
|
||||||
"title": "Channel donation settlement"
|
|
||||||
},
|
|
||||||
"accumulation": {
|
|
||||||
"title": "Cumulative status by content",
|
|
||||||
"headers": {
|
|
||||||
"orderPriceCan": "Sale amount (CAN)",
|
|
||||||
"numberOfPeople": "Cumulative sales count"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"login": {
|
|
||||||
"email": "Email",
|
|
||||||
"password": "Password",
|
|
||||||
"login": "Sign in",
|
|
||||||
"loginWithApple": "Sign in with Apple",
|
|
||||||
"loginWithKakao": "Sign in with Kakao"
|
|
||||||
},
|
|
||||||
"agent": {
|
|
||||||
"creators": {
|
|
||||||
"title": "Affiliated creators",
|
|
||||||
"titleWithCount": "Affiliated creators - {count}",
|
|
||||||
"headers": {
|
|
||||||
"no": "No.",
|
|
||||||
"profile": "Profile",
|
|
||||||
"nickname": "Nickname"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"calculate": {
|
|
||||||
"common": {
|
|
||||||
"startDate": "Start date",
|
|
||||||
"endDate": "End date",
|
|
||||||
"search": "Search",
|
|
||||||
"total": "Total"
|
|
||||||
},
|
|
||||||
"columns": {
|
|
||||||
"nickname": "Nickname",
|
|
||||||
"count": "Count",
|
|
||||||
"totalCan": "Total CAN",
|
|
||||||
"krw": "KRW",
|
|
||||||
"fee": "Fee",
|
|
||||||
"settlementAmount": "Settlement amount",
|
|
||||||
"tax": "Tax",
|
|
||||||
"depositAmount": "Deposit amount",
|
|
||||||
"agentSettlementAmount": "Agent settlement amount"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,314 +0,0 @@
|
|||||||
{
|
|
||||||
"common": {
|
|
||||||
"logout": "ログアウト",
|
|
||||||
"actions": {
|
|
||||||
"cancel": "キャンセル",
|
|
||||||
"confirm": "確認"
|
|
||||||
},
|
|
||||||
"confirm": {
|
|
||||||
"delete": "削除してもよろしいですか?"
|
|
||||||
},
|
|
||||||
"error": {
|
|
||||||
"unknown": "不明なエラーが発生しました。再度ログインしてください。",
|
|
||||||
"fetchFailed": "リストを読み込めませんでした。もう一度お試しください。",
|
|
||||||
"login": {
|
|
||||||
"checkInfo": "ログイン情報を確認してください。"
|
|
||||||
},
|
|
||||||
"google": {
|
|
||||||
"checkInfo": "Googleログイン情報を確認してください。"
|
|
||||||
},
|
|
||||||
"kakao": {
|
|
||||||
"checkInfo": "Kakaoログイン情報を確認してください。",
|
|
||||||
"failed": "Kakaoログインに失敗しました。",
|
|
||||||
"notInitialized": "Kakao SDKが初期化されていません。しばらくしてから再試行してください。",
|
|
||||||
"moduleLoad": "Kakao認証モジュールを読み込めませんでした。ページを再読み込みしてください。"
|
|
||||||
},
|
|
||||||
"apple": {
|
|
||||||
"checkInfo": "Appleログイン情報を確認してください。",
|
|
||||||
"failed": "Appleログインに失敗しました。",
|
|
||||||
"invalidResponse": "Appleログインの応答が正しくありません。"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"unit": {
|
|
||||||
"can": "CAN",
|
|
||||||
"person": "名",
|
|
||||||
"krw": "ウォン",
|
|
||||||
"case": "件"
|
|
||||||
},
|
|
||||||
"lang": {
|
|
||||||
"ko": "한국어",
|
|
||||||
"en": "English",
|
|
||||||
"ja": "日本語"
|
|
||||||
},
|
|
||||||
"app": {
|
|
||||||
"title": "ボイスオン クリエイター管理"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"alt": {
|
|
||||||
"kakaoLoginButton": "Kakao ログインボタン"
|
|
||||||
},
|
|
||||||
"notice": {
|
|
||||||
"loading": {
|
|
||||||
"appleSdk": "Apple SDKを読み込み中です。しばらくしてから再試行してください。",
|
|
||||||
"kakaoSdk": "Kakao SDKを読み込み中です。しばらくしてから再試行してください。"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"comp": {
|
|
||||||
"sideMenu": {
|
|
||||||
"content": {
|
|
||||||
"title": "コンテンツ管理",
|
|
||||||
"myList": "自分のコンテンツ一覧",
|
|
||||||
"category": "カテゴリ管理",
|
|
||||||
"series": "シリーズ管理"
|
|
||||||
},
|
|
||||||
"creators": "所属クリエイター",
|
|
||||||
"calc": {
|
|
||||||
"title": "精算",
|
|
||||||
"live": "クリエイター別ライブ精算",
|
|
||||||
"content": "クリエイター別コンテンツ精算",
|
|
||||||
"contentByDate": "日付別コンテンツ精算",
|
|
||||||
"contentDonation": "クリエイター別コンテンツ支援精算",
|
|
||||||
"contentDonationByDate": "日付別コンテンツ支援精算",
|
|
||||||
"contentCumulative": "コンテンツ別累積状況",
|
|
||||||
"community": "クリエイター別コミュニティ精算",
|
|
||||||
"channelDonation": "クリエイター別チャンネル支援精算"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"view": {
|
|
||||||
"signature": {
|
|
||||||
"title": "シグネチャ管理",
|
|
||||||
"actions": {
|
|
||||||
"create": "シグネチャ登録",
|
|
||||||
"edit": "編集",
|
|
||||||
"delete": "削除",
|
|
||||||
"loadImage": "画像を読み込む",
|
|
||||||
"cropDone": "クロップ完了"
|
|
||||||
},
|
|
||||||
"sort": {
|
|
||||||
"newest": "新着順",
|
|
||||||
"canHigh": "CAN高い順",
|
|
||||||
"canLow": "CAN低い順"
|
|
||||||
},
|
|
||||||
"dialog": {
|
|
||||||
"createTitle": "シグネチャCAN登録",
|
|
||||||
"cropTitle": "画像クロップ"
|
|
||||||
},
|
|
||||||
"fields": {
|
|
||||||
"can": "CAN",
|
|
||||||
"adult": "成人向け",
|
|
||||||
"image": "画像",
|
|
||||||
"timeSec": "時間(秒)"
|
|
||||||
},
|
|
||||||
"headers": {
|
|
||||||
"can": "CAN",
|
|
||||||
"adult": "成人向け",
|
|
||||||
"image": "画像",
|
|
||||||
"timeSec": "時間(秒)",
|
|
||||||
"actions": "管理"
|
|
||||||
},
|
|
||||||
"validation": {
|
|
||||||
"fillRequired": "内容を入力してください",
|
|
||||||
"timeRange": "時間は3秒以上20秒以下で入力してください。"
|
|
||||||
},
|
|
||||||
"messages": {
|
|
||||||
"created": "登録しました。",
|
|
||||||
"updated": "更新しました。",
|
|
||||||
"deleted": "削除しました。",
|
|
||||||
"noChanges": "変更はありません。"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"content": {
|
|
||||||
"common": {
|
|
||||||
"free": "無料",
|
|
||||||
"actions": {
|
|
||||||
"delete": "削除"
|
|
||||||
},
|
|
||||||
"headers": {
|
|
||||||
"thumbnail": "サムネイル",
|
|
||||||
"title": "タイトル",
|
|
||||||
"detail": "内容",
|
|
||||||
"creator": "クリエイター",
|
|
||||||
"theme": "テーマ",
|
|
||||||
"tags": "タグ",
|
|
||||||
"price": "価格",
|
|
||||||
"limited": "限定",
|
|
||||||
"adult": "成人向け",
|
|
||||||
"time": "時間",
|
|
||||||
"listen": "視聴",
|
|
||||||
"registrationDate": "登録日",
|
|
||||||
"scheduledOpenDate": "公開予定日",
|
|
||||||
"actions": "管理"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"list": {
|
|
||||||
"title": "コンテンツ一覧",
|
|
||||||
"actions": {
|
|
||||||
"create": "コンテンツ登録"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"category": {
|
|
||||||
"actions": {
|
|
||||||
"addCategory": "カテゴリー追加",
|
|
||||||
"addContent": "コンテンツ追加"
|
|
||||||
},
|
|
||||||
"selectedCategory": "選択したカテゴリー",
|
|
||||||
"pleaseSelect": "カテゴリーを選択してください"
|
|
||||||
},
|
|
||||||
"series": {
|
|
||||||
"title": "シリーズ管理",
|
|
||||||
"actions": {
|
|
||||||
"create": "シリーズ登録",
|
|
||||||
"edit": "編集"
|
|
||||||
},
|
|
||||||
"dialog": {
|
|
||||||
"createTitle": "シリーズ登録"
|
|
||||||
},
|
|
||||||
"fields": {
|
|
||||||
"coverImage": "カバー画像登録",
|
|
||||||
"title": "タイトル",
|
|
||||||
"introduction": "紹介",
|
|
||||||
"publishedDaysOfWeek": "連載曜日",
|
|
||||||
"random": "ランダム",
|
|
||||||
"genre": "ジャンル",
|
|
||||||
"selectGenre": "ジャンル選択"
|
|
||||||
},
|
|
||||||
"validation": {
|
|
||||||
"coverImageRequired": "カバー画像を選択してください",
|
|
||||||
"titleRequired": "シリーズのタイトルを入力してください",
|
|
||||||
"introRequired": "シリーズの紹介文を入力してください",
|
|
||||||
"daysRequired": "連載曜日を選択してください",
|
|
||||||
"keywordsRequired": "シリーズを説明するキーワードを入力してください",
|
|
||||||
"genreRequired": "正しいジャンルを選択してください"
|
|
||||||
},
|
|
||||||
"days": {
|
|
||||||
"mon": "月",
|
|
||||||
"tue": "火",
|
|
||||||
"wed": "水",
|
|
||||||
"thu": "木",
|
|
||||||
"fri": "金",
|
|
||||||
"sat": "土",
|
|
||||||
"sun": "日"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"seriesDetail": {
|
|
||||||
"actions": {
|
|
||||||
"addContent": "コンテンツ追加"
|
|
||||||
},
|
|
||||||
"fields": {
|
|
||||||
"title": "タイトル",
|
|
||||||
"introduction": "紹介",
|
|
||||||
"publishedDaysOfWeek": "連載曜日",
|
|
||||||
"genre": "ジャンル",
|
|
||||||
"keywords": "キーワード",
|
|
||||||
"adult": "年齢制限",
|
|
||||||
"completed": "完結状況",
|
|
||||||
"writer": "作家",
|
|
||||||
"studio": "制作会社"
|
|
||||||
},
|
|
||||||
"adult": {
|
|
||||||
"only": "19歳以上",
|
|
||||||
"all": "全年齢対象"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"calculate": {
|
|
||||||
"common": {
|
|
||||||
"rangeSeparator": "~",
|
|
||||||
"search": "検索",
|
|
||||||
"total": "合計",
|
|
||||||
"headers": {
|
|
||||||
"creator": "クリエイター",
|
|
||||||
"date": "日付",
|
|
||||||
"title": "タイトル",
|
|
||||||
"type": "区分",
|
|
||||||
"count": "件数",
|
|
||||||
"totalCan": "合計(CAN)",
|
|
||||||
"krw": "ウォン",
|
|
||||||
"fee": "手数料",
|
|
||||||
"feeWithPercent": "手数料( {percent} )",
|
|
||||||
"settlementAmount": "精算金額",
|
|
||||||
"withholdingTaxWithPercent": "源泉徴収( {percent} )",
|
|
||||||
"depositAmount": "入金額"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"live": {
|
|
||||||
"title": "ライブ精算",
|
|
||||||
"headers": {
|
|
||||||
"entranceCan": "入場CAN",
|
|
||||||
"paidParticipants": "有料部屋参加人数"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"content": {
|
|
||||||
"title": "コンテンツ精算",
|
|
||||||
"headers": {
|
|
||||||
"saleDate": "販売日",
|
|
||||||
"orderPriceCan": "販売金額(CAN)",
|
|
||||||
"salesCount": "販売数",
|
|
||||||
"registrationDate": "登録日"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"contentDonation": {
|
|
||||||
"title": "コンテンツ支援精算",
|
|
||||||
"headers": {
|
|
||||||
"numberOfDonation": "支援数"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"community": {
|
|
||||||
"title": "コミュニティ精算",
|
|
||||||
"headers": {
|
|
||||||
"contentPreview": "内容(先頭10文字)",
|
|
||||||
"orderPriceCan": "販売金額(CAN)",
|
|
||||||
"numberOfPurchase": "購入ユーザー数"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"channelDonation": {
|
|
||||||
"title": "チャンネル支援精算"
|
|
||||||
},
|
|
||||||
"accumulation": {
|
|
||||||
"title": "コンテンツ別累計状況",
|
|
||||||
"headers": {
|
|
||||||
"orderPriceCan": "販売金額(CAN)",
|
|
||||||
"numberOfPeople": "累計販売数"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"login": {
|
|
||||||
"email": "メール",
|
|
||||||
"password": "パスワード",
|
|
||||||
"login": "ログイン",
|
|
||||||
"loginWithApple": "Appleでログイン",
|
|
||||||
"loginWithKakao": "Kakaoでログイン"
|
|
||||||
},
|
|
||||||
"agent": {
|
|
||||||
"creators": {
|
|
||||||
"title": "所属クリエイター",
|
|
||||||
"titleWithCount": "所属クリエイター - {count}名",
|
|
||||||
"headers": {
|
|
||||||
"no": "番号",
|
|
||||||
"profile": "プロフィール",
|
|
||||||
"nickname": "ニックネーム"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"calculate": {
|
|
||||||
"common": {
|
|
||||||
"startDate": "開始日",
|
|
||||||
"endDate": "終了日",
|
|
||||||
"search": "検索",
|
|
||||||
"total": "合計"
|
|
||||||
},
|
|
||||||
"columns": {
|
|
||||||
"nickname": "ニックネーム",
|
|
||||||
"count": "件数",
|
|
||||||
"totalCan": "合計 CAN",
|
|
||||||
"krw": "ウォン",
|
|
||||||
"fee": "手数料",
|
|
||||||
"settlementAmount": "精算金額",
|
|
||||||
"tax": "税金",
|
|
||||||
"depositAmount": "入金額",
|
|
||||||
"agentSettlementAmount": "エージェント精算金額"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,314 +0,0 @@
|
|||||||
{
|
|
||||||
"common": {
|
|
||||||
"logout": "로그아웃",
|
|
||||||
"actions": {
|
|
||||||
"cancel": "취소",
|
|
||||||
"confirm": "확인"
|
|
||||||
},
|
|
||||||
"confirm": {
|
|
||||||
"delete": "삭제하시겠습니까?"
|
|
||||||
},
|
|
||||||
"error": {
|
|
||||||
"unknown": "알 수 없는 오류가 발생했습니다. 다시 로그인 해주세요!",
|
|
||||||
"fetchFailed": "목록을 불러오지 못했습니다. 다시 시도해 주세요.",
|
|
||||||
"login": {
|
|
||||||
"checkInfo": "로그인 정보를 확인해주세요."
|
|
||||||
},
|
|
||||||
"google": {
|
|
||||||
"checkInfo": "구글 로그인 정보를 확인해주세요."
|
|
||||||
},
|
|
||||||
"kakao": {
|
|
||||||
"checkInfo": "카카오 로그인 정보를 확인해주세요.",
|
|
||||||
"failed": "카카오 로그인에 실패했습니다.",
|
|
||||||
"notInitialized": "카카오 SDK가 초기화되지 않았습니다. 잠시 후 다시 시도해주세요.",
|
|
||||||
"moduleLoad": "카카오 인증 모듈을 불러오지 못했습니다. 페이지를 새로고침 해주세요."
|
|
||||||
},
|
|
||||||
"apple": {
|
|
||||||
"checkInfo": "애플 로그인 정보를 확인해주세요.",
|
|
||||||
"failed": "애플 로그인에 실패했습니다.",
|
|
||||||
"invalidResponse": "애플 로그인 응답이 올바르지 않습니다."
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"unit": {
|
|
||||||
"can": "캔",
|
|
||||||
"person": "명",
|
|
||||||
"krw": "원",
|
|
||||||
"case": "건"
|
|
||||||
},
|
|
||||||
"lang": {
|
|
||||||
"ko": "한국어",
|
|
||||||
"en": "English",
|
|
||||||
"ja": "日本語"
|
|
||||||
},
|
|
||||||
"app": {
|
|
||||||
"title": "보이스온 크리에이터 관리자"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"alt": {
|
|
||||||
"kakaoLoginButton": "카카오 로그인 버튼"
|
|
||||||
},
|
|
||||||
"notice": {
|
|
||||||
"loading": {
|
|
||||||
"appleSdk": "애플 SDK를 불러오는 중입니다. 잠시 후 다시 시도해주세요.",
|
|
||||||
"kakaoSdk": "카카오 SDK를 불러오는 중입니다. 잠시 후 다시 시도해주세요."
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"comp": {
|
|
||||||
"sideMenu": {
|
|
||||||
"content": {
|
|
||||||
"title": "콘텐츠 관리",
|
|
||||||
"myList": "내 콘텐츠 리스트",
|
|
||||||
"category": "카테고리 관리",
|
|
||||||
"series": "시리즈 관리"
|
|
||||||
},
|
|
||||||
"creators": "소속 크리에이터",
|
|
||||||
"calc": {
|
|
||||||
"title": "정산",
|
|
||||||
"live": "크리에이터별 라이브 정산",
|
|
||||||
"content": "크리에이터별 콘텐츠 정산",
|
|
||||||
"contentByDate": "일자별 콘텐츠 정산",
|
|
||||||
"contentDonation": "크리에이터별 콘텐츠 후원 정산",
|
|
||||||
"contentDonationByDate": "일자별 콘텐츠 후원 정산",
|
|
||||||
"contentCumulative": "콘텐츠별 누적 현황",
|
|
||||||
"community": "크리에이터별 커뮤니티 정산",
|
|
||||||
"channelDonation": "크리에이터별 채널 후원 정산"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"view": {
|
|
||||||
"signature": {
|
|
||||||
"title": "시그니처 관리",
|
|
||||||
"actions": {
|
|
||||||
"create": "시그니처 등록",
|
|
||||||
"edit": "수정",
|
|
||||||
"delete": "삭제",
|
|
||||||
"loadImage": "이미지 불러오기",
|
|
||||||
"cropDone": "크롭 완료"
|
|
||||||
},
|
|
||||||
"sort": {
|
|
||||||
"newest": "최신순",
|
|
||||||
"canHigh": "높은캔순",
|
|
||||||
"canLow": "낮은캔순"
|
|
||||||
},
|
|
||||||
"dialog": {
|
|
||||||
"createTitle": "시그니처 캔 등록",
|
|
||||||
"cropTitle": "이미지 크롭"
|
|
||||||
},
|
|
||||||
"fields": {
|
|
||||||
"can": "캔",
|
|
||||||
"adult": "19금",
|
|
||||||
"image": "이미지",
|
|
||||||
"timeSec": "시간(초)"
|
|
||||||
},
|
|
||||||
"headers": {
|
|
||||||
"can": "캔",
|
|
||||||
"adult": "19금",
|
|
||||||
"image": "이미지",
|
|
||||||
"timeSec": "시간(초)",
|
|
||||||
"actions": "관리"
|
|
||||||
},
|
|
||||||
"validation": {
|
|
||||||
"fillRequired": "내용을 입력하세요",
|
|
||||||
"timeRange": "시간은 3초 이상 20초 이하를 입력하세요."
|
|
||||||
},
|
|
||||||
"messages": {
|
|
||||||
"created": "등록되었습니다.",
|
|
||||||
"updated": "수정되었습니다.",
|
|
||||||
"deleted": "삭제되었습니다.",
|
|
||||||
"noChanges": "변경사항이 없습니다."
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"content": {
|
|
||||||
"common": {
|
|
||||||
"free": "무료",
|
|
||||||
"actions": {
|
|
||||||
"delete": "삭제"
|
|
||||||
},
|
|
||||||
"headers": {
|
|
||||||
"thumbnail": "썸네일",
|
|
||||||
"title": "제목",
|
|
||||||
"detail": "내용",
|
|
||||||
"creator": "크리에이터",
|
|
||||||
"theme": "테마",
|
|
||||||
"tags": "태그",
|
|
||||||
"price": "가격",
|
|
||||||
"limited": "한정판",
|
|
||||||
"adult": "19금",
|
|
||||||
"time": "시간",
|
|
||||||
"listen": "듣기",
|
|
||||||
"registrationDate": "등록일",
|
|
||||||
"scheduledOpenDate": "오픈 예정일",
|
|
||||||
"actions": "관리"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"list": {
|
|
||||||
"title": "콘텐츠 리스트",
|
|
||||||
"actions": {
|
|
||||||
"create": "콘텐츠 등록"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"category": {
|
|
||||||
"actions": {
|
|
||||||
"addCategory": "카테고리 추가",
|
|
||||||
"addContent": "콘텐츠 추가"
|
|
||||||
},
|
|
||||||
"selectedCategory": "선택된 카테고리",
|
|
||||||
"pleaseSelect": "카테고리를 선택해 주세요"
|
|
||||||
},
|
|
||||||
"series": {
|
|
||||||
"title": "시리즈 관리",
|
|
||||||
"actions": {
|
|
||||||
"create": "시리즈 등록",
|
|
||||||
"edit": "수정"
|
|
||||||
},
|
|
||||||
"dialog": {
|
|
||||||
"createTitle": "시리즈 등록"
|
|
||||||
},
|
|
||||||
"fields": {
|
|
||||||
"coverImage": "커버 이미지 등록",
|
|
||||||
"title": "제목",
|
|
||||||
"introduction": "소개",
|
|
||||||
"publishedDaysOfWeek": "연재요일",
|
|
||||||
"random": "랜덤",
|
|
||||||
"genre": "장르",
|
|
||||||
"selectGenre": "장르 선택"
|
|
||||||
},
|
|
||||||
"validation": {
|
|
||||||
"coverImageRequired": "커버 이미지를 선택하세요",
|
|
||||||
"titleRequired": "시리즈 제목을 입력하세요",
|
|
||||||
"introRequired": "시리즈 소개를 입력하세요",
|
|
||||||
"daysRequired": "시리즈 연재요일을 선택하세요",
|
|
||||||
"keywordsRequired": "시리즈를 설명할 수 있는 키워드를 입력하세요",
|
|
||||||
"genreRequired": "올바른 장르를 선택하세요"
|
|
||||||
},
|
|
||||||
"days": {
|
|
||||||
"mon": "월",
|
|
||||||
"tue": "화",
|
|
||||||
"wed": "수",
|
|
||||||
"thu": "목",
|
|
||||||
"fri": "금",
|
|
||||||
"sat": "토",
|
|
||||||
"sun": "일"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"seriesDetail": {
|
|
||||||
"actions": {
|
|
||||||
"addContent": "콘텐츠 추가"
|
|
||||||
},
|
|
||||||
"fields": {
|
|
||||||
"title": "제목",
|
|
||||||
"introduction": "소개",
|
|
||||||
"publishedDaysOfWeek": "연재요일",
|
|
||||||
"genre": "장르",
|
|
||||||
"keywords": "키워드",
|
|
||||||
"adult": "연령제한",
|
|
||||||
"completed": "완결여부",
|
|
||||||
"writer": "작가",
|
|
||||||
"studio": "제작사"
|
|
||||||
},
|
|
||||||
"adult": {
|
|
||||||
"only": "19세이상",
|
|
||||||
"all": "전체이용가"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"calculate": {
|
|
||||||
"common": {
|
|
||||||
"rangeSeparator": "~",
|
|
||||||
"search": "조회",
|
|
||||||
"total": "합계",
|
|
||||||
"headers": {
|
|
||||||
"creator": "크리에이터",
|
|
||||||
"date": "날짜",
|
|
||||||
"title": "제목",
|
|
||||||
"type": "구분",
|
|
||||||
"count": "건수",
|
|
||||||
"totalCan": "합계(캔)",
|
|
||||||
"krw": "원화",
|
|
||||||
"fee": "수수료",
|
|
||||||
"feeWithPercent": "수수료( {percent} )",
|
|
||||||
"settlementAmount": "정산금액",
|
|
||||||
"withholdingTaxWithPercent": "원천세( {percent} )",
|
|
||||||
"depositAmount": "입금액"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"live": {
|
|
||||||
"title": "라이브 정산",
|
|
||||||
"headers": {
|
|
||||||
"entranceCan": "입장캔",
|
|
||||||
"paidParticipants": "유료방참여인원"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"content": {
|
|
||||||
"title": "콘텐츠 정산",
|
|
||||||
"headers": {
|
|
||||||
"saleDate": "판매일",
|
|
||||||
"orderPriceCan": "판매금액(캔)",
|
|
||||||
"salesCount": "판매수",
|
|
||||||
"registrationDate": "등록일"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"contentDonation": {
|
|
||||||
"title": "콘텐츠 후원 정산",
|
|
||||||
"headers": {
|
|
||||||
"numberOfDonation": "후원수"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"community": {
|
|
||||||
"title": "커뮤니티 정산",
|
|
||||||
"headers": {
|
|
||||||
"contentPreview": "내용(앞 10글자)",
|
|
||||||
"orderPriceCan": "판매금액(캔)",
|
|
||||||
"numberOfPurchase": "구매유저수"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"channelDonation": {
|
|
||||||
"title": "채널 후원 정산"
|
|
||||||
},
|
|
||||||
"accumulation": {
|
|
||||||
"title": "콘텐츠별 누적 현황",
|
|
||||||
"headers": {
|
|
||||||
"orderPriceCan": "판매금액(캔)",
|
|
||||||
"numberOfPeople": "누적 판매수"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"login": {
|
|
||||||
"email": "이메일",
|
|
||||||
"password": "비밀번호",
|
|
||||||
"login": "로그인",
|
|
||||||
"loginWithApple": "Apple로 로그인",
|
|
||||||
"loginWithKakao": "카카오로 로그인"
|
|
||||||
},
|
|
||||||
"agent": {
|
|
||||||
"creators": {
|
|
||||||
"title": "소속 크리에이터",
|
|
||||||
"titleWithCount": "소속 크리에이터 - {count}명",
|
|
||||||
"headers": {
|
|
||||||
"no": "순번",
|
|
||||||
"profile": "프로필",
|
|
||||||
"nickname": "닉네임"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"calculate": {
|
|
||||||
"common": {
|
|
||||||
"startDate": "시작일",
|
|
||||||
"endDate": "종료일",
|
|
||||||
"search": "조회",
|
|
||||||
"total": "합계"
|
|
||||||
},
|
|
||||||
"columns": {
|
|
||||||
"nickname": "닉네임",
|
|
||||||
"count": "건수",
|
|
||||||
"totalCan": "총 CAN",
|
|
||||||
"krw": "원화",
|
|
||||||
"fee": "수수료",
|
|
||||||
"settlementAmount": "정산금액",
|
|
||||||
"tax": "세금",
|
|
||||||
"depositAmount": "입금액",
|
|
||||||
"agentSettlementAmount": "에이전트 정산금액"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
36
src/main.js
36
src/main.js
@@ -2,7 +2,6 @@ import Vue from 'vue'
|
|||||||
import './plugins/axios'
|
import './plugins/axios'
|
||||||
import App from './App.vue'
|
import App from './App.vue'
|
||||||
import vuetify from './plugins/vuetify'
|
import vuetify from './plugins/vuetify'
|
||||||
import i18n from './i18n'
|
|
||||||
import router from './router'
|
import router from './router'
|
||||||
import store from './store'
|
import store from './store'
|
||||||
|
|
||||||
@@ -16,42 +15,7 @@ Vue.use(VuetifyDialog, {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
// 초기 진입 시 index.html의 하드코딩 타이틀을 i18n의 common.app.title로 교체
|
|
||||||
try {
|
|
||||||
const appTitle = i18n && typeof i18n.t === 'function' ? i18n.t('common.app.title') : 'Soda Admin'
|
|
||||||
if (appTitle) document.title = `${appTitle}`
|
|
||||||
} catch (e) {
|
|
||||||
// ignore
|
|
||||||
}
|
|
||||||
|
|
||||||
// Vuetify 언어와 vue-i18n 로케일 동기화
|
|
||||||
try {
|
|
||||||
vuetify.framework.lang.current = i18n.locale
|
|
||||||
if (i18n.vm && i18n.vm.$watch) {
|
|
||||||
i18n.vm.$watch('locale', (val) => {
|
|
||||||
vuetify.framework.lang.current = val
|
|
||||||
try { localStorage.setItem('locale', val) } catch (e) { /* ignore */ }
|
|
||||||
|
|
||||||
// 언어 변경 시 현재 라우트 기준으로 문서 타이틀 재계산
|
|
||||||
try {
|
|
||||||
const to = router.currentRoute
|
|
||||||
const matched = (to && to.matched) ? to.matched : []
|
|
||||||
const deepest = matched.length ? matched[matched.length - 1] : to
|
|
||||||
const key = deepest && deepest.meta && deepest.meta.titleKey
|
|
||||||
const appTitle = i18n && typeof i18n.t === 'function' ? i18n.t('common.app.title') : 'Soda Admin'
|
|
||||||
const localized = key ? i18n.t(key) : ''
|
|
||||||
document.title = key ? `${localized} - ${appTitle}` : `${appTitle}`
|
|
||||||
} catch (e) {
|
|
||||||
// ignore
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
// ignore
|
|
||||||
}
|
|
||||||
|
|
||||||
new Vue({
|
new Vue({
|
||||||
i18n,
|
|
||||||
vuetify,
|
vuetify,
|
||||||
router,
|
router,
|
||||||
store,
|
store,
|
||||||
|
|||||||
@@ -1,28 +1,7 @@
|
|||||||
import Vue from 'vue'
|
import Vue from 'vue';
|
||||||
import Vuetify from 'vuetify/lib/framework'
|
import Vuetify from 'vuetify/lib/framework';
|
||||||
import en from 'vuetify/lib/locale/en'
|
|
||||||
import ko from 'vuetify/lib/locale/ko'
|
|
||||||
import ja from 'vuetify/lib/locale/ja'
|
|
||||||
|
|
||||||
Vue.use(Vuetify)
|
Vue.use(Vuetify);
|
||||||
|
|
||||||
function detectVuetifyLocale() {
|
|
||||||
try {
|
|
||||||
const saved = localStorage.getItem('locale')
|
|
||||||
if (saved) return saved
|
|
||||||
} catch (e) {
|
|
||||||
// ignore
|
|
||||||
}
|
|
||||||
const l = (navigator.languages && navigator.languages[0]) || navigator.language || 'en'
|
|
||||||
const low = String(l).toLowerCase()
|
|
||||||
if (low.startsWith('ko')) return 'ko'
|
|
||||||
if (low.startsWith('ja')) return 'ja'
|
|
||||||
return 'en'
|
|
||||||
}
|
|
||||||
|
|
||||||
export default new Vuetify({
|
export default new Vuetify({
|
||||||
lang: {
|
});
|
||||||
locales: { en, ko, ja },
|
|
||||||
current: detectVuetifyLocale()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|||||||
@@ -1,7 +1,6 @@
|
|||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
import VueRouter from 'vue-router'
|
import VueRouter from 'vue-router'
|
||||||
import store from '@/store';
|
import store from '@/store';
|
||||||
import i18n from '@/i18n'
|
|
||||||
|
|
||||||
import DefaultLayout from '@/layouts/default'
|
import DefaultLayout from '@/layouts/default'
|
||||||
|
|
||||||
@@ -21,37 +20,6 @@ const routes = [
|
|||||||
name: 'ContentList',
|
name: 'ContentList',
|
||||||
component: () => import(/* webpackChunkName: "content" */ '../views/Content/ContentList.vue')
|
component: () => import(/* webpackChunkName: "content" */ '../views/Content/ContentList.vue')
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: '/agent/creators',
|
|
||||||
name: 'AgentCreators',
|
|
||||||
component: () => import(/* webpackChunkName: "agent" */ '../views/Agent/Creators.vue')
|
|
||||||
},
|
|
||||||
// Agent-only calculate routes (placeholders)
|
|
||||||
{
|
|
||||||
path: '/agent/calculate/live',
|
|
||||||
name: 'AgentCalculateLive',
|
|
||||||
component: () => import(/* webpackChunkName: "agent-calc" */ '../views/Agent/Calculate/AgentCalculateLive.vue')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/agent/calculate/content-by-date',
|
|
||||||
name: 'AgentCalculateContent',
|
|
||||||
component: () => import(/* webpackChunkName: "agent-calc" */ '../views/Agent/Calculate/AgentCalculateContent.vue')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/agent/calculate/content-donation-by-date',
|
|
||||||
name: 'AgentCalculateContentDonation',
|
|
||||||
component: () => import(/* webpackChunkName: "agent-calc" */ '../views/Agent/Calculate/AgentCalculateContentDonation.vue')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/agent/calculate/community-post',
|
|
||||||
name: 'AgentCalculateCommunityPost',
|
|
||||||
component: () => import(/* webpackChunkName: "agent-calc" */ '../views/Agent/Calculate/AgentCalculateCommunityPost.vue')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/agent/calculate/channel-donation',
|
|
||||||
name: 'AgentCalculateChannelDonation',
|
|
||||||
component: () => import(/* webpackChunkName: "agent-calc" */ '../views/Agent/Calculate/AgentCalculateChannelDonation.vue')
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: '/content/category/list',
|
path: '/content/category/list',
|
||||||
name: 'ContentCategoryList',
|
name: 'ContentCategoryList',
|
||||||
@@ -92,16 +60,10 @@ const routes = [
|
|||||||
name: 'CalculateCommunityPost',
|
name: 'CalculateCommunityPost',
|
||||||
component: () => import(/* webpackChunkName: "calculate" */ '../views/Calculate/CalculateCommunityPost.vue')
|
component: () => import(/* webpackChunkName: "calculate" */ '../views/Calculate/CalculateCommunityPost.vue')
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: '/calculate/channel-donation',
|
|
||||||
name: 'CalculateChannelDonation',
|
|
||||||
component: () => import(/* webpackChunkName: "calculate" */ '../views/Calculate/CalculateChannelDonation.vue')
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: '/signature',
|
path: '/signature',
|
||||||
name: 'SignatureManagement',
|
name: 'SignatureManagement',
|
||||||
component: () => import(/* webpackChunkName: "signature" */ '../views/Signature/SignatureManagement.vue'),
|
component: () => import(/* webpackChunkName: "signature" */ '../views/Signature/SignatureManagement.vue')
|
||||||
meta: { titleKey: 'view.signature.title' }
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
@@ -137,19 +99,4 @@ router.beforeEach((to, from, next) => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
// 라우트 변경 시 문서 타이틀을 i18n으로 갱신
|
|
||||||
router.afterEach((to) => {
|
|
||||||
try {
|
|
||||||
// 가장 깊은 매칭 라우트에서 titleKey 탐색
|
|
||||||
const matched = (to && to.matched) ? to.matched : []
|
|
||||||
const deepest = matched.length ? matched[matched.length - 1] : to
|
|
||||||
const key = deepest && deepest.meta && deepest.meta.titleKey
|
|
||||||
const appTitle = i18n && typeof i18n.t === 'function' ? i18n.t('common.app.title') : 'Soda Admin'
|
|
||||||
const localized = key ? i18n.t(key) : ''
|
|
||||||
document.title = key ? `${localized} - ${appTitle}` : `${appTitle}`
|
|
||||||
} catch (e) {
|
|
||||||
// ignore
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
export default router
|
export default router
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
import * as memberApi from '@/api/member'
|
import * as memberApi from '@/api/member'
|
||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
import i18n from '@/i18n'
|
|
||||||
|
|
||||||
const enhanceAccessToken = () => {
|
const enhanceAccessToken = () => {
|
||||||
const {accessToken} = localStorage
|
const {accessToken} = localStorage
|
||||||
@@ -76,82 +75,7 @@ const accountStore = {
|
|||||||
errorMessage = res.data.message
|
errorMessage = res.data.message
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
errorMessage = i18n.t('common.error.login.checkInfo')
|
errorMessage = '로그인 정보를 확인해주세요.'
|
||||||
}
|
|
||||||
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
if (result) {
|
|
||||||
resolve();
|
|
||||||
} else {
|
|
||||||
reject(errorMessage)
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
async LOGIN_GOOGLE({commit}, {idToken}) {
|
|
||||||
let result = false
|
|
||||||
let errorMessage = null
|
|
||||||
|
|
||||||
try {
|
|
||||||
let res = await memberApi.loginGoogle(idToken)
|
|
||||||
if (res.data.success === true) {
|
|
||||||
commit("LOGIN", res.data.data)
|
|
||||||
result = true
|
|
||||||
} else {
|
|
||||||
errorMessage = res.data.message
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
errorMessage = i18n.t('common.error.google.checkInfo')
|
|
||||||
}
|
|
||||||
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
if (result) {
|
|
||||||
resolve();
|
|
||||||
} else {
|
|
||||||
reject(errorMessage)
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
async LOGIN_KAKAO({commit}, {accessToken}) {
|
|
||||||
let result = false
|
|
||||||
let errorMessage = null
|
|
||||||
|
|
||||||
try {
|
|
||||||
let res = await memberApi.loginKakao(accessToken)
|
|
||||||
if (res.data.success === true) {
|
|
||||||
commit("LOGIN", res.data.data)
|
|
||||||
result = true
|
|
||||||
} else {
|
|
||||||
errorMessage = res.data.message
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
errorMessage = i18n.t('common.error.kakao.checkInfo')
|
|
||||||
}
|
|
||||||
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
if (result) {
|
|
||||||
resolve();
|
|
||||||
} else {
|
|
||||||
reject(errorMessage)
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
async LOGIN_APPLE({commit}, payload) {
|
|
||||||
let result = false
|
|
||||||
let errorMessage = null
|
|
||||||
|
|
||||||
try {
|
|
||||||
let res = await memberApi.loginApple(payload)
|
|
||||||
if (res.data.success === true) {
|
|
||||||
commit("LOGIN", res.data.data)
|
|
||||||
result = true
|
|
||||||
} else {
|
|
||||||
errorMessage = res.data.message
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
errorMessage = i18n.t('common.error.apple.checkInfo')
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
@@ -177,7 +101,7 @@ const accountStore = {
|
|||||||
errorMessage = res.data.message
|
errorMessage = res.data.message
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
errorMessage = i18n.t('common.error.login.checkInfo')
|
errorMessage = '로그인 정보를 확인해주세요.'
|
||||||
}
|
}
|
||||||
|
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
|
|||||||
@@ -1,35 +0,0 @@
|
|||||||
import { titleKoToKey } from '@/i18n/menuTitleMap'
|
|
||||||
|
|
||||||
export function normKo(s) {
|
|
||||||
if (!s || typeof s !== 'string') return s
|
|
||||||
try {
|
|
||||||
return s
|
|
||||||
.normalize('NFC')
|
|
||||||
.replace(/\s+/g, ' ')
|
|
||||||
.trim()
|
|
||||||
} catch (e) {
|
|
||||||
// 일부 환경에서 normalize 미지원 시 안전하게 진행
|
|
||||||
return String(s).replace(/\s+/g, ' ').trim()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function attachTitleKeyByKo(items) {
|
|
||||||
if (!Array.isArray(items)) return items
|
|
||||||
return items.map(item => {
|
|
||||||
const next = { ...item }
|
|
||||||
const title = normKo(item && item.title)
|
|
||||||
const key = title ? titleKoToKey[title] : undefined
|
|
||||||
if (key) {
|
|
||||||
next.titleKey = key
|
|
||||||
} else if (process && process.env && process.env.NODE_ENV !== 'production') {
|
|
||||||
// 개발 환경에서만 경고 로그
|
|
||||||
// eslint-disable-next-line no-console
|
|
||||||
console.warn('[menu-i18n] missing map for title:', item && item.title)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (Array.isArray(item && item.items) && item.items.length > 0) {
|
|
||||||
next.items = attachTitleKeyByKo(item.items)
|
|
||||||
}
|
|
||||||
return next
|
|
||||||
})
|
|
||||||
}
|
|
||||||
@@ -1,248 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<v-toolbar dark>
|
|
||||||
<v-spacer />
|
|
||||||
<v-toolbar-title>{{ $t('comp.sideMenu.calc.channelDonation') }}</v-toolbar-title>
|
|
||||||
<v-spacer />
|
|
||||||
</v-toolbar>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<v-container>
|
|
||||||
<!-- 필터 영역 -->
|
|
||||||
<v-row
|
|
||||||
class="mt-2 mb-2"
|
|
||||||
align="center"
|
|
||||||
justify="end"
|
|
||||||
>
|
|
||||||
<v-col
|
|
||||||
cols="12"
|
|
||||||
md="3"
|
|
||||||
>
|
|
||||||
<v-menu
|
|
||||||
v-model="menuStart"
|
|
||||||
:close-on-content-click="false"
|
|
||||||
transition="scale-transition"
|
|
||||||
offset-y
|
|
||||||
min-width="auto"
|
|
||||||
>
|
|
||||||
<template v-slot:activator="{ on, attrs }">
|
|
||||||
<v-text-field
|
|
||||||
v-bind="attrs"
|
|
||||||
:label="$t('view.agent.calculate.common.startDate')"
|
|
||||||
readonly
|
|
||||||
dense
|
|
||||||
:value="start_date"
|
|
||||||
v-on="on"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
<v-date-picker
|
|
||||||
v-model="start_date"
|
|
||||||
scrollable
|
|
||||||
@input="menuStart = false"
|
|
||||||
/>
|
|
||||||
</v-menu>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col
|
|
||||||
cols="12"
|
|
||||||
md="3"
|
|
||||||
>
|
|
||||||
<v-menu
|
|
||||||
v-model="menuEnd"
|
|
||||||
:close-on-content-click="false"
|
|
||||||
transition="scale-transition"
|
|
||||||
offset-y
|
|
||||||
min-width="auto"
|
|
||||||
>
|
|
||||||
<template v-slot:activator="{ on, attrs }">
|
|
||||||
<v-text-field
|
|
||||||
v-bind="attrs"
|
|
||||||
:label="$t('view.agent.calculate.common.endDate')"
|
|
||||||
readonly
|
|
||||||
dense
|
|
||||||
:value="end_date"
|
|
||||||
v-on="on"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
<v-date-picker
|
|
||||||
v-model="end_date"
|
|
||||||
scrollable
|
|
||||||
@input="menuEnd = false"
|
|
||||||
/>
|
|
||||||
</v-menu>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col
|
|
||||||
cols="12"
|
|
||||||
md="2"
|
|
||||||
>
|
|
||||||
<v-btn
|
|
||||||
color="#3bb9f1"
|
|
||||||
:loading="is_loading"
|
|
||||||
@click="fetchItems"
|
|
||||||
>
|
|
||||||
{{ $t('view.agent.calculate.common.search') }}
|
|
||||||
</v-btn>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
|
|
||||||
<v-row>
|
|
||||||
<v-col>
|
|
||||||
<v-data-table
|
|
||||||
:headers="headers"
|
|
||||||
:items="items"
|
|
||||||
:loading="is_loading"
|
|
||||||
:items-per-page="-1"
|
|
||||||
class="elevation-1"
|
|
||||||
hide-default-footer
|
|
||||||
>
|
|
||||||
<template slot="body.prepend">
|
|
||||||
<tr>
|
|
||||||
<td>{{ $t('view.agent.calculate.common.total') }}</td>
|
|
||||||
<td>{{ $n(total.count || 0, 'decimal') }}</td>
|
|
||||||
<td>{{ $n(total.totalCan || 0, 'decimal') }} {{ $t('common.unit.can') }}</td>
|
|
||||||
<td>{{ $n(total.krw || 0, 'currency') }}</td>
|
|
||||||
<td>{{ $n(total.fee || 0, 'currency') }}</td>
|
|
||||||
<td>{{ $n(total.settlementAmount || 0, 'currency') }}</td>
|
|
||||||
<td>{{ $n(total.tax || 0, 'currency') }}</td>
|
|
||||||
<td>{{ $n(total.depositAmount || 0, 'currency') }}</td>
|
|
||||||
<td>{{ $n(total.agentSettlementAmount || 0, 'currency') }}</td>
|
|
||||||
</tr>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-slot:item.totalCan="{ item }">
|
|
||||||
{{ $n(item.totalCan || 0, 'decimal') }} {{ $t('common.unit.can') }}
|
|
||||||
</template>
|
|
||||||
<template v-slot:item.krw="{ item }">
|
|
||||||
{{ $n(item.krw || 0, 'currency') }}
|
|
||||||
</template>
|
|
||||||
<template v-slot:item.fee="{ item }">
|
|
||||||
{{ $n(item.fee || 0, 'currency') }}
|
|
||||||
</template>
|
|
||||||
<template v-slot:item.settlementAmount="{ item }">
|
|
||||||
{{ $n(item.settlementAmount || 0, 'currency') }}
|
|
||||||
</template>
|
|
||||||
<template v-slot:item.tax="{ item }">
|
|
||||||
{{ $n(item.tax || 0, 'currency') }}
|
|
||||||
</template>
|
|
||||||
<template v-slot:item.depositAmount="{ item }">
|
|
||||||
{{ $n(item.depositAmount || 0, 'currency') }}
|
|
||||||
</template>
|
|
||||||
<template v-slot:item.agentSettlementAmount="{ item }">
|
|
||||||
{{ $n(item.agentSettlementAmount || 0, 'currency') }}
|
|
||||||
</template>
|
|
||||||
</v-data-table>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
|
|
||||||
<v-row class="text-center">
|
|
||||||
<v-col>
|
|
||||||
<v-pagination
|
|
||||||
v-model="page"
|
|
||||||
:length="total_page"
|
|
||||||
circle
|
|
||||||
@input="onPage"
|
|
||||||
/>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-container>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import * as api from '@/api/agent_calculate';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'AgentCalculateChannelDonation',
|
|
||||||
components: { },
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
is_loading: false,
|
|
||||||
menuStart: false,
|
|
||||||
menuEnd: false,
|
|
||||||
start_date: null,
|
|
||||||
end_date: null,
|
|
||||||
page: 1,
|
|
||||||
page_size: 20,
|
|
||||||
total_page: 0,
|
|
||||||
items: [],
|
|
||||||
total: {
|
|
||||||
count: 0,
|
|
||||||
totalCan: 0,
|
|
||||||
krw: 0,
|
|
||||||
fee: 0,
|
|
||||||
settlementAmount: 0,
|
|
||||||
tax: 0,
|
|
||||||
depositAmount: 0,
|
|
||||||
agentSettlementAmount: 0
|
|
||||||
},
|
|
||||||
// headers는 locale 변경 시 computed에서 생성
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
headers() {
|
|
||||||
return [
|
|
||||||
{ text: this.$t('view.agent.calculate.columns.nickname'), value: 'creatorNickname', align: 'center', sortable: false },
|
|
||||||
{ text: this.$t('view.agent.calculate.columns.count'), value: 'count', align: 'center', sortable: false },
|
|
||||||
{ text: this.$t('view.agent.calculate.columns.totalCan'), value: 'totalCan', align: 'center', sortable: false },
|
|
||||||
{ text: this.$t('view.agent.calculate.columns.krw'), value: 'krw', align: 'center', sortable: false },
|
|
||||||
{ text: this.$t('view.agent.calculate.columns.fee'), value: 'fee', align: 'center', sortable: false },
|
|
||||||
{ text: this.$t('view.agent.calculate.columns.settlementAmount'), value: 'settlementAmount', align: 'center', sortable: false },
|
|
||||||
{ text: this.$t('view.agent.calculate.columns.tax'), value: 'tax', align: 'center', sortable: false },
|
|
||||||
{ text: this.$t('view.agent.calculate.columns.depositAmount'), value: 'depositAmount', align: 'center', sortable: false },
|
|
||||||
{ text: this.$t('view.agent.calculate.columns.agentSettlementAmount'), value: 'agentSettlementAmount', align: 'center', sortable: false }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async created() {
|
|
||||||
const date = new Date();
|
|
||||||
const firstDate = new Date(date.getFullYear(), date.getMonth(), 1);
|
|
||||||
const lastDate = new Date(date.getFullYear(), date.getMonth() + 1, 0);
|
|
||||||
|
|
||||||
const fdM = (firstDate.getMonth() + 1).toString().padStart(2, '0')
|
|
||||||
const ldM = (lastDate.getMonth() + 1).toString().padStart(2, '0')
|
|
||||||
|
|
||||||
this.start_date = `${firstDate.getFullYear()}-${fdM}-0${firstDate.getDate()}`
|
|
||||||
this.end_date = `${lastDate.getFullYear()}-${ldM}-${lastDate.getDate()}`
|
|
||||||
|
|
||||||
await this.fetchItems();
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
notifyError(message) {
|
|
||||||
this.$dialog.notify.error(message)
|
|
||||||
},
|
|
||||||
async onPage() {
|
|
||||||
await this.fetchItems();
|
|
||||||
},
|
|
||||||
async fetchItems() {
|
|
||||||
this.is_loading = true
|
|
||||||
try {
|
|
||||||
const res = await api.getChannelDonationByCreator(this.start_date, this.end_date, this.page, this.page_size)
|
|
||||||
if (res.status === 200 && res.data && res.data.success === true) {
|
|
||||||
const data = res.data.data
|
|
||||||
this.items = data.items || []
|
|
||||||
this.total = data.total || this.total
|
|
||||||
const totalPage = Math.ceil((data.totalCount || 0) / this.page_size)
|
|
||||||
this.total_page = totalPage > 0 ? totalPage : 1
|
|
||||||
} else if (res.data && res.data.data) {
|
|
||||||
const data = res.data.data
|
|
||||||
this.items = data.items || []
|
|
||||||
this.total = data.total || this.total
|
|
||||||
const totalPage = Math.ceil((data.totalCount || 0) / this.page_size)
|
|
||||||
this.total_page = totalPage > 0 ? totalPage : 1
|
|
||||||
} else {
|
|
||||||
this.notifyError(res.data?.message || this.$t('common.error.unknown'))
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
this.notifyError(this.$t('common.error.unknown'))
|
|
||||||
} finally {
|
|
||||||
this.is_loading = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
</style>
|
|
||||||
@@ -1,248 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<v-toolbar dark>
|
|
||||||
<v-spacer />
|
|
||||||
<v-toolbar-title>{{ $t('comp.sideMenu.calc.community') }}</v-toolbar-title>
|
|
||||||
<v-spacer />
|
|
||||||
</v-toolbar>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<v-container>
|
|
||||||
<!-- 필터 영역 -->
|
|
||||||
<v-row
|
|
||||||
class="mt-2 mb-2"
|
|
||||||
align="center"
|
|
||||||
justify="end"
|
|
||||||
>
|
|
||||||
<v-col
|
|
||||||
cols="12"
|
|
||||||
md="3"
|
|
||||||
>
|
|
||||||
<v-menu
|
|
||||||
v-model="menuStart"
|
|
||||||
:close-on-content-click="false"
|
|
||||||
transition="scale-transition"
|
|
||||||
offset-y
|
|
||||||
min-width="auto"
|
|
||||||
>
|
|
||||||
<template v-slot:activator="{ on, attrs }">
|
|
||||||
<v-text-field
|
|
||||||
v-bind="attrs"
|
|
||||||
:label="$t('view.agent.calculate.common.startDate')"
|
|
||||||
readonly
|
|
||||||
dense
|
|
||||||
:value="start_date"
|
|
||||||
v-on="on"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
<v-date-picker
|
|
||||||
v-model="start_date"
|
|
||||||
scrollable
|
|
||||||
@input="menuStart = false"
|
|
||||||
/>
|
|
||||||
</v-menu>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col
|
|
||||||
cols="12"
|
|
||||||
md="3"
|
|
||||||
>
|
|
||||||
<v-menu
|
|
||||||
v-model="menuEnd"
|
|
||||||
:close-on-content-click="false"
|
|
||||||
transition="scale-transition"
|
|
||||||
offset-y
|
|
||||||
min-width="auto"
|
|
||||||
>
|
|
||||||
<template v-slot:activator="{ on, attrs }">
|
|
||||||
<v-text-field
|
|
||||||
v-bind="attrs"
|
|
||||||
:label="$t('view.agent.calculate.common.endDate')"
|
|
||||||
readonly
|
|
||||||
dense
|
|
||||||
:value="end_date"
|
|
||||||
v-on="on"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
<v-date-picker
|
|
||||||
v-model="end_date"
|
|
||||||
scrollable
|
|
||||||
@input="menuEnd = false"
|
|
||||||
/>
|
|
||||||
</v-menu>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col
|
|
||||||
cols="12"
|
|
||||||
md="2"
|
|
||||||
>
|
|
||||||
<v-btn
|
|
||||||
color="#3bb9f1"
|
|
||||||
:loading="is_loading"
|
|
||||||
@click="fetchItems"
|
|
||||||
>
|
|
||||||
{{ $t('view.agent.calculate.common.search') }}
|
|
||||||
</v-btn>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
|
|
||||||
<v-row>
|
|
||||||
<v-col>
|
|
||||||
<v-data-table
|
|
||||||
:headers="headers"
|
|
||||||
:items="items"
|
|
||||||
:loading="is_loading"
|
|
||||||
:items-per-page="-1"
|
|
||||||
class="elevation-1"
|
|
||||||
hide-default-footer
|
|
||||||
>
|
|
||||||
<template slot="body.prepend">
|
|
||||||
<tr>
|
|
||||||
<td>{{ $t('view.agent.calculate.common.total') }}</td>
|
|
||||||
<td>{{ $n(total.count || 0, 'decimal') }}</td>
|
|
||||||
<td>{{ $n(total.totalCan || 0, 'decimal') }} {{ $t('common.unit.can') }}</td>
|
|
||||||
<td>{{ $n(total.krw || 0, 'currency') }}</td>
|
|
||||||
<td>{{ $n(total.fee || 0, 'currency') }}</td>
|
|
||||||
<td>{{ $n(total.settlementAmount || 0, 'currency') }}</td>
|
|
||||||
<td>{{ $n(total.tax || 0, 'currency') }}</td>
|
|
||||||
<td>{{ $n(total.depositAmount || 0, 'currency') }}</td>
|
|
||||||
<td>{{ $n(total.agentSettlementAmount || 0, 'currency') }}</td>
|
|
||||||
</tr>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-slot:item.totalCan="{ item }">
|
|
||||||
{{ $n(item.totalCan || 0, 'decimal') }} {{ $t('common.unit.can') }}
|
|
||||||
</template>
|
|
||||||
<template v-slot:item.krw="{ item }">
|
|
||||||
{{ $n(item.krw || 0, 'currency') }}
|
|
||||||
</template>
|
|
||||||
<template v-slot:item.fee="{ item }">
|
|
||||||
{{ $n(item.fee || 0, 'currency') }}
|
|
||||||
</template>
|
|
||||||
<template v-slot:item.settlementAmount="{ item }">
|
|
||||||
{{ $n(item.settlementAmount || 0, 'currency') }}
|
|
||||||
</template>
|
|
||||||
<template v-slot:item.tax="{ item }">
|
|
||||||
{{ $n(item.tax || 0, 'currency') }}
|
|
||||||
</template>
|
|
||||||
<template v-slot:item.depositAmount="{ item }">
|
|
||||||
{{ $n(item.depositAmount || 0, 'currency') }}
|
|
||||||
</template>
|
|
||||||
<template v-slot:item.agentSettlementAmount="{ item }">
|
|
||||||
{{ $n(item.agentSettlementAmount || 0, 'currency') }}
|
|
||||||
</template>
|
|
||||||
</v-data-table>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
|
|
||||||
<v-row class="text-center">
|
|
||||||
<v-col>
|
|
||||||
<v-pagination
|
|
||||||
v-model="page"
|
|
||||||
:length="total_page"
|
|
||||||
circle
|
|
||||||
@input="onPage"
|
|
||||||
/>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-container>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import * as api from '@/api/agent_calculate';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'AgentCalculateCommunityPost',
|
|
||||||
components: { },
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
is_loading: false,
|
|
||||||
menuStart: false,
|
|
||||||
menuEnd: false,
|
|
||||||
start_date: null,
|
|
||||||
end_date: null,
|
|
||||||
page: 1,
|
|
||||||
page_size: 20,
|
|
||||||
total_page: 0,
|
|
||||||
items: [],
|
|
||||||
total: {
|
|
||||||
count: 0,
|
|
||||||
totalCan: 0,
|
|
||||||
krw: 0,
|
|
||||||
fee: 0,
|
|
||||||
settlementAmount: 0,
|
|
||||||
tax: 0,
|
|
||||||
depositAmount: 0,
|
|
||||||
agentSettlementAmount: 0
|
|
||||||
},
|
|
||||||
// headers는 locale 변경 시 computed에서 생성
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
headers() {
|
|
||||||
return [
|
|
||||||
{ text: this.$t('view.agent.calculate.columns.nickname'), value: 'creatorNickname', align: 'center', sortable: false },
|
|
||||||
{ text: this.$t('view.agent.calculate.columns.count'), value: 'count', align: 'center', sortable: false },
|
|
||||||
{ text: this.$t('view.agent.calculate.columns.totalCan'), value: 'totalCan', align: 'center', sortable: false },
|
|
||||||
{ text: this.$t('view.agent.calculate.columns.krw'), value: 'krw', align: 'center', sortable: false },
|
|
||||||
{ text: this.$t('view.agent.calculate.columns.fee'), value: 'fee', align: 'center', sortable: false },
|
|
||||||
{ text: this.$t('view.agent.calculate.columns.settlementAmount'), value: 'settlementAmount', align: 'center', sortable: false },
|
|
||||||
{ text: this.$t('view.agent.calculate.columns.tax'), value: 'tax', align: 'center', sortable: false },
|
|
||||||
{ text: this.$t('view.agent.calculate.columns.depositAmount'), value: 'depositAmount', align: 'center', sortable: false },
|
|
||||||
{ text: this.$t('view.agent.calculate.columns.agentSettlementAmount'), value: 'agentSettlementAmount', align: 'center', sortable: false }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async created() {
|
|
||||||
const date = new Date();
|
|
||||||
const firstDate = new Date(date.getFullYear(), date.getMonth(), 1);
|
|
||||||
const lastDate = new Date(date.getFullYear(), date.getMonth() + 1, 0);
|
|
||||||
|
|
||||||
const fdM = (firstDate.getMonth() + 1).toString().padStart(2, '0')
|
|
||||||
const ldM = (lastDate.getMonth() + 1).toString().padStart(2, '0')
|
|
||||||
|
|
||||||
this.start_date = `${firstDate.getFullYear()}-${fdM}-0${firstDate.getDate()}`
|
|
||||||
this.end_date = `${lastDate.getFullYear()}-${ldM}-${lastDate.getDate()}`
|
|
||||||
|
|
||||||
await this.fetchItems();
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
notifyError(message) {
|
|
||||||
this.$dialog.notify.error(message)
|
|
||||||
},
|
|
||||||
async onPage() {
|
|
||||||
await this.fetchItems();
|
|
||||||
},
|
|
||||||
async fetchItems() {
|
|
||||||
this.is_loading = true
|
|
||||||
try {
|
|
||||||
const res = await api.getCommunityByCreator(this.start_date, this.end_date, this.page, this.page_size)
|
|
||||||
if (res.status === 200 && res.data && res.data.success === true) {
|
|
||||||
const data = res.data.data
|
|
||||||
this.items = data.items || []
|
|
||||||
this.total = data.total || this.total
|
|
||||||
const totalPage = Math.ceil((data.totalCount || 0) / this.page_size)
|
|
||||||
this.total_page = totalPage > 0 ? totalPage : 1
|
|
||||||
} else if (res.data && res.data.data) {
|
|
||||||
const data = res.data.data
|
|
||||||
this.items = data.items || []
|
|
||||||
this.total = data.total || this.total
|
|
||||||
const totalPage = Math.ceil((data.totalCount || 0) / this.page_size)
|
|
||||||
this.total_page = totalPage > 0 ? totalPage : 1
|
|
||||||
} else {
|
|
||||||
this.notifyError(res.data?.message || this.$t('common.error.unknown'))
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
this.notifyError(this.$t('common.error.unknown'))
|
|
||||||
} finally {
|
|
||||||
this.is_loading = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
</style>
|
|
||||||
@@ -1,248 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<v-toolbar dark>
|
|
||||||
<v-spacer />
|
|
||||||
<v-toolbar-title>{{ $t('comp.sideMenu.calc.content') }}</v-toolbar-title>
|
|
||||||
<v-spacer />
|
|
||||||
</v-toolbar>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<v-container>
|
|
||||||
<!-- 필터 영역 -->
|
|
||||||
<v-row
|
|
||||||
class="mt-2 mb-2"
|
|
||||||
align="center"
|
|
||||||
justify="end"
|
|
||||||
>
|
|
||||||
<v-col
|
|
||||||
cols="12"
|
|
||||||
md="3"
|
|
||||||
>
|
|
||||||
<v-menu
|
|
||||||
v-model="menuStart"
|
|
||||||
:close-on-content-click="false"
|
|
||||||
transition="scale-transition"
|
|
||||||
offset-y
|
|
||||||
min-width="auto"
|
|
||||||
>
|
|
||||||
<template v-slot:activator="{ on, attrs }">
|
|
||||||
<v-text-field
|
|
||||||
v-bind="attrs"
|
|
||||||
:label="$t('view.agent.calculate.common.startDate')"
|
|
||||||
readonly
|
|
||||||
dense
|
|
||||||
:value="start_date"
|
|
||||||
v-on="on"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
<v-date-picker
|
|
||||||
v-model="start_date"
|
|
||||||
scrollable
|
|
||||||
@input="menuStart = false"
|
|
||||||
/>
|
|
||||||
</v-menu>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col
|
|
||||||
cols="12"
|
|
||||||
md="3"
|
|
||||||
>
|
|
||||||
<v-menu
|
|
||||||
v-model="menuEnd"
|
|
||||||
:close-on-content-click="false"
|
|
||||||
transition="scale-transition"
|
|
||||||
offset-y
|
|
||||||
min-width="auto"
|
|
||||||
>
|
|
||||||
<template v-slot:activator="{ on, attrs }">
|
|
||||||
<v-text-field
|
|
||||||
v-bind="attrs"
|
|
||||||
:label="$t('view.agent.calculate.common.endDate')"
|
|
||||||
readonly
|
|
||||||
dense
|
|
||||||
:value="end_date"
|
|
||||||
v-on="on"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
<v-date-picker
|
|
||||||
v-model="end_date"
|
|
||||||
scrollable
|
|
||||||
@input="menuEnd = false"
|
|
||||||
/>
|
|
||||||
</v-menu>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col
|
|
||||||
cols="12"
|
|
||||||
md="2"
|
|
||||||
>
|
|
||||||
<v-btn
|
|
||||||
color="#3bb9f1"
|
|
||||||
:loading="is_loading"
|
|
||||||
@click="fetchItems"
|
|
||||||
>
|
|
||||||
{{ $t('view.agent.calculate.common.search') }}
|
|
||||||
</v-btn>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
|
|
||||||
<v-row>
|
|
||||||
<v-col>
|
|
||||||
<v-data-table
|
|
||||||
:headers="headers"
|
|
||||||
:items="items"
|
|
||||||
:loading="is_loading"
|
|
||||||
:items-per-page="-1"
|
|
||||||
class="elevation-1"
|
|
||||||
hide-default-footer
|
|
||||||
>
|
|
||||||
<template slot="body.prepend">
|
|
||||||
<tr>
|
|
||||||
<td>{{ $t('view.agent.calculate.common.total') }}</td>
|
|
||||||
<td>{{ $n(total.count || 0, 'decimal') }}</td>
|
|
||||||
<td>{{ $n(total.totalCan || 0, 'decimal') }} {{ $t('common.unit.can') }}</td>
|
|
||||||
<td>{{ $n(total.krw || 0, 'currency') }}</td>
|
|
||||||
<td>{{ $n(total.fee || 0, 'currency') }}</td>
|
|
||||||
<td>{{ $n(total.settlementAmount || 0, 'currency') }}</td>
|
|
||||||
<td>{{ $n(total.tax || 0, 'currency') }}</td>
|
|
||||||
<td>{{ $n(total.depositAmount || 0, 'currency') }}</td>
|
|
||||||
<td>{{ $n(total.agentSettlementAmount || 0, 'currency') }}</td>
|
|
||||||
</tr>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-slot:item.totalCan="{ item }">
|
|
||||||
{{ $n(item.totalCan || 0, 'decimal') }} {{ $t('common.unit.can') }}
|
|
||||||
</template>
|
|
||||||
<template v-slot:item.krw="{ item }">
|
|
||||||
{{ $n(item.krw || 0, 'currency') }}
|
|
||||||
</template>
|
|
||||||
<template v-slot:item.fee="{ item }">
|
|
||||||
{{ $n(item.fee || 0, 'currency') }}
|
|
||||||
</template>
|
|
||||||
<template v-slot:item.settlementAmount="{ item }">
|
|
||||||
{{ $n(item.settlementAmount || 0, 'currency') }}
|
|
||||||
</template>
|
|
||||||
<template v-slot:item.tax="{ item }">
|
|
||||||
{{ $n(item.tax || 0, 'currency') }}
|
|
||||||
</template>
|
|
||||||
<template v-slot:item.depositAmount="{ item }">
|
|
||||||
{{ $n(item.depositAmount || 0, 'currency') }}
|
|
||||||
</template>
|
|
||||||
<template v-slot:item.agentSettlementAmount="{ item }">
|
|
||||||
{{ $n(item.agentSettlementAmount || 0, 'currency') }}
|
|
||||||
</template>
|
|
||||||
</v-data-table>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
|
|
||||||
<v-row class="text-center">
|
|
||||||
<v-col>
|
|
||||||
<v-pagination
|
|
||||||
v-model="page"
|
|
||||||
:length="total_page"
|
|
||||||
circle
|
|
||||||
@input="onPage"
|
|
||||||
/>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-container>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import * as api from '@/api/agent_calculate';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'AgentCalculateContent',
|
|
||||||
components: { },
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
is_loading: false,
|
|
||||||
menuStart: false,
|
|
||||||
menuEnd: false,
|
|
||||||
start_date: null,
|
|
||||||
end_date: null,
|
|
||||||
page: 1,
|
|
||||||
page_size: 20,
|
|
||||||
total_page: 0,
|
|
||||||
items: [],
|
|
||||||
total: {
|
|
||||||
count: 0,
|
|
||||||
totalCan: 0,
|
|
||||||
krw: 0,
|
|
||||||
fee: 0,
|
|
||||||
settlementAmount: 0,
|
|
||||||
tax: 0,
|
|
||||||
depositAmount: 0,
|
|
||||||
agentSettlementAmount: 0
|
|
||||||
},
|
|
||||||
// headers는 locale 변경 시 computed에서 생성
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
headers() {
|
|
||||||
return [
|
|
||||||
{ text: this.$t('view.agent.calculate.columns.nickname'), value: 'creatorNickname', align: 'center', sortable: false },
|
|
||||||
{ text: this.$t('view.agent.calculate.columns.count'), value: 'count', align: 'center', sortable: false },
|
|
||||||
{ text: this.$t('view.agent.calculate.columns.totalCan'), value: 'totalCan', align: 'center', sortable: false },
|
|
||||||
{ text: this.$t('view.agent.calculate.columns.krw'), value: 'krw', align: 'center', sortable: false },
|
|
||||||
{ text: this.$t('view.agent.calculate.columns.fee'), value: 'fee', align: 'center', sortable: false },
|
|
||||||
{ text: this.$t('view.agent.calculate.columns.settlementAmount'), value: 'settlementAmount', align: 'center', sortable: false },
|
|
||||||
{ text: this.$t('view.agent.calculate.columns.tax'), value: 'tax', align: 'center', sortable: false },
|
|
||||||
{ text: this.$t('view.agent.calculate.columns.depositAmount'), value: 'depositAmount', align: 'center', sortable: false },
|
|
||||||
{ text: this.$t('view.agent.calculate.columns.agentSettlementAmount'), value: 'agentSettlementAmount', align: 'center', sortable: false }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async created() {
|
|
||||||
const date = new Date();
|
|
||||||
const firstDate = new Date(date.getFullYear(), date.getMonth(), 1);
|
|
||||||
const lastDate = new Date(date.getFullYear(), date.getMonth() + 1, 0);
|
|
||||||
|
|
||||||
const fdM = (firstDate.getMonth() + 1).toString().padStart(2, '0')
|
|
||||||
const ldM = (lastDate.getMonth() + 1).toString().padStart(2, '0')
|
|
||||||
|
|
||||||
this.start_date = `${firstDate.getFullYear()}-${fdM}-0${firstDate.getDate()}`
|
|
||||||
this.end_date = `${lastDate.getFullYear()}-${ldM}-${lastDate.getDate()}`
|
|
||||||
|
|
||||||
await this.fetchItems();
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
notifyError(message) {
|
|
||||||
this.$dialog.notify.error(message)
|
|
||||||
},
|
|
||||||
async onPage() {
|
|
||||||
await this.fetchItems();
|
|
||||||
},
|
|
||||||
async fetchItems() {
|
|
||||||
this.is_loading = true
|
|
||||||
try {
|
|
||||||
const res = await api.getContentByCreator(this.start_date, this.end_date, this.page, this.page_size)
|
|
||||||
if (res.status === 200 && res.data && res.data.success === true) {
|
|
||||||
const data = res.data.data
|
|
||||||
this.items = data.items || []
|
|
||||||
this.total = data.total || this.total
|
|
||||||
const totalPage = Math.ceil((data.totalCount || 0) / this.page_size)
|
|
||||||
this.total_page = totalPage > 0 ? totalPage : 1
|
|
||||||
} else if (res.data && res.data.data) {
|
|
||||||
const data = res.data.data
|
|
||||||
this.items = data.items || []
|
|
||||||
this.total = data.total || this.total
|
|
||||||
const totalPage = Math.ceil((data.totalCount || 0) / this.page_size)
|
|
||||||
this.total_page = totalPage > 0 ? totalPage : 1
|
|
||||||
} else {
|
|
||||||
this.notifyError(res.data?.message || this.$t('common.error.unknown'))
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
this.notifyError(this.$t('common.error.unknown'))
|
|
||||||
} finally {
|
|
||||||
this.is_loading = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
</style>
|
|
||||||
@@ -1,248 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<v-toolbar dark>
|
|
||||||
<v-spacer />
|
|
||||||
<v-toolbar-title>{{ $t('comp.sideMenu.calc.contentDonation') }}</v-toolbar-title>
|
|
||||||
<v-spacer />
|
|
||||||
</v-toolbar>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<v-container>
|
|
||||||
<!-- 필터 영역 -->
|
|
||||||
<v-row
|
|
||||||
class="mt-2 mb-2"
|
|
||||||
align="center"
|
|
||||||
justify="end"
|
|
||||||
>
|
|
||||||
<v-col
|
|
||||||
cols="12"
|
|
||||||
md="3"
|
|
||||||
>
|
|
||||||
<v-menu
|
|
||||||
v-model="menuStart"
|
|
||||||
:close-on-content-click="false"
|
|
||||||
transition="scale-transition"
|
|
||||||
offset-y
|
|
||||||
min-width="auto"
|
|
||||||
>
|
|
||||||
<template v-slot:activator="{ on, attrs }">
|
|
||||||
<v-text-field
|
|
||||||
v-bind="attrs"
|
|
||||||
:label="$t('view.agent.calculate.common.startDate')"
|
|
||||||
readonly
|
|
||||||
dense
|
|
||||||
:value="start_date"
|
|
||||||
v-on="on"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
<v-date-picker
|
|
||||||
v-model="start_date"
|
|
||||||
scrollable
|
|
||||||
@input="menuStart = false"
|
|
||||||
/>
|
|
||||||
</v-menu>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col
|
|
||||||
cols="12"
|
|
||||||
md="3"
|
|
||||||
>
|
|
||||||
<v-menu
|
|
||||||
v-model="menuEnd"
|
|
||||||
:close-on-content-click="false"
|
|
||||||
transition="scale-transition"
|
|
||||||
offset-y
|
|
||||||
min-width="auto"
|
|
||||||
>
|
|
||||||
<template v-slot:activator="{ on, attrs }">
|
|
||||||
<v-text-field
|
|
||||||
v-bind="attrs"
|
|
||||||
:label="$t('view.agent.calculate.common.endDate')"
|
|
||||||
readonly
|
|
||||||
dense
|
|
||||||
:value="end_date"
|
|
||||||
v-on="on"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
<v-date-picker
|
|
||||||
v-model="end_date"
|
|
||||||
scrollable
|
|
||||||
@input="menuEnd = false"
|
|
||||||
/>
|
|
||||||
</v-menu>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col
|
|
||||||
cols="12"
|
|
||||||
md="2"
|
|
||||||
>
|
|
||||||
<v-btn
|
|
||||||
color="#3bb9f1"
|
|
||||||
:loading="is_loading"
|
|
||||||
@click="fetchItems"
|
|
||||||
>
|
|
||||||
{{ $t('view.agent.calculate.common.search') }}
|
|
||||||
</v-btn>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
|
|
||||||
<v-row>
|
|
||||||
<v-col>
|
|
||||||
<v-data-table
|
|
||||||
:headers="headers"
|
|
||||||
:items="items"
|
|
||||||
:loading="is_loading"
|
|
||||||
:items-per-page="-1"
|
|
||||||
class="elevation-1"
|
|
||||||
hide-default-footer
|
|
||||||
>
|
|
||||||
<template slot="body.prepend">
|
|
||||||
<tr>
|
|
||||||
<td>{{ $t('view.agent.calculate.common.total') }}</td>
|
|
||||||
<td>{{ $n(total.count || 0, 'decimal') }}</td>
|
|
||||||
<td>{{ $n(total.totalCan || 0, 'decimal') }} {{ $t('common.unit.can') }}</td>
|
|
||||||
<td>{{ $n(total.krw || 0, 'currency') }}</td>
|
|
||||||
<td>{{ $n(total.fee || 0, 'currency') }}</td>
|
|
||||||
<td>{{ $n(total.settlementAmount || 0, 'currency') }}</td>
|
|
||||||
<td>{{ $n(total.tax || 0, 'currency') }}</td>
|
|
||||||
<td>{{ $n(total.depositAmount || 0, 'currency') }}</td>
|
|
||||||
<td>{{ $n(total.agentSettlementAmount || 0, 'currency') }}</td>
|
|
||||||
</tr>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-slot:item.totalCan="{ item }">
|
|
||||||
{{ $n(item.totalCan || 0, 'decimal') }} {{ $t('common.unit.can') }}
|
|
||||||
</template>
|
|
||||||
<template v-slot:item.krw="{ item }">
|
|
||||||
{{ $n(item.krw || 0, 'currency') }}
|
|
||||||
</template>
|
|
||||||
<template v-slot:item.fee="{ item }">
|
|
||||||
{{ $n(item.fee || 0, 'currency') }}
|
|
||||||
</template>
|
|
||||||
<template v-slot:item.settlementAmount="{ item }">
|
|
||||||
{{ $n(item.settlementAmount || 0, 'currency') }}
|
|
||||||
</template>
|
|
||||||
<template v-slot:item.tax="{ item }">
|
|
||||||
{{ $n(item.tax || 0, 'currency') }}
|
|
||||||
</template>
|
|
||||||
<template v-slot:item.depositAmount="{ item }">
|
|
||||||
{{ $n(item.depositAmount || 0, 'currency') }}
|
|
||||||
</template>
|
|
||||||
<template v-slot:item.agentSettlementAmount="{ item }">
|
|
||||||
{{ $n(item.agentSettlementAmount || 0, 'currency') }}
|
|
||||||
</template>
|
|
||||||
</v-data-table>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
|
|
||||||
<v-row class="text-center">
|
|
||||||
<v-col>
|
|
||||||
<v-pagination
|
|
||||||
v-model="page"
|
|
||||||
:length="total_page"
|
|
||||||
circle
|
|
||||||
@input="onPage"
|
|
||||||
/>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-container>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import * as api from '@/api/agent_calculate';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'AgentCalculateContentDonation',
|
|
||||||
components: { },
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
is_loading: false,
|
|
||||||
menuStart: false,
|
|
||||||
menuEnd: false,
|
|
||||||
start_date: null,
|
|
||||||
end_date: null,
|
|
||||||
page: 1,
|
|
||||||
page_size: 20,
|
|
||||||
total_page: 0,
|
|
||||||
items: [],
|
|
||||||
total: {
|
|
||||||
count: 0,
|
|
||||||
totalCan: 0,
|
|
||||||
krw: 0,
|
|
||||||
fee: 0,
|
|
||||||
settlementAmount: 0,
|
|
||||||
tax: 0,
|
|
||||||
depositAmount: 0,
|
|
||||||
agentSettlementAmount: 0
|
|
||||||
},
|
|
||||||
// headers는 locale 변경 시 computed에서 생성
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
headers() {
|
|
||||||
return [
|
|
||||||
{ text: this.$t('view.agent.calculate.columns.nickname'), value: 'creatorNickname', align: 'center', sortable: false },
|
|
||||||
{ text: this.$t('view.agent.calculate.columns.count'), value: 'count', align: 'center', sortable: false },
|
|
||||||
{ text: this.$t('view.agent.calculate.columns.totalCan'), value: 'totalCan', align: 'center', sortable: false },
|
|
||||||
{ text: this.$t('view.agent.calculate.columns.krw'), value: 'krw', align: 'center', sortable: false },
|
|
||||||
{ text: this.$t('view.agent.calculate.columns.fee'), value: 'fee', align: 'center', sortable: false },
|
|
||||||
{ text: this.$t('view.agent.calculate.columns.settlementAmount'), value: 'settlementAmount', align: 'center', sortable: false },
|
|
||||||
{ text: this.$t('view.agent.calculate.columns.tax'), value: 'tax', align: 'center', sortable: false },
|
|
||||||
{ text: this.$t('view.agent.calculate.columns.depositAmount'), value: 'depositAmount', align: 'center', sortable: false },
|
|
||||||
{ text: this.$t('view.agent.calculate.columns.agentSettlementAmount'), value: 'agentSettlementAmount', align: 'center', sortable: false }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async created() {
|
|
||||||
const date = new Date();
|
|
||||||
const firstDate = new Date(date.getFullYear(), date.getMonth(), 1);
|
|
||||||
const lastDate = new Date(date.getFullYear(), date.getMonth() + 1, 0);
|
|
||||||
|
|
||||||
const fdM = (firstDate.getMonth() + 1).toString().padStart(2, '0')
|
|
||||||
const ldM = (lastDate.getMonth() + 1).toString().padStart(2, '0')
|
|
||||||
|
|
||||||
this.start_date = `${firstDate.getFullYear()}-${fdM}-0${firstDate.getDate()}`
|
|
||||||
this.end_date = `${lastDate.getFullYear()}-${ldM}-${lastDate.getDate()}`
|
|
||||||
|
|
||||||
await this.fetchItems();
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
notifyError(message) {
|
|
||||||
this.$dialog.notify.error(message)
|
|
||||||
},
|
|
||||||
async onPage() {
|
|
||||||
await this.fetchItems();
|
|
||||||
},
|
|
||||||
async fetchItems() {
|
|
||||||
this.is_loading = true
|
|
||||||
try {
|
|
||||||
const res = await api.getContentDonationByCreator(this.start_date, this.end_date, this.page, this.page_size)
|
|
||||||
if (res.status === 200 && res.data && res.data.success === true) {
|
|
||||||
const data = res.data.data
|
|
||||||
this.items = data.items || []
|
|
||||||
this.total = data.total || this.total
|
|
||||||
const totalPage = Math.ceil((data.totalCount || 0) / this.page_size)
|
|
||||||
this.total_page = totalPage > 0 ? totalPage : 1
|
|
||||||
} else if (res.data && res.data.data) {
|
|
||||||
const data = res.data.data
|
|
||||||
this.items = data.items || []
|
|
||||||
this.total = data.total || this.total
|
|
||||||
const totalPage = Math.ceil((data.totalCount || 0) / this.page_size)
|
|
||||||
this.total_page = totalPage > 0 ? totalPage : 1
|
|
||||||
} else {
|
|
||||||
this.notifyError(res.data?.message || this.$t('common.error.unknown'))
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
this.notifyError(this.$t('common.error.unknown'))
|
|
||||||
} finally {
|
|
||||||
this.is_loading = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
</style>
|
|
||||||
@@ -1,248 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<v-toolbar dark>
|
|
||||||
<v-spacer />
|
|
||||||
<v-toolbar-title>{{ $t('comp.sideMenu.calc.live') }}</v-toolbar-title>
|
|
||||||
<v-spacer />
|
|
||||||
</v-toolbar>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<v-container>
|
|
||||||
<!-- 필터 영역 -->
|
|
||||||
<v-row
|
|
||||||
class="mt-2 mb-2"
|
|
||||||
align="center"
|
|
||||||
justify="end"
|
|
||||||
>
|
|
||||||
<v-col
|
|
||||||
cols="12"
|
|
||||||
md="3"
|
|
||||||
>
|
|
||||||
<v-menu
|
|
||||||
v-model="menuStart"
|
|
||||||
:close-on-content-click="false"
|
|
||||||
transition="scale-transition"
|
|
||||||
offset-y
|
|
||||||
min-width="auto"
|
|
||||||
>
|
|
||||||
<template v-slot:activator="{ on, attrs }">
|
|
||||||
<v-text-field
|
|
||||||
v-bind="attrs"
|
|
||||||
:label="$t('view.agent.calculate.common.startDate')"
|
|
||||||
readonly
|
|
||||||
dense
|
|
||||||
:value="start_date"
|
|
||||||
v-on="on"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
<v-date-picker
|
|
||||||
v-model="start_date"
|
|
||||||
scrollable
|
|
||||||
@input="menuStart = false"
|
|
||||||
/>
|
|
||||||
</v-menu>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col
|
|
||||||
cols="12"
|
|
||||||
md="3"
|
|
||||||
>
|
|
||||||
<v-menu
|
|
||||||
v-model="menuEnd"
|
|
||||||
:close-on-content-click="false"
|
|
||||||
transition="scale-transition"
|
|
||||||
offset-y
|
|
||||||
min-width="auto"
|
|
||||||
>
|
|
||||||
<template v-slot:activator="{ on, attrs }">
|
|
||||||
<v-text-field
|
|
||||||
v-bind="attrs"
|
|
||||||
:label="$t('view.agent.calculate.common.endDate')"
|
|
||||||
readonly
|
|
||||||
dense
|
|
||||||
:value="end_date"
|
|
||||||
v-on="on"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
<v-date-picker
|
|
||||||
v-model="end_date"
|
|
||||||
scrollable
|
|
||||||
@input="menuEnd = false"
|
|
||||||
/>
|
|
||||||
</v-menu>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col
|
|
||||||
cols="12"
|
|
||||||
md="2"
|
|
||||||
>
|
|
||||||
<v-btn
|
|
||||||
color="#3bb9f1"
|
|
||||||
:loading="is_loading"
|
|
||||||
@click="fetchItems"
|
|
||||||
>
|
|
||||||
{{ $t('view.agent.calculate.common.search') }}
|
|
||||||
</v-btn>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
|
|
||||||
<v-row>
|
|
||||||
<v-col>
|
|
||||||
<v-data-table
|
|
||||||
:headers="headers"
|
|
||||||
:items="items"
|
|
||||||
:loading="is_loading"
|
|
||||||
:items-per-page="-1"
|
|
||||||
class="elevation-1"
|
|
||||||
hide-default-footer
|
|
||||||
>
|
|
||||||
<template slot="body.prepend">
|
|
||||||
<tr>
|
|
||||||
<td>{{ $t('view.agent.calculate.common.total') }}</td>
|
|
||||||
<td>{{ $n(total.count || 0, 'decimal') }}</td>
|
|
||||||
<td>{{ $n(total.totalCan || 0, 'decimal') }} {{ $t('common.unit.can') }}</td>
|
|
||||||
<td>{{ $n(total.krw || 0, 'currency') }}</td>
|
|
||||||
<td>{{ $n(total.fee || 0, 'currency') }}</td>
|
|
||||||
<td>{{ $n(total.settlementAmount || 0, 'currency') }}</td>
|
|
||||||
<td>{{ $n(total.tax || 0, 'currency') }}</td>
|
|
||||||
<td>{{ $n(total.depositAmount || 0, 'currency') }}</td>
|
|
||||||
<td>{{ $n(total.agentSettlementAmount || 0, 'currency') }}</td>
|
|
||||||
</tr>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-slot:item.totalCan="{ item }">
|
|
||||||
{{ $n(item.totalCan || 0, 'decimal') }} {{ $t('common.unit.can') }}
|
|
||||||
</template>
|
|
||||||
<template v-slot:item.krw="{ item }">
|
|
||||||
{{ $n(item.krw || 0, 'currency') }}
|
|
||||||
</template>
|
|
||||||
<template v-slot:item.fee="{ item }">
|
|
||||||
{{ $n(item.fee || 0, 'currency') }}
|
|
||||||
</template>
|
|
||||||
<template v-slot:item.settlementAmount="{ item }">
|
|
||||||
{{ $n(item.settlementAmount || 0, 'currency') }}
|
|
||||||
</template>
|
|
||||||
<template v-slot:item.tax="{ item }">
|
|
||||||
{{ $n(item.tax || 0, 'currency') }}
|
|
||||||
</template>
|
|
||||||
<template v-slot:item.depositAmount="{ item }">
|
|
||||||
{{ $n(item.depositAmount || 0, 'currency') }}
|
|
||||||
</template>
|
|
||||||
<template v-slot:item.agentSettlementAmount="{ item }">
|
|
||||||
{{ $n(item.agentSettlementAmount || 0, 'currency') }}
|
|
||||||
</template>
|
|
||||||
</v-data-table>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
|
|
||||||
<v-row class="text-center">
|
|
||||||
<v-col>
|
|
||||||
<v-pagination
|
|
||||||
v-model="page"
|
|
||||||
:length="total_page"
|
|
||||||
circle
|
|
||||||
@input="onPage"
|
|
||||||
/>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-container>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import * as api from '@/api/agent_calculate';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'AgentCalculateLive',
|
|
||||||
components: { },
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
is_loading: false,
|
|
||||||
menuStart: false,
|
|
||||||
menuEnd: false,
|
|
||||||
start_date: null,
|
|
||||||
end_date: null,
|
|
||||||
page: 1,
|
|
||||||
page_size: 20,
|
|
||||||
total_page: 0,
|
|
||||||
items: [],
|
|
||||||
total: {
|
|
||||||
count: 0,
|
|
||||||
totalCan: 0,
|
|
||||||
krw: 0,
|
|
||||||
fee: 0,
|
|
||||||
settlementAmount: 0,
|
|
||||||
tax: 0,
|
|
||||||
depositAmount: 0,
|
|
||||||
agentSettlementAmount: 0
|
|
||||||
},
|
|
||||||
// headers는 locale 변경 시 computed에서 생성
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
headers() {
|
|
||||||
return [
|
|
||||||
{ text: this.$t('view.agent.calculate.columns.nickname'), value: 'creatorNickname', align: 'center', sortable: false },
|
|
||||||
{ text: this.$t('view.agent.calculate.columns.count'), value: 'count', align: 'center', sortable: false },
|
|
||||||
{ text: this.$t('view.agent.calculate.columns.totalCan'), value: 'totalCan', align: 'center', sortable: false },
|
|
||||||
{ text: this.$t('view.agent.calculate.columns.krw'), value: 'krw', align: 'center', sortable: false },
|
|
||||||
{ text: this.$t('view.agent.calculate.columns.fee'), value: 'fee', align: 'center', sortable: false },
|
|
||||||
{ text: this.$t('view.agent.calculate.columns.settlementAmount'), value: 'settlementAmount', align: 'center', sortable: false },
|
|
||||||
{ text: this.$t('view.agent.calculate.columns.tax'), value: 'tax', align: 'center', sortable: false },
|
|
||||||
{ text: this.$t('view.agent.calculate.columns.depositAmount'), value: 'depositAmount', align: 'center', sortable: false },
|
|
||||||
{ text: this.$t('view.agent.calculate.columns.agentSettlementAmount'), value: 'agentSettlementAmount', align: 'center', sortable: false }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async created() {
|
|
||||||
const date = new Date();
|
|
||||||
const firstDate = new Date(date.getFullYear(), date.getMonth(), 1);
|
|
||||||
const lastDate = new Date(date.getFullYear(), date.getMonth() + 1, 0);
|
|
||||||
|
|
||||||
const fdM = (firstDate.getMonth() + 1).toString().padStart(2, '0')
|
|
||||||
const ldM = (lastDate.getMonth() + 1).toString().padStart(2, '0')
|
|
||||||
|
|
||||||
this.start_date = `${firstDate.getFullYear()}-${fdM}-0${firstDate.getDate()}`
|
|
||||||
this.end_date = `${lastDate.getFullYear()}-${ldM}-${lastDate.getDate()}`
|
|
||||||
|
|
||||||
await this.fetchItems();
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
notifyError(message) {
|
|
||||||
this.$dialog.notify.error(message)
|
|
||||||
},
|
|
||||||
async onPage() {
|
|
||||||
await this.fetchItems();
|
|
||||||
},
|
|
||||||
async fetchItems() {
|
|
||||||
this.is_loading = true
|
|
||||||
try {
|
|
||||||
const res = await api.getLiveByCreator(this.start_date, this.end_date, this.page, this.page_size)
|
|
||||||
if (res.status === 200 && res.data && res.data.success === true) {
|
|
||||||
const data = res.data.data
|
|
||||||
this.items = data.items || []
|
|
||||||
this.total = data.total || this.total
|
|
||||||
const totalPage = Math.ceil((data.totalCount || 0) / this.page_size)
|
|
||||||
this.total_page = totalPage > 0 ? totalPage : 1
|
|
||||||
} else if (res.data && res.data.data) { // 일부 API는 success 없이 data만 줄 수도 있음
|
|
||||||
const data = res.data.data
|
|
||||||
this.items = data.items || []
|
|
||||||
this.total = data.total || this.total
|
|
||||||
const totalPage = Math.ceil((data.totalCount || 0) / this.page_size)
|
|
||||||
this.total_page = totalPage > 0 ? totalPage : 1
|
|
||||||
} else {
|
|
||||||
this.notifyError(res.data?.message || this.$t('common.error.unknown'))
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
this.notifyError(this.$t('common.error.unknown'))
|
|
||||||
} finally {
|
|
||||||
this.is_loading = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
</style>
|
|
||||||
@@ -1,184 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<v-toolbar dark>
|
|
||||||
<v-spacer />
|
|
||||||
<v-toolbar-title>{{ $t('view.agent.creators.titleWithCount', { count: $n(totalCount, 'decimal') }) }}</v-toolbar-title>
|
|
||||||
<v-spacer />
|
|
||||||
</v-toolbar>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<v-container>
|
|
||||||
<v-row justify="center">
|
|
||||||
<v-col
|
|
||||||
cols="12"
|
|
||||||
sm="10"
|
|
||||||
md="8"
|
|
||||||
lg="6"
|
|
||||||
>
|
|
||||||
<div class="table-center">
|
|
||||||
<v-data-table
|
|
||||||
:headers="headers"
|
|
||||||
:items="items"
|
|
||||||
:loading="is_loading"
|
|
||||||
:items-per-page="-1"
|
|
||||||
class="elevation-1 shrink-table"
|
|
||||||
hide-default-footer
|
|
||||||
>
|
|
||||||
<template v-slot:item.profileImageUrl="{ item }">
|
|
||||||
<v-avatar size="72">
|
|
||||||
<v-img
|
|
||||||
:src="item.profileImageUrl"
|
|
||||||
alt="profile"
|
|
||||||
/>
|
|
||||||
</v-avatar>
|
|
||||||
</template>
|
|
||||||
</v-data-table>
|
|
||||||
</div>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
|
|
||||||
<!-- 커스텀 페이지네이션 -->
|
|
||||||
<v-row
|
|
||||||
class="text-center"
|
|
||||||
justify="center"
|
|
||||||
>
|
|
||||||
<v-col
|
|
||||||
cols="12"
|
|
||||||
sm="10"
|
|
||||||
md="8"
|
|
||||||
lg="6"
|
|
||||||
>
|
|
||||||
<v-pagination
|
|
||||||
v-model="page"
|
|
||||||
:length="total_page"
|
|
||||||
circle
|
|
||||||
@input="onPage"
|
|
||||||
/>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-container>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import * as api from '@/api/agent_calculate';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'AgentCreators',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
// headers는 locale 변경 시 동적으로 계산(computed headers)으로 대체
|
|
||||||
items: [],
|
|
||||||
totalCount: 0,
|
|
||||||
page: 1,
|
|
||||||
itemsPerPage: 20,
|
|
||||||
total_page: 1,
|
|
||||||
is_loading: false
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
headers() {
|
|
||||||
return [
|
|
||||||
{ text: this.$t('view.agent.creators.headers.no'), value: 'no', align: 'center', sortable: false },
|
|
||||||
{ text: this.$t('view.agent.creators.headers.profile'), value: 'profileImageUrl', align: 'center', sortable: false },
|
|
||||||
{ text: this.$t('view.agent.creators.headers.nickname'), value: 'creatorNickname', align: 'center' }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
itemsPerPage() {
|
|
||||||
// 페이지 크기 변경 시 첫 페이지부터 다시 조회
|
|
||||||
this.page = 1;
|
|
||||||
this.fetchItems();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.fetchItems();
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
notifyError(message) {
|
|
||||||
// 전역 dialog 플러그인이 없다면 콘솔로 폴백
|
|
||||||
if (this.$dialog && this.$dialog.notify && this.$dialog.notify.error) {
|
|
||||||
this.$dialog.notify.error(message)
|
|
||||||
} else {
|
|
||||||
// eslint-disable-next-line no-console
|
|
||||||
console.error(message)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async onPage() {
|
|
||||||
await this.fetchItems();
|
|
||||||
},
|
|
||||||
async fetchItems() {
|
|
||||||
try {
|
|
||||||
this.is_loading = true;
|
|
||||||
const res = await api.getAgentAssignedCreatorList(this.page, this.itemsPerPage);
|
|
||||||
// 성공 응답이 { success: true, data: {...} } 혹은 { data: {...} } 형태 모두 대응
|
|
||||||
let payload = null;
|
|
||||||
if (res && res.status === 200) {
|
|
||||||
if (res.data && res.data.success === true && res.data.data) {
|
|
||||||
payload = res.data.data;
|
|
||||||
} else if (res.data && res.data.data) {
|
|
||||||
payload = res.data.data;
|
|
||||||
} else if (res.data && (res.data.items || res.data.totalCount !== undefined)) {
|
|
||||||
// wrapping 없이 바로 내려오는 경우
|
|
||||||
payload = res.data;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!payload) {
|
|
||||||
this.notifyError(res?.data?.message || this.$t('common.error.fetchFailed'));
|
|
||||||
this.items = [];
|
|
||||||
this.totalCount = 0;
|
|
||||||
this.total_page = 1;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.totalCount = Number(payload.totalCount || 0);
|
|
||||||
this.items = Array.isArray(payload.items) ? payload.items : [];
|
|
||||||
const totalPage = Math.ceil(this.totalCount / this.itemsPerPage);
|
|
||||||
this.total_page = totalPage > 0 ? totalPage : 1;
|
|
||||||
|
|
||||||
// 페이지 연속 역순 번호 부여 (전체 totalCount 기준)
|
|
||||||
const startNo = this.totalCount - ((this.page - 1) * this.itemsPerPage);
|
|
||||||
this.items = this.items.map((it, idx) => ({
|
|
||||||
...it,
|
|
||||||
no: startNo - idx
|
|
||||||
}));
|
|
||||||
} catch (e) {
|
|
||||||
// 최소한의 에러 로깅
|
|
||||||
// eslint-disable-next-line no-console
|
|
||||||
console.error('[AgentCreators] 목록 조회 실패', e);
|
|
||||||
this.notifyError(this.$t('common.error.unknown'));
|
|
||||||
} finally {
|
|
||||||
this.is_loading = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
/* 테이블을 화면 가운데 정렬하고, 내용 너비에 맞춰 축소 표시 */
|
|
||||||
.table-center {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shrink-table {
|
|
||||||
display: block;
|
|
||||||
/* 화면의 50% 너비로 고정 표시 */
|
|
||||||
width: 50vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 아이템(셀) 패딩 추가로 행 간격/여백 확보 (Vuetify 기본값보다 우선 적용) */
|
|
||||||
.shrink-table ::v-deep .v-data-table__wrapper > table > tbody > tr > td {
|
|
||||||
padding: 10px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 헤더 텍스트 가운데 정렬 (헤더 align 설정 보조) */
|
|
||||||
.shrink-table ::v-deep thead th {
|
|
||||||
text-align: center !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -2,7 +2,7 @@
|
|||||||
<div>
|
<div>
|
||||||
<v-toolbar dark>
|
<v-toolbar dark>
|
||||||
<v-spacer />
|
<v-spacer />
|
||||||
<v-toolbar-title>{{ $t('view.calculate.accumulation.title') }}</v-toolbar-title>
|
<v-toolbar-title>콘텐츠별 누적 현황</v-toolbar-title>
|
||||||
<v-spacer />
|
<v-spacer />
|
||||||
</v-toolbar>
|
</v-toolbar>
|
||||||
|
|
||||||
@@ -20,31 +20,31 @@
|
|||||||
hide-default-footer
|
hide-default-footer
|
||||||
>
|
>
|
||||||
<template v-slot:item.orderPrice="{ item }">
|
<template v-slot:item.orderPrice="{ item }">
|
||||||
{{ item.orderPrice.toLocaleString() }} {{ $t('common.unit.can') }}
|
{{ item.orderPrice.toLocaleString() }} 캔
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-slot:item.totalCan="{ item }">
|
<template v-slot:item.totalCan="{ item }">
|
||||||
{{ item.totalCan.toLocaleString() }} {{ $t('common.unit.can') }}
|
{{ item.totalCan.toLocaleString() }} 캔
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-slot:item.totalKrw="{ item }">
|
<template v-slot:item.totalKrw="{ item }">
|
||||||
{{ item.totalKrw.toLocaleString() }} {{ $t('common.unit.krw') }}
|
{{ item.totalKrw.toLocaleString() }} 원
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-slot:item.paymentFee="{ item }">
|
<template v-slot:item.paymentFee="{ item }">
|
||||||
{{ item.paymentFee.toLocaleString() }} {{ $t('common.unit.krw') }}
|
{{ item.paymentFee.toLocaleString() }} 원
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-slot:item.settlementAmount="{ item }">
|
<template v-slot:item.settlementAmount="{ item }">
|
||||||
{{ item.settlementAmount.toLocaleString() }} {{ $t('common.unit.krw') }}
|
{{ item.settlementAmount.toLocaleString() }} 원
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-slot:item.tax="{ item }">
|
<template v-slot:item.tax="{ item }">
|
||||||
{{ item.tax.toLocaleString() }} {{ $t('common.unit.krw') }}
|
{{ item.tax.toLocaleString() }} 원
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-slot:item.depositAmount="{ item }">
|
<template v-slot:item.depositAmount="{ item }">
|
||||||
{{ item.depositAmount.toLocaleString() }} {{ $t('common.unit.krw') }}
|
{{ item.depositAmount.toLocaleString() }} 원
|
||||||
</template>
|
</template>
|
||||||
</v-data-table>
|
</v-data-table>
|
||||||
</v-col>
|
</v-col>
|
||||||
@@ -76,25 +76,81 @@ export default {
|
|||||||
page_size: 20,
|
page_size: 20,
|
||||||
total_page: 0,
|
total_page: 0,
|
||||||
items: [],
|
items: [],
|
||||||
}
|
headers: [
|
||||||
},
|
{
|
||||||
|
text: '크리에이터',
|
||||||
computed: {
|
align: 'center',
|
||||||
headers() {
|
sortable: false,
|
||||||
return [
|
value: 'nickname',
|
||||||
{ text: this.$t('view.calculate.common.headers.creator'), align: 'center', sortable: false, value: 'nickname' },
|
},
|
||||||
{ text: this.$t('view.calculate.content.headers.registrationDate'), align: 'center', sortable: false, value: 'registrationDate' },
|
{
|
||||||
{ text: this.$t('view.calculate.common.headers.title'), align: 'center', sortable: false, value: 'title', width: '300px' },
|
text: '등록일',
|
||||||
{ text: this.$t('view.calculate.common.headers.type'), align: 'center', sortable: false, value: 'orderType' },
|
align: 'center',
|
||||||
{ text: this.$t('view.calculate.accumulation.headers.orderPriceCan'), align: 'center', sortable: false, value: 'orderPrice' },
|
sortable: false,
|
||||||
{ text: this.$t('view.calculate.accumulation.headers.numberOfPeople'), align: 'center', sortable: false, value: 'numberOfPeople' },
|
value: 'registrationDate',
|
||||||
{ text: this.$t('view.calculate.common.headers.totalCan'), align: 'center', sortable: false, value: 'totalCan' },
|
},
|
||||||
{ text: this.$t('view.calculate.common.headers.krw'), align: 'center', sortable: false, value: 'totalKrw' },
|
{
|
||||||
{ text: this.$t('view.calculate.common.headers.feeWithPercent', { percent: '6.6%' }), align: 'center', sortable: false, value: 'paymentFee' },
|
text: '제목',
|
||||||
{ text: this.$t('view.calculate.common.headers.settlementAmount'), align: 'center', sortable: false, value: 'settlementAmount' },
|
sortable: false,
|
||||||
{ text: this.$t('view.calculate.common.headers.withholdingTaxWithPercent', { percent: '3.3%' }), align: 'center', sortable: false, value: 'tax' },
|
value: 'title',
|
||||||
{ text: this.$t('view.calculate.common.headers.depositAmount'), align: 'center', sortable: false, value: 'depositAmount' },
|
align: 'center',
|
||||||
]
|
width: "300px"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '구분',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'orderType',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '판매금액(캔)',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'orderPrice',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '누적 판매수',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'numberOfPeople',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '합계(캔)',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'totalCan',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '원화',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'totalKrw',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '수수료\n(6.6%)',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'paymentFee',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '정산금액',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'settlementAmount',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '원천세\n(3.3%)',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'tax',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '입금액',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'depositAmount',
|
||||||
|
},
|
||||||
|
],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -135,12 +191,12 @@ export default {
|
|||||||
else
|
else
|
||||||
this.total_page = totalPage
|
this.total_page = totalPage
|
||||||
} else {
|
} else {
|
||||||
this.notifyError(res.data.message || this.$t('common.error.fetchFailed'))
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
}
|
}
|
||||||
|
|
||||||
this.is_loading = false
|
this.is_loading = false
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
this.notifyError(this.$t('common.error.fetchFailed'))
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
this.is_loading = false
|
this.is_loading = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,241 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<v-toolbar dark>
|
|
||||||
<v-spacer />
|
|
||||||
<v-toolbar-title>{{ $t('view.calculate.channelDonation.title') }}</v-toolbar-title>
|
|
||||||
<v-spacer />
|
|
||||||
</v-toolbar>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<v-container>
|
|
||||||
<v-row>
|
|
||||||
<v-col cols="2">
|
|
||||||
<datetime
|
|
||||||
v-model="start_date"
|
|
||||||
class="datepicker"
|
|
||||||
format="YYYY-MM-DD"
|
|
||||||
/>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col cols="1">
|
|
||||||
{{ $t('view.calculate.common.rangeSeparator') }}
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col cols="2">
|
|
||||||
<datetime
|
|
||||||
v-model="end_date"
|
|
||||||
class="datepicker"
|
|
||||||
format="YYYY-MM-DD"
|
|
||||||
/>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col cols="1" />
|
|
||||||
|
|
||||||
<v-col cols="2">
|
|
||||||
<v-btn
|
|
||||||
block
|
|
||||||
color="#3bb9f1"
|
|
||||||
dark
|
|
||||||
depressed
|
|
||||||
@click="getCalculateChannelDonation"
|
|
||||||
>
|
|
||||||
{{ $t('view.calculate.common.search') }}
|
|
||||||
</v-btn>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-spacer />
|
|
||||||
</v-row>
|
|
||||||
|
|
||||||
<v-row>
|
|
||||||
<v-col>
|
|
||||||
<v-data-table
|
|
||||||
:headers="headers"
|
|
||||||
:items="items"
|
|
||||||
:loading="is_loading"
|
|
||||||
:items-per-page="-1"
|
|
||||||
class="elevation-1"
|
|
||||||
hide-default-footer
|
|
||||||
>
|
|
||||||
<template slot="body.prepend">
|
|
||||||
<tr v-if="total">
|
|
||||||
<td colspan="2">
|
|
||||||
{{ $t('view.calculate.common.total') }}
|
|
||||||
</td>
|
|
||||||
<td class="text-center">
|
|
||||||
{{ total.count.toLocaleString() }} {{ $t('common.unit.case') }}
|
|
||||||
</td>
|
|
||||||
<td class="text-center">
|
|
||||||
{{ total.totalCan.toLocaleString() }} {{ $t('common.unit.can') }}
|
|
||||||
</td>
|
|
||||||
<td class="text-center">
|
|
||||||
{{ total.krw.toLocaleString() }} {{ $t('common.unit.krw') }}
|
|
||||||
</td>
|
|
||||||
<td class="text-center">
|
|
||||||
{{ total.fee.toLocaleString() }} {{ $t('common.unit.krw') }}
|
|
||||||
</td>
|
|
||||||
<td class="text-center">
|
|
||||||
{{ total.settlementAmount.toLocaleString() }} {{ $t('common.unit.krw') }}
|
|
||||||
</td>
|
|
||||||
<td class="text-center">
|
|
||||||
{{ total.withholdingTax.toLocaleString() }} {{ $t('common.unit.krw') }}
|
|
||||||
</td>
|
|
||||||
<td class="text-center">
|
|
||||||
{{ total.depositAmount.toLocaleString() }} {{ $t('common.unit.krw') }}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-slot:item.count="{ item }">
|
|
||||||
{{ item.count.toLocaleString() }} {{ $t('common.unit.case') }}
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-slot:item.totalCan="{ item }">
|
|
||||||
{{ item.totalCan.toLocaleString() }} {{ $t('common.unit.can') }}
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-slot:item.krw="{ item }">
|
|
||||||
{{ item.krw.toLocaleString() }} {{ $t('common.unit.krw') }}
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-slot:item.fee="{ item }">
|
|
||||||
{{ item.fee.toLocaleString() }} {{ $t('common.unit.krw') }}
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-slot:item.settlementAmount="{ item }">
|
|
||||||
{{ item.settlementAmount.toLocaleString() }} {{ $t('common.unit.krw') }}
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-slot:item.withholdingTax="{ item }">
|
|
||||||
{{ item.withholdingTax.toLocaleString() }} {{ $t('common.unit.krw') }}
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-slot:item.depositAmount="{ item }">
|
|
||||||
{{ item.depositAmount.toLocaleString() }} {{ $t('common.unit.krw') }}
|
|
||||||
</template>
|
|
||||||
</v-data-table>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
|
|
||||||
<v-row class="text-center">
|
|
||||||
<v-col>
|
|
||||||
<v-pagination
|
|
||||||
v-model="page"
|
|
||||||
:length="total_page"
|
|
||||||
circle
|
|
||||||
@input="next"
|
|
||||||
/>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-container>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import * as api from "@/api/calculate";
|
|
||||||
import datetime from "vuejs-datetimepicker";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "CalculateChannelDonation",
|
|
||||||
components: {datetime},
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
is_loading: false,
|
|
||||||
start_date: null,
|
|
||||||
end_date: null,
|
|
||||||
page: 1,
|
|
||||||
page_size: 20,
|
|
||||||
total_page: 0,
|
|
||||||
items: [],
|
|
||||||
total: null,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
computed: {
|
|
||||||
headers() {
|
|
||||||
return [
|
|
||||||
{ text: this.$t('view.calculate.common.headers.date'), align: 'center', sortable: false, value: 'date' },
|
|
||||||
{ text: this.$t('view.calculate.common.headers.creator'), align: 'center', sortable: false, value: 'creator' },
|
|
||||||
{ text: this.$t('view.calculate.common.headers.count'), align: 'center', sortable: false, value: 'count' },
|
|
||||||
{ text: this.$t('view.calculate.common.headers.totalCan'), align: 'center', sortable: false, value: 'totalCan' },
|
|
||||||
{ text: this.$t('view.calculate.common.headers.krw'), align: 'center', sortable: false, value: 'krw' },
|
|
||||||
{ text: this.$t('view.calculate.common.headers.feeWithPercent', { percent: '6.6%' }), align: 'center', sortable: false, value: 'fee' },
|
|
||||||
{ text: this.$t('view.calculate.common.headers.settlementAmount'), align: 'center', sortable: false, value: 'settlementAmount' },
|
|
||||||
{ text: this.$t('view.calculate.common.headers.withholdingTaxWithPercent', { percent: '3.3%' }), align: 'center', sortable: false, value: 'withholdingTax' },
|
|
||||||
{ text: this.$t('view.calculate.common.headers.depositAmount'), align: 'center', sortable: false, value: 'depositAmount' },
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
async created() {
|
|
||||||
const date = new Date();
|
|
||||||
const firstDate = new Date(date.getFullYear(), date.getMonth(), 1);
|
|
||||||
const lastDate = new Date(date.getFullYear(), date.getMonth() + 1, 0);
|
|
||||||
|
|
||||||
let firstDateMonth = (firstDate.getMonth() + 1).toString()
|
|
||||||
if (firstDateMonth.length < 2) {
|
|
||||||
firstDateMonth = '0' + firstDateMonth
|
|
||||||
}
|
|
||||||
|
|
||||||
let lastDateMonth = (lastDate.getMonth() + 1).toString()
|
|
||||||
if (lastDateMonth.length < 2) {
|
|
||||||
lastDateMonth = '0' + lastDateMonth
|
|
||||||
}
|
|
||||||
|
|
||||||
let firstDateDay = firstDate.getDate().toString()
|
|
||||||
if (firstDateDay.length < 2) {
|
|
||||||
firstDateDay = '0' + firstDateDay
|
|
||||||
}
|
|
||||||
|
|
||||||
let lastDateDay = lastDate.getDate().toString()
|
|
||||||
if (lastDateDay.length < 2) {
|
|
||||||
lastDateDay = '0' + lastDateDay
|
|
||||||
}
|
|
||||||
|
|
||||||
this.start_date = firstDate.getFullYear() + '-' + firstDateMonth + '-' + firstDateDay
|
|
||||||
this.end_date = lastDate.getFullYear() + '-' + lastDateMonth + '-' + lastDateDay
|
|
||||||
|
|
||||||
await this.getCalculateChannelDonation()
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
notifyError(message) {
|
|
||||||
this.$dialog.notify.error(message)
|
|
||||||
},
|
|
||||||
|
|
||||||
notifySuccess(message) {
|
|
||||||
this.$dialog.notify.success(message)
|
|
||||||
},
|
|
||||||
|
|
||||||
async next() {
|
|
||||||
await this.getCalculateChannelDonation()
|
|
||||||
},
|
|
||||||
|
|
||||||
async getCalculateChannelDonation() {
|
|
||||||
this.is_loading = true
|
|
||||||
|
|
||||||
try {
|
|
||||||
const res = await api.getCalculateChannelDonation(this.start_date, this.end_date, this.page, this.page_size)
|
|
||||||
if (res.status === 200 && res.data.success === true) {
|
|
||||||
this.items = res.data.data.items
|
|
||||||
this.total = res.data.data.total
|
|
||||||
this.total_page = Math.ceil(res.data.data.totalCount / this.page_size)
|
|
||||||
} else {
|
|
||||||
this.notifyError(res.data.message || this.$t('common.error.fetchFailed'))
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
this.notifyError(this.$t('common.error.fetchFailed'))
|
|
||||||
} finally {
|
|
||||||
this.is_loading = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.datepicker {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -2,7 +2,7 @@
|
|||||||
<div>
|
<div>
|
||||||
<v-toolbar dark>
|
<v-toolbar dark>
|
||||||
<v-spacer />
|
<v-spacer />
|
||||||
<v-toolbar-title>{{ $t('view.calculate.community.title') }}</v-toolbar-title>
|
<v-toolbar-title>커뮤니티 정산</v-toolbar-title>
|
||||||
<v-spacer />
|
<v-spacer />
|
||||||
</v-toolbar>
|
</v-toolbar>
|
||||||
|
|
||||||
@@ -19,7 +19,7 @@
|
|||||||
</v-col>
|
</v-col>
|
||||||
|
|
||||||
<v-col cols="1">
|
<v-col cols="1">
|
||||||
{{ $t('view.calculate.common.rangeSeparator') }}
|
~
|
||||||
</v-col>
|
</v-col>
|
||||||
|
|
||||||
<v-col cols="2">
|
<v-col cols="2">
|
||||||
@@ -35,12 +35,12 @@
|
|||||||
<v-col cols="2">
|
<v-col cols="2">
|
||||||
<v-btn
|
<v-btn
|
||||||
block
|
block
|
||||||
color="#3bb9f1"
|
color="#9970ff"
|
||||||
dark
|
dark
|
||||||
depressed
|
depressed
|
||||||
@click="getCalculateCommunityPost"
|
@click="getCalculateCommunityPost"
|
||||||
>
|
>
|
||||||
{{ $t('view.calculate.common.search') }}
|
조회
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-spacer />
|
<v-spacer />
|
||||||
@@ -58,14 +58,14 @@
|
|||||||
<template slot="body.prepend">
|
<template slot="body.prepend">
|
||||||
<tr>
|
<tr>
|
||||||
<td colspan="4">
|
<td colspan="4">
|
||||||
{{ $t('view.calculate.common.total') }}
|
합계
|
||||||
</td>
|
</td>
|
||||||
<td>{{ sumField('totalCan').toLocaleString() }} {{ $t('common.unit.can') }}</td>
|
<td>{{ sumField('totalCan').toLocaleString() }} 캔</td>
|
||||||
<td>{{ sumField('totalKrw').toLocaleString() }} {{ $t('common.unit.krw') }}</td>
|
<td>{{ sumField('totalKrw').toLocaleString() }} 원</td>
|
||||||
<td>{{ sumField('paymentFee').toLocaleString() }} {{ $t('common.unit.krw') }}</td>
|
<td>{{ sumField('paymentFee').toLocaleString() }} 원</td>
|
||||||
<td>{{ sumField('settlementAmount').toLocaleString() }} {{ $t('common.unit.krw') }}</td>
|
<td>{{ sumField('settlementAmount').toLocaleString() }} 원</td>
|
||||||
<td>{{ sumField('tax').toLocaleString() }} {{ $t('common.unit.krw') }}</td>
|
<td>{{ sumField('tax').toLocaleString() }} 원</td>
|
||||||
<td>{{ sumField('depositAmount').toLocaleString() }} {{ $t('common.unit.krw') }}</td>
|
<td>{{ sumField('depositAmount').toLocaleString() }} 원</td>
|
||||||
</tr>
|
</tr>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -74,27 +74,27 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-slot:item.totalCan="{ item }">
|
<template v-slot:item.totalCan="{ item }">
|
||||||
{{ item.totalCan.toLocaleString() }} {{ $t('common.unit.can') }}
|
{{ item.totalCan.toLocaleString() }} 캔
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-slot:item.totalKrw="{ item }">
|
<template v-slot:item.totalKrw="{ item }">
|
||||||
{{ item.totalKrw.toLocaleString() }} {{ $t('common.unit.krw') }}
|
{{ item.totalKrw.toLocaleString() }} 원
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-slot:item.paymentFee="{ item }">
|
<template v-slot:item.paymentFee="{ item }">
|
||||||
{{ item.paymentFee.toLocaleString() }} {{ $t('common.unit.krw') }}
|
{{ item.paymentFee.toLocaleString() }} 원
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-slot:item.settlementAmount="{ item }">
|
<template v-slot:item.settlementAmount="{ item }">
|
||||||
{{ item.settlementAmount.toLocaleString() }} {{ $t('common.unit.krw') }}
|
{{ item.settlementAmount.toLocaleString() }} 원
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-slot:item.tax="{ item }">
|
<template v-slot:item.tax="{ item }">
|
||||||
{{ item.tax.toLocaleString() }} {{ $t('common.unit.krw') }}
|
{{ item.tax.toLocaleString() }} 원
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-slot:item.depositAmount="{ item }">
|
<template v-slot:item.depositAmount="{ item }">
|
||||||
{{ item.depositAmount.toLocaleString() }} {{ $t('common.unit.krw') }}
|
{{ item.depositAmount.toLocaleString() }} 원
|
||||||
</template>
|
</template>
|
||||||
</v-data-table>
|
</v-data-table>
|
||||||
</v-col>
|
</v-col>
|
||||||
@@ -130,23 +130,69 @@ export default {
|
|||||||
page_size: 20,
|
page_size: 20,
|
||||||
total_page: 0,
|
total_page: 0,
|
||||||
items: [],
|
items: [],
|
||||||
}
|
headers: [
|
||||||
},
|
{
|
||||||
|
text: '날짜',
|
||||||
computed: {
|
align: 'center',
|
||||||
headers() {
|
sortable: false,
|
||||||
return [
|
value: 'date',
|
||||||
{ text: this.$t('view.calculate.common.headers.date'), align: 'center', sortable: false, value: 'date' },
|
},
|
||||||
{ text: this.$t('view.calculate.community.headers.contentPreview'), align: 'center', sortable: false, value: 'title', width: '300px' },
|
{
|
||||||
{ text: this.$t('view.calculate.community.headers.orderPriceCan'), align: 'center', sortable: false, value: 'can' },
|
text: '내용(앞 10글자)',
|
||||||
{ text: this.$t('view.calculate.community.headers.numberOfPurchase'), align: 'center', sortable: false, value: 'numberOfPurchase' },
|
sortable: false,
|
||||||
{ text: this.$t('view.calculate.common.headers.totalCan'), align: 'center', sortable: false, value: 'totalCan' },
|
value: 'title',
|
||||||
{ text: this.$t('view.calculate.common.headers.krw'), align: 'center', sortable: false, value: 'totalKrw' },
|
align: 'center',
|
||||||
{ text: this.$t('view.calculate.common.headers.feeWithPercent', { percent: '6.6%' }), align: 'center', sortable: false, value: 'paymentFee' },
|
width: "300px"
|
||||||
{ text: this.$t('view.calculate.common.headers.settlementAmount'), align: 'center', sortable: false, value: 'settlementAmount' },
|
},
|
||||||
{ text: this.$t('view.calculate.common.headers.withholdingTaxWithPercent', { percent: '3.3%' }), align: 'center', sortable: false, value: 'tax' },
|
{
|
||||||
{ text: this.$t('view.calculate.common.headers.depositAmount'), align: 'center', sortable: false, value: 'depositAmount' },
|
text: '판매금액(캔)',
|
||||||
]
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'can',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '구매유저수',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'numberOfPurchase',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '합계(캔)',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'totalCan',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '원화',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'totalKrw',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '수수료\n(6.6%)',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'paymentFee',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '정산금액',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'settlementAmount',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '원천세\n(3.3%)',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'tax',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '입금액',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'depositAmount',
|
||||||
|
}
|
||||||
|
],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -201,12 +247,12 @@ export default {
|
|||||||
else
|
else
|
||||||
this.total_page = totalPage
|
this.total_page = totalPage
|
||||||
} else {
|
} else {
|
||||||
this.notifyError(res.data.message || this.$t('common.error.fetchFailed'))
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
}
|
}
|
||||||
|
|
||||||
this.is_loading = false
|
this.is_loading = false
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
this.notifyError(this.$t('common.error.fetchFailed'))
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
this.is_loading = false
|
this.is_loading = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
<div>
|
<div>
|
||||||
<v-toolbar dark>
|
<v-toolbar dark>
|
||||||
<v-spacer />
|
<v-spacer />
|
||||||
<v-toolbar-title>{{ $t('view.calculate.content.title') }}</v-toolbar-title>
|
<v-toolbar-title>콘텐츠 정산</v-toolbar-title>
|
||||||
<v-spacer />
|
<v-spacer />
|
||||||
</v-toolbar>
|
</v-toolbar>
|
||||||
|
|
||||||
@@ -19,7 +19,7 @@
|
|||||||
</v-col>
|
</v-col>
|
||||||
|
|
||||||
<v-col cols="1">
|
<v-col cols="1">
|
||||||
{{ $t('view.calculate.common.rangeSeparator') }}
|
~
|
||||||
</v-col>
|
</v-col>
|
||||||
|
|
||||||
<v-col cols="2">
|
<v-col cols="2">
|
||||||
@@ -35,12 +35,12 @@
|
|||||||
<v-col cols="2">
|
<v-col cols="2">
|
||||||
<v-btn
|
<v-btn
|
||||||
block
|
block
|
||||||
color="#3bb9f1"
|
color="#9970ff"
|
||||||
dark
|
dark
|
||||||
depressed
|
depressed
|
||||||
@click="getCalculateContent"
|
@click="getCalculateContent"
|
||||||
>
|
>
|
||||||
{{ $t('view.calculate.common.search') }}
|
조회
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</v-col>
|
</v-col>
|
||||||
|
|
||||||
@@ -60,21 +60,21 @@
|
|||||||
<template slot="body.prepend">
|
<template slot="body.prepend">
|
||||||
<tr>
|
<tr>
|
||||||
<td colspan="5">
|
<td colspan="5">
|
||||||
{{ $t('view.calculate.common.total') }}
|
합계
|
||||||
</td>
|
</td>
|
||||||
<td>{{ sumField('numberOfPeople').toLocaleString() }} {{ $t('common.unit.person') }}</td>
|
<td>{{ sumField('numberOfPeople').toLocaleString() }}</td>
|
||||||
<td>{{ sumField('totalCan').toLocaleString() }} {{ $t('common.unit.can') }}</td>
|
<td>{{ sumField('totalCan').toLocaleString() }} 캔</td>
|
||||||
<td>{{ sumField('totalKrw').toLocaleString() }} {{ $t('common.unit.krw') }}</td>
|
<td>{{ sumField('totalKrw').toLocaleString() }} 원</td>
|
||||||
<td>{{ sumField('paymentFee').toLocaleString() }} {{ $t('common.unit.krw') }}</td>
|
<td>{{ sumField('paymentFee').toLocaleString() }} 원</td>
|
||||||
<td>{{ sumField('settlementAmount').toLocaleString() }} {{ $t('common.unit.krw') }}</td>
|
<td>{{ sumField('settlementAmount').toLocaleString() }} 원</td>
|
||||||
<td>{{ sumField('tax').toLocaleString() }} {{ $t('common.unit.krw') }}</td>
|
<td>{{ sumField('tax').toLocaleString() }} 원</td>
|
||||||
<td>{{ sumField('depositAmount').toLocaleString() }} {{ $t('common.unit.krw') }}</td>
|
<td>{{ sumField('depositAmount').toLocaleString() }} 원</td>
|
||||||
<td />
|
<td />
|
||||||
</tr>
|
</tr>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-slot:item.orderPrice="{ item }">
|
<template v-slot:item.orderPrice="{ item }">
|
||||||
{{ item.orderPrice.toLocaleString() }} {{ $t('common.unit.can') }}
|
{{ item.orderPrice.toLocaleString() }} 캔
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-slot:item.orderType="{ item }">
|
<template v-slot:item.orderType="{ item }">
|
||||||
@@ -82,27 +82,27 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-slot:item.totalCan="{ item }">
|
<template v-slot:item.totalCan="{ item }">
|
||||||
{{ item.totalCan.toLocaleString() }} {{ $t('common.unit.can') }}
|
{{ item.totalCan.toLocaleString() }} 캔
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-slot:item.totalKrw="{ item }">
|
<template v-slot:item.totalKrw="{ item }">
|
||||||
{{ item.totalKrw.toLocaleString() }} {{ $t('common.unit.krw') }}
|
{{ item.totalKrw.toLocaleString() }} 원
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-slot:item.paymentFee="{ item }">
|
<template v-slot:item.paymentFee="{ item }">
|
||||||
{{ item.paymentFee.toLocaleString() }} {{ $t('common.unit.krw') }}
|
{{ item.paymentFee.toLocaleString() }} 원
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-slot:item.settlementAmount="{ item }">
|
<template v-slot:item.settlementAmount="{ item }">
|
||||||
{{ item.settlementAmount.toLocaleString() }} {{ $t('common.unit.krw') }}
|
{{ item.settlementAmount.toLocaleString() }} 원
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-slot:item.tax="{ item }">
|
<template v-slot:item.tax="{ item }">
|
||||||
{{ item.tax.toLocaleString() }} {{ $t('common.unit.krw') }}
|
{{ item.tax.toLocaleString() }} 원
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-slot:item.depositAmount="{ item }">
|
<template v-slot:item.depositAmount="{ item }">
|
||||||
{{ item.depositAmount.toLocaleString() }} {{ $t('common.unit.krw') }}
|
{{ item.depositAmount.toLocaleString() }} 원
|
||||||
</template>
|
</template>
|
||||||
</v-data-table>
|
</v-data-table>
|
||||||
</v-col>
|
</v-col>
|
||||||
@@ -138,26 +138,87 @@ export default {
|
|||||||
page_size: 20,
|
page_size: 20,
|
||||||
total_page: 0,
|
total_page: 0,
|
||||||
items: [],
|
items: [],
|
||||||
}
|
headers: [
|
||||||
},
|
{
|
||||||
|
text: '판매일',
|
||||||
computed: {
|
align: 'center',
|
||||||
headers() {
|
sortable: false,
|
||||||
return [
|
value: 'saleDate',
|
||||||
{ text: this.$t('view.calculate.content.headers.saleDate'), align: 'center', sortable: false, value: 'saleDate' },
|
},
|
||||||
{ text: this.$t('view.calculate.common.headers.creator'), align: 'center', sortable: false, value: 'nickname' },
|
{
|
||||||
{ text: this.$t('view.calculate.common.headers.title'), sortable: false, value: 'title', align: 'center', width: '300px' },
|
text: '크리에이터',
|
||||||
{ text: this.$t('view.calculate.common.headers.type'), align: 'center', sortable: false, value: 'orderType' },
|
align: 'center',
|
||||||
{ text: this.$t('view.calculate.content.headers.orderPriceCan'), align: 'center', sortable: false, value: 'orderPrice' },
|
sortable: false,
|
||||||
{ text: this.$t('view.calculate.content.headers.salesCount'), align: 'center', sortable: false, value: 'numberOfPeople' },
|
value: 'nickname',
|
||||||
{ text: this.$t('view.calculate.common.headers.totalCan'), align: 'center', sortable: false, value: 'totalCan' },
|
},
|
||||||
{ text: this.$t('view.calculate.common.headers.krw'), align: 'center', sortable: false, value: 'totalKrw' },
|
{
|
||||||
{ text: this.$t('view.calculate.common.headers.feeWithPercent', { percent: '6.6%' }), align: 'center', sortable: false, value: 'paymentFee' },
|
text: '제목',
|
||||||
{ text: this.$t('view.calculate.common.headers.settlementAmount'), align: 'center', sortable: false, value: 'settlementAmount' },
|
sortable: false,
|
||||||
{ text: this.$t('view.calculate.common.headers.withholdingTaxWithPercent', { percent: '3.3%' }), align: 'center', sortable: false, value: 'tax' },
|
value: 'title',
|
||||||
{ text: this.$t('view.calculate.common.headers.depositAmount'), align: 'center', sortable: false, value: 'depositAmount' },
|
align: 'center',
|
||||||
{ text: this.$t('view.calculate.content.headers.registrationDate'), align: 'center', sortable: false, value: 'registrationDate' }
|
width: "300px"
|
||||||
]
|
},
|
||||||
|
{
|
||||||
|
text: '구분',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'orderType',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '판매금액(캔)',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'orderPrice',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '판매수',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'numberOfPeople',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '합계(캔)',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'totalCan',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '원화',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'totalKrw',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '수수료\n(6.6%)',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'paymentFee',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '정산금액',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'settlementAmount',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '원천세\n(3.3%)',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'tax',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '입금액',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'depositAmount',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '등록일',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'registrationDate',
|
||||||
|
},
|
||||||
|
],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -216,12 +277,12 @@ export default {
|
|||||||
else
|
else
|
||||||
this.total_page = totalPage
|
this.total_page = totalPage
|
||||||
} else {
|
} else {
|
||||||
this.notifyError(res.data.message || this.$t('common.error.unknown'))
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
}
|
}
|
||||||
|
|
||||||
this.is_loading = false
|
this.is_loading = false
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
this.notifyError(this.$t('common.error.unknown'))
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
this.is_loading = false
|
this.is_loading = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
<div>
|
<div>
|
||||||
<v-toolbar dark>
|
<v-toolbar dark>
|
||||||
<v-spacer />
|
<v-spacer />
|
||||||
<v-toolbar-title>{{ $t('view.calculate.contentDonation.title') }}</v-toolbar-title>
|
<v-toolbar-title>콘텐츠 정산</v-toolbar-title>
|
||||||
<v-spacer />
|
<v-spacer />
|
||||||
</v-toolbar>
|
</v-toolbar>
|
||||||
|
|
||||||
@@ -19,7 +19,7 @@
|
|||||||
</v-col>
|
</v-col>
|
||||||
|
|
||||||
<v-col cols="1">
|
<v-col cols="1">
|
||||||
{{ $t('view.calculate.common.rangeSeparator') }}
|
~
|
||||||
</v-col>
|
</v-col>
|
||||||
|
|
||||||
<v-col cols="2">
|
<v-col cols="2">
|
||||||
@@ -35,12 +35,12 @@
|
|||||||
<v-col cols="2">
|
<v-col cols="2">
|
||||||
<v-btn
|
<v-btn
|
||||||
block
|
block
|
||||||
color="#3bb9f1"
|
color="#9970ff"
|
||||||
dark
|
dark
|
||||||
depressed
|
depressed
|
||||||
@click="getCalculateContentDonation"
|
@click="getCalculateContentDonation"
|
||||||
>
|
>
|
||||||
{{ $t('view.calculate.common.search') }}
|
조회
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</v-col>
|
</v-col>
|
||||||
|
|
||||||
@@ -58,27 +58,27 @@
|
|||||||
hide-default-footer
|
hide-default-footer
|
||||||
>
|
>
|
||||||
<template v-slot:item.totalCan="{ item }">
|
<template v-slot:item.totalCan="{ item }">
|
||||||
{{ item.totalCan.toLocaleString() }} {{ $t('common.unit.can') }}
|
{{ item.totalCan.toLocaleString() }} 캔
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-slot:item.totalKrw="{ item }">
|
<template v-slot:item.totalKrw="{ item }">
|
||||||
{{ item.totalKrw.toLocaleString() }} {{ $t('common.unit.krw') }}
|
{{ item.totalKrw.toLocaleString() }} 원
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-slot:item.paymentFee="{ item }">
|
<template v-slot:item.paymentFee="{ item }">
|
||||||
{{ item.paymentFee.toLocaleString() }} {{ $t('common.unit.krw') }}
|
{{ item.paymentFee.toLocaleString() }} 원
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-slot:item.settlementAmount="{ item }">
|
<template v-slot:item.settlementAmount="{ item }">
|
||||||
{{ item.settlementAmount.toLocaleString() }} {{ $t('common.unit.krw') }}
|
{{ item.settlementAmount.toLocaleString() }} 원
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-slot:item.tax="{ item }">
|
<template v-slot:item.tax="{ item }">
|
||||||
{{ item.tax.toLocaleString() }} {{ $t('common.unit.krw') }}
|
{{ item.tax.toLocaleString() }} 원
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-slot:item.depositAmount="{ item }">
|
<template v-slot:item.depositAmount="{ item }">
|
||||||
{{ item.depositAmount.toLocaleString() }} {{ $t('common.unit.krw') }}
|
{{ item.depositAmount.toLocaleString() }} 원
|
||||||
</template>
|
</template>
|
||||||
</v-data-table>
|
</v-data-table>
|
||||||
</v-col>
|
</v-col>
|
||||||
@@ -114,25 +114,81 @@ export default {
|
|||||||
page_size: 20,
|
page_size: 20,
|
||||||
total_page: 0,
|
total_page: 0,
|
||||||
items: [],
|
items: [],
|
||||||
}
|
headers: [
|
||||||
},
|
{
|
||||||
|
text: '후원날짜',
|
||||||
computed: {
|
align: 'center',
|
||||||
headers() {
|
sortable: false,
|
||||||
return [
|
value: 'donationDate',
|
||||||
{ text: this.$t('view.calculate.common.headers.date'), align: 'center', sortable: false, value: 'donationDate' },
|
},
|
||||||
{ text: this.$t('view.calculate.common.headers.creator'), align: 'center', sortable: false, value: 'nickname' },
|
{
|
||||||
{ text: this.$t('view.calculate.common.headers.title'), align: 'center', sortable: false, value: 'title', width: '300px' },
|
text: '크리에이터',
|
||||||
{ text: this.$t('view.calculate.common.headers.type'), align: 'center', sortable: false, value: 'paidOrFree' },
|
align: 'center',
|
||||||
{ text: this.$t('view.calculate.contentDonation.headers.numberOfDonation'), align: 'center', sortable: false, value: 'numberOfDonation' },
|
sortable: false,
|
||||||
{ text: this.$t('view.calculate.common.headers.totalCan'), align: 'center', sortable: false, value: 'totalCan' },
|
value: 'nickname',
|
||||||
{ text: this.$t('view.calculate.common.headers.krw'), align: 'center', sortable: false, value: 'totalKrw' },
|
},
|
||||||
{ text: this.$t('view.calculate.common.headers.feeWithPercent', { percent: '6.6%' }), align: 'center', sortable: false, value: 'paymentFee' },
|
{
|
||||||
{ text: this.$t('view.calculate.common.headers.settlementAmount'), align: 'center', sortable: false, value: 'settlementAmount' },
|
text: '콘텐츠 제목',
|
||||||
{ text: this.$t('view.calculate.common.headers.withholdingTaxWithPercent', { percent: '3.3%' }), align: 'center', sortable: false, value: 'tax' },
|
sortable: false,
|
||||||
{ text: this.$t('view.calculate.common.headers.depositAmount'), align: 'center', sortable: false, value: 'depositAmount' },
|
value: 'title',
|
||||||
{ text: this.$t('view.calculate.content.headers.registrationDate'), align: 'center', sortable: false, value: 'registrationDate' },
|
align: 'center',
|
||||||
]
|
width: "300px"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '구분',
|
||||||
|
sortable: false,
|
||||||
|
value: 'paidOrFree',
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '후원수',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'numberOfDonation',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '합계(캔)',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'totalCan',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '원화',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'totalKrw',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '수수료\n(6.6%)',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'paymentFee',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '정산금액',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'settlementAmount',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '원천세\n(3.3%)',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'tax',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '입금액',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'depositAmount',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '콘텐츠 등록일',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'registrationDate',
|
||||||
|
},
|
||||||
|
],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -191,12 +247,12 @@ export default {
|
|||||||
else
|
else
|
||||||
this.total_page = totalPage
|
this.total_page = totalPage
|
||||||
} else {
|
} else {
|
||||||
this.notifyError(res.data.message || this.$t('common.error.fetchFailed'))
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
}
|
}
|
||||||
|
|
||||||
this.is_loading = false
|
this.is_loading = false
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
this.notifyError(this.$t('common.error.fetchFailed'))
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
this.is_loading = false
|
this.is_loading = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
<div>
|
<div>
|
||||||
<v-toolbar dark>
|
<v-toolbar dark>
|
||||||
<v-spacer />
|
<v-spacer />
|
||||||
<v-toolbar-title>{{ $t('view.calculate.live.title') }}</v-toolbar-title>
|
<v-toolbar-title>라이브 정산</v-toolbar-title>
|
||||||
<v-spacer />
|
<v-spacer />
|
||||||
</v-toolbar>
|
</v-toolbar>
|
||||||
|
|
||||||
@@ -19,7 +19,7 @@
|
|||||||
</v-col>
|
</v-col>
|
||||||
|
|
||||||
<v-col cols="1">
|
<v-col cols="1">
|
||||||
{{ $t('view.calculate.common.rangeSeparator') }}
|
~
|
||||||
</v-col>
|
</v-col>
|
||||||
|
|
||||||
<v-col cols="2">
|
<v-col cols="2">
|
||||||
@@ -35,12 +35,12 @@
|
|||||||
<v-col cols="2">
|
<v-col cols="2">
|
||||||
<v-btn
|
<v-btn
|
||||||
block
|
block
|
||||||
color="#3bb9f1"
|
color="#9970ff"
|
||||||
dark
|
dark
|
||||||
depressed
|
depressed
|
||||||
@click="getCalculateLive"
|
@click="getCalculateLive"
|
||||||
>
|
>
|
||||||
{{ $t('view.calculate.common.search') }}
|
조회
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
@@ -58,20 +58,20 @@
|
|||||||
<template slot="body.prepend">
|
<template slot="body.prepend">
|
||||||
<tr>
|
<tr>
|
||||||
<td colspan="5">
|
<td colspan="5">
|
||||||
{{ $t('view.calculate.common.total') }}
|
합계
|
||||||
</td>
|
</td>
|
||||||
<td>{{ sumField('numberOfPeople').toLocaleString() }} {{ $t('common.unit.person') }}</td>
|
<td>{{ sumField('numberOfPeople').toLocaleString() }} 명</td>
|
||||||
<td>{{ sumField('totalAmount').toLocaleString() }} {{ $t('common.unit.can') }}</td>
|
<td>{{ sumField('totalAmount').toLocaleString() }} 캔</td>
|
||||||
<td>{{ sumField('totalKrw').toLocaleString() }} {{ $t('common.unit.krw') }}</td>
|
<td>{{ sumField('totalKrw').toLocaleString() }} 원</td>
|
||||||
<td>{{ sumField('paymentFee').toLocaleString() }} {{ $t('common.unit.krw') }}</td>
|
<td>{{ sumField('paymentFee').toLocaleString() }} 원</td>
|
||||||
<td>{{ sumField('settlementAmount').toLocaleString() }} {{ $t('common.unit.krw') }}</td>
|
<td>{{ sumField('settlementAmount').toLocaleString() }} 원</td>
|
||||||
<td>{{ sumField('tax').toLocaleString() }} {{ $t('common.unit.krw') }}</td>
|
<td>{{ sumField('tax').toLocaleString() }} 원</td>
|
||||||
<td>{{ sumField('depositAmount').toLocaleString() }} {{ $t('common.unit.krw') }}</td>
|
<td>{{ sumField('depositAmount').toLocaleString() }} 원</td>
|
||||||
</tr>
|
</tr>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-slot:item.entranceFee="{ item }">
|
<template v-slot:item.entranceFee="{ item }">
|
||||||
{{ item.entranceFee.toLocaleString() }} {{ $t('common.unit.can') }}
|
{{ item.entranceFee.toLocaleString() }} 캔
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-slot:item.canUsageStr="{ item }">
|
<template v-slot:item.canUsageStr="{ item }">
|
||||||
@@ -79,27 +79,27 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-slot:item.totalAmount="{ item }">
|
<template v-slot:item.totalAmount="{ item }">
|
||||||
{{ item.totalAmount.toLocaleString() }} {{ $t('common.unit.can') }}
|
{{ item.totalAmount.toLocaleString() }} 캔
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-slot:item.totalKrw="{ item }">
|
<template v-slot:item.totalKrw="{ item }">
|
||||||
{{ item.totalKrw.toLocaleString() }} {{ $t('common.unit.krw') }}
|
{{ item.totalKrw.toLocaleString() }} 원
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-slot:item.paymentFee="{ item }">
|
<template v-slot:item.paymentFee="{ item }">
|
||||||
{{ item.paymentFee.toLocaleString() }} {{ $t('common.unit.krw') }}
|
{{ item.paymentFee.toLocaleString() }} 원
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-slot:item.settlementAmount="{ item }">
|
<template v-slot:item.settlementAmount="{ item }">
|
||||||
{{ item.settlementAmount.toLocaleString() }} {{ $t('common.unit.krw') }}
|
{{ item.settlementAmount.toLocaleString() }} 원
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-slot:item.tax="{ item }">
|
<template v-slot:item.tax="{ item }">
|
||||||
{{ item.tax.toLocaleString() }} {{ $t('common.unit.krw') }}
|
{{ item.tax.toLocaleString() }} 원
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-slot:item.depositAmount="{ item }">
|
<template v-slot:item.depositAmount="{ item }">
|
||||||
{{ item.depositAmount.toLocaleString() }} {{ $t('common.unit.krw') }}
|
{{ item.depositAmount.toLocaleString() }} 원
|
||||||
</template>
|
</template>
|
||||||
</v-data-table>
|
</v-data-table>
|
||||||
</v-col>
|
</v-col>
|
||||||
@@ -122,27 +122,129 @@ export default {
|
|||||||
start_date: null,
|
start_date: null,
|
||||||
end_date: null,
|
end_date: null,
|
||||||
items: [],
|
items: [],
|
||||||
// columns(미사용) 정의는 남기되, 헤더는 i18n 반응형 computed로 전환
|
columns: [
|
||||||
columns: [],
|
{
|
||||||
}
|
label: "크리에이터",
|
||||||
},
|
field: "nickname",
|
||||||
|
},
|
||||||
computed: {
|
{
|
||||||
headers() {
|
label: "날짜",
|
||||||
return [
|
field: "date",
|
||||||
{ text: this.$t('view.calculate.common.headers.creator'), align: 'center', sortable: false, value: 'nickname' },
|
},
|
||||||
{ text: this.$t('view.calculate.common.headers.date'), align: 'center', sortable: false, value: 'date' },
|
{
|
||||||
{ text: this.$t('view.calculate.common.headers.title'), sortable: false, value: 'title' },
|
label: "제목",
|
||||||
{ text: this.$t('view.calculate.common.headers.type'), align: 'center', sortable: false, value: 'canUsageStr' },
|
field: "title",
|
||||||
{ text: this.$t('view.calculate.live.headers.entranceCan'), align: 'center', sortable: false, value: 'entranceFee' },
|
},
|
||||||
{ text: this.$t('view.calculate.live.headers.paidParticipants'), align: 'center', sortable: false, value: 'numberOfPeople' },
|
{
|
||||||
{ text: this.$t('view.calculate.common.headers.totalCan'), align: 'center', sortable: false, value: 'totalAmount' },
|
label: "구분",
|
||||||
{ text: this.$t('view.calculate.common.headers.krw'), align: 'center', sortable: false, value: 'totalKrw' },
|
field: "canUsageStr",
|
||||||
{ text: this.$t('view.calculate.common.headers.feeWithPercent', { percent: '6.6%' }), align: 'center', sortable: false, value: 'paymentFee' },
|
},
|
||||||
{ text: this.$t('view.calculate.common.headers.settlementAmount'), align: 'center', sortable: false, value: 'settlementAmount' },
|
{
|
||||||
{ text: this.$t('view.calculate.common.headers.withholdingTaxWithPercent', { percent: '3.3%' }), align: 'center', sortable: false, value: 'tax' },
|
label: "입장캔",
|
||||||
{ text: this.$t('view.calculate.common.headers.depositAmount'), align: 'center', sortable: false, value: 'depositAmount' }
|
field: "entranceFee",
|
||||||
]
|
},
|
||||||
|
{
|
||||||
|
label: "유료방참여인원",
|
||||||
|
field: "numberOfPeople",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "합계(캔)",
|
||||||
|
field: "totalAmount",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "원화",
|
||||||
|
field: "totalKrw",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "결제수수료(6.6%)",
|
||||||
|
field: "paymentFee",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "정산금액",
|
||||||
|
field: "settlementAmount",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "원천세(3.3%)",
|
||||||
|
field: "tax",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "입금액",
|
||||||
|
field: "depositAmount",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
headers: [
|
||||||
|
{
|
||||||
|
text: '크리에이터',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'nickname',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '날짜',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'date',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '제목',
|
||||||
|
sortable: false,
|
||||||
|
value: 'title',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '구분',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'canUsageStr',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '입장캔',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'entranceFee',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '유료방참여인원',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'numberOfPeople',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '합계(캔)',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'totalAmount',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '원화',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'totalKrw',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '수수료\n(6.6%)',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'paymentFee',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '정산금액',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'settlementAmount',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '원천세\n(3.3%)',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'tax',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '입금액',
|
||||||
|
align: 'center',
|
||||||
|
sortable: false,
|
||||||
|
value: 'depositAmount',
|
||||||
|
}
|
||||||
|
],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -189,12 +291,12 @@ export default {
|
|||||||
if (res.status === 200 && res.data.success === true) {
|
if (res.status === 200 && res.data.success === true) {
|
||||||
this.items = res.data.data
|
this.items = res.data.data
|
||||||
} else {
|
} else {
|
||||||
this.notifyError(res.data.message || this.$t('common.error.unknown'))
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
}
|
}
|
||||||
|
|
||||||
this.is_loading = false
|
this.is_loading = false
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
this.notifyError(this.$t('common.error.unknown'))
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
this.is_loading = false
|
this.is_loading = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -10,7 +10,7 @@
|
|||||||
depressed
|
depressed
|
||||||
@click="showCreateCategoryDialog"
|
@click="showCreateCategoryDialog"
|
||||||
>
|
>
|
||||||
{{ $t('view.content.category.actions.addCategory') }}
|
카테고리 추가
|
||||||
</v-btn>
|
</v-btn>
|
||||||
<br><br>
|
<br><br>
|
||||||
<draggable
|
<draggable
|
||||||
@@ -47,32 +47,32 @@
|
|||||||
depressed
|
depressed
|
||||||
@click="showAddContent"
|
@click="showAddContent"
|
||||||
>
|
>
|
||||||
{{ $t('view.content.category.actions.addContent') }}
|
콘텐츠 추가
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
<br><br>
|
<br><br>
|
||||||
<p v-if="selected_category !== null && selected_category !== undefined">
|
<p v-if="selected_category !== null && selected_category !== undefined">
|
||||||
{{ $t('view.content.category.selectedCategory') }} : {{ selected_category.category }}
|
선택된 카테고리 : {{ selected_category.category }}
|
||||||
</p>
|
</p>
|
||||||
<p v-else>
|
<p v-else>
|
||||||
{{ $t('view.content.category.pleaseSelect') }}
|
카테고리를 선택해 주세요
|
||||||
</p>
|
</p>
|
||||||
<v-simple-table>
|
<v-simple-table>
|
||||||
<template>
|
<template>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th class="text-center">
|
<th class="text-center">
|
||||||
{{ $t('view.content.common.headers.thumbnail') }}
|
썸네일
|
||||||
</th>
|
</th>
|
||||||
<th class="text-center">
|
<th class="text-center">
|
||||||
{{ $t('view.content.common.headers.title') }}
|
제목
|
||||||
</th>
|
</th>
|
||||||
<th class="text-center">
|
<th class="text-center">
|
||||||
{{ $t('view.content.common.headers.adult') }}
|
19금
|
||||||
</th>
|
</th>
|
||||||
<th class="text-center">
|
<th class="text-center">
|
||||||
{{ $t('view.content.common.headers.actions') }}
|
관리
|
||||||
</th>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
@@ -105,7 +105,7 @@
|
|||||||
color="#3bb9f1"
|
color="#3bb9f1"
|
||||||
@click="removeContentInCategory(content)"
|
@click="removeContentInCategory(content)"
|
||||||
>
|
>
|
||||||
{{ $t('view.content.common.actions.delete') }}
|
삭제
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
<div>
|
<div>
|
||||||
<v-toolbar dark>
|
<v-toolbar dark>
|
||||||
<v-spacer />
|
<v-spacer />
|
||||||
<v-toolbar-title>{{ $t('view.content.list.title') }}</v-toolbar-title>
|
<v-toolbar-title>콘텐츠 리스트</v-toolbar-title>
|
||||||
<v-spacer />
|
<v-spacer />
|
||||||
</v-toolbar>
|
</v-toolbar>
|
||||||
|
|
||||||
@@ -19,7 +19,7 @@
|
|||||||
depressed
|
depressed
|
||||||
@click="showWriteDialog"
|
@click="showWriteDialog"
|
||||||
>
|
>
|
||||||
{{ $t('view.content.list.actions.create') }}
|
콘텐츠 등록
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
@@ -30,46 +30,46 @@
|
|||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th class="text-center">
|
<th class="text-center">
|
||||||
{{ $t('view.content.common.headers.thumbnail') }}
|
썸네일
|
||||||
</th>
|
</th>
|
||||||
<th class="text-center">
|
<th class="text-center">
|
||||||
{{ $t('view.content.common.headers.title') }}
|
제목
|
||||||
</th>
|
</th>
|
||||||
<th class="text-center">
|
<th class="text-center">
|
||||||
{{ $t('view.content.common.headers.detail') }}
|
내용
|
||||||
</th>
|
</th>
|
||||||
<th class="text-center">
|
<th class="text-center">
|
||||||
{{ $t('view.content.common.headers.creator') }}
|
크리에이터
|
||||||
</th>
|
</th>
|
||||||
<th class="text-center">
|
<th class="text-center">
|
||||||
{{ $t('view.content.common.headers.theme') }}
|
테마
|
||||||
</th>
|
</th>
|
||||||
<th class="text-center">
|
<th class="text-center">
|
||||||
{{ $t('view.content.common.headers.tags') }}
|
태그
|
||||||
</th>
|
</th>
|
||||||
<th class="text-center">
|
<th class="text-center">
|
||||||
{{ $t('view.content.common.headers.price') }}
|
가격
|
||||||
</th>
|
</th>
|
||||||
<th class="text-center">
|
<th class="text-center">
|
||||||
{{ $t('view.content.common.headers.limited') }}
|
한정판
|
||||||
</th>
|
</th>
|
||||||
<th class="text-center">
|
<th class="text-center">
|
||||||
{{ $t('view.content.common.headers.adult') }}
|
19금
|
||||||
</th>
|
</th>
|
||||||
<th class="text-center">
|
<th class="text-center">
|
||||||
{{ $t('view.content.common.headers.time') }}
|
시간
|
||||||
</th>
|
</th>
|
||||||
<th class="text-center">
|
<th class="text-center">
|
||||||
{{ $t('view.content.common.headers.listen') }}
|
듣기
|
||||||
</th>
|
</th>
|
||||||
<th class="text-center">
|
<th class="text-center">
|
||||||
{{ $t('view.content.common.headers.registrationDate') }}
|
등록일
|
||||||
</th>
|
</th>
|
||||||
<th class="text-center">
|
<th class="text-center">
|
||||||
{{ $t('view.content.common.headers.scheduledOpenDate') }}
|
오픈 예정일
|
||||||
</th>
|
</th>
|
||||||
<th class="text-center">
|
<th class="text-center">
|
||||||
{{ $t('view.content.common.headers.actions') }}
|
관리
|
||||||
</th>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
@@ -95,10 +95,10 @@
|
|||||||
{{ item.tags }}
|
{{ item.tags }}
|
||||||
</td>
|
</td>
|
||||||
<td v-if="item.price > 0">
|
<td v-if="item.price > 0">
|
||||||
{{ item.price }} {{ $t('common.unit.can') }}
|
{{ item.price }} 캔
|
||||||
</td>
|
</td>
|
||||||
<td v-else>
|
<td v-else>
|
||||||
{{ $t('view.content.common.free') }}
|
무료
|
||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
v-if="item.totalContentCount > 0 && item.remainingContentCount > 0"
|
v-if="item.totalContentCount > 0 && item.remainingContentCount > 0"
|
||||||
@@ -711,45 +711,6 @@
|
|||||||
</v-card-actions>
|
</v-card-actions>
|
||||||
</v-card>
|
</v-card>
|
||||||
</v-dialog>
|
</v-dialog>
|
||||||
|
|
||||||
<v-dialog
|
|
||||||
v-model="show_cropper_dialog"
|
|
||||||
max-width="800px"
|
|
||||||
persistent
|
|
||||||
>
|
|
||||||
<v-card>
|
|
||||||
<v-card-title>
|
|
||||||
이미지 크롭
|
|
||||||
</v-card-title>
|
|
||||||
<v-card-text>
|
|
||||||
<div class="cropper-wrapper">
|
|
||||||
<img
|
|
||||||
ref="cropper_image"
|
|
||||||
:src="cropper_image_url"
|
|
||||||
alt="Cropper Image"
|
|
||||||
style="max-width: 100%;"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</v-card-text>
|
|
||||||
<v-card-actions>
|
|
||||||
<v-spacer />
|
|
||||||
<v-btn
|
|
||||||
color="blue darken-1"
|
|
||||||
text
|
|
||||||
@click="cancelCropper"
|
|
||||||
>
|
|
||||||
취소
|
|
||||||
</v-btn>
|
|
||||||
<v-btn
|
|
||||||
color="blue darken-1"
|
|
||||||
text
|
|
||||||
@click="cropImage"
|
|
||||||
>
|
|
||||||
확인
|
|
||||||
</v-btn>
|
|
||||||
</v-card-actions>
|
|
||||||
</v-card>
|
|
||||||
</v-dialog>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -759,12 +720,10 @@ import VuetifyAudio from 'vuetify-audio'
|
|||||||
// Main JS (in UMD format)
|
// Main JS (in UMD format)
|
||||||
import VueTimepicker from 'vue2-timepicker'
|
import VueTimepicker from 'vue2-timepicker'
|
||||||
import DatePicker from 'vue2-datepicker';
|
import DatePicker from 'vue2-datepicker';
|
||||||
import Cropper from 'cropperjs';
|
|
||||||
|
|
||||||
import 'vue2-datepicker/index.css';
|
import 'vue2-datepicker/index.css';
|
||||||
// CSS
|
// CSS
|
||||||
import 'vue2-timepicker/dist/VueTimepicker.css'
|
import 'vue2-timepicker/dist/VueTimepicker.css'
|
||||||
import 'cropperjs/dist/cropper.css';
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "AudioContentList",
|
name: "AudioContentList",
|
||||||
@@ -781,9 +740,6 @@ export default {
|
|||||||
show_create_dialog: false,
|
show_create_dialog: false,
|
||||||
show_modify_dialog: false,
|
show_modify_dialog: false,
|
||||||
show_delete_confirm_dialog: false,
|
show_delete_confirm_dialog: false,
|
||||||
show_cropper_dialog: false,
|
|
||||||
cropper_image_url: '',
|
|
||||||
cropper: null,
|
|
||||||
page: 1,
|
page: 1,
|
||||||
total_page: 0,
|
total_page: 0,
|
||||||
search_word: '',
|
search_word: '',
|
||||||
@@ -878,63 +834,13 @@ export default {
|
|||||||
imageAdd(payload) {
|
imageAdd(payload) {
|
||||||
const file = payload;
|
const file = payload;
|
||||||
if (file) {
|
if (file) {
|
||||||
// 이미 크롭 처리된 파일인 경우 다시 다이얼로그를 띄우지 않음
|
this.audio_content.cover_image_url = URL.createObjectURL(file)
|
||||||
if (file._isCropped) return;
|
URL.revokeObjectURL(file)
|
||||||
|
|
||||||
this.cropper_image_url = URL.createObjectURL(file)
|
|
||||||
this.show_cropper_dialog = true
|
|
||||||
this.$nextTick(() => {
|
|
||||||
if (this.cropper) {
|
|
||||||
this.cropper.destroy()
|
|
||||||
}
|
|
||||||
this.cropper = new Cropper(this.$refs.cropper_image, {
|
|
||||||
aspectRatio: 1,
|
|
||||||
viewMode: 1,
|
|
||||||
})
|
|
||||||
})
|
|
||||||
} else {
|
} else {
|
||||||
this.audio_content.cover_image_url = null
|
this.audio_content.cover_image_url = null
|
||||||
this.audio_content.cover_image = null
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
cancelCropper() {
|
|
||||||
this.show_cropper_dialog = false
|
|
||||||
if (this.cropper) {
|
|
||||||
this.cropper.destroy()
|
|
||||||
this.cropper = null
|
|
||||||
}
|
|
||||||
this.cropper_image_url = ''
|
|
||||||
this.audio_content.cover_image = null
|
|
||||||
},
|
|
||||||
|
|
||||||
cropImage() {
|
|
||||||
const canvas = this.cropper.getCroppedCanvas()
|
|
||||||
let finalCanvas = canvas
|
|
||||||
|
|
||||||
const MAX_SIZE = 800
|
|
||||||
if (canvas.width > MAX_SIZE || canvas.height > MAX_SIZE) {
|
|
||||||
const resizeCanvas = document.createElement('canvas')
|
|
||||||
resizeCanvas.width = MAX_SIZE
|
|
||||||
resizeCanvas.height = MAX_SIZE
|
|
||||||
const ctx = resizeCanvas.getContext('2d')
|
|
||||||
ctx.drawImage(canvas, 0, 0, MAX_SIZE, MAX_SIZE)
|
|
||||||
finalCanvas = resizeCanvas
|
|
||||||
}
|
|
||||||
|
|
||||||
finalCanvas.toBlob((blob) => {
|
|
||||||
const file = new File([blob], 'cover_image.png', { type: 'image/png' })
|
|
||||||
file._isCropped = true // 크롭된 파일임을 표시하여 재진입 방지
|
|
||||||
this.audio_content.cover_image = file
|
|
||||||
this.audio_content.cover_image_url = URL.createObjectURL(blob)
|
|
||||||
this.show_cropper_dialog = false
|
|
||||||
if (this.cropper) {
|
|
||||||
this.cropper.destroy()
|
|
||||||
this.cropper = null
|
|
||||||
}
|
|
||||||
}, 'image/png')
|
|
||||||
},
|
|
||||||
|
|
||||||
async getAudioContentThemeList() {
|
async getAudioContentThemeList() {
|
||||||
this.is_loading = true
|
this.is_loading = true
|
||||||
try {
|
try {
|
||||||
@@ -1329,9 +1235,4 @@ export default {
|
|||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cropper-wrapper {
|
|
||||||
max-height: 500px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -9,35 +9,35 @@
|
|||||||
class="cover-image"
|
class="cover-image"
|
||||||
/>
|
/>
|
||||||
<v-card-text>
|
<v-card-text>
|
||||||
{{ $t('view.content.seriesDetail.fields.title') }} : {{ series_detail.title }}
|
제목 : {{ series_detail.title }}
|
||||||
</v-card-text>
|
</v-card-text>
|
||||||
<v-card-text>
|
<v-card-text>
|
||||||
{{ $t('view.content.seriesDetail.fields.introduction') }} :
|
소개 :
|
||||||
<vue-show-more-text
|
<vue-show-more-text
|
||||||
:text="series_detail.introduction"
|
:text="series_detail.introduction"
|
||||||
:lines="2"
|
:lines="2"
|
||||||
/>
|
/>
|
||||||
</v-card-text>
|
</v-card-text>
|
||||||
<v-card-text>
|
<v-card-text>
|
||||||
{{ $t('view.content.seriesDetail.fields.publishedDaysOfWeek') }} : {{ series_detail.publishedDaysOfWeek }}
|
연재요일 : {{ series_detail.publishedDaysOfWeek }}
|
||||||
</v-card-text>
|
</v-card-text>
|
||||||
<v-card-text>
|
<v-card-text>
|
||||||
{{ $t('view.content.seriesDetail.fields.genre') }} : {{ series_detail.genre }}
|
장르 : {{ series_detail.genre }}
|
||||||
</v-card-text>
|
</v-card-text>
|
||||||
<v-card-text>
|
<v-card-text>
|
||||||
{{ $t('view.content.seriesDetail.fields.keywords') }} : {{ series_detail.keywords }}
|
키워드 : {{ series_detail.keywords }}
|
||||||
</v-card-text>
|
</v-card-text>
|
||||||
<v-card-text>
|
<v-card-text>
|
||||||
{{ $t('view.content.seriesDetail.fields.adult') }} : <span v-if="series_detail.isAdult">{{ $t('view.content.seriesDetail.adult.only') }}</span><span v-else>{{ $t('view.content.seriesDetail.adult.all') }}</span>
|
연령제한 : <span v-if="series_detail.isAdult">19세이상</span><span v-else>전체이용가</span>
|
||||||
</v-card-text>
|
</v-card-text>
|
||||||
<v-card-text>
|
<v-card-text>
|
||||||
{{ $t('view.content.seriesDetail.fields.completed') }} : {{ series_detail.state }}
|
완결여부 : {{ series_detail.state }}
|
||||||
</v-card-text>
|
</v-card-text>
|
||||||
<v-card-text v-show="series_detail.writer !== undefined && series_detail.writer !== null">
|
<v-card-text v-show="series_detail.writer !== undefined && series_detail.writer !== null">
|
||||||
{{ $t('view.content.seriesDetail.fields.writer') }} : {{ series_detail.writer }}
|
작가 : {{ series_detail.writer }}
|
||||||
</v-card-text>
|
</v-card-text>
|
||||||
<v-card-text v-show="series_detail.studio !== undefined && series_detail.studio !== null">
|
<v-card-text v-show="series_detail.studio !== undefined && series_detail.studio !== null">
|
||||||
{{ $t('view.content.seriesDetail.fields.studio') }} : {{ series_detail.studio }}
|
제작사 : {{ series_detail.studio }}
|
||||||
</v-card-text>
|
</v-card-text>
|
||||||
</v-card>
|
</v-card>
|
||||||
</v-col>
|
</v-col>
|
||||||
@@ -52,7 +52,7 @@
|
|||||||
depressed
|
depressed
|
||||||
@click="showAddContent"
|
@click="showAddContent"
|
||||||
>
|
>
|
||||||
{{ $t('view.content.seriesDetail.actions.addContent') }}
|
콘텐츠 추가
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
@@ -63,16 +63,16 @@
|
|||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th class="text-center">
|
<th class="text-center">
|
||||||
{{ $t('view.content.common.headers.thumbnail') }}
|
썸네일
|
||||||
</th>
|
</th>
|
||||||
<th class="text-center">
|
<th class="text-center">
|
||||||
{{ $t('view.content.common.headers.title') }}
|
제목
|
||||||
</th>
|
</th>
|
||||||
<th class="text-center">
|
<th class="text-center">
|
||||||
{{ $t('view.content.common.headers.adult') }}
|
19금
|
||||||
</th>
|
</th>
|
||||||
<th class="text-center">
|
<th class="text-center">
|
||||||
{{ $t('view.content.common.headers.actions') }}
|
관리
|
||||||
</th>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
@@ -104,7 +104,7 @@
|
|||||||
color="#3bb9f1"
|
color="#3bb9f1"
|
||||||
@click="deleteConfirm(content)"
|
@click="deleteConfirm(content)"
|
||||||
>
|
>
|
||||||
{{ $t('view.content.common.actions.delete') }}
|
삭제
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
<div>
|
<div>
|
||||||
<v-toolbar dark>
|
<v-toolbar dark>
|
||||||
<v-spacer />
|
<v-spacer />
|
||||||
<v-toolbar-title>{{ $t('view.content.series.title') }}</v-toolbar-title>
|
<v-toolbar-title>시리즈 관리</v-toolbar-title>
|
||||||
<v-spacer />
|
<v-spacer />
|
||||||
</v-toolbar>
|
</v-toolbar>
|
||||||
|
|
||||||
@@ -18,7 +18,7 @@
|
|||||||
depressed
|
depressed
|
||||||
@click="showWriteDialog"
|
@click="showWriteDialog"
|
||||||
>
|
>
|
||||||
{{ $t('view.content.series.actions.create') }}
|
시리즈 등록
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
@@ -56,13 +56,13 @@
|
|||||||
text
|
text
|
||||||
@click="showModifyDialog(item)"
|
@click="showModifyDialog(item)"
|
||||||
>
|
>
|
||||||
{{ $t('view.content.series.actions.edit') }}
|
수정
|
||||||
</v-btn>
|
</v-btn>
|
||||||
<v-btn
|
<v-btn
|
||||||
text
|
text
|
||||||
@click="deleteConfirm(item)"
|
@click="deleteConfirm(item)"
|
||||||
>
|
>
|
||||||
{{ $t('view.content.common.actions.delete') }}
|
삭제
|
||||||
</v-btn>
|
</v-btn>
|
||||||
<v-spacer />
|
<v-spacer />
|
||||||
</v-card-actions>
|
</v-card-actions>
|
||||||
@@ -79,12 +79,12 @@
|
|||||||
>
|
>
|
||||||
<v-card>
|
<v-card>
|
||||||
<v-card-title>
|
<v-card-title>
|
||||||
{{ $t('view.content.series.dialog.createTitle') }}
|
시리즈 등록
|
||||||
</v-card-title>
|
</v-card-title>
|
||||||
|
|
||||||
<div class="image-select">
|
<div class="image-select">
|
||||||
<label for="image">
|
<label for="image">
|
||||||
{{ $t('view.content.series.fields.coverImage') }}
|
커버 이미지 등록
|
||||||
</label>
|
</label>
|
||||||
<v-file-input
|
<v-file-input
|
||||||
id="image"
|
id="image"
|
||||||
@@ -102,12 +102,12 @@
|
|||||||
<v-card-text>
|
<v-card-text>
|
||||||
<v-row align="center">
|
<v-row align="center">
|
||||||
<v-col cols="4">
|
<v-col cols="4">
|
||||||
{{ $t('view.content.series.fields.title') }}*
|
제목*
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col cols="8">
|
<v-col cols="8">
|
||||||
<v-text-field
|
<v-text-field
|
||||||
v-model="series.title"
|
v-model="series.title"
|
||||||
:label="$t('view.content.series.fields.title')"
|
label="제목"
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
</v-col>
|
</v-col>
|
||||||
@@ -116,12 +116,12 @@
|
|||||||
<v-card-text>
|
<v-card-text>
|
||||||
<v-row align="center">
|
<v-row align="center">
|
||||||
<v-col cols="4">
|
<v-col cols="4">
|
||||||
{{ $t('view.content.series.fields.introduction') }}*
|
소개*
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col cols="8">
|
<v-col cols="8">
|
||||||
<v-textarea
|
<v-textarea
|
||||||
v-model="series.introduction"
|
v-model="series.introduction"
|
||||||
:label="$t('view.content.series.fields.introduction')"
|
label="소개"
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
</v-col>
|
</v-col>
|
||||||
@@ -130,7 +130,7 @@
|
|||||||
<v-card-text>
|
<v-card-text>
|
||||||
<v-row>
|
<v-row>
|
||||||
<v-col cols="4">
|
<v-col cols="4">
|
||||||
{{ $t('view.content.series.fields.publishedDaysOfWeek') }}*
|
연재요일*
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col
|
<v-col
|
||||||
cols="8"
|
cols="8"
|
||||||
@@ -159,14 +159,14 @@
|
|||||||
value="RANDOM"
|
value="RANDOM"
|
||||||
@change="handleCheckboxChange('RANDOM', $event)"
|
@change="handleCheckboxChange('RANDOM', $event)"
|
||||||
>
|
>
|
||||||
<label for="checkbox_random"> {{ $t('view.content.series.fields.random') }}</label>
|
<label for="checkbox_random"> 랜덤</label>
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
</v-card-text>
|
</v-card-text>
|
||||||
<v-card-text>
|
<v-card-text>
|
||||||
<v-row align="center">
|
<v-row align="center">
|
||||||
<v-col cols="4">
|
<v-col cols="4">
|
||||||
{{ $t('view.content.series.fields.genre') }}
|
장르
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col cols="8">
|
<v-col cols="8">
|
||||||
<v-select
|
<v-select
|
||||||
@@ -174,7 +174,7 @@
|
|||||||
:items="series_genre_list"
|
:items="series_genre_list"
|
||||||
item-text="name"
|
item-text="name"
|
||||||
item-value="value"
|
item-value="value"
|
||||||
:label="$t('view.content.series.fields.selectGenre')"
|
label="장르 선택"
|
||||||
/>
|
/>
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
@@ -337,43 +337,6 @@
|
|||||||
</v-card>
|
</v-card>
|
||||||
</v-dialog>
|
</v-dialog>
|
||||||
|
|
||||||
<v-dialog
|
|
||||||
v-model="show_cropper_dialog"
|
|
||||||
max-width="800px"
|
|
||||||
persistent
|
|
||||||
>
|
|
||||||
<v-card>
|
|
||||||
<v-card-title>이미지 크롭 (A4 비율)</v-card-title>
|
|
||||||
<v-card-text>
|
|
||||||
<div class="cropper-wrapper">
|
|
||||||
<img
|
|
||||||
ref="cropper_image"
|
|
||||||
:src="cropper_image_url"
|
|
||||||
alt="Cropper Image"
|
|
||||||
class="cropper-image"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</v-card-text>
|
|
||||||
<v-card-actions>
|
|
||||||
<v-spacer />
|
|
||||||
<v-btn
|
|
||||||
color="grey darken-1"
|
|
||||||
text
|
|
||||||
@click="cancelCropper"
|
|
||||||
>
|
|
||||||
취소
|
|
||||||
</v-btn>
|
|
||||||
<v-btn
|
|
||||||
color="blue darken-1"
|
|
||||||
text
|
|
||||||
@click="cropImage"
|
|
||||||
>
|
|
||||||
크롭 완료
|
|
||||||
</v-btn>
|
|
||||||
</v-card-actions>
|
|
||||||
</v-card>
|
|
||||||
</v-dialog>
|
|
||||||
|
|
||||||
<v-dialog
|
<v-dialog
|
||||||
v-model="is_loading"
|
v-model="is_loading"
|
||||||
max-width="400px"
|
max-width="400px"
|
||||||
@@ -393,8 +356,6 @@
|
|||||||
<script>
|
<script>
|
||||||
import * as api from '@/api/audio_content_series';
|
import * as api from '@/api/audio_content_series';
|
||||||
import Draggable from "vuedraggable";
|
import Draggable from "vuedraggable";
|
||||||
import Cropper from 'cropperjs';
|
|
||||||
import 'cropperjs/dist/cropper.css';
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "ContentSeriesList",
|
name: "ContentSeriesList",
|
||||||
@@ -408,9 +369,6 @@ export default {
|
|||||||
series_list: [],
|
series_list: [],
|
||||||
selected_series: null,
|
selected_series: null,
|
||||||
series_genre_list: [],
|
series_genre_list: [],
|
||||||
show_cropper_dialog: false,
|
|
||||||
cropper_image_url: '',
|
|
||||||
cropper: null,
|
|
||||||
page: 1,
|
page: 1,
|
||||||
total_page: 0,
|
total_page: 0,
|
||||||
days_of_week: [
|
days_of_week: [
|
||||||
@@ -442,63 +400,13 @@ export default {
|
|||||||
imageAdd(payload) {
|
imageAdd(payload) {
|
||||||
const file = payload;
|
const file = payload;
|
||||||
if (file) {
|
if (file) {
|
||||||
if (file._isCropped) return;
|
this.series.cover_image_url = URL.createObjectURL(file)
|
||||||
|
URL.revokeObjectURL(file)
|
||||||
this.cropper_image_url = URL.createObjectURL(file)
|
|
||||||
this.show_cropper_dialog = true
|
|
||||||
this.$nextTick(() => {
|
|
||||||
if (this.cropper) {
|
|
||||||
this.cropper.destroy()
|
|
||||||
}
|
|
||||||
this.cropper = new Cropper(this.$refs.cropper_image, {
|
|
||||||
aspectRatio: 210 / 297,
|
|
||||||
viewMode: 1,
|
|
||||||
})
|
|
||||||
})
|
|
||||||
} else {
|
} else {
|
||||||
this.series.cover_image_url = null
|
this.series.cover_image_url = null
|
||||||
this.series.cover_image = null
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
cancelCropper() {
|
|
||||||
this.show_cropper_dialog = false
|
|
||||||
if (this.cropper) {
|
|
||||||
this.cropper.destroy()
|
|
||||||
this.cropper = null
|
|
||||||
}
|
|
||||||
this.cropper_image_url = ''
|
|
||||||
this.series.cover_image = null
|
|
||||||
},
|
|
||||||
|
|
||||||
cropImage() {
|
|
||||||
const canvas = this.cropper.getCroppedCanvas()
|
|
||||||
let finalCanvas = canvas
|
|
||||||
|
|
||||||
const MAX_WIDTH = 1000
|
|
||||||
if (canvas.width > MAX_WIDTH) {
|
|
||||||
const height = MAX_WIDTH * (297 / 210)
|
|
||||||
const resizeCanvas = document.createElement('canvas')
|
|
||||||
resizeCanvas.width = MAX_WIDTH
|
|
||||||
resizeCanvas.height = height
|
|
||||||
const ctx = resizeCanvas.getContext('2d')
|
|
||||||
ctx.drawImage(canvas, 0, 0, MAX_WIDTH, height)
|
|
||||||
finalCanvas = resizeCanvas
|
|
||||||
}
|
|
||||||
|
|
||||||
finalCanvas.toBlob((blob) => {
|
|
||||||
const file = new File([blob], 'cover_image.png', {type: 'image/png'})
|
|
||||||
file._isCropped = true
|
|
||||||
this.series.cover_image = file
|
|
||||||
this.series.cover_image_url = URL.createObjectURL(blob)
|
|
||||||
this.show_cropper_dialog = false
|
|
||||||
if (this.cropper) {
|
|
||||||
this.cropper.destroy()
|
|
||||||
this.cropper = null
|
|
||||||
}
|
|
||||||
}, 'image/png')
|
|
||||||
},
|
|
||||||
|
|
||||||
notifyError(message) {
|
notifyError(message) {
|
||||||
this.$dialog.notify.error(message)
|
this.$dialog.notify.error(message)
|
||||||
},
|
},
|
||||||
@@ -560,32 +468,32 @@ export default {
|
|||||||
|
|
||||||
validate() {
|
validate() {
|
||||||
if (this.series.cover_image === undefined || this.series.cover_image === null) {
|
if (this.series.cover_image === undefined || this.series.cover_image === null) {
|
||||||
this.notifyError(this.$t('view.content.series.validation.coverImageRequired'))
|
this.notifyError('커버 이미지를 선택하세요')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.series.title === undefined || this.series.title === null || this.series.title.trim().length <= 0) {
|
if (this.series.title === undefined || this.series.title === null || this.series.title.trim().length <= 0) {
|
||||||
this.notifyError(this.$t('view.content.series.validation.titleRequired'))
|
this.notifyError('시리즈 제목을 입력하세요')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.series.introduction === undefined || this.series.introduction === null || this.series.introduction.trim().length <= 0) {
|
if (this.series.introduction === undefined || this.series.introduction === null || this.series.introduction.trim().length <= 0) {
|
||||||
this.notifyError(this.$t('view.content.series.validation.introRequired'))
|
this.notifyError('시리즈 소개를 입력하세요')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.series.published_days_of_week === undefined || this.series.published_days_of_week === null || this.series.published_days_of_week.length <= 0) {
|
if (this.series.published_days_of_week === undefined || this.series.published_days_of_week === null || this.series.published_days_of_week.length <= 0) {
|
||||||
this.notifyError(this.$t('view.content.series.validation.daysRequired'))
|
this.notifyError('시리즈 연재요일을 선택하세요')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.series.keyword === undefined || this.series.keyword === null || this.series.keyword.replaceAll('#', '').trim().length <= 0) {
|
if (this.series.keyword === undefined || this.series.keyword === null || this.series.keyword.replaceAll('#', '').trim().length <= 0) {
|
||||||
this.notifyError(this.$t('view.content.series.validation.keywordsRequired'))
|
this.notifyError('시리즈를 설명할 수 있는 키워드를 입력하세요')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.series.genre_id === undefined || this.series.genre_id === null || this.series.genre_id <= 0) {
|
if (this.series.genre_id === undefined || this.series.genre_id === null || this.series.genre_id <= 0) {
|
||||||
this.notifyError(this.$t('view.content.series.validation.genreRequired'))
|
this.notifyError('올바른 장르를 선택하세요')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -615,10 +523,10 @@ export default {
|
|||||||
return {name: item.genre, value: item.id}
|
return {name: item.genre, value: item.id}
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
this.notifyError(res.data.message || this.$t('common.error.unknown'))
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
this.notifyError(this.$t('common.error.unknown'))
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -834,16 +742,6 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.cover-image {
|
.cover-image {
|
||||||
aspect-ratio: 210/297;
|
aspect-ratio: 1/1.3;
|
||||||
}
|
|
||||||
|
|
||||||
.cropper-wrapper {
|
|
||||||
max-height: 70vh;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cropper-image {
|
|
||||||
display: block;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,93 +1,44 @@
|
|||||||
<template>
|
<template>
|
||||||
<v-app>
|
<v-app>
|
||||||
<v-main>
|
<v-main>
|
||||||
<v-container fluid>
|
<v-container
|
||||||
<v-row
|
align-center
|
||||||
align="start"
|
justify-center
|
||||||
justify="center"
|
>
|
||||||
style="padding-top: 10vh;"
|
<v-card class="elevation-12">
|
||||||
>
|
<v-card-text>
|
||||||
<v-col
|
<v-form>
|
||||||
cols="12"
|
<v-text-field
|
||||||
sm="8"
|
v-model="email"
|
||||||
md="4"
|
label="Email"
|
||||||
>
|
type="text"
|
||||||
<v-card class="elevation-12">
|
/>
|
||||||
<v-card-text>
|
<v-text-field
|
||||||
<v-form>
|
v-model="password"
|
||||||
<v-text-field
|
:append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
|
||||||
v-model="email"
|
:type="showPassword ? 'text' : 'password'"
|
||||||
:label="$t('view.login.email')"
|
label="Password"
|
||||||
type="text"
|
@click:append="showPassword = !showPassword"
|
||||||
/>
|
@keyup.enter="loginSubmit"
|
||||||
<v-text-field
|
/>
|
||||||
v-model="password"
|
</v-form>
|
||||||
:append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
|
</v-card-text>
|
||||||
:type="showPassword ? 'text' : 'password'"
|
<v-card-actions>
|
||||||
:label="$t('view.login.password')"
|
<v-spacer />
|
||||||
@click:append="showPassword = !showPassword"
|
<v-btn
|
||||||
@keyup.enter="loginSubmit"
|
color="primary"
|
||||||
/>
|
@click="loginSubmit"
|
||||||
</v-form>
|
>
|
||||||
</v-card-text>
|
로그인
|
||||||
<v-card-actions>
|
</v-btn>
|
||||||
<v-spacer />
|
</v-card-actions>
|
||||||
<v-btn
|
</v-card>
|
||||||
color="primary"
|
|
||||||
@click="loginSubmit"
|
|
||||||
>
|
|
||||||
{{ $t('view.login.login') }}
|
|
||||||
</v-btn>
|
|
||||||
</v-card-actions>
|
|
||||||
<v-divider />
|
|
||||||
<v-card-text class="text-center">
|
|
||||||
<div
|
|
||||||
style="display: flex; flex-direction: column; align-items: center; gap: 10px;"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
id="google-login-btn"
|
|
||||||
style="width: 192px; height: 45px; display: flex; align-items: center; justify-content: center;"
|
|
||||||
/>
|
|
||||||
<v-btn
|
|
||||||
width="192"
|
|
||||||
height="45"
|
|
||||||
class="pa-0"
|
|
||||||
elevation="0"
|
|
||||||
color="black"
|
|
||||||
dark
|
|
||||||
@click="loginApple"
|
|
||||||
>
|
|
||||||
<v-icon left>
|
|
||||||
mdi-apple
|
|
||||||
</v-icon>
|
|
||||||
{{ $t('view.login.loginWithApple') }}
|
|
||||||
</v-btn>
|
|
||||||
<v-btn
|
|
||||||
width="192"
|
|
||||||
height="45"
|
|
||||||
class="pa-0"
|
|
||||||
elevation="0"
|
|
||||||
color="transparent"
|
|
||||||
@click="loginKakao"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src="@/assets/kakao_login.png"
|
|
||||||
:alt="$t('alt.kakaoLoginButton')"
|
|
||||||
style="width: 100%; height: 100%; display: block;"
|
|
||||||
>
|
|
||||||
</v-btn>
|
|
||||||
</div>
|
|
||||||
</v-card-text>
|
|
||||||
</v-card>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-container>
|
</v-container>
|
||||||
</v-main>
|
</v-main>
|
||||||
</v-app>
|
</v-app>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
/* global Kakao, AppleID */
|
|
||||||
export default {
|
export default {
|
||||||
name: "Login",
|
name: "Login",
|
||||||
|
|
||||||
@@ -97,303 +48,7 @@ export default {
|
|||||||
password: '',
|
password: '',
|
||||||
}),
|
}),
|
||||||
|
|
||||||
mounted() {
|
|
||||||
// Google 버튼은 로케일별로 SDK를 동적 로드하여 렌더링
|
|
||||||
this.mountGoogleButtonForLocale(this.$i18n && this.$i18n.locale ? this.$i18n.locale : 'en');
|
|
||||||
this.initKakaoLogin();
|
|
||||||
this.initAppleLogin();
|
|
||||||
|
|
||||||
// 언어 전환 시 Google 버튼도 재로드/재렌더
|
|
||||||
if (this.$watch && this.$i18n) {
|
|
||||||
this.$watch(() => this.$i18n.locale, (val) => {
|
|
||||||
this.mountGoogleButtonForLocale(val || 'en');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
// iOS randomNonceString과 동일한 규칙으로 raw nonce 생성
|
|
||||||
generateNonce(length = 32) {
|
|
||||||
if (length <= 0) {
|
|
||||||
throw new Error('Nonce length must be greater than zero.');
|
|
||||||
}
|
|
||||||
|
|
||||||
const crypto = window.crypto || window.msCrypto;
|
|
||||||
const charset = '0123456789ABCDEFGHIJKLMNOPQRSTUVXYZabcdefghijklmnopqrstuvwxyz-._';
|
|
||||||
let result = '';
|
|
||||||
let remainingLength = length;
|
|
||||||
|
|
||||||
while (remainingLength > 0) {
|
|
||||||
const randoms = new Uint8Array(16);
|
|
||||||
|
|
||||||
try {
|
|
||||||
crypto.getRandomValues(randoms);
|
|
||||||
} catch (e) {
|
|
||||||
// iOS 코드와 동일하게 난수 생성 실패 시 UUID 폴백
|
|
||||||
if (crypto && typeof crypto.randomUUID === 'function') {
|
|
||||||
return crypto.randomUUID();
|
|
||||||
}
|
|
||||||
return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11)
|
|
||||||
.replace(/[018]/g, c => (
|
|
||||||
c ^ ((Math.random() * 16) >> (c / 4))
|
|
||||||
).toString(16));
|
|
||||||
}
|
|
||||||
|
|
||||||
for (let i = 0; i < randoms.length && remainingLength > 0; i++) {
|
|
||||||
if (randoms[i] < charset.length) {
|
|
||||||
result += charset[randoms[i]];
|
|
||||||
remainingLength -= 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return result;
|
|
||||||
},
|
|
||||||
|
|
||||||
async sha256Hex(message) {
|
|
||||||
if (!(window.crypto && window.crypto.subtle && typeof TextEncoder !== 'undefined')) {
|
|
||||||
throw new Error('SHA-256 해시를 지원하지 않는 환경입니다.');
|
|
||||||
}
|
|
||||||
|
|
||||||
const enc = new TextEncoder().encode(message);
|
|
||||||
const buf = await window.crypto.subtle.digest('SHA-256', enc);
|
|
||||||
const arr = new Uint8Array(buf);
|
|
||||||
let binary = '';
|
|
||||||
for (let i = 0; i < arr.length; i++) {
|
|
||||||
binary += String.fromCharCode(arr[i]);
|
|
||||||
}
|
|
||||||
|
|
||||||
return btoa(binary)
|
|
||||||
.replace(/\+/g, '-')
|
|
||||||
.replace(/\//g, '_')
|
|
||||||
.replace(/=+$/, '');
|
|
||||||
},
|
|
||||||
|
|
||||||
initAppleLogin() {
|
|
||||||
if (typeof AppleID !== 'undefined' && AppleID.auth) {
|
|
||||||
try {
|
|
||||||
const clientId = process.env.VUE_APP_APPLE_CLIENT_ID;
|
|
||||||
const redirectURI = process.env.VUE_APP_APPLE_REDIRECT_URI;
|
|
||||||
|
|
||||||
if (!clientId || !redirectURI) {
|
|
||||||
console.warn('[Apple Sign-In] 환경변수 누락: VUE_APP_APPLE_CLIENT_ID 혹은 VUE_APP_APPLE_REDIRECT_URI');
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const redirectOrigin = new URL(redirectURI).origin;
|
|
||||||
if (redirectOrigin !== window.location.origin) {
|
|
||||||
console.warn('[Apple Sign-In] redirectURI 오리진이 현재 앱과 다릅니다.', {
|
|
||||||
redirectURI,
|
|
||||||
redirectOrigin,
|
|
||||||
appOrigin: window.location.origin,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.warn('[Apple Sign-In] redirectURI 파싱 실패:', redirectURI);
|
|
||||||
}
|
|
||||||
|
|
||||||
AppleID.auth.init({
|
|
||||||
clientId,
|
|
||||||
scope: 'email',
|
|
||||||
redirectURI,
|
|
||||||
state: window.location.origin,
|
|
||||||
usePopup: true,
|
|
||||||
response_type: 'code id_token',
|
|
||||||
response_mode: 'fragment',
|
|
||||||
});
|
|
||||||
} catch (e) {
|
|
||||||
console.error('AppleID init error', e);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
setTimeout(() => {
|
|
||||||
this.initAppleLogin();
|
|
||||||
}, 500);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
loginApple() {
|
|
||||||
if (typeof AppleID === 'undefined' || !AppleID.auth) {
|
|
||||||
this.initAppleLogin();
|
|
||||||
this.notifyError(this.$t('notice.loading.appleSdk'));
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
(async () => {
|
|
||||||
try {
|
|
||||||
// 1) 로그인 시점에 nonce 생성 및 해시
|
|
||||||
const rawNonce = this.generateNonce(32);
|
|
||||||
const hashedNonceHex = await this.sha256Hex(rawNonce);
|
|
||||||
|
|
||||||
// 2) nonce 반영 위해 재초기화(AppleID가 마지막 init 값을 사용)
|
|
||||||
const clientId = process.env.VUE_APP_APPLE_CLIENT_ID;
|
|
||||||
const redirectURI = process.env.VUE_APP_APPLE_REDIRECT_URI;
|
|
||||||
|
|
||||||
if (!clientId || !redirectURI) {
|
|
||||||
console.warn('[Apple Sign-In] 환경변수 누락: VUE_APP_APPLE_CLIENT_ID 혹은 VUE_APP_APPLE_REDIRECT_URI');
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const redirectOrigin = new URL(redirectURI).origin;
|
|
||||||
if (redirectOrigin !== window.location.origin) {
|
|
||||||
console.warn('[Apple Sign-In] redirectURI 오리진이 현재 앱과 다릅니다.', {
|
|
||||||
redirectURI,
|
|
||||||
redirectOrigin,
|
|
||||||
appOrigin: window.location.origin,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.warn('[Apple Sign-In] redirectURI 파싱 실패:', redirectURI);
|
|
||||||
}
|
|
||||||
|
|
||||||
AppleID.auth.init({
|
|
||||||
clientId,
|
|
||||||
scope: 'email',
|
|
||||||
redirectURI,
|
|
||||||
state: window.location.origin,
|
|
||||||
usePopup: true,
|
|
||||||
response_type: 'code id_token',
|
|
||||||
response_mode: 'fragment',
|
|
||||||
nonce: hashedNonceHex,
|
|
||||||
});
|
|
||||||
|
|
||||||
// 3) 팝업 로그인
|
|
||||||
const res = await AppleID.auth.signIn();
|
|
||||||
const idToken = res && res.authorization && res.authorization.id_token;
|
|
||||||
|
|
||||||
if (!idToken) {
|
|
||||||
this.notifyError(this.$t('common.error.apple.invalidResponse'));
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 4) 서버 스키마에 맞춰 전달
|
|
||||||
const payload = { identityToken: idToken, nonce: rawNonce };
|
|
||||||
|
|
||||||
this.$store.dispatch('accountStore/LOGIN_APPLE', payload)
|
|
||||||
.then(() => {
|
|
||||||
this.$router.push(this.$route.query.redirect || '/')
|
|
||||||
})
|
|
||||||
.catch((message) => {
|
|
||||||
this.notifyError(message);
|
|
||||||
})
|
|
||||||
} catch (err) {
|
|
||||||
this.notifyError(this.$t('common.error.apple.failed'));
|
|
||||||
console.error(err);
|
|
||||||
}
|
|
||||||
})();
|
|
||||||
},
|
|
||||||
|
|
||||||
initKakaoLogin() {
|
|
||||||
if (typeof Kakao !== 'undefined') {
|
|
||||||
if (!Kakao.isInitialized()) {
|
|
||||||
Kakao.init(process.env.VUE_APP_KAKAO_JS_KEY);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
setTimeout(() => {
|
|
||||||
this.initKakaoLogin();
|
|
||||||
}, 500);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
loginKakao() {
|
|
||||||
if (typeof Kakao !== 'undefined') {
|
|
||||||
if (!Kakao.isInitialized()) {
|
|
||||||
this.initKakaoLogin();
|
|
||||||
this.notifyError(this.$t('common.error.kakao.notInitialized'));
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (Kakao.Auth && typeof Kakao.Auth.login === 'function') {
|
|
||||||
Kakao.Auth.login({
|
|
||||||
success: (authObj) => {
|
|
||||||
this.$store.dispatch('accountStore/LOGIN_KAKAO', { accessToken: authObj.access_token })
|
|
||||||
.then(() => {
|
|
||||||
this.$router.push(this.$route.query.redirect || '/')
|
|
||||||
})
|
|
||||||
.catch((message) => {
|
|
||||||
this.notifyError(message);
|
|
||||||
})
|
|
||||||
},
|
|
||||||
fail: (err) => {
|
|
||||||
this.notifyError(this.$t('common.error.kakao.failed'));
|
|
||||||
console.error(err);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
this.notifyError(this.$t('common.error.kakao.moduleLoad'));
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
this.initKakaoLogin();
|
|
||||||
this.notifyError(this.$t('notice.loading.kakaoSdk'));
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// Google Identity Services SDK 동적 로더
|
|
||||||
loadGisScript(locale) {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
try {
|
|
||||||
const prev = document.getElementById('gis-sdk');
|
|
||||||
if (prev && prev.parentNode) prev.parentNode.removeChild(prev);
|
|
||||||
|
|
||||||
// 가능한 범위 내 초기화/정리
|
|
||||||
if (window.google && window.google.accounts && window.google.accounts.id) {
|
|
||||||
try { window.google.accounts.id.cancel(); } catch (e) { /* noop */ }
|
|
||||||
}
|
|
||||||
try { delete window.google; } catch (e) { window.google = undefined; }
|
|
||||||
|
|
||||||
const script = document.createElement('script');
|
|
||||||
script.id = 'gis-sdk';
|
|
||||||
// 캐시 무효화를 위해 ts 파라미터 부여(언어 전환 즉시 반영 보조)
|
|
||||||
const ts = Date.now();
|
|
||||||
script.src = `https://accounts.google.com/gsi/client?hl=${encodeURIComponent(locale)}&v=${ts}`;
|
|
||||||
script.async = true;
|
|
||||||
script.defer = true;
|
|
||||||
script.onload = () => resolve();
|
|
||||||
script.onerror = (e) => reject(e);
|
|
||||||
document.head.appendChild(script);
|
|
||||||
} catch (e) {
|
|
||||||
reject(e);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
// Google 버튼 렌더링
|
|
||||||
renderGoogleButton() {
|
|
||||||
/* global google */
|
|
||||||
if (!(window.google && window.google.accounts && window.google.accounts.id)) return;
|
|
||||||
|
|
||||||
window.google.accounts.id.initialize({
|
|
||||||
client_id: process.env.VUE_APP_GOOGLE_CLIENT_ID,
|
|
||||||
callback: this.handleCredentialResponse
|
|
||||||
});
|
|
||||||
|
|
||||||
const el = document.getElementById('google-login-btn');
|
|
||||||
if (el) {
|
|
||||||
el.innerHTML = '';
|
|
||||||
window.google.accounts.id.renderButton(el, { theme: 'outline', size: 'large', width: 192 });
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// 로케일에 맞춰 SDK 로드 후 버튼 렌더
|
|
||||||
async mountGoogleButtonForLocale(locale) {
|
|
||||||
try {
|
|
||||||
await this.loadGisScript(locale || 'en');
|
|
||||||
this.renderGoogleButton();
|
|
||||||
} catch (e) {
|
|
||||||
// eslint-disable-next-line no-console
|
|
||||||
console.error('[Google Identity Services] load/render failed:', e);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
handleCredentialResponse(response) {
|
|
||||||
const idToken = response.credential;
|
|
||||||
this.$store.dispatch('accountStore/LOGIN_GOOGLE', { idToken })
|
|
||||||
.then(() => {
|
|
||||||
this.$router.push(this.$route.query.redirect || '/')
|
|
||||||
})
|
|
||||||
.catch((message) => {
|
|
||||||
this.notifyError(message);
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
notifyError: async function (message) {
|
notifyError: async function (message) {
|
||||||
await this.$dialog.notify.error(message)
|
await this.$dialog.notify.error(message)
|
||||||
},
|
},
|
||||||
@@ -412,7 +67,7 @@ export default {
|
|||||||
this.notifyError(message);
|
this.notifyError(message);
|
||||||
})
|
})
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
this.notifyError(this.$t('common.error.login.checkInfo'));
|
this.notifyError('로그인 정보를 확인해주세요.');
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
<div>
|
<div>
|
||||||
<v-toolbar dark>
|
<v-toolbar dark>
|
||||||
<v-spacer />
|
<v-spacer />
|
||||||
<v-toolbar-title>{{ $t('view.signature.title') }}</v-toolbar-title>
|
<v-toolbar-title>시그니처 관리</v-toolbar-title>
|
||||||
<v-spacer />
|
<v-spacer />
|
||||||
</v-toolbar>
|
</v-toolbar>
|
||||||
<v-container>
|
<v-container>
|
||||||
@@ -16,7 +16,7 @@
|
|||||||
depressed
|
depressed
|
||||||
@click="showWriteDialog"
|
@click="showWriteDialog"
|
||||||
>
|
>
|
||||||
{{ $t('view.signature.actions.create') }}
|
시그니처 등록
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
@@ -34,7 +34,7 @@
|
|||||||
for="sort-newest"
|
for="sort-newest"
|
||||||
class="radio-label-sort"
|
class="radio-label-sort"
|
||||||
>
|
>
|
||||||
{{ $t('view.signature.sort.newest') }}
|
최신순
|
||||||
</label>
|
</label>
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col>
|
<v-col>
|
||||||
@@ -50,7 +50,7 @@
|
|||||||
for="sort-can-high"
|
for="sort-can-high"
|
||||||
class="radio-label-sort"
|
class="radio-label-sort"
|
||||||
>
|
>
|
||||||
{{ $t('view.signature.sort.canHigh') }}
|
높은캔순
|
||||||
</label>
|
</label>
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col>
|
<v-col>
|
||||||
@@ -66,7 +66,7 @@
|
|||||||
for="sort-can-low"
|
for="sort-can-low"
|
||||||
class="radio-label-sort"
|
class="radio-label-sort"
|
||||||
>
|
>
|
||||||
{{ $t('view.signature.sort.canLow') }}
|
낮은캔순
|
||||||
</label>
|
</label>
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col cols="10" />
|
<v-col cols="10" />
|
||||||
@@ -112,7 +112,7 @@
|
|||||||
:disabled="is_loading"
|
:disabled="is_loading"
|
||||||
@click="showModifyDialog(item)"
|
@click="showModifyDialog(item)"
|
||||||
>
|
>
|
||||||
{{ $t('view.signature.actions.edit') }}
|
수정
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col>
|
<v-col>
|
||||||
@@ -120,7 +120,7 @@
|
|||||||
:disabled="is_loading"
|
:disabled="is_loading"
|
||||||
@click="showDeleteConfirm(item)"
|
@click="showDeleteConfirm(item)"
|
||||||
>
|
>
|
||||||
{{ $t('view.signature.actions.delete') }}
|
삭제
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col />
|
<v-col />
|
||||||
@@ -148,17 +148,17 @@
|
|||||||
>
|
>
|
||||||
<v-card>
|
<v-card>
|
||||||
<v-card-title>
|
<v-card-title>
|
||||||
{{ $t('view.signature.dialog.createTitle') }}
|
시그니처 캔 등록
|
||||||
</v-card-title>
|
</v-card-title>
|
||||||
<v-card-text>
|
<v-card-text>
|
||||||
<v-row align="center">
|
<v-row align="center">
|
||||||
<v-col cols="4">
|
<v-col cols="4">
|
||||||
{{ $t('view.signature.fields.can') }}
|
캔
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col cols="8">
|
<v-col cols="8">
|
||||||
<v-text-field
|
<v-text-field
|
||||||
v-model="can"
|
v-model="can"
|
||||||
:label="$t('view.signature.fields.can')"
|
label="캔"
|
||||||
/>
|
/>
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
@@ -167,7 +167,7 @@
|
|||||||
<v-card-text>
|
<v-card-text>
|
||||||
<v-row>
|
<v-row>
|
||||||
<v-col cols="4">
|
<v-col cols="4">
|
||||||
{{ $t('view.signature.fields.adult') }}
|
19금
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col cols="8">
|
<v-col cols="8">
|
||||||
<input
|
<input
|
||||||
@@ -181,12 +181,12 @@
|
|||||||
<v-card-text>
|
<v-card-text>
|
||||||
<v-row align="center">
|
<v-row align="center">
|
||||||
<v-col cols="4">
|
<v-col cols="4">
|
||||||
{{ $t('view.signature.fields.image') }}
|
이미지
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col cols="8">
|
<v-col cols="8">
|
||||||
<div class="image-select">
|
<div class="image-select">
|
||||||
<label for="image">
|
<label for="image">
|
||||||
{{ $t('view.signature.actions.loadImage') }}
|
이미지 불러오기
|
||||||
</label>
|
</label>
|
||||||
<v-file-input
|
<v-file-input
|
||||||
id="image"
|
id="image"
|
||||||
@@ -208,12 +208,12 @@
|
|||||||
<v-card-text>
|
<v-card-text>
|
||||||
<v-row align="center">
|
<v-row align="center">
|
||||||
<v-col cols="4">
|
<v-col cols="4">
|
||||||
{{ $t('view.signature.fields.timeSec') }}
|
시간(초)
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col cols="8">
|
<v-col cols="8">
|
||||||
<v-text-field
|
<v-text-field
|
||||||
v-model="time"
|
v-model="time"
|
||||||
:label="$t('view.signature.fields.timeSec')"
|
label="시간(초)"
|
||||||
/>
|
/>
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
@@ -325,14 +325,14 @@
|
|||||||
text
|
text
|
||||||
@click="cancel"
|
@click="cancel"
|
||||||
>
|
>
|
||||||
{{ $t('common.actions.cancel') }}
|
취소
|
||||||
</v-btn>
|
</v-btn>
|
||||||
<v-btn
|
<v-btn
|
||||||
color="blue darken-1"
|
color="blue darken-1"
|
||||||
text
|
text
|
||||||
@click="modifySignatureCan"
|
@click="modifySignatureCan"
|
||||||
>
|
>
|
||||||
{{ $t('view.signature.actions.edit') }}
|
수정
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</v-card-actions>
|
</v-card-actions>
|
||||||
</v-card>
|
</v-card>
|
||||||
@@ -347,7 +347,7 @@
|
|||||||
<v-card>
|
<v-card>
|
||||||
<v-card-text />
|
<v-card-text />
|
||||||
<v-card-text>
|
<v-card-text>
|
||||||
{{ $t('common.confirm.delete') }}
|
삭제하시겠습니까?
|
||||||
</v-card-text>
|
</v-card-text>
|
||||||
<v-card-actions v-show="!is_loading">
|
<v-card-actions v-show="!is_loading">
|
||||||
<v-spacer />
|
<v-spacer />
|
||||||
@@ -356,63 +356,24 @@
|
|||||||
text
|
text
|
||||||
@click="cancel"
|
@click="cancel"
|
||||||
>
|
>
|
||||||
{{ $t('common.actions.cancel') }}
|
취소
|
||||||
</v-btn>
|
</v-btn>
|
||||||
<v-btn
|
<v-btn
|
||||||
color="blue darken-1"
|
color="blue darken-1"
|
||||||
text
|
text
|
||||||
@click="deleteSignature"
|
@click="deleteSignature"
|
||||||
>
|
>
|
||||||
{{ $t('common.actions.confirm') }}
|
확인
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</v-card-actions>
|
</v-card-actions>
|
||||||
</v-card>
|
</v-card>
|
||||||
</v-dialog>
|
</v-dialog>
|
||||||
</v-row>
|
</v-row>
|
||||||
|
|
||||||
<v-dialog
|
|
||||||
v-model="show_cropper_dialog"
|
|
||||||
max-width="800px"
|
|
||||||
persistent
|
|
||||||
>
|
|
||||||
<v-card>
|
|
||||||
<v-card-title>{{ $t('view.signature.dialog.cropTitle') }}</v-card-title>
|
|
||||||
<v-card-text>
|
|
||||||
<div class="cropper-wrapper">
|
|
||||||
<img
|
|
||||||
ref="cropper_image"
|
|
||||||
:src="cropper_image_url"
|
|
||||||
alt="Cropper Image"
|
|
||||||
class="cropper-image"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</v-card-text>
|
|
||||||
<v-card-actions>
|
|
||||||
<v-spacer />
|
|
||||||
<v-btn
|
|
||||||
color="grey darken-1"
|
|
||||||
text
|
|
||||||
@click="cancelCropper"
|
|
||||||
>
|
|
||||||
{{ $t('common.actions.cancel') }}
|
|
||||||
</v-btn>
|
|
||||||
<v-btn
|
|
||||||
color="blue darken-1"
|
|
||||||
text
|
|
||||||
@click="cropImage"
|
|
||||||
>
|
|
||||||
{{ $t('view.signature.actions.cropDone') }}
|
|
||||||
</v-btn>
|
|
||||||
</v-card-actions>
|
|
||||||
</v-card>
|
|
||||||
</v-dialog>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import * as api from "@/api/signature";
|
import * as api from "@/api/signature";
|
||||||
import Cropper from 'cropperjs';
|
|
||||||
import 'cropperjs/dist/cropper.css';
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "SignatureManagement",
|
name: "SignatureManagement",
|
||||||
@@ -438,37 +399,33 @@ export default {
|
|||||||
selected_signature_can: {},
|
selected_signature_can: {},
|
||||||
sort_type: 'NEWEST',
|
sort_type: 'NEWEST',
|
||||||
|
|
||||||
show_cropper_dialog: false,
|
|
||||||
cropper_image_url: '',
|
|
||||||
cropper: null,
|
|
||||||
|
|
||||||
headers: [
|
headers: [
|
||||||
{
|
{
|
||||||
text: this.$t('view.signature.headers.can'),
|
text: '캔',
|
||||||
align: 'center',
|
align: 'center',
|
||||||
sortable: false,
|
sortable: false,
|
||||||
value: 'can',
|
value: 'can',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: this.$t('view.signature.headers.adult'),
|
text: '19금',
|
||||||
align: 'center',
|
align: 'center',
|
||||||
sortable: false,
|
sortable: false,
|
||||||
value: 'isAdult',
|
value: 'isAdult',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: this.$t('view.signature.headers.image'),
|
text: '이미지',
|
||||||
align: 'center',
|
align: 'center',
|
||||||
sortable: false,
|
sortable: false,
|
||||||
value: 'image',
|
value: 'image',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: this.$t('view.signature.headers.timeSec'),
|
text: '시간(초)',
|
||||||
align: 'center',
|
align: 'center',
|
||||||
sortable: false,
|
sortable: false,
|
||||||
value: 'time',
|
value: 'time',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: this.$t('view.signature.headers.actions'),
|
text: '관리',
|
||||||
align: 'center',
|
align: 'center',
|
||||||
sortable: false,
|
sortable: false,
|
||||||
value: 'management',
|
value: 'management',
|
||||||
@@ -493,69 +450,13 @@ export default {
|
|||||||
imageAdd(payload) {
|
imageAdd(payload) {
|
||||||
const file = payload;
|
const file = payload;
|
||||||
if (file) {
|
if (file) {
|
||||||
if (file._isCropped) return;
|
this.image_url = URL.createObjectURL(file)
|
||||||
|
URL.revokeObjectURL(file)
|
||||||
if (file.type === 'image/gif') {
|
|
||||||
this.image = file
|
|
||||||
this.image_url = URL.createObjectURL(file)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
this.cropper_image_url = URL.createObjectURL(file)
|
|
||||||
this.show_cropper_dialog = true
|
|
||||||
this.$nextTick(() => {
|
|
||||||
if (this.cropper) {
|
|
||||||
this.cropper.destroy()
|
|
||||||
}
|
|
||||||
this.cropper = new Cropper(this.$refs.cropper_image, {
|
|
||||||
viewMode: 1,
|
|
||||||
})
|
|
||||||
})
|
|
||||||
} else {
|
} else {
|
||||||
this.image_url = null
|
this.image_url = null
|
||||||
this.image = null
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
cancelCropper() {
|
|
||||||
this.show_cropper_dialog = false
|
|
||||||
if (this.cropper) {
|
|
||||||
this.cropper.destroy()
|
|
||||||
this.cropper = null
|
|
||||||
}
|
|
||||||
this.cropper_image_url = ''
|
|
||||||
this.image = null
|
|
||||||
this.image_url = null
|
|
||||||
},
|
|
||||||
|
|
||||||
cropImage() {
|
|
||||||
const canvas = this.cropper.getCroppedCanvas()
|
|
||||||
let finalCanvas = canvas
|
|
||||||
|
|
||||||
const MAX_WIDTH = 800
|
|
||||||
if (canvas.width > MAX_WIDTH) {
|
|
||||||
const height = (MAX_WIDTH * canvas.height) / canvas.width
|
|
||||||
const resizeCanvas = document.createElement('canvas')
|
|
||||||
resizeCanvas.width = MAX_WIDTH
|
|
||||||
resizeCanvas.height = height
|
|
||||||
const ctx = resizeCanvas.getContext('2d')
|
|
||||||
ctx.drawImage(canvas, 0, 0, MAX_WIDTH, height)
|
|
||||||
finalCanvas = resizeCanvas
|
|
||||||
}
|
|
||||||
|
|
||||||
finalCanvas.toBlob((blob) => {
|
|
||||||
const file = new File([blob], 'signature_image.png', {type: 'image/png'})
|
|
||||||
file._isCropped = true
|
|
||||||
this.image = file
|
|
||||||
this.image_url = URL.createObjectURL(blob)
|
|
||||||
this.show_cropper_dialog = false
|
|
||||||
if (this.cropper) {
|
|
||||||
this.cropper.destroy()
|
|
||||||
this.cropper = null
|
|
||||||
}
|
|
||||||
}, 'image/png')
|
|
||||||
},
|
|
||||||
|
|
||||||
showWriteDialog() {
|
showWriteDialog() {
|
||||||
this.show_write_dialog = true
|
this.show_write_dialog = true
|
||||||
},
|
},
|
||||||
@@ -565,9 +466,9 @@ export default {
|
|||||||
this.can === 0 ||
|
this.can === 0 ||
|
||||||
this.image === null
|
this.image === null
|
||||||
) {
|
) {
|
||||||
this.notifyError(this.$t('view.signature.validation.fillRequired'))
|
this.notifyError('내용을 입력하세요')
|
||||||
} else if (this.time < 3 || this.time > 20) {
|
} else if (this.time < 3 || this.time > 20) {
|
||||||
this.notifyError(this.$t('view.signature.validation.timeRange'))
|
this.notifyError('시간은 3초 이상 20초 이하를 입력하세요.')
|
||||||
} else {
|
} else {
|
||||||
this.submit()
|
this.submit()
|
||||||
}
|
}
|
||||||
@@ -622,7 +523,7 @@ export default {
|
|||||||
this.total_page = total_page
|
this.total_page = total_page
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
this.notifyError(this.$t('common.error.unknown'))
|
this.notifyError("알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.")
|
||||||
} finally {
|
} finally {
|
||||||
this.is_loading = false
|
this.is_loading = false
|
||||||
}
|
}
|
||||||
@@ -643,16 +544,16 @@ export default {
|
|||||||
const res = await api.createSignature(formData)
|
const res = await api.createSignature(formData)
|
||||||
if (res.status === 200 && res.data.success === true) {
|
if (res.status === 200 && res.data.success === true) {
|
||||||
this.cancel()
|
this.cancel()
|
||||||
this.notifySuccess(res.data.message || this.$t('view.signature.messages.created'))
|
this.notifySuccess(res.data.message || '등록되었습니다.')
|
||||||
|
|
||||||
this.page = 1
|
this.page = 1
|
||||||
await this.getSignatureList()
|
await this.getSignatureList()
|
||||||
} else {
|
} else {
|
||||||
this.is_loading = false
|
this.is_loading = false
|
||||||
this.notifyError(res.data.message || this.$t('common.error.unknown'))
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
this.notifyError(this.$t('common.error.unknown'))
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
this.is_loading = false
|
this.is_loading = false
|
||||||
} finally {
|
} finally {
|
||||||
this.is_loading = false
|
this.is_loading = false
|
||||||
@@ -666,7 +567,7 @@ export default {
|
|||||||
this.can === this.selected_signature_can.can &&
|
this.can === this.selected_signature_can.can &&
|
||||||
this.time === this.selected_signature_can.time
|
this.time === this.selected_signature_can.time
|
||||||
) {
|
) {
|
||||||
this.notifyError(this.$t('view.signature.messages.noChanges'))
|
this.notifyError('변경사항이 없습니다.')
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -697,16 +598,16 @@ export default {
|
|||||||
const res = await api.modifySignature(formData)
|
const res = await api.modifySignature(formData)
|
||||||
if (res.status === 200 && res.data.success === true) {
|
if (res.status === 200 && res.data.success === true) {
|
||||||
this.cancel()
|
this.cancel()
|
||||||
this.notifySuccess(res.data.message || this.$t('view.signature.messages.updated'))
|
this.notifySuccess(res.data.message || '수정되었습니다.')
|
||||||
|
|
||||||
this.page = 1
|
this.page = 1
|
||||||
await this.getSignatureList()
|
await this.getSignatureList()
|
||||||
} else {
|
} else {
|
||||||
this.is_loading = false
|
this.is_loading = false
|
||||||
this.notifyError(res.data.message || this.$t('common.error.unknown'))
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
this.notifyError(this.$t('common.error.unknown'))
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
this.is_loading = false
|
this.is_loading = false
|
||||||
} finally {
|
} finally {
|
||||||
this.is_loading = false
|
this.is_loading = false
|
||||||
@@ -726,16 +627,16 @@ export default {
|
|||||||
const res = await api.modifySignature(formData)
|
const res = await api.modifySignature(formData)
|
||||||
if (res.status === 200 && res.data.success === true) {
|
if (res.status === 200 && res.data.success === true) {
|
||||||
this.cancel()
|
this.cancel()
|
||||||
this.notifySuccess(res.data.message || this.$t('view.signature.messages.deleted'))
|
this.notifySuccess(res.data.message || '등록되었습니다.')
|
||||||
|
|
||||||
this.page = 1
|
this.page = 1
|
||||||
await this.getSignatureList()
|
await this.getSignatureList()
|
||||||
} else {
|
} else {
|
||||||
this.is_loading = false
|
this.is_loading = false
|
||||||
this.notifyError(res.data.message || this.$t('common.error.unknown'))
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
this.notifyError(this.$t('common.error.unknown'))
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
this.is_loading = false
|
this.is_loading = false
|
||||||
} finally {
|
} finally {
|
||||||
this.is_loading = false
|
this.is_loading = false
|
||||||
@@ -812,14 +713,4 @@ export default {
|
|||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #3bb9f1;
|
color: #3bb9f1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cropper-wrapper {
|
|
||||||
max-height: 500px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cropper-image {
|
|
||||||
display: block;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,121 +0,0 @@
|
|||||||
#!/usr/bin/env bash
|
|
||||||
|
|
||||||
print_usage() {
|
|
||||||
echo "Usage:"
|
|
||||||
echo " $0"
|
|
||||||
echo " $0 <commit-hash>"
|
|
||||||
echo " $0 --message \"<commit-message>\""
|
|
||||||
echo " $0 --message-file <file-path>"
|
|
||||||
}
|
|
||||||
|
|
||||||
load_commit_message() {
|
|
||||||
if [ $# -eq 0 ]; then
|
|
||||||
local commit_ref="HEAD"
|
|
||||||
echo "Checking latest commit..." >&2
|
|
||||||
git log -1 --pretty=format:"%s%n%b" "$commit_ref"
|
|
||||||
return
|
|
||||||
fi
|
|
||||||
|
|
||||||
case "$1" in
|
|
||||||
-h|--help)
|
|
||||||
print_usage
|
|
||||||
exit 0
|
|
||||||
;;
|
|
||||||
--message)
|
|
||||||
shift
|
|
||||||
if [ $# -eq 0 ]; then
|
|
||||||
echo "[FAIL] --message option requires a commit message"
|
|
||||||
print_usage
|
|
||||||
exit 1
|
|
||||||
fi
|
|
||||||
echo "Checking provided commit message..." >&2
|
|
||||||
printf '%s' "$*"
|
|
||||||
;;
|
|
||||||
--message-file)
|
|
||||||
shift
|
|
||||||
if [ $# -ne 1 ]; then
|
|
||||||
echo "[FAIL] --message-file option requires a file path"
|
|
||||||
print_usage
|
|
||||||
exit 1
|
|
||||||
fi
|
|
||||||
if [ ! -f "$1" ]; then
|
|
||||||
echo "[FAIL] Commit message file not found: $1"
|
|
||||||
exit 1
|
|
||||||
fi
|
|
||||||
echo "Checking commit message file: $1" >&2
|
|
||||||
cat "$1"
|
|
||||||
;;
|
|
||||||
*)
|
|
||||||
if [ $# -ne 1 ]; then
|
|
||||||
echo "[FAIL] Invalid arguments"
|
|
||||||
print_usage
|
|
||||||
exit 1
|
|
||||||
fi
|
|
||||||
|
|
||||||
local commit_ref="$1"
|
|
||||||
if ! git rev-parse --verify "$commit_ref^{commit}" >/dev/null 2>&1; then
|
|
||||||
echo "[FAIL] Invalid commit reference: $commit_ref"
|
|
||||||
exit 1
|
|
||||||
fi
|
|
||||||
|
|
||||||
echo "Checking commit: $commit_ref" >&2
|
|
||||||
git log -1 --pretty=format:"%s%n%b" "$commit_ref"
|
|
||||||
;;
|
|
||||||
esac
|
|
||||||
}
|
|
||||||
|
|
||||||
commit_message=$(load_commit_message "$@")
|
|
||||||
subject=$(printf '%s\n' "$commit_message" | head -n1)
|
|
||||||
body=$(printf '%s\n' "$commit_message" | tail -n +2)
|
|
||||||
|
|
||||||
echo "Checking commit message format..."
|
|
||||||
echo "Subject: $subject"
|
|
||||||
|
|
||||||
exit_code=0
|
|
||||||
|
|
||||||
if [ -z "$subject" ]; then
|
|
||||||
echo "[FAIL] Subject must not be empty"
|
|
||||||
exit 1
|
|
||||||
fi
|
|
||||||
|
|
||||||
subject_pattern='^([a-z]+)(\([a-z0-9._/-]+\))?(!)?: (.+)$'
|
|
||||||
if [[ "$subject" =~ $subject_pattern ]]; then
|
|
||||||
type="${BASH_REMATCH[1]}"
|
|
||||||
description="${BASH_REMATCH[4]}"
|
|
||||||
|
|
||||||
echo "[PASS] Subject follows Conventional Commit format"
|
|
||||||
echo "[PASS] Type is lowercase: $type"
|
|
||||||
|
|
||||||
if printf '%s\n' "$description" | grep -Eq '[가-힣]'; then
|
|
||||||
echo "[PASS] Description contains Korean text"
|
|
||||||
else
|
|
||||||
echo "[FAIL] Description must contain Korean text"
|
|
||||||
exit_code=1
|
|
||||||
fi
|
|
||||||
else
|
|
||||||
echo "[FAIL] Subject must match: <type>(scope): <description>"
|
|
||||||
echo " scope is optional, example: feat: 기능을 추가한다"
|
|
||||||
exit_code=1
|
|
||||||
fi
|
|
||||||
|
|
||||||
if [ -n "$body" ] && printf '%s\n' "$body" | grep -Eq '^Refs:'; then
|
|
||||||
while IFS= read -r refs_line; do
|
|
||||||
if ! printf '%s\n' "$refs_line" | grep -Eq '^Refs: #[0-9]+(, #[0-9]+)*$'; then
|
|
||||||
echo "[FAIL] Refs footer format is invalid: $refs_line"
|
|
||||||
echo " expected format: Refs: #123 or Refs: #123, #456"
|
|
||||||
exit_code=1
|
|
||||||
fi
|
|
||||||
done < <(printf '%s\n' "$body" | grep -E '^Refs:')
|
|
||||||
|
|
||||||
if [ $exit_code -eq 0 ]; then
|
|
||||||
echo "[PASS] Refs footer format is valid"
|
|
||||||
fi
|
|
||||||
fi
|
|
||||||
|
|
||||||
if [ $exit_code -eq 0 ]; then
|
|
||||||
echo "[PASS] Commit message follows AGENTS.md rules"
|
|
||||||
else
|
|
||||||
echo "[FAIL] Commit message violates AGENTS.md rules"
|
|
||||||
fi
|
|
||||||
|
|
||||||
exit $exit_code
|
|
||||||
Reference in New Issue
Block a user