From 23bfbfcf04b880c2e6ab8a7372daae2cdae2ce4c Mon Sep 17 00:00:00 2001
From: Marshall Ku <marshall@kakao.com>
Date: Mon, 11 Nov 2024 21:53:15 +0900
Subject: [PATCH] Modify design

---
 apps/blog/src/app/tags/page.module.scss | 21 +++++++++++++++------
 apps/blog/src/app/tags/page.tsx         | 25 +++++++++++++++----------
 2 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/apps/blog/src/app/tags/page.module.scss b/apps/blog/src/app/tags/page.module.scss
index 07c979e6..f7d05a92 100644
--- a/apps/blog/src/app/tags/page.module.scss
+++ b/apps/blog/src/app/tags/page.module.scss
@@ -1,13 +1,22 @@
 @use "sass:map";
 
 .tag-cloud {
-    display: flex;
     width: clamp(0px, map.get($container-width, "large"), 100%);
-    margin: 0 auto;
-    // padding-right = padding-left + half of tag width
-    padding: $global-navigation-height + 20px 12px 10px 12px + 15px;
-    flex-wrap: wrap;
-    gap: 0.75em;
+    margin: $global-navigation-height auto 0;
+
+    &__title {
+        margin: 24px 12px;
+        text-align: center;
+    }
+
+    &__tags {
+        display: flex;
+        width: clamp(0px, map.get($container-width, "large"), 100%);
+        // padding-right = padding-left + half of tag width
+        padding: $global-navigation-height + 20px 12px 10px 12px + 15px;
+        flex-wrap: wrap;
+        gap: 0.75em;
+    }
 
     a {
         position: relative;
diff --git a/apps/blog/src/app/tags/page.tsx b/apps/blog/src/app/tags/page.tsx
index 86125d43..c9c4d444 100644
--- a/apps/blog/src/app/tags/page.tsx
+++ b/apps/blog/src/app/tags/page.tsx
@@ -18,16 +18,21 @@ export default function TagCloudPage() {
 
     return (
         <div className={cx()}>
-            {tags.map(({ name, count }) => (
-                <Link key={name} href={`/tag/${name}`}>
-                    <Typography component="span" variant="b2">
-                        {name}
-                    </Typography>
-                    <Typography component="span" variant="c1">
-                        ({count})
-                    </Typography>
-                </Link>
-            ))}
+            <Typography variant="h1" component="h1" fontWeight={700} className={cx("__title")}>
+                태그 목록
+            </Typography>
+            <div className={cx("__tags")}>
+                {tags.map(({ name, count }) => (
+                    <Link key={name} href={`/tag/${name}`}>
+                        <Typography component="span" variant="b2">
+                            {name}
+                        </Typography>
+                        <Typography component="span" variant="c1">
+                            ({count})
+                        </Typography>
+                    </Link>
+                ))}
+            </div>
         </div>
     );
 }