Merge pull request #66 from LIKELION-SOGANG/feature/people-improve-generation#65

PEOPLE 페이지 기수 컴포넌트 개선

Author: rmdnps10

public/images/people/MockImages/김유이.svg

@@ -1,5 +1,4 @@
 import React from 'react'
-import Image from 'next/image'
 interface Member {
   _id: string
   name: string
@@ -16,48 +15,43 @@ export default function TabItem({ data }: TabItemProps) {
 
   return (
     <div>
-      <div className="flex items-center text-center text-black mx-8 my-0 mt-16">
-        <div className="flex-grow h-[0.1rem] tablet:h-[0.2rem] bg-black"></div>
-        <div className="font-pretendard px-6 py-0 font-semibold text-[1.6rem] tablet:text-[2.4rem]">
-          운영진
-        </div>
-        <div className="flex-grow h-[0.1rem] tablet:h-[0.2rem] bg-black"></div>
-      </div>
-      <div className="overflow-x-auto w-full mt-[3rem] tablet:mt-[9.5rem] tablet:mb-[16rem] scrollbar-hide">
-        <div className="flex justify-start items-center text-black whitespace-nowrap mx-[4rem]">
-          {adult_lion?.map(member => (
-            <div
-              key={member._id}
-              className="flex flex-col justify-center items-center w-[16vw] min-w-[12rem] tablet:min-w-[18rem] h-auto mx-4">
-              <Image
-                // src={member.emoji}
-                src={''}
-                width={160}
-                height={160}
-                className="block object-contain w-[10rem] h-[10rem] tablet:w-[16rem] tablet:h-[16rem] mb-8"
-                alt={member.name}
-              />
-              <div className="font-pretendard text-[1.6rem] tablet:text-[2rem] font-bold mb-0">
-                {member.name}
-              </div>
-              <div className="font-pretendard text-[1.2rem] tablet:text-[1.4rem] font-medium">
-                {/* {member.generation} / {member.part} */}
-              </div>
-              {member.type === 'president' ? (
-                <div className="mt-[0.4rem] font-semibold">대표</div>
-              ) : member.type === 'vice_president' ? (
-                <div className="mt-[0.4rem] font-semibold">부대표</div>
-              ) : (
-                <div className="mt-[2.0rem] font-semibold"></div>
-              )}
+      {adult_lion?.length > 0 ? (
+        <div>
+          <div className="flex items-center text-center text-black mx-8 my-0 mt-16">
+            <div className="flex-grow h-[0.1rem] tablet:h-[0.2rem] bg-black"></div>
+            <div className="font-pretendard px-6 py-0 font-semibold text-[1.6rem] tablet:text-[2.4rem]">
+              운영진
             </div>
-          ))}
+            <div className="flex-grow h-[0.1rem] tablet:h-[0.2rem] bg-black"></div>
+          </div>
+
+          <div className="flex flex-wrap justify-center items-start gap-12 px-8 py-16 pb-[18rem] mx-auto my-0 text-black pb-[6rem]">
+            {adult_lion?.map(member => (
+              <div
+                key={member._id}
+                className="flex flex-col justify-center items-center min-w-[3rem] tablet:min-w-[5rem] h-auto mx-4">
+                <div className="font-pretendard text-[1.6rem] tablet:text-[2rem] font-bold mb-0">
+                  {member.name}
+                </div>
+                <div className="font-pretendard text-[1.2rem] tablet:text-[1.4rem] font-medium"></div>
+                {member.type === 'president' ? (
+                  <div className="mt-[0.4rem] font-semibold">대표</div>
+                ) : member.type === 'vice_president' ? (
+                  <div className="mt-[0.4rem] font-semibold">부대표</div>
+                ) : (
+                  <div className="mt-[2.0rem] font-semibold"></div>
+                )}
+              </div>
+            ))}
+          </div>
         </div>
-      </div>
+      ) : (
+        <div></div>
+      )}
 
       <div className="flex items-center text-center text-black mx-8 my-0 mt-16">
         <div className="flex-grow h-[0.1rem] tablet:h-[0.2rem] bg-black"></div>
-        <div className="font-pretendard px-6 py-0 text-[1.6rem] tablet:text-[2.4rem] font-semibold">
+        <div className="font-pretendard px-6 py-0 font-semibold text-[1.6rem] tablet:text-[2.4rem]">
           아기사자
         </div>
         <div className="flex-grow h-[0.1rem] tablet:h-[0.2rem] bg-black"></div>

public/images/people/MockImages/오은택.svg

@@ -24,7 +24,7 @@ export default function SecondSection({ Members }: SecondSectionProps) {
   useEffect(() => {
     const generations = Array.from(
       new Set(Members.map((member: Member) => parseInt(member.generation, 10)))
-    ) as number[]
+    ).sort((a, b) => a - b)
     setTabList(generations)
     setSelectedTab(parseInt(Members[Members.length - 1].generation))
   }, [Members])