chore: 빌드 에러 수정

src/components/SideBar/AddTeamModal.tsx

@@ -0,0 +1,121 @@
+import styled from 'styled-components';
+import Close from '@/assets/sidebar/close.svg';
+import Plus from '@/assets/sidebar/add-new-team.svg';
+import Search from '@/assets/sidebar/search.svg';
+import { ButtonHTMLAttributes, useState } from 'react';
+
+interface AddTeamModalProps {
+  modalClose: () => void;
+}
+
+export const AddTeamModal = ({ modalClose }: AddTeamModalProps) => {
+  const [hover, setHover] = useState<number | null>(null);
+
+  const handleHover = (index: number | null) => {
+    setHover(index);
+  };
+
+  return (
+    <ModalBackground>
+      <AddTeamContainer>
+        <TopContainer>
+          <Title>팀 추가하기</Title>
+          <CloseBtn onClick={modalClose} />
+        </TopContainer>
+        <MenuContainer
+          onMouseEnter={() => {
+            handleHover(0);
+          }}
+          onMouseLeave={() => {
+            handleHover(null);
+          }}
+          isHovered={hover === 0}
+        >
+          <MenuText>새로운 팀 생성하기</MenuText>
+          <Plus />
+        </MenuContainer>
+        <MenuContainer
+          onMouseEnter={() => {
+            handleHover(1);
+          }}
+          onMouseLeave={() => {
+            handleHover(null);
+          }}
+          isHovered={hover === 1}
+        >
+          <MenuText>다른 팀 참가하기</MenuText>
+          <Search />
+        </MenuContainer>
+      </AddTeamContainer>
+    </ModalBackground>
+  );
+};
+
+const ModalBackground = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgb(0, 0, 0, 0.1);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const AddTeamContainer = styled.div`
+  position: relative;
+  top: -5%;
+  left: -5%;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 620px;
+  height: 182px;
+  gap: 12px;
+  border-radius: 8px;
+  flex-direction: column;
+  background: white;
+  box-shadow: 4px 0 16px 0 rgba(0, 0, 0, 0.5); // 일단 임시로..
+`;
+
+const TopContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 540px;
+  height: 30px;
+`;
+
+const Title = styled.h1`
+  font-size: 20px;
+  font-weight: 700;
+  color: ${(props) => props.theme.colors.black};
+`;
+
+const CloseBtn = styled(Close)<ButtonHTMLAttributes<HTMLButtonElement>>`
+  margin-bottom: 12px;
+  cursor: pointer;
+`;
+
+interface HoverProps {
+  isHovered: boolean;
+}
+
+const MenuContainer = styled.div<HoverProps>`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 540px;
+  height: 40px;
+  gap: 12px;
+  background: ${({ isHovered, theme }) =>
+    isHovered ? theme.colors.background : 'white'};
+  cursor: pointer;
+`;
+
+const MenuText = styled.p`
+  font-size: 16px;
+  font-weight: 400;
+`;

src/components/SideBar/DropDown.tsx

@@ -0,0 +1,112 @@
+import styled from 'styled-components';
+import Plus from '@/assets/sidebar/plus.svg';
+import { useState } from 'react';
+import { AddTeamModal } from '@/components/SideBar/AddTeamModal.tsx';
+import { TeamProps } from '../../types/management.ts';
+
+interface DropDownProps {
+  teams: TeamProps[];
+  currentTeam: TeamProps | null;
+  onTeamSelected: (team: TeamProps) => void;
+}
+
+export const DropDown = ({
+  teams,
+  currentTeam,
+  onTeamSelected
+}: DropDownProps) => {
+  const [hovered, setHovered] = useState<number | null>(null);
+  const [modal, setModal] = useState<boolean>(false);
+
+  // 선택된 팀이 젤 위로 오도록 teams 배열 재정렬
+  const sortedTeams = currentTeam
+    ? [
+        currentTeam,
+        ...teams.filter((team) => team.teamId !== currentTeam.teamId)
+      ]
+    : teams;
+
+  const handleModal = () => {
+    setModal(!modal);
+  };
+
+  return (
+    <DropDownContainer>
+      {/* 나중에 해당 팀 id로 이동하는 로직 추가할 수도 있음 */}
+      {sortedTeams.map((team) => (
+        <TeamContainer
+          key={team.teamId}
+          onClick={() => onTeamSelected(team)}
+          onMouseEnter={() => setHovered(team.teamId)}
+          onMouseLeave={() => setHovered(null)}
+          isSelected={currentTeam?.teamId === team.teamId}
+          isHovered={hovered === team.teamId}
+        >
+          <LogoImg src={team.imageUrl} />
+          {team.title}
+        </TeamContainer>
+      ))}
+      {/* 팀 추가 누르면 팝업 띄우기? */}
+      <AddTeamBtn onClick={handleModal}>
+        팀 추가하기
+        <Plus />
+      </AddTeamBtn>
+      {modal && <AddTeamModal modalClose={handleModal} />}
+    </DropDownContainer>
+  );
+};
+
+const DropDownContainer = styled.div`
+  position: fixed;
+  top: 58px;
+  left: 4px;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 150px;
+  padding: 8px 0 8px 0;
+  gap: 12px;
+  background: white;
+  box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.1);
+`;
+
+interface TeamContainerProps {
+  isSelected: boolean;
+  isHovered: boolean;
+}
+
+const TeamContainer = styled.div<TeamContainerProps>`
+  display: flex;
+  align-items: center;
+  padding-left: 10px;
+  width: 140px;
+  height: 32px;
+  background: ${(props) =>
+    (props.isSelected && props.theme.colors.mainBlue) ||
+    (props.isHovered && props.theme.colors.background) ||
+    'white'};
+  gap: 12px;
+  font-size: 12px;
+  color: ${(props) => (props.isSelected ? 'white' : props.theme.colors.black)};
+  font-weight: 500;
+  cursor: pointer;
+`;
+
+const LogoImg = styled.img`
+  width: 24px;
+  height: 24px;
+  border-radius: 3px;
+`;
+
+const AddTeamBtn = styled.div`
+  width: 100%;
+  height: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 12px;
+  font-weight: 500;
+  gap: 12px;
+  cursor: pointer;
+`;