feat(FE): 의과 약전 컴포넌트 구현

frontend/package.json

@@ -33,8 +33,8 @@
     "@eslint/js": "^9.15.0",
     "@tailwindcss/typography": "^0.5.15",
     "@types/js-cookie": "^3.0.6",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^19.0.7",
+    "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.15.0",

frontend/src/components/ui/ExpandableTableRow.tsx

@@ -0,0 +1,79 @@
+import { Button, TableCell, TableRow } from '@freemed-kit/ui';
+import React, { useState, useRef, useEffect } from 'react';
+import { ChevronsDownUp, ChevronsUpDown } from 'lucide-react';
+
+interface ExpandableTableCellProps {
+  content: React.ReactNode;
+  isExpanded: boolean;
+}
+
+interface ExpandableTableRowProps {
+  contents: string[];
+  onRowClick: () => void;
+}
+
+const ExpandableTableCell = React.forwardRef<
+  HTMLDivElement,
+  ExpandableTableCellProps
+>(({ content, isExpanded }, ref) => {
+  return (
+    <TableCell className="p-3">
+      <div ref={ref} className={isExpanded ? '' : 'line-clamp-4'}>
+        {content}
+      </div>
+    </TableCell>
+  );
+});
+
+ExpandableTableCell.displayName = 'ExpandableTableCell';
+
+const ExpandableTableRow = ({
+  contents,
+  onRowClick,
+}: ExpandableTableRowProps) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [hasTextOverflow, setHasTextOverflow] = useState(false);
+  const cellElementRefs = useRef<(HTMLDivElement | null)[]>([]);
+
+  useEffect(() => {
+    cellElementRefs.current.forEach((element) => {
+      if (!element) return;
+      const { scrollHeight, clientHeight } = element;
+      if (scrollHeight > clientHeight) {
+        setHasTextOverflow(true);
+      }
+    });
+  }, [contents]);
+
+  return (
+    <TableRow className="whitespace-pre-wrap" onClick={onRowClick}>
+      {contents.map((content, index) => (
+        <ExpandableTableCell
+          key={index}
+          ref={(el) => {
+            cellElementRefs.current[index] = el;
+          }}
+          isExpanded={isExpanded}
+          content={content}
+        />
+      ))}
+      <TableCell className="p-0">
+        {hasTextOverflow && (
+          <Button
+            variant="ghost"
+            size="icon"
+            className={`size-7 text-muted-foreground transition-transform duration-300 hover:bg-transparent ${isExpanded ? 'rotate-180' : ''}`}
+            onClick={(e) => {
+              e.stopPropagation();
+              setIsExpanded((prev) => !prev);
+            }}
+          >
+            {isExpanded ? <ChevronsDownUp /> : <ChevronsUpDown />}
+          </Button>
+        )}
+      </TableCell>
+    </TableRow>
+  );
+};
+
+export default ExpandableTableRow;

frontend/src/constants/medicine-search-option.ts

@@ -0,0 +1,17 @@
+export const M_MEDICINE_SEARCH_OPTION = {
+  NAME: { label: '약품명', value: 'name' },
+  INGREDIENT: { label: '성분명', value: 'ingredient' },
+} as const;
+
+export const M_MEDICINE_SEARCH_OPTIONS = Object.values(
+  M_MEDICINE_SEARCH_OPTION,
+);
+
+export const KM_MEDICINE_SEARCH_OPTION = {
+  NAME: { label: '약품명', value: 'name' },
+  INDICATION: { label: '적응증', value: 'indication' },
+} as const;
+
+export const KM_MEDICINE_SEARCH_OPTIONS = Object.values(
+  KM_MEDICINE_SEARCH_OPTION,
+);

frontend/src/constants/mock-data.ts

@@ -79,3 +79,149 @@ export const patientMemo = {
   writer: '의사 선생님',
   updatedAt: '2025-01-01T12:00:00',
 };
+
+export const mMedicineCategories = [
+  {
+    mainCategory: '해열, 진통, 소염제',
+    subCategories: [
+      {
+        id: 1,
+        subCategory: 'NSAIDs',
+      },
+      {
+        id: 2,
+        subCategory: 'AAP',
+      },
+      {
+        id: 3,
+        subCategory: '중추성진통제',
+      },
+    ],
+  },
+  {
+    mainCategory: '골격근 이완제',
+    subCategories: [
+      {
+        id: 4,
+        subCategory: '골격근 이완제',
+      },
+    ],
+  },
+  {
+    mainCategory: '비타민',
+    subCategories: [
+      {
+        id: 5,
+        subCategory: '비타민',
+      },
+    ],
+  },
+  {
+    mainCategory: '중추신경용약',
+    subCategories: [
+      {
+        id: 6,
+        subCategory: '신경통약',
+      },
+    ],
+  },
+  {
+    mainCategory: '항고지혈증제',
+    subCategories: [
+      {
+        id: 7,
+        subCategory: 'HMG-CoA Reductase Inhibitor',
+      },
+    ],
+  },
+  {
+    mainCategory: '혈당조절제',
+    subCategories: [
+      {
+        id: 8,
+        subCategory: '인슐린분비촉진제',
+      },
+      {
+        id: 9,
+        subCategory: '인슐린작용증강제',
+      },
+      {
+        id: 10,
+        subCategory: 'SGLT2 저해제',
+      },
+      {
+        id: 11,
+        subCategory: '복합제',
+      },
+    ],
+  },
+  {
+    mainCategory: '항고지혈증제+혈당조절제',
+    subCategories: [
+      {
+        id: 12,
+        subCategory: 'HMG-CoA Reductase Inhibitor + 인슐린작용증강제',
+      },
+    ],
+  },
+  {
+    mainCategory: '항히스타민제, 호흡기질환제제',
+    subCategories: [
+      {
+        id: 13,
+        subCategory: '항히스타민제',
+      },
+      {
+        id: 14,
+        subCategory: '복합제제',
+      },
+      {
+        id: 15,
+        subCategory: '진해제',
+      },
+      {
+        id: 16,
+        subCategory: '거담제',
+      },
+    ],
+  },
+];
+
+export const mMedicines = [
+  {
+    id: 1,
+    name: '에스부펜정',
+    ingredient: 'Dexibuprofen 300mg',
+    dosage:
+      '성인 : 1회 300 mg을 1일 2~4회 경구투여.\r\n단, 1일 1200mg을 초과하지 않는다.',
+    efficacy:
+      '1. 만성 다발성 관절염, 류마티스관절염\r\n2. 관절증\r\n3. 강직척추염\r\n4. 외상 및 수술 후 통증성 부종 또는 염증\r\n5. 염증, 통증 및 발열을 수반하는 감염증의 치료보조',
+    mainCategory: '해열, 진통, 소염제',
+    subCategory: 'NSAIDs',
+    isExcluded: false,
+  },
+  {
+    id: 2,
+    name: '누코미트캡슐200mg',
+    ingredient: 'Acetylcysteine 200mg',
+    dosage:
+      '식전에 소량의 물과 함께 복용한다.\r\n1. 급성질환\r\n성인 : 1회 200 mg 1일 3회\r\n소아 : 6~14세 1회 200 mg 1일 1회\r\n2. 만성질환\r\n성인 : 1회 200 mg 1일 2회\r\n소아 : 6~14세 1회 100 mg 1일 3회\r\n3. 낭성섬유증\r\n소아 : 6세 이상 1회 200 mg 1일 3회',
+    efficacy:
+      '다음 질환에서의 객담배출곤란 :  급.만성기관지염, 기관지천식, 후두염, 부비동염, 낭성섬유증',
+    mainCategory: '항히스타민제&호흡기질환제제',
+    subCategory: '거담제',
+    isExcluded: false,
+  },
+  {
+    id: 3,
+    name: '유한뎬탈케어 가글 프로 마일드',
+    ingredient: 'Allantoin 0.2g Sodium Fluoride',
+    dosage:
+      '성인 : 1회 300 mg을 1일 2~4회 경구투여. 단, 1일 1200mg을 초과하지 않는다.',
+    efficacy:
+      '1. 만성 다발성 관절염, 류마티스관절염\n4. 외상 및 수술 후 통증성 부종 또는 염증\n5. 염증, 통증 및 발열을 수반하는 감염증의 치료보조',
+    mainCategory: '해열, 진통, 소염제',
+    subCategory: 'NSAIDs',
+    isExcluded: true,
+  },
+];

frontend/src/features/m/shared/category-filter/CategoryFilter.tsx

@@ -0,0 +1,126 @@
+import {
+  Popover,
+  PopoverTrigger,
+  Button,
+  PopoverContent,
+  Command,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+} from '@freemed-kit/ui';
+import { ChevronDown, Check } from 'lucide-react';
+import { cn } from '@/utils/cn';
+import useCategoryFilter from '@/features/m/shared/category-filter/useCategoryFilter';
+
+export interface CategoryFilterProps {
+  categoryId: number | undefined;
+  onSelect: (categoryId: number) => void;
+}
+
+const CategoryFilter = ({ categoryId, onSelect }: CategoryFilterProps) => {
+  const {
+    categories,
+    selectedCategory,
+    isMainCategoryOpen,
+    isSubCategoryOpen,
+    setIsMainCategoryOpen,
+    setIsSubCategoryOpen,
+    handleMainCategorySelect,
+    handleSubCategorySelect,
+  } = useCategoryFilter({ categoryId, onSelect });
+
+  return (
+    <div className="flex space-x-2">
+      <Popover open={isMainCategoryOpen} onOpenChange={setIsMainCategoryOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            aria-expanded={isMainCategoryOpen}
+            className="w-60 justify-between"
+          >
+            <span className="truncate">
+              {selectedCategory.mainCategory || '대분류'}
+            </span>
+            <ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-60 p-0">
+          <Command>
+            <CommandInput placeholder="대분류 검색" />
+            <CommandList>
+              <CommandEmpty>No category found.</CommandEmpty>
+              <CommandGroup>
+                {categories.map((category) => (
+                  <CommandItem
+                    key={category.mainCategory}
+                    value={category.mainCategory}
+                    onSelect={() =>
+                      handleMainCategorySelect(category.subCategories[0].id)
+                    }
+                  >
+                    <Check
+                      className={cn(
+                        'mr-2 h-4 w-4',
+                        category.mainCategory === selectedCategory.mainCategory
+                          ? 'opacity-100'
+                          : 'opacity-0',
+                      )}
+                    />
+                    {category.mainCategory}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+      <Popover open={isSubCategoryOpen} onOpenChange={setIsSubCategoryOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            aria-expanded={isSubCategoryOpen}
+            className="w-60 justify-between"
+          >
+            <span className="truncate">
+              {selectedCategory.subCategory || '소분류'}
+            </span>
+            <ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-60 p-0">
+          <Command>
+            <CommandInput placeholder="소분류 검색" />
+            <CommandList>
+              <CommandEmpty>No category found.</CommandEmpty>
+              <CommandGroup>
+                {selectedCategory.subCategories.map((category) => (
+                  <CommandItem
+                    key={category.id}
+                    value={category.subCategory}
+                    onSelect={() => handleSubCategorySelect(category.id)}
+                  >
+                    <Check
+                      className={cn(
+                        'mr-2 h-4 w-4',
+                        selectedCategory.subCategory === category.subCategory
+                          ? 'opacity-100'
+                          : 'opacity-0',
+                      )}
+                    />
+                    {category.subCategory}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+};
+
+export default CategoryFilter;