feat: mainCardButtonType 파일 생성

GoTogether-Inc · Mar 4, 2025 · 4d0e5a3 · 4d0e5a3
1 parent 9737650
commit 4d0e5a3
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 37 deletions.
diff --git a/design-system/ui/textFields/SearchTextField.tsx b/design-system/ui/textFields/SearchTextField.tsx
@@ -20,7 +20,7 @@ const SearchTextField = forwardRef<HTMLInputElement, SearchTextFieldProps>(
           onChange={onChange}
           placeholder={placeholder}
           {...rest}
-          className="w-full sm:h-6 md:h-7 border-[0.3px] border-black rounded-[3px] px-2 outline-none placeholder:text-placeholderText text-xs font-light"
+          className="w-full h-7 md:h-8 border-[0.3px] border-black rounded-[3px] px-2 outline-none placeholder:text-placeholderText text-xs font-light"
         />
         <div className="absolute cursor-pointer right-2">{iconPath}</div>
       </div>

diff --git a/src/pages/home/ui/MainPage.tsx b/src/pages/home/ui/MainPage.tsx
@@ -17,6 +17,7 @@ import rightButton from '../../../../public/assets/main/RightButton.svg';
 import leftButton from '../../../../public/assets/main/LeftButton.svg';
 import { AnimatePresence } from 'framer-motion';
 import LoginModal from '../../../widgets/main/ui/LoginModal';
+import { cardButtons } from '../../../shared/types/mainCardButtonType';
 
 const MainPage = () => {
   const images = [
@@ -25,29 +26,6 @@ const MainPage = () => {
     { img: thirdPage, link: 'https://example.com/page3' },
   ];
 
-  // 버튼 데이터
-  const cardButtons = [
-    {
-      iconPath: '/assets/main/DevStudy.svg',
-      label: '개발/스터디',
-      onClick: () => console.log('DevStudy clicked'),
-    },
-    {
-      iconPath: '/assets/main/Networking.svg',
-      label: '네트워킹',
-      onClick: () => console.log('Networking clicked'),
-    },
-    {
-      iconPath: '/assets/main/Hackathon.svg',
-      label: '해커톤',
-      onClick: () => console.log('Hackathon clicked'),
-    },
-    {
-      iconPath: '/assets/main/Conference.svg',
-      label: '컨퍼런스',
-      onClick: () => console.log('Conference clicked'),
-    },
-  ];
   const [modalOpen, setModalOpen] = useState(false);
   const [latestStartIndex, setLatestStartIndex] = useState<number>(0);
   const [trendingStartIndex, setTrendingStartIndex] = useState<number>(0);
@@ -64,24 +42,14 @@ const MainPage = () => {
   const handlePrev = (setStartIndex: SetStartIndex, currentIndex: number, eventsLength: number): void => {
     setStartIndex((currentIndex - 1 + eventsLength) % eventsLength);
   };
-  const handleEventCardClick = () => {
-    navigate('/event-details');
-  };
-  const handleAllEventsButtonClick = () => {
-    navigate('/all-events');
-  };
-
-  const handleSearchButtonClick = () => {
-    navigate('/search');
-  };
 
   return (
     <div className="flex flex-col items-center pb-24">
       <Header
         centerContent={
           <SearchTextField
             iconPath={<img src={searchIcon} alt="Search" />}
-            onClick={handleSearchButtonClick}
+            onClick={() => navigate('/search')}
             onChange={() => {}}
             placeholder="입력해주세요"
           />
@@ -130,7 +98,7 @@ const MainPage = () => {
                 eventDate={event.eventDate}
                 location={event.location}
                 hashtags={event.hashtags}
-                onClick={handleEventCardClick}
+                onClick={() => navigate('/event-details')}
               />
             ))}
         </div>
@@ -219,7 +187,7 @@ const MainPage = () => {
         />
       </div>
       <button
-        onClick={handleAllEventsButtonClick}
+        onClick={() => navigate('/all-events')}
         className="flex items-center justify-center text-white bg-black lg:px-7 lg:py-3 md:px-6 md:py-3 sm:px-5 sm:py-2.5 rounded-3xl sm:text-xs md:text-sm lg:text-base"
       >
         전체 이벤트 보러가기 <span className="ml-1.5">&gt;</span>

diff --git a/src/shared/types/mainCardButtonType.ts b/src/shared/types/mainCardButtonType.ts
@@ -0,0 +1,22 @@
+export const cardButtons = [
+  {
+    iconPath: '/assets/main/DevStudy.svg',
+    label: '개발/스터디',
+    onClick: () => console.log('DevStudy clicked'),
+  },
+  {
+    iconPath: '/assets/main/Networking.svg',
+    label: '네트워킹',
+    onClick: () => console.log('Networking clicked'),
+  },
+  {
+    iconPath: '/assets/main/Hackathon.svg',
+    label: '해커톤',
+    onClick: () => console.log('Hackathon clicked'),
+  },
+  {
+    iconPath: '/assets/main/Conference.svg',
+    label: '컨퍼런스',
+    onClick: () => console.log('Conference clicked'),
+  },
+];