Fix/provider 씬의 누락된 기능 추가 (#106)

* chore: mock data 삭제

* style: 쿠폰 만들기 버튼 중앙정렬

* style: dimmed 레이아웃
- 제대로 header가 가려지지 않고 상단에 빈틈이 생겨서 수정
- zIndex, height

* feat: headerWithButton

* fix: coupon create and post
- put base64 URL into File object
- remove list props in List.tsx

* feat: api <postCoupon>, <updateTarget>
- updateTarget api에서 request 형태를 바꿀 수 없어서 query에 coupon, gift list를 줄지어서 결합한 형태의 로직 추가
- axios로 되어 있던 부분 mutation으로 분리 완료

* fix: style attribute naming
- cabab to camel

* feat: 완료 플로우 연결 및 확인 페이지 완성
- provider가 데이터 작성 후 완료하는 플로우 연결
- 데이터 확인하는 페이지에서 쿠폰 render 추가

* fix: complie error via eslint

src/api/provider.ts

@@ -21,6 +21,44 @@ export const postTarget = async ({
   return response.data;
 };
 
+// 타겟 업데이트 = 카드, <선물, 쿠폰> 목록 확정
+interface UpdateTargetRequest {
+  targetId: number;
+  cardMessage: string; // 카드 텍스트
+  file: File | null; // 카드 이미지 파일
+  giftList?: number[];
+  couponList?: number[];
+}
+
+export const updateTarget = async (query: UpdateTargetRequest) => {
+  const { targetId, giftList, couponList, file } = query;
+  const formData = new FormData();
+  if (file) formData.append("file", file);
+
+  const giftListQuery = giftList?.reduce((str, giftId, idx) => {
+    if (idx === 0) return `giftList=${giftId}`;
+    return `${str}&giftList=${giftId}`;
+  }, "");
+
+  const couponListQuery = couponList?.reduce((str, couponId, idx) => {
+    if (idx === 0) return `couponList=${couponId}`;
+    return `${str}&couponList=${couponId}`;
+  }, "");
+
+  // eslint-disable-next-line no-nested-ternary
+  const combineQuery = couponListQuery
+    ? giftListQuery
+      ? `${giftListQuery}&${couponListQuery}`
+      : `${couponListQuery}`
+    : `${giftListQuery}`;
+
+  const response = await axios.post(
+    `${process.env.REACT_APP_BASE_URL}/target/${targetId}?${combineQuery}`,
+    formData,
+  );
+  return response.data;
+};
+
 // 선물 조회
 export const getGiftList = async (targetId: number): Promise<Result> => {
   const response = await axios.get<Result>(
@@ -62,3 +100,24 @@ export const putGiftItem = async (formData: FormData): Promise<Result> => {
   );
   return response.data;
 };
+
+interface PostCouponRequest {
+  couponForm: FormData;
+  targetId: number;
+}
+
+export const postCouponItem = async ({
+  couponForm,
+  targetId,
+}: PostCouponRequest): Promise<Result> => {
+  const response = await axios.post<Result>(
+    `${process.env.REACT_APP_BASE_URL}/coupon?targetId=${targetId}`,
+    couponForm,
+    {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    },
+  );
+  return response.data;
+};

src/components/common/HeaderWithButton.tsx

@@ -0,0 +1,68 @@
+import styled from "styled-components";
+import Icon from "./Icon";
+import COLOR from "style/color";
+
+interface HeaderWithButtonProps {
+  onClickBackBtn: () => void;
+  onClickCompleteBtn?: () => void;
+  completeBtnDisabled?: boolean;
+}
+
+const HeaderWithButton = ({
+  onClickBackBtn,
+  onClickCompleteBtn,
+  completeBtnDisabled,
+}: HeaderWithButtonProps) => {
+  return (
+    <LogoWrapper>
+      <IconButton onClick={onClickBackBtn}>
+        <Icon name="left-arrow" width={24} height={24} />
+      </IconButton>
+      <Icon name="logo-header" width={113} height={26} />
+      {onClickCompleteBtn && (
+        <CompleteButton
+          onClick={onClickCompleteBtn}
+          disabled={completeBtnDisabled}
+        >
+          완료
+        </CompleteButton>
+      )}
+    </LogoWrapper>
+  );
+};
+
+export default HeaderWithButton;
+
+const LogoWrapper = styled.header`
+  display: flex;
+  width: 68rem;
+  align-items: center;
+  justify-content: space-around;
+  padding: 1rem 12rem;
+  background: ${COLOR.WHITE};
+  z-index: 1;
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  width: 5.4rem;
+`;
+
+const CompleteButton = styled.button`
+  all: unset;
+
+  padding: 0.7rem 1.4rem 0.8rem 1.4rem;
+  display: inline-flex;
+  align-items: flex-start;
+
+  border-radius: 0.8rem;
+  background-color: ${COLOR.PURPLE};
+
+  color: ${COLOR.WHITE};
+  font-size: 1.4rem;
+  font-weight: bold;
+
+  :disabled {
+    background-color: #e9d7fe;
+  }
+`;

src/components/common/Icon.tsx

@@ -34,6 +34,7 @@ export type IconName =
   | "empty-heart"
   | "error-gift"
   | "gift-edit"
+  | "left-arrow"
   | "logo-header"
   | "logo-large"
   | "logo-intro-provider"

src/components/common/IconLoader.tsx

@@ -625,6 +625,14 @@ const IconLoader = () => (
           d="M18.5 9.885s.5 1.726.5 4.615c0 2.889-.389 5.417-.778 5.778-.389.361-3.11.722-6.222.722-3.111 0-5.833-.361-6.222-.722C5.388 19.917 5 17.389 5 14.5s.5-4.615.5-4.615m13 0c.307-.017.518-.034.611-.052.445-.083.889-.666.889-1.333 0-.667-.444-1.25-.889-1.333C18.667 7.083 15.556 7 12 7c-3.556 0-6.667.083-7.111.167C4.444 7.25 4 7.833 4 8.5c0 .667.444 1.25.889 1.333.093.018.304.035.611.052m13 0c-1.158.063-3.69.115-6.5.115s-5.342-.052-6.5-.115m6.366-3.035c.549-2.049 3.696-5.598 5.196-3 1.5 2.598-3.147 3.55-5.196 3Zm.196 0c-.549-2.049-3.696-5.598-5.196-3-1.5 2.598 3.147 3.55 5.196 3Z"
         />
       </symbol>
+      <symbol id="left-arrow" width="24" height="24" fill="none">
+        <path
+          fill="#000"
+          fillRule="evenodd"
+          d="M16.707 3.293a1 1 0 0 1 0 1.414L9.414 12l7.293 7.293a1 1 0 0 1-1.414 1.414l-8-8a1 1 0 0 1 0-1.414l8-8a1 1 0 0 1 1.414 0Z"
+          clipRule="evenodd"
+        />
+      </symbol>
     </defs>
   </svg>
 );

src/components/common/List.tsx

@@ -4,11 +4,10 @@ import COLOR from "style/color";
 import { GiftList } from "types/giftList.type";
 import { CouponList as TCouponList } from "types/couponList.type";
 import CouponList from "./CouponList";
-import mockCouponList from "data/couponData";
-import giftData from "data/giftData";
+// import mockCouponList from "data/couponData";
+// import giftData from "data/giftData";
 
 interface ListProps {
-  listData: GiftList[];
   giftList?: GiftList[];
   couponList?: TCouponList[];
   type?: "default" | "editable" | "likable";
@@ -20,9 +19,8 @@ interface ListProps {
 
 function List({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  listData,
-  giftList = giftData,
-  couponList = mockCouponList,
+  giftList,
+  couponList,
   type = "likable",
   selectedGiftId,
   onClickClose,

src/components/common/ModalFrameCoupon.tsx

@@ -26,16 +26,16 @@ export default ModalFrameCoupon;
 
 const ModalDim = styled.div`
   position: absolute;
-  z-index: 1;
-  top: 0;
+  z-index: 2;
+  top: -2rem;
   left: 0;
   background-color: #00000066;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
-  height: 100%;
+  height: 110%;
 `;
 const Wrapper = styled.div`
   position: absolute;

src/components/provider/ProviderCard.tsx

@@ -35,7 +35,7 @@ const CardWrapper = styled.div`
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  margin: 4rem 2.6rem 4rem 2.6rem;
+  margin: 4rem 0rem;
   border: 1px dashed #d3c9e7;
   border-radius: 10px;
 `;

src/components/provider/ProviderGiftList.tsx

@@ -5,7 +5,6 @@ import { GiftList } from "types/giftList.type";
 import EditGiftModal from "./EditGiftModal";
 // import giftList from "data/giftData";
 import { useParams } from "react-router-dom";
-import mockCouponList from "data/couponData";
 import useGift from "hooks/queries/useGift";
 
 export default function ProviderGiftList() {
@@ -15,8 +14,6 @@ export default function ProviderGiftList() {
     getGift: { isLoading, data },
   } = useGift(Number(targetId));
 
-  // 시현용
-  const [listData, setListData] = useState<GiftList[]>([]);
   const [editedGiftId, setEditedGiftId] = useState<number>();
 
   const handleDelete = (giftId: number) => {
@@ -31,19 +28,15 @@ export default function ProviderGiftList() {
     <>
       {data && (
         <List
-          // TODO: listData 삭제
-          listData={listData}
           giftList={data.giftList}
-          // TODO: 실데이터로 교체
-          couponList={mockCouponList}
+          couponList={data.couponList}
           type="editable"
           onClickClose={handleDelete}
           onClickEdit={handleEdit}
         />
       )}
       {data && editedGiftId && (
         <EditGiftModal
-          // listData={response}
           giftList={data.giftList}
           editedGiftId={editedGiftId}
           setEditedGiftId={setEditedGiftId}

src/components/provider/coupon/CreateCouponModal.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/no-array-index-key */
 import ModalFrameCoupon from "components/common/ModalFrameCoupon";
 import Text from "components/common/Text";
 import styled from "styled-components";
@@ -14,8 +13,8 @@ import { useRecoilState, useResetRecoilState, useSetRecoilState } from "recoil";
 import { useCallback, useRef, useState } from "react";
 import { toPng } from "html-to-image";
 import Loading from "components/common/Loading";
-import axios from "axios";
 import { useParams } from "react-router-dom";
+import useCoupon from "hooks/queries/useCoupon";
 
 const BASIC_IMAGE_GRADIENT = [
   "linear-gradient(133deg, #52ccff 0%, #5448e8 100%)",
@@ -48,28 +47,24 @@ function CreateCouponModal({ setCloseCouponModal }: CreateCouponModalProps) {
   const onChangeCouponMessage = (e: React.ChangeEvent<HTMLInputElement>) => {
     setCouponMessage(e.target.value);
   };
+  const { addCoupon } = useCoupon(Number(targetId));
 
-  // TODO: mutate로 custom hook 분리 예정
   const onClickSubmit = async (png: string) => {
     const formData = new FormData();
-    formData.append("file", png);
-    try {
-      if (targetId) {
-        const params = new URLSearchParams({ targetId }).toString();
-        await axios.post(
-          `${process.env.REACT_APP_BASE_URL}/coupon?${params}`,
-          { formData },
-          {
-            headers: {
-              "Content-Type": "multipart/form-data",
-              charset: "utf-8",
-            },
-          },
-        );
-      }
-    } catch (err) {
-      console.error(err);
-    }
+    const randomId = (): string => {
+      const uint32 = window.crypto.getRandomValues(new Uint32Array(1))[0];
+      return uint32.toString(16);
+    };
+    await fetch(png)
+      .then(res => res.blob())
+      .then(blob => {
+        const file = new File([blob], `custom-coupon-${randomId()}.png`, {
+          type: "image/png",
+        });
+        formData.append("file", file);
+      });
+
+    addCoupon.mutate({ couponForm: formData, targetId: Number(targetId) });
   };
 
   const onClickCouponToPNG = useCallback(async () => {
@@ -91,10 +86,12 @@ function CreateCouponModal({ setCloseCouponModal }: CreateCouponModalProps) {
 
   const onClickImageUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
+
     if (file) {
       const formData = new FormData();
       formData.append("file", file);
       const imageUrl = URL.createObjectURL(file);
+
       setBackImageCustomURL(imageUrl); // 이미지 화면에 렌더링 하기
       setInputInfo({ ...inputInfo, file }); // 전역 상태에 저장
     }
@@ -127,7 +124,7 @@ function CreateCouponModal({ setCloseCouponModal }: CreateCouponModalProps) {
         {BASIC_IMAGE_GRADIENT.map((basic, idx) => {
           return (
             <BasicImage
-              key={idx}
+              key={BASIC_IMAGE_GRADIENT[idx]}
               background={basic}
               onClick={() => setBackImageURL(basic)}
             />

src/components/provider/coupon/OpenModalButton.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import CustomButton from "components/provider/coupon/CustomButton";
 import CreateCouponModal from "components/provider/coupon/CreateCouponModal";
+import styled from "styled-components";
 
 function OpenModalButton() {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -13,13 +14,18 @@ function OpenModalButton() {
     setOpenCouponModal(false);
   };
   return (
-    <>
+    <Wrapper>
       <CustomButton onClick={onClickOpenModal} />
       {openCouponModal && (
         <CreateCouponModal setCloseCouponModal={onClickCloseModal} />
       )}
-    </>
+    </Wrapper>
   );
 }
 
 export default OpenModalButton;
+
+const Wrapper = styled.div`
+  display: flex;
+  justify-content: center;
+`;

src/hooks/queries/useCoupon.ts

@@ -0,0 +1,12 @@
+import { postCouponItem } from "api/provider";
+import { useMutation, useQueryClient } from "react-query";
+
+const useCoupon = (targetId: number) => {
+  const queryClient = useQueryClient();
+  const addCoupon = useMutation(postCouponItem, {
+    onSuccess: () => queryClient.invalidateQueries(["gift", targetId]),
+  });
+  return { addCoupon };
+};
+
+export default useCoupon;

src/hooks/queries/usePostTarget.ts

@@ -1,8 +1,12 @@
-import { postTarget } from "api/provider";
+import { postTarget, updateTarget } from "api/provider";
 import { useMutation } from "react-query";
 
 export const usePostTarget = () => {
   return useMutation(postTarget);
 };
 
+export const useUpdateTarget = () => {
+  return useMutation(updateTarget);
+};
+
 export default usePostTarget;

src/pages/Confirm.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable no-nested-ternary */
-/* eslint-disable @typescript-eslint/no-unused-vars */
+
 import { useGetResult } from "hooks/queries/useResult";
-import { Result } from "types/result.type";
 import Button from "components/common/Button";
 import Header from "components/common/Header";
 import ListComponent from "components/common/List";
@@ -11,8 +10,6 @@ import { useParams, useNavigate } from "react-router-dom";
 import COLOR from "style/color";
 import styled from "styled-components";
 
-type User = Pick<Result, "providerName" | "consumerName">;
-
 function Confirm() {
   const { targetId } = useParams();
   const navigate = useNavigate();
@@ -41,7 +38,8 @@ function Confirm() {
               고르신 선물 확인해 주세요!
             </Title>
           </TitleWrapper>
-          <ListComponent listData={data?.giftList} type="default" />
+          <ListComponent giftList={data?.giftList} type="default" />
+          <ListComponent couponList={data?.couponList} type="default" />
         </>
       )}
       <ButtonWrapper>

src/pages/Gift.tsx

@@ -2,13 +2,54 @@ import styled from "styled-components";
 import ProviderGiftForm from "components/provider/ProviderGiftForm";
 import ProviderGiftList from "components/provider/ProviderGiftList";
 import ProviderCard from "components/provider/ProviderCard";
-import Header from "components/common/Header";
 import OpenModalButton from "components/provider/coupon/OpenModalButton";
+import HeaderWithButton from "components/common/HeaderWithButton";
+import { useNavigate, useParams } from "react-router-dom";
+import { useUpdateTarget } from "hooks/queries/usePostTarget";
+import { useRecoilValue } from "recoil";
+import { FileInputState, cardInputState } from "stores/cardAtom";
+import useGift from "hooks/queries/useGift";
 
 export default function Gift() {
+  const { targetId } = useParams();
+  const navigate = useNavigate();
+  const cardInput = useRecoilValue(cardInputState);
+  const cardFile = useRecoilValue(FileInputState);
+
+  const { mutate } = useUpdateTarget();
+
+  const { getGift } = useGift(Number(targetId));
+
+  const onSubmitSelectResult = async () => {
+    try {
+      if (targetId) {
+        const postData = {
+          targetId: +targetId,
+          cardMessage: cardInput.cardText,
+          file: cardFile,
+          giftList: getGift.data?.giftList.reduce((a: number[], ele) => {
+            a.push(ele.giftId);
+            return a;
+          }, []),
+          couponList: getGift.data?.couponList.reduce((a: number[], ele) => {
+            a.push(ele.couponId);
+            return a;
+          }, []),
+        };
+        mutate(postData);
+        navigate(`/result/${targetId}`);
+      }
+    } catch (err) {
+      console.error(err);
+      alert("죄송합니다. 잠시 후 다시 시도해주세요.");
+    }
+  };
   return (
     <>
-      <Header />
+      <HeaderWithButton
+        onClickBackBtn={() => navigate("/")}
+        onClickCompleteBtn={() => onSubmitSelectResult()}
+      />
       <BodyWrapper>
         <ProviderCard />
         <ProviderGiftForm />

src/pages/GiftForConsumer.tsx

@@ -41,7 +41,7 @@ function GiftForConsumer() {
 
     setPickedFinalId(randomId);
     setIsRandom(false);
-    
+
     navigate(`/random/${targetId}/gift`, { state: resultIdArray });
   };