@uniai-fe/ui-legacy 0.1.33 → 0.1.35

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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uniai-fe/ui-legacy",
3
- "version": "0.1.33",
3
+ "version": "0.1.35",
4
4
  "description": "Legacy UI Toolkit for UNIAI FE Projects",
5
5
  "type": "module",
6
6
  "private": false,
@@ -10,7 +10,7 @@
10
10
  "publishConfig": {
11
11
  "access": "public"
12
12
  },
13
- "packageManager": "pnpm@10.32.1",
13
+ "packageManager": "pnpm@10.33.0",
14
14
  "engines": {
15
15
  "node": ">=24",
16
16
  "pnpm": ">=10"
@@ -97,28 +97,28 @@
97
97
  "@mantine/dates": "^8.3.18",
98
98
  "@mantine/hooks": "^8.3.18",
99
99
  "@mantine/tiptap": "^8.3.18",
100
- "@tanstack/react-query": "^5.90.21",
101
- "@tiptap/core": "3.20.4",
102
- "@tiptap/extension-blockquote": "3.20.4",
103
- "@tiptap/extension-bold": "3.20.4",
104
- "@tiptap/extension-code": "3.20.4",
105
- "@tiptap/extension-code-block": "3.20.4",
106
- "@tiptap/extension-document": "3.20.4",
107
- "@tiptap/extension-hard-break": "3.20.4",
108
- "@tiptap/extension-heading": "3.20.4",
109
- "@tiptap/extension-horizontal-rule": "3.20.4",
110
- "@tiptap/extension-italic": "3.20.4",
111
- "@tiptap/extension-link": "3.20.4",
112
- "@tiptap/extension-list": "3.20.4",
113
- "@tiptap/extension-paragraph": "3.20.4",
114
- "@tiptap/extension-placeholder": "3.20.4",
115
- "@tiptap/extension-strike": "3.20.4",
116
- "@tiptap/extension-text": "3.20.4",
117
- "@tiptap/extension-text-align": "3.20.4",
118
- "@tiptap/extension-underline": "3.20.4",
119
- "@tiptap/pm": "3.20.4",
120
- "@tiptap/react": "3.20.4",
121
- "@tiptap/starter-kit": "3.20.4",
100
+ "@tanstack/react-query": "^5.97.0",
101
+ "@tiptap/core": "3.22.0",
102
+ "@tiptap/extension-blockquote": "3.22.0",
103
+ "@tiptap/extension-bold": "3.22.0",
104
+ "@tiptap/extension-code": "3.22.0",
105
+ "@tiptap/extension-code-block": "3.22.0",
106
+ "@tiptap/extension-document": "3.22.0",
107
+ "@tiptap/extension-hard-break": "3.22.0",
108
+ "@tiptap/extension-heading": "3.22.0",
109
+ "@tiptap/extension-horizontal-rule": "3.22.0",
110
+ "@tiptap/extension-italic": "3.22.0",
111
+ "@tiptap/extension-link": "3.22.0",
112
+ "@tiptap/extension-list": "3.22.0",
113
+ "@tiptap/extension-paragraph": "3.22.0",
114
+ "@tiptap/extension-placeholder": "3.22.0",
115
+ "@tiptap/extension-strike": "3.22.0",
116
+ "@tiptap/extension-text": "3.22.0",
117
+ "@tiptap/extension-text-align": "3.22.0",
118
+ "@tiptap/extension-underline": "3.22.0",
119
+ "@tiptap/pm": "3.22.0",
120
+ "@tiptap/react": "3.22.0",
121
+ "@tiptap/starter-kit": "3.22.0",
122
122
  "@types/node": "^24.10.2",
123
123
  "@types/react": "^19.2.14",
124
124
  "@types/react-dom": "^19.2.3",
@@ -137,20 +137,20 @@
137
137
  "dayjs": "^1.11.20",
138
138
  "eslint": "^9.39.2",
139
139
  "flatpickr": "^4.6.13",
140
- "jotai": "^2.18.1",
140
+ "jotai": "^2.19.1",
141
141
  "next": "^15.5.11",
142
- "postcss": "^8.5.8",
142
+ "postcss": "^8.5.9",
143
143
  "postcss-preset-mantine": "^1.18.0",
144
144
  "postcss-simple-vars": "^7.0.1",
145
145
  "pretendard": "^1.3.9",
146
146
  "pretendard-jp": "^1.3.9",
147
- "prettier": "^3.8.1",
148
- "react": "^19.2.4",
147
+ "prettier": "^3.8.2",
148
+ "react": "^19.2.5",
149
149
  "react-daum-postcode": "^4.0.0",
150
- "react-dom": "^19.2.4",
150
+ "react-dom": "^19.2.5",
151
151
  "react-flatpickr": "3.10.13",
152
- "react-hook-form": "^7.71.2",
153
- "sass": "^1.98.0",
152
+ "react-hook-form": "^7.72.1",
153
+ "sass": "^1.99.0",
154
154
  "simplebar-core": "^1.3.2",
155
155
  "simplebar-react": "3.3.2",
156
156
  "styled-components": "6.1.19",
@@ -61,8 +61,27 @@ const dropdownItem = styled.li<StyledSelectDropdownProps>`
61
61
  $width ? `calc(${styleBaseSize("rem", $width)} - .2rem)` : "100%"};
62
62
  --dropdown-button-height: var(--field-item-height);
63
63
 
64
+ --field-item-width: ${({ $width }) =>
65
+ $width ? `calc(${styleBaseSize("rem", $width)} - .2rem)` : "100%"};
66
+ --field-item-wrapper-width: 100%;
67
+ --field-label-width: auto;
68
+ --field-item-flex-wrap: nowrap;
64
69
  --field-item-padding-horizontal: 1.5rem;
65
70
  --field-item-margin-horizontal: 0rem;
71
+
72
+ .field-item-container,
73
+ .field-item-wrapper,
74
+ .field-item-label {
75
+ min-width: 0;
76
+ overflow: hidden;
77
+ }
78
+
79
+ .field-item-label {
80
+ span {
81
+ overflow: hidden;
82
+ text-overflow: ellipsis;
83
+ }
84
+ }
66
85
  `;
67
86
 
68
87
  const dropdownButton = styled(StyledDropdown.button)`
@@ -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.modalProps.show, updateModal]);
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
- }, [stackState.modalProps.show]);
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
- // console.log(`[useModal :: closeModal] stackKey:`, closeStackKey);
143
- // console.log(`[useModal :: closeModal] modalStacks:`, modalStacks);
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
- // console.log(
155
- // `modalStacks`,
156
- // modalStacks.map(stack => stack.stackKey),
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
- const updateCloseFlag = {
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;
@@ -9,8 +9,8 @@ export const weatherCoordinate = atomWithReset<WeatherCoordinate>({
9
9
  lng: null,
10
10
  });
11
11
 
12
- export const harimCoordinate: WeatherCoordinate = {
13
- address: "전북 익산시",
14
- lat: 35.9372719,
15
- lng: 126.9601241,
16
- };
12
+ // export const harimCoordinate: WeatherCoordinate = {
13
+ // address: "전북 익산시",
14
+ // lat: 35.9372719,
15
+ // lng: 126.9601241,
16
+ // };