Merge pull request #244 from mash-up-kr/develop

Release v1.2.0 배포

src/assets/base64/index.ts

@@ -0,0 +1 @@
+export * from './mashong-coffee';

src/assets/base64/mashong-coffee.ts

@@ -0,0 +1,2 @@
+export const mashongCoffeeBase64 =
+  'data:image/webp;base64,UklGRq4BAABXRUJQVlA4WAoAAAAQAAAANwAANgAAQUxQSDABAAARP6CobSM2VSLrxrsREfB3tgSca9uTNU/yQWd8dlgd1npXb1akbWYsz/8/sbe2R/R/AtC+1ZA/0KicSjdGcpjRPrMZapO0Km1HPoQuSbKUdEnShh69UdKRJHWKATCb3fYBtF0WNSqOtApqS5JWJd33cSZZPL+7AILjAFlzJAeOQRNqR+6ZvAohEnSRYeScFC9HjiI6spYwiI4lhjE4gSLhkLdC4mNeOaXicoxKwSGnheRjzhCoTOe1QJu5VlV2pG146yyWtiRpNYBjnnEeW0CF4gYYy1mFtRwL7L+hhMMvKb5FYy9ngbXcChjLtQA4sQsAG7EWgMpZygDAWMoqYOKkqNF2/IbNl7zCp9w78CY/+BYN3NxK1wGMZ7PZ7UywBn86kywQ7UrqWEdCxSpVQfzTVlA4IFgAAAAQAwCdASo4ADcAD8D+JaQAA3W99+WFyB1hBQGc87QnNQAA/uKbgdzJ8aRxbtunogA9rk3Jjm62LtGWd67D/z0a8KsOWZfubJ5TXXVBv2nfJ0oP6ATiAAAA';

src/components/common/Modal/Modal.component.tsx

@@ -59,27 +59,35 @@ const Modal = ({
         'input, button, textarea, select, [href], [tabindex]',
       );
 
-      if (focusableNodeList) {
-        const firstFocusableNode = focusableNodeList[0];
-        const lastFocusableNode = focusableNodeList[focusableNodeList.length - 1];
-
-        if (e.target === firstFocusableNode && e.shiftKey && e.key === 'Tab') {
-          e.preventDefault();
-          lastFocusableNode.focus();
-        }
-        if (e.target === lastFocusableNode && !e.shiftKey && e.key === 'Tab') {
-          e.preventDefault();
-          firstFocusableNode.focus();
-        }
+      if (!focusableNodeList) return;
+
+      const firstFocusableNode = focusableNodeList[0];
+      const lastFocusableNode = focusableNodeList[focusableNodeList.length - 1];
+
+      if (e.target === firstFocusableNode && e.shiftKey && e.key === 'Tab') {
+        e.preventDefault();
+        lastFocusableNode.focus();
+      }
+      if (e.target === lastFocusableNode && !e.shiftKey && e.key === 'Tab') {
+        e.preventDefault();
+        firstFocusableNode.focus();
       }
     };
 
     if (escClose) window.addEventListener('keyup', handleCloseModalWithEscHandler);
 
     if (mounted) {
-      dialogRef.current?.focus();
+      const focusableNodeList = dialogRef.current?.querySelectorAll<HTMLElement>(
+        'input, button, textarea, select, [href], [tabindex]',
+      );
+
+      if (focusableNodeList) {
+        const firstFocusableNode = focusableNodeList[0];
+
+        firstFocusableNode?.focus();
 
-      window.addEventListener('keydown', handleFocusTrap);
+        window.addEventListener('keydown', handleFocusTrap);
+      }
     }
 
     if (!mounted) setMounted(true);

src/components/home/NotRecruitmentPeriod/NotRecruitmentPeriod.component.tsx

@@ -2,6 +2,7 @@ import { Modal } from '@/components';
 import mashong from '@/assets/images/mashong-coffee-3x-min.png';
 import { Dispatch, SetStateAction } from 'react';
 import Image from 'next/image';
+import { mashongCoffeeBase64 } from '@/assets/base64';
 import * as Styled from './NotRecruitmentPeriod.styled';
 
 interface NotRecruitmentPeriodProps {
@@ -25,7 +26,14 @@ const NotRecruitmentPeriod = ({ setIsOpenModal }: NotRecruitmentPeriodProps) =>
         </Styled.GoToOfficialPage>
         <Styled.CloseButton onClick={handleCloseModal}>지난 모집 훑어보기</Styled.CloseButton>
         <Styled.MashongWrapper>
-          <Image src={mashong.src} alt="" layout="fill" priority />
+          <Image
+            src={mashong.src}
+            alt=""
+            layout="fill"
+            placeholder="blur"
+            blurDataURL={mashongCoffeeBase64}
+            priority
+          />
           <Styled.SpeechBubble>
             <Styled.Speech>현재 13기가 활발히 활동 중이에요</Styled.Speech>
             <Styled.SpeechDotBig />

src/components/home/NotRecruitmentPeriod/NotRecruitmentPeriod.styled.ts

@@ -67,6 +67,8 @@ export const MashongWrapper = styled.div`
   left: 50%;
   width: 11.1rem;
   height: 11rem;
+  overflow: hidden;
+  border-radius: 1rem;
   transform: translate3d(-50%, 0, 0);
 `;