Merge branch 'dev' into feat/173-edit-schedule

Guzzing · Nov 30, 2023 · 5235010 · 5235010
2 parents 1b8df6f + 06be49e
commit 5235010
Show file tree

Hide file tree

Showing 25 changed files with 576 additions and 532 deletions.
diff --git a/src/components/BottomSheet/BottomSheetContent.tsx b/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>

diff --git a/src/components/BottomSheet/BottomSheetHeader.tsx b/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>

diff --git a/src/components/common/bottomsheet/BottomSheet.stories.tsx b/src/components/common/bottomsheet/BottomSheet.stories.tsx
diff --git a/src/components/common/bottomsheet/BottomSheet.tsx b/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>
     </>
   )

diff --git a/src/components/common/inputbox/input/Input.tsx b/src/components/common/inputbox/input/Input.tsx
@@ -21,16 +21,21 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
   ) => {
     const [inputValue, setInputValue] = useState('')
     const [searchInputValue, setSearchInputValue] = useState('')
+
     return inputType === 'Default' ? (
       <div className={'my-[10px]'}>
         <input
           type={'text'}
           className={`${
             fullWidth ? 'w-full h-[52px]' : 'w-[323px] h-[52px]'
           } rounded-[10px] ${
-            field === 'email' && !validate('email', inputValue)
+            field === 'email' &&
+            !validate('email', inputValue) &&
+            inputValue !== ''
               ? 'border border-red-600'
-              : field === 'nickname' && !validate('nickname', inputValue)
+              : field === 'nickname' &&
+                !validate('nickname', inputValue) &&
+                inputValue !== ''
               ? 'border border-red-600'
               : 'border border-blue-350'
           }  px-[20px] font-nsk text-black-800 bg-white-200 body-18 placeholder:text-gray-600 outline-none`}
@@ -48,11 +53,18 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           {...props}
         />
         <p className={'font-nsk caption-13 text-red-600 px-3 mt-1'}>
-          {field === 'email' && !validate('email', inputValue)
+          {field === 'email' &&
+          !validate('email', inputValue) &&
+          inputValue !== ''
             ? (errorMessage = '잘못된 이메일입니다')
-            : field === 'nickname' && !validate('nickname', inputValue)
-            ? (errorMessage = '한글과 영어만 사용가능합니다')
-            : field === 'childname' && !validate('childname', inputValue)
+            : field === 'nickname' &&
+              !validate('nickname', inputValue) &&
+              inputValue !== ''
+            ? (errorMessage =
+                '한글과 영어만 사용가능합니다(1 - 10글자 미만입니다)')
+            : field === 'childname' &&
+              !validate('childname', inputValue) &&
+              inputValue !== ''
             ? (errorMessage = '아이의 이름은 1글자에서 10글자여야 합니다!')
             : ''}
         </p>

diff --git a/src/components/common/slider/Slider.tsx b/src/components/common/slider/Slider.tsx
@@ -31,7 +31,7 @@ const Silder = () => {
     }
   }
   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={(e) => {
             const newValue = Number.parseInt(e.target.value, 10)
+            onChange()
             setValue(newValue * 1000)
           }}
         />