[Refactor] [GGFE-240] 프로필 배경+ 게임아이템 테마 scss key-value 사용하여 리팩토링

.stylelintrc.json

@@ -31,6 +31,7 @@
         "function-name-case": null,
         "scss/dollar-variable-pattern": null,
         "number-max-precision": null,
+        "scss/no-global-function-names": null,
 
         "order/order": [
             "custom-properties",

styles/Layout/Layout.module.scss

@@ -1,4 +1,5 @@
 @import 'styles/common.scss';
+@import 'styles/ProfileBackgroundTheme.scss';
 
 .appContainer {
   display: flex;
@@ -29,52 +30,52 @@
     background: $bg-basic;
   }
   &.color1 {
-    background: $bg-pink-orange;
+    background: map-get($map: $bg-pink-orange, $key: 'background');
   }
   &.color2 {
-    background: $bg-blue-green;
+    background: map-get($map: $bg-blue-green, $key: 'background');
   }
   &.color3 {
-    background: $bg-midnight;
+    background: map-get($map: $bg-midnight, $key: 'background');
   }
   &.color4 {
-    background: $bg-orange;
+    background: map-get($map: $bg-orange, $key: 'background');
   }
   &.color5 {
-    background: $bg-grass-green;
+    background: map-get($map: $bg-grass-green, $key: 'background');
   }
   &.color6 {
-    background: $bg-lemon-blue;
+    background: map-get($map: $bg-lemon-blue, $key: 'background');
   }
   &.color7 {
-    background: $bg-dracula;
+    background: map-get($map: $bg-dracula, $key: 'background');
   }
   &.color8 {
-    background: $bg-mint-green;
+    background: map-get($map: $bg-mint-green, $key: 'background');
   }
   &.color9 {
-    background: $bg-steel-gray;
+    background: map-get($map: $bg-steel-gray, $key: 'background');
   }
   &.color10 {
-    background: $bg-blood-red;
+    background: map-get($map: $bg-blood-red, $key: 'background');
   }
   &.color11 {
-    background: $bg-blue-sky;
+    background: map-get($map: $bg-blue-sky, $key: 'background');
   }
   &.color12 {
-    background: $bg-ocean-blue;
+    background: map-get($map: $bg-ocean-blue, $key: 'background');
   }
   &.color13 {
-    background: $bg-pink-blue;
+    background: map-get($map: $bg-pink-blue, $key: 'background');
   }
   &.color14 {
-    background: $bg-sunset-pink;
+    background: map-get($map: $bg-sunset-pink, $key: 'background');
   }
   &.color15 {
-    background: $bg-dark-navy;
+    background: map-get($map: $bg-dark-navy, $key: 'background');
   }
   &.color16 {
-    background: $bg-orange-green;
+    background: map-get($map: $bg-orange-green, $key: 'background');
   }
 }
 

styles/ProfileBackgroundTheme.scss

@@ -0,0 +1,144 @@
+// Tranquil
+$bg-pink-orange: (
+  'background': linear-gradient(to bottom, #ef629f, #eecda3),
+  'profile-game-result': (
+    'light': rgba(#f477ad, 0.5),
+    'dark': #f477ad,
+    'big': linear-gradient(110deg, #ef629f 10%, #eecda3 100%),
+  ),
+);
+// Windy
+$bg-blue-green: (
+  'background': linear-gradient(to bottom, #acb6e5, #86fde8),
+  'profile-game-result': (
+    'light': rgba(#acb6e5, 0.5),
+    'dark': #acb6e5,
+    'big': linear-gradient(110deg, #acb6e5 10%, #86fde8 100%),
+  ),
+);
+// Bupe
+$bg-midnight: (
+  'background': linear-gradient(to bottom, #00416a, #e4e5e6),
+  'profile-game-result': (
+    'light': rgba(#6f95ad, 0.5),
+    'dark': #6f95ad,
+    'big': linear-gradient(110deg, #4b83a6 10%, #e4e5e6 100%),
+  ),
+);
+// Mango
+$bg-orange: (
+  'background': linear-gradient(to top, #ffe259, #ffa751),
+  'profile-game-result': (
+    'light': rgba(#ea8520, 0.5),
+    'dark': #ea8520,
+    'big': linear-gradient(110deg, #ea8520 10%, #ffe259 100%),
+  ),
+);
+// Misty Meadow
+$bg-grass-green: (
+  'background': linear-gradient(to bottom, #215f00, #e4e4d9),
+  'profile-game-result': (
+    'light': rgba(#6a9a51, 0.5),
+    'dark': #6a9a51,
+    'big': linear-gradient(110deg, #6a9a51 10%, #e4e4d9 100%),
+  ),
+);
+// Opa
+$bg-lemon-blue: (
+  'background': linear-gradient(to top, #3d7eaa, #ffe47a),
+  'profile-game-result': (
+    'light': rgba(#7bbddc, 0.5),
+    'dark': #5181a0,
+    'big': linear-gradient(110deg, #3d7194 10%, #7bbddc 100%),
+  ),
+);
+// Dracula
+$bg-dracula: (
+  'background': linear-gradient(to top, #dc2424, #4a569d),
+  'profile-game-result': (
+    'light': rgba(#751f3e, 0.5),
+    'dark': #751f3e,
+    'big': linear-gradient(110deg, #751f3e 10%, #804a9d 100%),
+  ),
+);
+// Sea Blizz
+$bg-mint-green: (
+  'background': linear-gradient(to bottom, #1cd8d2, #93edc7),
+  'profile-game-result': (
+    'light': rgba(#18a5a0, 0.5),
+    'dark': #18a5a0,
+    'big': linear-gradient(110deg, #18a5a0 10%, #93edc7 100%),
+  ),
+);
+// Mystic
+$bg-steel-gray: (
+  'background': linear-gradient(to bottom, #757f9a, #d7dde8),
+  'profile-game-result': (
+    'light': rgba(#757f9a, 0.5),
+    'dark': #757f9a,
+    'big': linear-gradient(110deg, #757f9a 10%, #d7dde8 100%),
+  ),
+);
+// The Strain
+$bg-blood-red: (
+  'background': linear-gradient(to bottom, #870000, #190a05),
+  'profile-game-result': (
+    'light': #a31616,
+    'dark': rgba(#a31616, 0.5),
+    'big': linear-gradient(110deg, #650101 10%, #c63333 100%),
+  ),
+);
+// Cool Sky
+$bg-blue-sky: (
+  'background': linear-gradient(to bottom, #2980b9, #6dd5fa, #ffffff),
+  'profile-game-result': (
+    'light': rgba(#72c2f8, 0.5),
+    'dark': #72c2f8,
+    'big': linear-gradient(110deg, #72c2f8 10%, #cae9f5 100%),
+  ),
+);
+// Jodhpur
+$bg-ocean-blue: (
+  'background': linear-gradient(to top, #9cecfb, #65c7f7, #0052d4),
+  'profile-game-result': (
+    'light': rgba(#4295df, 0.5),
+    'dark': #4295df,
+    'big': linear-gradient(110deg, #4295df 10%, #9cecfb 100%),
+  ),
+);
+// Hazel
+$bg-pink-blue: (
+  'background': linear-gradient(to top, #77a1d3, #79cbca, #e684ae),
+  'profile-game-result': (
+    'light': rgba(#2e3562, 0.2),
+    'dark': #757cb8,
+    'big': linear-gradient(110deg, #757cb8 10%, #a0e4e1 100%),
+  ),
+);
+// Radar
+$bg-sunset-pink: (
+  'background': linear-gradient(to top, #a770ef, #cf8bf3, #fdb99b),
+  'profile-game-result': (
+    'light': rgba(#8f3ca0, 0.5),
+    'dark': #8f3ca0,
+    'big': linear-gradient(110deg, #8f3ca0 10%, #fb94c4 100%),
+  ),
+);
+// Royal Blue + Petrol
+$bg-dark-navy: (
+  'background': linear-gradient(to top, #bbd2c5, #536976, #292e49),
+  'profile-game-result': (
+    'light': rgba(#537c88, 0.5),
+    'dark': #537c88,
+    'big': linear-gradient(110deg, #537c88 10%, #bbd2c5 100%),
+  ),
+);
+// MegaTron
+$bg-orange-green: (
+  'background': linear-gradient(to top, #c6ffdd, #fbd786, #f7797d),
+  'profile-game-result': (
+    'light': rgba(#f79a75, 0.5),
+    'dark': #f79a75,
+    'big': linear-gradient(110deg, #fa888b 10%, #fbd786 100%),
+  ),
+);