From 1868115b562459a9a86ee3ffb0e89c00c7b413e1 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Fri, 20 Sep 2024 08:11:01 +0000 Subject: [PATCH 1/5] Create draft PR for #679 From 35d1fbe2fc437628cf1c295b994c7b1a600c8f95 Mon Sep 17 00:00:00 2001 From: Jeongwoo Park <121204715+lurgi@users.noreply.github.com> Date: Mon, 23 Sep 2024 12:27:34 +0900 Subject: [PATCH 2/5] =?UTF-8?q?feat:=20=ED=83=AD=20=EB=A9=94=EB=89=B4=20?= =?UTF-8?q?=EC=97=90=EB=8B=88=EB=A9=94=EC=9D=B4=EC=85=98=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../_common/molecules/Tab/index.tsx | 2 +- .../components/_common/molecules/Tab/style.ts | 19 +++-- .../ApplyManagement.stories.tsx | 7 +- frontend/src/pages/Dashboard/index.tsx | 79 ++++++++----------- 4 files changed, 51 insertions(+), 56 deletions(-) diff --git a/frontend/src/components/_common/molecules/Tab/index.tsx b/frontend/src/components/_common/molecules/Tab/index.tsx index 3d7004d0a..fac3bbbc2 100644 --- a/frontend/src/components/_common/molecules/Tab/index.tsx +++ b/frontend/src/components/_common/molecules/Tab/index.tsx @@ -41,7 +41,7 @@ function TabItem({ label, isActive, name, handleClickTabItem, disabled }: TabIte } function TabPanel({ isVisible, children }: React.PropsWithChildren) { - return {children}; + return isVisible && {children}; } Tab.TabItem = TabItem; diff --git a/frontend/src/components/_common/molecules/Tab/style.ts b/frontend/src/components/_common/molecules/Tab/style.ts index f552be4a4..3e8041327 100644 --- a/frontend/src/components/_common/molecules/Tab/style.ts +++ b/frontend/src/components/_common/molecules/Tab/style.ts @@ -1,5 +1,15 @@ +import { keyframes } from '@emotion/react'; import styled from '@emotion/styled'; -import { hiddenStyles, hideScrollBar, visibleStyles } from '@styles/utils'; +import { hideScrollBar } from '@styles/utils'; + +const showUp = keyframes` + from { + transform: translateY(1rem); + } + to { + transform: translateY(0); + } +`; const Nav = styled.nav` display: flex; @@ -51,17 +61,14 @@ const TabButton = styled.button<{ isActive: boolean }>` } `; -const TabPanel = styled.div<{ isVisible: boolean }>` +const TabPanel = styled.div` width: 100%; height: 85%; padding: 2rem 0; ${hideScrollBar}; - transition: transform 0.2s ease-in-out; - transform: translateY(${({ isVisible }) => (isVisible ? '0' : '1rem')}); - - ${({ isVisible }) => (isVisible ? visibleStyles : hiddenStyles)}; + animation: ${showUp} 0.2s ease-in-out; `; const S = { diff --git a/frontend/src/components/applyManagement/ApplyManagement.stories.tsx b/frontend/src/components/applyManagement/ApplyManagement.stories.tsx index 084b47c96..4b6928552 100644 --- a/frontend/src/components/applyManagement/ApplyManagement.stories.tsx +++ b/frontend/src/components/applyManagement/ApplyManagement.stories.tsx @@ -38,12 +38,9 @@ export default meta; type Story = StoryObj; export const Default: Story = { - render: (args) => ( + render: () => (
- +
), }; diff --git a/frontend/src/pages/Dashboard/index.tsx b/frontend/src/pages/Dashboard/index.tsx index 67fe790e7..093b85c94 100644 --- a/frontend/src/pages/Dashboard/index.tsx +++ b/frontend/src/pages/Dashboard/index.tsx @@ -60,50 +60,41 @@ export default function Dashboard() { {/* TODO: [08.21-lurgi] 현재 모달이 여러개를 컨트롤 할 수 없는 관계로 새로 렌더링 합니다. 추후에 Modal에 id값을 부여하여 여러개의 모달을 컨트롤 할 수 있게 변경해야합니다. 파일 맨 첫줄 주석도 삭제해야합니다. */} - {currentMenu === '지원자 관리' && ( - - - - - - - - )} - - {currentMenu === '불합격자 관리' && ( - - - - - - - - )} - - {currentMenu === '모집 과정 관리' && ( - - - - )} - - {currentMenu === '공고 관리' && ( - - - - )} - - {currentMenu === '지원서 관리' && ( - - - - )} + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); } From 2eaee49d4da775f4f97cdb1d9df1d1b573b2c4e3 Mon Sep 17 00:00:00 2001 From: Jeongwoo Park <121204715+lurgi@users.noreply.github.com> Date: Mon, 23 Sep 2024 14:01:06 +0900 Subject: [PATCH 3/5] =?UTF-8?q?feat:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20prop=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/applyManagement/index.tsx | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/frontend/src/components/applyManagement/index.tsx b/frontend/src/components/applyManagement/index.tsx index 50ee4e4f9..e4e2782f6 100644 --- a/frontend/src/components/applyManagement/index.tsx +++ b/frontend/src/components/applyManagement/index.tsx @@ -1,4 +1,4 @@ -import { useEffect, useRef } from 'react'; +import { useRef } from 'react'; import { useParams } from 'react-router-dom'; import useApplyManagement from '@hooks/useApplyManagement'; @@ -9,7 +9,7 @@ import { APPLY_QUESTION_HEADER, DEFAULT_QUESTIONS, MAX_QUESTION_LENGTH } from '@ import { HiOutlinePlusCircle } from 'react-icons/hi'; import S from './style'; -export default function ApplyManagement({ isVisible }: { isVisible: boolean }) { +export default function ApplyManagement() { const wrapperRef = useRef(null); const { applyFormId } = useParams<{ applyFormId: string }>() as { applyFormId: string; @@ -29,12 +29,6 @@ export default function ApplyManagement({ isVisible }: { isVisible: boolean }) { deleteQuestion, } = useApplyManagement({ applyFormId }); - useEffect(() => { - if (isVisible && wrapperRef.current && !isLoading) { - wrapperRef.current.scrollTop = 0; - } - }, [isVisible, isLoading]); - if (isLoading) {
로딩 중입니다...
; } From 26b36d31d49162521a1ac96a2acc2807374385c1 Mon Sep 17 00:00:00 2001 From: Jeongwoo Park <121204715+lurgi@users.noreply.github.com> Date: Mon, 23 Sep 2024 14:10:17 +0900 Subject: [PATCH 4/5] =?UTF-8?q?fix:=20mount=EC=8B=9C=20focus=EB=90=98?= =?UTF-8?q?=EB=8A=94=20=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/recruitment/CheckBoxField/index.tsx | 6 +++++- .../src/components/recruitment/RadioInputField/index.tsx | 6 +++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/recruitment/CheckBoxField/index.tsx b/frontend/src/components/recruitment/CheckBoxField/index.tsx index 64e564376..2e1efb6c2 100644 --- a/frontend/src/components/recruitment/CheckBoxField/index.tsx +++ b/frontend/src/components/recruitment/CheckBoxField/index.tsx @@ -55,11 +55,15 @@ export default function CheckBoxField({ choices, setChoices }: Props) { if (index === choices.length - 1) { addOption(); } + if (index !== choices.length - 1) { + inputRefs.current[index + 1]?.focus(); + } } }; useEffect(() => { - focusLastOption(); + const isAnyInputFocused = inputRefs.current.some((input) => input === document.activeElement); + if (isAnyInputFocused) focusLastOption(); }, [focusLastOption]); const setInputRefCallback = (index: number) => (node: HTMLInputElement) => { diff --git a/frontend/src/components/recruitment/RadioInputField/index.tsx b/frontend/src/components/recruitment/RadioInputField/index.tsx index 3d6645a21..86b31e442 100644 --- a/frontend/src/components/recruitment/RadioInputField/index.tsx +++ b/frontend/src/components/recruitment/RadioInputField/index.tsx @@ -55,11 +55,15 @@ export default function RadioInputField({ choices, setChoices }: Props) { if (index === choices.length - 1) { addOption(); } + if (index !== choices.length - 1) { + inputRefs.current[index + 1]?.focus(); + } } }; useEffect(() => { - focusLastOption(); + const isAnyInputFocused = inputRefs.current.some((input) => input === document.activeElement); + if (isAnyInputFocused) focusLastOption(); }, [focusLastOption]); const setInputRefCallback = (index: number) => (node: HTMLInputElement) => { From 512462db800f93249d6a6f670abf0498200eae6c Mon Sep 17 00:00:00 2001 From: Jeongwoo Park <121204715+lurgi@users.noreply.github.com> Date: Tue, 24 Sep 2024 08:59:49 +0900 Subject: [PATCH 5/5] refactor: Remove unnecessary if --- frontend/src/components/recruitment/CheckBoxField/index.tsx | 3 +-- frontend/src/components/recruitment/RadioInputField/index.tsx | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/recruitment/CheckBoxField/index.tsx b/frontend/src/components/recruitment/CheckBoxField/index.tsx index 2e1efb6c2..e5aa2aac0 100644 --- a/frontend/src/components/recruitment/CheckBoxField/index.tsx +++ b/frontend/src/components/recruitment/CheckBoxField/index.tsx @@ -54,8 +54,7 @@ export default function CheckBoxField({ choices, setChoices }: Props) { e.preventDefault(); if (index === choices.length - 1) { addOption(); - } - if (index !== choices.length - 1) { + } else { inputRefs.current[index + 1]?.focus(); } } diff --git a/frontend/src/components/recruitment/RadioInputField/index.tsx b/frontend/src/components/recruitment/RadioInputField/index.tsx index 86b31e442..77615e72c 100644 --- a/frontend/src/components/recruitment/RadioInputField/index.tsx +++ b/frontend/src/components/recruitment/RadioInputField/index.tsx @@ -54,8 +54,7 @@ export default function RadioInputField({ choices, setChoices }: Props) { e.preventDefault(); if (index === choices.length - 1) { addOption(); - } - if (index !== choices.length - 1) { + } else { inputRefs.current[index + 1]?.focus(); } }