Add Renderer Scale to Brand Accent

src/app/app.scss

@@ -1,3 +1,7 @@
+:host {
+  min-height: 100dvh;
+}
+
 main:focus-visible {
   outline: none;
 }

src/app/components/brand-accent/brand-accent.ts

@@ -28,6 +28,7 @@ export class BrandAccent implements OnDestroy {
 
   drawGrid = input<boolean>(true);
 
+  private bgRendererScale = 1;
   private canvasNativeSize: [number, number] = [0, 0];
   private bgGradient!: CanvasGradient;
   private gridGradient!: CanvasGradient;
@@ -123,8 +124,8 @@ export class BrandAccent implements OnDestroy {
       canvas.height = height * dpr;
 
       if (this.offscreenCanvas) {
-        this.offscreenCanvas.width = width;
+        this.offscreenCanvas.width = width * this.bgRendererScale;
-        this.offscreenCanvas.height = height;
+        this.offscreenCanvas.height = height * this.bgRendererScale;
       }
 
       this.canvasNativeSize = [width, height];
@@ -153,7 +154,12 @@ export class BrandAccent implements OnDestroy {
     if (w === 0 || h === 0) return;
 
     if (!isDark) {
-      this.bgGradient = this.ctx.createLinearGradient(0, 0, w, h);
+      this.bgGradient = this.ctx.createLinearGradient(
+        0,
+        0,
+        w * this.bgRendererScale,
+        h * this.bgRendererScale,
+      );
       this.bgGradient.addColorStop(0, 'oklch(1 0 0 / 0.6)');
       this.bgGradient.addColorStop(1, 'oklch(0.7938 0.1292 47.77 / 0.6)');
     }
@@ -177,15 +183,15 @@ export class BrandAccent implements OnDestroy {
     const h = this.canvasNativeSize[1];
     if (w === 0 || h === 0) return;
 
-    this.offscreenCtx.clearRect(0, 0, w, h);
+    this.offscreenCtx.clearRect(0, 0, w * this.bgRendererScale, h * this.bgRendererScale);
     this.offscreenCtx.globalCompositeOperation = 'source-over';
 
     if (!isDark) {
       this.offscreenCtx.fillStyle = this.bgGradient;
-      this.offscreenCtx.fillRect(0, 0, w, h);
+      this.offscreenCtx.fillRect(0, 0, w * this.bgRendererScale, h * this.bgRendererScale);
     } else {
       this.offscreenCtx.fillStyle = 'oklch(0.1776 0 0)';
-      this.offscreenCtx.fillRect(0, 0, w, h);
+      this.offscreenCtx.fillRect(0, 0, w * this.bgRendererScale, h * this.bgRendererScale);
 
       const ellipseDimension = [Math.max(100, w * 0.9421875), Math.max(200 / 3, h * (203 / 120))];
 
@@ -196,13 +202,17 @@ export class BrandAccent implements OnDestroy {
         Math.min(780, Math.min(ellipseDimension[0], ellipseDimension[1]) * 0.6) /
         this.rendererScale;
 
-      this.offscreenCtx.filter = `blur(${blurScale}px)`;
+      this.offscreenCtx.filter = `blur(${blurScale * this.bgRendererScale}px)`;
 
       this.offscreenCtx.beginPath();
       this.offscreenCtx.ellipse(
-        ellipseX, ellipseY,
+        ellipseX * this.bgRendererScale,
-        ellipseDimension[0] / 2, ellipseDimension[1] / 2,
+        ellipseY * this.bgRendererScale,
-        0, 0, 2 * Math.PI,
+        (ellipseDimension[0] / 2) * this.bgRendererScale,
+        (ellipseDimension[1] / 2) * this.bgRendererScale,
+        0,
+        0,
+        2 * Math.PI,
       );
       this.offscreenCtx.fillStyle = 'oklch(0.2547 0.0913 29.02)';
       this.offscreenCtx.fill();
@@ -234,7 +244,13 @@ export class BrandAccent implements OnDestroy {
       this.ctx.globalCompositeOperation = 'source-over';
 
       this.ctx.imageSmoothingEnabled = false;
-      this.ctx.drawImage(this.offscreenCanvas, 0, 0);
+      this.ctx.drawImage(
+        this.offscreenCanvas,
+        0,
+        0,
+        this.canvasNativeSize[0],
+        this.canvasNativeSize[1],
+      );
 
       // this.ctx.drawImage(this.offscreenCanvas, 0, 0, this.canvasNativeSize[0], this.canvasNativeSize[1]);
     }
@@ -261,7 +277,7 @@ export class BrandAccent implements OnDestroy {
       (this.canvasNativeSize[1] - this.animation.gridDimension[1] * this.animation.gridSquareSize) /
       2;
 
-    const movingOffset = -(this.animation.gridSquareSize * this.animation.progress);
+    const movingOffset = this.settingsService.reduceAnimation() ? 0 : -(this.animation.gridSquareSize * this.animation.progress);
 
     for (let y = 0; y < this.animation.gridDimension[1]; y++) {
       this.ctx.moveTo(

src/app/components/dropdown/dropdown.scss

@@ -121,7 +121,7 @@ $default_animation_duration: 0.2s;
   background-color: light-dark(oklch(1 0 0), oklch(0 0 0));
   border-radius: $border_radius;
   z-index: 1000;
-  max-height: 240px;
+  max-height: 200px;
   overflow-y: hidden;
   box-shadow: 0 4px 12px oklch(0 0 0 / 10%); // rgba(0, 0, 0, 0.1)
   animation: slideIn var(--animation-duration) $animation_timing;

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

@@ -8,7 +8,8 @@ $default_animation_duration: 0.2s;
 }
 
 :host {
-  width: 400px;
+  width: 100%;
+  max-width: 400px;
   height: 160px;
 
   display: flex;

src/app/components/skip-links/skip-links.scss

@@ -28,6 +28,11 @@ $default_animation_duration: 0.4s;
   &:focus-within {
     top: -40px;
     outline: 2px solid var(--selection-outline-color);
+
+    ::ng-deep * {
+      // 내부에서 탭 이동 시에는 지연 없이 즉시 전환되도록 합니다.
+      transition: none;
+    }
   }
 
   ::ng-deep * {
@@ -48,9 +53,15 @@ $default_animation_duration: 0.4s;
     opacity: 0;
     overflow: hidden;
 
+    // Component에서 포커스가 나갈 때(애니메이션 중) 마지막 포커스된 요소가 유지되도록 지연 시간을 둡니다.
+    transition: opacity 0s var(--animation-duration), width 0s var(--animation-duration);
+    interpolate-size: allow-keywords;
+
     &:focus {
-      width: unset;
+      width: auto;
       opacity: 1;
+
+      transition: none;
     }
   }
 }

src/app/pages/main/main.html

@@ -1,6 +1,6 @@
-<div class="container">
+<brand-accent></brand-accent>
-  <brand-accent></brand-accent>
 
+<div class="container">
   <h1>Component Test</h1>
 
   <section id="switch-test" class="feature-block">

src/app/pages/main/main.scss

@@ -1,6 +1,16 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  width: 100%;
+}
+
 :host > .container {
   display: flex;
-  width: 600px;
+  width: 100%;
+  max-width: 600px;
+  box-sizing: border-box;
 
   flex-direction: column;
   gap: 40px;
@@ -8,7 +18,8 @@
 
 section#dropdown-test {
   dropdown {
-    width: 324px;
+    width: 100%;
+    max-width: 324px;
   }
 }
 
@@ -35,11 +46,12 @@ div.test-container {
 brand-accent {
   position: absolute;
 
-  width: 100%;
+  top: -64px;
-  height: 100%;
-
-  top: 0;
   left: 0;
 
+  width: 100%;
+  min-width: 100dvw;
+  height: calc(100% + 64px);
+  min-height: 100dvh;
   z-index: -999999;
 }

src/styles.scss

@@ -39,6 +39,8 @@ body {
   margin: 0;
   overscroll-behavior-x: none;
   background-color: white;
+
+  min-height: 100dvh;
 }
 
 .icon-24 {