feat: add visitPage

app/(public)/visit/[userId]/page.tsx

@@ -1,9 +1,31 @@
+import React from 'react';
+
+import CrystalCanvas from '@/shared/components/canvas/CrystalCanvas';
+import UISection from '@/shared/components/ui/UISection';
+import UserHeader from '@/shared/components/ui/UserHeader';
+import MessageCount from '@/app/(public)/visit/_components/MessageCount';
+
+import PreviousButton from '@/shared/components/ui/PreviousButton';
+import ArrowButtons from '../_components/ArrowButtons';
+import { Button } from '@/components/ui/button';
+
 const VisitPage = ({ params }: { params: { userId: string } }) => {
+  console.log(params.userId);
   return (
-    <div>
-      <h1>Visit Page</h1>
-      <p>userId: {params.userId}</p>
-    </div>
+    <>
+      <PreviousButton />
+      <UISection>
+        <div className="flex flex-col items-center gap-2">
+          <UserHeader user="김부캠" />
+          <MessageCount count={10} />
+        </div>
+        <ArrowButtons />
+        <Button className="pointer-events-auto w-full md:w-1/2 xl:w-1/3">
+          수정구슬 꾸미고 메세지 남기기
+        </Button>
+      </UISection>
+      <CrystalCanvas />
+    </>
   );
 };
 

app/(public)/visit/_components/ArrowButtons.tsx

@@ -0,0 +1,18 @@
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+
+const ArrowButtons = () => {
+  return (
+    <div className="flex w-full items-center justify-between">
+      <ChevronLeft
+        size={'3rem'}
+        className="pointer-events-auto cursor-pointer hover:text-blue-500"
+      />
+      <ChevronRight
+        size={'3rem'}
+        className="pointer-events-auto cursor-pointer hover:text-blue-500"
+      />
+    </div>
+  );
+};
+
+export default ArrowButtons;

app/(public)/visit/_components/MessageCount.tsx

@@ -0,0 +1,10 @@
+const MessageCount = ({ count }: { count: number }) => {
+  return (
+    <div className="flex items-center gap-2">
+      <p style={{ fontSize: '1.5rem' }}>💌</p>{' '}
+      <p style={{ fontSize: '1.3rem' }}>{count} / 30</p>
+    </div>
+  );
+};
+
+export default MessageCount;

app/globals.css

@@ -113,7 +113,7 @@ html::-webkit-scrollbar {
 }
 
 .ui-section {
-  @apply pointer-events-none relative flex min-h-svh w-full flex-col items-center justify-between overflow-hidden p-20;
+  @apply pointer-events-none relative flex min-h-svh w-full flex-col items-center justify-between overflow-hidden px-10 py-20;
   z-index: 1;
 }