[chore] 린트 수정 및 프리티어 적용

softeerbootcamp4th · Aug 20, 2024 · b063d9f · b063d9f
1 parent ef57bfd
commit b063d9f
Show file tree

Hide file tree

Showing 28 changed files with 235 additions and 200 deletions.
diff --git 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(<AlertModal title="등록 실패" description={e.message} />);

diff --git 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
@@ -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
@@ -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;
+export default useFocusTrap;
diff --git 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 (
     <div className="w-full h-full overflow-hidden" {...eventListener}>
       <div
@@ -13,11 +14,15 @@ function AutoScrollCarousel({ speed = 1, gap = 0, children }) {
         }}
         className="relative h-max touch-pan-y"
       >
-        <div className={`${flexStyle} -translate-x-[calc(100%+var(--gap,0px))]`} aria-hidden="true">{children}</div>
+        <div className={`${flexStyle} -translate-x-[calc(100%+var(--gap,0px))]`} aria-hidden="true">
+          {children}
+        </div>
         <div className={flexStyle} ref={ref}>
           {children}
         </div>
-        <div className={`${flexStyle} translate-x-[calc(100%+var(--gap,0px))]`} aria-hidden="true">{children}</div>
+        <div className={`${flexStyle} translate-x-[calc(100%+var(--gap,0px))]`} aria-hidden="true">
+          {children}
+        </div>
       </div>
     </div>
   );

diff --git 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
@@ -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 <CommentCarouselNoData />;
+  if (comments.length === 0) return <CommentCarouselNoData />;
 
   return (
     <div className="w-full h-[29rem]">

diff --git a/src/mainPage/features/comment/modals/CommentNoUserModal.jsx b/src/mainPage/features/comment/modals/CommentNoUserModal.jsx
@@ -17,13 +17,15 @@ function CommentNoUserModal() {
     <AlertModalContainer
       title="아직 기대평을 작성할 수 없습니다."
       description="오늘의 추첨 이벤트에 참여하고 기대평을 작성하세요"
-      image={<img
-        src="/icons/[email protected]"
-        srcSet="/icons/[email protected] 1x, /icons/[email protected] 2x"
-        alt="추첨 이벤트 참여 바랍니다"
-        width="208"
-        height="40"
-      />}
+      image={
+        <img
+          src="/icons/[email protected]"
+          srcSet="/icons/[email protected] 1x, /icons/[email protected] 2x"
+          alt="추첨 이벤트 참여 바랍니다"
+          width="208"
+          height="40"
+        />
+      }
     >
       <div className="w-full flex flex-wrap justify-center gap-5">
         <Button styleType="filled" onClick={toMoveInteraction}>

diff --git a/src/mainPage/features/comment/modals/CommentSuccessModal.jsx b/src/mainPage/features/comment/modals/CommentSuccessModal.jsx
@@ -9,13 +9,15 @@ function CommentSuccessModal() {
   return (
     <AlertModalContainer
       title="기대평이 등록되었습니다!"
-      image={<img
+      image={
+        <img
           src="/icons/[email protected]"
           srcSet="/icons/[email protected] 1x, /icons/[email protected] 2x"
           alt="기대평 등록 완료"
           width="173"
           height="182"
-        />}
+        />
+      }
     >
       <Button styleType="ghost" onClick={close}>
         확인

diff --git a/src/mainPage/features/detailInformation/DetailSwiper.jsx b/src/mainPage/features/detailInformation/DetailSwiper.jsx
@@ -54,11 +54,8 @@ function DetailSwiper({ content }) {
       <div className="w-full max-w-[1248px] px-12 lg:px-6 flex justify-end lg:justify-between align-center font-bold">
         <ul className="hidden lg:flex text-body-l gap-15 h-14 items-center">
           {content.map(({ tabName }, i) => (
-            <li
-              className={i === page ? "text-black" : "text-neutral-300"}
-              key={tabName}
-            >
-              <button onClick={()=>swiperElRef.current.swiper.slideTo(i)}>{tabName}</button>
+            <li className={i === page ? "text-black" : "text-neutral-300"} key={tabName}>
+              <button onClick={() => swiperElRef.current.swiper.slideTo(i)}>{tabName}</button>
             </li>
           ))}
         </ul>

diff --git a/src/mainPage/features/fcfs/cardGame/Card.jsx b/src/mainPage/features/fcfs/cardGame/Card.jsx
@@ -52,7 +52,13 @@ function Card({ index, locked, isFlipped, setFlipped, setGlobalLock, getCardAnsw
           className={`${cardFaceBaseStyle} ${style.back}`}
           src={answer1x}
           srcSet={`${answer1x} 1x, ${answer2x} 2x`}
-          alt={isFlipped ? (isCorrect ? "축하합니다, 당첨입니다!" : `${index}번 카드는 정답이 아니네요! 다른 카드를 뒤집으세요.`) : ""}
+          alt={
+            isFlipped
+              ? isCorrect
+                ? "축하합니다, 당첨입니다!"
+                : `${index}번 카드는 정답이 아니네요! 다른 카드를 뒤집으세요.`
+              : ""
+          }
           draggable="false"
           loading="lazy"
         />

diff --git a/src/mainPage/features/fcfs/cardGame/CardGame.jsx b/src/mainPage/features/fcfs/cardGame/CardGame.jsx
@@ -71,7 +71,9 @@ function CardGame({ offline }) {
           break;
         case submitCardgameErrorHandle[401]:
           return new Promise((resolve, reject) => {
-            openModal(<AuthModal onComplete={() => resolve(getCardAnswerOnline(index))} />).then( reject );
+            openModal(<AuthModal onComplete={() => resolve(getCardAnswerOnline(index))} />).then(
+              reject,
+            );
           });
         case submitCardgameErrorHandle["offline"]:
           setOfflineMode(true);

diff --git a/src/mainPage/features/fcfs/modals/FcfsInvalidModal.jsx b/src/mainPage/features/fcfs/modals/FcfsInvalidModal.jsx
@@ -7,7 +7,7 @@ function FcfsInvalidModal() {
   const close = useContext(ModalCloseContext);
 
   return (
-    <AlertModalContainer 
+    <AlertModalContainer
       title="선착순 이벤트에 참여할 수 없습니다"
       description="아직 선착순 이벤트 진행 중이 아닙니다. 부적절한 방법으로 이벤트를 참여할 경우 향후 불이익이 가해질 수 있습니다."
     >

diff --git a/src/mainPage/features/fcfs/modals/FcfsLoseModal.jsx b/src/mainPage/features/fcfs/modals/FcfsLoseModal.jsx
@@ -19,13 +19,15 @@ function FcfsLoseModal() {
     <AlertModalContainer
       title="이번 이벤트에 당첨되지 않았어요!"
       description=" 다음 이벤트 일정을 확인하세요!"
-      image={<img
-        src="/icons/[email protected]"
-        srcSet="/icons/[email protected] 1x, /icons/[email protected] 2x"
-        alt="선착순 이벤트 당첨 실패"
-        width="144"
-        height="146"
-      />}
+      image={
+        <img
+          src="/icons/[email protected]"
+          srcSet="/icons/[email protected] 1x, /icons/[email protected] 2x"
+          alt="선착순 이벤트 당첨 실패"
+          width="144"
+          height="146"
+        />
+      }
     >
       <div className="w-full flex flex-wrap justify-center gap-5">
         <Button styleType="filled" hidden={!shouldInteraction} onClick={toMoveInteraction}>

diff --git a/src/mainPage/features/fcfs/modals/FcfsWinModal.jsx b/src/mainPage/features/fcfs/modals/FcfsWinModal.jsx
@@ -10,13 +10,15 @@ function FcfsWinModal() {
     <AlertModalContainer
       title="선착순 이벤트에 당첨되었어요!"
       description="경품 수령은 입력하신 연락처로 개별 안내됩니다"
-      image={<img
+      image={
+        <img
           src="/icons/[email protected]"
           srcSet="/icons/[email protected] 1x, /icons/[email protected] 2x"
           alt="선착순 이벤트 당첨"
           width="320"
           height="320"
-        />}
+        />
+      }
     >
       <Button styleType="filled" onClick={close}>
         확인

diff --git a/src/mainPage/features/header/index.jsx b/src/mainPage/features/header/index.jsx
@@ -33,9 +33,14 @@ export default function Header() {
       key={index}
       className={`w-20 lg:w-24 h-ful cursor-pointer ${currentSection - 1 === index ? "text-black" : "text-neutral-300"}`}
     >
-      <button onClick={() => onClickScrollSection(index + 1)} className="flex justify-center items-center w-full h-full">{scrollSection}</button>
+      <button
+        onClick={() => onClickScrollSection(index + 1)}
+        className="flex justify-center items-center w-full h-full"
+      >
+        {scrollSection}
+      </button>
     </li>
-  ))
+  ));
 
   return (
     <nav className="sticky top-0 h-[60px] z-40 bg-white/[.36] backdrop-blur-xl flex justify-between px-6 lg:px-9 items-center font-bold select-none">

diff --git a/src/mainPage/features/interactions/mock.js b/src/mainPage/features/interactions/mock.js
@@ -5,18 +5,19 @@ const eventParticipationDate = {
 };
 
 const handlers = [
-  http.get("/api/v1/event/draw/:eventId/participation", ({request}) =>{
+  http.get("/api/v1/event/draw/:eventId/participation", ({ request }) => {
     const token = request.headers.get("authorization");
-    if (token === null) return HttpResponse.json({dates: []});
+    if (token === null) return HttpResponse.json({ dates: [] });
 
     return HttpResponse.json(eventParticipationDate);
   }),
-  http.post("/api/v1/event/draw/:eventId/participation", ({request}) => {
+  http.post("/api/v1/event/draw/:eventId/participation", ({ request }) => {
     const token = request.headers.get("authorization");
     if (token === null) return HttpResponse.json(false, { status: 401 });
 
-    const dummyTodayStatus ="2024-09-10T12:00:00.000Z";
-    if(eventParticipationDate.dates.includes(dummyTodayStatus)) return HttpResponse.json(false, { status: 409 });
+    const dummyTodayStatus = "2024-09-10T12:00:00.000Z";
+    if (eventParticipationDate.dates.includes(dummyTodayStatus))
+      return HttpResponse.json(false, { status: 409 });
 
     eventParticipationDate.dates.push("2024-09-10T12:00:00.000Z");
     return HttpResponse.json(true);