apply code review

Author: createhb21

services/one-app/src/app/(site)/lost-found/[lostId]/page.tsx

@@ -3,13 +3,13 @@ import PlusIcon from '@/common/assets/icons/plus';
 import { SuspensedQueryBoundary } from '@/common/components/SuspensedQueryBoundary/SuspensedQueryBoundary';
 import LostFoundDetail from '../_components/LostFoundDetail';
 
-type Params = {
+type Props = {
   params: {
     lostId: string;
   };
 };
 
-export default function LostFoundDetailPage({ params }: Params) {
+export default function LostFoundDetailPage({ params }: Props) {
   const { lostId } = params;
 
   return (

services/one-app/src/app/(site)/lost-found/_components/LostFoundList.tsx

@@ -25,20 +25,14 @@ const LostFoundList = () => {
   return (
     <>
       {lostArticles.map((item, idx) => (
-        // item.id로만 하면 key 중복이 발생하고 있음.
-        // 해결 필요
         <Link key={`${item.id}-${idx}`} href={`/lost-found/${item.id}`}>
+          {/* item.id로만 하면 key 중복이 발생하고 있음. 확인 필요 */}
           {item.title}
         </Link>
       ))}
-      {hasNextPage && (
-        <IntersectionArea
-          callback={intersectCallback}
-          intersectionOptions={{ rootMargin: '24% 0px', threshold: 0 }}
-        >
-          <span className="visuallyHidden">더 보기</span>
-        </IntersectionArea>
-      )}
+      <IntersectionArea when={hasNextPage} callback={intersectCallback}>
+        <span className="visuallyHidden">더 보기</span>
+      </IntersectionArea>
     </>
   );
 };

services/one-app/src/common/components/IntersectionArea.tsx

@@ -5,26 +5,28 @@ import type { IntersectionOptions } from 'react-intersection-observer';
 
 import { useIntersectionObserver } from '@/common/hooks/useIntersectionObserver';
 
-interface FetchNextPageOptions {
+interface Props {
   callback: () => void;
+  when: boolean;
   intersectionOptions?: IntersectionOptions;
 }
 
 function IntersectionArea({
   children,
   callback,
+  when,
   intersectionOptions,
-}: PropsWithChildren<FetchNextPageOptions>) {
+}: PropsWithChildren<Props>) {
   const { ref } = useIntersectionObserver({
     callback,
     intersectionOptions,
   });
 
-  return (
+  return when ? (
     <div ref={ref} className="flex justify-center w-full">
       {children}
     </div>
-  );
+  ) : null;
 }
 
 export default IntersectionArea;

services/one-app/src/common/utils/object.ts

@@ -1,42 +1,36 @@
 import queryString from 'query-string';
 
 export const isValidObject = (obj: unknown): obj is Record<string, any> => {
-  return typeof obj === 'object' && obj !== null;
+  return typeof obj === 'object' && obj !== null && !Array.isArray(obj);
 };
 
 export function removeFalsyValues<T extends Record<string, any>>(
   obj: T,
   options: { removeEmptyStrings?: boolean; removeZero?: boolean } = {},
 ): Partial<T> {
   if (!isValidObject(obj)) {
-    return obj;
+    throw new Error('obj must be a non-null object');
   }
 
-  const result: Partial<T> = {};
-
-  for (const key in obj) {
-    if (Object.prototype.hasOwnProperty.call(obj, key)) {
-      const value = obj[key];
-      if (
-        value !== undefined &&
-        value !== null &&
-        (options.removeZero ? value !== 0 : true) &&
-        (options.removeEmptyStrings ? value !== '' : true)
-      ) {
-        result[key] = value;
-      }
+  return Object.entries(obj).reduce((result, [key, value]) => {
+    if (
+      value !== undefined &&
+      value !== null &&
+      (options.removeZero ? value !== 0 : true) &&
+      (options.removeEmptyStrings ? value !== '' : true)
+    ) {
+      result[key as keyof T] = value;
     }
-  }
-
-  return result;
+    return result;
+  }, {} as Partial<T>);
 }
 
 export const objectToQueryString = <T extends Record<string, any>>(
   params: T,
   options?: { removeEmptyStrings?: boolean; removeZero?: boolean },
 ): string => {
   if (!isValidObject(params)) {
-    return '';
+    throw new Error('params must be a non-null object');
   }
 
   return queryString.stringify(removeFalsyValues(params, options));