보완(멘토님 피드백 반영, 아바타 로고 스타일 props 제거)

src/components/common/ProtectRoute.tsx

@@ -6,7 +6,7 @@ interface ProtectRouteProps extends PropsWithChildren {
 }
 
 const ProtectRoute = ({ children, redirectUrl }: ProtectRouteProps) => {
-  const { isLoggedIn } = useAuthStore();
+  const isLoggedIn = useAuthStore((state) => state.isLoggedIn);
 
   if (!isLoggedIn) {
     alert('로그인이 필요한 서비스입니다.');

src/components/common/avatar/Avatar.styled.ts

@@ -1,21 +1,16 @@
 import styled from 'styled-components';
 import { AvatarProps } from './Avatar';
 
-interface AvatarContainerProps extends Omit<AvatarProps, 'image'> {
-  $isMainLogo?: boolean;
-}
-
-export const AvatarContainer = styled.div<AvatarContainerProps>`
+export const AvatarContainer = styled.div<Omit<AvatarProps, 'image'>>`
   width: ${({ size }) => size};
   height: ${({ size }) => size};
-  border-radius: ${({ $isMainLogo }) => ($isMainLogo ? '0' : '50%')};
-  border: ${({ $isMainLogo, theme }) =>
-    $isMainLogo ? 'none' : `1px solid ${theme.color.border}`};
+  border-radius: 50%;
+  border: 1px solid ${({ theme }) => theme.color.border};
 
   .avatar {
     width: 100%;
     height: 100%;
-    border-radius: ${({ $isMainLogo }) => ($isMainLogo ? '0' : '50%')};
+    border-radius: 50%;
   }
 
   @media screen and ${({ theme }) => theme.mediaQuery.tablet} {

src/components/common/avatar/Avatar.tsx

@@ -1,19 +1,17 @@
 import { ReactNode } from 'react';
 import * as S from './Avatar.styled';
 import defaultImg from '../../../assets/defaultImg.png';
-import MainLogo from '../../../assets/mainlogo.svg';
 
 export interface AvatarProps {
   size: string;
   image: string | ReactNode;
 }
 
 function Avatar({ size, image }: AvatarProps) {
-  const isMainLogo = image === MainLogo;
   const releasedImg =
     typeof image === 'string' && image.trim() ? image : defaultImg;
   return (
-    <S.AvatarContainer size={size} $isMainLogo={isMainLogo}>
+    <S.AvatarContainer size={size}>
       {typeof image === 'string' || !image ? (
         <img className='avatar' src={releasedImg} alt='Avatar' />
       ) : (

src/components/common/header/Header.tsx

@@ -16,7 +16,7 @@ import Modal from '../modal/Modal';
 function Header() {
   const { isOpen, message, handleModalOpen, handleModalClose } = useModal();
   const { userLogout } = useAuth(handleModalOpen);
-  const { isLoggedIn } = useAuthStore((state) => state);
+  const isLoggedIn = useAuthStore((state) => state.isLoggedIn);
   const { myData, isLoading } = useMyProfileInfo();
 
   const profileImg = myData?.profileImg || DefaultImg;

src/components/common/sidebar/Sidebar.styled.ts

@@ -12,6 +12,17 @@ export const Container = styled.div`
   padding-bottom: 1rem;
 `;
 
+export const LogoContainer = styled.div`
+  width: 110px;
+  height: 110px;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+`;
+
 export const AvartarContainer = styled.div`
   width: 100%;
   display: flex;

src/components/common/sidebar/Sidebar.tsx

@@ -1,9 +1,10 @@
 import { NavLink, useLocation } from 'react-router-dom';
 import Avatar from '../avatar/Avatar';
 import * as S from './Sidebar.styled';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback } from 'react';
 import EditMyProfileImg from './editMyProfileImg/EditMyProfileImg';
 import useAuthStore from '../../../store/authStore';
+import MainLogo from '../../../assets/mainlogo.svg';
 
 interface MenuItem {
   label: string;
@@ -18,7 +19,7 @@ interface SidebarProps {
 }
 
 const Sidebar = ({ menuItems, profileImage, nickname }: SidebarProps) => {
-  const { isLoggedIn } = useAuthStore((state) => state);
+  const isLoggedIn = useAuthStore((state) => state.isLoggedIn);
   const location = useLocation();
   const isUserPage = location.pathname.includes('/user');
   const isManagePage = location.pathname.includes('/manage');
@@ -27,38 +28,28 @@ const Sidebar = ({ menuItems, profileImage, nickname }: SidebarProps) => {
 
   const getActiveIndex = useCallback(() => {
     const currentPath = location.pathname;
-    const matchedIndex = menuItems.findIndex(
-      (item) => currentPath === item.path
-    );
-    return matchedIndex !== -1 ? matchedIndex : 0;
+    return menuItems.findIndex((item) => currentPath === item.path) ?? 0;
   }, [location.pathname, menuItems]);
 
-  const [activeIndex, setActiveIndex] = useState<number>(getActiveIndex);
-
-  useEffect(() => {
-    setActiveIndex(getActiveIndex());
-  }, [location.pathname, menuItems, getActiveIndex]);
-
-  const handleClick = (index: number) => {
-    setActiveIndex(index);
-  };
-
   return (
     <S.Container>
       <S.AvartarContainer>
         <S.AvartarWrapper>
-          <Avatar size='120px' image={profileImage} />
+          {profileImage === MainLogo ? (
+            <S.LogoContainer>
+              <img src={MainLogo} alt='main logo' />
+            </S.LogoContainer>
+          ) : (
+            <Avatar size='120px' image={profileImage} />
+          )}
           {isMyProfile && <EditMyProfileImg />}
         </S.AvartarWrapper>
         <span>{nickname ? nickname : ''}</span>
       </S.AvartarContainer>
       <S.MenuList>
         {menuItems.map(({ label, path, icon }, index) => (
           <NavLink key={path} to={path}>
-            <S.MenuItem
-              $isActive={activeIndex === index}
-              onClick={() => handleClick(index)}
-            >
+            <S.MenuItem $isActive={getActiveIndex() === index}>
               {icon && <S.IconWrapper>{icon}</S.IconWrapper>}
               {label}
             </S.MenuItem>

src/constants/modalMessage.ts

@@ -15,7 +15,7 @@ export const MODAL_MESSAGE = {
   myProfileSuccess: '프로필 수정이 완료되었습니다.',
   myProfileFail: '프로필 수정에 실패했습니다.',
   profileImgSuccess: '프로필 이미지가 업로드 되었습니다.',
-  profileImgFail: '이미지는 5MB 이하, .png.jpg.jpeg.svg 형식만 가능합니다.',
+  profileImgFail: '이미지는 5MB 이하, .png.jpg.jpeg 형식만 가능합니다.',
   ModifyProjectSuccess: '공고 수정이 정상적으로 완료 되었습니다.',
   ModifyProjectFail: '공고 수정을 실패 했습니다.',
   createProjectSuccess: '공고 생성을 완료 했습니다.',

src/hooks/useMyInfo.ts

@@ -19,7 +19,7 @@ import {
 import { MODAL_MESSAGE } from '../constants/modalMessage';
 
 export const useMyProfileInfo = () => {
-  const { isLoggedIn } = useAuthStore();
+  const isLoggedIn = useAuthStore((state) => state.isLoggedIn);
 
   const { data, isLoading } = useQuery<UserInfo>({
     queryKey: myInfoKey.myProfile,
@@ -84,7 +84,7 @@ export const useUploadProfileImg = (
 };
 
 export const useMyJoinedProjectList = () => {
-  const { isLoggedIn } = useAuthStore();
+  const isLoggedIn = useAuthStore((state) => state.isLoggedIn);
 
   const { data, isLoading } = useQuery<MyJoinedProjectList>({
     queryKey: ProjectListKey.myJoinedList,
@@ -96,7 +96,7 @@ export const useMyJoinedProjectList = () => {
 };
 
 export const useMyAppliedStatusList = () => {
-  const { isLoggedIn } = useAuthStore();
+  const isLoggedIn = useAuthStore((state) => state.isLoggedIn);
 
   const { data, isLoading } = useQuery<MyAppliedProjectStatusList>({
     queryKey: ProjectListKey.myAppliedStatusList,

src/hooks/useUserInfo.ts

@@ -6,7 +6,7 @@ import useAuthStore from '../store/authStore';
 import { UserJoinedProjectList } from '../models/userProject';
 
 export const useUserProfileInfo = (id: number) => {
-  const { isLoggedIn } = useAuthStore();
+  const isLoggedIn = useAuthStore((state) => state.isLoggedIn);
 
   const { data, isLoading } = useQuery<UserInfo>({
     queryKey: [userInfoKey.userProfile, id],
@@ -19,7 +19,7 @@ export const useUserProfileInfo = (id: number) => {
 };
 
 export const useUserJoinedProjectList = (id: number) => {
-  const { isLoggedIn } = useAuthStore();
+  const isLoggedIn = useAuthStore((state) => state.isLoggedIn);
 
   const { data, isLoading } = useQuery<UserJoinedProjectList>({
     queryKey: [userInfoKey.userJoinedList, id],

src/routes/AppRoutes.tsx

@@ -59,7 +59,7 @@ const ModifyProject = lazy(
 );
 
 const AppRoutes = () => {
-  const { isLoggedIn } = useAuthStore();
+  const isLoggedIn = useAuthStore((state) => state.isLoggedIn);
 
   const routeList = [
     // {