fix: 아바타 컴포넌트 props제거 및 사이드바에서 로고 스타일 적용

Author: HongbiKo

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/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

@@ -4,6 +4,7 @@ import * as S from './Sidebar.styled';
 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;
@@ -34,7 +35,13 @@ const Sidebar = ({ menuItems, profileImage, nickname }: SidebarProps) => {
     <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>