Add Levels to Properly Test Level Card

src/app/components/level-card/level-card.html

@@ -7,7 +7,7 @@
   <div class="other">
     <div class="creator">
       <span>by</span>
-      <span>{{ creator() }}</span>
+      <span>{{ creatorString() }}</span>
     </div>
   </div>
 </section>

src/app/components/level-card/level-card.scss

@@ -22,7 +22,7 @@ $default_animation_duration: 0.2s;
   overflow: hidden;
 
   section.information {
-    width: 336px;
+    width: calc(100% - 64px);
     padding: 12px;
     box-sizing: border-box;
     overflow: hidden;

src/app/components/level-card/level-card.ts

@@ -1,4 +1,4 @@
-import { Component, input } from '@angular/core';
+import { Component, computed, input } from '@angular/core';
 
 @Component({
   selector: 'level-card',
@@ -9,5 +9,7 @@ import { Component, input } from '@angular/core';
 export class LevelCard {
   artist = input.required<string>()
   trackName = input.required<string>()
-  creator = input.required<string>()
+  creator = input<string[]>([]);
+
+  creatorString = computed(() => this.creator().join(" & "));
 }

src/app/pages/levels/levels.html

@@ -1,7 +1,40 @@
-<div class="container">
 <h1>Level Card Test</h1>
+
+<div class="container">
   <level-card
-    artist="かめりあ (Camellia)"
+    artist="HyuN"
-    trackName="Tentaclar Aliens' Epic Extraterretterrestrial Jungle Dance Party Inside Of A Super-Ultra-Mega-Gigantic U.F.O. (It Maybe U.U.F.O.) Silently Flying Over Illinois St."
+    trackName="Disorder (Low VFX)"
-    creator="psby"></level-card>
+    [creator]="['YOON']"></level-card>
+  <level-card
+    artist="Cinamoro"
+    trackName="Little Rabbit and Deliverance"
+    [creator]="['한가지']"></level-card>
+  <level-card
+    artist="linear ring"
+    trackName="Dream By Coma"
+    [creator]="['Ryuha']"></level-card>
+  <level-card
+    artist="Plum"
+    trackName="Champagne Pop"
+    [creator]="['Ryuha']"></level-card>
+  <level-card
+    artist="JinoBeats ft. JinoBeats"
+    trackName="~ Black Forsaken Wings ~"
+    [creator]="['Sakura']"></level-card>
+  <level-card
+    artist="seatrus"
+    trackName="M A X I M U M B L A S T E R"
+    [creator]="['TraZ']"></level-card>
+  <level-card
+    artist="MegaSphere"
+    trackName="Inferno"
+    [creator]="['-K']"></level-card>
+  <level-card
+    artist="Rinne"
+    trackName="Aurelia"
+    [creator]="['토끼로봇']"></level-card>
+  <level-card
+    artist="Sot-C"
+    trackName="Escalation"
+    [creator]="['Chartic']"></level-card>
 </div>

src/app/pages/levels/levels.scss

@@ -1,7 +1,17 @@
+@scope(:host) {
+  width: 100%;
+  text-align: center;
+}
+
+:host > h1 {
+  margin-top: 40px;
+}
+
 :host > .container {
   display: flex;
-  width: 600px;
+  flex-wrap: wrap;
-
+  justify-content: center;
-  flex-direction: column;
   gap: 40px;
+  max-width: calc(40px * 2 + 400px * 3);
+  margin: 0 auto;
 }