💄 add Home UI

potenday-project · Dec 13, 2023 · 60841d5 · 60841d5
1 parent 91eb89d
commit 60841d5
Show file tree

Hide file tree

Showing 10 changed files with 48 additions and 29 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -13,6 +13,11 @@
     "_utils": "Utils",
     "(route)": "Routes"
   },
+  "editor.quickSuggestions": {
+    "strings": true
+  },
+  "css.validate": false,
+  "editor.inlineSuggest.enabled": true,
   "css.lint.unknownAtRules": "ignore",
   "cSpell.words": ["KAKAO"]
 }
diff --git a/app/(route)/home/layout.tsx b/app/(route)/home/layout.tsx
@@ -3,7 +3,7 @@ import Header from '@/app/_components/shared/header'
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <main>
+    <main className='h-full bg-home-background bg-cover bg-center bg-no-repeat'>
       <Header />
       {children}
       <BottomNavigation />

diff --git a/app/(route)/home/page.tsx b/app/(route)/home/page.tsx
@@ -1,13 +1,21 @@
+import Image from 'next/image'
+
 export default function HomePage() {
   return (
-    <div className='px-8 py-4'>
+    <div className='relative h-full px-8 py-4 pt-16'>
       <h1 className='text-2xl'>오늘의 도달률</h1>
-      <div className='h-fit'>
-        <span className='text-[88px] font-extrabold text-[#8A72FF]'>100</span>
+      <div className='mb-7 flex items-end'>
+        <div className='h-[88px] text-[88px] font-extrabold leading-[88px] text-[#8A72FF]'>100</div>
         <span className='text-[40px] font-extrabold'>%</span>
       </div>
       <div className='text-xl'>🌙 탐사 필요 0</div>
       <div className='mt-3 text-xl'>🌕 탐사 완료 5</div>
+
+      <div className='absolute bottom-16 right-2'>
+        <div className='relative h-[529px] w-[297px]'>
+          <Image src='/images/RED1.png' fill alt='' />
+        </div>
+      </div>
     </div>
   )
 }
diff --git a/app/_components/shared/bottom-navigation.tsx b/app/_components/shared/bottom-navigation.tsx
@@ -1,27 +1,29 @@
 export default function BottomNavigation() {
   return (
-    <div className='fixed bottom-0 left-0 h-16 w-full border-t border-gray-200'>
-      <div className='flex h-full items-center justify-around'>
-        <svg xmlns='http://www.w3.org/2000/svg' width='24' height='28' viewBox='0 0 24 28' fill='none'>
-          <path
-            d='M22.6666 8.68273L14.6667 1.66945C13.9333 1.01351 12.9839 0.650879 12 0.650879C11.0161 0.650879 10.0668 1.01351 9.33339 1.66945L1.33345 8.68273C0.909944 9.06149 0.571989 9.52613 0.342086 10.0457C0.112184 10.5653 -0.00439005 11.1279 0.000126391 11.696V23.3493C0.000126391 24.4101 0.421551 25.4276 1.17169 26.1777C1.92183 26.9278 2.93924 27.3493 4.0001 27.3493H9.33327L9.33339 18.016C9.33339 17.6624 9.47387 17.3232 9.72392 17.0732C9.97396 16.8231 10.3131 16.6827 10.6667 16.6827H13.3334C13.687 16.6827 14.0261 16.8231 14.2762 17.0732C14.5262 17.3232 14.6667 17.6624 14.6667 18.016L14.6666 27.3493H20C21.0608 27.3493 22.0783 26.9278 22.8284 26.1777C23.5785 25.4276 24 24.4101 24 23.3493V11.6827C24.0026 11.1168 23.8851 10.5568 23.6552 10.0396C23.4254 9.52249 23.0884 9.06 22.6666 8.68273Z'
-            fill='#FFFF8E'
-          />
-        </svg>
+    <div className='fixed bottom-0 left-0 z-10 flex h-14 w-full justify-center bg-dodal-main'>
+      <div className='w-full max-w-3xl'>
+        <div className='flex h-full items-center justify-around'>
+          <svg xmlns='http://www.w3.org/2000/svg' width='24' height='28' viewBox='0 0 24 28' fill='none'>
+            <path
+              d='M22.6666 8.68273L14.6667 1.66945C13.9333 1.01351 12.9839 0.650879 12 0.650879C11.0161 0.650879 10.0668 1.01351 9.33339 1.66945L1.33345 8.68273C0.909944 9.06149 0.571989 9.52613 0.342086 10.0457C0.112184 10.5653 -0.00439005 11.1279 0.000126391 11.696V23.3493C0.000126391 24.4101 0.421551 25.4276 1.17169 26.1777C1.92183 26.9278 2.93924 27.3493 4.0001 27.3493H9.33327L9.33339 18.016C9.33339 17.6624 9.47387 17.3232 9.72392 17.0732C9.97396 16.8231 10.3131 16.6827 10.6667 16.6827H13.3334C13.687 16.6827 14.0261 16.8231 14.2762 17.0732C14.5262 17.3232 14.6667 17.6624 14.6667 18.016L14.6666 27.3493H20C21.0608 27.3493 22.0783 26.9278 22.8284 26.1777C23.5785 25.4276 24 24.4101 24 23.3493V11.6827C24.0026 11.1168 23.8851 10.5568 23.6552 10.0396C23.4254 9.52249 23.0884 9.06 22.6666 8.68273Z'
+              fill='#FFFF8E'
+            />
+          </svg>
 
-        <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'>
-          <path
-            d='M23.9597 9.183C23.8841 8.96165 23.7464 8.76723 23.5635 8.62331C23.3805 8.47939 23.1602 8.39216 22.9291 8.3722L16.1104 7.36779L13.0546 1.11136C12.9565 0.906763 12.8032 0.734213 12.6125 0.613479C12.4217 0.492745 12.2012 0.428711 11.9761 0.428711C11.7509 0.428711 11.5304 0.492745 11.3396 0.613479C11.1489 0.734213 10.9957 0.906763 10.8975 1.11136L7.84168 7.35568L1.02296 8.3722C0.801172 8.40404 0.592658 8.49801 0.421083 8.64347C0.249508 8.78892 0.121742 8.98003 0.0522846 9.1951C-0.0112949 9.40527 -0.0170004 9.62895 0.0357803 9.84215C0.0885611 10.0553 0.197836 10.25 0.351877 10.4052L5.30114 15.2458L4.10277 22.1194C4.05999 22.3463 4.08239 22.5808 4.16733 22.7952C4.25227 23.0096 4.3962 23.195 4.58212 23.3295C4.76333 23.4604 4.97707 23.5376 5.19934 23.5525C5.4216 23.5675 5.6436 23.5196 5.84041 23.4142L11.9761 20.1832L18.0877 23.4263C18.2559 23.5222 18.4459 23.5722 18.639 23.5716C18.8928 23.5725 19.1404 23.492 19.346 23.3416C19.5319 23.2071 19.6759 23.0217 19.7608 22.8073C19.8458 22.5929 19.8682 22.3584 19.8254 22.1315L18.627 15.2579L23.5763 10.4173C23.7493 10.2693 23.8772 10.0748 23.945 9.85626C24.0129 9.63776 24.018 9.4043 23.9597 9.183ZM16.5898 14.0236C16.4492 14.1608 16.3441 14.3307 16.2835 14.5185C16.2229 14.7062 16.2088 14.9061 16.2422 15.1006L17.1051 20.1711L12.5992 17.7508C12.4258 17.6576 12.2324 17.6088 12.036 17.6088C11.8395 17.6088 11.6461 17.6576 11.4727 17.7508L6.96687 20.1711L7.8297 15.1006C7.86318 14.9061 7.84901 14.7062 7.78843 14.5185C7.72786 14.3307 7.62271 14.1608 7.48217 14.0236L3.88707 10.3931L8.9322 9.65495C9.12633 9.62768 9.31088 9.55274 9.46967 9.4367C9.62845 9.32067 9.75663 9.16707 9.84296 8.98937L11.9761 4.37874L14.229 9.00148C14.3153 9.17917 14.4435 9.33277 14.6023 9.44881C14.7611 9.56485 14.9456 9.63978 15.1397 9.66705L20.1849 10.4052L16.5898 14.0236Z'
-            fill='white'
-          />
-        </svg>
+          <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'>
+            <path
+              d='M23.9597 9.183C23.8841 8.96165 23.7464 8.76723 23.5635 8.62331C23.3805 8.47939 23.1602 8.39216 22.9291 8.3722L16.1104 7.36779L13.0546 1.11136C12.9565 0.906763 12.8032 0.734213 12.6125 0.613479C12.4217 0.492745 12.2012 0.428711 11.9761 0.428711C11.7509 0.428711 11.5304 0.492745 11.3396 0.613479C11.1489 0.734213 10.9957 0.906763 10.8975 1.11136L7.84168 7.35568L1.02296 8.3722C0.801172 8.40404 0.592658 8.49801 0.421083 8.64347C0.249508 8.78892 0.121742 8.98003 0.0522846 9.1951C-0.0112949 9.40527 -0.0170004 9.62895 0.0357803 9.84215C0.0885611 10.0553 0.197836 10.25 0.351877 10.4052L5.30114 15.2458L4.10277 22.1194C4.05999 22.3463 4.08239 22.5808 4.16733 22.7952C4.25227 23.0096 4.3962 23.195 4.58212 23.3295C4.76333 23.4604 4.97707 23.5376 5.19934 23.5525C5.4216 23.5675 5.6436 23.5196 5.84041 23.4142L11.9761 20.1832L18.0877 23.4263C18.2559 23.5222 18.4459 23.5722 18.639 23.5716C18.8928 23.5725 19.1404 23.492 19.346 23.3416C19.5319 23.2071 19.6759 23.0217 19.7608 22.8073C19.8458 22.5929 19.8682 22.3584 19.8254 22.1315L18.627 15.2579L23.5763 10.4173C23.7493 10.2693 23.8772 10.0748 23.945 9.85626C24.0129 9.63776 24.018 9.4043 23.9597 9.183ZM16.5898 14.0236C16.4492 14.1608 16.3441 14.3307 16.2835 14.5185C16.2229 14.7062 16.2088 14.9061 16.2422 15.1006L17.1051 20.1711L12.5992 17.7508C12.4258 17.6576 12.2324 17.6088 12.036 17.6088C11.8395 17.6088 11.6461 17.6576 11.4727 17.7508L6.96687 20.1711L7.8297 15.1006C7.86318 14.9061 7.84901 14.7062 7.78843 14.5185C7.72786 14.3307 7.62271 14.1608 7.48217 14.0236L3.88707 10.3931L8.9322 9.65495C9.12633 9.62768 9.31088 9.55274 9.46967 9.4367C9.62845 9.32067 9.75663 9.16707 9.84296 8.98937L11.9761 4.37874L14.229 9.00148C14.3153 9.17917 14.4435 9.33277 14.6023 9.44881C14.7611 9.56485 14.9456 9.63978 15.1397 9.66705L20.1849 10.4052L16.5898 14.0236Z'
+              fill='white'
+            />
+          </svg>
 
-        <svg xmlns='http://www.w3.org/2000/svg' width='24' height='26' viewBox='0 0 24 26' fill='none'>
-          <path
-            d='M16.4561 13.8557C17.6384 12.9255 18.5013 11.65 18.9249 10.2065C19.3485 8.76301 19.3116 7.22341 18.8195 5.80187C18.3273 4.38033 17.4043 3.14754 16.1788 2.27501C14.9534 1.40248 13.4864 0.933594 11.9821 0.933594C10.4778 0.933594 9.01085 1.40248 7.78541 2.27501C6.55997 3.14754 5.63695 4.38033 5.14477 5.80187C4.6526 7.22341 4.61573 8.76301 5.03931 10.2065C5.46289 11.65 6.32585 12.9255 7.50813 13.8557C5.48227 14.6673 3.71464 16.0135 2.39367 17.7507C1.07271 19.4879 0.247932 21.5511 0.00727395 23.7202C-0.0101461 23.8785 0.00379671 24.0388 0.0483061 24.1917C0.0928155 24.3447 0.16702 24.4874 0.266682 24.6117C0.46796 24.8628 0.760716 25.0235 1.08055 25.0587C1.40038 25.0939 1.72109 25.0006 1.97212 24.7993C2.22315 24.598 2.38394 24.3053 2.41913 23.9855C2.68393 21.6281 3.80797 19.4509 5.5765 17.87C7.34503 16.289 9.63406 15.415 12.0062 15.415C14.3784 15.415 16.6674 16.289 18.436 17.87C20.2045 19.4509 21.3285 21.6281 21.5933 23.9855C21.6261 24.2818 21.7675 24.5554 21.9902 24.7536C22.2129 24.9519 22.5011 25.0605 22.7993 25.0587H22.9319C23.248 25.0224 23.537 24.8625 23.7357 24.614C23.9345 24.3656 24.027 24.0486 23.9931 23.7322C23.7513 21.557 22.9221 19.4885 21.5944 17.7487C20.2666 16.0088 18.4904 14.663 16.4561 13.8557ZM11.9821 12.9995C11.0281 12.9995 10.0955 12.7166 9.30221 12.1865C8.50896 11.6565 7.89069 10.9031 7.52559 10.0217C7.1605 9.14031 7.06497 8.17042 7.2511 7.23472C7.43722 6.29901 7.89663 5.43951 8.57124 4.7649C9.24585 4.09029 10.1054 3.63088 11.0411 3.44476C11.9768 3.25863 12.9466 3.35416 13.8281 3.71925C14.7095 4.08435 15.4628 4.70262 15.9929 5.49587C16.5229 6.28912 16.8058 7.22174 16.8058 8.17577C16.8058 9.4551 16.2976 10.682 15.393 11.5866C14.4884 12.4913 13.2614 12.9995 11.9821 12.9995Z'
-            fill='white'
-          />
-        </svg>
+          <svg xmlns='http://www.w3.org/2000/svg' width='24' height='26' viewBox='0 0 24 26' fill='none'>
+            <path
+              d='M16.4561 13.8557C17.6384 12.9255 18.5013 11.65 18.9249 10.2065C19.3485 8.76301 19.3116 7.22341 18.8195 5.80187C18.3273 4.38033 17.4043 3.14754 16.1788 2.27501C14.9534 1.40248 13.4864 0.933594 11.9821 0.933594C10.4778 0.933594 9.01085 1.40248 7.78541 2.27501C6.55997 3.14754 5.63695 4.38033 5.14477 5.80187C4.6526 7.22341 4.61573 8.76301 5.03931 10.2065C5.46289 11.65 6.32585 12.9255 7.50813 13.8557C5.48227 14.6673 3.71464 16.0135 2.39367 17.7507C1.07271 19.4879 0.247932 21.5511 0.00727395 23.7202C-0.0101461 23.8785 0.00379671 24.0388 0.0483061 24.1917C0.0928155 24.3447 0.16702 24.4874 0.266682 24.6117C0.46796 24.8628 0.760716 25.0235 1.08055 25.0587C1.40038 25.0939 1.72109 25.0006 1.97212 24.7993C2.22315 24.598 2.38394 24.3053 2.41913 23.9855C2.68393 21.6281 3.80797 19.4509 5.5765 17.87C7.34503 16.289 9.63406 15.415 12.0062 15.415C14.3784 15.415 16.6674 16.289 18.436 17.87C20.2045 19.4509 21.3285 21.6281 21.5933 23.9855C21.6261 24.2818 21.7675 24.5554 21.9902 24.7536C22.2129 24.9519 22.5011 25.0605 22.7993 25.0587H22.9319C23.248 25.0224 23.537 24.8625 23.7357 24.614C23.9345 24.3656 24.027 24.0486 23.9931 23.7322C23.7513 21.557 22.9221 19.4885 21.5944 17.7487C20.2666 16.0088 18.4904 14.663 16.4561 13.8557ZM11.9821 12.9995C11.0281 12.9995 10.0955 12.7166 9.30221 12.1865C8.50896 11.6565 7.89069 10.9031 7.52559 10.0217C7.1605 9.14031 7.06497 8.17042 7.2511 7.23472C7.43722 6.29901 7.89663 5.43951 8.57124 4.7649C9.24585 4.09029 10.1054 3.63088 11.0411 3.44476C11.9768 3.25863 12.9466 3.35416 13.8281 3.71925C14.7095 4.08435 15.4628 4.70262 15.9929 5.49587C16.5229 6.28912 16.8058 7.22174 16.8058 8.17577C16.8058 9.4551 16.2976 10.682 15.393 11.5866C14.4884 12.4913 13.2614 12.9995 11.9821 12.9995Z'
+              fill='white'
+            />
+          </svg>
+        </div>
       </div>
     </div>
   )

diff --git a/app/_components/shared/header.tsx b/app/_components/shared/header.tsx
@@ -1,8 +1,8 @@
 export default function Header() {
   return (
-    <header className='sticky flex h-16 w-full items-center justify-between px-6'>
-      <div />
-      <div>
+    <header className='fixed left-0 top-11 z-10 flex h-11 w-full items-center justify-center'>
+      <div className='flex w-full max-w-3xl justify-between px-4 py-1'>
+        <div />
         <svg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36' fill='none'>
           <path
             d='M9.75372 10.4628C9.77799 10.2201 9.79012 10.0988 9.80342 9.99392C10.3 6.07631 13.5809 3.10714 17.5285 3.00279C17.6342 3 17.7561 3 18 3C18.2439 3 18.3658 3 18.4715 3.00279C22.4191 3.10714 25.7 6.07631 26.1966 9.99392C26.2099 10.0988 26.222 10.2201 26.2463 10.4628L26.6762 14.762C26.8009 16.0093 26.8633 16.6329 27.019 17.2322C27.1393 17.6954 27.301 18.1469 27.502 18.5813C27.7621 19.1432 28.1098 19.6647 28.8051 20.7076L30.9271 23.8906C31.8396 25.2593 32.2958 25.9437 32.0132 26.4719C31.7305 27 30.908 27 29.263 27H6.73703C5.09201 27 4.2695 27 3.98684 26.4719C3.70419 25.9437 4.16044 25.2593 5.07293 23.8906L7.19492 20.7076C7.89023 19.6647 8.23788 19.1432 8.49798 18.5813C8.69903 18.1469 8.86069 17.6954 8.98103 17.2322C9.13671 16.6329 9.19907 16.0093 9.3238 14.762L9.75372 10.4628Z'

diff --git a/app/_styles/globals.css b/app/_styles/globals.css
@@ -4,4 +4,9 @@
 
 html {
   background-color: #140a29;
+  height: 100%;
+}
+
+body {
+  height: 100%;
 }
diff --git a/public/images/RED1.png b/public/images/RED1.png
diff --git a/public/images/home_bg.png b/public/images/home_bg.png
diff --git a/public/images/moon_bg.png b/public/images/moon_bg.png
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -8,8 +8,7 @@ const config: Config = {
   theme: {
     extend: {
       backgroundImage: {
-        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+        'home-background': "url('/images/home_bg.png')",
       },
       backgroundColor: {
         'dodal-main': '#140A29',