fix: 드롭다운 초기값을 쿼리 스트링값으로 변경

src/app/_home/components/Products/FilteredProducts/FilteredProducts.tsx

@@ -10,6 +10,7 @@ import { useGetFilteredProducts } from "@/_home/hooks/useGetFilteredProducts";
 import { useQueryParams } from "@/app/_home/hooks/useQueryParams";
 import { Dropdown } from "@/components/Dropdown";
 import { ORDER, DROPDOWN } from "@/components/Dropdown/constants";
+import { findOptionByValue } from "@/components/Dropdown/utils";
 import { NoData } from "@/components/NoData";
 import cn from "@/utils/classNames";
 import { createQueryString } from "@/utils/createQueryString";
@@ -32,13 +33,13 @@ export default function FilteredProducts({ category }: FilteredProductsProps) {
   const { data: productData, fetchNextPage, hasNextPage } = useGetFilteredProducts(params.toString());
 
   const { control } = useForm({ mode: "onBlur" });
-  const order = useWatch({ control, name: "order" });
+  const watchedOrder = useWatch({ control, name: "order" });
 
   useEffect(() => {
-    if (order) {
-      router.push(`/?${createQueryString(QUERY.ORDER, order, searchParams)}`);
+    if (watchedOrder) {
+      router.push(`/?${createQueryString(QUERY.ORDER, watchedOrder, searchParams)}`);
     }
-  }, [order, router, searchParams]);
+  }, [watchedOrder, router, searchParams]);
 
   useEffect(() => {
     if (inView && hasNextPage) {
@@ -47,6 +48,7 @@ export default function FilteredProducts({ category }: FilteredProductsProps) {
   }, [inView, fetchNextPage, hasNextPage]);
 
   const keyword = searchParams.get(QUERY.KEYWORD);
+  const order = searchParams.get(QUERY.ORDER);
 
   return (
     <div className={cn(styles.container)}>
@@ -60,7 +62,7 @@ export default function FilteredProducts({ category }: FilteredProductsProps) {
           control={control}
           name='order'
           variant={DROPDOWN.ORDER}
-          placeholder={ORDER.PRODUCT[0].option}
+          placeholder={findOptionByValue(ORDER.PRODUCT, order)}
         />
       </div>
 

src/components/Dropdown/utils.ts

@@ -0,0 +1,6 @@
+import { ItemType } from "@/components/Dropdown/type";
+
+export const findOptionByValue = (Items: ItemType[], valueToFind: string | null) => {
+  const result = Items.find(({ value }) => value === valueToFind);
+  return result ? result.option : Items[0].option;
+};