[Feat] 리그 타입 별 테두리 색상 다르게 설정 및 box-shadow 적용 #1160

42organization · Dec 14, 2023 · 38f7813 · 38f7813
1 parent f749c7a
commit 38f7813
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 9 deletions.
diff --git a/components/tournament-record/WinnerProfileImage.tsx b/components/tournament-record/WinnerProfileImage.tsx
@@ -6,12 +6,14 @@ import styles from 'styles/tournament-record/WinnerProfileImage.module.scss';
 
 interface WinnerProfileImageProps {
   tournament: TournamentInfo;
+  type: string;
   slideIndex: number;
   setTournamentInfo: React.Dispatch<SetStateAction<TournamentInfo | undefined>>;
 }
 
 export default function WinnerProfileImage({
   tournament,
+  type,
   slideIndex,
   setTournamentInfo,
 }: WinnerProfileImageProps) {
@@ -35,18 +37,28 @@ export default function WinnerProfileImage({
     }
   }, [indexDiff, tournament, setTournamentInfo]);
 
-  function applyStyle() {
+  function applyLayerStyle() {
     if (indexDiff === 0) {
       return styles.firstLayer;
     }
     return styles.secondLayer;
   }
 
+  function applyTypeStyle(type: string) {
+    if (type === 'ROOKIE') {
+      return styles.rookie;
+    }
+    if (type === 'MASTER') {
+      return styles.master;
+    }
+    return styles.custom;
+  }
+
   return (
     <div
       className={`${styles.winnerProfileImage} ${
-        indexDiff > -2 && indexDiff < 2 && applyStyle()
-      }`}
+        indexDiff > -2 && indexDiff < 2 && applyLayerStyle()
+      } ${applyTypeStyle(type)}`}
     >
       <Image
         src={imageUrl ?? '/image/fallBackSrc.jpeg'}

diff --git a/components/tournament-record/WinnerSwiper.tsx b/components/tournament-record/WinnerSwiper.tsx
@@ -84,9 +84,13 @@ const WinnerSwiper = forwardRef(
           <React.Fragment key={pageIndex}>
             {page.tournaments.length > 0 &&
               page.tournaments.map((tournament, index) => (
-                <SwiperSlide key={tournament.tournamentId}>
+                <SwiperSlide
+                  className={styles.swiperSlide}
+                  key={tournament.tournamentId}
+                >
                   <WinnerProfileImage
                     tournament={tournament}
+                    type={type}
                     slideIndex={index + pageIndex * size}
                     setTournamentInfo={setTournamentInfo}
                   />

diff --git a/styles/tournament-record/WinnerProfileImage.module.scss b/styles/tournament-record/WinnerProfileImage.module.scss
@@ -15,14 +15,26 @@
   height: 100%;
   overflow: hidden;
   filter: brightness(50%);
-  border: 4px solid #e2be00;
   border-radius: 1.8rem;
   transition: filter 0.4s ease;
   transform: translate(-50%, -50%);
   animation: fadeIn 0.3s ease-in-out;
 
+  &.rookie {
+    border: 4px solid #e2be00;
+  }
+
+  &.master {
+    border: 4px solid #7ceeff;
+  }
+
+  &.custom {
+    border: 4px solid #7dffbe;
+  }
+
   &.firstLayer {
     filter: brightness(100%);
+    box-shadow: 0 0 15px 5px rgba(255, 247, 201, 0.75); /* 후광 효과 */
   }
 
   &.secondLayer {

diff --git a/styles/tournament-record/WinnerSwiper.module.scss b/styles/tournament-record/WinnerSwiper.module.scss
@@ -1,6 +1,8 @@
 .swiper {
-  height: 10rem;
-  margin-top: 1.7rem;
-  margin-bottom: 1rem;
-  overflow: hidden;
+  height: 14rem;
+}
+
+.swiperSlide {
+  height: 80%;
+  margin: 1.5rem 0;
 }