Merge branch 'feat/#592' into develop

prgrms-web-devcourse · May 22, 2024 · 8b371f1 · 8b371f1
2 parents fb7d5b2 + 8015935
commit 8b371f1
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 45 deletions.
diff --git a/scripts/server.js b/scripts/server.js
@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const fs = require('fs');
 const https = require('https');
+const path = require('path');
 const { parse } = require('url');
 const { execSync } = require('child_process');
 const next = require('next');
@@ -14,7 +15,10 @@ const app = next({ dev, hostname, port });
 const handle = app.getRequestHandler();
 
 const SELF_CERTIFICATES_PATH = {
-  ca: `${execSync('mkcert -CAROOT').toString().replace(/\s/g, '')}/rootCA.pem`,
+  ca: path.resolve(
+    execSync('mkcert -CAROOT').toString().replace(/\s$/, ''),
+    './rootCA.pem'
+  ),
   key: './.certificates/localhost-key.pem',
   cert: './.certificates/localhost.pem',
 };

diff --git a/src/hooks/useQueryParams.ts b/src/hooks/useQueryParams.ts
@@ -1,5 +1,5 @@
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { useState } from 'react';
+import { useCallback } from 'react';
 
 type RouteOptions = 'push' | 'replace';
 
@@ -8,56 +8,57 @@ const useQueryParams = () => {
   const searchParams = useSearchParams();
   const pathname = usePathname();
 
-  const [queryParams, _setQueryParams] = useState<string>(
-    searchParams.toString()
-  );
+  const queryParams = searchParams.toString();
 
-  const getQueryParam = (queryKey: string) => {
-    const queryParam = searchParams.get(queryKey);
+  const getQueryParam = useCallback(
+    (queryKey: string) => {
+      const queryParam = searchParams.get(queryKey);
 
-    return queryParam;
-  };
+      return queryParam;
+    },
+    [searchParams]
+  );
 
-  const setQueryParams = (
-    queryKey: string,
-    queryValue: string,
-    option?: RouteOptions
-  ) => {
-    const prevParams = new URLSearchParams(searchParams.toString());
-    prevParams.set(queryKey, queryValue);
+  const setQueryParams = useCallback(
+    (queryKey: string, queryValue: string, option?: RouteOptions) => {
+      const prevParams = new URLSearchParams(searchParams.toString());
+      prevParams.set(queryKey, queryValue);
 
-    const newQueryParams = prevParams.toString();
-    _setQueryParams(newQueryParams);
+      const newQueryParams = prevParams.toString();
 
-    switch (option) {
-      case 'replace':
-        router.replace(pathname + `/?${newQueryParams}`, { shallow: true });
-        return;
-      case 'push':
-      default:
-        router.push(pathname + `/?${newQueryParams}`, { shallow: true });
-        return;
-    }
-  };
+      switch (option) {
+        case 'replace':
+          router.replace(pathname + `?${newQueryParams}`, { shallow: true });
+          return;
+        case 'push':
+        default:
+          router.push(pathname + `?${newQueryParams}`, { shallow: true });
+          return;
+      }
+    },
+    [router, searchParams, pathname]
+  );
 
-  const removeQueryParam = (queryKey: string, option?: RouteOptions) => {
-    const prevParams = new URLSearchParams(searchParams.toString());
-    if (!prevParams.get(queryKey)) return;
-    prevParams.delete(queryKey);
+  const removeQueryParam = useCallback(
+    (queryKey: string, option?: RouteOptions) => {
+      const prevParams = new URLSearchParams(searchParams.toString());
+      if (!prevParams.has(queryKey)) return;
+      prevParams.delete(queryKey);
 
-    const newQueryParams = prevParams.toString();
-    _setQueryParams(newQueryParams);
+      const newQueryParams = prevParams.toString();
 
-    switch (option) {
-      case 'replace':
-        router.replace(pathname + `/?${newQueryParams}`, { shallow: true });
-        return;
-      case 'push':
-      default:
-        router.push(pathname + `/?${newQueryParams}`, { shallow: true });
-        return;
-    }
-  };
+      switch (option) {
+        case 'replace':
+          router.replace(pathname + `?${newQueryParams}`, { shallow: true });
+          return;
+        case 'push':
+        default:
+          router.push(pathname + `?${newQueryParams}`, { shallow: true });
+          return;
+      }
+    },
+    [router, searchParams, pathname]
+  );
 
   return { queryParams, getQueryParam, setQueryParams, removeQueryParam };
 };

diff --git a/src/v1/base/Input.tsx b/src/v1/base/Input.tsx
@@ -30,7 +30,7 @@ const getInputStyleClasses = (inputStyle: InputStyle) => {
 const getLeftIconClass = (iconType?: LeftIconType) => {
   switch (iconType) {
     case 'search':
-      return 'px-[1rem] before:relative before:top-[0.3rem] before:pr-[1rem] before:content-search';
+      return 'px-[1rem] before:h-[2.4rem] before:w-[2rem] before:relative before:top-[0.2rem] before:mr-[1rem] before:content-search';
     default:
       return '';
   }