Merge pull request #234 from Guzzing/hotfix/map

맵 페이지 수정

src/components/BottomSheet/BottomSheetContent.tsx

@@ -17,17 +17,16 @@ const BottomSheetContent = ({
   address,
   detailInfo
 }: BottomSheetContentProps) => {
-  const { lessonGetResponses, reviewPercentGetResponse, areaOfExpertise } =
+  const { lessonGetResponses, reviewPercentGetResponse, categories } =
     detailInfo
-  console.log(detailInfo)
   return (
     <div>
       <div className={'font-nsk body-15 text-black-900 mb-[20px]'}>
         {address}
         <br />
         {`☎ ${number}`}
         <div className={'mb-[11px]'} />
-        <Label variant={'medium'} label={areaOfExpertise}></Label>
+        <Label variant={'medium'} label={categories[0]}></Label>
       </div>
       {expanded && (
         <div className={'flex flex-col'}>
@@ -116,7 +115,7 @@ const BottomSheetContent = ({
                   className={
                     'absolute text-center subHead-18 z-50 ml-[13px] mt-[7px]'
                   }>
-                  {'상담사 선생님이 친절해요'}
+                  {'선생님이 친절해요 👨‍🏫'}
                 </div>
               </div>
               <div
@@ -137,7 +136,7 @@ const BottomSheetContent = ({
                   className={
                     'absolute text-center subHead-18 z-50 ml-[13px] mt-[7px]'
                   }>
-                  {'시설이 좋아요'}
+                  {'시설이 좋아요 🏫'}
                 </div>
               </div>
               <div
@@ -158,7 +157,7 @@ const BottomSheetContent = ({
                   className={
                     'absolute text-center subHead-18 z-50 ml-[13px] mt-[7px]'
                   }>
-                  {'가격이 착해요'}
+                  {'교육비가 저렴해요 💰'}
                 </div>
               </div>
               <div
@@ -181,7 +180,7 @@ const BottomSheetContent = ({
                   className={
                     'absolute text-center subHead-18 z-50 ml-[13px] mt-[7px]'
                   }>
-                  {'학습 관리가 꼼꼼해요'}
+                  {'교육 관리가 철저해요 📝'}
                 </div>
               </div>
               <div
@@ -204,7 +203,30 @@ const BottomSheetContent = ({
                   className={
                     'absolute text-center subHead-18 z-50 ml-[13px] mt-[7px]'
                   }>
-                  {'선생님이 좋아요'}
+                  {'학생에 대한 애정 가득 💓'}
+                </div>
+              </div>
+              <div
+                className={
+                  'relative flex flex-row h-[37px] w-[323px] ml-[7px] mb-[7px]'
+                }>
+                <div
+                  className={'h-full bg-blue-200'}
+                  style={{
+                    width: reviewPercentGetResponse.lovelyTeachingPercent + '%'
+                  }}></div>
+                <div
+                  className={'h-full bg-gray-200'}
+                  style={{
+                    width: `${
+                      100 - reviewPercentGetResponse.shuttleAvailabilityCount
+                    }%`
+                  }}></div>
+                <div
+                  className={
+                    'absolute text-center subHead-18 z-50 ml-[13px] mt-[7px]'
+                  }>
+                  {'등하원이 편리해요 🚌'}
                 </div>
               </div>
             </div>

src/components/BottomSheet/BottomSheetHeader.tsx

@@ -1,26 +1,39 @@
 import { useState } from 'react'
+import { useMutation } from '@tanstack/react-query'
 import { LikeBlank, LikeFilled } from '@/assets/icon'
+import { postLike } from '@/libs/api/mapapi/mapApi.ts'
 const BottomSheetHeader = ({
   title,
-  isLike
+  isLike,
+  academyId
 }: {
   title: string
   isLike: boolean
+  academyId: number
 }) => {
+  const likeMutation = useMutation({
+    mutationFn: (academyId: number) => postLike({ academyId: academyId }),
+    onSuccess: () => {},
+    onSettled: () => {
+      setLiked(!liked)
+    }
+  })
+
   const [liked, setLiked] = useState<boolean>(isLike)
   //TODO: 좋아요 API 로직 추가
+
   return (
     <div className={'flex flex-row justify-between w-full mb-[17px]'}>
       <h1 className={'font-nsk headline-25 text-black-800'}>{title}</h1>
       {liked ? (
         <LikeFilled
           className={'cursor-pointer'}
-          onClick={() => setLiked(!liked)}
+          onClick={() => likeMutation.mutate(academyId)}
         />
       ) : (
         <LikeBlank
           className={'cursor-pointer'}
-          onClick={() => setLiked(!liked)}
+          onClick={() => likeMutation.mutate(academyId)}
         />
       )}
     </div>

src/components/common/bottomsheet/BottomSheet.tsx

@@ -1,8 +1,10 @@
 import { useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
 import BottomSheetContent from '@/components/BottomSheet/BottomSheetContent'
 import BottomSheetHeader from '@/components/BottomSheet/BottomSheetHeader'
+import Loading from '@/components/Loading/Loading.tsx'
 import Spacing from '@/components/common/spacing/Spacing.tsx'
-import { DetailAcademyResponse } from '@/libs/api/mapapi/mapApiType.ts'
+import { getAcademyDetail } from '@/libs/api/mapapi/mapApi.ts'
 
 /**
  * @param title BottomSheet에 들어갈 Title을 입력합니다.
@@ -13,15 +15,24 @@ interface BottomSheetProps {
   title: string
   address: string
   number: string
-  detailInfo: DetailAcademyResponse
+  academyId: number
 }
 const BottomSheet = ({
   title = '학원명 입력',
   address,
   number,
-  detailInfo
+  academyId
 }: BottomSheetProps) => {
   const [expanded, setExpanded] = useState(false)
+  const { data: detailAcademy, isLoading } = useQuery({
+    queryKey: ['academy', academyId],
+    queryFn: () =>
+      getAcademyDetail({
+        academyId: academyId
+      }),
+    enabled: academyId > -1
+  })
+
   return (
     <>
       <div
@@ -37,15 +48,22 @@ const BottomSheet = ({
               'box-border w-[93px] h-[6px] bg-gray-100 rounded-full mb-[23px] cursor-pointer'
             }></div>
         </header>
-        <div className={'flex flex-col items-between w-full'}>
-          <BottomSheetHeader title={title} isLike={detailInfo.isLiked} />
-          <BottomSheetContent
-            expanded={expanded}
-            address={address}
-            number={number}
-            detailInfo={detailInfo}
-          />
-        </div>
+        {isLoading && <Loading />}
+        {detailAcademy && (
+          <div className={'flex flex-col items-between w-full'}>
+            <BottomSheetHeader
+              title={title}
+              isLike={detailAcademy.isLiked || false}
+              academyId={academyId}
+            />
+            <BottomSheetContent
+              expanded={expanded}
+              address={address}
+              number={number}
+              detailInfo={detailAcademy}
+            />
+          </div>
+        )}
       </div>
     </>
   )

src/components/common/slider/Slider.stories.tsx

@@ -12,7 +12,7 @@ const meta: Meta<typeof Silder> = {
   render: function Render() {
     return (
       <div className={'w-full h-full'}>
-        <Silder minNum={0} maxNum={10_000} />
+        <Silder onChange={() => console.log('')} />
       </div>
     )
   }

src/components/common/slider/Slider.tsx

@@ -31,7 +31,7 @@ const Silder = ({ onChange }: { onChange: () => void }) => {
     }
   }
   return (
-    <div className={'w-full'}>
+    <div className={'flex flex-col w-full justify-center items-center'}>
       <div className={'headline-20 mb-6 text-center'}>
         {parseAcademyFee(value)}
       </div>
@@ -107,6 +107,7 @@ const Silder = ({ onChange }: { onChange: () => void }) => {
           }
           onChange={(e) => {
             const newValue = Number.parseInt(e.target.value, 10)
+            onChange()
             setValue(newValue * 1000)
           }}
         />