From 6b330dee63369fd79fb71790d4f7c50ec7fa867d Mon Sep 17 00:00:00 2001 From: HaJunRyu Date: Sat, 1 Apr 2023 16:15:23 +0900 Subject: [PATCH 1/2] =?UTF-8?q?Feat:=20=EC=B4=88=EA=B8=B0=20=EB=A0=8C?= =?UTF-8?q?=EB=8D=94=EB=A7=81=EC=8B=9C=20=EB=85=B8=EC=B6=9C=EB=90=98?= =?UTF-8?q?=EB=8A=94=20mashong=20=EC=9D=B4=EB=AF=B8=EC=A7=80=EC=9D=98=20pl?= =?UTF-8?q?aceholder=EB=A5=BC=20=EC=84=A4=EC=A0=95=ED=95=9C=EB=8B=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/base64/index.ts | 1 + src/assets/base64/mashong-coffee.ts | 2 ++ .../NotRecruitmentPeriod.component.tsx | 10 +++++++++- .../NotRecruitmentPeriod.styled.ts | 2 ++ 4 files changed, 14 insertions(+), 1 deletion(-) create mode 100644 src/assets/base64/index.ts create mode 100644 src/assets/base64/mashong-coffee.ts diff --git a/src/assets/base64/index.ts b/src/assets/base64/index.ts new file mode 100644 index 0000000..0cb3a33 --- /dev/null +++ b/src/assets/base64/index.ts @@ -0,0 +1 @@ +export * from './mashong-coffee'; diff --git a/src/assets/base64/mashong-coffee.ts b/src/assets/base64/mashong-coffee.ts new file mode 100644 index 0000000..1d611a8 --- /dev/null +++ b/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'; diff --git a/src/components/home/NotRecruitmentPeriod/NotRecruitmentPeriod.component.tsx b/src/components/home/NotRecruitmentPeriod/NotRecruitmentPeriod.component.tsx index 5a85a6b..952e600 100644 --- a/src/components/home/NotRecruitmentPeriod/NotRecruitmentPeriod.component.tsx +++ b/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) => 지난 모집 훑어보기 - + 현재 13기가 활발히 활동 중이에요 diff --git a/src/components/home/NotRecruitmentPeriod/NotRecruitmentPeriod.styled.ts b/src/components/home/NotRecruitmentPeriod/NotRecruitmentPeriod.styled.ts index 3c2b816..5768877 100644 --- a/src/components/home/NotRecruitmentPeriod/NotRecruitmentPeriod.styled.ts +++ b/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); `; From ae47a0b2be55ef858ecd262148feab0534de5bc8 Mon Sep 17 00:00:00 2001 From: HaJunRyu Date: Sat, 1 Apr 2023 17:28:19 +0900 Subject: [PATCH 2/2] =?UTF-8?q?Refactor:=20Modal=EC=98=A4=ED=94=88?= =?UTF-8?q?=EC=8B=9C=20=EC=B4=88=EA=B8=B0=20=ED=8F=AC=EC=BB=A4=EC=8A=A4?= =?UTF-8?q?=EB=A5=BC=20focusable=EC=9D=98=20=EC=B2=AB=EB=B2=88=EC=A7=B8=20?= =?UTF-8?q?=EC=9A=94=EC=86=8C=EB=A1=9C=20=EB=B3=80=EA=B2=BD=ED=95=9C?= =?UTF-8?q?=EB=8B=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/Modal/Modal.component.tsx | 36 +++++++++++-------- 1 file changed, 22 insertions(+), 14 deletions(-) diff --git a/src/components/common/Modal/Modal.component.tsx b/src/components/common/Modal/Modal.component.tsx index 455fafa..c14a5d0 100644 --- a/src/components/common/Modal/Modal.component.tsx +++ b/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( + '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);