From c94d492b71aeae6eac3c79f9090205382642fe44 Mon Sep 17 00:00:00 2001
From: kylie <kylie@penxle.io>
Date: Mon, 3 Jun 2024 16:14:07 +0900
Subject: [PATCH] =?UTF-8?q?=EB=A6=AC=EB=94=A4=EC=BD=94=EB=93=9C=20?=
 =?UTF-8?q?=ED=8D=BC=EB=B8=94=EB=A6=AC=EC=8B=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/website/src/assets/icons/redeem-24.svg   |  30 ++
 apps/website/src/assets/icons/redeem-40.svg   |  43 +++
 apps/website/src/assets/icons/redeem-65.svg   |  68 ++++
 .../src/routes/(default)/UserMenu.svelte      |  17 +
 .../[space]/dashboard/+layout.svelte          |   4 +-
 .../dashboard/redeem/(create)/+page.svelte    |  70 ++++
 .../dashboard/redeem/(create)/+page.ts        |   5 +
 .../redeem/(create)/complete/+page.ts         |   6 +
 .../(create)/complete/+page@(default).svelte  | 353 ++++++++++++++++++
 .../dashboard/redeem/(create)/create/+page.ts |   5 +
 .../(create)/create/+page@(default).svelte    | 206 ++++++++++
 .../dashboard/redeem/(create)/next/+page.ts   |   6 +
 .../(create)/next/+page@(default).svelte      | 257 +++++++++++++
 .../[space]/dashboard/redeem/+layout.svelte   |  23 ++
 .../[space]/dashboard/redeem/+layout.ts       |   5 +
 .../[space]/dashboard/redeem/+page.svelte     |   1 -
 .../dashboard/redeem/manage/+page.svelte      | 117 ++++++
 .../[space]/dashboard/redeem/manage/+page.ts  |   5 +
 .../dashboard/redeem/manage/[redeem]/+page.ts |   5 +
 .../manage/[redeem]/+page@(default).svelte    | 332 ++++++++++++++++
 .../src/routes/(default)/me/+layout.svelte    |   2 +
 .../(default)/me/redeem/(index)/+page.svelte  |  61 +++
 .../routes/(default)/me/redeem/+layout.svelte |  13 +
 .../me/redeem/complete/+page@(default).svelte | 104 ++++++
 .../(default)/me/redeem/history/+page.svelte  |  80 ++++
 25 files changed, 1815 insertions(+), 3 deletions(-)
 create mode 100644 apps/website/src/assets/icons/redeem-24.svg
 create mode 100644 apps/website/src/assets/icons/redeem-40.svg
 create mode 100644 apps/website/src/assets/icons/redeem-65.svg
 create mode 100644 apps/website/src/routes/(default)/[space]/dashboard/redeem/(create)/+page.svelte
 create mode 100644 apps/website/src/routes/(default)/[space]/dashboard/redeem/(create)/+page.ts
 create mode 100644 apps/website/src/routes/(default)/[space]/dashboard/redeem/(create)/complete/+page.ts
 create mode 100644 apps/website/src/routes/(default)/[space]/dashboard/redeem/(create)/complete/+page@(default).svelte
 create mode 100644 apps/website/src/routes/(default)/[space]/dashboard/redeem/(create)/create/+page.ts
 create mode 100644 apps/website/src/routes/(default)/[space]/dashboard/redeem/(create)/create/+page@(default).svelte
 create mode 100644 apps/website/src/routes/(default)/[space]/dashboard/redeem/(create)/next/+page.ts
 create mode 100644 apps/website/src/routes/(default)/[space]/dashboard/redeem/(create)/next/+page@(default).svelte
 create mode 100644 apps/website/src/routes/(default)/[space]/dashboard/redeem/+layout.svelte
 create mode 100644 apps/website/src/routes/(default)/[space]/dashboard/redeem/+layout.ts
 delete mode 100644 apps/website/src/routes/(default)/[space]/dashboard/redeem/+page.svelte
 create mode 100644 apps/website/src/routes/(default)/[space]/dashboard/redeem/manage/+page.svelte
 create mode 100644 apps/website/src/routes/(default)/[space]/dashboard/redeem/manage/+page.ts
 create mode 100644 apps/website/src/routes/(default)/[space]/dashboard/redeem/manage/[redeem]/+page.ts
 create mode 100644 apps/website/src/routes/(default)/[space]/dashboard/redeem/manage/[redeem]/+page@(default).svelte
 create mode 100644 apps/website/src/routes/(default)/me/redeem/(index)/+page.svelte
 create mode 100644 apps/website/src/routes/(default)/me/redeem/+layout.svelte
 create mode 100644 apps/website/src/routes/(default)/me/redeem/complete/+page@(default).svelte
 create mode 100644 apps/website/src/routes/(default)/me/redeem/history/+page.svelte

diff --git a/apps/website/src/assets/icons/redeem-24.svg b/apps/website/src/assets/icons/redeem-24.svg
new file mode 100644
index 0000000000..911375dc38
--- /dev/null
+++ b/apps/website/src/assets/icons/redeem-24.svg
@@ -0,0 +1,30 @@
+<svg viewBox="0 0 116 130" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="116" height="130" fill="#E2E2E2" />
+  <rect x="3.80078" y="3.88281" width="34.7" height="12" fill="white" />
+  <rect x="40.5" y="3.88281" width="34.7" height="12" fill="white" />
+  <rect x="77.1992" y="3.88281" width="34.7" height="12" fill="white" />
+  <rect x="3.80078" y="17.8828" width="34.7" height="12" fill="white" />
+  <rect x="40.5" y="17.8828" width="34.7" height="12" fill="white" />
+  <rect x="77.1992" y="17.8828" width="34.7" height="12" fill="white" />
+  <rect x="3.80078" y="31.8828" width="34.7" height="12" fill="white" />
+  <rect x="40.5" y="31.8828" width="34.7" height="12" fill="white" />
+  <rect x="77.1992" y="31.8828" width="34.7" height="12" fill="white" />
+  <rect x="3.80078" y="45.8828" width="34.7" height="12" fill="white" />
+  <rect x="40.5" y="45.8828" width="34.7" height="12" fill="white" />
+  <rect x="77.1992" y="45.8828" width="34.7" height="12" fill="white" />
+  <rect x="3.80078" y="59.8828" width="34.7" height="12" fill="white" />
+  <rect x="40.5" y="59.8828" width="34.7" height="12" fill="white" />
+  <rect x="77.1992" y="59.8828" width="34.7" height="12" fill="white" />
+  <rect x="3.80078" y="73.8828" width="34.7" height="12" fill="white" />
+  <rect x="40.5" y="73.8828" width="34.7" height="12" fill="white" />
+  <rect x="77.1992" y="73.8828" width="34.7" height="12" fill="white" />
+  <rect x="3.80078" y="87.8828" width="34.7" height="12" fill="white" />
+  <rect x="40.5" y="87.8828" width="34.7" height="12" fill="white" />
+  <rect x="77.1992" y="87.8828" width="34.7" height="12" fill="white" />
+  <rect x="3.80078" y="101.883" width="34.7" height="12" fill="white" />
+  <rect x="40.5" y="101.883" width="34.7" height="12" fill="white" />
+  <rect x="77.1992" y="101.883" width="34.7" height="12" fill="white" />
+  <rect x="3.69922" y="115.883" width="35.1" height="12" fill="white" />
+  <rect x="40.3008" y="115.883" width="35.1" height="12" fill="white" />
+  <rect x="76.8984" y="115.883" width="35.1" height="12" fill="white" />
+</svg>
diff --git a/apps/website/src/assets/icons/redeem-40.svg b/apps/website/src/assets/icons/redeem-40.svg
new file mode 100644
index 0000000000..33262e0a6f
--- /dev/null
+++ b/apps/website/src/assets/icons/redeem-40.svg
@@ -0,0 +1,43 @@
+<svg viewBox="0 0 116 130" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="116" height="130" fill="#E2E2E2" />
+  <rect x="3.69922" y="4" width="25.6" height="11.05" fill="white" />
+  <rect x="31.2656" y="4" width="25.6" height="11.05" fill="white" />
+  <rect x="58.832" y="4" width="25.6" height="11.05" fill="white" />
+  <rect x="86.3984" y="4" width="25.6" height="11.05" fill="white" />
+  <rect x="3.69922" y="16.5469" width="25.6" height="11.05" fill="white" />
+  <rect x="31.2656" y="16.5469" width="25.6" height="11.05" fill="white" />
+  <rect x="58.832" y="16.5469" width="25.6" height="11.05" fill="white" />
+  <rect x="86.3984" y="16.5469" width="25.6" height="11.05" fill="white" />
+  <rect x="3.69922" y="29.1016" width="25.6" height="11.05" fill="white" />
+  <rect x="31.2656" y="29.1016" width="25.6" height="11.05" fill="white" />
+  <rect x="58.832" y="29.1016" width="25.6" height="11.05" fill="white" />
+  <rect x="86.3984" y="29.1016" width="25.6" height="11.05" fill="white" />
+  <rect x="3.69922" y="41.6484" width="25.6" height="11.05" fill="white" />
+  <rect x="31.2656" y="41.6484" width="25.6" height="11.05" fill="white" />
+  <rect x="58.832" y="41.6484" width="25.6" height="11.05" fill="white" />
+  <rect x="86.3984" y="41.6484" width="25.6" height="11.05" fill="white" />
+  <rect x="3.69922" y="54.2031" width="25.6" height="11.05" fill="white" />
+  <rect x="31.2656" y="54.2031" width="25.6" height="11.05" fill="white" />
+  <rect x="58.832" y="54.2031" width="25.6" height="11.05" fill="white" />
+  <rect x="86.3984" y="54.2031" width="25.6" height="11.05" fill="white" />
+  <rect x="3.69922" y="66.75" width="25.6" height="11.05" fill="white" />
+  <rect x="31.2656" y="66.75" width="25.6" height="11.05" fill="white" />
+  <rect x="58.832" y="66.75" width="25.6" height="11.05" fill="white" />
+  <rect x="86.3984" y="66.75" width="25.6" height="11.05" fill="white" />
+  <rect x="3.69922" y="79.2969" width="25.6" height="11.05" fill="white" />
+  <rect x="31.2656" y="79.2969" width="25.6" height="11.05" fill="white" />
+  <rect x="58.832" y="79.2969" width="25.6" height="11.05" fill="white" />
+  <rect x="86.3984" y="79.2969" width="25.6" height="11.05" fill="white" />
+  <rect x="3.69922" y="91.8516" width="25.6" height="11.05" fill="white" />
+  <rect x="31.2656" y="91.8516" width="25.6" height="11.05" fill="white" />
+  <rect x="58.832" y="91.8516" width="25.6" height="11.05" fill="white" />
+  <rect x="86.3984" y="91.8516" width="25.6" height="11.05" fill="white" />
+  <rect x="3.69922" y="104.398" width="25.6" height="11.05" fill="white" />
+  <rect x="31.2656" y="104.398" width="25.6" height="11.05" fill="white" />
+  <rect x="58.832" y="104.398" width="25.6" height="11.05" fill="white" />
+  <rect x="86.3984" y="104.398" width="25.6" height="11.05" fill="white" />
+  <rect x="3.69922" y="116.953" width="25.6" height="11.05" fill="white" />
+  <rect x="31.2656" y="116.953" width="25.6" height="11.05" fill="white" />
+  <rect x="58.832" y="116.953" width="25.6" height="11.05" fill="white" />
+  <rect x="86.3984" y="116.953" width="25.6" height="11.05" fill="white" />
+</svg>
diff --git a/apps/website/src/assets/icons/redeem-65.svg b/apps/website/src/assets/icons/redeem-65.svg
new file mode 100644
index 0000000000..5b025d0e6f
--- /dev/null
+++ b/apps/website/src/assets/icons/redeem-65.svg
@@ -0,0 +1,68 @@
+<svg viewBox="0 0 116 130" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="116" height="129.92" transform="translate(0 0.0390625)" fill="#E2E2E2" />
+  <rect x="3.75" y="4.03906" width="20.5" height="8.16" fill="white" />
+  <rect x="25.75" y="4.03906" width="20.5" height="8.16" fill="white" />
+  <rect x="47.75" y="4.03906" width="20.5" height="8.16" fill="white" />
+  <rect x="69.75" y="4.03906" width="20.5" height="8.16" fill="white" />
+  <rect x="91.75" y="4.03906" width="20.5" height="8.16" fill="white" />
+  <rect x="3.75" y="13.6953" width="20.5" height="8.16" fill="white" />
+  <rect x="25.75" y="13.6953" width="20.5" height="8.16" fill="white" />
+  <rect x="47.75" y="13.6953" width="20.5" height="8.16" fill="white" />
+  <rect x="69.75" y="13.6953" width="20.5" height="8.16" fill="white" />
+  <rect x="91.75" y="13.6953" width="20.5" height="8.16" fill="white" />
+  <rect x="3.75" y="23.3594" width="20.5" height="8.16" fill="white" />
+  <rect x="25.75" y="23.3594" width="20.5" height="8.16" fill="white" />
+  <rect x="47.75" y="23.3594" width="20.5" height="8.16" fill="white" />
+  <rect x="69.75" y="23.3594" width="20.5" height="8.16" fill="white" />
+  <rect x="91.75" y="23.3594" width="20.5" height="8.16" fill="white" />
+  <rect x="3.75" y="33.0156" width="20.5" height="8.16" fill="white" />
+  <rect x="25.75" y="33.0156" width="20.5" height="8.16" fill="white" />
+  <rect x="47.75" y="33.0156" width="20.5" height="8.16" fill="white" />
+  <rect x="69.75" y="33.0156" width="20.5" height="8.16" fill="white" />
+  <rect x="91.75" y="33.0156" width="20.5" height="8.16" fill="white" />
+  <rect x="3.75" y="42.6797" width="20.5" height="8.16" fill="white" />
+  <rect x="25.75" y="42.6797" width="20.5" height="8.16" fill="white" />
+  <rect x="47.75" y="42.6797" width="20.5" height="8.16" fill="white" />
+  <rect x="69.75" y="42.6797" width="20.5" height="8.16" fill="white" />
+  <rect x="91.75" y="42.6797" width="20.5" height="8.16" fill="white" />
+  <rect x="3.75" y="52.3359" width="20.5" height="8.16" fill="white" />
+  <rect x="25.75" y="52.3359" width="20.5" height="8.16" fill="white" />
+  <rect x="47.75" y="52.3359" width="20.5" height="8.16" fill="white" />
+  <rect x="69.75" y="52.3359" width="20.5" height="8.16" fill="white" />
+  <rect x="91.75" y="52.3359" width="20.5" height="8.16" fill="white" />
+  <rect x="3.75" y="62" width="20.5" height="8.16" fill="white" />
+  <rect x="25.75" y="62" width="20.5" height="8.16" fill="white" />
+  <rect x="47.75" y="62" width="20.5" height="8.16" fill="white" />
+  <rect x="69.75" y="62" width="20.5" height="8.16" fill="white" />
+  <rect x="91.75" y="62" width="20.5" height="8.16" fill="white" />
+  <rect x="3.75" y="71.6562" width="20.5" height="8.16" fill="white" />
+  <rect x="25.75" y="71.6562" width="20.5" height="8.16" fill="white" />
+  <rect x="47.75" y="71.6562" width="20.5" height="8.16" fill="white" />
+  <rect x="69.75" y="71.6562" width="20.5" height="8.16" fill="white" />
+  <rect x="91.75" y="71.6562" width="20.5" height="8.16" fill="white" />
+  <rect x="3.75" y="81.3203" width="20.5" height="8.16" fill="white" />
+  <rect x="25.75" y="81.3203" width="20.5" height="8.16" fill="white" />
+  <rect x="47.75" y="81.3203" width="20.5" height="8.16" fill="white" />
+  <rect x="69.75" y="81.3203" width="20.5" height="8.16" fill="white" />
+  <rect x="91.75" y="81.3203" width="20.5" height="8.16" fill="white" />
+  <rect x="3.75" y="90.9766" width="20.5" height="8.16" fill="white" />
+  <rect x="25.75" y="90.9766" width="20.5" height="8.16" fill="white" />
+  <rect x="47.75" y="90.9766" width="20.5" height="8.16" fill="white" />
+  <rect x="69.75" y="90.9766" width="20.5" height="8.16" fill="white" />
+  <rect x="91.75" y="90.9766" width="20.5" height="8.16" fill="white" />
+  <rect x="3.75" y="100.641" width="20.5" height="8.16" fill="white" />
+  <rect x="25.75" y="100.641" width="20.5" height="8.16" fill="white" />
+  <rect x="47.75" y="100.641" width="20.5" height="8.16" fill="white" />
+  <rect x="69.75" y="100.641" width="20.5" height="8.16" fill="white" />
+  <rect x="91.75" y="100.641" width="20.5" height="8.16" fill="white" />
+  <rect x="3.75" y="110.297" width="20.5" height="8.16" fill="white" />
+  <rect x="25.75" y="110.297" width="20.5" height="8.16" fill="white" />
+  <rect x="47.75" y="110.297" width="20.5" height="8.16" fill="white" />
+  <rect x="69.75" y="110.297" width="20.5" height="8.16" fill="white" />
+  <rect x="91.75" y="110.297" width="20.5" height="8.16" fill="white" />
+  <rect x="3.75" y="119.961" width="20.5" height="8" fill="white" />
+  <rect x="25.75" y="119.961" width="20.5" height="8" fill="white" />
+  <rect x="47.75" y="119.961" width="20.5" height="8" fill="white" />
+  <rect x="69.75" y="119.961" width="20.5" height="8" fill="white" />
+  <rect x="91.75" y="119.961" width="20.5" height="8" fill="white" />
+</svg>
diff --git a/apps/website/src/routes/(default)/UserMenu.svelte b/apps/website/src/routes/(default)/UserMenu.svelte
index 5c7dd936d8..918589d56c 100644
--- a/apps/website/src/routes/(default)/UserMenu.svelte
+++ b/apps/website/src/routes/(default)/UserMenu.svelte
@@ -10,6 +10,7 @@
   import IconPigMoney from '~icons/tabler/pig-money';
   import IconPlanet from '~icons/tabler/planet';
   import IconPlus from '~icons/tabler/plus';
+  import IconScan from '~icons/tabler/scan';
   import { afterNavigate, goto } from '$app/navigation';
   import { fragment, graphql } from '$glitch';
   import { mixpanel } from '$lib/analytics';
@@ -338,6 +339,22 @@
               수익/출금
             </a>
 
+            <a
+              class={flex({
+                align: 'center',
+                gap: '6px',
+                borderBottomWidth: '1px',
+                borderBottomColor: 'gray.100',
+                padding: '14px',
+                fontSize: '14px',
+                width: 'full',
+              })}
+              href="/me/redeem"
+            >
+              <Icon icon={IconScan} />
+              리딤코드 등록
+            </a>
+
             <Link
               style={flex.raw({
                 align: 'center',
diff --git a/apps/website/src/routes/(default)/[space]/dashboard/+layout.svelte b/apps/website/src/routes/(default)/[space]/dashboard/+layout.svelte
index 0398bda238..85251e0048 100644
--- a/apps/website/src/routes/(default)/[space]/dashboard/+layout.svelte
+++ b/apps/website/src/routes/(default)/[space]/dashboard/+layout.svelte
@@ -2,7 +2,7 @@
   import IconBook2 from '~icons/tabler/book2';
   import IconNotes from '~icons/tabler/notes';
   import IconPlanet from '~icons/tabler/planet';
-  // import IconScan from '~icons/tabler/scan';
+  import IconScan from '~icons/tabler/scan';
   import IconUserX from '~icons/tabler/user-x';
   import { graphql } from '$glitch';
   import { flex } from '$styled-system/patterns';
@@ -73,7 +73,7 @@
     <NavItem icon={IconPlanet} pathname="/{$query.space.slug}/dashboard/settings" title="스페이스" />
     <NavItem icon={IconNotes} pathname="/{$query.space.slug}/dashboard/posts" title="포스트" />
     <NavItem icon={IconBook2} pathname="/{$query.space.slug}/dashboard/collections" title="컬렉션" />
-    <!-- <NavItem icon={IconScan} pathname="/{$query.space.slug}/dashboard/redeem" title="리딤코드" /> -->
+    <NavItem icon={IconScan} pathname="/{$query.space.slug}/dashboard/redeem" title="리딤코드" />
     <NavItem icon={IconUserX} pathname="/{$query.space.slug}/dashboard/subscribers/blocked" title="차단" />
   </nav>
 
diff --git a/apps/website/src/routes/(default)/[space]/dashboard/redeem/(create)/+page.svelte b/apps/website/src/routes/(default)/[space]/dashboard/redeem/(create)/+page.svelte
new file mode 100644
index 0000000000..d53d5d4feb
--- /dev/null
+++ b/apps/website/src/routes/(default)/[space]/dashboard/redeem/(create)/+page.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+  import IconChevronRight from '~icons/tabler/chevron-right';
+  import { graphql } from '$glitch';
+  import { Button, Helmet, Icon } from '$lib/components';
+  import { css } from '$styled-system/css';
+  import { flex } from '$styled-system/patterns';
+
+  $: query = graphql(`
+    query SpaceDashboardRedeemIndexPage_Query($slug: String!) {
+      space(slug: $slug) {
+        id
+        name
+      }
+    }
+  `);
+</script>
+
+<Helmet description={`${$query.space.name} 스페이스 리딤코드`} title={`리딤코드 | ${$query.space.name}`} />
+
+<div
+  class={css({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    paddingTop: { base: '60px', sm: '68px' },
+    paddingBottom: { base: '120px', sm: '140px' },
+    textAlign: 'center',
+  })}
+>
+  <h2
+    class={css({
+      marginBottom: { base: '6px', sm: '4px' },
+      fontSize: { base: '22px', sm: '30px' },
+      fontWeight: '[800]',
+    })}
+  >
+    종이책에 전자책 혜택을 더하다
+  </h2>
+
+  <p class={css({ fontSize: { base: '13px', sm: '14px' }, color: 'gray.600' })}>
+    리딤코드는 종이책과 유료포스트를 함께 이용할 수 있게 도와주는 서비스로
+    <br />
+    해당 코드를 스캔하거나 입력하면
+    <mark class={css({ color: 'brand.400' })}>글리프에서 발행한 유료포스트가 자동으로 구매 완료</mark>
+    되도록 설정할 수 있어요.
+    <br />
+    코드는 한 계정에만 등록할 수 있어 안전하게 관리가 가능해요.
+  </p>
+
+  <Button
+    style={flex.raw({ align: 'center', gap: '4px', marginTop: '40px', hideFrom: 'sm' })}
+    href="redeem/create"
+    size="sm"
+    type="link"
+    variant="gradation-fill"
+  >
+    리딤 코드 만들기
+    <Icon icon={IconChevronRight} />
+  </Button>
+  <Button
+    style={flex.raw({ align: 'center', gap: '4px', marginTop: '40px', hideBelow: 'sm' })}
+    href="redeem/create"
+    size="md"
+    type="link"
+    variant="gradation-fill"
+  >
+    리딤 코드 만들기
+    <Icon icon={IconChevronRight} size={20} />
+  </Button>
+</div>
diff --git a/apps/website/src/routes/(default)/[space]/dashboard/redeem/(create)/+page.ts b/apps/website/src/routes/(default)/[space]/dashboard/redeem/(create)/+page.ts
new file mode 100644
index 0000000000..a604736347
--- /dev/null
+++ b/apps/website/src/routes/(default)/[space]/dashboard/redeem/(create)/+page.ts
@@ -0,0 +1,5 @@
+import type { PageLoadEvent } from './$types';
+
+export const _SpaceDashboardRedeemIndexPage_QueryVariables = (event: PageLoadEvent) => {
+  return { slug: event.params.space };
+};
diff --git a/apps/website/src/routes/(default)/[space]/dashboard/redeem/(create)/complete/+page.ts b/apps/website/src/routes/(default)/[space]/dashboard/redeem/(create)/complete/+page.ts
new file mode 100644
index 0000000000..450c6f66a5
--- /dev/null
+++ b/apps/website/src/routes/(default)/[space]/dashboard/redeem/(create)/complete/+page.ts
@@ -0,0 +1,6 @@
+import qs from 'query-string';
+import type { PageLoadEvent } from './$types';
+
+export const _SpaceDashboardRedeemCompletePage_QueryVariables = (event: PageLoadEvent) => {
+  return { permalink: qs.parseUrl(event.url.search).query.p };
+};
diff --git a/apps/website/src/routes/(default)/[space]/dashboard/redeem/(create)/complete/+page@(default).svelte b/apps/website/src/routes/(default)/[space]/dashboard/redeem/(create)/complete/+page@(default).svelte
new file mode 100644
index 0000000000..b4cbb03e5f
--- /dev/null
+++ b/apps/website/src/routes/(default)/[space]/dashboard/redeem/(create)/complete/+page@(default).svelte
@@ -0,0 +1,353 @@
+<script lang="ts">
+  import dayjs from 'dayjs';
+  import IconArrowBarToDown from '~icons/tabler/arrow-bar-to-down';
+  import IconArrowLeft from '~icons/tabler/arrow-left';
+  import IconCoin from '~icons/tabler/coin';
+  import Redeem24 from '$assets/icons/redeem-24.svg?component';
+  import Redeem40 from '$assets/icons/redeem-40.svg?component';
+  import Redeem65 from '$assets/icons/redeem-65.svg?component';
+  import { graphql } from '$glitch';
+  import { Button, Helmet, Icon, Image, Modal } from '$lib/components';
+  import { Radio } from '$lib/components/forms';
+  import { comma } from '$lib/utils';
+  import { css } from '$styled-system/css';
+  import { flex } from '$styled-system/patterns';
+
+  let saveRedeemFileOpen = false;
+
+  $: query = graphql(`
+    query SpaceDashboardRedeemCompletePage_Query($permalink: String!) {
+      post(permalink: $permalink) {
+        id
+        permalink
+
+        space @_required {
+          id
+          slug
+          name
+        }
+
+        thumbnail {
+          id
+          ...Image_image
+        }
+
+        publishedRevision {
+          id
+          title
+          subtitle
+          price
+          createdAt
+        }
+      }
+    }
+  `);
+</script>
+
+<Helmet
+  description={`${$query.post.space.name} 스페이스 리딤코드 생성`}
+  title={`리딤코드 생성 | ${$query.post.space.name}`}
+/>
+
+<div
+  class={flex({
+    direction: 'column',
+    align: 'center',
+    backgroundColor: 'gray.50',
+    width: 'full',
+  })}
+>
+  <div class={css({ width: 'full', sm: { marginBottom: '80px', maxWidth: '860px' } })}>
+    <h1
+      class={flex({
+        align: 'center',
+        gap: '8px',
+        paddingX: '20px',
+        paddingY: '13px',
+        fontSize: '17px',
+        fontWeight: 'semibold',
+        hideFrom: 'sm',
+      })}
+    >
+      <a href="/{$query.post.space.slug}/dashboard/redeem">
+        <Icon icon={IconArrowLeft} size={24} />
+      </a>
+      리딤코드 만들기
+    </h1>
+
+    <div class={css({ smDown: { padding: '20px' }, sm: { marginTop: '40px', marginBottom: '32px' } })}>
+      <h2
+        class={css({
+          fontSize: { base: '17px', sm: '24px' },
+          fontWeight: { base: 'semibold', sm: 'bold' },
+        })}
+      >
+        리딤코드가 생성되었어요
+      </h2>
+
+      <p class={css({ fontSize: { base: '13px', sm: '14px' }, color: { base: 'gray.500', sm: 'gray.600' } })}>
+        리딤코드를 개별적으로 하나씩 다운로드하거나 라벨 용지로 다운로드해 스티커로 인쇄할 수 있어요.
+        <br />
+        또한 [관리] 페이지에서 해당 코드를 자세히 확인할 수 있어요
+      </p>
+    </div>
+
+    <div
+      class={css({
+        smDown: { paddingTop: '20px', paddingX: '20px', backgroundColor: 'gray.0' },
+      })}
+    >
+      <div
+        class={css({ backgroundColor: 'gray.0', sm: { padding: '14px', borderWidth: '1px', borderColor: 'gray.100' } })}
+      >
+        <div
+          class={flex({
+            align: 'center',
+            gap: { base: '8px', sm: '12px' },
+            marginBottom: '16px',
+            borderBottomWidth: '1px',
+            borderBottomColor: 'gray.100',
+            paddingBottom: '16px',
+          })}
+        >
+          <Image
+            style={css.raw({ flex: 'none', width: '102px', aspectRatio: '16/10', objectFit: 'cover' })}
+            $image={$query.post.thumbnail}
+            placeholder
+            size={96}
+          />
+
+          <div class={css({ width: 'full', truncate: true })}>
+            <h3 class={css({ fontSize: '14px', fontWeight: 'semibold', color: 'gray.800', truncate: true })}>
+              {$query.post.publishedRevision?.title ?? '(제목 없음)'}
+            </h3>
+            <h4 class={css({ fontSize: '13px', color: 'gray.600', height: '19px', truncate: true })}>
+              {$query.post.publishedRevision?.subtitle ?? ''}
+            </h4>
+
+            <div
+              class={flex({
+                align: 'center',
+                gap: '8px',
+                marginTop: { base: '3px', sm: '6px' },
+                fontSize: '12px',
+                color: 'gray.500',
+              })}
+            >
+              <div class={flex({ align: 'center', gap: '2px' })}>
+                <Icon icon={IconCoin} />
+                <span>{comma($query.post.publishedRevision?.price ?? 0)}원</span>
+              </div>
+
+              <hr class={css({ border: 'none', width: '1px', height: '12px', backgroundColor: 'gray.100' })} />
+
+              <time datetime={$query.post.publishedRevision?.createdAt}>
+                {dayjs($query.post.publishedRevision?.createdAt).formatAsDate()}
+              </time>
+            </div>
+          </div>
+        </div>
+
+        <dl class={flex({ direction: 'column', gap: '2px' })}>
+          <div class={flex({ align: 'center', gap: '12px', fontSize: '13px' })}>
+            <dt class={css({ fontWeight: 'semibold', color: 'gray.800', width: '46px' })}>발급갯수</dt>
+            <dd class={css({ color: 'gray.600' })}>15개</dd>
+          </div>
+          <div class={flex({ align: 'center', gap: '12px', fontSize: '13px' })}>
+            <dt class={css({ fontWeight: 'semibold', color: 'gray.800', width: '46px' })}>생성일</dt>
+            <dd class={css({ color: 'gray.600' })}>2024.05.24. 11:00</dd>
+          </div>
+          <div class={flex({ align: 'center', gap: '12px', fontSize: '13px' })}>
+            <dt class={css({ fontWeight: 'semibold', color: 'gray.800', width: '46px' })}>만료일</dt>
+            <dd class={css({ color: 'gray.600' })}>2025.05.24. 11:00</dd>
+          </div>
+        </dl>
+
+        <p class={css({ marginTop: '8px', fontSize: '13px', color: 'gray.600' })}>리딤코드 설명 리딤코드 설명</p>
+      </div>
+
+      <div
+        class={flex({
+          align: 'center',
+          justify: { sm: 'flex-end' },
+          gap: '8px',
+          marginTop: { base: '20px', sm: '8px' },
+          smDown: { paddingBottom: '34px' },
+        })}
+      >
+        <Button
+          style={css.raw({ backgroundColor: 'gray.0', width: 'full' })}
+          href="/{$query.post.space.slug}/dashboard/redeem/manage"
+          type="link"
+          variant="gray-outline"
+        >
+          관리 페이지로 이동
+        </Button>
+        <Button style={css.raw({ width: 'full' })} variant="brand-fill" on:click={() => (saveRedeemFileOpen = true)}>
+          전체 파일로 저장
+        </Button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<hr
+  class={css({
+    border: 'none',
+    width: 'full',
+    height: { base: '16px', sm: '1px' },
+    backgroundColor: { base: 'gray.50', sm: 'gray.100' },
+  })}
+/>
+
+<div
+  class={flex({
+    direction: 'column',
+    align: 'center',
+    grow: '1',
+    paddingTop: { base: '34px', sm: '40px' },
+    paddingBottom: '120px',
+    width: 'full',
+    smDown: { paddingX: '20px' },
+  })}
+>
+  <div class={css({ width: 'full', sm: { maxWidth: '860px' } })}>
+    <h2 class={css({ fontSize: '18px', fontWeight: 'semibold' })}>개별 다운로드</h2>
+    <p class={css({ marginTop: '2px', fontSize: '13px', color: 'gray.500' })}>
+      다운로드할 확장자를 선택해주세요. 해당 파일은 200x200크기로 다운로드됩니다
+    </p>
+  </div>
+
+  <ul
+    class={flex({
+      direction: 'column',
+      gap: '8px',
+      marginTop: { base: '34px', sm: '16px' },
+      width: 'full',
+      sm: { maxWidth: '860px' },
+    })}
+  >
+    <li class={css({ borderWidth: '1px', borderColor: 'gray.100', padding: '14px' })}>
+      <div class={css({ marginBottom: '8px', backgroundColor: 'gray.200', size: '60px' })} />
+
+      <div
+        class={flex({
+          direction: { smDown: 'column' },
+          gap: '16px',
+          sm: { alignItems: 'flex-end', justifyContent: 'space-between' },
+        })}
+      >
+        <dl>
+          <div class={flex({ align: 'center', gap: '12px', fontSize: '13px' })}>
+            <dt class={css({ fontWeight: 'semibold', color: 'gray.800', width: '46px' })}>번호</dt>
+            <dd class={css({ color: 'gray.600' })}>2Q24SO3LA2412P</dd>
+          </div>
+          <div class={flex({ align: 'center', gap: '12px', fontSize: '13px' })}>
+            <dt class={css({ fontWeight: 'semibold', color: 'gray.800', width: '46px' })}>만료일</dt>
+            <dd class={css({ color: 'gray.600' })}>2025.05.24 11:00</dd>
+          </div>
+          <div class={flex({ align: 'center', gap: '12px', fontSize: '13px' })}>
+            <dt class={css({ fontWeight: 'semibold', color: 'gray.800', width: '46px' })}>사용여부</dt>
+            <dd class={css({ color: 'gray.600' }, true && { fontWeight: 'medium', color: 'brand.400' })}>사용가능</dd>
+          </div>
+        </dl>
+
+        <div class={flex({ align: 'center', gap: '8px' })}>
+          <Button
+            style={flex.raw({ align: 'center', justify: 'center', gap: '4px', width: { base: 'full', sm: 'fit' } })}
+            size="sm"
+            variant="gray-outline"
+          >
+            <Icon icon={IconArrowBarToDown} />
+            PNG
+          </Button>
+          <Button
+            style={flex.raw({ align: 'center', justify: 'center', gap: '4px', width: { base: 'full', sm: 'fit' } })}
+            size="sm"
+            variant="gray-outline"
+          >
+            <Icon icon={IconArrowBarToDown} />
+            SVG
+          </Button>
+          <Button
+            style={flex.raw({ align: 'center', justify: 'center', gap: '4px', width: { base: 'full', sm: 'fit' } })}
+            size="sm"
+            variant="gray-outline"
+          >
+            <Icon icon={IconArrowBarToDown} />
+            PDF
+          </Button>
+        </div>
+      </div>
+    </li>
+  </ul>
+</div>
+
+<Modal bind:open={saveRedeemFileOpen}>
+  <svelte:fragment slot="title">리딤 코드 전체 파일로 저장</svelte:fragment>
+
+  <div class={flex({ align: 'center', gap: '16px' })}>
+    <Radio variant="brand">PNG</Radio>
+    <Radio variant="brand">PDF</Radio>
+    <Radio variant="brand">SVG</Radio>
+  </div>
+
+  <div class={flex({ align: 'center', justify: 'flex-start', gap: '16px', marginTop: '24px' })}>
+    <div class={flex({ direction: 'column', position: 'relative', width: 'full', maxWidth: '116px' })}>
+      <Redeem24 />
+      <p
+        class={css({
+          paddingY: '[2.5px]',
+          fontSize: '13px',
+          fontWeight: 'medium',
+          color: 'gray.0',
+          textAlign: 'center',
+          backgroundColor: 'brand.400',
+        })}
+      >
+        24칸
+      </p>
+      <div
+        class={css({ position: 'absolute', top: '0', size: 'full', borderWidth: '2px', borderColor: 'brand.400' })}
+      />
+    </div>
+    <div class={flex({ direction: 'column', position: 'relative', width: 'full', maxWidth: '116px' })}>
+      <Redeem40 />
+      <p
+        class={css({
+          paddingY: '[2.5px]',
+          fontSize: '13px',
+          fontWeight: 'medium',
+          color: 'gray.0',
+          textAlign: 'center',
+          backgroundColor: 'brand.400',
+        })}
+      >
+        40칸
+      </p>
+      <div
+        class={css({ position: 'absolute', top: '0', size: 'full', borderWidth: '2px', borderColor: 'brand.400' })}
+      />
+    </div>
+    <div class={flex({ direction: 'column', position: 'relative', width: 'full', maxWidth: '116px' })}>
+      <Redeem65 />
+      <p
+        class={css({
+          paddingY: '[2.5px]',
+          fontSize: '13px',
+          fontWeight: 'medium',
+          color: 'gray.0',
+          textAlign: 'center',
+          backgroundColor: 'brand.400',
+        })}
+      >
+        65칸
+      </p>
+      <div
+        class={css({ position: 'absolute', top: '0', size: 'full', borderWidth: '2px', borderColor: 'brand.400' })}
+      />
+    </div>
+  </div>
+
+  <Button slot="action" style={css.raw({ width: 'full' })} size="lg" variant="gradation-fill">다운로드</Button>
+</Modal>
diff --git a/apps/website/src/routes/(default)/[space]/dashboard/redeem/(create)/create/+page.ts b/apps/website/src/routes/(default)/[space]/dashboard/redeem/(create)/create/+page.ts
new file mode 100644
index 0000000000..4ed28069bb
--- /dev/null
+++ b/apps/website/src/routes/(default)/[space]/dashboard/redeem/(create)/create/+page.ts
@@ -0,0 +1,5 @@
+import type { PageLoadEvent } from './$types';
+
+export const _SpaceDashboardRedeemCreatePage_QueryVariables = (event: PageLoadEvent) => {
+  return { slug: event.params.space };
+};
diff --git a/apps/website/src/routes/(default)/[space]/dashboard/redeem/(create)/create/+page@(default).svelte b/apps/website/src/routes/(default)/[space]/dashboard/redeem/(create)/create/+page@(default).svelte
new file mode 100644
index 0000000000..259f5ba0fa
--- /dev/null
+++ b/apps/website/src/routes/(default)/[space]/dashboard/redeem/(create)/create/+page@(default).svelte
@@ -0,0 +1,206 @@
+<script lang="ts">
+  import dayjs from 'dayjs';
+  import IconSearch from '~icons/glyph/search';
+  import IconArrowLeft from '~icons/tabler/arrow-left';
+  import IconCoin from '~icons/tabler/coin';
+  import { graphql } from '$glitch';
+  import { Button, Helmet, Icon, Image } from '$lib/components';
+  import { Radio, TextInput } from '$lib/components/forms';
+  import { comma } from '$lib/utils';
+  import { css } from '$styled-system/css';
+  import { center, flex } from '$styled-system/patterns';
+
+  $: query = graphql(`
+    query SpaceDashboardRedeemCreatePage_Query($slug: String!) {
+      space(slug: $slug) {
+        id
+        slug
+        name
+
+        posts(priceCategory: PAID) {
+          id
+          permalink
+
+          thumbnail {
+            id
+            ...Image_image
+          }
+
+          publishedRevision {
+            id
+            title
+            subtitle
+            price
+            createdAt
+          }
+        }
+      }
+    }
+  `);
+
+  let selectedPost: (typeof $query.space.posts)[number] | null = null;
+  let keyword = '';
+</script>
+
+<Helmet description={`${$query.space.name} 스페이스 리딤코드 생성`} title={`리딤코드 생성 | ${$query.space.name}`} />
+
+<div class={flex({ direction: 'column', align: 'center', grow: '1', backgroundColor: 'gray.50', width: 'full' })}>
+  <div class={css({ width: 'full', sm: { maxWidth: '860px' } })}>
+    <h1
+      class={flex({
+        align: 'center',
+        gap: '8px',
+        fontSize: { base: '17px', sm: '24px' },
+        fontWeight: { base: 'semibold', sm: 'bold' },
+        smDown: { paddingX: '20px', paddingY: '13px' },
+        sm: { marginTop: '40px', marginBottom: '34px' },
+      })}
+    >
+      <a href="/{$query.space.slug}/dashboard/redeem">
+        <Icon style={css.raw({ hideFrom: 'sm' })} icon={IconArrowLeft} size={24} />
+        <Icon style={css.raw({ hideBelow: 'sm' })} icon={IconArrowLeft} size={28} />
+      </a>
+      리딤코드 만들기
+    </h1>
+
+    <div
+      class={css({
+        paddingBottom: { base: '60px', sm: '120px' },
+        smDown: { paddingTop: '20px', paddingX: '20px', backgroundColor: 'gray.0' },
+      })}
+    >
+      <div
+        class={css({ backgroundColor: 'gray.0', sm: { padding: '32px', borderWidth: '1px', borderColor: 'gray.150' } })}
+      >
+        <div class={flex({ align: 'center', gap: '6px' })}>
+          <div
+            class={center({
+              size: '18px',
+              fontSize: '11px',
+              fontWeight: 'medium',
+              color: 'gray.500',
+              backgroundColor: 'gray.100',
+            })}
+          >
+            1
+          </div>
+          <h2 class={css({ fontSize: { sm: '18px' }, fontWeight: 'semibold' })}>유료 포스트 선택</h2>
+        </div>
+
+        <p class={css({ marginTop: '2px', marginBottom: '24px', fontSize: '13px', color: 'gray.500' })}>
+          리딤코드는 유료 포스트만 생성할 수 있어요
+        </p>
+
+        <TextInput
+          style={css.raw({ sm: { maxWidth: '340px' } })}
+          placeholder="유료 포스트를 검색해주세요"
+          size="sm"
+          bind:value={keyword}
+        >
+          <Icon slot="left-icon" style={css.raw({ color: 'gray.400' })} icon={IconSearch} />
+        </TextInput>
+
+        <ul class={css({ marginTop: '8px' })}>
+          {#each $query.space.posts.filter((post) => post.publishedRevision?.title?.includes(keyword) || post.publishedRevision?.subtitle?.includes(keyword)) as post (post.id)}
+            <li class={css({ '& + &': { borderTopWidth: '1px', borderColor: 'gray.50' } })}>
+              <Radio
+                style={css.raw(
+                  { paddingY: '16px', paddingLeft: '12px' },
+                  selectedPost === post && { backgroundColor: 'gray.50' },
+                )}
+                checked={selectedPost === post}
+                size="sm"
+                variant="brand"
+                on:change={() => {
+                  selectedPost = post;
+                }}
+              >
+                <div class={flex({ align: 'center', gap: '8px', marginLeft: '12px' })}>
+                  <Image
+                    style={css.raw({ flex: 'none', width: '88px', aspectRatio: '16/10', objectFit: 'cover' })}
+                    $image={post.thumbnail}
+                    placeholder
+                    size={96}
+                  />
+
+                  <div class={css({ width: 'full', truncate: true })}>
+                    <h3 class={css({ fontSize: '14px', fontWeight: 'semibold', color: 'gray.800', truncate: true })}>
+                      {post.publishedRevision?.title ?? '(제목 없음)'}
+                    </h3>
+                    <h4 class={css({ fontSize: '13px', color: 'gray.600', height: '19px', truncate: true })}>
+                      {post.publishedRevision?.subtitle ?? ''}
+                    </h4>
+
+                    <div
+                      class={flex({
+                        align: 'center',
+                        gap: '8px',
+                        marginTop: '4px',
+                        fontSize: '12px',
+                        color: 'gray.400',
+                      })}
+                    >
+                      <div class={flex({ align: 'center', gap: '2px' })}>
+                        <Icon icon={IconCoin} />
+                        <span>{comma(post.publishedRevision?.price ?? 0)}원</span>
+                      </div>
+
+                      <hr class={css({ border: 'none', width: '1px', height: '12px', backgroundColor: 'gray.100' })} />
+
+                      <time datetime={post.publishedRevision?.createdAt}>
+                        {dayjs(post.publishedRevision?.createdAt).formatAsDate()}
+                      </time>
+                    </div>
+                  </div>
+                </div>
+              </Radio>
+            </li>
+          {:else}
+            <li class={css({ paddingY: '77px', fontSize: '15px', color: 'gray.500', textAlign: 'center' })}>
+              발행한 유료포스트가 없어요
+            </li>
+          {/each}
+        </ul>
+      </div>
+
+      <div
+        class={flex({
+          align: 'center',
+          justify: { sm: 'flex-end' },
+          gap: '8px',
+          marginTop: '20px',
+          smDown: { position: 'sticky', bottom: '0', paddingY: '20px', backgroundColor: 'gray.0', zIndex: '1' },
+        })}
+      >
+        {#if $query.space.posts.length > 0}
+          <Button
+            style={css.raw({ backgroundColor: 'gray.0', width: 'full', sm: { maxWidth: '160px' } })}
+            href="/{$query.space.slug}/dashboard/redeem"
+            type="link"
+            variant="gray-outline"
+          >
+            취소
+          </Button>
+          <Button
+            style={css.raw({ width: 'full', sm: { maxWidth: '160px' } })}
+            disabled={!selectedPost}
+            href="/{$query.space.slug}/dashboard/redeem/next?p={selectedPost?.permalink}"
+            type="link"
+            variant="brand-fill"
+          >
+            다음
+          </Button>
+        {:else}
+          <Button
+            style={css.raw({ backgroundColor: 'gray.0', width: 'full', sm: { maxWidth: '160px' } })}
+            href="/{$query.space.slug}/dashboard/redeem"
+            type="link"
+            variant="gray-outline"
+          >
+            돌아가기
+          </Button>
+        {/if}
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/apps/website/src/routes/(default)/[space]/dashboard/redeem/(create)/next/+page.ts b/apps/website/src/routes/(default)/[space]/dashboard/redeem/(create)/next/+page.ts
new file mode 100644
index 0000000000..13c074bc42
--- /dev/null
+++ b/apps/website/src/routes/(default)/[space]/dashboard/redeem/(create)/next/+page.ts
@@ -0,0 +1,6 @@
+import qs from 'query-string';
+import type { PageLoadEvent } from './$types';
+
+export const _SpaceDashboardRedeemNextPage_QueryVariables = (event: PageLoadEvent) => {
+  return { permalink: qs.parseUrl(event.url.search).query.p };
+};
diff --git a/apps/website/src/routes/(default)/[space]/dashboard/redeem/(create)/next/+page@(default).svelte b/apps/website/src/routes/(default)/[space]/dashboard/redeem/(create)/next/+page@(default).svelte
new file mode 100644
index 0000000000..0e9e9f313a
--- /dev/null
+++ b/apps/website/src/routes/(default)/[space]/dashboard/redeem/(create)/next/+page@(default).svelte
@@ -0,0 +1,257 @@
+<script lang="ts">
+  import dayjs from 'dayjs';
+  import IconArrowLeft from '~icons/tabler/arrow-left';
+  import IconCoin from '~icons/tabler/coin';
+  import IconMinus from '~icons/tabler/minus';
+  import IconPlus from '~icons/tabler/plus';
+  import { graphql } from '$glitch';
+  import { Button, Helmet, Icon, Image } from '$lib/components';
+  import { TextArea } from '$lib/components/forms';
+  import { comma } from '$lib/utils';
+  import { css } from '$styled-system/css';
+  import { center, flex } from '$styled-system/patterns';
+
+  let amount = 1;
+
+  $: query = graphql(`
+    query SpaceDashboardRedeemNextPage_Query($permalink: String!) {
+      post(permalink: $permalink) {
+        id
+        permalink
+
+        space @_required {
+          id
+          slug
+          name
+        }
+
+        thumbnail {
+          id
+          ...Image_image
+        }
+
+        publishedRevision {
+          id
+          title
+          subtitle
+          price
+          createdAt
+        }
+      }
+    }
+  `);
+</script>
+
+<Helmet
+  description={`${$query.post.space.name} 스페이스 리딤코드 생성`}
+  title={`리딤코드 생성 | ${$query.post.space.name}`}
+/>
+
+<div class={flex({ direction: 'column', align: 'center', grow: '1', backgroundColor: 'gray.50', width: 'full' })}>
+  <div class={css({ width: 'full', sm: { maxWidth: '860px' } })}>
+    <h1
+      class={flex({
+        align: 'center',
+        gap: '8px',
+        fontSize: { base: '17px', sm: '24px' },
+        fontWeight: { base: 'semibold', sm: 'bold' },
+        smDown: { paddingX: '20px', paddingY: '13px' },
+        sm: { marginTop: '40px', marginBottom: '34px' },
+      })}
+    >
+      <a href="/{$query.post.space.slug}/dashboard/redeem">
+        <Icon style={css.raw({ hideFrom: 'sm' })} icon={IconArrowLeft} size={24} />
+        <Icon style={css.raw({ hideBelow: 'sm' })} icon={IconArrowLeft} size={28} />
+      </a>
+      리딤코드 만들기
+    </h1>
+
+    <div
+      class={flex({
+        align: 'center',
+        gap: { base: '8px', sm: '12px' },
+        marginBottom: { base: '24px', sm: '20px' },
+        smDown: { marginTop: '16px', paddingX: '20px' },
+      })}
+    >
+      <Image
+        style={css.raw({
+          flex: 'none',
+          width: { base: '88px', sm: '102px' },
+          aspectRatio: '16/10',
+          objectFit: 'cover',
+        })}
+        $image={$query.post.thumbnail}
+        placeholder
+        size={96}
+      />
+
+      <div class={css({ width: 'full', truncate: true })}>
+        <h3 class={css({ fontSize: '14px', fontWeight: 'semibold', color: 'gray.800', truncate: true })}>
+          {$query.post.publishedRevision?.title ?? '(제목 없음)'}
+        </h3>
+        <h4 class={css({ fontSize: '13px', color: 'gray.600', height: '19px', truncate: true })}>
+          {$query.post.publishedRevision?.subtitle ?? ''}
+        </h4>
+
+        <div
+          class={flex({
+            align: 'center',
+            gap: '8px',
+            marginTop: '6px',
+            fontSize: '12px',
+            color: 'gray.500',
+          })}
+        >
+          <div class={flex({ align: 'center', gap: '2px' })}>
+            <Icon icon={IconCoin} />
+            <span>{comma($query.post.publishedRevision?.price ?? 0)}원</span>
+          </div>
+
+          <hr class={css({ border: 'none', width: '1px', height: '12px', backgroundColor: 'gray.100' })} />
+
+          <time datetime={$query.post.publishedRevision?.createdAt}>
+            {dayjs($query.post.publishedRevision?.createdAt).formatAsDate()}
+          </time>
+        </div>
+      </div>
+    </div>
+
+    <div
+      class={css({
+        paddingBottom: { base: '60px', sm: '120px' },
+        smDown: { paddingTop: '20px', paddingX: '20px', backgroundColor: 'gray.0' },
+      })}
+    >
+      <div
+        class={css({ backgroundColor: 'gray.0', sm: { padding: '32px', borderWidth: '1px', borderColor: 'gray.150' } })}
+      >
+        <div class={flex({ align: 'center', gap: '6px' })}>
+          <div
+            class={center({
+              size: '18px',
+              fontSize: '11px',
+              fontWeight: 'medium',
+              color: 'gray.500',
+              backgroundColor: 'gray.100',
+            })}
+          >
+            2
+          </div>
+          <h2 class={css({ fontSize: { sm: '18px' }, fontWeight: 'semibold' })}>리딤코드 설명</h2>
+          <span class={css({ marginLeft: '-4px', fontSize: '12px', color: 'gray.500' })}>(선택)</span>
+        </div>
+
+        <TextArea
+          style={css.raw({ marginTop: { base: '8px', sm: '16px' } })}
+          placeholder="리딤코드를 간단하게 설명해주세요. 해당 설명은 자신만 볼 수 있어요"
+          rows={4}
+        />
+      </div>
+
+      <div
+        class={css({
+          marginTop: { base: '40px', sm: '8px' },
+          backgroundColor: 'gray.0',
+          sm: { padding: '32px', borderWidth: '1px', borderColor: 'gray.150' },
+        })}
+      >
+        <div class={flex({ align: 'center', gap: '6px' })}>
+          <div
+            class={center({
+              size: '18px',
+              fontSize: '11px',
+              fontWeight: 'medium',
+              color: 'gray.500',
+              backgroundColor: 'gray.100',
+            })}
+          >
+            3
+          </div>
+          <h2 class={css({ fontSize: { sm: '18px' }, fontWeight: 'semibold' })}>발급갯수</h2>
+        </div>
+        <p class={css({ marginTop: '2px', fontSize: '13px', color: 'gray.500' })}>
+          리딤 코드는 한 계정에만 등록할 수 있으며, 중복 사용이 불가능합니다. 책을 읽을 독자 수만큼 코드를 발급해주세요
+        </p>
+
+        <div
+          class={flex({
+            align: 'center',
+            marginTop: '20px',
+            borderWidth: '1px',
+            borderColor: 'gray.200',
+            width: 'fit',
+          })}
+        >
+          <button
+            class={css({ padding: '7px', backgroundColor: 'gray.50', _disabled: { color: 'gray.300' } })}
+            disabled={amount === 1}
+            type="button"
+            on:click={() => {
+              if (amount > 1) amount -= 1;
+            }}
+          >
+            <Icon icon={IconMinus} size={20} />
+          </button>
+
+          <input
+            class={css({
+              paddingY: '7px',
+              paddingX: '8px',
+              fontSize: '14px',
+              fontWeight: 'medium',
+              textAlign: 'center',
+              width: '56px',
+            })}
+            inputmode="numeric"
+            min={1}
+            type="text"
+            bind:value={amount}
+          />
+
+          <button
+            class={css({ padding: '7px', backgroundColor: 'gray.50', _disabled: { color: 'gray.300' } })}
+            type="button"
+            on:click={() => (amount += 1)}
+          >
+            <Icon icon={IconPlus} size={20} />
+          </button>
+        </div>
+
+        <div class={css({ marginTop: '12px', padding: '14px', backgroundColor: '[#f4f4f4]' })}>
+          <p class={css({ fontSize: '13px', fontWeight: 'semibold', color: 'gray.800' })}>유효기간</p>
+          <p class={css({ marginTop: '2px', fontSize: '13px', color: 'gray.600' })}>
+            리딤코드는 1년의 유효기간이 있으며, 해당 기간이 지나면 코드를 입력할 수 없어요
+          </p>
+        </div>
+      </div>
+
+      <div
+        class={flex({
+          align: 'center',
+          justify: { sm: 'flex-end' },
+          gap: '8px',
+          marginTop: '20px',
+          smDown: { position: 'sticky', bottom: '0', paddingY: '20px', backgroundColor: 'gray.0', zIndex: '1' },
+        })}
+      >
+        <Button
+          style={css.raw({ backgroundColor: 'gray.0', width: 'full', sm: { maxWidth: '160px' } })}
+          href="/{$query.post.space.slug}/dashboard/redeem/create"
+          type="link"
+          variant="gray-outline"
+        >
+          포스트 다시 선택
+        </Button>
+        <Button
+          style={css.raw({ width: 'full', sm: { maxWidth: '160px' } })}
+          href="/{$query.post.space.slug}/dashboard/redeem/complete?p={$query.post.permalink}"
+          type="link"
+          variant="brand-fill"
+        >
+          리딤코드 만들기
+        </Button>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/apps/website/src/routes/(default)/[space]/dashboard/redeem/+layout.svelte b/apps/website/src/routes/(default)/[space]/dashboard/redeem/+layout.svelte
new file mode 100644
index 0000000000..29ec722f3c
--- /dev/null
+++ b/apps/website/src/routes/(default)/[space]/dashboard/redeem/+layout.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { graphql } from '$glitch';
+  import { TabHead, TabHeadItem } from '$lib/components/tab';
+  import { css } from '$styled-system/css';
+
+  $: query = graphql(`
+    query SpaceDashboardRedeemLayout_Query($slug: String!) {
+      space(slug: $slug) {
+        id
+        slug
+      }
+    }
+  `);
+</script>
+
+<h1 class={css({ marginBottom: '12px', fontSize: '24px', fontWeight: 'bold', hideBelow: 'sm' })}>리딤코드</h1>
+
+<TabHead style={css.raw({ gap: '28px', smDown: { marginTop: '-20px', paddingY: '12px' }, sm: { paddingBottom: '0' } })}>
+  <TabHeadItem id={1} pathname="/{$query.space.slug}/dashboard/redeem">생성</TabHeadItem>
+  <TabHeadItem id={2} pathname="/{$query.space.slug}/dashboard/redeem/manage">관리</TabHeadItem>
+</TabHead>
+
+<slot />
diff --git a/apps/website/src/routes/(default)/[space]/dashboard/redeem/+layout.ts b/apps/website/src/routes/(default)/[space]/dashboard/redeem/+layout.ts
new file mode 100644
index 0000000000..9c22e44a18
--- /dev/null
+++ b/apps/website/src/routes/(default)/[space]/dashboard/redeem/+layout.ts
@@ -0,0 +1,5 @@
+import type { LayoutLoadEvent } from './$types';
+
+export const _SpaceDashboardRedeemLayout_QueryVariables = (event: LayoutLoadEvent) => {
+  return { slug: event.params.space };
+};
diff --git a/apps/website/src/routes/(default)/[space]/dashboard/redeem/+page.svelte b/apps/website/src/routes/(default)/[space]/dashboard/redeem/+page.svelte
deleted file mode 100644
index 45761f345e..0000000000
--- a/apps/website/src/routes/(default)/[space]/dashboard/redeem/+page.svelte
+++ /dev/null
@@ -1 +0,0 @@
-리딤코드 생성
diff --git a/apps/website/src/routes/(default)/[space]/dashboard/redeem/manage/+page.svelte b/apps/website/src/routes/(default)/[space]/dashboard/redeem/manage/+page.svelte
new file mode 100644
index 0000000000..ab3bae1c73
--- /dev/null
+++ b/apps/website/src/routes/(default)/[space]/dashboard/redeem/manage/+page.svelte
@@ -0,0 +1,117 @@
+<script lang="ts">
+  import IconChevronRight from '~icons/tabler/chevron-right';
+  import IconCoin from '~icons/tabler/coin';
+  import { graphql } from '$glitch';
+  import { Button, Icon } from '$lib/components';
+  import { comma } from '$lib/utils';
+  import { css } from '$styled-system/css';
+  import { flex } from '$styled-system/patterns';
+
+  $: query = graphql(`
+    query SpaceDashboardRedeemManagePage_Query($slug: String!) {
+      space(slug: $slug) {
+        id
+        slug
+
+        posts {
+          id
+          permalink
+        }
+      }
+    }
+  `);
+</script>
+
+<p
+  class={css({
+    marginTop: { base: '16px', sm: '32px' },
+    marginBottom: { base: '8px', sm: '16px' },
+    fontSize: '15px',
+    color: 'gray.500',
+  })}
+>
+  총 4개의 리딤코드
+</p>
+
+<ul class={flex({ direction: 'column', gap: '16px' })}>
+  {#each $query.space.posts as post (post.id)}
+    <li
+      class={css({
+        borderWidth: '1px',
+        borderColor: 'gray.100',
+        paddingX: '14px',
+        paddingY: { base: '15px', sm: '14px' },
+      })}
+    >
+      <a
+        class={flex({ align: 'center', justify: 'space-between', width: 'full', truncate: true })}
+        href="/{$query.space.slug}/dashboard/redeem/manage/{post.permalink}"
+      >
+        <div class={flex({ align: 'center', gap: { base: '8px', sm: '12px' }, width: 'full', truncate: true })}>
+          <div
+            class={css({
+              flex: 'none',
+              width: { base: '88px', sm: '102px' },
+              aspectRatio: '16/10',
+              objectFit: 'cover',
+              backgroundColor: 'gray.200',
+            })}
+          />
+
+          <div class={css({ truncate: true })}>
+            <h3 class={css({ fontSize: '14px', fontWeight: 'semibold', color: 'gray.800', truncate: true })}>
+              포스트 제목
+            </h3>
+            <h4 class={css({ fontSize: '13px', color: 'gray.600', height: '19px', truncate: true })}>포스트 부제목</h4>
+            <div
+              class={flex({
+                align: 'center',
+                gap: '8px',
+                marginTop: { base: '3px', sm: '6px' },
+                fontSize: '12px',
+                color: 'gray.500',
+              })}
+            >
+              <div class={flex({ align: 'center', gap: '2px' })}>
+                <Icon icon={IconCoin} />
+                <span>{comma(2000)}원</span>
+              </div>
+
+              <hr class={css({ border: 'none', width: '1px', height: '12px', backgroundColor: 'gray.100' })} />
+
+              <time datetime="2024.01.01">2024.01.01</time>
+            </div>
+          </div>
+        </div>
+        <Icon style={css.raw({ color: 'gray.400', hideBelow: 'sm' })} icon={IconChevronRight} size={24} />
+      </a>
+      <hr class={css({ marginY: '16px', border: 'none', width: 'full', height: '1px', backgroundColor: 'gray.100' })} />
+
+      <dl class={flex({ direction: 'column', gap: '2px' })}>
+        <div class={flex({ align: 'center', gap: '12px', fontSize: '13px' })}>
+          <dt class={css({ fontWeight: 'semibold', color: 'gray.800', width: '46px' })}>사용가능</dt>
+          <dd class={css({ color: 'gray.600' })}>3/15</dd>
+        </div>
+        <div class={flex({ align: 'center', gap: '12px', fontSize: '13px' })}>
+          <dt class={css({ fontWeight: 'semibold', color: 'gray.800', width: '46px' })}>생성일</dt>
+          <dd class={css({ color: 'gray.600' })}>2024.05.24. 11:00</dd>
+        </div>
+        <div class={flex({ align: 'center', gap: '12px', fontSize: '13px' })}>
+          <dt class={css({ fontWeight: 'semibold', color: 'gray.800', width: '46px' })}>만료일</dt>
+          <dd class={css({ color: 'gray.600' })}>2025.05.24. 11:00</dd>
+        </div>
+      </dl>
+
+      <p class={css({ marginTop: '8px', fontSize: '13px', color: 'gray.600' })}>설명설명</p>
+
+      <Button
+        style={css.raw({ display: 'block', marginTop: '16px', width: 'full', hideFrom: 'sm' })}
+        href="/{$query.space.slug}/dashboard/redeem/manage/{post.permalink}"
+        type="link"
+        variant="gray-outline"
+      >
+        세부사항 보기
+      </Button>
+    </li>
+  {/each}
+</ul>
diff --git a/apps/website/src/routes/(default)/[space]/dashboard/redeem/manage/+page.ts b/apps/website/src/routes/(default)/[space]/dashboard/redeem/manage/+page.ts
new file mode 100644
index 0000000000..e52b18d964
--- /dev/null
+++ b/apps/website/src/routes/(default)/[space]/dashboard/redeem/manage/+page.ts
@@ -0,0 +1,5 @@
+import type { PageLoadEvent } from './$types';
+
+export const _SpaceDashboardRedeemManagePage_QueryVariables = (event: PageLoadEvent) => {
+  return { slug: event.params.space };
+};
diff --git a/apps/website/src/routes/(default)/[space]/dashboard/redeem/manage/[redeem]/+page.ts b/apps/website/src/routes/(default)/[space]/dashboard/redeem/manage/[redeem]/+page.ts
new file mode 100644
index 0000000000..039e3a564b
--- /dev/null
+++ b/apps/website/src/routes/(default)/[space]/dashboard/redeem/manage/[redeem]/+page.ts
@@ -0,0 +1,5 @@
+import type { PageLoadEvent } from './$types';
+
+export const _SpaceDashboardRedeemManageEntityPage_QueryVariables = (event: PageLoadEvent) => {
+  return { permalink: event.params.redeem };
+};
diff --git a/apps/website/src/routes/(default)/[space]/dashboard/redeem/manage/[redeem]/+page@(default).svelte b/apps/website/src/routes/(default)/[space]/dashboard/redeem/manage/[redeem]/+page@(default).svelte
new file mode 100644
index 0000000000..f66b407497
--- /dev/null
+++ b/apps/website/src/routes/(default)/[space]/dashboard/redeem/manage/[redeem]/+page@(default).svelte
@@ -0,0 +1,332 @@
+<script lang="ts">
+  import dayjs from 'dayjs';
+  import IconArrowBarToDown from '~icons/tabler/arrow-bar-to-down';
+  import IconArrowLeft from '~icons/tabler/arrow-left';
+  import IconCoin from '~icons/tabler/coin';
+  import Redeem24 from '$assets/icons/redeem-24.svg?component';
+  import Redeem40 from '$assets/icons/redeem-40.svg?component';
+  import Redeem65 from '$assets/icons/redeem-65.svg?component';
+  import { graphql } from '$glitch';
+  import { Button, Helmet, Icon, Image, Modal } from '$lib/components';
+  import { Radio } from '$lib/components/forms';
+  import { comma } from '$lib/utils';
+  import { css } from '$styled-system/css';
+  import { flex } from '$styled-system/patterns';
+
+  let saveRedeemFileOpen = false;
+
+  $: query = graphql(`
+    query SpaceDashboardRedeemManageEntityPage_Query($permalink: String!) {
+      post(permalink: $permalink) {
+        id
+        permalink
+
+        space @_required {
+          id
+          slug
+          name
+        }
+
+        thumbnail {
+          id
+          ...Image_image
+        }
+
+        publishedRevision {
+          id
+          title
+          subtitle
+          price
+          createdAt
+        }
+      }
+    }
+  `);
+</script>
+
+<Helmet
+  description={`${$query.post.space.name} 스페이스 리딤코드 생성`}
+  title={`리딤코드 생성 | ${$query.post.space.name}`}
+/>
+
+<div
+  class={flex({
+    direction: 'column',
+    align: 'center',
+    backgroundColor: 'gray.50',
+    width: 'full',
+  })}
+>
+  <div class={css({ marginBottom: { base: '34px', sm: '80px' }, width: 'full', sm: { maxWidth: '860px' } })}>
+    <h1
+      class={flex({
+        align: 'center',
+        gap: '8px',
+        marginTop: { sm: '40px' },
+        fontSize: { base: '17px', sm: '24px' },
+        fontWeight: { base: 'semibold', sm: 'bold' },
+        smDown: { borderBottomWidth: '1px', borderBottomColor: 'gray.50', paddingX: '20px', paddingY: '13px' },
+      })}
+    >
+      <a href="/{$query.post.space.slug}/dashboard/redeem/manage">
+        <Icon style={css.raw({ hideFrom: 'sm' })} icon={IconArrowLeft} size={24} />
+        <Icon style={css.raw({ hideBelow: 'sm' })} icon={IconArrowLeft} size={24} />
+      </a>
+      리딤코드 세부사항
+    </h1>
+
+    <div class={css({ marginTop: { base: '20px', sm: '32px' }, smDown: { paddingX: '20px' } })}>
+      <div
+        class={css({
+          borderWidth: '1px',
+          borderColor: 'gray.100',
+          paddingX: '14px',
+          paddingY: { base: '15px', sm: '14px' },
+          backgroundColor: 'gray.0',
+        })}
+      >
+        <div
+          class={flex({
+            align: 'center',
+            gap: { base: '8px', sm: '12px' },
+            marginBottom: '16px',
+            borderBottomWidth: '1px',
+            borderBottomColor: 'gray.100',
+            paddingBottom: '16px',
+          })}
+        >
+          <Image
+            style={css.raw({ flex: 'none', width: '102px', aspectRatio: '16/10', objectFit: 'cover' })}
+            $image={$query.post.thumbnail}
+            placeholder
+            size={96}
+          />
+
+          <div class={css({ width: 'full', truncate: true })}>
+            <h3 class={css({ fontSize: '14px', fontWeight: 'semibold', color: 'gray.800', truncate: true })}>
+              {$query.post.publishedRevision?.title ?? '(제목 없음)'}
+            </h3>
+            <h4 class={css({ fontSize: '13px', color: 'gray.600', height: '19px', truncate: true })}>
+              {$query.post.publishedRevision?.subtitle ?? ''}
+            </h4>
+
+            <div
+              class={flex({
+                align: 'center',
+                gap: '8px',
+                marginTop: { base: '3px', sm: '6px' },
+                fontSize: '12px',
+                color: 'gray.500',
+              })}
+            >
+              <div class={flex({ align: 'center', gap: '2px' })}>
+                <Icon icon={IconCoin} />
+                <span>{comma($query.post.publishedRevision?.price ?? 0)}원</span>
+              </div>
+
+              <hr class={css({ border: 'none', width: '1px', height: '12px', backgroundColor: 'gray.100' })} />
+
+              <time datetime={$query.post.publishedRevision?.createdAt}>
+                {dayjs($query.post.publishedRevision?.createdAt).formatAsDate()}
+              </time>
+            </div>
+          </div>
+        </div>
+
+        <dl class={flex({ direction: 'column', gap: '2px' })}>
+          <div class={flex({ align: 'center', gap: '12px', fontSize: '13px' })}>
+            <dt class={css({ fontWeight: 'semibold', color: 'gray.800', width: '46px' })}>발급갯수</dt>
+            <dd class={css({ color: 'gray.600' })}>15개</dd>
+          </div>
+          <div class={flex({ align: 'center', gap: '12px', fontSize: '13px' })}>
+            <dt class={css({ fontWeight: 'semibold', color: 'gray.800', width: '46px' })}>생성일</dt>
+            <dd class={css({ color: 'gray.600' })}>2024.05.24. 11:00</dd>
+          </div>
+          <div class={flex({ align: 'center', gap: '12px', fontSize: '13px' })}>
+            <dt class={css({ fontWeight: 'semibold', color: 'gray.800', width: '46px' })}>만료일</dt>
+            <dd class={css({ color: 'gray.600' })}>2025.05.24. 11:00</dd>
+          </div>
+        </dl>
+
+        <p class={css({ marginTop: '8px', fontSize: '13px', color: 'gray.600' })}>리딤코드 설명 리딤코드 설명</p>
+      </div>
+
+      <div
+        class={flex({
+          align: 'center',
+          justify: { sm: 'flex-end' },
+          gap: '8px',
+          marginTop: '8px',
+        })}
+      >
+        <Button style={css.raw({ backgroundColor: 'gray.0', width: 'full' })} variant="red-outline">
+          리딤코드 전체 삭제
+        </Button>
+        <Button style={css.raw({ width: 'full' })} variant="brand-fill" on:click={() => (saveRedeemFileOpen = true)}>
+          전체 파일로 저장
+        </Button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<hr
+  class={css({
+    border: 'none',
+    width: 'full',
+    height: { base: '16px', sm: '1px' },
+    backgroundColor: { base: 'gray.50', sm: 'gray.100' },
+  })}
+/>
+
+<div
+  class={flex({
+    direction: 'column',
+    align: 'center',
+    grow: '1',
+    paddingTop: { base: '34px', sm: '40px' },
+    paddingBottom: '120px',
+    width: 'full',
+    smDown: { paddingX: '20px' },
+  })}
+>
+  <div class={css({ width: 'full', sm: { maxWidth: '860px' } })}>
+    <h2 class={css({ fontSize: '18px', fontWeight: 'semibold' })}>개별 다운로드</h2>
+    <p class={css({ marginTop: '2px', fontSize: '13px', color: 'gray.500' })}>
+      다운로드할 확장자를 선택해주세요. 해당 파일은 200x200크기로 다운로드됩니다
+    </p>
+  </div>
+
+  <ul
+    class={flex({
+      direction: 'column',
+      gap: '8px',
+      marginTop: { base: '34px', sm: '16px' },
+      width: 'full',
+      sm: { maxWidth: '860px' },
+    })}
+  >
+    <li class={css({ borderWidth: '1px', borderColor: 'gray.100', padding: '14px' })}>
+      <div class={css({ marginBottom: '8px', backgroundColor: 'gray.200', size: '60px' })} />
+
+      <div
+        class={flex({
+          direction: { smDown: 'column' },
+          gap: '16px',
+          sm: { alignItems: 'flex-end', justifyContent: 'space-between' },
+        })}
+      >
+        <dl>
+          <div class={flex({ align: 'center', gap: '12px', fontSize: '13px' })}>
+            <dt class={css({ fontWeight: 'semibold', color: 'gray.800', width: '46px' })}>번호</dt>
+            <dd class={css({ color: 'gray.600' })}>2Q24SO3LA2412P</dd>
+          </div>
+          <div class={flex({ align: 'center', gap: '12px', fontSize: '13px' })}>
+            <dt class={css({ fontWeight: 'semibold', color: 'gray.800', width: '46px' })}>만료일</dt>
+            <dd class={css({ color: 'gray.600' })}>2025.05.24 11:00</dd>
+          </div>
+          <div class={flex({ align: 'center', gap: '12px', fontSize: '13px' })}>
+            <dt class={css({ fontWeight: 'semibold', color: 'gray.800', width: '46px' })}>사용여부</dt>
+            <dd class={css({ color: 'gray.600' }, true && { fontWeight: 'medium', color: 'brand.400' })}>사용가능</dd>
+          </div>
+        </dl>
+
+        <div class={flex({ align: 'center', gap: '8px' })}>
+          <Button
+            style={flex.raw({ align: 'center', justify: 'center', gap: '4px', width: { base: 'full', sm: 'fit' } })}
+            size="sm"
+            variant="gray-outline"
+          >
+            <Icon icon={IconArrowBarToDown} />
+            PNG
+          </Button>
+          <Button
+            style={flex.raw({ align: 'center', justify: 'center', gap: '4px', width: { base: 'full', sm: 'fit' } })}
+            size="sm"
+            variant="gray-outline"
+          >
+            <Icon icon={IconArrowBarToDown} />
+            SVG
+          </Button>
+          <Button
+            style={flex.raw({ align: 'center', justify: 'center', gap: '4px', width: { base: 'full', sm: 'fit' } })}
+            size="sm"
+            variant="gray-outline"
+          >
+            <Icon icon={IconArrowBarToDown} />
+            PDF
+          </Button>
+        </div>
+      </div>
+    </li>
+  </ul>
+</div>
+
+<Modal bind:open={saveRedeemFileOpen}>
+  <svelte:fragment slot="title">리딤 코드 전체 파일로 저장</svelte:fragment>
+
+  <div class={flex({ align: 'center', gap: '16px' })}>
+    <Radio variant="brand">PNG</Radio>
+    <Radio variant="brand">PDF</Radio>
+    <Radio variant="brand">SVG</Radio>
+  </div>
+
+  <div class={flex({ align: 'center', justify: 'flex-start', gap: '16px', marginTop: '24px' })}>
+    <div class={flex({ direction: 'column', position: 'relative', width: 'full', maxWidth: '116px' })}>
+      <Redeem24 />
+      <p
+        class={css({
+          paddingY: '[2.5px]',
+          fontSize: '13px',
+          fontWeight: 'medium',
+          color: 'gray.0',
+          textAlign: 'center',
+          backgroundColor: 'brand.400',
+        })}
+      >
+        24칸
+      </p>
+      <div
+        class={css({ position: 'absolute', top: '0', size: 'full', borderWidth: '2px', borderColor: 'brand.400' })}
+      />
+    </div>
+    <div class={flex({ direction: 'column', position: 'relative', width: 'full', maxWidth: '116px' })}>
+      <Redeem40 />
+      <p
+        class={css({
+          paddingY: '[2.5px]',
+          fontSize: '13px',
+          fontWeight: 'medium',
+          color: 'gray.0',
+          textAlign: 'center',
+          backgroundColor: 'brand.400',
+        })}
+      >
+        40칸
+      </p>
+      <div
+        class={css({ position: 'absolute', top: '0', size: 'full', borderWidth: '2px', borderColor: 'brand.400' })}
+      />
+    </div>
+    <div class={flex({ direction: 'column', position: 'relative', width: 'full', maxWidth: '116px' })}>
+      <Redeem65 />
+      <p
+        class={css({
+          paddingY: '[2.5px]',
+          fontSize: '13px',
+          fontWeight: 'medium',
+          color: 'gray.0',
+          textAlign: 'center',
+          backgroundColor: 'brand.400',
+        })}
+      >
+        65칸
+      </p>
+      <div
+        class={css({ position: 'absolute', top: '0', size: 'full', borderWidth: '2px', borderColor: 'brand.400' })}
+      />
+    </div>
+  </div>
+
+  <Button slot="action" style={css.raw({ width: 'full' })} size="lg" variant="gradation-fill">다운로드</Button>
+</Modal>
diff --git a/apps/website/src/routes/(default)/me/+layout.svelte b/apps/website/src/routes/(default)/me/+layout.svelte
index afdfd01d6a..27863d818c 100644
--- a/apps/website/src/routes/(default)/me/+layout.svelte
+++ b/apps/website/src/routes/(default)/me/+layout.svelte
@@ -3,6 +3,7 @@
   import IconCoin from '~icons/tabler/coin';
   import IconFilterCog from '~icons/tabler/filter-cog';
   import IconPigMoney from '~icons/tabler/pig-money';
+  import IconScan from '~icons/tabler/scan';
   import IconSettings from '~icons/tabler/settings';
   import IconStar from '~icons/tabler/star';
   import { isWebView } from '$lib/flutter';
@@ -50,6 +51,7 @@
       <NavItem icon={IconCoin} pathname="/me/point" title="포인트" />
       <NavItem icon={IconPigMoney} pathname="/me/revenue" title="수익/출금" />
       <NavItem icon={IconFilterCog} pathname="/me/contentfilters" title="컨텐츠필터링" />
+      <NavItem icon={IconScan} pathname="/me/redeem" title="리딤코드 등록" />
       <NavItem icon={IconSettings} pathname="/me/settings" title="계정설정" />
     </nav>
   {/if}
diff --git a/apps/website/src/routes/(default)/me/redeem/(index)/+page.svelte b/apps/website/src/routes/(default)/me/redeem/(index)/+page.svelte
new file mode 100644
index 0000000000..ebe1480765
--- /dev/null
+++ b/apps/website/src/routes/(default)/me/redeem/(index)/+page.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+  import IconScan from '~icons/tabler/scan';
+  import { goto } from '$app/navigation';
+  import { Button, Icon } from '$lib/components';
+  import { TextInput } from '$lib/components/forms';
+  import { css } from '$styled-system/css';
+  import { flex } from '$styled-system/patterns';
+</script>
+
+<div
+  class={css({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    paddingTop: { base: '60px', sm: '68px' },
+    paddingBottom: { base: '120px', sm: '140px' },
+    textAlign: 'center',
+    smDown: { paddingX: '20px' },
+  })}
+>
+  <h2
+    class={css({
+      marginBottom: '4px',
+      fontSize: { base: '24px', sm: '30px' },
+      fontWeight: '[800]',
+    })}
+  >
+    리딤코드 등록
+  </h2>
+
+  <p class={css({ fontSize: { base: '13px', sm: '14px' }, color: 'gray.600' })}>
+    리딤코드는 종이책과 유료포스트를 함께 이용할 수 있게 도와주는 서비스로
+    <br />
+    해당 코드를 스캔하거나 입력하면
+    <mark class={css({ color: 'brand.400' })}>글리프에서 발행한 유료포스트가 자동으로 구매 완료</mark>
+    되어 이용할 수 있어요
+  </p>
+
+  <form
+    class={flex({ align: 'center', marginTop: '40px', width: 'full', maxWidth: '366px' })}
+    on:submit|preventDefault={() => goto('/me/redeem/complete')}
+  >
+    <TextInput style={css.raw({ width: 'full' })} placeholder="12자리 코드를 입력해주세요" size="md">
+      <Icon slot="left-icon" style={css.raw({ color: 'gray.400' })} icon={IconScan} />
+    </TextInput>
+    <Button
+      style={css.raw({
+        flex: 'none',
+        outlineWidth: '0',
+        borderWidth: '1px',
+        borderColor: 'brand.400',
+        width: { base: '68px', sm: '86px' },
+        height: '44px',
+      })}
+      type="submit"
+      variant="brand-fill"
+    >
+      등록
+    </Button>
+  </form>
+</div>
diff --git a/apps/website/src/routes/(default)/me/redeem/+layout.svelte b/apps/website/src/routes/(default)/me/redeem/+layout.svelte
new file mode 100644
index 0000000000..cc4917f90f
--- /dev/null
+++ b/apps/website/src/routes/(default)/me/redeem/+layout.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { TabHead, TabHeadItem } from '$lib/components/tab';
+  import { css } from '$styled-system/css';
+</script>
+
+<h1 class={css({ marginBottom: '12px', fontSize: '24px', fontWeight: 'bold', hideBelow: 'sm' })}>리딤코드</h1>
+
+<TabHead style={css.raw({ gap: '28px', smDown: { paddingX: '20px', paddingY: '12px' }, sm: { paddingBottom: '0' } })}>
+  <TabHeadItem id={1} pathname="/me/redeem">코드등록</TabHeadItem>
+  <TabHeadItem id={2} pathname="/me/redeem/history">사용내역</TabHeadItem>
+</TabHead>
+
+<slot />
diff --git a/apps/website/src/routes/(default)/me/redeem/complete/+page@(default).svelte b/apps/website/src/routes/(default)/me/redeem/complete/+page@(default).svelte
new file mode 100644
index 0000000000..a2ca55a67b
--- /dev/null
+++ b/apps/website/src/routes/(default)/me/redeem/complete/+page@(default).svelte
@@ -0,0 +1,104 @@
+<script lang="ts">
+  import IconCoin from '~icons/tabler/coin';
+  import { Button, Icon } from '$lib/components';
+  import { comma } from '$lib/utils';
+  import { css } from '$styled-system/css';
+  import { flex } from '$styled-system/patterns';
+</script>
+
+<div
+  class={flex({
+    direction: 'column',
+    align: 'center',
+    justify: 'center',
+    grow: '1',
+    backgroundColor: 'gray.50',
+    width: 'full',
+    smDown: { paddingX: '20px' },
+  })}
+>
+  <div
+    class={css({ paddingTop: '80px', paddingBottom: { base: '120px', sm: '160px' }, width: 'full', maxWidth: '600px' })}
+  >
+    <h1
+      class={css({
+        marginBottom: '4px',
+        fontSize: { base: '24px', sm: '30px' },
+        fontWeight: '[800]',
+        textAlign: 'center',
+      })}
+    >
+      등록이 완료되었어요
+    </h1>
+    <p
+      class={css({
+        fontSize: { base: '13px', sm: '15px' },
+        fontWeight: { sm: 'medium' },
+        color: 'gray.600',
+        textAlign: 'center',
+      })}
+    >
+      이제 글리프에서 발행한 유료 포스트를 열람할 수 있어요
+    </p>
+
+    <div
+      class={css({
+        marginTop: { base: '40px', sm: '32px' },
+        marginBottom: '8px',
+        borderWidth: '1px',
+        borderColor: 'gray.100',
+        paddingX: '14px',
+        paddingY: { base: '15px', sm: '14px' },
+        backgroundColor: 'gray.0',
+      })}
+    >
+      <div class={flex({ align: 'center', gap: { base: '8px', sm: '12px' }, width: 'full', truncate: true })}>
+        <div
+          class={css({
+            flex: 'none',
+            width: { base: '88px', sm: '102px' },
+            aspectRatio: '16/10',
+            objectFit: 'cover',
+            backgroundColor: 'gray.200',
+          })}
+        />
+
+        <div class={css({ truncate: true })}>
+          <h3 class={css({ fontSize: '14px', fontWeight: 'semibold', color: 'gray.800', truncate: true })}>
+            포스트 제목
+          </h3>
+          <h4 class={css({ fontSize: '13px', color: 'gray.600', height: '19px', truncate: true })}>포스트 부제목</h4>
+          <div
+            class={flex({
+              align: 'center',
+              gap: '8px',
+              marginTop: { base: '3px', sm: '6px' },
+              fontSize: '12px',
+              color: 'gray.500',
+            })}
+          >
+            <div class={flex({ align: 'center', gap: '2px', color: 'brand.400' })}>
+              <Icon icon={IconCoin} />
+              <span>{comma(2000)}원</span>
+            </div>
+
+            <hr class={css({ border: 'none', width: '1px', height: '12px', backgroundColor: 'gray.100' })} />
+
+            <time datetime="2024.01.01">2024.01.01</time>
+          </div>
+        </div>
+      </div>
+
+      <hr class={css({ marginY: '16px', border: 'none', width: 'full', height: '1px', backgroundColor: 'gray.100' })} />
+
+      <dl class={flex({ direction: 'column', gap: '2px' })}>
+        <div class={flex({ align: 'center', gap: '12px', fontSize: '13px' })}>
+          <dt class={css({ fontWeight: 'semibold', color: 'gray.800', width: '46px' })}>등록일</dt>
+          <dd class={css({ color: 'gray.600' })}>2024.05.24 11:00</dd>
+        </div>
+      </dl>
+    </div>
+
+    <Button style={css.raw({ display: 'block' })} href="/" type="link" variant="gradation-fill">포스트 바로가기</Button>
+  </div>
+</div>
diff --git a/apps/website/src/routes/(default)/me/redeem/history/+page.svelte b/apps/website/src/routes/(default)/me/redeem/history/+page.svelte
new file mode 100644
index 0000000000..0908319ebf
--- /dev/null
+++ b/apps/website/src/routes/(default)/me/redeem/history/+page.svelte
@@ -0,0 +1,80 @@
+<script lang="ts">
+  import IconChevronRight from '~icons/tabler/chevron-right';
+  import IconCoin from '~icons/tabler/coin';
+  import { Icon } from '$lib/components';
+  import { comma } from '$lib/utils';
+  import { css } from '$styled-system/css';
+  import { flex } from '$styled-system/patterns';
+</script>
+
+<div class={css({ smDown: { paddingX: '20px' } })}>
+  <p
+    class={css({
+      marginTop: { base: '16px', sm: '32px' },
+      marginBottom: { base: '8px', sm: '16px' },
+      fontSize: '15px',
+      color: 'gray.500',
+    })}
+  >
+    총 4개의 리딤코드
+  </p>
+
+  <ul class={flex({ direction: 'column', gap: '16px' })}>
+    <li
+      class={css({
+        borderWidth: '1px',
+        borderColor: 'gray.100',
+        paddingX: '14px',
+        paddingY: { base: '15px', sm: '14px' },
+      })}
+    >
+      <a class={flex({ align: 'center', justify: 'space-between', width: 'full', truncate: true })} href="/">
+        <div class={flex({ align: 'center', gap: { base: '8px', sm: '12px' }, width: 'full', truncate: true })}>
+          <div
+            class={css({
+              flex: 'none',
+              width: { base: '88px', sm: '102px' },
+              aspectRatio: '16/10',
+              objectFit: 'cover',
+              backgroundColor: 'gray.200',
+            })}
+          />
+
+          <div class={css({ truncate: true })}>
+            <h3 class={css({ fontSize: '14px', fontWeight: 'semibold', color: 'gray.800', truncate: true })}>
+              포스트 제목
+            </h3>
+            <h4 class={css({ fontSize: '13px', color: 'gray.600', height: '19px', truncate: true })}>포스트 부제목</h4>
+            <div
+              class={flex({
+                align: 'center',
+                gap: '8px',
+                marginTop: { base: '3px', sm: '6px' },
+                fontSize: '12px',
+                color: 'gray.500',
+              })}
+            >
+              <div class={flex({ align: 'center', gap: '2px', color: 'brand.400' })}>
+                <Icon icon={IconCoin} />
+                <span>{comma(2000)}원</span>
+              </div>
+
+              <hr class={css({ border: 'none', width: '1px', height: '12px', backgroundColor: 'gray.100' })} />
+
+              <time datetime="2024.01.01">2024.01.01</time>
+            </div>
+          </div>
+        </div>
+        <Icon style={css.raw({ color: 'gray.400', hideBelow: 'sm' })} icon={IconChevronRight} size={24} />
+      </a>
+      <hr class={css({ marginY: '16px', border: 'none', width: 'full', height: '1px', backgroundColor: 'gray.100' })} />
+
+      <dl class={flex({ direction: 'column', gap: '2px' })}>
+        <div class={flex({ align: 'center', gap: '12px', fontSize: '13px' })}>
+          <dt class={css({ fontWeight: 'semibold', color: 'gray.800', width: '46px' })}>등록일</dt>
+          <dd class={css({ color: 'gray.600' })}>2024.05.24 11:00</dd>
+        </div>
+      </dl>
+    </li>
+  </ul>
+</div>