🎨 컴포넌트 이름 변경에 따른 코드 수정 (#219)

BookwooriAlpineClub · Jan 18, 2025 · fd922ae · fd922ae
1 parent b09f10c
commit fd922ae
Show file tree

Hide file tree

Showing 16 changed files with 136 additions and 131 deletions.
diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
@@ -1,8 +1,9 @@
 import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
-import useSideBar from '@src/hooks/useSideBar';
-import useServerbar from '@src/hooks/useServerbar';
-import Serverbar from '@src/components/common/Serverbar';
+import GlobalNavigationDrawer from '@src/components/common/modal/GlobalNavigationDrawer';
+import CommunityDrawer from '@src/components/common/modal/CommunityDrawer';
+import useGlobalNavigationDrawer from '@src/hooks/useGlobalNavigationDrawer';
+import useCommunityDrawer from '@src/hooks/useCommunityDrawer';
 import { ReactComponent as Hamburger } from '@src/assets/icons/menu.svg';
 import { ReactComponent as Back } from '@src/assets/icons/left_arrow.svg';
 import { ReactComponent as Users } from '@src/assets/icons/users.svg';
@@ -21,17 +22,19 @@ const renderButton = (type: string, onClick: () => void, Icon: React.FC) => (
 const Header = ({ text, headerType }: HeaderProps) => {
   const navigate = useNavigate();
   const handleClick = () => navigate(-1);
-  const { openServerbar } = useServerbar();
-  const { openSideBar } = useSideBar();
+  const { openGlobalNavigationDrawer } = useGlobalNavigationDrawer();
+  const { openCommunityDrawer } = useCommunityDrawer();
 
   return (
     <Layout>
       {headerType === 'back' && renderButton('back', handleClick, Back)}
       {(headerType === 'hamburger' || headerType === 'server') &&
-        renderButton('hamburger', openServerbar, Hamburger)}
-      <Serverbar />
+        renderButton('hamburger', openGlobalNavigationDrawer, Hamburger)}
       <Label>{text}</Label>
-      {headerType === 'server' && renderButton('server', openSideBar, Users)}
+      {headerType === 'server' &&
+        renderButton('server', openCommunityDrawer, Users)}
+      <GlobalNavigationDrawer />
+      <CommunityDrawer />
     </Layout>
   );
 };
@@ -44,7 +47,7 @@ const Layout = styled.header`
   justify-content: space-between;
   position: fixed;
   top: 0;
-  z-index: ${({theme}) => theme.zIndex.header};
+  z-index: ${({ theme }) => theme.zIndex.header};
 
   width: 100%;
   height: 4.375rem;

diff --git a/src/components/common/input/Datepicker.tsx b/src/components/common/input/Datepicker.tsx
@@ -16,7 +16,7 @@ interface Props {
   setValue: React.Dispatch<React.SetStateAction<Period>>;
 }
 
-const InputDatepicker = ({
+const Datepicker = ({
   type,
   name,
   min,
@@ -61,7 +61,7 @@ const InputDatepicker = ({
   );
 };
 
-export default InputDatepicker;
+export default Datepicker;
 export type { Period };
 
 const Container = styled.div`

diff --git a/src/components/common/input/Dropdown.tsx b/src/components/common/input/Dropdown.tsx
@@ -14,7 +14,7 @@ interface Props {
   setValue: React.Dispatch<React.SetStateAction<string>>;
 }
 
-const InputDropdown = ({
+const Dropdown = ({
   name,
   placeholder,
   options,
@@ -45,7 +45,7 @@ const InputDropdown = ({
   );
 };
 
-export default InputDropdown;
+export default Dropdown;
 
 const Container = styled.div`
   display: flex;

diff --git a/src/components/common/input/RadioField.tsx b/src/components/common/input/RadioField.tsx
@@ -23,7 +23,7 @@ interface Props<ValueType> {
  * @property {string} text - 중앙 텍스트
  * @property {boolean} disabled - 선택지 비활성화 여부
  */
-const InputRadio = <ValueType extends string>({
+const RadioField = <ValueType extends string>({
   name,
   options,
   defaultValue,
@@ -53,7 +53,7 @@ const InputRadio = <ValueType extends string>({
   );
 };
 
-export default InputRadio;
+export default RadioField;
 
 const Container = styled.div`
   display: flex;

diff --git a/src/components/common/input/TextField.tsx b/src/components/common/input/TextField.tsx
@@ -16,7 +16,7 @@ interface Props {
  * @props as - 'input'은 input[type='text'] 태그, 'textarea'는 textarea 태그를 사용합니다.
  * @props maxLength - 입력 가능한 최대 글자 수를 제한합니다. -1로 설정 시 제한이 없으며 글자 수를 표시하지 않습니다.
  */
-const InputText = ({
+const TextField = ({
   as,
   name,
   placeholder,
@@ -43,7 +43,7 @@ const InputText = ({
   );
 };
 
-export default InputText;
+export default TextField;
 
 const Input = styled.input<{ as: string; value: string; maxLength: number }>`
   display: flex;

diff --git a/src/components/common/modal/CommunityDrawer.tsx b/src/components/common/modal/CommunityDrawer.tsx
@@ -7,17 +7,17 @@ import { ReactComponent as BiCrown } from '@src/assets/icons/bi_crown.svg';
 import useCopyToClipboard from '@src/hooks/useCopyToClipboard';
 import useDialog from '@src/hooks/useDialog';
 import ProfileModal from '@src/components/communitysidebar/ProfileModal';
-import useSideBar from '@src/hooks/useSideBar';
-import useSideBarData from '@src/hooks/query/useSideBarData';
+import useCommunityDrawer from '@src/hooks/useCommunityDrawer';
+import useCommunityDrawerData from '@src/hooks/query/useCommunityDrawerData';
 import { useNavigate, useParams } from 'react-router-dom';
 import { ROUTE_PATH } from '@src/constants/routePath';
 import { decodeIdParam, encodeId } from '@src/utils/formatters';
 
-const CommunitySideBar = () => {
-  const { sideBar, closeSideBar } = useSideBar();
+const CommunityDrawer = () => {
+  const { communityDrawer, closeCommunityDrawer } = useCommunityDrawer();
   const { serverId: id } = useParams<{ serverId: string }>();
   const serverId = decodeIdParam(id ?? '-1');
-  const { serverInfo, memberList, copyText } = useSideBarData(serverId);
+  const { serverInfo, memberList, copyText } = useCommunityDrawerData(serverId);
   const { handleCopy } = useCopyToClipboard(copyText);
   const { openDialog } = useDialog();
 
@@ -34,18 +34,18 @@ const CommunitySideBar = () => {
       encodeId(serverId),
     );
     navigate(`${serverSetting}`);
-    closeSideBar();
+    closeCommunityDrawer();
   };
 
   return (
     <Scrim
-      isOpen={sideBar.isOpen}
-      transition={sideBar.transition}
-      closeModal={closeSideBar}
+      isOpen={communityDrawer.isOpen}
+      transition={communityDrawer.transition}
+      closeModal={closeCommunityDrawer}
     >
-      <SideBarContainer
-        isOpen={sideBar.isOpen}
-        transition={sideBar.transition}
+      <CommunityDrawerContainer
+        isOpen={communityDrawer.isOpen}
+        transition={communityDrawer.transition}
         onClick={(e) => e.stopPropagation()} // 이벤트 버블링 방지
       >
         <CommunityTitleContainer>
@@ -87,14 +87,14 @@ const CommunitySideBar = () => {
             ))}
           </MemberListContainer>
         </TitleAndFieldContainer>
-      </SideBarContainer>
+      </CommunityDrawerContainer>
     </Scrim>
   );
 };
 
-export default CommunitySideBar;
+export default CommunityDrawer;
 
-const SideBarContainer = styled.div<{
+const CommunityDrawerContainer = styled.div<{
   isOpen: boolean;
   transition: ModalTransition;
 }>`

diff --git a/src/components/common/modal/GlobalNavigationDrawer.tsx b/src/components/common/modal/GlobalNavigationDrawer.tsx
@@ -1,11 +1,11 @@
 import type { ModalTransition } from '@src/types/modal';
 import { useNavigate, useParams, useLocation } from 'react-router-dom';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
-import { serverbarState, currentServerIdState } from '@src/states/atoms';
+import { globalNavigationDrawerState, currentServerIdState } from '@src/states/atoms';
 import { ROUTE_PATH } from '@src/constants/routePath';
 import { decodeIdParam } from '@src/utils/formatters';
 import useEncodedNavigate from '@src/hooks/useEncodedNavigate';
-import useServerbar from '@src/hooks/useServerbar';
+import useGlobalNavigationDrawer from '@src/hooks/useGlobalNavigationDrawer';
 import useServer from '@src/hooks/query/useServer';
 import styled from 'styled-components';
 import Scrim from '@src/components/common/Scrim';
@@ -23,28 +23,28 @@ type buttonConfig = {
 };
 
 /**
- * Serverbar 컴포넌트 사용법
+ * 컴포넌트 사용법
  *
- * 0. Serverbar 컴포넌트를 추가한다.
- * 1. useServerbar 훅을 불러온다.
- * 2. openServerbar()로 연다.
+ * 0. GlobalNavigationDrawer 컴포넌트를 추가한다.
+ * 1. useGlobalNavigationDrawer 훅을 불러온다.
+ * 2. openGlobalNavigationDrawer()로 연다.
  *
  * @example
- * <Serverbar />
+ * <GlobalNavigationDrawer />
  *
- * import useServerbar from '@src/hooks/useServerbar';
- * const { openServerbar } = useServerbar();
+ * import useGlobalNavigationDrawer from '@src/hooks/useGlobalNavigationDrawer';
+ * const { openGlobalNavigationDrawer } = useGlobalNavigationDrawer();
  *
- * openServerbar();
+ * openGlobalNavigationDrawer();
  */
-const Serverbar = () => {
-  const { closeServerbar } = useServerbar();
+const GlobalNavigationDrawer = () => {
+  const { closeGlobalNavigationDrawer } = useGlobalNavigationDrawer();
   const navigate = useNavigate();
   const encodedNavigate = useEncodedNavigate();
   const { serverId: params } = useParams<{ serverId: string }>();
   const location = useLocation();
 
-  const { isOpen, transition } = useRecoilValue(serverbarState);
+  const { isOpen, transition } = useRecoilValue(globalNavigationDrawerState);
   const setCurrentServerId = useSetRecoilState(currentServerIdState);
 
   let decodedServerId: number = -1;
@@ -92,15 +92,19 @@ const Serverbar = () => {
 
   const handleMyClick = (link: string) => {
     navigate(link);
-    closeServerbar();
+    closeGlobalNavigationDrawer();
   };
   const handleServerClick = (id: number) => {
     encodedNavigate('/server', id);
-    closeServerbar();
+    closeGlobalNavigationDrawer();
   };
 
   return (
-    <Scrim isOpen={isOpen} transition={transition} closeModal={closeServerbar}>
+    <Scrim
+      isOpen={isOpen}
+      transition={transition}
+      closeModal={closeGlobalNavigationDrawer}
+    >
       <Container
         onClick={(event) => event.stopPropagation()}
         $transition={transition}
@@ -111,7 +115,7 @@ const Serverbar = () => {
               <SButton key={name} className={className}>
                 <input
                   type='radio'
-                  name='serverbar'
+                  name='GlobalNavigationDrawer'
                   onClick={() => handleMyClick(link)}
                   checked={window.location.pathname === link}
                 />
@@ -125,7 +129,7 @@ const Serverbar = () => {
               <ImageButton key={serverId} $img={serverImg || ''}>
                 <input
                   type='radio'
-                  name='serverbar'
+                  name='GlobalNavigationDrawer'
                   onChange={() => handleServerClick(serverId)}
                   checked={decodedServerId === serverId}
                 />
@@ -137,7 +141,7 @@ const Serverbar = () => {
   );
 };
 
-export default Serverbar;
+export default GlobalNavigationDrawer;
 
 const Container = styled.section<{ $transition: ModalTransition }>`
   position: fixed;

diff --git a/src/components/community/ProfileModal.tsx b/src/components/community/ProfileModal.tsx
@@ -6,7 +6,7 @@ import { ReactComponent as Hiking } from '@src/assets/icons/md_outline_auto_stor
 import { useNavigate } from 'react-router-dom';
 import { ROUTE_PATH } from '@src/constants/routePath';
 import useDialog from '@src/hooks/useDialog';
-import useSideBar from '@src/hooks/useSideBar';
+import useCommunityDrawer from '@src/hooks/useCommunityDrawer';
 
 const buttons = {
   hiking: {
@@ -41,19 +41,19 @@ const buttons = {
 const ProfileModal = ({ memberId }: { memberId: number }) => {
   const navigate = useNavigate();
   const { closeDialog } = useDialog();
-  const { closeSideBar } = useSideBar();
+  const { closeCommunityDrawer } = useCommunityDrawer();
 
   const handleClickHiking = () => {
     navigate(`${ROUTE_PATH.library}/${memberId}`);
     closeDialog();
-    closeSideBar();
+    closeCommunityDrawer();
   };
 
   const handleclickMessage = () => {
     // const roomId = getMessageRoomIdByMemberId(data.messageRooms, memberId);
     navigate(`${ROUTE_PATH.dmChat}/${memberId}`);
     closeDialog();
-    closeSideBar();
+    closeCommunityDrawer();
   };
 
   return (

diff --git a/src/hooks/query/useSideBarData.ts → src/hooks/query/useCommunityDrawerData.ts b/src/hooks/query/useSideBarData.ts → src/hooks/query/useCommunityDrawerData.ts
@@ -7,7 +7,7 @@ import {
 import { Server, ServerMembersResponse } from '@src/types/apis/server.d';
 import { AxiosError } from 'axios';
 
-const useSideBarData = (serverId: number) => {
+const useCommunityDrawerData = (serverId: number) => {
   const isValidServerId = serverId > 0;
 
   // 서버 정보
@@ -42,4 +42,4 @@ const useSideBarData = (serverId: number) => {
   };
 };
 
-export default useSideBarData;
+export default useCommunityDrawerData;
diff --git a/src/hooks/useCommunityDrawer.ts b/src/hooks/useCommunityDrawer.ts
@@ -0,0 +1,26 @@
+import { useRecoilState } from 'recoil';
+import { communityDrawerState } from '@src/states/atoms';
+
+const useCommunityDrawer = () => {
+  const [communityDrawer, setCommunityDrawer] = useRecoilState(communityDrawerState);
+
+  const openCommunityDrawer = (): void => {
+    document.body.style.overflow = 'hidden';
+    setCommunityDrawer((prev) => ({ ...prev, isOpen: true }));
+    setTimeout(() => {
+      setCommunityDrawer((prev) => ({ ...prev, transition: 'open' }));
+    }, 1);
+  };
+
+  const closeCommunityDrawer = (): void => {
+    setCommunityDrawer((prev) => ({ ...prev, transition: 'close' }));
+    setTimeout(() => {
+      setCommunityDrawer({ isOpen: false, transition: 'close' });
+    }, 300);
+    document.body.style.overflow = '';
+  };
+
+  return { communityDrawer, openCommunityDrawer, closeCommunityDrawer };
+};
+
+export default useCommunityDrawer;