picktoss · woo-jk · Apr 30, 2024 · Apr 30, 2024 · Apr 30, 2024 · Apr 30, 2024
diff --git a/src/app/(routes)/(quiz)/layout.tsx b/src/app/(routes)/(quiz)/layout.tsx
@@ -0,0 +1,11 @@
+import HeaderLayout from '@/components/header-layout'
+import { PropsWithChildren } from 'react'
+
+export default function Layout({ children }: PropsWithChildren) {
+  return (
+    <div className="w-full px-20 pb-8">
+      <HeaderLayout />
+      {children}
+    </div>
+  )
+}
diff --git a/src/app/(routes)/(quiz)/page.tsx b/src/app/(routes)/(quiz)/page.tsx
@@ -1,5 +1,101 @@
 import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+
+const userData = {
+  id: 1,
+  nickname: '픽토스',
+  stars: 20,
+}
+
+const todayQuizData = {
+  continuousSolvedDates: 5,
+  totalSolvedQuizCount: 100,
+  stat: 'ready',
+  quiz: [
+    {
+      id: 1,
+      category: '전공 공부',
+      count: 4,
+    },
+    {
+      id: 2,
+      category: '코딩 아카데미',
+      count: 3,
+    },
+    {
+      id: 3,
+      category: '컴활 필기 준비',
+      count: 3,
+    },
+  ],
+}
+
+const boxStyle = 'rounded-2xl bg-white p-5'
 
 export default function Quiz() {
-  return <Button>Button</Button>
+  return (
+    <div className="flex flex-col gap-4">
+      <h2 className="text-3xl text-gray-60">파워업 퀴즈</h2>
+      <div className="flex gap-4">
+        <div className={cn(boxStyle, 'flex place-content-center flex-[12]')}>
+          <div className="size-20 rounded-full bg-[#FFF0C8]" />
+          <div className="flex flex-col justify-center px-8">
+            <p className="text-2xl font-bold text-gray-60">
+              <span className="text-orange-50">{todayQuizData.continuousSolvedDates}</span>일째
+              파워업 중!
+            </p>
+            <p className="text-gray-50">2024년 4월 25일 목요일</p>
+          </div>
+        </div>
+        <div className={cn(boxStyle, 'flex flex-col flex-[8] gap-3 justify-center')}>
+          <h6 className="text-gray-60">오늘의 퀴즈 점수</h6>
+          <p className="font-normal text-gray-50">아직 오늘 퀴즈를 풀지 않았어요.</p>
+        </div>
+        <div className={cn(boxStyle, 'flex items-center gap-4 flex-[6]')}>
+          <div className="size-14 rounded-full bg-[#FFF0C8]" />
+          <div>
+            <p className="text-gray-60">별</p>
+            <p className="text-orange-50">{userData.stars}개</p>
+          </div>
+        </div>
+      </div>
+      <p className="text-gray-50">오늘의 퀴즈</p>
+      <div className={cn(boxStyle, 'w-full h-[520px] flex flex-col justify-center items-center')}>
+        <h5 className="mb-4 text-xl font-bold text-orange-50">INFORMATION</h5>
+        <h3 className="mb-8 text-2xl">{userData.nickname}님을 위한 퀴즈가 준비되었어요</h3>
+        <div className="mb-14 flex items-center gap-10">
+          <DocumentIcon />
+          <div className="flex flex-col gap-1.5">
+            {todayQuizData.quiz.map((quiz) => (
+              <div
+                key={quiz.id}
+                className="flex w-[178px] items-center justify-between rounded-full bg-[#E4E4E4] px-8 py-2"
+              >
+                <span className="text-sm font-normal text-[#3F3F3F]">{quiz.category}</span>
+                <span className="text-sm font-bold">{quiz.count}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+        <Button className="h-[64px] w-[352px] rounded-full bg-orange-50 text-xl font-bold hover:bg-orange-50/80">
+          시작하기
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+function DocumentIcon() {
+  return (
+    <svg
+      width="110"
+      height="130"
+      viewBox="0 0 110 130"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="82" height="97" rx="13" fill="#FF9040" />
+      <rect x="28" y="33" width="82" height="97" rx="13" fill="#FFF0C8" />
+    </svg>
+  )
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -18,7 +18,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={cn(inter.variable)}>
-        <div className="h-screen w-full bg-gray-05">{children}</div>
+        <div className="size-full min-h-screen bg-gray-05">{children}</div>
       </body>
     </html>
   )

diff --git a/src/components/header-layout.tsx b/src/components/header-layout.tsx
@@ -0,0 +1,65 @@
+const mockData = {
+  name: '픽토스',
+  stars: 20,
+}
+
+export default function HeaderLayout() {
+  return (
+    <div className="flex items-center justify-end gap-6 py-7">
+      <span className="flex items-center gap-2 rounded-full bg-[#EFF1F3] px-3 py-1">
+        <span className="size-4 rounded-full bg-orange-40" />
+        {mockData.stars}
+      </span>
+      <button className="rounded-full p-2 hover:bg-[#ebebeb] ">
+        <BellIcon />
+      </button>
+      <div className="flex cursor-pointer items-center gap-3">
+        <div className="size-12 rounded-full bg-[#B0B0B0]" />
+        <span className="text-[#818181]">{mockData.name}님</span>
+        <ArrowDownIcon />
+      </div>
+    </div>
+  )
+}
+
+// TODO: Icon 컴포넌트 구현시 분리
+function BellIcon() {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_44_99)">
+        <path
+          d="M19.695 14.8L18.76 6.835C18.435 4.08 16.1 2 13.325 2H11.025C8.25001 2 5.91001 4.08 5.59001 6.835L4.65501 14.8L3.66001 16.205C3.24501 16.79 3.66001 17.6 4.38501 17.6H20.015C20.74 17.6 21.16 16.77 20.725 16.185L19.695 14.8Z"
+          stroke="#4B4F54"
+          strokeWidth="2"
+          strokeMiterlimit="10"
+        />
+        <path
+          d="M14.9002 20.1601C14.3152 21.0301 13.3252 21.6001 12.2002 21.6001C10.4052 21.6001 8.9502 20.1451 8.9502 18.3501"
+          stroke="#4B4F54"
+          strokeWidth="2"
+          strokeMiterlimit="10"
+        />
+        <circle cx="18" cy="6" r="4.5" fill="#FB7E20" stroke="white" />
+      </g>
+      <defs>
+        <clipPath id="clip0_44_99">
+          <rect width="19.405" height="21.6" fill="white" transform="translate(2.5 1)" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
+
+function ArrowDownIcon() {
+  return (
+    <svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M1 1L6.5 6.5L12.5 1"
+        stroke="#BFBFBF"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -35,6 +35,23 @@ const config = {
           80: '#292B2C',
           90: '#1D1E1F',
         },
+        orange: {
+          '05': '#FFECD0',
+          10: '#FFE1AC',
+          20: '#FFD180',
+          30: '#FFAB40',
+          40: '#FF9100',
+          50: '#FB7E20',
+        },
+        red: {
+          50: '#F66444',
+        },
+        green: {
+          50: '#82E223',
+        },
+        blue: {
+          50: '#719EE3',
+        },
         white: '#FFFFFF',
         border: 'hsl(var(--border))',
         input: 'hsl(var(--input))',