fix: 기존 썸네일 컴포넌트 사용처 수정

#preview
boostcampwm-2024 · Dec 2, 2024 · 4f50db4 · 4f50db4
1 parent a142d82
commit 4f50db4
Show file tree

Hide file tree

Showing 12 changed files with 44 additions and 39 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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} />
         ) : (