From 4f50db40530515b4fcb2d43218909d059bd6b097 Mon Sep 17 00:00:00 2001
From: Soap <miensop51@gmail.com>
Date: Mon, 2 Dec 2024 23:27:05 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EA=B8=B0=EC=A1=B4=20=EC=8D=B8=EB=84=A4?=
 =?UTF-8?q?=EC=9D=BC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=82=AC?=
 =?UTF-8?q?=EC=9A=A9=EC=B2=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#preview
---
 .../src/components/Map/MapDetailBoard.tsx     |  4 +--
 .../common/List/Course/CourseListPanel.tsx    |  4 ++-
 .../src/components/common/List/ListItem.tsx   | 26 ++++++++++---------
 .../common/List/ListItemThumbnail.tsx         |  6 ++---
 .../common/List/ListToggleButtons.tsx         |  8 +++---
 frontend/src/components/common/SearchBar.tsx  |  3 +--
 frontend/src/pages/HomePage/Header.tsx        | 15 ++++++-----
 frontend/src/pages/HomePage/LogOutButton.tsx  |  5 ++--
 frontend/src/pages/HomePage/LoginButtons.tsx  |  5 ++--
 frontend/src/pages/HomePage/MainListPanel.tsx |  2 +-
 frontend/src/pages/HomePage/UserProfile.tsx   |  3 +--
 .../src/pages/SearchPage/SearchListPanel.tsx  |  2 +-
 12 files changed, 44 insertions(+), 39 deletions(-)

diff --git a/frontend/src/components/Map/MapDetailBoard.tsx b/frontend/src/components/Map/MapDetailBoard.tsx
index a6a997af..e6418f9f 100644
--- a/frontend/src/components/Map/MapDetailBoard.tsx
+++ b/frontend/src/components/Map/MapDetailBoard.tsx
@@ -10,7 +10,7 @@ import SideContainer from '@/components/common/SideContainer';
 import Marker from '@/components/Marker/Marker';
 import DeleteMapButton from './DeleteMapButton';
 import EditMapButton from './EditMapButton';
-import MapThumbnail from './MapThumbnail';
+import ListItemThumbnail from '@/components/common/List/ListItemThumbnail';
 
 type MapDetailBoardProps = {
   mapData: Map;
@@ -54,7 +54,7 @@ const MapDetailBoard = ({ mapData }: MapDetailBoardProps) => {
           )}
 
           {mapData.thumbnailUrl.startsWith('https://example') ? (
-            <MapThumbnail className="h-full w-full" />
+            <ListItemThumbnail className="h-full w-full" />
           ) : (
             <img src={mapData.thumbnailUrl} className="object-cover"></img>
           )}
diff --git a/frontend/src/components/common/List/Course/CourseListPanel.tsx b/frontend/src/components/common/List/Course/CourseListPanel.tsx
index 35fbd67b..2423688a 100644
--- a/frontend/src/components/common/List/Course/CourseListPanel.tsx
+++ b/frontend/src/components/common/List/Course/CourseListPanel.tsx
@@ -28,7 +28,9 @@ const CourseListPanel: React.FC<CourseListPanelProps> = ({ query }) => {
     <InfiniteListPanel
       data={courseItems}
       ref={ref}
-      renderItem={(course) => <CourseItem key={course.id} courseItem={course} />}
+      renderItem={(course) => (
+        <CourseItem key={course.id} courseItem={course} />
+      )}
       className="max-h-[700px] p-5"
     />
   );
diff --git a/frontend/src/components/common/List/ListItem.tsx b/frontend/src/components/common/List/ListItem.tsx
index 37f3347e..05a54d49 100644
--- a/frontend/src/components/common/List/ListItem.tsx
+++ b/frontend/src/components/common/List/ListItem.tsx
@@ -8,20 +8,22 @@ type ListItemProps<T> = {
   linkPrefix: string;
 };
 
-const ListItem = <T extends {
-  id: number;
-  title: string;
-  thumbnailUrl: string;
-  user: { profileImageUrl: string; nickname: string };
-  pinCount: number
-}>({
-     item,
-     linkPrefix,
-   }: ListItemProps<T>) => {
+const ListItem = <
+  T extends {
+    id: number;
+    title: string;
+    thumbnailUrl: string;
+    user: { profileImageUrl: string; nickname: string };
+    pinCount: number;
+  },
+>({
+  item,
+  linkPrefix,
+}: ListItemProps<T>) => {
   return (
     <Link to={`/${linkPrefix}/${item.id}`}>
-      <div className="flex h-50 flex-col gap-2 rounded-md border-[1.5px] border-gray-200 p-3">
-        <div className="w-full aspect-[4/3] overflow-hidden rounded-md bg-gray-100">
+      <div className="h-50 flex flex-col gap-2 rounded-md border-[1.5px] border-gray-200 p-3">
+        <div className="aspect-[4/3] w-full overflow-hidden rounded-md bg-gray-100">
           {item.thumbnailUrl.startsWith('https://example') ? (
             <ListItemThumbnail className="h-full w-full object-cover" />
           ) : (
diff --git a/frontend/src/components/common/List/ListItemThumbnail.tsx b/frontend/src/components/common/List/ListItemThumbnail.tsx
index 88fc5b9e..d5750740 100644
--- a/frontend/src/components/common/List/ListItemThumbnail.tsx
+++ b/frontend/src/components/common/List/ListItemThumbnail.tsx
@@ -4,9 +4,9 @@ type ListItemThumbnailProps = {
 };
 
 const ListItemThumbnail = ({
-                             thumbnailUrl = `https://kr.object.ncloudstorage.com/ogil-public/uploads/default_thumbnail/default_3.webp`,
-                             className,
-                           }: ListItemThumbnailProps) => {
+  thumbnailUrl = `https://kr.object.ncloudstorage.com/ogil-public/uploads/default_thumbnail/default_3.webp`,
+  className,
+}: ListItemThumbnailProps) => {
   return (
     <div className={className}>
       <img src={thumbnailUrl} alt="썸네일" />
diff --git a/frontend/src/components/common/List/ListToggleButtons.tsx b/frontend/src/components/common/List/ListToggleButtons.tsx
index d316cb09..7b379313 100644
--- a/frontend/src/components/common/List/ListToggleButtons.tsx
+++ b/frontend/src/components/common/List/ListToggleButtons.tsx
@@ -7,10 +7,10 @@ interface ToggleButtonProps {
 }
 
 const ToggleButton: React.FC<ToggleButtonProps> = ({
-                                                     options,
-                                                     selected,
-                                                     onSelect,
-                                                   }) => {
+  options,
+  selected,
+  onSelect,
+}) => {
   return (
     <div className="relative flex h-[45px] w-[700px] rounded-md bg-gray-200 shadow-inner">
       <div
diff --git a/frontend/src/components/common/SearchBar.tsx b/frontend/src/components/common/SearchBar.tsx
index 63909755..157d972a 100644
--- a/frontend/src/components/common/SearchBar.tsx
+++ b/frontend/src/components/common/SearchBar.tsx
@@ -23,8 +23,7 @@ const SearchBar: React.FC<SearchBarProps> = ({ onSearch, query }) => {
   };
 
   return (
-    <div
-      className="relative flex h-12 w-[500px] items-center justify-between overflow-hidden rounded-md border-[1.33px] border-c_brand_BLUE bg-[#f9f9f9] px-4">
+    <div className="relative flex h-12 w-[500px] items-center justify-between overflow-hidden rounded-md border-[1.33px] border-c_brand_BLUE bg-[#f9f9f9] px-4">
       <input
         type="text"
         placeholder={query || '검색어를 입력해주세요'}
diff --git a/frontend/src/pages/HomePage/Header.tsx b/frontend/src/pages/HomePage/Header.tsx
index 93d2fb54..e9bd553d 100644
--- a/frontend/src/pages/HomePage/Header.tsx
+++ b/frontend/src/pages/HomePage/Header.tsx
@@ -7,13 +7,14 @@ const Header = () => {
   return (
     <header className="bg-white shadow-md">
       <div className="container mx-auto flex items-center justify-between px-6 py-4">
-        <img src={logo}
-             alt="Logo"
-             className="h-8 w-auto cursor-pointer"
-             onClick={() => {
-               window.location.href = '/';
-             }}>
-        </img>
+        <img
+          src={logo}
+          alt="Logo"
+          className="h-8 w-auto cursor-pointer"
+          onClick={() => {
+            window.location.href = '/';
+          }}
+        ></img>
         <Suspense fallback={<div>Loading...</div>}>
           <LoginButtons />
         </Suspense>
diff --git a/frontend/src/pages/HomePage/LogOutButton.tsx b/frontend/src/pages/HomePage/LogOutButton.tsx
index 16faa2ce..7215d583 100644
--- a/frontend/src/pages/HomePage/LogOutButton.tsx
+++ b/frontend/src/pages/HomePage/LogOutButton.tsx
@@ -10,8 +10,9 @@ const LogOutButton = () => {
   };
   return (
     <button
-      className="bg-c_bg_blue text-white rounded-md p-2 px-4 h-12 w-36"
-      onClick={onClick}>
+      className="h-12 w-36 rounded-md bg-c_bg_blue p-2 px-4 text-white"
+      onClick={onClick}
+    >
       로그아웃
     </button>
   );
diff --git a/frontend/src/pages/HomePage/LoginButtons.tsx b/frontend/src/pages/HomePage/LoginButtons.tsx
index 661ce26f..648dcd1f 100644
--- a/frontend/src/pages/HomePage/LoginButtons.tsx
+++ b/frontend/src/pages/HomePage/LoginButtons.tsx
@@ -49,8 +49,9 @@ const LoginButtons = () => {
       {!isLogged ? (
         <div className="flex justify-between gap-5">
           <button
-            className="bg-c_bg_blue text-white rounded-md p-2 px-4 h-12 w-36"
-            onClick={handleLogin}>
+            className="h-12 w-36 rounded-md bg-c_bg_blue p-2 px-4 text-white"
+            onClick={handleLogin}
+          >
             구글 로그인
           </button>
         </div>
diff --git a/frontend/src/pages/HomePage/MainListPanel.tsx b/frontend/src/pages/HomePage/MainListPanel.tsx
index a0df2901..30473cc2 100644
--- a/frontend/src/pages/HomePage/MainListPanel.tsx
+++ b/frontend/src/pages/HomePage/MainListPanel.tsx
@@ -18,7 +18,7 @@ const MainListPanel = () => {
         onSelect={(value) => setListTab(value as CreateMapType)}
       />
 
-      <div className="w-[1200px] mt-1">
+      <div className="mt-1 w-[1200px]">
         {listTab === 'MAP' ? <MapListPanel /> : <CourseListPanel />}
       </div>
     </div>
diff --git a/frontend/src/pages/HomePage/UserProfile.tsx b/frontend/src/pages/HomePage/UserProfile.tsx
index ea2c041d..4b2e05a9 100644
--- a/frontend/src/pages/HomePage/UserProfile.tsx
+++ b/frontend/src/pages/HomePage/UserProfile.tsx
@@ -6,8 +6,7 @@ type UserProfileProps = {
 
 const UserProfile = ({ user }: UserProfileProps) => {
   return (
-    <div
-      className="flex items-center justify-between gap-4 rounded-lg border-[1px] border-c_button_gray p-2 px-4 h-12 w-36">
+    <div className="flex h-12 w-36 items-center justify-between gap-4 rounded-lg border-[1px] border-c_button_gray p-2 px-4">
       <img
         alt={`${user.nickname}님의 프로필 사진`}
         className="h-8 w-8 rounded-full"
diff --git a/frontend/src/pages/SearchPage/SearchListPanel.tsx b/frontend/src/pages/SearchPage/SearchListPanel.tsx
index 913f1c94..92afd2a8 100644
--- a/frontend/src/pages/SearchPage/SearchListPanel.tsx
+++ b/frontend/src/pages/SearchPage/SearchListPanel.tsx
@@ -22,7 +22,7 @@ const SearchListPanel: React.FC<SearchListPanelProps> = ({ query }) => {
         onSelect={(value) => setListTab(value as CreateMapType)}
       />
 
-      <div className="w-[1200px] mt-1">
+      <div className="mt-1 w-[1200px]">
         {listTab === 'MAP' ? (
           <MapListPanel query={query} />
         ) : (