💄 add challenge detail UI

potenday-project · Dec 16, 2023 · 6e02082 · 6e02082
1 parent bc3a63d
commit 6e02082
Show file tree

Hide file tree

Showing 3 changed files with 171 additions and 0 deletions.
diff --git a/app/(route)/challenge/[id]/layout.tsx b/app/(route)/challenge/[id]/layout.tsx
@@ -0,0 +1,26 @@
+'use client'
+
+import { useRouter } from 'next/navigation'
+
+import BottomNavigation from '@/app/_components/shared/bottom-navigation'
+import Header from '@/app/_components/shared/header'
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  const router = useRouter()
+
+  return (
+    <div className='flex h-full flex-col bg-challenge-background bg-cover bg-center bg-no-repeat pb-20 pt-28'>
+      <Header>
+        <Header.BackIcon
+          onClick={() => {
+            router.back()
+          }}
+        />
+        <Header.Title>챌린지</Header.Title>
+        <div className='w-9' />
+      </Header>
+      {children}
+      <BottomNavigation selected='challenge' />
+    </div>
+  )
+}
diff --git a/app/(route)/challenge/[id]/page.tsx b/app/(route)/challenge/[id]/page.tsx
@@ -0,0 +1,135 @@
+'use client'
+
+import Image from 'next/image'
+
+import CameraIcon from '@/app/_components/icons/CameraIcon'
+
+export default function ChallengeDetailPage() {
+  return (
+    <div className='flex-1 overflow-y-auto'>
+      <div className='mx-10 flex flex-col justify-center border-b border-[#A6A6A6] pb-4'>
+        <div className='flex justify-end text-[28px] font-extrabold text-[#D9D9D9]'>0%</div>
+        <div className='flex flex-col gap-[10px]'>
+          <span className='h-4 w-fit rounded-[2px] bg-[#FFCD4B] px-1 text-[10px]'>운동</span>
+          <div className='flex items-center justify-between'>
+            <span className='text-[22px] font-semibold'>하루 스쿼트 100개</span>
+            <button
+              onClick={async () => {
+                const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent)
+
+                if (isMobile) {
+                  // 모바일에서는 카메라로 연결
+                  try {
+                    const stream = await navigator.mediaDevices.getUserMedia({ video: true })
+                    // 여기에서 웹캠 스트림을 사용하여 추가적인 작업 수행
+                    console.log('Camera stream:', stream)
+                  } catch (error) {
+                    console.error('Error accessing camera:', error)
+                  }
+                } else {
+                  // 데스크탑에서는 파일 선택
+                  const input = document.createElement('input')
+                  input.type = 'file'
+                  input.accept = 'image/*' // 미디어 타입에 따라 변경
+                  input.onchange = (event) => {
+                    const file = event.target?.files[0]
+                    // 여기에서 파일을 사용하여 추가적인 작업 수행
+                    console.log('Selected file:', file)
+                  }
+                  input.click()
+                }
+              }}
+            >
+              <CameraIcon />
+            </button>
+          </div>
+          <div className='flex items-center gap-[10px]'>
+            <div className='relative h-6 w-6 rounded-full bg-white'>
+              <Image src='https://dodals3.s3.ap-northeast-2.amazonaws.com/asset/red.png' fill alt='' />
+            </div>
+            <div className='flex items-center'>
+              <span className='text-xs text-[#FFFF8E]'>은하수</span>
+              <span className='text-xs text-[#A6A6A6]'>님과 챌린지 중! · 헬스장 1개월 이용권</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className='relative mx-auto max-w-[325px] pt-[70px]'>
+        <Image
+          src='https://dodals3.s3.ap-northeast-2.amazonaws.com/asset/challenge_s.png'
+          width={325}
+          height={382}
+          alt=''
+        />
+        <div className='absolute left-0 top-[26px] z-10 flex gap-[10px]'>
+          <Image
+            src='https://dodals3.s3.ap-northeast-2.amazonaws.com/asset/stamp_unactive.png'
+            width={88}
+            height={88}
+            alt=''
+          />
+          <Image
+            src='https://dodals3.s3.ap-northeast-2.amazonaws.com/asset/stamp_unactive.png'
+            width={88}
+            height={88}
+            alt=''
+          />
+          <Image
+            src='https://dodals3.s3.ap-northeast-2.amazonaws.com/asset/stamp_unactive.png'
+            width={88}
+            height={88}
+            alt=''
+          />
+        </div>
+        <div className='absolute left-[50px] top-[150px] z-10 flex gap-[10px]'>
+          <Image
+            src='https://dodals3.s3.ap-northeast-2.amazonaws.com/asset/stamp_unactive.png'
+            width={88}
+            height={88}
+            alt=''
+          />
+          <Image
+            src='https://dodals3.s3.ap-northeast-2.amazonaws.com/asset/stamp_unactive.png'
+            width={88}
+            height={88}
+            alt=''
+          />
+        </div>
+        <div className='absolute left-0 top-[280px] z-10 flex gap-[10px]'>
+          <Image
+            src='https://dodals3.s3.ap-northeast-2.amazonaws.com/asset/stamp_unactive.png'
+            width={88}
+            height={88}
+            alt=''
+          />
+          <Image
+            src='https://dodals3.s3.ap-northeast-2.amazonaws.com/asset/stamp_unactive.png'
+            width={88}
+            height={88}
+            alt=''
+          />
+          <Image
+            src='https://dodals3.s3.ap-northeast-2.amazonaws.com/asset/stamp_unactive.png'
+            width={88}
+            height={88}
+            alt=''
+          />
+        </div>
+        <div className='absolute left-[50px] top-[400px] z-10 flex gap-[10px]'>
+          <Image
+            src='https://dodals3.s3.ap-northeast-2.amazonaws.com/asset/stamp_unactive.png'
+            width={88}
+            height={88}
+            alt=''
+          />
+          <Image
+            src='https://dodals3.s3.ap-northeast-2.amazonaws.com/asset/stamp_unactive.png'
+            width={88}
+            height={88}
+            alt=''
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/app/_components/icons/CameraIcon.tsx b/app/_components/icons/CameraIcon.tsx
@@ -0,0 +1,10 @@
+export default function CameraIcon() {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' width='25' height='24' viewBox='0 0 25 24' fill='none'>
+      <path
+        d='M20.75 10.5C20.4848 10.5 20.2304 10.6054 20.0429 10.7929C19.8554 10.9804 19.75 11.2348 19.75 11.5V18.5C19.75 18.7652 19.6446 19.0196 19.4571 19.2071C19.2696 19.3946 19.0152 19.5 18.75 19.5H4.75C4.48478 19.5 4.23043 19.3946 4.04289 19.2071C3.85536 19.0196 3.75 18.7652 3.75 18.5V10.5C3.75 10.2348 3.85536 9.98043 4.04289 9.79289C4.23043 9.60536 4.48478 9.5 4.75 9.5H6.75C6.96807 9.51138 7.18386 9.45107 7.36443 9.32829C7.545 9.2055 7.68042 9.02698 7.75 8.82L8.29 7.18C8.35709 6.98138 8.4849 6.80887 8.65537 6.68684C8.82584 6.56482 9.03036 6.49946 9.24 6.5H14.75C15.0152 6.5 15.2696 6.39464 15.4571 6.20711C15.6446 6.01957 15.75 5.76522 15.75 5.5C15.75 5.23478 15.6446 4.98043 15.4571 4.79289C15.2696 4.60536 15.0152 4.5 14.75 4.5H9.19C8.56155 4.50118 7.94933 4.69968 7.43977 5.06751C6.9302 5.43533 6.54901 5.95389 6.35 6.55L6.03 7.55H4.75C3.95435 7.55 3.19129 7.86607 2.62868 8.42868C2.06607 8.99129 1.75 9.75435 1.75 10.55V18.55C1.75 19.3456 2.06607 20.1087 2.62868 20.6713C3.19129 21.2339 3.95435 21.55 4.75 21.55H18.75C19.5456 21.55 20.3087 21.2339 20.8713 20.6713C21.4339 20.1087 21.75 19.3456 21.75 18.55V11.55C21.7568 11.4145 21.7359 11.2791 21.6887 11.1519C21.6415 11.0248 21.5689 10.9086 21.4754 10.8103C21.3818 10.7121 21.2693 10.634 21.1446 10.5806C21.0199 10.5273 20.8856 10.4998 20.75 10.5ZM11.75 9.5C10.9589 9.5 10.1855 9.7346 9.52772 10.1741C8.86992 10.6136 8.35723 11.2384 8.05448 11.9693C7.75173 12.7002 7.67252 13.5044 7.82686 14.2804C7.9812 15.0563 8.36216 15.769 8.92157 16.3284C9.48098 16.8878 10.1937 17.2688 10.9696 17.4231C11.7456 17.5775 12.5498 17.4983 13.2807 17.1955C14.0116 16.8928 14.6364 16.3801 15.0759 15.7223C15.5154 15.0645 15.75 14.2911 15.75 13.5C15.75 12.4391 15.3286 11.4217 14.5784 10.6716C13.8283 9.92143 12.8109 9.5 11.75 9.5ZM11.75 15.5C11.3544 15.5 10.9678 15.3827 10.6389 15.1629C10.31 14.9432 10.0536 14.6308 9.90224 14.2654C9.75087 13.8999 9.71126 13.4978 9.78843 13.1098C9.8656 12.7219 10.0561 12.3655 10.3358 12.0858C10.6155 11.8061 10.9719 11.6156 11.3598 11.5384C11.7478 11.4613 12.1499 11.5009 12.5154 11.6522C12.8808 11.8036 13.1932 12.06 13.4129 12.3889C13.6327 12.7178 13.75 13.1044 13.75 13.5C13.75 14.0304 13.5393 14.5391 13.1642 14.9142C12.7891 15.2893 12.2804 15.5 11.75 15.5ZM22.75 4.5H21.75V3.5C21.75 3.23478 21.6446 2.98043 21.4571 2.79289C21.2696 2.60536 21.0152 2.5 20.75 2.5C20.4848 2.5 20.2304 2.60536 20.0429 2.79289C19.8554 2.98043 19.75 3.23478 19.75 3.5V4.5H18.75C18.4848 4.5 18.2304 4.60536 18.0429 4.79289C17.8554 4.98043 17.75 5.23478 17.75 5.5C17.75 5.76522 17.8554 6.01957 18.0429 6.20711C18.2304 6.39464 18.4848 6.5 18.75 6.5H19.75V7.5C19.75 7.76522 19.8554 8.01957 20.0429 8.20711C20.2304 8.39464 20.4848 8.5 20.75 8.5C21.0152 8.5 21.2696 8.39464 21.4571 8.20711C21.6446 8.01957 21.75 7.76522 21.75 7.5V6.5H22.75C23.0152 6.5 23.2696 6.39464 23.4571 6.20711C23.6446 6.01957 23.75 5.76522 23.75 5.5C23.75 5.23478 23.6446 4.98043 23.4571 4.79289C23.2696 4.60536 23.0152 4.5 22.75 4.5Z'
+        fill='#D9D9D9'
+      />
+    </svg>
+  )
+}