dn-react-router-toolkit 0.1.0 → 0.1.1
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/dist/cjs/auth-kit/apple_auth.js +1 -0
- package/dist/cjs/auth-kit/auth_service.js +6 -6
- package/dist/cjs/auth-kit/client/google_login_button.js +2 -8
- package/dist/cjs/auth-kit/client/redirect_page.js +4 -7
- package/dist/cjs/auth-kit/google_auth.js +4 -0
- package/dist/cjs/auth-kit/jwt.js +1 -0
- package/dist/cjs/auth-kit/kakao_auth.js +6 -1
- package/dist/cjs/components/modal/fullscreen_container.js +9 -24
- package/dist/cjs/components/modal/hooks.js +4 -6
- package/dist/cjs/components/modal/modal.js +7 -19
- package/dist/cjs/file-kit/client/drop_file_input.js +24 -71
- package/dist/cjs/file-kit/client/file_uploader.js +21 -11
- package/dist/cjs/file-kit/file_service.js +3 -0
- package/dist/cjs/file-kit/object_storage.js +4 -3
- package/dist/cjs/file-kit/responsive_image.js +4 -19
- package/dist/cjs/http-kit/response.js +5 -2
- package/dist/cjs/route/api/auth/refresh/route.js +1 -2
- package/dist/cjs/route/api/files/[fileId]/route.js +1 -1
- package/dist/cjs/route/api/files/route.js +1 -1
- package/dist/cjs/route/auth/callback/[provider]/route.js +4 -1
- package/dist/cjs/seo-kit/seo.js +33 -41
- package/dist/cjs/seo-kit/seo_loader.js +8 -12
- package/dist/esm/auth-kit/apple_auth.js +1 -0
- package/dist/esm/auth-kit/auth_service.js +6 -6
- package/dist/esm/auth-kit/client/google_login_button.d.ts +1 -2
- package/dist/esm/auth-kit/client/google_login_button.js +2 -5
- package/dist/esm/auth-kit/client/redirect_page.d.ts +1 -2
- package/dist/esm/auth-kit/client/redirect_page.js +2 -2
- package/dist/esm/auth-kit/google_auth.js +4 -0
- package/dist/esm/auth-kit/jwt.js +1 -0
- package/dist/esm/auth-kit/kakao_auth.js +6 -1
- package/dist/esm/components/modal/fullscreen_container.d.ts +1 -1
- package/dist/esm/components/modal/fullscreen_container.js +6 -18
- package/dist/esm/components/modal/hooks.d.ts +1 -1
- package/dist/esm/components/modal/hooks.js +4 -6
- package/dist/esm/components/modal/modal.d.ts +1 -1
- package/dist/esm/components/modal/modal.js +7 -19
- package/dist/esm/file-kit/client/drop_file_input.d.ts +2 -2
- package/dist/esm/file-kit/client/drop_file_input.js +24 -38
- package/dist/esm/file-kit/client/file_uploader.js +21 -11
- package/dist/esm/file-kit/file_service.js +3 -0
- package/dist/esm/file-kit/object_storage.js +4 -3
- package/dist/esm/file-kit/responsive_image.js +4 -16
- package/dist/esm/http-kit/response.js +5 -2
- package/dist/esm/route/api/auth/refresh/route.js +1 -2
- package/dist/esm/route/api/files/[fileId]/route.js +1 -1
- package/dist/esm/route/api/files/route.js +1 -1
- package/dist/esm/route/auth/callback/[provider]/route.js +4 -1
- package/dist/esm/seo-kit/seo.d.ts +1 -2
- package/dist/esm/seo-kit/seo.js +33 -38
- package/dist/esm/seo-kit/seo_loader.d.ts +1 -1
- package/dist/esm/seo-kit/seo_loader.js +8 -9
- package/package.json +1 -1
|
@@ -22,14 +22,16 @@ exports.REFRESH_TOKEN_COOKIE = (0, react_router_1.createCookie)(exports.REFRESH_
|
|
|
22
22
|
sameSite: "strict",
|
|
23
23
|
});
|
|
24
24
|
class AuthService {
|
|
25
|
+
repository;
|
|
26
|
+
JWT_MANAGER;
|
|
27
|
+
OBJECT_STORAGE;
|
|
25
28
|
constructor({ repository, JWT_MANAGER, OBJECT_STORAGE, }) {
|
|
26
29
|
this.repository = repository;
|
|
27
30
|
this.JWT_MANAGER = JWT_MANAGER;
|
|
28
31
|
this.OBJECT_STORAGE = OBJECT_STORAGE;
|
|
29
32
|
}
|
|
30
33
|
async verify(request) {
|
|
31
|
-
|
|
32
|
-
const accessToken = ((_a = request === null || request === void 0 ? void 0 : request.headers.get("Authorization")) === null || _a === void 0 ? void 0 : _a.replace("Bearer ", "")) ||
|
|
34
|
+
const accessToken = request?.headers.get("Authorization")?.replace("Bearer ", "") ||
|
|
33
35
|
(await this.getAccessTokenFromCookies(request));
|
|
34
36
|
if (accessToken) {
|
|
35
37
|
return this.JWT_MANAGER.verifyAccessToken(accessToken);
|
|
@@ -43,14 +45,12 @@ class AuthService {
|
|
|
43
45
|
return this.refresh(request);
|
|
44
46
|
}
|
|
45
47
|
async getAccessTokenFromCookies(request) {
|
|
46
|
-
var _a;
|
|
47
48
|
const cookieStore = await exports.ACCESS_TOKEN_COOKIE.parse(request.headers.get("cookie"));
|
|
48
|
-
return
|
|
49
|
+
return cookieStore.get(exports.ACCESS_TOKEN_KEY)?.value;
|
|
49
50
|
}
|
|
50
51
|
async getRefreshTokenFromCookies(request) {
|
|
51
|
-
var _a;
|
|
52
52
|
const cookieStore = await exports.REFRESH_TOKEN_COOKIE.parse(request.headers.get("cookie"));
|
|
53
|
-
return
|
|
53
|
+
return cookieStore.get(exports.REFRESH_TOKEN_KEY)?.value;
|
|
54
54
|
}
|
|
55
55
|
async refresh(request) {
|
|
56
56
|
const refreshToken = await this.getRefreshTokenFromCookies(request);
|
|
@@ -1,10 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
3
|
exports.GoogleLoginButton = GoogleLoginButton;
|
|
7
|
-
const
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
5
|
const fc_1 = require("react-icons/fc");
|
|
9
6
|
const react_router_1 = require("react-router");
|
|
10
7
|
function GoogleLoginButton({ className = "max-w-[300px] w-full", GOOGLE_CLIENT_ID, GOOGLE_REDIRECT_URI, }) {
|
|
@@ -18,8 +15,5 @@ function GoogleLoginButton({ className = "max-w-[300px] w-full", GOOGLE_CLIENT_I
|
|
|
18
15
|
href.searchParams.append("response_type", "code");
|
|
19
16
|
href.searchParams.append("scope", "email profile");
|
|
20
17
|
href.searchParams.append("state", redirectUrl);
|
|
21
|
-
return (
|
|
22
|
-
react_1.default.createElement("a", { href: href.toString(), className: "relative flex items-center border border-neutral-300 px-4 py-3 no-underline hover:no-underline bg-white hover:bg-neutral-100 rounded" },
|
|
23
|
-
react_1.default.createElement(fc_1.FcGoogle, null),
|
|
24
|
-
react_1.default.createElement("p", { className: "text-[14px] text-black absolute left-0 right-0 text-center" }, "\uAD6C\uAE00\uB85C \uACC4\uC18D\uD558\uAE30"))));
|
|
18
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: className, children: (0, jsx_runtime_1.jsxs)("a", { href: href.toString(), className: "relative flex items-center border border-neutral-300 px-4 py-3 no-underline hover:no-underline bg-white hover:bg-neutral-100 rounded", children: [(0, jsx_runtime_1.jsx)(fc_1.FcGoogle, {}), (0, jsx_runtime_1.jsx)("p", { className: "text-[14px] text-black absolute left-0 right-0 text-center", children: "\uAD6C\uAE00\uB85C \uACC4\uC18D\uD558\uAE30" })] }) }));
|
|
25
19
|
}
|
|
@@ -1,15 +1,12 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
3
|
exports.RedirectPage = RedirectPage;
|
|
7
|
-
const
|
|
8
|
-
const
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const react_1 = require("react");
|
|
9
6
|
const react_router_1 = require("react-router");
|
|
10
7
|
function RedirectPage() {
|
|
11
8
|
const navigate = (0, react_router_1.useNavigate)();
|
|
12
|
-
(0,
|
|
9
|
+
(0, react_1.useEffect)(() => {
|
|
13
10
|
const searchParams = new URLSearchParams(window.location.search);
|
|
14
11
|
const redirectUrl = searchParams.get("redirectUrl") ||
|
|
15
12
|
new URL("/", window.location.origin).toString();
|
|
@@ -17,5 +14,5 @@ function RedirectPage() {
|
|
|
17
14
|
navigate(redirectUrl);
|
|
18
15
|
}
|
|
19
16
|
}, [navigate]);
|
|
20
|
-
return
|
|
17
|
+
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
|
21
18
|
}
|
|
@@ -3,6 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.GoogleAuth = void 0;
|
|
4
4
|
const response_1 = require("../http-kit/response");
|
|
5
5
|
class GoogleAuth {
|
|
6
|
+
AUTH;
|
|
7
|
+
GOOGLE_CLIENT_ID;
|
|
8
|
+
GOOGLE_CLIENT_SECRET;
|
|
9
|
+
GOOGLE_REDIRECT_URI;
|
|
6
10
|
constructor(AUTH, GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, GOOGLE_REDIRECT_URI) {
|
|
7
11
|
this.GOOGLE_CLIENT_ID = GOOGLE_CLIENT_ID;
|
|
8
12
|
this.GOOGLE_CLIENT_SECRET = GOOGLE_CLIENT_SECRET;
|
package/dist/cjs/auth-kit/jwt.js
CHANGED
|
@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.KakaoAuth = void 0;
|
|
4
4
|
const http_kit_1 = require("../http-kit");
|
|
5
5
|
class KakaoAuth {
|
|
6
|
+
AUTH;
|
|
6
7
|
constructor(AUTH) {
|
|
7
8
|
this.AUTH = AUTH;
|
|
8
9
|
}
|
|
@@ -25,7 +26,11 @@ class KakaoAuth {
|
|
|
25
26
|
};
|
|
26
27
|
const user = await this.AUTH.findUser("kakao", payload);
|
|
27
28
|
if (!user) {
|
|
28
|
-
throw (0, http_kit_1.createJsonResponse)(404)(
|
|
29
|
+
throw (0, http_kit_1.createJsonResponse)(404)({
|
|
30
|
+
provider: "kakao",
|
|
31
|
+
...payload,
|
|
32
|
+
message: "사용자를 찾을 수 없습니다.",
|
|
33
|
+
});
|
|
29
34
|
}
|
|
30
35
|
const { accessToken, refreshToken } = await this.AUTH.issueTokenPair(user);
|
|
31
36
|
return {
|
|
@@ -1,32 +1,17 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
3
|
-
var t = {};
|
|
4
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
5
|
-
t[p] = s[p];
|
|
6
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
7
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
8
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
9
|
-
t[p[i]] = s[p[i]];
|
|
10
|
-
}
|
|
11
|
-
return t;
|
|
12
|
-
};
|
|
13
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
-
};
|
|
16
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
3
|
exports.default = FullscreenContainer;
|
|
18
4
|
exports.useFullscreen = useFullscreen;
|
|
5
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
19
6
|
const cn_1 = require("../../cn");
|
|
20
|
-
const react_1 =
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
var { className, children } = _a, props = __rest(_a, ["className", "children"]);
|
|
24
|
-
const containerRef = (0, react_2.useRef)(null);
|
|
7
|
+
const react_1 = require("react");
|
|
8
|
+
function FullscreenContainer({ className, children, ...props }) {
|
|
9
|
+
const containerRef = (0, react_1.useRef)(null);
|
|
25
10
|
useFullscreen(containerRef);
|
|
26
|
-
return (
|
|
11
|
+
return ((0, jsx_runtime_1.jsx)("div", { ref: containerRef, ...props, className: (0, cn_1.cn)("fixed left-0 right-0 top-0 bottom-0", className), children: children }));
|
|
27
12
|
}
|
|
28
13
|
function useFullscreen(ref) {
|
|
29
|
-
(0,
|
|
14
|
+
(0, react_1.useEffect)(() => {
|
|
30
15
|
const container = ref.current;
|
|
31
16
|
if (!container) {
|
|
32
17
|
return;
|
|
@@ -44,7 +29,7 @@ function useFullscreen(ref) {
|
|
|
44
29
|
return;
|
|
45
30
|
}
|
|
46
31
|
container.classList.remove("bottom-0");
|
|
47
|
-
container.style.height = `${visualViewport
|
|
32
|
+
container.style.height = `${visualViewport?.height}px`;
|
|
48
33
|
if (visualViewport.height < window.innerHeight) {
|
|
49
34
|
window.addEventListener("scroll", scroll);
|
|
50
35
|
}
|
|
@@ -53,11 +38,11 @@ function useFullscreen(ref) {
|
|
|
53
38
|
}
|
|
54
39
|
};
|
|
55
40
|
resize();
|
|
56
|
-
visualViewport
|
|
41
|
+
visualViewport?.addEventListener("resize", resize);
|
|
57
42
|
scroll();
|
|
58
43
|
return () => {
|
|
59
44
|
window.removeEventListener("scroll", scroll);
|
|
60
|
-
visualViewport
|
|
45
|
+
visualViewport?.removeEventListener("resize", resize);
|
|
61
46
|
};
|
|
62
47
|
}, [ref]);
|
|
63
48
|
return "fixed inset-0";
|
|
@@ -7,10 +7,10 @@ exports.ModalContext = void 0;
|
|
|
7
7
|
exports.useModalRoot = useModalRoot;
|
|
8
8
|
exports.useModalPortal = useModalPortal;
|
|
9
9
|
exports.useModal = useModal;
|
|
10
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
10
11
|
const react_1 = require("react");
|
|
11
12
|
const react_dom_1 = require("react-dom");
|
|
12
13
|
const modal_1 = __importDefault(require("./modal"));
|
|
13
|
-
const react_2 = __importDefault(require("react"));
|
|
14
14
|
function useModalRoot() {
|
|
15
15
|
const [container, setContainer] = (0, react_1.useState)(null);
|
|
16
16
|
(0, react_1.useEffect)(() => {
|
|
@@ -39,12 +39,10 @@ exports.ModalContext = (0, react_1.createContext)({});
|
|
|
39
39
|
function useModal() {
|
|
40
40
|
const ch2 = (0, react_1.useRef)(null);
|
|
41
41
|
const open = () => {
|
|
42
|
-
|
|
43
|
-
(_a = ch2.current) === null || _a === void 0 ? void 0 : _a.call(ch2, true);
|
|
42
|
+
ch2.current?.(true);
|
|
44
43
|
};
|
|
45
44
|
const close = () => {
|
|
46
|
-
|
|
47
|
-
(_a = ch2.current) === null || _a === void 0 ? void 0 : _a.call(ch2, false);
|
|
45
|
+
ch2.current?.(false);
|
|
48
46
|
};
|
|
49
47
|
const Component = (0, react_1.useCallback)(function Component(props) {
|
|
50
48
|
const [isOpen, setIsOpen] = (0, react_1.useState)(false);
|
|
@@ -68,7 +66,7 @@ function useModal() {
|
|
|
68
66
|
// document.body.style.overflow = "";
|
|
69
67
|
};
|
|
70
68
|
}, [isOpen]);
|
|
71
|
-
return (
|
|
69
|
+
return ((0, jsx_runtime_1.jsx)(exports.ModalContext.Provider, { value: { open, close, isOpen }, children: createPortal((0, jsx_runtime_1.jsx)(modal_1.default, { ...props, open: isOpen, onBackgroundClick: close })) }));
|
|
72
70
|
}, []);
|
|
73
71
|
return {
|
|
74
72
|
open,
|
|
@@ -32,24 +32,13 @@ var __importStar = (this && this.__importStar) || (function () {
|
|
|
32
32
|
return result;
|
|
33
33
|
};
|
|
34
34
|
})();
|
|
35
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
36
|
-
var t = {};
|
|
37
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
38
|
-
t[p] = s[p];
|
|
39
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
40
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
41
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
42
|
-
t[p[i]] = s[p[i]];
|
|
43
|
-
}
|
|
44
|
-
return t;
|
|
45
|
-
};
|
|
46
35
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
47
36
|
exports.default = Modal;
|
|
37
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
48
38
|
const react_1 = __importStar(require("react"));
|
|
49
39
|
const fullscreen_container_1 = require("./fullscreen_container");
|
|
50
40
|
const cn_1 = require("../../cn");
|
|
51
|
-
function Modal(
|
|
52
|
-
var { open, className, background = "bg-gray-500/25", onBackgroundClick, children } = _a, props = __rest(_a, ["open", "className", "background", "onBackgroundClick", "children"]);
|
|
41
|
+
function Modal({ open, className, background = "bg-gray-500/25", onBackgroundClick, children, ...props }) {
|
|
53
42
|
const containerRef = (0, react_1.useRef)(null);
|
|
54
43
|
const fullscreen = (0, fullscreen_container_1.useFullscreen)(containerRef);
|
|
55
44
|
const [mounted, setMounted] = react_1.default.useState(false);
|
|
@@ -70,22 +59,21 @@ function Modal(_a) {
|
|
|
70
59
|
}, [open]);
|
|
71
60
|
const onBackgroundMouseDown = (event) => {
|
|
72
61
|
event.preventDefault();
|
|
73
|
-
onBackgroundClick
|
|
62
|
+
onBackgroundClick?.();
|
|
74
63
|
};
|
|
75
64
|
const onModalMouseDown = (event) => {
|
|
76
65
|
event.stopPropagation();
|
|
77
66
|
};
|
|
78
67
|
const onBackgroundTouchStart = (event) => {
|
|
79
68
|
event.preventDefault();
|
|
80
|
-
onBackgroundClick
|
|
69
|
+
onBackgroundClick?.();
|
|
81
70
|
};
|
|
82
71
|
const onModalTouchStart = (event) => {
|
|
83
72
|
event.stopPropagation();
|
|
84
73
|
};
|
|
85
|
-
return (
|
|
74
|
+
return ((0, jsx_runtime_1.jsx)("div", { ref: containerRef, className: (0, cn_1.cn)(fullscreen, "z-[999] flex flex-col justify-center transition-bg duration-200 md:px-6 overflow-hidden print:px-0 print:block print:overflow-auto", open && mounted
|
|
86
75
|
? (0, cn_1.cn)(background, "ease-out")
|
|
87
|
-
: "bg-transparent ease-in pointer-events-none"), onMouseDown: onBackgroundMouseDown, onTouchStart: onBackgroundTouchStart
|
|
88
|
-
react_1.default.createElement("div", { className: (0, cn_1.cn)("relative flex-1 flex flex-col justify-end md:justify-center items-center transition-[opacity transform] duration-200 print:block", open && mounted
|
|
76
|
+
: "bg-transparent ease-in pointer-events-none"), onMouseDown: onBackgroundMouseDown, onTouchStart: onBackgroundTouchStart, children: (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("relative flex-1 flex flex-col justify-end md:justify-center items-center transition-[opacity transform] duration-200 print:block", open && mounted
|
|
89
77
|
? "translate-y-[0px] opacity-100 ease-out"
|
|
90
|
-
: "translate-y-[100%] md:translate-y-[50px] opacity-0 ease-in")
|
|
78
|
+
: "translate-y-[100%] md:translate-y-[50px] opacity-0 ease-in"), children: (open || mounted) && ((0, jsx_runtime_1.jsx)("div", { ...props, className: (0, cn_1.cn)(className, "w-full max-h-[92vh] print:w-[unset] print:max-h-[unset] rounded-tl-lg rounded-tr-lg md:rounded-lg overflow-auto print:rounded-none"), onMouseDown: onModalMouseDown, onTouchStart: onModalTouchStart, children: children })) }) }));
|
|
91
79
|
}
|
|
@@ -1,52 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
-
var ownKeys = function(o) {
|
|
20
|
-
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
-
var ar = [];
|
|
22
|
-
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
-
return ar;
|
|
24
|
-
};
|
|
25
|
-
return ownKeys(o);
|
|
26
|
-
};
|
|
27
|
-
return function (mod) {
|
|
28
|
-
if (mod && mod.__esModule) return mod;
|
|
29
|
-
var result = {};
|
|
30
|
-
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
-
__setModuleDefault(result, mod);
|
|
32
|
-
return result;
|
|
33
|
-
};
|
|
34
|
-
})();
|
|
35
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
36
|
-
var t = {};
|
|
37
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
38
|
-
t[p] = s[p];
|
|
39
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
40
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
41
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
42
|
-
t[p[i]] = s[p[i]];
|
|
43
|
-
}
|
|
44
|
-
return t;
|
|
45
|
-
};
|
|
46
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
47
3
|
exports.useDropFileInput = useDropFileInput;
|
|
48
4
|
exports.DropFileMessageBox = DropFileMessageBox;
|
|
49
|
-
const
|
|
5
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
+
const react_1 = require("react");
|
|
50
7
|
const uuid_1 = require("uuid");
|
|
51
8
|
const cn_1 = require("../../cn");
|
|
52
9
|
function useDropFileInput({ defaultValue, options, uploadFile, onFileInput, onFileUploaded, limit, } = {}) {
|
|
@@ -64,8 +21,7 @@ function useDropFileInput({ defaultValue, options, uploadFile, onFileInput, onFi
|
|
|
64
21
|
(0, react_1.useEffect)(() => {
|
|
65
22
|
fileRef.current = files;
|
|
66
23
|
}, [files]);
|
|
67
|
-
const Component = (0, react_1.useCallback)(function Component(
|
|
68
|
-
var { className, container = "border border-dashed border-neutral-300 rounded flex items-center justify-center", draggingClassName, name, hideMessage = false, children } = _a, props = __rest(_a, ["className", "container", "draggingClassName", "name", "hideMessage", "children"]);
|
|
24
|
+
const Component = (0, react_1.useCallback)(function Component({ className, container = "border border-dashed border-neutral-300 rounded flex items-center justify-center", draggingClassName, name, hideMessage = false, children, ...props }) {
|
|
69
25
|
const [isDragging, setIsDragging] = (0, react_1.useState)(false);
|
|
70
26
|
const handleDragEnter = (0, react_1.useCallback)((e) => {
|
|
71
27
|
e.preventDefault();
|
|
@@ -117,11 +73,14 @@ function useDropFileInput({ defaultValue, options, uploadFile, onFileInput, onFi
|
|
|
117
73
|
key: (0, uuid_1.v4)(),
|
|
118
74
|
};
|
|
119
75
|
setFiles((prevFiles) => [...prevFiles, fileItem]);
|
|
120
|
-
uploadFile
|
|
121
|
-
await
|
|
76
|
+
uploadFile?.(file, options).then(async (item) => {
|
|
77
|
+
await onFileUploaded?.(item);
|
|
122
78
|
setFiles((prevFiles) => prevFiles.map((f) => {
|
|
123
79
|
if (f.key === fileItem.key) {
|
|
124
|
-
return
|
|
80
|
+
return {
|
|
81
|
+
...f,
|
|
82
|
+
item,
|
|
83
|
+
};
|
|
125
84
|
}
|
|
126
85
|
return f;
|
|
127
86
|
}));
|
|
@@ -139,8 +98,7 @@ function useDropFileInput({ defaultValue, options, uploadFile, onFileInput, onFi
|
|
|
139
98
|
}, [handleFiles]);
|
|
140
99
|
const inputRef = (0, react_1.useRef)(null);
|
|
141
100
|
const handleClick = (0, react_1.useCallback)(() => {
|
|
142
|
-
|
|
143
|
-
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
|
|
101
|
+
inputRef.current?.click();
|
|
144
102
|
}, []);
|
|
145
103
|
const handleKeyDown = (0, react_1.useCallback)((e) => {
|
|
146
104
|
if (e.key === "Enter" || e.key === " ") {
|
|
@@ -153,22 +111,19 @@ function useDropFileInput({ defaultValue, options, uploadFile, onFileInput, onFi
|
|
|
153
111
|
e.target.value = "";
|
|
154
112
|
}
|
|
155
113
|
}, [handleFiles]);
|
|
156
|
-
return (
|
|
157
|
-
(isDragging ? "bg-neutral-300/25" : "hover:bg-neutral-300/25"), "transition-colors cursor-pointer"), onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, onClick: handleClick, onChange: handleChange, onKeyDown: handleKeyDown, tabIndex: 0, role: "button" },
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
return
|
|
165
|
-
}
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
.
|
|
169
|
-
.join(",") }),
|
|
170
|
-
children ||
|
|
171
|
-
(!(hideMessage && !isDragging) && react_1.default.createElement(DropFileMessageBox, null))));
|
|
114
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)(className, container, draggingClassName?.(isDragging) ||
|
|
115
|
+
(isDragging ? "bg-neutral-300/25" : "hover:bg-neutral-300/25"), "transition-colors cursor-pointer"), onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, onClick: handleClick, onChange: handleChange, onKeyDown: handleKeyDown, tabIndex: 0, role: "button", children: [(0, jsx_runtime_1.jsx)("input", { ...props, defaultValue: "", type: "file", hidden: true, ref: inputRef }), (0, jsx_runtime_1.jsx)("input", { name: name, hidden: true, readOnly: true, value: files
|
|
116
|
+
.map((file) => {
|
|
117
|
+
if (file.item &&
|
|
118
|
+
typeof file.item === "object" &&
|
|
119
|
+
"id" in file.item) {
|
|
120
|
+
return file.item.id;
|
|
121
|
+
}
|
|
122
|
+
return null;
|
|
123
|
+
})
|
|
124
|
+
.filter(Boolean)
|
|
125
|
+
.join(",") }), children ||
|
|
126
|
+
(!(hideMessage && !isDragging) && (0, jsx_runtime_1.jsx)(DropFileMessageBox, {}))] }));
|
|
172
127
|
}, [limit, fileRef, files, options, uploadFile, onFileInput, onFileUploaded]);
|
|
173
128
|
const loadedFileIds = files
|
|
174
129
|
.map((file) => {
|
|
@@ -188,8 +143,6 @@ function useDropFileInput({ defaultValue, options, uploadFile, onFileInput, onFi
|
|
|
188
143
|
};
|
|
189
144
|
}
|
|
190
145
|
function DropFileMessageBox() {
|
|
191
|
-
return (
|
|
192
|
-
react_1.default.createElement("div", { className: "flex flex-col items-center" },
|
|
193
|
-
react_1.default.createElement("span", null, "\uD30C\uC77C\uC744 \uC5EC\uAE30\uB85C \uB04C\uC5B4\uB2E4 \uB193\uAC70\uB098 \uD074\uB9AD\uD574\uC11C \uC120\uD0DD\uD574 \uC8FC\uC138\uC694"))));
|
|
146
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: "text-sm pointer-events-none flex justify-center items-center", children: (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-center", children: (0, jsx_runtime_1.jsx)("span", { children: "\uD30C\uC77C\uC744 \uC5EC\uAE30\uB85C \uB04C\uC5B4\uB2E4 \uB193\uAC70\uB098 \uD074\uB9AD\uD574\uC11C \uC120\uD0DD\uD574 \uC8FC\uC138\uC694" }) }) }));
|
|
194
147
|
}
|
|
195
148
|
exports.default = useDropFileInput;
|
|
@@ -2,18 +2,19 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.FileUploader = void 0;
|
|
4
4
|
class FileUploader {
|
|
5
|
+
endpoint;
|
|
5
6
|
constructor(endpoint = "/api/files") {
|
|
6
|
-
this.formatSize = (size) => {
|
|
7
|
-
if (size < 1024) {
|
|
8
|
-
return `${size} B`;
|
|
9
|
-
}
|
|
10
|
-
if (size < 1024 * 1024) {
|
|
11
|
-
return `${(size / 1024).toFixed(2)} KB`;
|
|
12
|
-
}
|
|
13
|
-
return `${(size / (1024 * 1024)).toFixed(2)} MB`;
|
|
14
|
-
};
|
|
15
7
|
this.endpoint = endpoint;
|
|
16
8
|
}
|
|
9
|
+
formatSize = (size) => {
|
|
10
|
+
if (size < 1024) {
|
|
11
|
+
return `${size} B`;
|
|
12
|
+
}
|
|
13
|
+
if (size < 1024 * 1024) {
|
|
14
|
+
return `${(size / 1024).toFixed(2)} KB`;
|
|
15
|
+
}
|
|
16
|
+
return `${(size / (1024 * 1024)).toFixed(2)} MB`;
|
|
17
|
+
};
|
|
17
18
|
uploadFile(file, options = {}) {
|
|
18
19
|
return this.uploadBlob(file, file.name, options);
|
|
19
20
|
}
|
|
@@ -24,7 +25,11 @@ class FileUploader {
|
|
|
24
25
|
const img = new Image();
|
|
25
26
|
img.src = URL.createObjectURL(blob);
|
|
26
27
|
img.onload = () => {
|
|
27
|
-
resolve(
|
|
28
|
+
resolve({
|
|
29
|
+
...options.metadata,
|
|
30
|
+
width: img.width,
|
|
31
|
+
height: img.height,
|
|
32
|
+
});
|
|
28
33
|
};
|
|
29
34
|
img.onerror = reject;
|
|
30
35
|
return;
|
|
@@ -33,7 +38,12 @@ class FileUploader {
|
|
|
33
38
|
const video = document.createElement("video");
|
|
34
39
|
video.src = URL.createObjectURL(blob);
|
|
35
40
|
video.onloadedmetadata = () => {
|
|
36
|
-
resolve(
|
|
41
|
+
resolve({
|
|
42
|
+
...options.metadata,
|
|
43
|
+
width: video.videoWidth,
|
|
44
|
+
height: video.videoHeight,
|
|
45
|
+
duration: video.duration,
|
|
46
|
+
});
|
|
37
47
|
};
|
|
38
48
|
video.onerror = reject;
|
|
39
49
|
return;
|
|
@@ -3,6 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.FileService = void 0;
|
|
4
4
|
const uuid_1 = require("uuid");
|
|
5
5
|
class FileService {
|
|
6
|
+
prefix;
|
|
7
|
+
repository;
|
|
8
|
+
OBJECT_STORAGE;
|
|
6
9
|
constructor(prefix = "user", { repository, OBJECT_STORAGE, }) {
|
|
7
10
|
this.prefix = prefix;
|
|
8
11
|
this.repository = repository;
|
|
@@ -4,10 +4,11 @@ exports.ObjectStorage = void 0;
|
|
|
4
4
|
const client_s3_1 = require("@aws-sdk/client-s3");
|
|
5
5
|
const s3_request_presigner_1 = require("@aws-sdk/s3-request-presigner");
|
|
6
6
|
class ObjectStorage {
|
|
7
|
+
client = new client_s3_1.S3Client({
|
|
8
|
+
region: "ap-northeast-2",
|
|
9
|
+
});
|
|
10
|
+
bucketName;
|
|
7
11
|
constructor(bucketName) {
|
|
8
|
-
this.client = new client_s3_1.S3Client({
|
|
9
|
-
region: "ap-northeast-2",
|
|
10
|
-
});
|
|
11
12
|
this.bucketName = bucketName;
|
|
12
13
|
}
|
|
13
14
|
async generateSignedUrl(key, { contentType, expiresIn = 3600, } = {}) {
|
|
@@ -1,30 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
3
|
-
var t = {};
|
|
4
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
5
|
-
t[p] = s[p];
|
|
6
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
7
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
8
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
9
|
-
t[p[i]] = s[p[i]];
|
|
10
|
-
}
|
|
11
|
-
return t;
|
|
12
|
-
};
|
|
13
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
-
};
|
|
16
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
3
|
exports.createResponsiveImage = void 0;
|
|
18
4
|
exports.generateSrcSet = generateSrcSet;
|
|
19
|
-
const
|
|
5
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
20
6
|
const sizes = [
|
|
21
7
|
64, 128, 256, 320, 480, 640, 768, 1080, 1200, 1536, 1920, 2560, 3840,
|
|
22
8
|
];
|
|
23
9
|
const createResponsiveImage = (cdn) => {
|
|
24
|
-
const Component = (
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
return (react_1.default.createElement("img", Object.assign({}, props, { src: src, alt: alt, srcSet: generateSrcSet(src, ratio, props) })));
|
|
10
|
+
const Component = ({ alt, file, ratio, ...props }) => {
|
|
11
|
+
const src = cdn(file?.key) || props.src || "#";
|
|
12
|
+
return ((0, jsx_runtime_1.jsx)("img", { ...props, src: src, alt: alt, srcSet: generateSrcSet(src, ratio, props) }));
|
|
28
13
|
};
|
|
29
14
|
return Component;
|
|
30
15
|
};
|
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.INTERNAL_SERVER_ERROR = exports.TOO_MANY_REQUESTS = exports.UNPROCESSABLE_ENTITY = exports.CONFLICT = exports.REQUEST_TIMEOUT = exports.NOT_ACCEPTABLE = exports.METHOD_NOT_ALLOWED = exports.NOT_FOUND = exports.FORBIDDEN = exports.UNAUTHORIZED = exports.BAD_REQUEST = exports.createException = exports.NO_CONTENT = exports.ACCEPTED = exports.CREATED = exports.OK = exports.createJsonResponse = void 0;
|
|
4
4
|
const createJsonResponse = (status) => {
|
|
5
5
|
return (data = {}, init) => {
|
|
6
|
-
return Response.json(data,
|
|
6
|
+
return Response.json(data, { status, ...init });
|
|
7
7
|
};
|
|
8
8
|
};
|
|
9
9
|
exports.createJsonResponse = createJsonResponse;
|
|
@@ -12,7 +12,10 @@ exports.OK = (0, exports.createJsonResponse)(200);
|
|
|
12
12
|
exports.CREATED = (0, exports.createJsonResponse)(201);
|
|
13
13
|
exports.ACCEPTED = (0, exports.createJsonResponse)(202);
|
|
14
14
|
const NO_CONTENT = (init) => {
|
|
15
|
-
return new Response(null,
|
|
15
|
+
return new Response(null, {
|
|
16
|
+
...init,
|
|
17
|
+
status: 204,
|
|
18
|
+
});
|
|
16
19
|
};
|
|
17
20
|
exports.NO_CONTENT = NO_CONTENT;
|
|
18
21
|
const createException = (status, defaultMessage = "오류가 발생했습니다.") => {
|
|
@@ -3,8 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.authRefreshHandler = void 0;
|
|
4
4
|
const http_kit_1 = require("../../../../http-kit");
|
|
5
5
|
const authRefreshHandler = async (request, { AUTH, }) => {
|
|
6
|
-
|
|
7
|
-
const refreshToken = ((_a = request === null || request === void 0 ? void 0 : request.headers.get("Authorization")) === null || _a === void 0 ? void 0 : _a.replace("Bearer ", "")) ||
|
|
6
|
+
const refreshToken = request?.headers.get("Authorization")?.replace("Bearer ", "") ||
|
|
8
7
|
(await AUTH.getRefreshTokenFromCookies(request));
|
|
9
8
|
if (!refreshToken) {
|
|
10
9
|
return (0, http_kit_1.BAD_REQUEST)();
|
|
@@ -11,7 +11,7 @@ const fileDeleteHandler = async (request, { fileId }, { AUTH, repository, }) =>
|
|
|
11
11
|
if (!file) {
|
|
12
12
|
return (0, http_kit_1.NOT_FOUND)("파일을 찾을 수 없습니다.", { headers });
|
|
13
13
|
}
|
|
14
|
-
if (!repository.hasPermission(file, auth
|
|
14
|
+
if (!repository.hasPermission(file, auth?.userId)) {
|
|
15
15
|
return (0, http_kit_1.FORBIDDEN)("파일을 삭제할 권한이 없습니다.", { headers });
|
|
16
16
|
}
|
|
17
17
|
await repository.deleteFile(fileId);
|
|
@@ -16,7 +16,7 @@ const fileUploadHandler = async (request, { AUTH, FILE_SERVICE, }) => {
|
|
|
16
16
|
}
|
|
17
17
|
try {
|
|
18
18
|
const result = await FILE_SERVICE.generateSignedUrl({
|
|
19
|
-
userId: auth
|
|
19
|
+
userId: auth?.userId,
|
|
20
20
|
name,
|
|
21
21
|
type,
|
|
22
22
|
size,
|
|
@@ -29,7 +29,10 @@ const thirdPartyAuthCallbackHandler = async (request, { provider, }, { AUTH, GOO
|
|
|
29
29
|
const redirectUrl = url.searchParams.get("state") || SITE_ORIGIN;
|
|
30
30
|
return new Response("Temporary Redirect", {
|
|
31
31
|
status: 307,
|
|
32
|
-
headers:
|
|
32
|
+
headers: {
|
|
33
|
+
...headers,
|
|
34
|
+
Location: new URL(`/r?redirectUrl=${encodeURIComponent(redirectUrl)}`, request.url).toString(),
|
|
35
|
+
},
|
|
33
36
|
});
|
|
34
37
|
};
|
|
35
38
|
exports.thirdPartyAuthCallbackHandler = thirdPartyAuthCallbackHandler;
|