Merge pull request #177 from B03-Killer/develop

메인 병합
B03-Killer · Aug 4, 2024 · 90bfa76 · 90bfa76
2 parents a040c79 + 3c0dc13
commit 90bfa76
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 41 deletions.
diff --git a/...]/profile/[targetWorkspaceUserId]/edit/_components/InputBottomSheets/InputBottomSheet.tsx b/...]/profile/[targetWorkspaceUserId]/edit/_components/InputBottomSheets/InputBottomSheet.tsx
@@ -26,7 +26,7 @@ const InputBottomSheet = ({ editInput }: InputBottomSheetsProps) => {
       <BottomSheet key={editInput.label} isOpen={editInput.isOpen} onClose={() => editInput.onClick(editInput.value)}>
         <div className="mt-[12px] mb-[20px]">
           {editInput.label === '활동상태' ? (
-            <StatusCheckBox status={editInput.value} onChange={handleInputChange} />
+            <StatusCheckBox status={inputValue} onChange={handleInputChange} />
           ) : (
             <BottomLineTextFieldCount
               label={editInput.label}

diff --git a/...aceId]/profile/[targetWorkspaceUserId]/edit/_components/StatusCheckBox/StatusCheckBox.tsx b/...aceId]/profile/[targetWorkspaceUserId]/edit/_components/StatusCheckBox/StatusCheckBox.tsx
@@ -1,6 +1,6 @@
 import { userStatusList } from '@/assets/userStatusList';
+import CheckBox from '@/components/CheckBox';
 import Typography from '@/components/Typography';
-import CheckIcon from '@/icons/Check.svg';
 import { ChangeEvent } from 'react';
 
 interface StatusCheckBoxProps {
@@ -15,11 +15,11 @@ const StatusCheckBox = ({ status, onChange }: StatusCheckBoxProps) => {
         활동상태
       </Typography>
       {userStatusList.map((userStatus) => (
-        <label key={userStatus} className="flex flex-row justify-between py-[15px]">
+        <label key={userStatus} className="flex flex-row justify-between py-[15px] cursor-pointer">
           <Typography variant="Subtitle16px" color="grey700Black">
             {userStatus}
           </Typography>
-          <div>{status === userStatus && <CheckIcon className="w-[16px] h-[16px] stroke-[#7173FA]" />}</div>
+          <div>{status === userStatus && <CheckBox />}</div>
           <input
             className="hidden"
             type="checkbox"

diff --git a/src/components/BottomNavigationBar/BottomNavigationBar.tsx b/src/components/BottomNavigationBar/BottomNavigationBar.tsx
@@ -5,71 +5,60 @@ import CalendarIcon from '@/icons/Calendar.svg';
 import HomeIcon from '@/icons/HomeIcon.svg';
 import MessageCircleIcon from '@/icons/MessageCircle.svg';
 import UserIcon from '@/icons/User.svg';
-import useBottomNavigationStore from '@/store/bottomNavigationStore';
 import useUserStore from '@/store/userStore';
 import clsx from 'clsx';
 import Link from 'next/link';
-import { useState } from 'react';
-import { useShallow } from 'zustand/react/shallow';
+import { usePathname } from 'next/navigation';
 import { NavigationBar, Tab } from '../NavigationBar/NavigationBar';
 
 const BottomNavigationBar = ({ className }: { className?: string }) => {
+  const pathName = usePathname();
+  const curPath = pathName.split('/')[2];
   const workspaceId = useWorkspaceId();
   const workspaceUserId = useUserStore((state) => state.workspaceUserId);
-  const [activeIndex, setActiveIndex] = useState<number>(0);
-  const { bottomIndex, setBottomIndex } = useBottomNavigationStore(
-    useShallow((state) => ({
-      bottomIndex: state.bottomIndex,
-      setBottomIndex: state.setBottomIndex
-    }))
-  );
-
-  const handleClick = (index: number) => {
-    setBottomIndex(index);
-  };
 
   return (
     <div className={className}>
       <NavigationBar>
-        <Tab active={bottomIndex === 0} onClick={() => handleClick(0)}>
+        <Tab active={!curPath}>
           <Link href={`/${workspaceId}`} className="w-full">
             <HomeIcon
               className={clsx(
                 'stroke-current items-center justify-center mx-auto mb-3',
-                bottomIndex === 0 ? 'stroke-primary200Main text-primary200Main' : 'stroke-gray-500 text-gray-500'
+                !curPath ? 'stroke-primary200Main text-primary200Main' : 'stroke-gray-500 text-gray-500'
               )}
             />
             홈
           </Link>
         </Tab>
-        <Tab active={bottomIndex === 1} onClick={() => handleClick(1)}>
+        <Tab active={curPath === 'chat'}>
           <Link href={`/${workspaceId}/chat`} className="w-full">
             <MessageCircleIcon
               className={clsx(
                 'stroke-current items-center justify-center mx-auto mb-3',
-                bottomIndex === 1 ? 'stroke-primary200Main text-primary200Main' : 'stroke-gray-500 text-gray-500'
+                curPath === 'chat' ? 'stroke-primary200Main text-primary200Main' : 'stroke-gray-500 text-gray-500'
               )}
             />
             대화
           </Link>
         </Tab>
-        <Tab active={bottomIndex === 2} onClick={() => handleClick(2)}>
+        <Tab active={curPath === 'to-do-list'}>
           <Link href={`/${workspaceId}/to-do-list`} className="w-full">
             <CalendarIcon
               className={clsx(
                 'stroke-current items-center justify-center mx-auto mb-3',
-                bottomIndex === 2 ? 'stroke-primary200Main text-primary200Main' : 'stroke-gray-500 text-gray-500'
+                curPath === 'to-do-list' ? 'stroke-primary200Main text-primary200Main' : 'stroke-gray-500 text-gray-500'
               )}
             />
             일정
           </Link>
         </Tab>
-        <Tab active={bottomIndex === 3} onClick={() => handleClick(3)}>
+        <Tab active={curPath === 'profile'}>
           <Link href={`/${workspaceId}/profile/${workspaceUserId}`} className="w-full">
             <UserIcon
               className={clsx(
                 'stroke-current items-center justify-center mx-auto mb-3',
-                bottomIndex === 3 ? 'stroke-primary200Main text-primary200Main' : 'stroke-gray-500 text-gray-500'
+                curPath === 'profile' ? 'stroke-primary200Main text-primary200Main' : 'stroke-gray-500 text-gray-500'
               )}
             />
             마이페이지

diff --git a/src/store/bottomNavigationStore.ts b/src/store/bottomNavigationStore.ts