[FE][Feat] #114 : Dropdown 모두보기 구현

boostcampwm-2024 · Nov 25, 2024 · b9be328 · b9be328
1 parent c497dec
commit b9be328
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 13 deletions.
diff --git a/frontend/src/component/common/dropdown/DropdownItem.tsx b/frontend/src/component/common/dropdown/DropdownItem.tsx
@@ -1,10 +1,12 @@
 import { ReactNode } from 'react';
+import classNames from 'classnames';
 
 interface IDropdownItemProps {
   /** 드롭다운 아이템 내용 */
   children: ReactNode;
   /** 버튼 클릭 시 실행할 함수 */
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  className?: string;
 }
 
 /**
@@ -28,7 +30,7 @@ interface IDropdownItemProps {
 
 export const DropdownItem = (props: IDropdownItemProps) => {
   return (
-    <li className="list-none px-3 py-1.5 text-base">
+    <li className={classNames('list-none px-3 py-1.5 text-base', props.className)}>
       <button
         type="button"
         className="flex w-full items-center justify-between whitespace-nowrap bg-transparent"

diff --git a/frontend/src/component/header/HeaderDropdown.tsx b/frontend/src/component/header/HeaderDropdown.tsx
@@ -8,7 +8,7 @@ interface IDropdownContainerProps {
 }
 
 export const HeaderDropdown = (props: IDropdownContainerProps) => {
-  // Tailwind의 동적 클래스 네이밍 할당을 위한 변수
+  // TODO: 하드코딩된 자료 말고 마커 색상 가져오기
   const textMarkerUser = [
     'text-marker-user1',
     'text-marker-user2',
@@ -17,23 +17,34 @@ export const HeaderDropdown = (props: IDropdownContainerProps) => {
     'text-marker-user5',
   ];
 
+  const DropdownItems = () => {
+    const Items = props.items.map((e, i) => {
+      return (
+        <DropdownItem key={e}>
+          {e}
+          <MdLocationOn className={classNames(`h-5 w-5 fill-current ${textMarkerUser[i]}`)} />
+        </DropdownItem>
+      );
+    });
+
+    if (Items.length > 1) {
+      Items.push(
+        <DropdownItem key="showall" className="text-gray-400">
+          모두 보기
+        </DropdownItem>,
+      );
+    }
+
+    return Items;
+  };
+
   return (
     <div>
       <Dropdown>
         <Dropdown.Trigger>
           <MdMenu className="h-6 w-6" />
         </Dropdown.Trigger>
-        <Dropdown.Menu>
-          {props.items.map((e, i) => {
-            return (
-              <DropdownItem key={e}>
-                {e}
-                <MdLocationOn className={classNames(`h-5 w-5 fill-current ${textMarkerUser[i]}`)} />
-                {/* 아이콘 색 변경 로직 찾기, 현재는 아이콘색이 반영이 안됨 수정할 사 */}
-              </DropdownItem>
-            );
-          })}
-        </Dropdown.Menu>
+        <Dropdown.Menu>{DropdownItems()}</Dropdown.Menu>
       </Dropdown>
     </div>
   );