feat: Tags 컴포넌트 분할 및 재사용

Leets-Official · Jan 19, 2025 · 89ff237 · 89ff237
1 parent 8881f61
commit 89ff237
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 13 deletions.
diff --git a/src/components/home/manualMatching/MatchingPage.tsx b/src/components/home/manualMatching/MatchingPage.tsx
@@ -1,6 +1,6 @@
 import LargePlusIcon from '@/assets/icon/largePlusIcon.svg?react';
 import { Link } from 'react-router-dom';
-import MatchingInfoItem from '@/components/home/manualMatching/MatchingInfoItem';
+import MatchingInfoItem from '@/components/home/manualMatching/matchingInfoItem';
 import { ManualInfo } from '@/components/home/manualMatching';
 
 interface MatchingPageProps {

diff --git a/src/components/home/manualMatching/matchingInfoItem/Tags.tsx b/src/components/home/manualMatching/matchingInfoItem/Tags.tsx
@@ -0,0 +1,20 @@
+import { ManualInfo } from '@/components/home/manualMatching';
+
+const Tags = ({ manualInfo }: { manualInfo: ManualInfo }) => {
+  return (
+    <div className="flex overflow-x-scroll scroll-hidden gap-2">
+      {manualInfo.tags.map((tag) => {
+        return (
+          <span
+            key={tag}
+            className="text-assistive min-w-fit text-black font-medium px-3 py-1 rounded-full bg-primary"
+          >
+            # {tag}
+          </span>
+        );
+      })}
+    </div>
+  );
+};
+
+export default Tags;
diff --git a/.../home/manualMatching/MatchingInfoItem.tsx → ...manualMatching/matchingInfoItem/index.tsx b/.../home/manualMatching/MatchingInfoItem.tsx → ...manualMatching/matchingInfoItem/index.tsx
@@ -1,6 +1,7 @@
 import RouteSettingIcon from '@/assets/icon/smallRouteChangeIcon.svg?react';
 import Button from '@/components/commons/Button';
 import { ManualInfo } from '@/components/home/manualMatching';
+import Tags from '@/components/home/manualMatching/matchingInfoItem/Tags';
 import MatchingComplete from '@/components/modal/MatchingComplete';
 import { useModal } from '@/contexts/ModalContext';
 import { motion } from 'framer-motion';
@@ -70,18 +71,7 @@ const MatchingInfoItem = ({ manualInfo, setCurrentPage }: MatchingInfoItem) => {
           </div>
         )}
 
-        <div className="flex overflow-x-scroll scroll-hidden gap-2">
-          {manualInfo.tags.map((tag) => {
-            return (
-              <span
-                key={tag}
-                className="text-assistive min-w-fit text-black font-medium px-3 py-1 rounded-full bg-primary"
-              >
-                # {tag}
-              </span>
-            );
-          })}
-        </div>
+        <Tags manualInfo={manualInfo} />
       </motion.div>
       {isExpand && (
         <div className="w-full">