refactor-fe: Tab 컴포넌트 수정 (#680)

Co-authored-by: Jeongwoo Park <[email protected]>
woowacourse-teams · Sep 24, 2024 · 2097c37 · 2097c37
1 parent dcae8f5
commit 2097c37
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 66 deletions.
diff --git 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<TabPanelProps>) {
-  return <S.TabPanel isVisible={isVisible}>{children}</S.TabPanel>;
+  return isVisible && <S.TabPanel>{children}</S.TabPanel>;
 }
 
 Tab.TabItem = TabItem;

diff --git 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
@@ -38,12 +38,9 @@ export default meta;
 type Story = StoryObj<typeof ApplyManagement>;
 
 export const Default: Story = {
-  render: (args) => (
+  render: () => (
     <div style={{ width: '700px' }}>
-      <ApplyManagement
-        {...args}
-        isVisible
-      />
+      <ApplyManagement />
     </div>
   ),
 };
diff --git 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<HTMLDivElement>(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) {
     <div>로딩 중입니다...</div>;
   }

diff --git 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
@@ -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
@@ -60,50 +60,41 @@ export default function Dashboard() {
       {/* TODO: [08.21-lurgi] 현재 모달이 여러개를 컨트롤 할 수 없는 관계로 새로 렌더링 합니다.
       추후에 Modal에 id값을 부여하여 여러개의 모달을 컨트롤 할 수 있게 변경해야합니다.
       파일 맨 첫줄 주석도 삭제해야합니다. */}
-      {currentMenu === '지원자 관리' && (
-        <Tab.TabPanel isVisible={currentMenu === '지원자 관리'}>
-          <SpecificApplicantIdProvider>
-            <SpecificProcessIdProvider>
-              <ProcessBoard processes={processes} />
-            </SpecificProcessIdProvider>
-          </SpecificApplicantIdProvider>
-        </Tab.TabPanel>
-      )}
-
-      {currentMenu === '불합격자 관리' && (
-        <Tab.TabPanel isVisible={currentMenu === '불합격자 관리'}>
-          <SpecificApplicantIdProvider>
-            <SpecificProcessIdProvider>
-              <ProcessBoard
-                processes={processes}
-                showRejectedApplicant
-              />
-            </SpecificProcessIdProvider>
-          </SpecificApplicantIdProvider>
-        </Tab.TabPanel>
-      )}
-
-      {currentMenu === '모집 과정 관리' && (
-        <Tab.TabPanel isVisible={currentMenu === '모집 과정 관리'}>
-          <ProcessManageBoard
-            dashboardId={dashboardId}
-            applyFormId={applyFormId}
-            processes={processes}
-          />
-        </Tab.TabPanel>
-      )}
-
-      {currentMenu === '공고 관리' && (
-        <Tab.TabPanel isVisible={currentMenu === '공고 관리'}>
-          <PostManageBoard applyFormId={applyFormId} />
-        </Tab.TabPanel>
-      )}
-
-      {currentMenu === '지원서 관리' && (
-        <Tab.TabPanel isVisible={currentMenu === '지원서 관리'}>
-          <ApplyManagement isVisible={currentMenu === '지원서 관리'} />
-        </Tab.TabPanel>
-      )}
+
+      <Tab.TabPanel isVisible={currentMenu === '지원자 관리'}>
+        <SpecificApplicantIdProvider>
+          <SpecificProcessIdProvider>
+            <ProcessBoard processes={processes} />
+          </SpecificProcessIdProvider>
+        </SpecificApplicantIdProvider>
+      </Tab.TabPanel>
+
+      <Tab.TabPanel isVisible={currentMenu === '불합격자 관리'}>
+        <SpecificApplicantIdProvider>
+          <SpecificProcessIdProvider>
+            <ProcessBoard
+              processes={processes}
+              showRejectedApplicant
+            />
+          </SpecificProcessIdProvider>
+        </SpecificApplicantIdProvider>
+      </Tab.TabPanel>
+
+      <Tab.TabPanel isVisible={currentMenu === '모집 과정 관리'}>
+        <ProcessManageBoard
+          dashboardId={dashboardId}
+          applyFormId={applyFormId}
+          processes={processes}
+        />
+      </Tab.TabPanel>
+
+      <Tab.TabPanel isVisible={currentMenu === '공고 관리'}>
+        <PostManageBoard applyFormId={applyFormId} />
+      </Tab.TabPanel>
+
+      <Tab.TabPanel isVisible={currentMenu === '지원서 관리'}>
+        <ApplyManagement />
+      </Tab.TabPanel>
     </S.AppContainer>
   );
 }