Merge branch 'dev' into bug/207-pick-academy-bug

Guzzing · Nov 28, 2023 · 00a0f67 · 00a0f67
2 parents 0ebd548 + fd940cb
commit 00a0f67
Show file tree

Hide file tree

Showing 3 changed files with 111 additions and 48 deletions.
diff --git a/src/components/common/progressBar/ProgressBar.tsx b/src/components/common/progressBar/ProgressBar.tsx
@@ -9,10 +9,6 @@ const ProgressBar = ({
   fullStepNum: number
   step: number
 }) => {
-  if (step > fullStepNum) {
-    alert(`스텝은 전체 스텝 개수인 ${fullStepNum}보다 클 수 없습니다.`)
-    return <></>
-  }
   const progressBarWidth = (step / fullStepNum) * 100
   return (
     <div className={'w-full h-[3px] bg-gray-200 relative'}>

diff --git a/src/components/common/slider/Slider.tsx b/src/components/common/slider/Slider.tsx
@@ -1,49 +1,116 @@
 import { useState } from 'react'
 
-const Silder = ({
-  minNum = 0,
-  maxNum = 100_000
-}: {
-  minNum: number
-  maxNum: number
-}) => {
-  const [value, setValue] = useState(1)
+const Silder = ({ onChange }: { onChange: () => void }) => {
+  const [value, setValue] = useState(0)
+  const parseAcademyFee = (value: number) => {
+    switch (value) {
+      case 0: {
+        return '0 ~ 10만원'
+      }
+      case 100_000: {
+        return '10만원 ~ 20만원'
+      }
+      case 200_000: {
+        return '20만원 ~ 30만원'
+      }
+      case 300_000: {
+        return '30만원 ~ 40만원'
+      }
+      case 400_000: {
+        return '40만원 ~ 50만원'
+      }
+      case 500_000: {
+        return '50만원 ~ 60만원'
+      }
+      case 600_000: {
+        return '60만원 ~ 70만원'
+      }
+      case 700_000: {
+        return '70만원 이상'
+      }
+    }
+  }
   return (
-    <div className={'relative w-full'}>
-      <div>{value}</div>
-      <div
-        className={
-          'w-[4px] h-[20px] absolute left-[100px] bg-gray-200 rounded-lg'
-        }
-      />
-      <div
-        className={
-          'w-[4px] h-[20px] absolute left-[200px] bg-gray-200 rounded-lg'
-        }
-      />
-      <div
-        className={
-          'w-[4px] h-[20px] absolute left-[30px] bg-gray-200 rounded-lg'
-        }
-      />
-      <div
-        className={'w-[4px] h-[20px] absolute left-40 bg-gray-200 rounded-lg'}
-      />
-      <div
-        className={'w-[4px] h-[20px]absolute left-50  bg-gray-200 rounded-lg'}
-      />
-      <input
-        type={'range'}
-        className={'w-[300px] z-10'}
-        min={minNum}
-        max={maxNum}
-        step={1000}
-        value={value}
-        onChange={(e) => {
-          const newValue = Number.parseInt(e.target.value, 10)
-          setValue(newValue)
-        }}
-      />
+    <div className={'w-full'}>
+      <div className={'headline-20 mb-6 text-center'}>
+        {parseAcademyFee(value)}
+      </div>
+      <div className={'relative w-[300px] mb-6'}>
+        <div
+          className={
+            'w-[4px] h-[30px] left-[46px] bg-gray-200 rounded-lg absolute'
+          }
+        />
+        <div className={'absolute top-[35px] body-15 text-gray-200'}>{'0'}</div>
+        <div
+          className={
+            'w-[4px] h-[30px] left-[87px] bg-gray-200 rounded-lg absolute'
+          }
+        />
+        <div
+          className={'absolute top-[35px] body-15 left-[81px] text-gray-200'}>
+          {'20'}
+        </div>
+        <div
+          className={'absolute top-[35px] body-15 left-[41px] text-gray-200'}>
+          {'10'}
+        </div>
+        <div
+          className={
+            'w-[4px] h-[30px] left-[128px] bg-gray-200 rounded-lg absolute'
+          }
+        />
+        <div
+          className={'absolute top-[35px] body-15 left-[122px] text-gray-200'}>
+          {'30'}
+        </div>
+        <div
+          className={
+            'w-[4px] h-[30px] left-[169px] bg-gray-200 rounded-lg absolute'
+          }
+        />
+        <div
+          className={'absolute top-[35px] body-15 left-[163px] text-gray-200'}>
+          {'40'}
+        </div>
+        <div
+          className={
+            'w-[4px] h-[30px] left-[209px] bg-gray-200 rounded-lg absolute'
+          }
+        />
+        <div
+          className={'absolute top-[35px] body-15 left-[200px] text-gray-200'}>
+          {'50'}
+        </div>
+        <div
+          className={
+            'w-[4px] h-[30px] left-[249px] bg-gray-200 rounded-lg absolute'
+          }
+        />
+        <div
+          className={'absolute top-[35px] body-15 left-[243px] text-gray-200'}>
+          {'60'}
+        </div>
+        <div
+          className={'absolute top-[35px] body-15 left-[286px] text-gray-200'}>
+          {'70~'}
+        </div>
+        <input
+          id={'labels-range-input'}
+          type={'range'}
+          value={value / 1000}
+          min={0}
+          max={700}
+          step={100}
+          className={
+            'w-full h-[4px] bg-gray-200 rounded-lg relative appearance-none cursor-pointer z-10'
+          }
+          onChange={(e) => {
+            const newValue = Number.parseInt(e.target.value, 10)
+            setValue(newValue * 1000)
+          }}
+        />
+      </div>
     </div>
   )
 }

diff --git a/src/pages/likeAcademy/LikeAcademy.tsx b/src/pages/likeAcademy/LikeAcademy.tsx
@@ -103,7 +103,7 @@ const LikeAcademy = () => {
                 />
               </li>
             )
-          )}
+          : ''}
 
         <div
           className={