aidev/goldenChart
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

앱 위젯에서 구분선 리사이즈 안되는 문제 수정

Browse Source
This commit is contained in:
Macbook
2026-06-14 17:54:26 +09:00
parent 7f5e7b22d2
commit ead2ba6b3a
9 changed files with 229 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/package.json
+1
View File
@@ -14,6 +14,7 @@
"dependencies": {
"@capacitor/android": "^7.0.0",
"@capacitor/app": "^7.0.0",
"@capacitor/browser": "^7.0.5",
"@capacitor/core": "^7.0.0",
"@capacitor/haptics": "^7.0.0",
"@capacitor/ios": "^7.0.0",
app/src/services/appUpdate.ts
+69 -9
View File
@@ -2,7 +2,9 @@
* Android 앱 내 업데이트 — /api/mobile-app/info 버전 비교 후 APK 다운로드
*/
import { App } from '@capacitor/app';
import { Browser } from '@capacitor/browser';
import { Capacitor } from '@capacitor/core';
import { Preferences } from '@capacitor/preferences';
import {
isRemoteVersionNewer,
loadMobileAppReleaseInfo,
@@ -16,7 +18,8 @@ export interface AppUpdateCheckResult {
release?: MobileAppReleaseInfoDto | null;
}
const skipKey = (remote: string) => `gc_skip_update_${remote}`;
const skipSessionKey = (remote: string) => `gc_skip_update_${remote}`;
const pendingInstallKey = 'gc_pending_update_install';
export async function getCurrentAppVersion(): Promise<string> {
if (!Capacitor.isNativePlatform()) {
@@ -30,10 +33,49 @@ export async function getCurrentAppVersion(): Promise<string> {
}
}
async function getPendingInstallVersion(): Promise<string | null> {
try {
const { value } = await Preferences.get({ key: pendingInstallKey });
return value?.trim() || null;
} catch {
return null;
}
}
async function setPendingInstallVersion(remoteVersion: string): Promise<void> {
try {
await Preferences.set({ key: pendingInstallKey, value: remoteVersion });
} catch {
/* ignore */
}
}
async function clearPendingInstallVersion(): Promise<void> {
try {
await Preferences.remove({ key: pendingInstallKey });
} catch {
/* ignore */
}
}
/** 설치 완료 시 pending 플래그 제거 */
async function reconcilePendingInstall(currentVersion: string, remoteVersion?: string): Promise<void> {
const pending = await getPendingInstallVersion();
if (!pending) return;
if (remoteVersion && !isRemoteVersionNewer(currentVersion, remoteVersion)) {
await clearPendingInstallVersion();
return;
}
if (!isRemoteVersionNewer(currentVersion, pending)) {
await clearPendingInstallVersion();
}
}
export async function checkForAppUpdate(): Promise<AppUpdateCheckResult> {
const currentVersion = await getCurrentAppVersion();
const release = await loadMobileAppReleaseInfo();
const remoteVersion = release?.version?.trim();
await reconcilePendingInstall(currentVersion, remoteVersion);
const updateAvailable = Boolean(
release?.available
&& remoteVersion
@@ -49,14 +91,19 @@ export async function openApkDownload(release?: MobileAppReleaseInfoDto | null):
if (!url) return false;
if (Capacitor.isNativePlatform() && Capacitor.getPlatform() === 'android') {
const opened = window.open(url, '_blank', 'noopener,noreferrer');
if (opened) return true;
try {
await Browser.open({ url, presentationStyle: 'popover' });
return true;
} catch {
/* Browser 플러그인 실패 시 anchor fallback */
}
}
const a = document.createElement('a');
a.href = url;
a.rel = 'noopener';
a.download = info?.fileName ?? 'goldenchart-android.apk';
a.target = '_blank';
document.body.appendChild(a);
a.click();
a.remove();
@@ -65,7 +112,7 @@ export async function openApkDownload(release?: MobileAppReleaseInfoDto | null):
export function isUpdateDismissed(remoteVersion: string): boolean {
try {
return sessionStorage.getItem(skipKey(remoteVersion)) === '1';
return sessionStorage.getItem(skipSessionKey(remoteVersion)) === '1';
} catch {
return false;
}
@@ -73,13 +120,24 @@ export function isUpdateDismissed(remoteVersion: string): boolean {
export function dismissUpdate(remoteVersion: string): void {
try {
sessionStorage.setItem(skipKey(remoteVersion), '1');
sessionStorage.setItem(skipSessionKey(remoteVersion), '1');
} catch {
/* ignore */
}
}
/** 업데이트 확인 후 confirm → APK 다운로드. skipIfDismissed면 세션 내 거부 버전 생략 */
/** 다운로드 시작 후 같은 버전 재알림 방지 (설치 완료 전) */
export async function isUpdatePendingInstall(remoteVersion: string): Promise<boolean> {
const pending = await getPendingInstallVersion();
return pending === remoteVersion;
}
export async function shouldSkipUpdatePrompt(remoteVersion: string): Promise<boolean> {
if (isUpdateDismissed(remoteVersion)) return true;
return isUpdatePendingInstall(remoteVersion);
}
/** 업데이트 확인 후 confirm → APK 다운로드. skipIfDismissed면 세션 거부·다운로드 대기 중 생략 */
export async function promptAppUpdate(options?: {
skipIfDismissed?: boolean;
}): Promise<boolean> {
@@ -92,7 +150,7 @@ export async function promptAppUpdate(options?: {
return false;
}
if (options?.skipIfDismissed && isUpdateDismissed(check.remoteVersion)) {
if (options?.skipIfDismissed && await shouldSkipUpdatePrompt(check.remoteVersion)) {
return false;
}
@@ -107,11 +165,12 @@ export async function promptAppUpdate(options?: {
return false;
}
await setPendingInstallVersion(check.remoteVersion);
await openApkDownload(check.release);
return true;
}
/** 설정 화면 — 수동 업데이트 확인 */
/** 설정 화면 — 수동 업데이트 확인 (pending 스킵 무시) */
export async function checkAndPromptAppUpdate(): Promise<AppUpdateCheckResult> {
const result = await checkForAppUpdate();
if (!result.updateAvailable) {
@@ -122,7 +181,8 @@ export async function checkAndPromptAppUpdate(): Promise<AppUpdateCheckResult> {
`새 버전 v${result.remoteVersion} 사용 가능.\n`
+ `현재 v${result.currentVersion}\n\nAPK를 다운로드하시겠습니까?`,
);
if (ok) {
if (ok && result.remoteVersion) {
await setPendingInstallVersion(result.remoteVersion);
await openApkDownload(result.release);
}
return result;
backend/src/main/java/com/goldenchart/service/MobileAppReleaseService.java
+27 -3
View File
@@ -57,12 +57,11 @@ public class MobileAppReleaseService {
Instant updated = Files.getLastModifiedTime(file).toInstant();
String base = normalizeBase(publicBaseUrl);
String downloadUrl = base + "/api/mobile-app/download/android";
String version = resolveApkVersion(file);
return MobileAppReleaseInfoDto.builder()
.available(true)
.fileName(file.getFileName().toString())
.version(configuredVersion != null && !configuredVersion.isBlank()
? configuredVersion
: DT_FMT.format(updated))
.version(version)
.sizeBytes(size)
.updatedAt(DT_FMT.format(updated))
.downloadUrl(downloadUrl)
@@ -141,4 +140,29 @@ public class MobileAppReleaseService {
}
return publicBaseUrl.replaceAll("/+$", "");
}
/** APK와 함께 기록된 .version sidecar → .env configuredVersion → 파일 수정 시각 */
private String resolveApkVersion(Path apkFile) {
String apkName = apkFile.getFileName().toString();
Path sidecar = apkFile.getParent().resolve(
apkName.replaceAll("(?i)\\.apk$", "") + ".version");
try {
if (Files.isRegularFile(sidecar)) {
String fromFile = Files.readString(sidecar).trim();
if (!fromFile.isBlank()) {
return fromFile;
}
}
} catch (IOException e) {
log.warn("[mobile-app] read version sidecar failed: {}", e.getMessage());
}
if (configuredVersion != null && !configuredVersion.isBlank()) {
return configuredVersion.trim();
}
try {
return DT_FMT.format(Files.getLastModifiedTime(apkFile).toInstant());
} catch (IOException e) {
return "unknown";
}
}
}
frontend/public/install.html
+4 -3
View File
@@ -71,10 +71,11 @@
'<p class="muted" style="margin-top:12px">' + (info.version ? 'v' + info.version + ' · ' : '') +
(info.sizeBytes ? (info.sizeBytes / 1048576).toFixed(1) + ' MB' : '') + '</p>' +
'<a class="btn" href="' + url + '" download>APK 다운로드</a>' +
'<ol style="margin-top:20px"><li>다운로드 후 APK 파일을 열어 설치</li>' +
'<ol style="margin-top:20px"><li>다운로드 후 APK 파일을 열어 설치를 <strong>완료</strong>하세요</li>' +
'<li>「알 수 없는 출처」 허용 필요 시 설정에서 활성화</li>' +
'<li>앱은 서버(exdev.co.kr)에 자동 연결됩니다</li>' +
'<li>새 버전은 앱 시작·설정 → 업데이트 확인</li></ol>';
'<li>패키지: <code>com.goldenchart.app</code> (다른 GoldenChart 앱과 구분)</li>' +
'<li>「Unable to load script」 오류 시 예전 앱을 삭제 후 재설치</li>' +
'<li>앱은 서버(exdev.co.kr)에 자동 연결됩니다</li></ol>';
QRCode.toCanvas(document.getElementById('qr'), url, { width: 200, margin: 1 });
} catch (e) {
el.innerHTML = '<p class="err">앱 정보를 불러오지 못했습니다.</p>';
frontend/src/components/floatingWidgets/FloatingWidgetWindow.tsx
+39 -11
View File
@@ -37,9 +37,27 @@ const FloatingWidgetWindow: React.FC<Props> = ({
nativeShell = false,
}) => {
const [pickSlotId, setPickSlotId] = useState<string | null>(null);
const bodyWrapRef = useRef<HTMLDivElement>(null);
const bodyRef = useRef<HTMLDivElement>(null);
const [bodySize, setBodySize] = useState({ width: 0, height: 0 });
const resolveBodySize = useCallback(() => {
const wrap = bodyWrapRef.current;
const body = bodyRef.current;
const width = wrap?.clientWidth ?? body?.clientWidth ?? bodySize.width;
const height = wrap?.clientHeight ?? body?.clientHeight ?? bodySize.height;
if (width > 0 && height > 0) {
return { width, height };
}
if (nativeShell) {
return {
width: width > 0 ? width : instance.width,
height: height > 0 ? height : instance.height,
};
}
return { width, height };
}, [bodySize.height, bodySize.width, instance.height, instance.width, nativeShell]);
const rowFr = instance.rowFr?.length === instance.rows
? instance.rowFr
: defaultGridFr(instance.rows);
@@ -92,15 +110,17 @@ const FloatingWidgetWindow: React.FC<Props> = ({
onUpdateGridFr(next, colFrRef.current);
}, [onUpdateGridFr]);
const notifyLayoutSync = useCallback(() => {
window.dispatchEvent(new CustomEvent('gc-widget-layout-sync'));
}, []);
const { onColSplitPointerDown, onRowSplitPointerDown } = useFloatingWidgetGridSplit({
onColFrChange: handleColFrChange,
onRowFrChange: handleRowFrChange,
getColFr: () => colFrRef.current,
getRowFr: () => rowFrRef.current,
getBodySize: () => ({
width: bodyRef.current?.clientWidth ?? bodySize.width,
height: bodyRef.current?.clientHeight ?? bodySize.height,
}),
getBodySize: resolveBodySize,
onSplitEnd: notifyLayoutSync,
});
const updateSlot = useCallback((slotId: string, updater: (s: WidgetSlot) => WidgetSlot) => {
@@ -119,24 +139,30 @@ const FloatingWidgetWindow: React.FC<Props> = ({
/* 창·그리드 크기 변경 시 내부 차트·위젯 레이아웃 재동기화 */
useEffect(() => {
const el = bodyRef.current;
const el = bodyWrapRef.current ?? bodyRef.current;
if (!el) return undefined;
let timer: ReturnType<typeof setTimeout> | null = null;
const scheduleLayoutSync = () => {
setBodySize({ width: el.clientWidth, height: el.clientHeight });
const wrap = bodyWrapRef.current;
const body = bodyRef.current;
setBodySize({
width: wrap?.clientWidth ?? body?.clientWidth ?? 0,
height: wrap?.clientHeight ?? body?.clientHeight ?? 0,
});
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
window.dispatchEvent(new CustomEvent('gc-widget-layout-sync'));
}, 80);
timer = setTimeout(notifyLayoutSync, 80);
};
scheduleLayoutSync();
const ro = new ResizeObserver(() => scheduleLayoutSync());
ro.observe(el);
if (bodyRef.current && bodyRef.current !== el) {
ro.observe(bodyRef.current);
}
return () => {
if (timer) clearTimeout(timer);
ro.disconnect();
};
}, [instance.rows, instance.cols]);
}, [instance.rows, instance.cols, notifyLayoutSync]);
const colSplitPositions = useMemo(
() => gridSplitPositions(colFr, bodySize.width, 1),
@@ -193,7 +219,7 @@ const FloatingWidgetWindow: React.FC<Props> = ({
</div>
)}
<div className="fw-window-body-wrap">
<div ref={bodyWrapRef} className="fw-window-body-wrap">
<div
ref={bodyRef}
className="fw-window-body"
@@ -221,6 +247,7 @@ const FloatingWidgetWindow: React.FC<Props> = ({
key={`col-${index}`}
className="fw-grid-splitter fw-grid-splitter--v"
style={{ left }}
data-no-chart-pan="true"
role="separator"
aria-orientation="vertical"
aria-label={`열 ${index + 1}·${index + 2} 경계 조절`}
@@ -232,6 +259,7 @@ const FloatingWidgetWindow: React.FC<Props> = ({
key={`row-${index}`}
className="fw-grid-splitter fw-grid-splitter--h"
style={{ top }}
data-no-chart-pan="true"
role="separator"
aria-orientation="horizontal"
aria-label={`행 ${index + 1}·${index + 2} 경계 조절`}
frontend/src/hooks/useFloatingWidgetGridSplit.ts
+44 -25
View File
@@ -5,7 +5,7 @@ import {
FLOATING_WIDGET_CELL_MIN_W,
FLOATING_WIDGET_GRID_GAP,
} from '../types/floatingWidget';
import { bindWindowDrag, isPrimaryPointerButton } from '../utils/pointerDrag';
import { isPrimaryPointerButton } from '../utils/pointerDrag';
type SplitAxis = 'col' | 'row';
@@ -15,6 +15,7 @@ interface Options {
getColFr: () => number[];
getRowFr: () => number[];
getBodySize: () => { width: number; height: number };
onSplitEnd?: () => void;
}
export function useFloatingWidgetGridSplit({
@@ -23,18 +24,12 @@ export function useFloatingWidgetGridSplit({
getColFr,
getRowFr,
getBodySize,
onSplitEnd,
}: Options) {
const unbindDragRef = useRef<(() => void) | null>(null);
const endDrag = useCallback(() => {
unbindDragRef.current?.();
unbindDragRef.current = null;
document.body.style.cursor = '';
document.body.style.userSelect = '';
}, []);
const activeDragRef = useRef<(() => void) | null>(null);
useEffect(() => () => {
unbindDragRef.current?.();
activeDragRef.current?.();
document.body.style.cursor = '';
document.body.style.userSelect = '';
}, []);
@@ -60,43 +55,67 @@ export function useFloatingWidgetGridSplit({
const startY = e.clientY;
const startColFr = [...getColFr()];
const startRowFr = [...getRowFr()];
const startSize = getBodySize();
document.body.style.cursor = axis === 'col' ? 'col-resize' : 'row-resize';
document.body.style.userSelect = 'none';
unbindDragRef.current?.();
unbindDragRef.current = bindWindowDrag(
(xy) => {
activeDragRef.current?.();
const onMove = (ev: PointerEvent) => {
const size = getBodySize();
if (axis === 'col') {
const delta = xy.x - startX;
if (size.width <= 0) return;
const delta = ev.clientX - startX;
onColFrChange(adjustAdjacentGridFr(
startColFr,
index,
delta,
startSize.width,
size.width,
FLOATING_WIDGET_GRID_GAP,
FLOATING_WIDGET_CELL_MIN_W,
));
return;
}
const delta = xy.y - startY;
if (size.height <= 0) return;
const delta = ev.clientY - startY;
onRowFrChange(adjustAdjacentGridFr(
startRowFr,
index,
delta,
startSize.height,
size.height,
FLOATING_WIDGET_GRID_GAP,
FLOATING_WIDGET_CELL_MIN_H,
));
},
() => {
};
const onUp = (ev: PointerEvent) => {
handle.classList.remove('fw-grid-splitter--active');
endDrag();
},
{ preventTouchScroll: true },
);
}, [endDrag, getBodySize, getColFr, getRowFr, onColFrChange, onRowFrChange]);
document.body.style.cursor = '';
document.body.style.userSelect = '';
try {
if (handle.hasPointerCapture(ev.pointerId)) {
handle.releasePointerCapture(ev.pointerId);
}
} catch {
/* ignore */
}
document.removeEventListener('pointermove', onMove, true);
document.removeEventListener('pointerup', onUp, true);
document.removeEventListener('pointercancel', onUp, true);
activeDragRef.current = null;
onSplitEnd?.();
};
document.addEventListener('pointermove', onMove, { capture: true });
document.addEventListener('pointerup', onUp, { capture: true });
document.addEventListener('pointercancel', onUp, { capture: true });
activeDragRef.current = () => {
document.removeEventListener('pointermove', onMove, true);
document.removeEventListener('pointerup', onUp, true);
document.removeEventListener('pointercancel', onUp, true);
};
}, [getBodySize, getColFr, getRowFr, onColFrChange, onRowFrChange, onSplitEnd]);
const onColSplitPointerDown = useCallback(
(index: number) => (e: React.PointerEvent) => startSplit(e, 'col', index),
frontend/src/styles/floatingWidget.css
+14
View File
@@ -648,8 +648,22 @@ html.fw-native-widget #root {
.fw-window--native .fw-window-body-wrap {
flex: 1;
min-height: 0;
min-width: 0;
position: relative;
}
.fw-window--native .fw-window-body {
flex: 1;
min-height: 0;
min-width: 0;
width: 100%;
height: 100%;
}
.fw-window--native .fw-grid-split-layer {
z-index: 1000;
}
.fw-window--native .fw-grid-splitter {
z-index: 1001;
}
package-lock.json
Generated
+10
View File
@@ -18,6 +18,7 @@
"dependencies": {
"@capacitor/android": "^7.0.0",
"@capacitor/app": "^7.0.0",
"@capacitor/browser": "^7.0.5",
"@capacitor/core": "^7.0.0",
"@capacitor/haptics": "^7.0.0",
"@capacitor/ios": "^7.0.0",
@@ -421,6 +422,15 @@
"@capacitor/core": ">=7.0.0"
}
},
"node_modules/@capacitor/browser": {
"version": "7.0.5",
"resolved": "https://registry.npmjs.org/@capacitor/browser/-/browser-7.0.5.tgz",
"integrity": "sha512-YF/kC1m1e6c81X/agtAnYItVlqiQ/nXLG+Q3QXNDuiMoRynqa3Guu8ZaV9kWvqQcHoE2w18xz7WGpPOuh+R1fA==",
"license": "MIT",
"peerDependencies": {
"@capacitor/core": ">=7.0.0"
}
},
"node_modules/@capacitor/cli": {
"version": "7.6.5",
"resolved": "https://registry.npmjs.org/@capacitor/cli/-/cli-7.6.5.tgz",
scripts/build-mobile-apk.sh
+7
View File
@@ -43,6 +43,13 @@ sign_release_apk() {
--ks-pass pass:goldenchart --key-pass pass:goldenchart "$signed"
mkdir -p "$(dirname "$LOCAL_APK")"
cp "$signed" "$LOCAL_APK"
VERSION_NAME="$(grep -E 'versionName[[:space:]]+"' "$ROOT/app/android/app/build.gradle" | head -1 | sed -E 's/.*versionName[[:space:]]+"([^"]+)".*/\1/' || true)"
if [[ -n "$VERSION_NAME" ]]; then
printf '%s\n' "$VERSION_NAME" > "${LOCAL_APK%.apk}.version"
log "버전 sidecar: ${LOCAL_APK%.apk}.version → $VERSION_NAME"
fi
log "서명 완료: $LOCAL_APK"
}