diff --git a/src/adminPage/features/eventEdit/index.jsx b/src/adminPage/features/eventEdit/index.jsx
index 77a42b91..79679fd9 100644
--- a/src/adminPage/features/eventEdit/index.jsx
+++ b/src/adminPage/features/eventEdit/index.jsx
@@ -51,7 +51,7 @@ function EventEditor({ initialData = null } = {}) {
title={`${mode === "create" ? "등록" : "수정"} 완료`}
description={`이벤트가 성공적으로 ${mode === "create" ? "등록" : "수정"}되었습니다!`}
/>,
- ).then( ()=>navigate(mode === "create" ? "/events" : `/events/${state.eventId}`) );
+ ).then(() => navigate(mode === "create" ? "/events" : `/events/${state.eventId}`));
},
onError: (e) => {
openModal();
diff --git a/src/common/modal/modal.jsx b/src/common/modal/modal.jsx
index e89c775c..bfc37a42 100644
--- a/src/common/modal/modal.jsx
+++ b/src/common/modal/modal.jsx
@@ -31,17 +31,16 @@ function Modal({ layer }) {
}, [child]);
useEffect(() => {
- if(child === null) return;
+ if (child === null) return;
- function escHatch(e)
- {
- if(e.key !== "Escape") return;
+ function escHatch(e) {
+ if (e.key !== "Escape") return;
close();
e.preventDefault();
}
- document.addEventListener( "keydown", escHatch );
- return ()=>document.removeEventListener( "keydown", escHatch );
- }, [child]);
+ document.addEventListener("keydown", escHatch);
+ return () => document.removeEventListener("keydown", escHatch);
+ }, [child, close]);
const focusTrapRef = useFocusTrap(child !== null);
diff --git a/src/common/modal/openModal.js b/src/common/modal/openModal.js
index ed4fbef7..351cfaee 100644
--- a/src/common/modal/openModal.js
+++ b/src/common/modal/openModal.js
@@ -1,15 +1,14 @@
import { modalStore } from "./store.js";
export default function openModal(component, layer = "alert") {
- modalStore.changeModal(component, layer);
- return new Promise( (resolve)=>{
- function observe()
- {
- if(modalStore.getSnapshot(layer) !== component) {
+ modalStore.changeModal(component, layer);
+ return new Promise((resolve) => {
+ function observe() {
+ if (modalStore.getSnapshot(layer) !== component) {
resolve();
clear();
}
}
- const clear = modalStore.subscribe( observe );
- } );
+ const clear = modalStore.subscribe(observe);
+ });
}
diff --git a/src/common/modal/useFocusTrap.js b/src/common/modal/useFocusTrap.js
index b61b7f45..3bb9c615 100644
--- a/src/common/modal/useFocusTrap.js
+++ b/src/common/modal/useFocusTrap.js
@@ -1,67 +1,64 @@
import { useEffect, useRef } from "react";
-function getEndPointChild(element)
-{
- const focusableElements = [...element.querySelectorAll(
- "a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]"
-)].filter( elem=>elem.tabIndex >= 0 );
- if(focusableElements.length === 0) return [null, null];
- return [focusableElements[0], focusableElements[focusableElements.length - 1]];
+function getEndPointChild(element) {
+ const focusableElements = [
+ ...element.querySelectorAll(
+ "a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]",
+ ),
+ ].filter((elem) => elem.tabIndex >= 0);
+ if (focusableElements.length === 0) return [null, null];
+ return [focusableElements[0], focusableElements[focusableElements.length - 1]];
}
-function useFocusTrap(active)
-{
- const prevRef = useRef(null);
- const ref = useRef(null);
- const endPointChild = useRef([null, null]);
- useEffect( ()=>{
- if(!active || ref.current === null) return;
+function useFocusTrap(active) {
+ const prevRef = useRef(null);
+ const ref = useRef(null);
+ const endPointChild = useRef([null, null]);
+ useEffect(() => {
+ if (!active || ref.current === null) return;
- function renewEndPointChild()
- {
- if(ref.current === null) return;
- endPointChild.current = getEndPointChild(ref.current);
- }
+ function renewEndPointChild() {
+ if (ref.current === null) return;
+ endPointChild.current = getEndPointChild(ref.current);
+ }
- function handleTabKey(e) {
- if(e.key !== "Tab") return;
+ function handleTabKey(e) {
+ if (e.key !== "Tab") return;
- const [first, last] = endPointChild.current;
+ const [first, last] = endPointChild.current;
- if(document.activeElement === prevRef.current) {
- if(e.shiftKey) last?.focus();
- else first?.focus();
- e.preventDefault();
- return;
- }
+ if (document.activeElement === prevRef.current) {
+ if (e.shiftKey) last?.focus();
+ else first?.focus();
+ e.preventDefault();
+ return;
+ }
- if(first === null || last === null) return;
- if(document.activeElement === last && !e.shiftKey) {
- first.focus();
- e.preventDefault();
- }
- else if(document.activeElement === first && e.shiftKey) {
- last.focus();
- e.preventDefault();
- }
- }
+ if (first === null || last === null) return;
+ if (document.activeElement === last && !e.shiftKey) {
+ first.focus();
+ e.preventDefault();
+ } else if (document.activeElement === first && e.shiftKey) {
+ last.focus();
+ e.preventDefault();
+ }
+ }
- renewEndPointChild();
- prevRef.current = document.activeElement;
- document.addEventListener("keydown", handleTabKey);
- const config = { subtree: true, childList: true, attributeFilter: ["disabled", "tabindex"] };
- const observer = new MutationObserver( renewEndPointChild );
- observer.observe(ref.current, config);
+ renewEndPointChild();
+ prevRef.current = document.activeElement;
+ document.addEventListener("keydown", handleTabKey);
+ const config = { subtree: true, childList: true, attributeFilter: ["disabled", "tabindex"] };
+ const observer = new MutationObserver(renewEndPointChild);
+ observer.observe(ref.current, config);
- return ()=>{
- document.removeEventListener("keydown", handleTabKey);
- observer.disconnect();
- prevRef.current.focus();
- }
+ return () => {
+ document.removeEventListener("keydown", handleTabKey);
+ observer.disconnect();
+ prevRef.current.focus();
+ };
+ }, [active]);
- }, [active] );
-
- return ref;
+ return ref;
}
-export default useFocusTrap;
\ No newline at end of file
+export default useFocusTrap;
diff --git a/src/mainPage/features/comment/autoScrollCarousel/index.jsx b/src/mainPage/features/comment/autoScrollCarousel/index.jsx
index de91b2a1..82bc89cf 100644
--- a/src/mainPage/features/comment/autoScrollCarousel/index.jsx
+++ b/src/mainPage/features/comment/autoScrollCarousel/index.jsx
@@ -3,7 +3,8 @@ import useAutoCarousel from "./useAutoCarousel.js";
function AutoScrollCarousel({ speed = 1, gap = 0, children }) {
const { position, ref, eventListener } = useAutoCarousel(speed, gap);
- const flexStyle = "min-w-full flex [&>div]:flex-shrink-0 gap-[var(--gap,0)] justify-around items-center absolute";
+ const flexStyle =
+ "min-w-full flex [&>div]:flex-shrink-0 gap-[var(--gap,0)] justify-around items-center absolute";
return (
-
{children}
+
+ {children}
+
{children}
-
{children}
+
+ {children}
+
);
diff --git a/src/mainPage/features/comment/autoScrollCarousel/useAutoCarousel.js b/src/mainPage/features/comment/autoScrollCarousel/useAutoCarousel.js
index 2ebd80d9..88516fa5 100644
--- a/src/mainPage/features/comment/autoScrollCarousel/useAutoCarousel.js
+++ b/src/mainPage/features/comment/autoScrollCarousel/useAutoCarousel.js
@@ -38,7 +38,7 @@ function useAutoCarousel(speed = 1, gap = 0) {
// 타임스탬프 저장
timestamp.current = time;
},
- [isHovered, speed],
+ [isHovered, speed, gap],
);
useEffect(() => {
diff --git a/src/mainPage/features/comment/commentCarousel/CommentCarousel.jsx b/src/mainPage/features/comment/commentCarousel/CommentCarousel.jsx
index e607e98c..354037e7 100644
--- a/src/mainPage/features/comment/commentCarousel/CommentCarousel.jsx
+++ b/src/mainPage/features/comment/commentCarousel/CommentCarousel.jsx
@@ -15,7 +15,7 @@ function mask(string) {
function CommentCarousel() {
const { comments } = useQuery("comment-data", () => fetchServer(`/api/v1/comment/${EVENT_ID}`));
- if(comments.length === 0) return ;
+ if (comments.length === 0) return ;
return (
diff --git a/src/mainPage/features/comment/modals/CommentNoUserModal.jsx b/src/mainPage/features/comment/modals/CommentNoUserModal.jsx
index e9ac16ef..cab0e907 100644
--- a/src/mainPage/features/comment/modals/CommentNoUserModal.jsx
+++ b/src/mainPage/features/comment/modals/CommentNoUserModal.jsx
@@ -17,13 +17,15 @@ function CommentNoUserModal() {
}
+ image={
+
+ }
>