From 406b487ec040d0f2c6ab732995c119bee62f77c5 Mon Sep 17 00:00:00 2001
From: Mike <mike.kangaroo.world@gmail.com>
Date: Sun, 20 Oct 2024 15:35:35 +0900
Subject: [PATCH 1/6] feat: Add inject key in types.ts

Update types.ts to include a new injection key for showing the preview reference.
---
 src/types.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/types.ts b/src/types.ts
index 19b8c609..466a378f 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,4 +1,4 @@
-import type { Component, ComputedRef, InjectionKey, ToRefs } from 'vue'
+import type { Component, ComputedRef, InjectionKey, Ref, ToRefs } from 'vue'
 import { Props } from './Repl.vue'
 
 export type EditorMode = 'js' | 'css' | 'ssr'
@@ -21,3 +21,5 @@ export const injectKeyProps: InjectionKey<
 export const injectKeyPreviewRef: InjectionKey<
   ComputedRef<HTMLDivElement | null>
 > = Symbol('preview-ref')
+export const injectKeyShowPreviewRef: InjectionKey<Ref<boolean>> =
+  Symbol('show-preview-ref')

From 360b8968aba295d9a9c91bc82cdd1c6e994bd71c Mon Sep 17 00:00:00 2001
From: Mike <mike.kangaroo.world@gmail.com>
Date: Sun, 20 Oct 2024 15:38:54 +0900
Subject: [PATCH 2/6] feat: add showPreview ref to injectKeyShowPreviewRef

- add showPreview ref to provider
- apply showPreview ref to editroSlot
---
 src/Repl.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/Repl.vue b/src/Repl.vue
index 66138ec7..b6733658 100644
--- a/src/Repl.vue
+++ b/src/Repl.vue
@@ -2,11 +2,12 @@
 import SplitPane from './SplitPane.vue'
 import Output from './output/Output.vue'
 import { type Store, useStore } from './store'
-import { computed, provide, toRefs, useTemplateRef } from 'vue'
+import { computed, provide, ref, toRefs, useTemplateRef } from 'vue'
 import {
   type EditorComponentType,
   injectKeyPreviewRef,
   injectKeyProps,
+  injectKeyShowPreviewRef,
 } from './types'
 import EditorContainer from './editor/EditorContainer.vue'
 import type * as monaco from 'monaco-editor-core'
@@ -84,6 +85,9 @@ provide(
   computed(() => outputRef.value?.previewRef?.container ?? null),
 )
 
+const showPreview = ref(true)
+provide(injectKeyShowPreviewRef, showPreview)
+
 /**
  * Reload the preview iframe
  */
@@ -97,7 +101,7 @@ defineExpose({ reload })
 <template>
   <div class="vue-repl">
     <SplitPane :layout="layout">
-      <template #[editorSlotName]>
+      <template v-if="showPreview" #[editorSlotName]>
         <EditorContainer :editor-component="editor" />
       </template>
       <template #[outputSlotName]>

From a74aa01728e297b96232889807356b857dcd02d4 Mon Sep 17 00:00:00 2001
From: Mike <mike.kangaroo.world@gmail.com>
Date: Sun, 20 Oct 2024 15:42:04 +0900
Subject: [PATCH 3/6] feat: implement logic to not render editor using
 injectKeyShowPreviewRef inject

---
 src/SplitPane.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/SplitPane.vue b/src/SplitPane.vue
index 8b49a09a..0ed50621 100644
--- a/src/SplitPane.vue
+++ b/src/SplitPane.vue
@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import { computed, inject, reactive, useTemplateRef } from 'vue'
-import { injectKeyPreviewRef, injectKeyProps } from './types'
+import {
+  injectKeyPreviewRef,
+  injectKeyProps,
+  injectKeyShowPreviewRef,
+} from './types'
 
 const props = defineProps<{ layout?: 'horizontal' | 'vertical' }>()
 const isVertical = computed(() => props.layout === 'vertical')
@@ -18,7 +22,12 @@ const state = reactive({
   viewWidth: 0,
 })
 
+const showPreview = inject(injectKeyShowPreviewRef)
+
 const boundSplit = computed(() => {
+  if (!showPreview || !showPreview.value) {
+    return 0
+  }
   const { split } = state
   return split < 20 ? 20 : split > 80 ? 80 : split
 })
@@ -73,6 +82,7 @@ function changeViewSize() {
     @mouseleave="dragEnd"
   >
     <div
+      v-if="showPreview"
       class="left"
       :style="{ [isVertical ? 'height' : 'width']: boundSplit + '%' }"
     >

From c7c026bc7710f3448954a0fad24f7f9ec6b03345 Mon Sep 17 00:00:00 2001
From: Mike <mike.kangaroo.world@gmail.com>
Date: Sun, 20 Oct 2024 15:43:46 +0900
Subject: [PATCH 4/6] feat: implement logic to not render toggle button if no
 editor exists

---
 src/SplitPane.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/SplitPane.vue b/src/SplitPane.vue
index 0ed50621..ccc6c478 100644
--- a/src/SplitPane.vue
+++ b/src/SplitPane.vue
@@ -99,7 +99,11 @@ function changeViewSize() {
       <slot name="right" />
     </div>
 
-    <button class="toggler" @click="store.showOutput = !store.showOutput">
+    <button
+      v-if="showPreview"
+      class="toggler"
+      @click="store.showOutput = !store.showOutput"
+    >
       {{
         store.showOutput
           ? splitPaneOptions?.codeTogglerText || '< Code'

From 7542ad8cdf1484406a46cbdc627aa0cc202ed397 Mon Sep 17 00:00:00 2001
From: Mike <mike.kangaroo.world@gmail.com>
Date: Sun, 20 Oct 2024 15:44:27 +0900
Subject: [PATCH 5/6] feat: add show preview toggle button in Output component

---
 src/output/Output.vue | 28 ++++++++++++++++++++--------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/output/Output.vue b/src/output/Output.vue
index 62085293..c4d2c4b9 100644
--- a/src/output/Output.vue
+++ b/src/output/Output.vue
@@ -5,7 +5,9 @@ import {
   type EditorComponentType,
   type OutputModes,
   injectKeyProps,
+  injectKeyShowPreviewRef,
 } from '../types'
+import ToggleButton from '../editor/ToggleButton.vue'
 
 const props = defineProps<{
   editorComponent: EditorComponentType
@@ -38,18 +40,24 @@ function reload() {
 }
 
 defineExpose({ reload, previewRef })
+
+const showPreview = inject(injectKeyShowPreviewRef)
 </script>
 
 <template>
   <div class="tab-buttons">
-    <button
-      v-for="m of modes"
-      :key="m"
-      :class="{ active: mode === m }"
-      @click="mode = m"
-    >
-      <span>{{ m }}</span>
-    </button>
+    <div>
+      <button
+        v-for="m of modes"
+        :key="m"
+        :class="{ active: mode === m }"
+        @click="mode = m"
+      >
+        <span>{{ m }}</span>
+      </button>
+    </div>
+
+    <ToggleButton v-model="showPreview" text="Show Preview" />
   </div>
 
   <div class="output-container">
@@ -77,6 +85,10 @@ defineExpose({ reload, previewRef })
   background-color: var(--bg);
   height: var(--header-height);
   overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: space-between; /* 양쪽 끝에 버튼들을 배치 */
+  padding: 0 16px; /* 좌우 간격 추가 */
 }
 .tab-buttons button {
   padding: 0;

From 1465085fd6bceb6a4d2b90a62be697076ad3023e Mon Sep 17 00:00:00 2001
From: Mike <mike.kangaroo.world@gmail.com>
Date: Sun, 20 Oct 2024 15:45:22 +0900
Subject: [PATCH 6/6] feat: apply font color styling of ToggleButton component

---
 src/editor/ToggleButton.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/editor/ToggleButton.vue b/src/editor/ToggleButton.vue
index 2d6fa01d..e1c5848e 100644
--- a/src/editor/ToggleButton.vue
+++ b/src/editor/ToggleButton.vue
@@ -5,7 +5,7 @@ const active = defineModel<boolean>()
 
 <template>
   <div class="wrapper" @click="active = !active">
-    <span>{{ text }}</span>
+    <span class="text">{{ text }}</span>
     <div class="toggle" :class="[{ active: modelValue }]">
       <div class="indicator" />
     </div>
@@ -20,6 +20,10 @@ const active = defineModel<boolean>()
   user-select: none;
 }
 
+.text {
+  color: var(--text-light);
+}
+
 .toggle {
   display: inline-block;
   margin-left: 4px;