[#72] 식물 위치 추가, 수정, 삭제 기능 구현

package.json

@@ -40,6 +40,7 @@
     "slick-carousel": "^1.8.1",
     "tailwind-merge": "^2.5.1",
     "tailwindcss-animate": "^1.0.7",
+    "use-long-press": "^3.2.0",
     "vaul": "^0.9.1",
     "zod": "^3.23.8"
   },

src/__test__/utils/validation.test.ts

@@ -0,0 +1,21 @@
+import { describe, expect, it } from 'vitest';
+import { isFalsy } from '@/utils/validation/isFalsy.ts';
+
+describe('validation test: ', () => {
+  describe('function isFalsy test: ', () => {
+    it('should return false when input is not falsy', () => {
+      expect(isFalsy(1)).toBe(false);
+      expect(isFalsy('string')).toBe(false);
+      expect(isFalsy({})).toBe(false);
+      expect(isFalsy([])).toBe(false);
+      expect(isFalsy(true)).toBe(false);
+    });
+    it('should return true when input is falsy', () => {
+      expect(isFalsy(0)).toBe(true);
+      expect(isFalsy('')).toBe(true);
+      expect(isFalsy(null)).toBe(true);
+      expect(isFalsy(undefined)).toBe(true);
+      expect(isFalsy(false)).toBe(true);
+    });
+  });
+});

src/apis/location/addNewLocation.ts

@@ -0,0 +1,11 @@
+import baseAxios from '@/libs/baseAxios.ts';
+
+// TODO: 추후 에러 처리 해야함
+
+export interface AddNewLocationResponse {
+  id: number;
+  name: string;
+}
+
+export const addNewLocation = async (name: string) =>
+  baseAxios.post<AddNewLocationResponse>('/location', { name });

src/apis/location/deleteLocation.ts

@@ -0,0 +1,4 @@
+import baseAxios from '@/libs/baseAxios.ts';
+
+export const deleteLocation = async (locationId: number) =>
+  baseAxios.delete(`/location/${locationId}`);

src/apis/location/getAllLocation.ts

@@ -0,0 +1,8 @@
+import baseAxios from '@/libs/baseAxios.ts';
+import { PlantLocation } from '@/types/plantLocation';
+
+export const getAllLocation = async () => {
+  const response = await baseAxios.get<PlantLocation[]>('/location');
+
+  return response.data;
+};

src/apis/location/updateLocation.ts

@@ -0,0 +1,14 @@
+import baseAxios from '@/libs/baseAxios.ts';
+
+export interface UpdateLocationParams {
+  locationId: number;
+  name: string;
+}
+
+export interface UpdateLocationResponse {
+  id: number;
+  name: string;
+}
+
+export const updateLocation = async ({ locationId, name }: UpdateLocationParams) =>
+  baseAxios.patch<UpdateLocationResponse>(`/location/${locationId}`, { name });

src/assets/icon/BinLineMono.tsx

@@ -0,0 +1,37 @@
+const BinLineMono = () => {
+  return (
+    <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g id="icon-bin-line-mono 1">
+        <g id="Group">
+          <path
+            id="Vector"
+            d="M21.0001 5.12103H4.0001C3.36497 5.12103 2.8501 5.63591 2.8501 6.27103C2.8501 6.90616 3.36497 7.42103 4.0001 7.42103H21.0001C21.6352 7.42103 22.1501 6.90616 22.1501 6.27103C22.1501 5.63591 21.6352 5.12103 21.0001 5.12103Z"
+            fill="#B0B8C1"
+          />
+          <path
+            id="Vector_2"
+            d="M9.28418 11.98V16.486C9.28418 17.1212 9.79905 17.636 10.4342 17.636C11.0693 17.636 11.5842 17.1212 11.5842 16.486V11.98C11.5842 11.3449 11.0693 10.83 10.4342 10.83C9.79905 10.83 9.28418 11.3449 9.28418 11.98Z"
+            fill="#B0B8C1"
+          />
+          <path
+            id="Vector_3"
+            d="M13.416 11.98V16.486C13.416 17.1212 13.9309 17.636 14.566 17.636C15.2011 17.636 15.716 17.1212 15.716 16.486V11.98C15.716 11.3449 15.2011 10.83 14.566 10.83C13.9309 10.83 13.416 11.3449 13.416 11.98Z"
+            fill="#B0B8C1"
+          />
+          <path
+            id="Vector_4"
+            d="M17.572 6.27103H15.572V3.84003C15.572 3.28903 15.124 2.84003 14.572 2.84003H10.428C9.87698 2.84003 9.42798 3.28903 9.42798 3.84003V6.27103H7.42798V3.84003C7.42798 2.18603 8.77398 0.840027 10.428 0.840027H14.572C16.226 0.840027 17.572 2.18603 17.572 3.84003V6.27103Z"
+            fill="#B0B8C1"
+          />
+          <path
+            id="Vector_5"
+            d="M18.4931 7.42103L18.0051 19.17C17.9891 19.545 17.6811 19.841 17.3061 19.841H7.70413C7.32913 19.841 7.02013 19.545 7.00513 19.171L6.50913 7.42103H18.4931ZM20.8921 5.12103H4.10913L4.73513 19.938C4.78713 21.169 5.80013 22.141 7.03313 22.141H17.9771C19.2101 22.141 20.2241 21.169 20.2751 19.937L20.8921 5.12103Z"
+            fill="#B0B8C1"
+          />
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+export default BinLineMono;

src/assets/icon/icon-plus-mono.tsx

@@ -0,0 +1,17 @@
+const IconPlusMono = () => {
+  return (
+    <svg width="9" height="8" viewBox="0 0 9 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g id="&#240;&#159;&#145;&#137;icon-plus-mono">
+        <path
+          id="Fill 5"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M7.85091 3.5001H4.93424V0.583435C4.93424 0.307185 4.71049 0.0834351 4.43424 0.0834351C4.15799 0.0834351 3.93424 0.307185 3.93424 0.583435V3.5001H1.01758C0.741328 3.5001 0.517578 3.72385 0.517578 4.0001C0.517578 4.27635 0.741328 4.5001 1.01758 4.5001H3.93424V7.41677C3.93424 7.69302 4.15799 7.91677 4.43424 7.91677C4.71049 7.91677 4.93424 7.69302 4.93424 7.41677V4.5001H7.85091C8.12716 4.5001 8.35091 4.27635 8.35091 4.0001C8.35091 3.72385 8.12716 3.5001 7.85091 3.5001Z"
+          fill="#333D48"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export default IconPlusMono;

src/components/addPlant/LocationBadge.tsx

@@ -0,0 +1,26 @@
+import Badge from '@/components/common/Badge';
+import { cn } from '@/utils.ts';
+import { PlantLocation } from '@/types/plantLocation';
+import { useLongPress } from 'use-long-press';
+
+interface LocationBadgeProps {
+  location: PlantLocation;
+  selected: boolean;
+  onClick: () => void;
+  onLongPress: (defaultValue: string) => void;
+}
+
+const LocationBadge = ({ location, selected, onClick, onLongPress }: LocationBadgeProps) => {
+  const bind = useLongPress(() => onLongPress(location.name), {});
+
+  return (
+    <Badge
+      text={location.name}
+      onClick={onClick}
+      className={cn(selected ? 'bg-BloomingGreen500 text-white' : 'bg-GrayOpacity100 text-Gray800')}
+      {...bind()}
+    />
+  );
+};
+
+export default LocationBadge;