@uniai-fe/ui-legacy 0.1.32 → 0.1.34
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -55,17 +55,18 @@ export default function ModalBasicRoot({
|
|
|
55
55
|
if (stackState?.modalProps.show === "init") {
|
|
56
56
|
updateModal({ stackKey, modalProps: { show: true } });
|
|
57
57
|
}
|
|
58
|
-
}, [stackKey, stackState
|
|
58
|
+
}, [stackKey, stackState?.modalProps.show, updateModal]);
|
|
59
59
|
|
|
60
|
-
//
|
|
60
|
+
// 변경 설명: close 시 show=false도 즉시 반영해 remove 타이머 전 DOM 상태가 정확히 내려가게 한다.
|
|
61
61
|
useEffect(() => {
|
|
62
|
-
if (stackState?.modalProps.show)
|
|
62
|
+
if (typeof stackState?.modalProps.show !== "undefined") {
|
|
63
63
|
setShow(
|
|
64
64
|
typeof stackState.modalProps.show === "boolean"
|
|
65
65
|
? stackState.modalProps.show
|
|
66
66
|
: true,
|
|
67
67
|
);
|
|
68
|
-
|
|
68
|
+
}
|
|
69
|
+
}, [stackState?.modalProps.show]);
|
|
69
70
|
|
|
70
71
|
return (
|
|
71
72
|
modalProps && (
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
|
-
import { useCallback, useEffect, useState } from "react";
|
|
3
|
+
import { useCallback, useEffect, useRef, useState } from "react";
|
|
4
4
|
import { useAtom } from "jotai";
|
|
5
5
|
|
|
6
6
|
import { modalDraggableState, modalState } from "../jotai/modal";
|
|
@@ -25,6 +25,19 @@ export default function useModal(isDraggable?: "draggable") {
|
|
|
25
25
|
callback: undefined,
|
|
26
26
|
});
|
|
27
27
|
|
|
28
|
+
// 변경 설명: async 이후 close 호출도 최신 stack 상태를 참조하도록 ref를 동기화한다.
|
|
29
|
+
const modalStacksRef = useRef<ModalStateType[]>(modalStacks);
|
|
30
|
+
const modalDraggableStacksRef =
|
|
31
|
+
useRef<ModalStateType[]>(modalDraggableStacks);
|
|
32
|
+
|
|
33
|
+
useEffect(() => {
|
|
34
|
+
modalStacksRef.current = modalStacks;
|
|
35
|
+
}, [modalStacks]);
|
|
36
|
+
|
|
37
|
+
useEffect(() => {
|
|
38
|
+
modalDraggableStacksRef.current = modalDraggableStacks;
|
|
39
|
+
}, [modalDraggableStacks]);
|
|
40
|
+
|
|
28
41
|
// 스택 중복 확인
|
|
29
42
|
const isExistStack = useCallback(
|
|
30
43
|
(stackState: ModalStateType[], stackKey: string): boolean => {
|
|
@@ -67,9 +80,6 @@ export default function useModal(isDraggable?: "draggable") {
|
|
|
67
80
|
...stacks,
|
|
68
81
|
{ ...newStack, modalProps: { ...newStack.modalProps, show: "init" } },
|
|
69
82
|
]);
|
|
70
|
-
|
|
71
|
-
// console.log(`[useModal :: newModal] newStack: `, newStack);
|
|
72
|
-
// console.log(`[useModal :: newModal] modalStacks: `, modalStacks);
|
|
73
83
|
},
|
|
74
84
|
[
|
|
75
85
|
isDraggable,
|
|
@@ -87,9 +97,6 @@ export default function useModal(isDraggable?: "draggable") {
|
|
|
87
97
|
*/
|
|
88
98
|
const updateModal = useCallback(
|
|
89
99
|
(updateStack: ModalStateType) => {
|
|
90
|
-
// console.log(`[useModal :: updateModal] updateStack: `, updateStack);
|
|
91
|
-
// console.log(`[useModal :: updateModal] modalStacks: `, modalStacks);
|
|
92
|
-
|
|
93
100
|
// 드래거블 모달 상태 업데이트
|
|
94
101
|
if (isDraggable) {
|
|
95
102
|
updateModalDraggableStack((stacks: ModalStateType[]) => {
|
|
@@ -124,7 +131,6 @@ export default function useModal(isDraggable?: "draggable") {
|
|
|
124
131
|
});
|
|
125
132
|
},
|
|
126
133
|
[isDraggable, updateModalDraggableStack, updateModalStack],
|
|
127
|
-
// [modalStacks, updateModalStack],
|
|
128
134
|
);
|
|
129
135
|
|
|
130
136
|
/**
|
|
@@ -139,37 +145,18 @@ export default function useModal(isDraggable?: "draggable") {
|
|
|
139
145
|
stackKey: string;
|
|
140
146
|
callback?: () => void;
|
|
141
147
|
}) => {
|
|
142
|
-
|
|
143
|
-
|
|
148
|
+
const targetStacks = isDraggable
|
|
149
|
+
? modalDraggableStacksRef.current
|
|
150
|
+
: modalStacksRef.current;
|
|
144
151
|
|
|
145
|
-
|
|
146
|
-
if (
|
|
147
|
-
(isDraggable && modalDraggableStacks.length === 0) ||
|
|
148
|
-
(!isDraggable && modalStacks.length === 0)
|
|
149
|
-
) {
|
|
152
|
+
if (targetStacks.length === 0) {
|
|
150
153
|
console.log(`[useModal :: closeModal] modalStacks 없음`);
|
|
151
154
|
return;
|
|
152
155
|
}
|
|
153
156
|
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
// );
|
|
158
|
-
// 지정 키와 일치하는 스택 체크
|
|
159
|
-
const filteredStacks = isDraggable
|
|
160
|
-
? modalDraggableStacks.filter(stack => {
|
|
161
|
-
// console.log(
|
|
162
|
-
// `stack.stackKey(${stack.stackKey}) === closeStackKey${closeStackKey}`,
|
|
163
|
-
// );
|
|
164
|
-
return stack.stackKey === closeStackKey;
|
|
165
|
-
})
|
|
166
|
-
: modalStacks.filter(stack => {
|
|
167
|
-
// console.log(
|
|
168
|
-
// `stack.stackKey(${stack.stackKey}) === closeStackKey${closeStackKey}`,
|
|
169
|
-
// );
|
|
170
|
-
return stack.stackKey === closeStackKey;
|
|
171
|
-
});
|
|
172
|
-
// console.log(`[useModal :: closeModal] filteredStacks: `, filteredStacks);
|
|
157
|
+
const filteredStacks = targetStacks.filter(
|
|
158
|
+
stack => stack.stackKey === closeStackKey,
|
|
159
|
+
);
|
|
173
160
|
|
|
174
161
|
if (filteredStacks.length === 0) {
|
|
175
162
|
console.log(
|
|
@@ -179,8 +166,6 @@ export default function useModal(isDraggable?: "draggable") {
|
|
|
179
166
|
}
|
|
180
167
|
|
|
181
168
|
const closeStack = filteredStacks[0] as ModalStateType;
|
|
182
|
-
// console.log(`[useModal :: closeModal] closeStack: `, closeStack);
|
|
183
|
-
|
|
184
169
|
const {
|
|
185
170
|
modalProps: { showDelay },
|
|
186
171
|
} = closeStack;
|
|
@@ -211,74 +196,41 @@ export default function useModal(isDraggable?: "draggable") {
|
|
|
211
196
|
});
|
|
212
197
|
});
|
|
213
198
|
|
|
214
|
-
//
|
|
215
|
-
|
|
199
|
+
// 변경 설명: stale close 탐색만 최소 보정하고, 기존 제거 예약 구조는 유지한다.
|
|
200
|
+
setCloseFlag({
|
|
216
201
|
stackKey: closeStackKey,
|
|
217
202
|
showDelay: typeof showDelay === "number" ? showDelay : 400,
|
|
218
203
|
callback,
|
|
219
|
-
};
|
|
220
|
-
setCloseFlag(updateCloseFlag);
|
|
204
|
+
});
|
|
221
205
|
},
|
|
222
|
-
[
|
|
223
|
-
isDraggable,
|
|
224
|
-
modalDraggableStacks,
|
|
225
|
-
modalStacks,
|
|
226
|
-
updateModalDraggableStack,
|
|
227
|
-
updateModalStack,
|
|
228
|
-
],
|
|
206
|
+
[isDraggable, updateModalDraggableStack, updateModalStack],
|
|
229
207
|
);
|
|
230
208
|
|
|
231
209
|
// 닫기 동작 시, 닫기 모션 후 스택 제거
|
|
232
210
|
useEffect(() => {
|
|
233
211
|
if (!closeFlag.stackKey) return;
|
|
234
|
-
// console.log(`[useModal :: closeModal - useEffect] closeFlag:`, closeFlag);
|
|
235
212
|
|
|
236
|
-
// 효과 지연시간 이후 모달스택 제거
|
|
237
213
|
let closeTimer: NodeJS.Timeout | undefined = undefined;
|
|
238
214
|
|
|
239
|
-
// 지연 시간 뒤 동작
|
|
240
215
|
closeTimer = setTimeout(() => {
|
|
241
|
-
// 모달 스택 업데이트
|
|
242
216
|
if (isDraggable)
|
|
243
217
|
updateModalDraggableStack((stacks: ModalStateType[]) => {
|
|
244
|
-
// 스택이 없는 경우, 그대로 반환
|
|
245
218
|
if (stacks.length === 0) return stacks;
|
|
246
219
|
|
|
247
|
-
|
|
248
|
-
const filteredStacks = stacks.filter(
|
|
249
|
-
stack => stack.stackKey !== closeFlag.stackKey,
|
|
250
|
-
);
|
|
251
|
-
|
|
252
|
-
// console.log(
|
|
253
|
-
// `[useModal :: closeModal - useEffect] update filteredStacks:`,
|
|
254
|
-
// filteredStacks,
|
|
255
|
-
// );
|
|
256
|
-
return filteredStacks;
|
|
220
|
+
return stacks.filter(stack => stack.stackKey !== closeFlag.stackKey);
|
|
257
221
|
});
|
|
258
222
|
else
|
|
259
223
|
updateModalStack((stacks: ModalStateType[]) => {
|
|
260
|
-
// 스택이 없는 경우, 그대로 반환
|
|
261
224
|
if (stacks.length === 0) return stacks;
|
|
262
225
|
|
|
263
|
-
|
|
264
|
-
const filteredStacks = stacks.filter(
|
|
265
|
-
stack => stack.stackKey !== closeFlag.stackKey,
|
|
266
|
-
);
|
|
267
|
-
|
|
268
|
-
// console.log(
|
|
269
|
-
// `[useModal :: closeModal - useEffect] update filteredStacks:`,
|
|
270
|
-
// filteredStacks,
|
|
271
|
-
// );
|
|
272
|
-
return filteredStacks;
|
|
226
|
+
return stacks.filter(stack => stack.stackKey !== closeFlag.stackKey);
|
|
273
227
|
});
|
|
274
228
|
|
|
275
229
|
if (closeFlag.callback) closeFlag.callback();
|
|
276
230
|
|
|
277
|
-
// 닫기 상태 초기화
|
|
278
231
|
setCloseFlag({ stackKey: "", showDelay: 400 });
|
|
279
232
|
}, closeFlag.showDelay);
|
|
280
233
|
|
|
281
|
-
// 언마운트 시 타이머 초기화
|
|
282
234
|
return () => {
|
|
283
235
|
if (closeTimer !== undefined) clearTimeout(closeTimer);
|
|
284
236
|
closeTimer = undefined;
|