implement show only preview feature using toggle button

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]>

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 + '%' }"
     >
@@ -89,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'

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;

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;

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')