From 708d13d77f9ad6a14fa175068ef52301734f9ecf Mon Sep 17 00:00:00 2001 From: colorkite10 Date: Thu, 26 Oct 2023 23:30:26 +0900 Subject: [PATCH] =?UTF-8?q?comment:=20=EC=A3=BC=EC=84=9D=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/Tab/Tab.tsx | 4 +--- src/components/common/Tab/TabItem.tsx | 16 ++-------------- src/constants/tab.ts | 8 +++++--- src/context/TabContext.tsx | 26 +------------------------- src/hooks/useTabContext.tsx | 10 ++-------- src/utils/getKeyByValue.ts | 21 +-------------------- 6 files changed, 12 insertions(+), 73 deletions(-) diff --git a/src/components/common/Tab/Tab.tsx b/src/components/common/Tab/Tab.tsx index f47dac3e..5cee26bc 100644 --- a/src/components/common/Tab/Tab.tsx +++ b/src/components/common/Tab/Tab.tsx @@ -6,10 +6,9 @@ import { useEffect } from 'react'; import { SeparatorStyled, TabContainerStyled, TabItemStyled } from './Tab.style'; -interface TabItemProps { +interface TabItemProps extends React.HTMLAttributes { title: string; width: string; - onClick?: () => void; } interface TabProps { @@ -45,7 +44,6 @@ const Tab = ({ active, maxWidth, defaultTab, tabItems }: TabProps) => { isActive={isActive} width={tabItem.width} onClick={() => { - tabItem.onClick?.(); setActiveTab(tabItem.title); }} > diff --git a/src/components/common/Tab/TabItem.tsx b/src/components/common/Tab/TabItem.tsx index 239821c9..f584117d 100644 --- a/src/components/common/Tab/TabItem.tsx +++ b/src/components/common/Tab/TabItem.tsx @@ -1,26 +1,14 @@ import { useTabContext } from '@hooks/useTabContext'; -/** - * TabItem 컴포넌트는 현재 활성화된 탭에 속한 내용을 표시하며, - * useTabContext 커스텀 훅을 사용하여 탭 컨텍스트로부터 - * 현재 활성 탭을 가져와 화면에 표시함 - */ - type TabItemProps = { - index: string; //탭의 식별자 - children: React.ReactNode; //해당 탭의 내용 + index: string; + children: React.ReactNode; }; -//특정 탭 내용을 렌더링함 const TabItem = ({ index, children }: TabItemProps) => { const { activeTab } = useTabContext(); - //useTabContext 커스텀 훅을 사용하여 현재 활성 탭을 가져옴. - //이를 위해 useTabContext는 TabContext로부터 - //탭 관련 상태를 가져와서 현재 활성 탭을 반환. return <>{activeTab === index && children}; - //현재 활성 탭이 현재의 index와 일치하면 children을 렌더링 - //선택한 탭에 속한 내용만 화면에 나타낼 수 있도록 하는 부분 }; export default TabItem; diff --git a/src/constants/tab.ts b/src/constants/tab.ts index e383fb5b..1fb0ee6b 100644 --- a/src/constants/tab.ts +++ b/src/constants/tab.ts @@ -1,4 +1,4 @@ -export enum TAB_CONSTANTS { +enum TAB_CONSTANTS { PERFORMANCE = '공연', EVENT_SHOW = '행사', RECRUITMENT = '모집공고', @@ -6,5 +6,7 @@ export enum TAB_CONSTANTS { BOOKMARKED_EVENT = '북마크한 행사', } -export const CURRENT_MAIN_TAB_KEY = 'CURRENT_NEWS_TAB'; -export const CURRENT_PROFILE_TAB_KEY = 'CURRENT_PROFILE_TAB'; +const CURRENT_MAIN_TAB_KEY = 'CURRENT_NEWS_TAB'; +const CURRENT_PROFILE_TAB_KEY = 'CURRENT_PROFILE_TAB'; + +export { TAB_CONSTANTS, CURRENT_MAIN_TAB_KEY, CURRENT_PROFILE_TAB_KEY }; diff --git a/src/context/TabContext.tsx b/src/context/TabContext.tsx index 24235618..7646528c 100644 --- a/src/context/TabContext.tsx +++ b/src/context/TabContext.tsx @@ -1,25 +1,8 @@ import { createContext, useState } from 'react'; -/* - * React 애플리케이션에서 탭 (Tab) 관련 상태를 관리하고 - * 다른 컴포넌트들 사이에서 이 상태를 공유하기 위한 - * 컨텍스트 (Context)를 설정 - */ - interface TabContextProps { - /* - * 탭 컨텍스트에 저장될 상태와 - * 상태를 업데이트하는 함수를 설명하는 프로퍼티 - * 이 컨텍스트는 현재 활성 탭을 추적하고 다른 컴포넌트들이 - * 이 탭을 변경하고 업데이트할 때 사용됨 - */ activeTab: string; setActiveTab: React.Dispatch>; - //React에서 상태를 업데이트하기 위한 함수의 타입 - //React.Dispatch: React에서 상태를 업데이트하는 함수를 나타내는 타입 - //일반적으로 useState와 같은 React 훅에서 반환된 setter 함수. - //React.SetStateAction: 상태를 업데이트하는 데 사용할 수 있는 값 또는 업데이트 함수를 나타내는 타입 - //string은 업데이트될 상태의 타입을 나타내며, React.SetStateAction은 이 상태를 업데이트하는 데 사용할 수 있는 값 또는 함수의 집합을 나타냄 } const TabContext = createContext({ @@ -27,16 +10,9 @@ const TabContext = createContext({ setActiveTab: () => {}, }); -/* - * TabContext를 사용하여 탭 상태를 관리하고, - * 다른 컴포넌트들에게 탭 관련 상태를 제공하는 역할 - */ export const TabContextProvider = ({ children }: { children: React.ReactNode }) => { - const [activeTab, setActiveTab] = useState(''); //현재 활성 탭 + const [activeTab, setActiveTab] = useState(''); - //TabContext.Provider 컴포넌트를 사용하여 TabContext를 제공 - //이 컨텍스트의 value 프로퍼티에는 현재 activeTab 상태와 setActiveTab 함수가 포함된 객체가 전달됨 - //children 프롭을 통해 이 컨텍스트를 사용할 다른 컴포넌트들을 렌더링 return {children}; }; diff --git a/src/hooks/useTabContext.tsx b/src/hooks/useTabContext.tsx index 84b908b1..d8e04389 100644 --- a/src/hooks/useTabContext.tsx +++ b/src/hooks/useTabContext.tsx @@ -4,16 +4,10 @@ import { useContext } from 'react'; export const useTabContext = () => { const context = useContext(TabContext); - //useContext 훅을 사용하여 TabContext를 가져옴 - //이 컨텍스트는 탭 관련 상태를 포함하고, 다른 컴포넌트에서 이 상태를 사용하거나 업데이트할 수 있게 함 - //이 컨텍스트는 TabContextProvider 컴포넌트를 통해 사용 가능한 상태를 제공하며, useTabContext를 호출하는 컴포넌트에서 이 상태를 이용할 수 있게 됨 + if (!context) { - //만약 context가 존재하지 않으면, 컨텍스트가 정확한 컴포넌트 계층 구조 내에서 사용되지 않았다는 것을 의미함 - //따라서 에러를 throw하여 개발자에게 알린다. throw new Error('useTabContext must be used within a TabProvider'); } + return context; - //컨텍스트가 정상적으로 존재한다면, context 객체를 반환 - //이 객체에는 컨텍스트에서 관리하는 상태와 상태를 업데이트하는 함수가 들어 있음 - //이를 통해 다른 컴포넌트에서 탭 관련 상태를 읽거나 업데이트할 수 있다. }; diff --git a/src/utils/getKeyByValue.ts b/src/utils/getKeyByValue.ts index 424fb20a..6664174e 100644 --- a/src/utils/getKeyByValue.ts +++ b/src/utils/getKeyByValue.ts @@ -1,30 +1,11 @@ -/** - * TypeScript를 사용하여 객체에서 특정 값에 해당하는 키를 - * 검색하는 유틸리티 함수인 getKeyByValue를 정의 - * 이 함수는 주어진 객체(일반적으로 열거형(enum) 객체와 같이 - * 키-값 쌍을 가지는 객체)에서 주어진 값에 해당하는 키를 찾아 - * 반환하거나, 값과 일치하는 키가 없는 경우 null을 반환함 - */ - -/** - * getKeyByValue 함수는 두 개의 매개변수를 가짐. - * enumObj는 객체로, 키-값 쌍을 포함하며, value와 일치하는 키를 찾을 대상 - * value는 찾고자 하는 값 - */ export function getKeyByValue( enumObj: T, value: string, ): keyof T | null { for (const key in enumObj) { - //함수 내에서 for...in 루프를 사용하여 enumObj 객체의 모든 키를 반복 if (enumObj[key] === value) { - //각 반복에서 현재 키(key)에 해당하는 값(enumObj[key])을 가져와서, 이 값이 value와 일치하는지 확인 return key as keyof T; - //일치하는 키를 찾으면 해당 키를 반환하고, - //as keyof T를 사용하여 타입 캐스팅을 수행하여 - //해당 키가 객체 enumObj의 키로 존재하는 것임을 - //타입스크립트에 알려줌 } } - return null; //일치하는 키가 없는 경우 null을 반환 + return null; }