[Deploy]: 배포 (#235)

* fix: 마이페이지 로컬주소 해결 (#206) * fix: 마운트시 나타나는 데이터 제거 (#224) * feat: silder 바 제작 * likeAcademy 버그 수정 (#229) * fix: 마운트시 나타나는 데이터 제거 * fix: get요청 확인 * fix: 머지 미반영 코드 추가 * fix: likeAcademy page 수정 * fix: 안 쓰는 변수 제거 * fix: scroll 없애고, 전체표시 * fix: 아코디언 가운데정렬, 메모 스크롤 적용 * fix: 불필요한 border제거 * hotfix: 바텀시트 수정 * hotfix: 좋아요 api 추가 및 ReviewPercent 타입 변경 * hotfix: 맵 페이지 검색바 로직 분리 및 지도가 보이지 않는 문제 수정 * hotfix: 스토리북 에러 수정 * hotfix: 검색결과 클릭시 이동 후 마커 표시되도록 수정 * feat: toast ui 생성 (#230) * hotfix: 필터 페이지 수정 * hotfix: 바텀시트 스토리북 삭제 * hotfix: 코드리뷰 반영 * fix: schedule detail api get요청 수정 반영 * hotfix: 코드리뷰 반영 * fix: 안 쓰는 변수 삭제 * fix: delete api수정 * fix: homepage settingpage잘 작동 (#232) --------- Co-authored-by: Eugene Kim <[email protected]> Co-authored-by: sincerity developer <[email protected]> Co-authored-by: Eugene Kim <[email protected]>
Guzzing · Nov 29, 2023 · 2ebb3dd · 2ebb3dd
1 parent f07a9d3
commit 2ebb3dd
Show file tree

Hide file tree

Showing 37 changed files with 712 additions and 531 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,7 +1,7 @@
 import './styles/index.css'
-
 import { RouterProvider } from 'react-router-dom'
 import { router } from './routes'
+
 function App() {
   return <RouterProvider router={router} />
 }

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/header/Header.tsx b/src/components/common/header/Header.tsx
@@ -52,9 +52,6 @@ const Header = ({
               </span>
             </div>
             <div className={'flex items-center justify-between'}>
-              <div className={'mx-[7px]'} onClick={() => alert('알림보기!')}>
-                <Icon icon={'Alarm'} classStyle={'cursor-pointer'} />
-              </div>
               <span onClick={toggleSidebar}>
                 <Icon icon={'SideBar'} classStyle={'cursor-pointer'} />
               </span>

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.stories.tsx b/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>
     )
   }