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/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) {
로딩 중입니다...
; } diff --git a/frontend/src/components/recruitment/CheckBoxField/index.tsx b/frontend/src/components/recruitment/CheckBoxField/index.tsx index 64e564376..e5aa2aac0 100644 --- a/frontend/src/components/recruitment/CheckBoxField/index.tsx +++ b/frontend/src/components/recruitment/CheckBoxField/index.tsx @@ -54,12 +54,15 @@ export default function CheckBoxField({ choices, setChoices }: Props) { e.preventDefault(); if (index === choices.length - 1) { addOption(); + } else { + 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..77615e72c 100644 --- a/frontend/src/components/recruitment/RadioInputField/index.tsx +++ b/frontend/src/components/recruitment/RadioInputField/index.tsx @@ -54,12 +54,15 @@ export default function RadioInputField({ choices, setChoices }: Props) { e.preventDefault(); if (index === choices.length - 1) { addOption(); + } else { + 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/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 === '지원서 관리' && ( - - - - )} + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); }