chore :: map함수 key 설정

Team-return · Oct 19, 2023 · ef0ac58 · ef0ac58
1 parent dcbf9f4
commit ef0ac58
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 23 deletions.
diff --git a/src/components/Carousel.tsx b/src/components/Carousel.tsx
@@ -1,4 +1,4 @@
-'use client'
+"use client";
 
 import Image from "next/image";
 import React, { useEffect, useRef, useState } from "react";
@@ -64,6 +64,7 @@ export default function Banner() {
       <div className="w-screen flex gap-[50px] relative overflow-hidden whitespace-nowrap z-1 ">
         {test.map((item, index) => (
           <div
+            key={index}
             className={`w-[65vw] h-[20vw] inline-block flex-[0_0_auto] relative rounded-[12px] border border-[#E5E5E5] border-solid overflow-hidden curosr-pointer ${
               index === 0 && "m-[0_0_0_17.5vw]"
             } ${index === test.length - 1 && "m-[0_17.5vw_0_0]"}`}
@@ -72,12 +73,7 @@ export default function Banner() {
               window.open(item.url);
             }}
           >
-            <Image
-              className="object-cover"
-              fill
-              src={item.img}
-              alt=""
-            />
+            <Image className="object-cover" fill src={item.img} alt="" />
           </div>
         ))}
       </div>

diff --git a/src/components/CompanyCard.tsx b/src/components/CompanyCard.tsx
@@ -26,11 +26,8 @@ export default function CompanyCard() {
     <div className="w-full my-[10px] grid grid-cols-2 md:grid-cols-3 gap-[2vw]">
       {companyList.map(
         ({ logo_url, name, take, has_recruitment, id }, index) => (
-          <HoverPrefetchLink href={`/companies/detail?id=${id}`}>
-            <div
-              className="relative w-full transition duration-200 cursor-pointer hover:transition hover:scale-105 z-1"
-              key={index}
-            >
+          <HoverPrefetchLink href={`/companies/detail?id=${id}`} key={index}>
+            <div className="relative w-full transition duration-200 cursor-pointer hover:transition hover:scale-105 z-1">
               <div className="w-full h-0 pb-[60%] relative shadow-elevaiton rounded-[14px] overflow-hidden">
                 <Image
                   className="absolute object-contain"

diff --git a/src/components/RecruitmentsCard.tsx b/src/components/RecruitmentsCard.tsx
@@ -23,15 +23,21 @@ export default function RecruitmentsCard() {
   return (
     <div className="w-full mt-5 grid grid-cols-3 md:grid-cols-4 gap-[1.5vw]">
       {list.map(
-        ({
-          company_profile_url,
-          company_name,
-          train_pay,
-          job_code_list,
-          bookmarked,
-          recruit_id,
-        }) => (
-          <HoverPrefetchLink href={`/recruitments/detail?id=${recruit_id}`}>
+        (
+          {
+            company_profile_url,
+            company_name,
+            train_pay,
+            job_code_list,
+            bookmarked,
+            recruit_id,
+          },
+          index
+        ) => (
+          <HoverPrefetchLink
+            href={`/recruitments/detail?id=${recruit_id}`}
+            key={index}
+          >
             <div className="flex flex-col w-full overflow-hidden transition duration-200 cursor-pointer shadow-elevaiton rounded-xl hover:transition hover:scale-105">
               <div className="w-full h-0 pb-[70%] relative">
                 <Image

diff --git a/src/components/recruitments/RecruitmentsTable.tsx b/src/components/recruitments/RecruitmentsTable.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client";
 
 import { RecruitmentsDetailTable } from "@/apis/recruitments/type";
 import { Icon } from "@team-return/design-system";
@@ -30,7 +30,7 @@ function RecruitmentsTable({ ...rest }: RecruitmentsDetailTable) {
             const [isOpen, setIsOpen] = useState<boolean>(false);
             return (
               <>
-                <tr>
+                <tr key={index}>
                   <td
                     className="key"
                     onClick={() => setIsOpen((prev) => !prev)}