Fix: API URL 물질도감 변경건 적용완료

src/api/dictionary.ts

@@ -1,14 +1,15 @@
 import { secureInstance } from './instance';
 
 export interface DictionarySeafood {
+  seafoodId: number;
+  koreanName: string;
   englishName: string;
-  name: string;
   description: string;
   insDt: string;
   count: number;
 }
 
-export const getSeafoodMy = async (): Promise<DictionarySeafood[]> => {
-  const response = await secureInstance.get('/seafoods/my');
+export const getSeafoods = async (): Promise<DictionarySeafood[]> => {
+  const response = await secureInstance.get('/seafoods');
   return response.data;
 };

src/api/dictionaryRegistration.ts

@@ -1,19 +1,19 @@
 import { secureInstance } from './instance';
 
 export interface SeafoodAll {
-  value: string | number;
-  name: string;
+  seafoodId: number;
+  koreanName: string;
   englishName?: string;
   description?: string;
 }
 
 export interface PostSeafood {
-  seafood: string;
+  seafoodId: number | null;
   count: number;
 }
 
-export const getSeafoodAll = async (): Promise<SeafoodAll[]> => {
-  const response = await secureInstance.get('/seafoods');
+export const getSeafoodTypes = async (): Promise<SeafoodAll[]> => {
+  const response = await secureInstance.get('/seafoods/types');
   return response.data;
 };
 

src/api/home.ts

@@ -1,15 +1,13 @@
-import { instance } from './instance';
-
-const getTest = async (): Promise<boolean> => {
-  return await instance.get(`/test`);
-};
-
-const getDb = async (): Promise<boolean> => {
-  return await instance.get(`/db`);
+import { secureInstance } from './instance';
+
+export interface SeafoodCollected {
+  seafoodId: number;
+  koreanName: string;
+  englishName: string;
+  count: number;
+}
+
+export const getSeafoodCollected = async (): Promise<SeafoodCollected[]> => {
+  const response = await secureInstance.get('/seafoods/collected');
+  return response.data;
 };
-
-const getConnect = async (): Promise<string> => {
-  return await instance.get(`/connect`);
-};
-
-export { getTest, getDb, getConnect };

src/components/Dropdown/index.tsx

@@ -1,8 +1,79 @@
-interface Props {
-  children: React.ReactNode;
-  label: string;
+import { useState } from 'react';
+
+interface DropdownItem {
+  displayName: string;
+  value: number | null;
+}
+
+interface DropdownProps {
+  value: number | null;
+  items: DropdownItem[];
+  onChange: (value: number) => void;
+  placeholder?: string;
 }
 
-export const Dropdown = ({ children, label }: Props) => {
-  return <></>;
+export const Dropdown = ({
+  value,
+  items,
+  onChange,
+  placeholder,
+}: DropdownProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const selectedItem = items.find((item) => item.value === value);
+
+  return (
+    <div className="relative w-24">
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="h-10 w-full rounded-md border border-gray-300 bg-white px-4 py-2 text-left shadow-sm focus:outline-none"
+      >
+        {selectedItem ? (
+          <span>{selectedItem.displayName}</span>
+        ) : (
+          <span className="text-gray-400">{placeholder}</span>
+        )}
+        <span className="float-right">
+          <svg
+            className={`size-4 transition-transform ${
+              isOpen ? 'rotate-180' : 'rotate-0'
+            }`}
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              d="M19 9l-7 7-7-7"
+            />
+          </svg>
+        </span>
+      </button>
+      {isOpen && (
+        <ul className="hide-scroll absolute left-0 z-10 mt-1 h-40 max-h-60 w-full overflow-auto rounded-md border border-gray-300 bg-white shadow-lg">
+          {items.map((item, index) => (
+            <li
+              key={index}
+              onClick={() => {
+                if (item.value) {
+                  onChange(item.value);
+                  setIsOpen(false);
+                }
+              }}
+              className={`cursor-pointer px-4 py-2 hover:bg-gray-100 ${
+                value === item.value ? 'bg-gray-200' : ''
+              }`}
+            >
+              {item.displayName}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
 };
+
+export default Dropdown;

src/components/HomeContents/index.tsx

@@ -1,10 +1,10 @@
-import { DictionarySeafood } from '../../api/dictionary';
+import { SeafoodCollected } from '../../api/home';
 import { GrayButton } from '../Button/GrayButton';
 import { HomeContentsCard } from './HomeContentsCard';
 import { HomeLocation } from './HomeLocation';
 
 interface Props {
-  seafoods: DictionarySeafood[];
+  seafoods: SeafoodCollected[];
 }
 
 export const HomeContents = ({ seafoods }: Props) => {

src/components/MyPageReservationCard/index.tsx

@@ -27,7 +27,7 @@ export const MyPageReservationCard = ({
           <p className="text-[20px] font-semibold tracking-tight">{title}</p>
           <p className="text-[12px]">{address}</p>
           <p className="text-[16px] font-bold">
-            {fullDate}·{people}명
+            {fullDate} · {people}명
           </p>
         </div>
       </div>

src/pages/Dictionary/index.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { SeafoodCard } from '../../components/SeafoodCard';
 import { AlertBox } from '../../components/AlertBox';
-import { DictionarySeafood, getSeafoodMy } from '../../api/dictionary';
+import { DictionarySeafood, getSeafoods } from '../../api/dictionary';
 import { useModalContext } from '../../contexts/ModalContext';
 
 export const Dictionary = () => {
@@ -11,7 +11,7 @@ export const Dictionary = () => {
     useState<DictionarySeafood | null>(null);
   const fetchSeafoods = async () => {
     try {
-      const response = await getSeafoodMy();
+      const response = await getSeafoods();
       setSeafoods(response);
     } catch (error) {
       console.error(error);
@@ -20,34 +20,31 @@ export const Dictionary = () => {
 
   const handleSeafoodClick = (seafood: DictionarySeafood) => {
     setSelectedSeafood(seafood);
-    openModal(`seafood-${seafood.name}`);
+    openModal(`seafood-${seafood.koreanName}`);
   };
 
   useEffect(() => {
     fetchSeafoods();
   }, []);
 
-  const suffix =
-    selectedSeafood && selectedSeafood?.count > 0 ? '-color' : '-black';
-
   return (
     <div className="overflow-hidden">
       <div className="hide-scroll overflow-auto px-[18px] pb-[18px]">
         <div className="mt-4 grid grid-cols-3 justify-center gap-3 rounded-lg border border-orange-200 bg-white p-3">
           {seafoods.map((seafood) => (
             <SeafoodCard
-              key={seafood.englishName}
+              key={seafood.seafoodId}
               isNew={false}
               seafoodName={seafood.englishName}
               counts={seafood.count}
-              name={seafood.name}
+              name={seafood.koreanName}
               onClick={() => handleSeafoodClick(seafood)}
             />
           ))}
         </div>
       </div>
       {selectedSeafood && (
-        <AlertBox id={`seafood-${selectedSeafood.name}`}>
+        <AlertBox id={`seafood-${selectedSeafood.koreanName}`}>
           <div className="flex h-full flex-col justify-between">
             <div
               className={` ${selectedSeafood.count > 0 ? '' : 'grayscale'} relative size-[150px] self-center bg-cover bg-center bg-no-repeat`}
@@ -61,7 +58,7 @@ export const Dictionary = () => {
             <div
               className={`${selectedSeafood.count > 0 ? 'border-orange-200' : 'border-gray-200'} w-full rounded-lg border py-[2px] text-center text-[18px] font-bold`}
             >
-              {selectedSeafood.name}
+              {selectedSeafood.koreanName}
             </div>
             <div className="min-h-[80px] border-b-2 py-3 text-center text-[15px]">
               {selectedSeafood.count > 0