feat: 내 약통 관련 api 연동

src/apis/mutation/myMedicine.ts

@@ -0,0 +1,13 @@
+import { fetcher } from '../fetcher';
+import {
+  AddMyMedicineAPIRequest,
+  AddMyMedicineAPIResponse,
+  DeleteMyMedicineAPIRequest,
+} from '../types/myMedicine';
+
+export const addMyMedicineAPI = (data: AddMyMedicineAPIRequest) =>
+  fetcher.post<AddMyMedicineAPIResponse>('my-medicine', { json: data });
+
+export const deleteMyMedicineAPI = ({
+  myMedicineId,
+}: DeleteMyMedicineAPIRequest) => fetcher.delete(`my-medicine/${myMedicineId}`);

src/apis/query/myMedicine.ts

@@ -0,0 +1,19 @@
+import { queryOptions } from '@tanstack/react-query';
+import { fetcher } from '../fetcher';
+import { GetMyMedicineAPIResponse } from '../types/myMedicine';
+
+export const myMedicineQueryKeys = {
+  all: () => ['myMedicine'],
+  lists: () => [...myMedicineQueryKeys.all(), 'list'],
+};
+
+export const myMedicneQueryOption = {
+  list: () =>
+    queryOptions({
+      queryKey: [...myMedicineQueryKeys.all()],
+      queryFn: getUserInfoAPI,
+    }),
+};
+
+const getUserInfoAPI = () =>
+  fetcher.get<GetMyMedicineAPIResponse>('my-medicine');

src/apis/types/myMedicine.ts

@@ -0,0 +1,16 @@
+import { ResponseFormat } from './common';
+import { Product } from './product';
+
+export type GetMyMedicineAPIResponse = ResponseFormat<
+  Array<{ product: Product }>
+>;
+
+export type AddMyMedicineAPIRequest = {
+  productId: number;
+};
+
+export type AddMyMedicineAPIResponse = ResponseFormat<{ product: Product }>;
+
+export type DeleteMyMedicineAPIRequest = {
+  myMedicineId: number;
+};

src/apis/types/product.ts

@@ -1,27 +1,23 @@
 import { ResponseFormat } from './common';
 
-type Product = {
+export type Product = {
   id: number;
   name: string;
   price: number;
   imageUrl: string;
   purchaseLink: string;
   description: string;
-  healthConcerns: [
-    {
-      id: number;
-      name: string;
-      description: string;
-      imageUrl: string;
-    },
-  ];
-  productIngredients: [
-    {
-      ingredientName: string;
-      amount: number;
-      unit: string;
-    },
-  ];
+  healthConcerns: Array<{
+    id: number;
+    name: string;
+    description: string;
+    imageUrl: string;
+  }>;
+  productIngredients: Array<{
+    ingredientName: string;
+    amount: number;
+    unit: string;
+  }>;
 };
 
 export type GetProductListAPIRequest = {

src/pages/pillbox/index.tsx

@@ -1,5 +1,8 @@
-import { useState } from 'react';
+import { Suspense, useState } from 'react';
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { myMedicneQueryOption } from '@/apis/query/myMedicine';
 import { Cart, Intake, Notice, PillBox, PlusBlue } from '@/assets';
+import { LocalErrorBoundary } from '@/components/LocalErrorBoundary';
 import * as bottomStyles from '@/pages/product/ingredient/bottomSheet.css';
 import { AppBar } from '@/ui/app-bar';
 import { BottomSheet } from '@/ui/bottom-sheet/bottom-sheet';
@@ -10,9 +13,23 @@ import { IngredientGraph } from '../product/components/ingredient-graph';
 import * as styles from './page.css';
 
 export const PillboxPage = () => {
+  return (
+    <LocalErrorBoundary>
+      <Suspense>
+        <PillboxPageInner />
+      </Suspense>
+    </LocalErrorBoundary>
+  );
+};
+
+const PillboxPageInner = () => {
   const pillData = [];
   const [isOpen, setIsOpen] = useState(false);
 
+  const {
+    data: { data: medicineList },
+  } = useSuspenseQuery(myMedicneQueryOption.list());
+
   return (
     <PageLayout
       header={
@@ -24,7 +41,7 @@ export const PillboxPage = () => {
       <Spacer size={37} />
       <section className={styles.boxContainer}>
         <div className={styles.boxTitle}>필미님의 약통</div>
-        {pillData.length === 0 ? (
+        {medicineList.length === 0 ? (
           <div className={styles.myPillBox}>
             <PlusBlue />
             <span className={styles.boxDesc}>
@@ -33,6 +50,7 @@ export const PillboxPage = () => {
             <PillBox className={styles.boxIcon} />
           </div>
         ) : (
+          //TODO ui 추가 필요
           <div>약</div>
         )}
       </section>

src/pages/pillbox/manage/index.tsx

@@ -1,7 +1,9 @@
-import { ChangeEvent, useState } from 'react';
+import { ChangeEvent, Suspense, useState } from 'react';
+import { useSuspenseQuery } from '@tanstack/react-query';
 import { useNavigate } from 'react-router';
+import { myMedicneQueryOption } from '@/apis/query/myMedicine';
 import { ArrowLeft } from '@/assets';
-import { MOCK_PRODUCT_LIST } from '@/pages/home/mock-product';
+import { LocalErrorBoundary } from '@/components/LocalErrorBoundary';
 import { AppBar } from '@/ui/app-bar';
 import { Button } from '@/ui/button';
 import { ButtonText } from '@/ui/button-text';
@@ -14,22 +16,31 @@ import { Spacer } from '@/ui/spacer/spacer';
 import { Checkbox } from '../../../ui/check-box/check-box';
 import * as styles from './page.css';
 
-const MOCK_TAG_LIST = [
-  { name: '혈압', type: 'category' },
-  { name: '루테인', type: 'ingredient' },
-] satisfies Array<{ name: string; type: 'category' | 'ingredient' }>;
-
 export const PillboxManagePage = () => {
-  const navigate = useNavigate();
+  return (
+    <LocalErrorBoundary>
+      <Suspense>
+        <PillboxManagePageInner />
+      </Suspense>
+    </LocalErrorBoundary>
+  );
+};
 
+const PillboxManagePageInner = () => {
+  const navigate = useNavigate();
   const goBack = () => navigate(-1);
+  const goAddPillboxPage = () => navigate('/pillbox/new');
 
-  const [productList, setProductList] = useState(
-    MOCK_PRODUCT_LIST.map((product) => ({
-      ...product,
-      checked: true,
-    })),
-  );
+  const {
+    data: { data: medicneList },
+  } = useSuspenseQuery(myMedicneQueryOption.list());
+
+  const initialProductList = medicneList.map(({ product }) => ({
+    ...product,
+    checked: true,
+  }));
+
+  const [productList, setProductList] = useState(initialProductList);
 
   const toggleCheck = ({ target: { id } }: ChangeEvent) => {
     const updatedProductList = productList.map((product) =>
@@ -90,39 +101,66 @@ export const PillboxManagePage = () => {
         </div>
         <Spacer size={30} />
         <div className={styles.list}>
-          {productList.map(({ id, checked, ...rest }) => (
-            <HorizontalCard
-              {...rest}
-              key={id}
-              label={
-                <Checkbox
-                  id={String(id)}
-                  checked={checked}
-                  onChange={toggleCheck}
-                  className={styles.checkbox}
-                />
-              }
-            >
-              {MOCK_TAG_LIST && (
-                <div className={styles.chipContainer}>
-                  {MOCK_TAG_LIST.map(({ name, type }, index) => (
-                    <Chip
-                      shape="tag"
-                      backgroundColor={
-                        type === 'category' ? 'blue200' : 'grey200'
-                      }
-                      color={type === 'category' ? 'blue400' : 'grey500'}
-                      typography="body_4_12_b"
-                      key={index}
-                    >
-                      {name}
-                    </Chip>
-                  ))}
-                </div>
-              )}
-            </HorizontalCard>
-          ))}
-          <Button size="large" variant="third" className={styles.button}>
+          {productList.map(
+            ({
+              id,
+              checked,
+              imageUrl,
+              description,
+              name,
+              healthConcerns,
+              productIngredients,
+            }) => (
+              <HorizontalCard
+                key={id}
+                imageUrl={imageUrl}
+                company={description}
+                name={name}
+                label={
+                  <Checkbox
+                    id={String(id)}
+                    checked={checked}
+                    onChange={toggleCheck}
+                    className={styles.checkbox}
+                  />
+                }
+              >
+                {(healthConcerns.length !== 0 ||
+                  productIngredients.length !== 0) && (
+                  <div className={styles.chipContainer}>
+                    {healthConcerns.map(({ id, name }) => (
+                      <Chip
+                        shape="tag"
+                        backgroundColor="blue200"
+                        color="blue400"
+                        typography="body_4_12_b"
+                        key={id}
+                      >
+                        {name}
+                      </Chip>
+                    ))}
+                    {productIngredients.map(({ ingredientName }) => (
+                      <Chip
+                        shape="tag"
+                        backgroundColor="grey200"
+                        color="grey500"
+                        typography="body_4_12_b"
+                        key={ingredientName}
+                      >
+                        {ingredientName}
+                      </Chip>
+                    ))}
+                  </div>
+                )}
+              </HorizontalCard>
+            ),
+          )}
+          <Button
+            size="large"
+            variant="third"
+            className={styles.button}
+            onClick={goAddPillboxPage}
+          >
             복용 제품 추가
           </Button>
         </div>

src/pages/pillbox/manage/page.css.ts

@@ -57,4 +57,5 @@ export const chipContainer = style({
   display: 'flex',
   alignItems: 'center',
   gap: 4,
+  flexWrap: 'wrap',
 });