[Refactor] 컴포넌트, 변수명 리펙토링

src/page/archiving/index/ArchivingPage.tsx

@@ -23,7 +23,7 @@ import { theme } from '@/common/style/theme/theme';
 import { useTeamId } from '@/shared/store/team';
 
 const ArchivingPage = () => {
-  const [selectedId, setSelectedId] = useState('total');
+  const [selectedTabId, setSelectedTabId] = useState('total');
 
   const teamId = useTeamId();
 
@@ -32,7 +32,7 @@ const ArchivingPage = () => {
   };
 
   const handleSelectedId = (id: string) => {
-    setSelectedId(id);
+    setSelectedTabId(id);
   };
 
   const handleBlockClick = (e: React.MouseEvent<HTMLDivElement>, block: Block) => {
@@ -45,7 +45,7 @@ const ArchivingPage = () => {
     });
 
     setSelectedBlock(block);
-    setSelectedId('selected');
+    setSelectedTabId('selected');
   };
 
   const sideBarRef = useOutsideClick(handleClose, 'TimeBlock');
@@ -151,7 +151,7 @@ const ArchivingPage = () => {
       <DocumentBar
         selectedBlock={selectedBlock}
         ref={sideBarRef}
-        selectedId={selectedId}
+        selectedTabId={selectedTabId}
         onSelectId={handleSelectedId}
         onClickClose={handleClose}
       />

src/page/archiving/index/component/DocumentBar/DocumentBar.style.ts

@@ -2,7 +2,7 @@ import { css } from '@emotion/react';
 
 import { theme } from '@/common/style/theme/theme';
 
-export const containerStyle = (blockSelected: string) =>
+export const documentBarContainerStyle = (blockSelected: string) =>
   css({
     position: 'sticky',
 

src/page/archiving/index/component/DocumentBar/DocumentBar.tsx

@@ -1,4 +1,4 @@
-import { containerStyle } from '@/page/archiving/index/component/DocumentBar/DocumentBar.style';
+import { documentBarContainerStyle } from '@/page/archiving/index/component/DocumentBar/DocumentBar.style';
 import DocumentBarTab from '@/page/archiving/index/component/DocumentBarTab/DocumentBarTab';
 import SelectedBlock from '@/page/archiving/index/component/SelectedBlock/SelectedBlock';
 import TotalDocument from '@/page/archiving/index/component/TotalDocument/TotalDocument';
@@ -8,35 +8,35 @@ import { ForwardedRef, forwardRef } from 'react';
 
 interface DocumentBarProps {
   selectedBlock?: Block;
-  selectedId: string;
+  selectedTabId: string;
   onSelectId: (Id: string) => void;
   onClickClose: () => void;
 }
 
 const DocumentBar = (
-  { selectedBlock, selectedId, onSelectId, onClickClose }: DocumentBarProps,
+  { selectedBlock, selectedTabId, onSelectId, onClickClose }: DocumentBarProps,
   ref: ForwardedRef<HTMLDivElement>
 ) => {
-  const handleTabClick = (selectedId: string, tabId: string) => {
-    if (tabId !== selectedId) {
+  const handleTabClick = (selectedTabId: string, tabId: string) => {
+    if (tabId !== selectedTabId) {
       onSelectId(tabId);
     }
   };
 
   return (
-    <aside css={containerStyle(selectedBlock ? selectedBlock.name : '')} ref={ref}>
-      <DocumentBarTab selectedId={selectedId} onTabClick={handleTabClick} />
-      {selectedId === 'selected' ? (
+    <aside css={documentBarContainerStyle(selectedBlock ? selectedBlock.name : '')} ref={ref}>
+      <DocumentBarTab selectedTabId={selectedTabId} onTabClick={handleTabClick} />
+      {selectedTabId === 'selected' ? (
         selectedBlock && (
           <SelectedBlock
-            selectedId={selectedId}
+            selectedTabId={selectedTabId}
             blockName={selectedBlock.name}
             selectedBlock={selectedBlock}
             onClickClose={onClickClose}
           />
         )
       ) : (
-        <TotalDocument selectedId={selectedId} />
+        <TotalDocument selectedTabId={selectedTabId} />
       )}
     </aside>
   );

src/page/archiving/index/component/DocumentBarTab/DocumentBarTab.style.ts

@@ -9,8 +9,8 @@ export const tabStyle = (tabId: string) =>
     font: `${theme.text.body04}`,
   });
 
-export const selectedStyle = (selected: string, tabId: string) =>
-  selected === tabId
+export const selectedStyle = (selectedTabId: string, tabId: string) =>
+  selectedTabId === tabId
     ? css({
         backgroundColor: theme.colors.white,
 

src/page/archiving/index/component/DocumentBarTab/DocumentBarTab.tsx

@@ -4,21 +4,21 @@ import Button from '@/common/component/Button/Button';
 import Flex from '@/common/component/Flex/Flex';
 
 interface DocumentBarTabProps {
-  selectedId: string;
-  onTabClick: (selectedId: string, tabId: string) => void;
+  selectedTabId: string;
+  onTabClick: (selectedTabId: string, tabId: string) => void;
 }
 
-const DocumentBarTab = ({ selectedId, onTabClick }: DocumentBarTabProps) => {
+const DocumentBarTab = ({ selectedTabId, onTabClick }: DocumentBarTabProps) => {
   return (
     <Flex tag={'nav'}>
       <Button
-        onClick={() => onTabClick(selectedId, 'selected')}
-        css={[tabStyle('selected'), selectedStyle(selectedId, 'selected')]}>
+        onClick={() => onTabClick(selectedTabId, 'selected')}
+        css={[tabStyle('selected'), selectedStyle(selectedTabId, 'selected')]}>
         선택한 블록
       </Button>
       <Button
-        onClick={() => onTabClick(selectedId, 'total')}
-        css={[tabStyle('total'), selectedStyle(selectedId, 'total')]}>
+        onClick={() => onTabClick(selectedTabId, 'total')}
+        css={[tabStyle('total'), selectedStyle(selectedTabId, 'total')]}>
         전체 문서
       </Button>
     </Flex>

src/page/archiving/index/component/DocumentItem/DocumentItem.style.ts

@@ -2,13 +2,13 @@ import { css } from '@emotion/react';
 
 import { theme } from '@/common/style/theme/theme';
 
-export const containerStyle = (selectedId: string) =>
+export const documentItemContainerStyle = (selectedTabId: string) =>
   css({
     display: 'flex',
     flexDirection: 'column',
 
     gap: '0.4rem',
-    padding: selectedId === 'total' ? '1rem 1.2rem' : '1.2rem',
+    padding: selectedTabId === 'total' ? '1rem 1.2rem' : '1.2rem',
 
     border: `1px solid ${theme.colors.gray_300}`,
     borderRadius: '8px',
@@ -20,7 +20,7 @@ export const containerStyle = (selectedId: string) =>
     },
   });
 
-export const blockNameTextStyle = (color: string) =>
+export const blockNameStyle = (color: string) =>
   css({
     display: 'inline-block',
 
@@ -36,7 +36,7 @@ export const blockNameTextStyle = (color: string) =>
     textOverflow: 'ellipsis',
   });
 
-export const fileNameStyle = css({
+export const documentNameStyle = css({
   width: '18rem',
   maxHeight: '2.8rem',
 

src/page/archiving/index/component/DocumentItem/DocumentItem.tsx

@@ -1,10 +1,10 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import {
-  blockNameTextStyle,
-  containerStyle,
-  fileNameStyle,
+  blockNameStyle,
+  documentItemContainerStyle,
+  documentNameStyle,
 } from '@/page/archiving/index/component/DocumentItem/DocumentItem.style';
-import { handleDownload } from '@/page/archiving/index/util/document';
+import { downloadDocument } from '@/page/archiving/index/util/document';
 
 import { ReactNode } from 'react';
 
@@ -21,51 +21,58 @@ import { useTeamId } from '@/shared/store/team';
 interface DocumentItemProps {
   documentId: number;
   children: ReactNode;
-  selectedId: string;
+  selectedTabId: string;
   blockName?: string;
-  fileUrl: string;
-  color?: string;
+  documentUrl: string;
+  blockColor?: string;
 }
 
-const DocumentItem = ({ documentId, children, selectedId, blockName, fileUrl, color }: DocumentItemProps) => {
+const DocumentItem = ({
+  documentId,
+  children,
+  selectedTabId,
+  blockName,
+  documentUrl,
+  blockColor,
+}: DocumentItemProps) => {
   const { isOpen, openModal, closeModal, currentContent } = useModal();
 
-  const fileName = children?.toString();
+  const documentName = children?.toString();
 
   const teamId = useTeamId();
 
   //문서 클릭시 띄워주는 함수
-  const onClickDocumentItem = () => {
-    window.open(fileUrl);
+  const handleDocumentItemClick = () => {
+    window.open(documentUrl);
   };
 
   const handleDownloadClick = (e: React.MouseEvent<SVGSVGElement, MouseEvent>) => {
-    handleDownload(fileUrl, fileName);
+    downloadDocument(documentUrl, documentName);
     e.stopPropagation();
   };
 
-  const handleTrashClick = (e: React.MouseEvent<SVGSVGElement, MouseEvent>) => {
+  const handleTrashBoxClick = (e: React.MouseEvent<SVGSVGElement, MouseEvent>) => {
     e.stopPropagation();
     openModal(<DeleteModal title="docs" detail="docs" onClose={closeModal} teamId={+teamId} id={documentId} />);
   };
 
   return (
     <>
       {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions  */}
-      <li css={containerStyle(selectedId)} onClick={onClickDocumentItem}>
-        {color && (
+      <li css={documentItemContainerStyle(selectedTabId)} onClick={handleDocumentItemClick}>
+        {blockColor && (
           <div>
-            <Text tag="body8" css={blockNameTextStyle(color)}>
+            <Text tag="body8" css={blockNameStyle(blockColor)}>
               {blockName}
             </Text>
           </div>
         )}
         <Flex>
-          <Text tag="body6" css={fileNameStyle}>
-            {fileName}
+          <Text tag="body6" css={documentNameStyle}>
+            {documentName}
           </Text>
           <Download width={20} height={20} css={{ cursor: 'pointer' }} onClick={handleDownloadClick} />
-          <TrashBox width={20} height={20} onClick={(e) => handleTrashClick(e)} css={{ cursor: 'pointer' }} />
+          <TrashBox width={20} height={20} onClick={(e) => handleTrashBoxClick(e)} css={{ cursor: 'pointer' }} />
         </Flex>
       </li>
       <Modal isOpen={isOpen} children={currentContent} onClose={closeModal} />

src/page/archiving/index/component/SelectedBlock/SelectedBlock.tsx

@@ -1,6 +1,6 @@
 import DocumentItem from '@/page/archiving/index/component/DocumentItem/DocumentItem';
 import { ICON_TYPE } from '@/page/archiving/index/constant/icon';
-import { useBlockQuery } from '@/page/archiving/index/hook/api/useBlockQuery';
+import { useBlockInfoQuery } from '@/page/archiving/index/hook/api/useBlockInfoQuery';
 import { Block } from '@/page/archiving/index/type/blockType';
 import { DocumentType } from '@/page/archiving/index/type/documentType';
 import { formattingDate } from '@/page/archiving/index/util/date';
@@ -19,23 +19,23 @@ import { useTeamId } from '@/shared/store/team';
 import { blockNameStyle, deleteBtnStyle } from './SelectedBlock.style';
 
 interface DocumentBarInfoProps {
-  selectedId: string;
+  selectedTabId: string;
   blockName: string;
   selectedBlock: Block;
   onClickClose: () => void;
 }
 
-const SelectedBlock = ({ selectedId, blockName, selectedBlock, onClickClose }: DocumentBarInfoProps) => {
+const SelectedBlock = ({ selectedTabId, blockName, selectedBlock, onClickClose }: DocumentBarInfoProps) => {
   const { isOpen, openModal, closeModal, currentContent } = useModal();
 
   const teamId = useTeamId();
 
-  const { data: blockData } = useBlockQuery(+teamId, selectedBlock?.timeBlockId ?? 0);
+  const { data: blockData } = useBlockInfoQuery(+teamId, selectedBlock?.timeBlockId ?? 0);
 
   const startDate = formattingDate(selectedBlock.startDate);
   const endDate = formattingDate(selectedBlock.endDate);
 
-  const handleCloseClick = () => {
+  const handleModalClose = () => {
     onClickClose();
     closeModal;
   };
@@ -56,7 +56,7 @@ const SelectedBlock = ({ selectedId, blockName, selectedBlock, onClickClose }: D
               <DeleteModal
                 title="block"
                 detail="block"
-                onClose={handleCloseClick}
+                onClose={handleModalClose}
                 teamId={+teamId}
                 id={selectedBlock.timeBlockId}
               />
@@ -74,9 +74,9 @@ const SelectedBlock = ({ selectedId, blockName, selectedBlock, onClickClose }: D
           <DocumentItem
             key={data.documentId}
             documentId={data.documentId}
-            selectedId={selectedId}
+            selectedTabId={selectedTabId}
             blockName={data.blockName}
-            fileUrl={data.fileUrl}>
+            documentUrl={data.fileUrl}>
             {data.fileName}
           </DocumentItem>
         ))}

src/page/archiving/index/component/TotalDocument/TotalDocument.tsx

@@ -12,11 +12,11 @@ import useDebounce from '@/common/hook/useDebounce';
 
 import { useTeamId } from '@/shared/store/team';
 
-interface DocumentBarToolProps {
-  selectedId: string;
+interface TotalDocumentProps {
+  selectedTabId: string;
 }
 
-const TotalDocument = ({ selectedId }: DocumentBarToolProps) => {
+const TotalDocument = ({ selectedTabId }: TotalDocumentProps) => {
   const [selected, setSelected] = useState('최근 업로드 순');
 
   const teamId = useTeamId();
@@ -61,10 +61,10 @@ const TotalDocument = ({ selectedId }: DocumentBarToolProps) => {
             <DocumentItem
               key={data.documentId}
               documentId={data.documentId}
-              selectedId={selectedId}
+              selectedTabId={selectedTabId}
               blockName={data.blockName}
-              fileUrl={data.fileUrl}
-              color={data.color}>
+              documentUrl={data.fileUrl}
+              blockColor={data.color}>
               {data.fileName}
             </DocumentItem>
           )

src/page/archiving/index/hook/api/useBlockQuery.ts → src/page/archiving/index/hook/api/useBlockInfoQuery.ts

@@ -2,7 +2,7 @@ import { useQuery } from '@tanstack/react-query';
 
 import { getDocuments } from '@/shared/api/time-blocks/team/time-block';
 
-export const useBlockQuery = (teamId: number, blockId: number) => {
+export const useBlockInfoQuery = (teamId: number, blockId: number) => {
   return useQuery({
     queryKey: ['document', blockId],
     queryFn: () => getDocuments(teamId, blockId),

src/page/archiving/index/util/document.ts

@@ -1,4 +1,4 @@
-export const handleDownload = (fileUrl: string, name?: string) => {
+export const downloadDocument = (fileUrl: string, name?: string) => {
   const url = URL.createObjectURL(new Blob([fileUrl]));
   const a = document.createElement('a');
   a.href = url;

src/shared/component/LeftSidebar/LeftSidebar.style.ts

@@ -26,7 +26,7 @@ export const containerStyle = () =>
     transitionDuration: '0.5s',
   });
 
-export const LogoSymbolStyle = css({
+export const tikiLogoStyle = css({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
@@ -42,14 +42,14 @@ export const LogoSymbolStyle = css({
   cursor: 'pointer',
 });
 
-export const leftSidebarListStyle = css({
+export const leftSidebarMenuStyle = css({
   display: 'flex',
   flexDirection: 'column',
 
   gap: '2.4rem',
 });
 
-export const arrowStyle = css({
+export const arrowBtnStyle = css({
   position: 'absolute',
 
   top: '3.8rem',
@@ -66,4 +66,3 @@ export const settingStyle = css({
 
   bottom: '2.4rem',
 });
-