[Feat/#35] 공통 api 연결 (#37)

* feat: 하나머니 조회 api 연결

* feat: 클래스 상세 api 연결

* fix: hanamoney 조회

* feat: 개설 클래스 관리 (전체 목록) api 연결

* feat: 개설 클래스 상세 api 연결

src/apis/apiClient.ts

@@ -12,62 +12,81 @@ export class ApiClient {
     this.axiosInstance = this.createAxiosInstance();
   }
 
-  // ------- mypage -------
-
-  // get lessonDetail
-
-  // public async getLessonDetails(): Promise<
-  //   ApiResponseType<LessonDetailType[]>
-  // > {
-  //   const response = await this.axiosInstance.request<
-  //     ApiResponseType<LessonDetailType[]>
-  //   >({
-  //     method: 'get',
-  //     url: '/lessonDetail.json',
-  //   });
-  //   return response.data;
-  // }
+  //---------user---------
+
+  // 하나머니 조회
+  async getPoint() {
+    const response = await this.axiosInstance.request<
+      BaseResponseType<PointType>
+    >({
+      method: 'get',
+      url: '/user/point',
+    });
+    return response.data;
+  }
 
-  // 임의 데이터. 마이페이지 홈 화면 호출
-  public static async getMyLesson(): Promise<MyLessonType> {
-    const apiUrl = '/data/myLesson.json';
-    const response = await fetch(apiUrl);
-    const data = await response.json();
-    return data;
+  //---------host---------
+
+  //---------account---------
+
+  //---------transaction---------
+
+  //---------category---------
+
+  //---------lesson---------
+
+  // 클래스 상세
+  async getLessonDetail(lesson_id: number) {
+    const response = await this.axiosInstance.request<
+      BaseResponseType<LessonDetailType>
+    >({
+      method: 'get',
+      url: `/lesson/${lesson_id}`,
+    });
+    console.log(lesson_id);
+    return response.data;
   }
 
-  // 임의 데이터. 신청 클래스 목록 페이지 호출
-  public static async getMyLessonAll(): Promise<LessonType[]> {
-    const apiUrl = '/data/myLessonAll.json';
-    const response = await fetch(apiUrl);
-    const data = await response.json();
-    return data;
+  //---------reservation---------
+
+  // 개설 클래스 관리 (전체 목록)
+  async getHostLessonList() {
+    const response = await this.axiosInstance.request<
+      BaseResponseType<HostLessonType[]>
+    >({
+      method: 'get',
+      url: '/reservation/my/opened',
+    });
+    console.log(response);
+    return response.data;
   }
 
-  // 임의 데이터. 클래스 상세 정보 호출
-  public static async getLessonDetail(
-    lesson_id: number
-  ): Promise<LessonDetailType> {
-    const apiUrl = '/data/lessonDetail.json';
-    const response = await fetch(apiUrl);
-    const data = await response.json();
-    const lesssonDetail = data.find(
-      (lesson: LessonDetailType) => lesson.lesson_id === lesson_id
-    );
-    return lesssonDetail;
+  // 개설 클래스 상세
+  async getHostLessonDetailList(lesson_id: number) {
+    const response = await this.axiosInstance.request<
+      BaseResponseType<HostLessonDetailType[]>
+    >({
+      method: 'get',
+      url: `/reservation/my/opened/${lesson_id}`,
+    });
+    console.log(lesson_id);
+    console.log(response);
+    return response.data;
   }
 
-  // 임의 데이터. 개설 클래스 목록 호출
-  public static async getHostLesson(): Promise<HostLessonInfoType[]> {
-    const apiUrl = '/data/hostLesson.json';
+  //---------revenue---------
+
+  // 임의 데이터. 마이페이지 홈 화면 호출
+  public static async getMyLesson(): Promise<MyLessonType> {
+    const apiUrl = '/data/myLesson.json';
     const response = await fetch(apiUrl);
     const data = await response.json();
     return data;
   }
 
-  // 임의 데이터. 개설 클래스 상세정보 호출
-  public static async getHostLessonDetail(): Promise<HostLessonDetailType[]> {
-    const apiUrl = '/data/hostLessonDetail.json';
+  // 임의 데이터. 신청 클래스 목록 페이지 호출
+  public static async getMyLessonAll(): Promise<LessonType[]> {
+    const apiUrl = '/data/myLessonAll.json';
     const response = await fetch(apiUrl);
     const data = await response.json();
     return data;

src/apis/interfaces/lessonApi.ts

@@ -0,0 +1,5 @@
+export interface lessonApi {
+  getLessonDetail(
+    lesson_id: number
+  ): Promise<BaseResponseType<LessonDetailType>>;
+}

src/apis/interfaces/reservationApi.ts

@@ -0,0 +1,7 @@
+export interface reservationApi {
+  getHostLessonList(): Promise<BaseResponseType<HostLessonType[]>>;
+
+  getHostLessonDetailList(
+    lesson_id: number
+  ): Promise<BaseResponseType<HostLessonDetailType[]>>;
+}

src/apis/interfaces/userApi.ts

@@ -0,0 +1,7 @@
+// export interface usersApi {
+//   postLogin(): Promise<>;
+// }
+
+export interface userApi {
+  getPoint(): Promise<BaseResponseType<PointType>>;
+}

src/apis/url.ts

@@ -1 +1,2 @@
-export const API_BASE_URL = 'http://localhost:8080/api/v1';
+// export const API_BASE_URL = 'http://43.200.46.175:8080';
+export const API_BASE_URL = 'http://localhost:8080';

src/components/common/Topbar.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react';
 import { IoIosArrowBack } from 'react-icons/io';
 
 interface IProps {
-  title: string;
+  title: string | undefined;
   onClick: () => void;
 }
 

src/components/molecules/HostLessonInfo.tsx

@@ -1,19 +1,13 @@
 import { GrFormNext } from 'react-icons/gr';
 import { useNavigate } from 'react-router-dom';
 
-export const HostLessonInfo = ({
-  lesson_id,
-  image,
-  title,
-}: HostLessonInfoType) => {
+export const HostLessonInfo = ({ lessonId, image, title }: HostLessonType) => {
   const navigate = useNavigate();
 
-  lesson_id = 1;
-
   return (
     <div
       className=' w-[351px] h-[70px] bg-white shadow-md rounded-2xl mt-3 p-3 flex justify-between items-center font-hanaRegular text-xl cursor-pointer'
-      onClick={() => navigate(`/mypage/host/lesson-calendar/${lesson_id}`)}
+      onClick={() => navigate(`/mypage/host/lesson-calendar/${lessonId}`)}
     >
       <div className='flex flex-row items-center'>
         <img src={image} alt='' className='w-11 h-11 rounded-lg mr-7' />

src/components/molecules/LessonDetail.tsx

@@ -1,10 +1,14 @@
-export const LessonDetail = () => {
-  const category = '베이킹';
-  const people = 3;
-  const price = 30000;
-  const place = '서울 성동구 연무장길';
-  const materials = '건강한 신체';
-  const description = '갱장한 클래스입니다. ';
+interface Iprops {
+  lessonDetail: BaseResponseType<LessonDetailType> | null | undefined;
+}
+
+export const LessonDetail = ({ lessonDetail }: Iprops) => {
+  const category = lessonDetail?.data?.category_name;
+  const people = lessonDetail?.data?.capacity;
+  const price = lessonDetail?.data?.price;
+  const place = lessonDetail?.data?.location;
+  const materials = lessonDetail?.data?.materials;
+  const description = lessonDetail?.data?.description;
 
   const formatNumber = (value: number) => {
     return new Intl.NumberFormat('ko-KR').format(value);
@@ -21,7 +25,7 @@ export const LessonDetail = () => {
         <div className='ml-5'>
           <p>카테고리 : {category}</p>
           <p>모집 정원 : {people}명</p>
-          <p>가격 : {formatNumber(price)}원</p>
+          <p>가격 : {formatNumber(Number(price) || 0)} 원</p>
           <p>장소 : {place}</p>
           <p>준비물 : {materials} </p>
           <p>상세설명 : {description}</p>

src/components/molecules/LessonList.tsx

@@ -1,5 +1,5 @@
 interface LessonListProps {
-  selectedLesson: CommonLessonType[];
+  selectedLesson: HostLessonDetailType[];
   handleLessonDetail: (lesson_id: number) => void;
 }
 
@@ -10,9 +10,9 @@ export const LessonList = ({
   return (
     <div className='mt-3 px-5 py-4 w-[351px] h-[122px] bg-white rounded-2xl border-[1px] border-hanaSilver overflow-y-auto'>
       {selectedLesson.length > 0 ? (
-        selectedLesson.map((lesson) => (
+        selectedLesson.map((lesson, idx) => (
           <p
-            key={lesson.lesson_id}
+            key={lesson.lesson_id || idx}
             className='font-hanaRegular text-base cursor-pointer'
             onClick={() => handleLessonDetail(lesson.lesson_id)}
           >

src/components/molecules/MyCalendar.tsx

@@ -17,6 +17,7 @@ export const MyCalendar = ({ data, setSelectedLesson }: IProps) => {
     onChange(date);
     const selectedDate = moment(date).format('YYYY-MM-DD');
     const lessons = data.filter((lesson) => lesson.date === selectedDate);
+    console.log('확인', lessons);
     setSelectedLesson(lessons);
   };
 

src/components/molecules/UserInfo.tsx

@@ -14,7 +14,7 @@ export const UserInfo = ({ username, hanaMoney }: IProps) => {
           className='w-10 h-10'
         />
         <p className='font-hanaMedium text-xl text-hanaNavGreen pl-1'>
-          {hanaMoney}
+          {hanaMoney} P
         </p>
       </div>
     </div>

src/components/organisms/HostLessonSlider.tsx

@@ -1,16 +1,17 @@
 import { HostLessonInfo } from '../molecules/HostLessonInfo';
 
 interface IProps {
-  data: HostLessonInfoType[] | undefined;
+  data: HostLessonType[] | undefined;
 }
 
 export const HostLessonSlider = ({ data }: IProps) => {
+  console.log(data);
   return (
-    <div className='h-80 mt-5 pt-20 pb-2 flex flex-col items-center justify-center overflow-y-scroll scrollbar-hide'>
-      {data?.map((lesson) => (
+    <div className='h-80 mt-5 pb-2 flex flex-col items-center overflow-y-scroll scrollbar-hide'>
+      {data?.map((lesson, idx) => (
         <HostLessonInfo
-          key={lesson.lesson_id}
-          lesson_id={lesson.lesson_id}
+          key={lesson.lessonId || idx}
+          lessonId={lesson.lessonId}
           image={lesson.image}
           title={lesson.title}
         />

src/pages/main/HanaFunMain.tsx

@@ -14,7 +14,7 @@ import { QR } from '../../components/molecules/QR';
 import { AccountType } from '../../components/organisms/ChoiceAccount';
 import { RiQrScan2Line } from 'react-icons/ri';
 import { Lessondata } from '../search/LessonSearch';
-import { getCookie } from '../../utils/cookie';
+import { getCookie, setCookie } from '../../utils/cookie';
 import { useNavigate } from 'react-router-dom';
 import { QRScanner } from '../../components/molecules/QRScanner';
 
@@ -70,6 +70,11 @@ export const HanaFunMain = () => {
   const [isScan, setIsScan] = useState(false);
   const [active, setActive] = useState<number | null>(null);
 
+  setCookie(
+    'token',
+    'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiLsnbTrr7zsp4AiLCJ1c2VySWQiOjEsImlhdCI6MTcxOTkwNjc5OCwiZXhwIjoxNzE5OTEwMzk4fQ.XrNBs6nWmQanGcsMQZFNVHT-xPmvvOPb3icd1naFjrE'
+  );
+
   const [selectedAccount, setSelectedAccount] = useState<AccountType>({
     accountId: -1,
     accountName: '',