feat: DecoratedBox 컴포넌트 생성 및 적용

sipe-team · Jan 18, 2025 · 32be59b · 32be59b
1 parent 619224d
commit 32be59b
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 21 deletions.
diff --git a/src/components/DecoratedBox.tsx b/src/components/DecoratedBox.tsx
@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+
+interface DecoratedBoxInterface {
+  children: ReactNode;
+}
+
+export function DecoratedBox({ children }: DecoratedBoxInterface) {
+  return (
+    <div className="relative">
+      <div className="absolute left-0 right-0 top-0 flex justify-between">
+        <img src="/src/assets/deco.png" alt="" />
+        <img src="/src/assets/deco.png" className="scale-x-[-1]" alt="" />
+      </div>
+      {children}
+      <div className="absolute bottom-0 left-0 right-0 flex scale-y-[-1] justify-between">
+        <img src="/src/assets/deco.png" alt="" />
+        <img src="/src/assets/deco.png" className="scale-x-[-1]" alt="" />
+      </div>
+    </div>
+  );
+}
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
@@ -1,4 +1,5 @@
 import { createFileRoute } from '@tanstack/react-router';
+import { DecoratedBox } from '../components/DecoratedBox.tsx';
 
 export const Route = createFileRoute('/')({
   component: RouteComponent,
@@ -9,27 +10,21 @@ function RouteComponent() {
     <section className="h-full w-full">
       <h1 className="flex h-[40px] w-full items-center p-4">올해 운세 완성</h1>
       <article className="flex h-full w-full flex-col items-stretch p-4">
-        <div className="flex h-full w-full justify-between">
-          <img src="/src/assets/deco.png" alt="" />
-          <img src="/src/assets/deco.png" className="scale-x-[-1]" alt="" />
-        </div>
-        <div className="flex flex-col items-center gap-8">
-          <img
-            src="/src/assets/cuteSnake.png"
-            className="w-[103px]"
-            alt=""
-          ></img>
-          <p className="text-center text-2xl font-semibold">
-            건강, 사랑, 일, 금전까지! <br />
-            2025년의 운세를 확인하고 <br />
-            부족한 운세는 채워주는 <br />
-            나만의 부적 받아가세요~!
-          </p>
-        </div>
-        <div className="flex h-full w-full scale-y-[-1] justify-between">
-          <img src="/src/assets/deco.png" alt="" />
-          <img src="/src/assets/deco.png" className="scale-x-[-1]" alt="" />
-        </div>
+        <DecoratedBox>
+          <div className="flex flex-col items-center gap-8 py-28">
+            <img
+              src="/src/assets/cuteSnake.png"
+              className="w-[103px]"
+              alt=""
+            ></img>
+            <p className="text-center text-2xl font-semibold">
+              건강, 사랑, 일, 금전까지! <br />
+              2025년의 운세를 확인하고 <br />
+              부족한 운세는 채워주는 <br />
+              나만의 부적 받아가세요~!
+            </p>
+          </div>
+        </DecoratedBox>
         <p className="pt-4 text-gray-500">* 운세는 재미로 보기! 맹신금지X</p>
       </article>
       <div className="flex items-center justify-center p-4">