src/app/sample/page.jsx

@@ -0,0 +1,13 @@
+'use client'
+import { useContext } from 'react'
+import { QcastContext } from '@/app/QcastProvider'
+
+export default function SamplePage() {
+  const { setIsGlobalLoading } = useContext(QcastContext)
+  setIsGlobalLoading(false)
+  return (
+    <>
+      <h1>Sample Page</h1>
+    </>
+  )
+}

src/app/sample/sk/page.jsx

@@ -0,0 +1,12 @@
+
+import App from './App'
+
+export default function SkPage() {
+
+  return (
+    <>
+      <App/>
+    </>
+
+  )
+}

src/app/sample/sk/styles.css

@@ -0,0 +1,80 @@
+* {
+  font-family: monospace;
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: #f5f5f5;
+}
+
+#root {
+  width: 100%;
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.panel {
+  width: 100%;
+  text-align: center;
+}
+
+.controls {
+  margin: 16px 0;
+}
+
+.controls button {
+  margin: 0 5px;
+  padding: 8px 16px;
+  border: 1px solid #aaa;
+  background: #fff;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.controls button:hover {
+  background-color: #eee;
+}
+
+.description {
+  margin: 10px 0;
+  color: #555;
+}
+
+#wrapper {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  overflow: auto;
+}
+
+canvas {
+  background: white;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.calculator-btn {
+    transition: all 0.1s ease-in-out;
+}
+.calculator-btn:active {
+    transform: scale(0.95);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+/* 키패드 나타나고 사라지는 애니메이션 */
+.keypad-container.hidden {
+    opacity: 0;
+    transform: translateY(-10px) scale(0.95);
+    pointer-events: none; /* 숨겨졌을 때 클릭 방지 */
+}
+.keypad-container {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    transition: opacity 150ms ease-out, transform 150ms ease-out;
+}