Merge branch 'feature/#61-pose' into feature/path_refector

MaeumGaGym · Apr 25, 2024 · 2c2ef68 · 2c2ef68
2 parents 7d806e6 + 03fef6a
commit 2c2ef68
Show file tree

Hide file tree

Showing 14 changed files with 405 additions and 7 deletions.
diff --git a/packages/ui/assets/Enter.tsx b/packages/ui/assets/Enter.tsx
@@ -0,0 +1,17 @@
+interface PropsType {
+  size?: number
+  onClick?: () => void
+  className?: string
+}
+
+export const Enter = ({ size = 24, onClick, className }: PropsType) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="39" height="16" fill="none" viewBox="0 0 39 16">
+      <rect width="39" height="16" fill="#F0F2F5" rx="4" />
+      <path
+        fill="#939599"
+        d="M4.654 12V4.93h4.6v1.064h-3.33v1.934H9.01v1.064H5.924v1.934h3.35V12h-4.62Zm11.381-7.07V12h-1.133l-3.35-4.834h-.058V12h-1.27V4.93h1.153l3.33 4.834h.068V4.93h1.26Zm.746 1.064V4.93h5.635v1.064h-2.178V12h-1.27V5.994h-2.187ZM23.162 12V4.93h4.6v1.064h-3.33v1.934h3.086v1.064h-3.086v1.934h3.35V12h-4.62Zm5.57 0V4.93h2.657c1.62 0 2.485.908 2.49 2.256-.005.961-.444 1.674-1.274 2.011L34.133 12h-1.416L31.33 9.412h-1.328V12h-1.27Zm1.27-3.652h1.191c.957.005 1.387-.406 1.387-1.162 0-.752-.43-1.192-1.387-1.192h-1.191v2.354Z"
+      />
+    </svg>
+  )
+}
diff --git a/packages/ui/assets/Filter.tsx b/packages/ui/assets/Filter.tsx
@@ -0,0 +1,26 @@
+interface PropsType {
+  size?: number
+  onClick?: () => void
+  className?: string
+}
+
+export const Filter = ({ size = 24, onClick, className }: PropsType) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      fill="none"
+      viewBox="0 0 24 24"
+      onClick={onClick}
+      className={`${onClick ? 'cursor-pointer' : ''} ${className}`}
+    >
+      <path
+        fill="currentColor"
+        fill-rule="evenodd"
+        d="M7 2a1 1 0 0 0-1 1v7.126a4.002 4.002 0 0 0 0 7.748V21a1 1 0 1 0 2 0v-3.126a4.002 4.002 0 0 0 0-7.748V3a1 1 0 0 0-1-1Zm0 10a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM17 2a1 1 0 0 0-1 1v3.126a4.002 4.002 0 0 0 0 7.748V21a1 1 0 1 0 2 0v-7.126a4.002 4.002 0 0 0 0-7.748V3a1 1 0 0 0-1-1Zm0 6a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z"
+        clip-rule="evenodd"
+      />
+    </svg>
+  )
+}
diff --git a/packages/ui/assets/UpDownArrow.tsx b/packages/ui/assets/UpDownArrow.tsx
@@ -0,0 +1,24 @@
+interface PropsType {
+  size?: number
+  onClick?: () => void
+  className?: string
+}
+
+export const UpDownArrow = ({ size = 24, onClick, className = '' }: PropsType) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      fill="none"
+      viewBox="0 0 24 24"
+      onClick={onClick}
+      className={`${onClick ? 'cursor-pointer' : ''} ${className}`}
+    >
+      <path
+        fill="currentColor"
+        d="M7.707 2.293a1 1 0 0 0-1.414 0l-4 4a1 1 0 0 0 1.414 1.414L6 5.414V21.05c0 .525.448.95 1 .95s1-.425 1-.95V5.414l2.293 2.293a1 1 0 1 0 1.414-1.414l-4-4ZM16 2.95c0-.525.448-.95 1-.95s1 .425 1 .95v15.636l2.293-2.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L16 18.586V2.95Z"
+      />
+    </svg>
+  )
+}
diff --git a/packages/ui/assets/index.tsx b/packages/ui/assets/index.tsx
@@ -54,5 +54,8 @@ export * from './AppleLogo'
 export * from './GoogleLogo'
 export * from './KakaoLogo'
 export * from './HalfStar'
+export * from './Filter'
+export * from './UpDownArrow'
+export * from './Enter'
 export { default as HeaderLogo } from './HeaderLogo.png'
 export { default as WhiteLogo } from './WhiteLogo.png'
diff --git a/packages/ui/components/Header.tsx b/packages/ui/components/Header.tsx
@@ -26,7 +26,7 @@ export const Header = () => {
           <Button kind="white" fontSize="small" className="h-[42px]" onClick={() => router.push('/selfcare')}>
             자기관리
           </Button>
-          <Button kind="white" fontSize="small" className="h-[42px]" onClick={() => router.push('/pose')}>
+          <Button kind="white" fontSize="small" className="h-[42px]" onClick={() => router.push('/poses')}>
             운동자세
           </Button>
           <Button kind="white" fontSize="small" className="h-[42px]" onClick={() => router.push('/pickle')}>

diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx
@@ -1,3 +1,3 @@
 'use client'
 export * from './assets'
-export * from './components'
+export * from './components'
diff --git a/service/client/package.json b/service/client/package.json
@@ -17,7 +17,7 @@
     "axios": "^1.6.5",
     "framer-motion": "^10.17.12",
     "hls.js": "^1.5.0",
-    "next": "^14.0.4",
+    "next": "latest",
     "prettier": "3.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -27,8 +27,8 @@
     "sharp": "^0.33.1"
   },
   "devDependencies": {
-    "@types/node": "^20.10.8",
-    "@types/react": "^18.2.47",
+    "@types/node": "20.11.19",
+    "@types/react": "18.2.57",
     "@types/react-dom": "^18.2.18",
     "@types/redux-logger": "^3.0.12",
     "@typescript-eslint/eslint-plugin": "^6.19.1",
@@ -40,6 +40,6 @@
     "eslint-plugin-prettier": "^5.1.3",
     "postcss": "^8.4.33",
     "tailwindcss": "^3.4.1",
-    "typescript": "^5.3.3"
+    "typescript": "5.3.3"
   }
 }
diff --git a/service/client/src/apis/axios.ts b/service/client/src/apis/axios.ts
@@ -1,7 +1,7 @@
 import axios, { AxiosError } from 'axios'
 
 export const instance = axios.create({
-  baseURL: process.env.NEXT_PUBLIC_BASE_URL,
+  baseURL: 'https://stag-server.xquare.app/maeumgagym',
   timeout: 30000,
 })
 

diff --git a/service/client/src/components/poseCard.tsx b/service/client/src/components/poseCard.tsx
@@ -0,0 +1,22 @@
+import Image from 'next/image'
+import { title } from 'process'
+import React from 'react'
+interface poseProps {
+  exerciseName: string
+  category: string
+  src: string[]
+  onClick?: () => void
+}
+export const PoseCard = ({ exerciseName, category, src, onClick }: poseProps) => {
+  return (
+    <div onClick={onClick} className="gap-x-2 w-[162px] gap-[8px] flex flex-col">
+      <div className="rounded-lg h-[162px] w-[162px] p-9px bg-gray25 flex items-center justify-center">
+        <Image height={144} width={144} src={src.join('')} alt={exerciseName} />
+      </div>
+      <div className="px-[4px] gap-[4px] flex w-full flex-col">
+        <p className="text-gray900 text-labelMedium">{exerciseName}</p>
+        <p className="text-gray600 text-bodySmall">{category}</p>
+      </div>
+    </div>
+  )
+}
diff --git a/service/user/src/apis/pose/getPoses.ts b/service/user/src/apis/pose/getPoses.ts
@@ -0,0 +1,18 @@
+import { getCookie } from './../../../../main/src/utils/cookie'
+import { instance } from '../axios'
+
+export const getPoses = async (access_token: string) => {
+  return await instance({
+    method: 'GET',
+    url: `/poses`,
+    headers: {
+      // 'X-XSRF-TOKEN': rf_token,
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${access_token}`,
+    },
+  })
+    .then(res => res.data)
+    .catch(err => {
+      console.log('이런', err)
+    })
+}
diff --git a/service/user/src/app/poses/PoseExplain.tsx b/service/user/src/app/poses/PoseExplain.tsx
@@ -0,0 +1,73 @@
+import { Button } from '@package/ui'
+import Image from 'next/image'
+import React from 'react'
+import PushUp from './PushUp.png'
+
+interface PosesType {
+  bodyPart?: string
+}
+
+const parts = [
+  '양팔을 가슴 옆에 두고 바닥에 엎드립니다.',
+  '복근과 둔근에 힘을 준 상태로 팔꿈치를 피며 올라옵니다.',
+  '천천히 팔꿈치를 굽히며 시작 자세로 돌아갑니다.',
+]
+
+const warning = ['양팔을 가슴 옆에 두고 바닥에 엎드립니다.', '복근과 둔근에 힘을 준 상태로 팔꿈치를 피며 올라옵니다.']
+
+function PoseExplain({ bodyPart }: PosesType) {
+  return (
+    <div className="flex w-full justify-center">
+      <div className="flex flex-col items-center px-[32px] pt-[100px] pb-[240px] w-full max-w-[800px]">
+        <div className="flex flex-col max-w-[800px] gap-[64px] items-center w-full">
+          <div className="flex w-full items-center justify-between">
+            <div className="flex text-titleMedium">
+              <p>운동자세</p>
+              <p className="text-gray400"> / 가슴</p>
+            </div>
+            <div className="flex px-[12px] py-[8px] rounded-lg text-labelSmall text-blue500 bg-blue50">루틴에 추가</div>
+          </div>
+          <div className="flex flex-col items-center gap-[40px] w-full">
+            <div className="w-full h-[320px] rounded-xl flex justify-center items-center bg-gray25">
+              <Image src={PushUp} alt="" width={248} height={248} />
+            </div>
+            <div className="flex flex-col gap-[16px] w-full">
+              <div className="flex flex-col gap-[4px]">
+                <p className="text-titleMedium text-gray500">푸시업</p>
+                <p className="text-titleLarge text-gray900">팔굽혀펴기</p>
+              </div>
+              <p className="text-bodyLarge text-gray400">가슴 · 맨몸</p>
+            </div>
+          </div>
+          <div className="flex flex-col gap-[24px] w-full">
+            <p className="text-titleMedium">운동 방법</p>
+            <div className="flex flex-col gap-[16px]">
+              {parts.map((i, j) => (
+                <div className="flex">
+                  <p className="text-titleMedium text-gray200 w-[52px]">{String(j + 1).padStart(2, '0')}</p>
+                  <div className="py-[6px] text-bodyMedium">{i}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+          <div className="flex flex-col gap-[24px] w-full">
+            <p className="text-titleMedium">주의사항</p>
+            <div className="flex flex-col gap-[16px]">
+              {warning.map((i, j) => (
+                <div className="flex">
+                  <p className="text-titleMedium text-gray200 w-[52px]">{String(j + 1).padStart(2, '0')}</p>
+                  <div className="py-[6px] text-bodyMedium">{i}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+          <div className="flex w-full gap-[24px]">
+            <p className="text-titleMedium">관련 피클</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default PoseExplain
diff --git a/service/user/src/app/poses/PoseSearchModal.tsx b/service/user/src/app/poses/PoseSearchModal.tsx
@@ -0,0 +1,92 @@
+'use client'
+import { Close, Enter, Search, UpDownArrow } from '@package/ui'
+import Image from 'next/image'
+import { SetStateAction, useState } from 'react'
+
+interface propsType {
+  searchName?: string
+}
+
+function SearchHistory({ searchName }: propsType) {
+  return (
+    <div className="w-full flex justify-between px-[24px] py-[12px] items-center">
+      <p className="text-bodyMedium text-gray800">{searchName}</p>
+      <Close size={20} className="text-gray300" />
+    </div>
+  )
+}
+
+function PoseSearchResult() {
+  return (
+    <div className="w-full flex gap-[18px] px-[24px] py-[12px] items-center">
+      <div className="w-[64px] h-[64px] flex p-[3.56px] rounded-lg bg-gray25">
+        <Image src="" alt="" width={56.89} height={56.89} />
+      </div>
+      <div className="flex flex-col gap-[4px] justify-center">
+        <p className="text-bodyMedium text-gray800">맨몸 스플릿 스쿼트</p>
+        <p className="text-bodySmall text-gray400">맨몸 스플릿 스쿼트</p>
+      </div>
+    </div>
+  )
+}
+
+function PoseSearchModal({ onClick }: any) {
+  const [searchValue, setSearchValue] = useState<string>('')
+  const valueChange = (event: { target: { value: SetStateAction<string> } }) => {
+    setSearchValue(event.target.value)
+    console.log(event.target.value)
+  }
+  return (
+    <div
+      onClick={onClick}
+      className="fixed w-screen h-screen top-0 left-0 z-30 bg-gray500 bg-opacity-25 flex justify-center items-center"
+    >
+      <div className="w-[640px] h-[540px] bg-white py-[12px] flex-col flex gap-2 rounded-2xl">
+        <div className="h-[58px] w-full flex items-center gap-[12px] px-[24px]">
+          <Search size={28} className="text-gray400" />
+          <input
+            className="w-full text-labelLarge placeholder:text-gray400 border-none outline-none"
+            placeholder="검색할 자세 이름을 입력해주세요.."
+            type="text"
+            value={searchValue}
+            onChange={valueChange}
+          />
+        </div>
+        <div className="h-[1px] w-full bg-gray100" />
+        {searchValue ? (
+          <div className="w-full h-full flex-col flex overflow-y-scroll">
+            <div className="w-full flex items-center gap-[8px] px-[24px] py-[8px]">
+              <p className="text-labelSmall">검색 결과</p>
+              <p className="text-labelSmall text-blue500">6</p>
+            </div>
+            <PoseSearchResult />
+            <PoseSearchResult />
+            <PoseSearchResult />
+            <PoseSearchResult />
+            <PoseSearchResult />
+          </div>
+        ) : (
+          <div className="w-full h-full flex-col flex scroll">
+            <div className="w-full flex items-center justify-between px-[24px] py-[8px]">
+              <p className="text-labelSmall">최근 검색어</p>
+              <p className="text-labelSmall text-gray600">검색기록 삭제</p>
+            </div>
+          </div>
+        )}
+        <div className="h-[1px] w-full bg-gray100" />
+        <div className="px-[24px] w-full flex items-center gap-[18px]">
+          <div className="flex items-center gap-[4px]">
+            <UpDownArrow size={14} className="text-gray400" />
+            <p className="text-bodySmall text-gray400">선택</p>
+          </div>
+          <div className="flex items-center gap-[4px]">
+            <Enter />
+            <p className="text-bodySmall text-gray400">검색</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default PoseSearchModal
diff --git a/service/user/src/app/poses/PushUp.png b/service/user/src/app/poses/PushUp.png