5 files changed, 87 insertions, 0 deletions
diff --git a/src/common/components/Authenticated/index.tsx b/src/common/components/Authenticated/index.tsx
new file mode 100644
index 0000000..cf7086e
--- /dev/null
+++ b/src/common/components/Authenticated/index.tsx
@@ -0,0 +1,14 @@
+import { cookies } from 'next/headers'
+import { redirect } from 'next/navigation'
+import React from 'react'
+
+const Authenticated = ({ children }: { children: React.ReactNode }) => {
+  const credentialStr = cookies().get('credential')?.value
+  const credential: Credential | null = credentialStr ? JSON.parse(credentialStr) : null
+
+  if (!credential) redirect('/login')
+
+  return children
+}
+
+export default Authenticated
+\ No newline at end of file
diff --git a/src/common/components/Scanner/index.tsx b/src/common/components/Scanner/index.tsx
new file mode 100644
index 0000000..56d2495
--- /dev/null
+++ b/src/common/components/Scanner/index.tsx
@@ -0,0 +1,39 @@
+import { useZxing } from "react-zxing";
+import styles from "./scanner.module.css"
+
+type Props = {
+  paused: boolean,
+  onScan: (string: string) => void
+}
+
+const Scanner = (props: Props) => {
+  const { ref } = useZxing({
+    constraints: {
+      video: {
+        facingMode: 'environment',
+        width: { ideal: 1280 },
+        height: { ideal: 720 },
+        frameRate: { ideal: 30, max: 60 }
+      }
+    },
+    timeBetweenDecodingAttempts: 100,
+    paused: props.paused,
+    onDecodeResult(result) {
+      props.onScan(result.getText());
+    },
+  })
+
+  const restartCam = () => {
+    ref.current?.pause()
+    ref.current?.play()
+  }
+
+  return (
+    <div className={styles.wrapper}>
+      <video ref={ref} onClick={restartCam} className={styles.video} />
+      <div className={styles.videoFrame} />
+    </div>
+  )
+}
+
+export default Scanner
+\ No newline at end of file
diff --git a/src/common/components/Scanner/scanner.module.css b/src/common/components/Scanner/scanner.module.css
new file mode 100644
index 0000000..3528172
--- /dev/null
+++ b/src/common/components/Scanner/scanner.module.css
@@ -0,0 +1,16 @@
+.wrapper {
+  @apply relative w-auto h-auto rounded-lg border border-default-300;
+}
+
+.video {
+  @apply rounded-lg;
+}
+
+.videoFrame {
+  @apply absolute 
+    border-dashed border-2 border-default-50 
+    w-3/5 h-1/5 
+    top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 
+    pointer-events-none 
+    rounded-md;
+}
diff --git a/src/common/components/ScreenContainer/index.tsx b/src/common/components/ScreenContainer/index.tsx
new file mode 100644
index 0000000..60676ea
--- /dev/null
+++ b/src/common/components/ScreenContainer/index.tsx
@@ -0,0 +1,15 @@
+import styles from "./screen-container.module.css"
+
+interface Props {
+  children: React.ReactNode
+}
+
+const ScreenContainer = ({ children }: Props) => {
+  return (
+    <div className={styles.screen}>
+      {children}
+    </div>
+  )
+}
+
+export default ScreenContainer
+\ No newline at end of file
diff --git a/src/common/components/ScreenContainer/screen-container.module.css b/src/common/components/ScreenContainer/screen-container.module.css
new file mode 100644
index 0000000..0d055d3
--- /dev/null
+++ b/src/common/components/ScreenContainer/screen-container.module.css
@@ -0,0 +1,3 @@
+.screen {
+    @apply container max-w-[480px] h-screen bg-white;
+}
+\ No newline at end of file