comment: 주석 제거

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<HTMLDivElement> {
   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);
               }}
             >

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;

src/constants/tab.ts

@@ -1,10 +1,12 @@
-export enum TAB_CONSTANTS {
+enum TAB_CONSTANTS {
   PERFORMANCE = '공연',
   EVENT_SHOW = '행사',
   RECRUITMENT = '모집공고',
   APPLY_PARTICIPATION = '참여신청한 행사',
   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 };

src/context/TabContext.tsx

@@ -1,42 +1,18 @@
 import { createContext, useState } from 'react';
 
-/*
- * React 애플리케이션에서 탭 (Tab) 관련 상태를 관리하고
- * 다른 컴포넌트들 사이에서 이 상태를 공유하기 위한
- * 컨텍스트 (Context)를 설정
- */
-
 interface TabContextProps {
-  /*
-   * 탭 컨텍스트에 저장될 상태와
-   * 상태를 업데이트하는 함수를 설명하는 프로퍼티
-   * 이 컨텍스트는 현재 활성 탭을 추적하고 다른 컴포넌트들이
-   * 이 탭을 변경하고 업데이트할 때 사용됨
-   */
   activeTab: string;
   setActiveTab: React.Dispatch<React.SetStateAction<string>>;
-  //React에서 상태를 업데이트하기 위한 함수의 타입
-  //React.Dispatch: React에서 상태를 업데이트하는 함수를 나타내는 타입
-  //일반적으로 useState와 같은 React 훅에서 반환된 setter 함수.
-  //React.SetStateAction<string>: 상태를 업데이트하는 데 사용할 수 있는 값 또는 업데이트 함수를 나타내는 타입
-  //string은 업데이트될 상태의 타입을 나타내며, React.SetStateAction<string>은 이 상태를 업데이트하는 데 사용할 수 있는 값 또는 함수의 집합을 나타냄
 }
 
 const TabContext = createContext<TabContextProps>({
   activeTab: '',
   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 <TabContext.Provider value={{ activeTab, setActiveTab }}>{children}</TabContext.Provider>;
 };
 

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 객체를 반환
-  //이 객체에는 컨텍스트에서 관리하는 상태와 상태를 업데이트하는 함수가 들어 있음
-  //이를 통해 다른 컴포넌트에서 탭 관련 상태를 읽거나 업데이트할 수 있다.
 };

src/utils/getKeyByValue.ts

@@ -1,30 +1,11 @@
-/**
- *  TypeScript를 사용하여 객체에서 특정 값에 해당하는 키를
- * 검색하는 유틸리티 함수인 getKeyByValue를 정의
- * 이 함수는 주어진 객체(일반적으로 열거형(enum) 객체와 같이
- * 키-값 쌍을 가지는 객체)에서 주어진 값에 해당하는 키를 찾아
- * 반환하거나, 값과 일치하는 키가 없는 경우 null을 반환함
- */
-
-/**
- * getKeyByValue 함수는 두 개의 매개변수를 가짐.
- * enumObj는 객체로, 키-값 쌍을 포함하며, value와 일치하는 키를 찾을 대상
- * value는 찾고자 하는 값
- */
 export function getKeyByValue<T extends { [index: string]: string }>(
   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;
 }