Feature/consumer list api

src/api/api.ts

@@ -1,9 +1,13 @@
 import axios from "axios";
-import { useQuery } from "react-query";
+import { useMutation, useQuery } from "react-query";
+// import { useMutation, useQuery } from "react-query";
 import { CouponList } from "types/couponList.type";
 import { GiftList } from "types/giftList.type";
 import type { Todos } from "types/todo.type";
 
+axios.defaults.baseURL = "http://15.164.225.241";
+axios.defaults.withCredentials = true;
+
 export default async function fetchTodos(): Promise<Todos[]> {
   const response = await axios.get<Todos[]>(
     "https://jsonplaceholder.typicode.com/todos",
@@ -26,28 +30,26 @@ export async function postScrapeMetaData(url: string) {
   throw new Error(res.statusText);
 }
 
-async function getGiftList({
-  targetId,
-}: GETGiftListRequest): Promise<GETGiftListResponse> {
-  return axios
-    .get<GETGiftListResponse>(`/gift/${targetId}`, {
-      params: targetId,
-    })
-    .then(response => response.data);
-}
 /**
  *
- *
+ * 주는 사람이 생성한 선물 목록을 확인하는 페이지에 진입할때 요청하는 api
  * @param targetId
  * @returns GETGiftListResponse
  */
-export function useGETGiftList({ targetId }: { targetId: number }) {
+export const useGETGiftList = ({ id }: { id: number }) => {
   return useQuery<GETGiftListResponse>({
-    queryKey: ["result", targetId],
-    queryFn: () => getGiftList({ targetId }),
+    queryKey: ["result", id],
+    queryFn: () => getGiftList({ targetId: id }),
     refetchOnWindowFocus: false,
     retry: 0,
   });
+};
+export async function getGiftList({
+  targetId,
+}: GETGiftListRequest): Promise<GETGiftListResponse> {
+  return axios
+    .get<GETGiftListResponse>(`/target/${targetId}/all`)
+    .then(response => response.data);
 }
 
 interface GETGiftListRequest {
@@ -59,5 +61,38 @@ export interface GETGiftListResponse {
   providerName: string;
   consumerName: string;
   giftList: GiftList[];
-  couponList: CouponList[];
+  couponList?: CouponList[];
+}
+
+/**
+ *
+ * 받는 사람 최종 상품 1개 선택 후 이걸로 정했어요 버튼 클릭 시 요청되는 api
+ * @param01 targetId
+ * @param02 giftId
+ * @returns POSTPickedGiftResponse
+ */
+export function usePOSTPickedGift(params: POSTPickedGiftRequest) {
+  const { targetId, giftId } = params;
+  return useMutation({
+    mutationFn: () => postPickedGift({ targetId, giftId }),
+  });
+}
+
+async function postPickedGift(
+  params: POSTPickedGiftRequest,
+): Promise<POSTPickedGiftResponse> {
+  const { targetId, giftId } = params;
+  const body = { targetId, giftId };
+  return axios
+    .post<POSTPickedGiftResponse>(`/target/${targetId}`, { body })
+    .then(response => response.data);
+}
+
+interface POSTPickedGiftRequest {
+  targetId: number;
+  giftId: number;
+}
+
+export interface POSTPickedGiftResponse {
+  targetId: number;
 }

src/components/common/Header.tsx

@@ -1,5 +1,6 @@
 import styled from "styled-components";
 import Icon from "./Icon";
+import COLOR from "style/color";
 
 function Header() {
   return (
@@ -13,7 +14,10 @@ const LogoWrapper = styled.header`
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 3rem 12rem;
+  padding: 1rem 12rem;
+  position: fixed;
+  top: 0px;
+  background: ${COLOR.WHITE};
 `;
 
 export default Header;

src/components/common/List.tsx

@@ -6,14 +6,16 @@ import { GiftList } from "types/giftList.type";
 interface ListProps {
   listData: GiftList[];
   type?: "default" | "editable" | "likable";
+  selectedGiftId?: number;
   onClickClose?: (giftId: number) => void;
   onClickEdit?: (giftId: number) => void;
-  onClickLike?: () => void;
+  onClickLike?: (giftId: number) => void;
 }
 
 function List({
   listData,
   type = "likable",
+  selectedGiftId,
   onClickClose,
   onClickEdit,
   onClickLike,
@@ -52,9 +54,13 @@ function List({
                   )}
                 </>
               )}
-              {type === "likable" && (
-                <IconButton type="button" onClick={onClickLike}>
-                  <Icon name="empty-heart" width={16} height={14} />
+              {type === "likable" && onClickLike && (
+                <IconButton type="button" onClick={() => onClickLike(giftId)}>
+                  {giftId === selectedGiftId ? (
+                    <Icon name="fill-heart" width={16} height={14} />
+                  ) : (
+                    <Icon name="empty-heart" width={16} height={14} />
+                  )}
                 </IconButton>
               )}
             </ListButtonWrapper>

src/components/common/Loading.tsx

@@ -0,0 +1,126 @@
+import COLOR from "style/color";
+import styled from "styled-components";
+
+function Loading() {
+  return (
+    <StyleLoadingWrapper>
+      <StyledLoading>
+        <div />
+        <div />
+        <div />
+        <div />
+        <div />
+        <div />
+        <div />
+        <div />
+        <div />
+        <div />
+        <div />
+        <div />
+      </StyledLoading>
+    </StyleLoadingWrapper>
+  );
+}
+
+export default Loading;
+
+const StyleLoadingWrapper = styled.div`
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.3);
+  position: fixed;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+`;
+
+const StyledLoading = styled.div`
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+
+  div {
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    background: ${COLOR.PINK};
+    border-radius: 50%;
+    animation: lds-default 1.2s linear infinite;
+  }
+  div:nth-child(1) {
+    animation-delay: 0s;
+    top: 37px;
+    left: 66px;
+  }
+  div:nth-child(2) {
+    animation-delay: -0.1s;
+    top: 22px;
+    left: 62px;
+  }
+  div:nth-child(3) {
+    animation-delay: -0.2s;
+    top: 11px;
+    left: 52px;
+  }
+  div:nth-child(4) {
+    animation-delay: -0.3s;
+    top: 7px;
+    left: 37px;
+  }
+  div:nth-child(5) {
+    animation-delay: -0.4s;
+    top: 11px;
+    left: 22px;
+  }
+  div:nth-child(6) {
+    animation-delay: -0.5s;
+    top: 22px;
+    left: 11px;
+  }
+  div:nth-child(7) {
+    animation-delay: -0.6s;
+    top: 37px;
+    left: 7px;
+  }
+  div:nth-child(8) {
+    animation-delay: -0.7s;
+    top: 52px;
+    left: 11px;
+  }
+  div:nth-child(9) {
+    animation-delay: -0.8s;
+    top: 62px;
+    left: 22px;
+  }
+  div:nth-child(10) {
+    animation-delay: -0.9s;
+    top: 66px;
+    left: 37px;
+  }
+  div:nth-child(11) {
+    animation-delay: -1s;
+    top: 62px;
+    left: 52px;
+  }
+  div:nth-child(12) {
+    animation-delay: -1.1s;
+    top: 52px;
+    left: 62px;
+  }
+  @keyframes lds-default {
+    0%,
+    20%,
+    80%,
+    100% {
+      transform: scale(1);
+    }
+    50% {
+      transform: scale(1.5);
+    }
+  }
+`;