Merge branch 'develop' into feat/#436-share-link-second-qa

SWEET-DEVELOPERS · Feb 29, 2024 · 765f8bf · 765f8bf
2 parents 832f2cb + 8f162e1
commit 765f8bf
Show file tree

Hide file tree

Showing 17 changed files with 238 additions and 114 deletions.
diff --git a/src/components/GiftAdd/GiftAddPageLayout/GiftAddPageLayout.tsx b/src/components/GiftAdd/GiftAddPageLayout/GiftAddPageLayout.tsx
@@ -44,16 +44,18 @@ const GiftAddPageLayout = ({ targetDate, roomId, setStep, setItemNum }: GiftAddP
     setStep(1);
   };
 
-  const handleClickConfirmDeleteBtn = (giftId: number) => {
-    mutation.mutate(giftId);
+  const handleClickConfirmDeleteBtn = (giftId?: number) => {
+    if (giftId !== undefined) {
+      mutation.mutate(giftId);
+    }
     setIsModalOpen(false);
   };
 
   return (
     <S.GiftAddPageWrapper>
       {isModalOpen && (
         <DeleteModal
-          onClickCancel={() => setIsModalOpen(false)}
+          setIsModalOpen={setIsModalOpen}
           onClickDelete={handleClickConfirmDeleteBtn}
           clickedItem={clickedItem}
         >

diff --git a/src/components/GiftHome/GiftHomeSummary/GiftHomeSummary.tsx b/src/components/GiftHome/GiftHomeSummary/GiftHomeSummary.tsx
@@ -6,11 +6,13 @@ import * as S from './GiftHomeSummary.styled';
 
 interface GiftHomeSummaryProps {
   data: RoomInfoType;
+  isBtn: boolean;
 }
 
-export const GiftHomeSummary = ({ data }: GiftHomeSummaryProps) => {
+export const GiftHomeSummary = ({ data, isBtn }: GiftHomeSummaryProps) => {
   const baseURL = import.meta.env.VITE_APP_BASE_URL_KAKAO;
-  const { handleCopyToClipboard } = useClipboard();
+  console.log('isBtn', isBtn);
+  const { handleCopyToClipboard } = useClipboard(isBtn);
 
   return (
     <S.GiftHomeSummaryWrapper>
@@ -28,8 +30,6 @@ export const GiftHomeSummary = ({ data }: GiftHomeSummaryProps) => {
       <S.Body09Text>선물 토너먼트까지</S.Body09Text>
 
       <CountDownTimer targetDate={new Date(data.tournamentStartDate)} giftee={data.gifteeName} />
-
-
     </S.GiftHomeSummaryWrapper>
   );
 };

diff --git a/src/components/OnBoardingSteps/Step02/Step02.style.ts b/src/components/OnBoardingSteps/Step02/Step02.style.ts
@@ -11,7 +11,6 @@ export const ThumbnailWrapper = styled.div`
   margin: 0 auto;
   cursor: pointer;
 
-  background-color: ${({ theme }) => theme.colors.G_01};
   border-radius: 1.2rem;
 `;
 
@@ -34,3 +33,11 @@ export const IcEmptyThumbnailWrapper = styled.div`
     height: 100%;
   }
 `;
+
+export const PreviewImage = styled.img`
+  position: relative;
+  width: 24rem;
+  height: 24rem;
+  border-radius: 1.2rem;
+  margin-top: 5.6rem;
+`;
diff --git a/src/components/OnBoardingSteps/Step02/Step02.tsx b/src/components/OnBoardingSteps/Step02/Step02.tsx
@@ -15,7 +15,7 @@ interface ThumbnailInputProps {
 
 const ThumbnailInput = React.memo((props: ThumbnailInputProps) => {
   const { onNext } = props;
-  const { isImageUploaded, handleImageUpload, imageName, file, previewImage } = usePreviewImage();
+  const { handleImageUpload, previewImageInfo } = usePreviewImage();
   const { updateOnboardingInfo } = useOnboardingContext();
 
   const { binarizeAndPutImage } = useBinarizeAndPutImage();
@@ -33,8 +33,8 @@ const ThumbnailInput = React.memo((props: ThumbnailInputProps) => {
           console.log('parsingpresignedUrl', presignedUrl);
           updateOnboardingInfo({ imageUrl: presignedUrl });
 
-          if (file) {
-            await binarizeAndPutImage({ presignedUrl, file });
+          if (previewImageInfo.file) {
+            await binarizeAndPutImage({ presignedUrl, file: previewImageInfo.file });
           }
 
           onNext();
@@ -57,24 +57,15 @@ const ThumbnailInput = React.memo((props: ThumbnailInputProps) => {
           onChange={handleImageUpload}
         />
         <label htmlFor='imgInput'>
-          {previewImage ? (
+          {previewImageInfo.previewImage ? (
             <S.ThumbnailWrapper>
-              <img
-                src={previewImage}
-                alt='preview'
-                style={{
-                  position: 'relative',
-                  width: '24rem',
-                  height: '24rem',
-                  borderRadius: '1.2rem',
-                }}
-              />
+              <S.PreviewImage src={previewImageInfo.previewImage} alt='preview' />
               <IcImgEditBtn
                 style={{
                   position: 'absolute',
                   width: '2.8rem',
                   height: '2.8rem',
-                  top: '0.8rem',
+                  bottom: '-2rem',
                   right: '0.8rem',
                   cursor: 'pointer',
                 }}
@@ -83,9 +74,9 @@ const ThumbnailInput = React.memo((props: ThumbnailInputProps) => {
           ) : (
             <IcEmptyThumbnailFinal
               style={{
+                position: 'relative',
                 width: '24rem',
                 height: '24rem',
-                position: 'relative',
                 marginTop: '2.8rem',
                 cursor: 'pointer',
               }}
@@ -95,9 +86,9 @@ const ThumbnailInput = React.memo((props: ThumbnailInputProps) => {
       </S.IcEmptyThumbnailWrapper>
 
       <OnBoardingBtn
-        isActivated={isImageUploaded}
+        isActivated={previewImageInfo.previewImage !== null}
         setStep={() => {
-          fetchPresignedUrl(imageName);
+          fetchPresignedUrl(previewImageInfo.imageName);
         }}
       >
         다음

diff --git a/src/components/OnBoardingSteps/Step04/TimePicker.tsx b/src/components/OnBoardingSteps/Step04/TimePicker.tsx
@@ -1,15 +1,17 @@
 import { useEffect, useRef, useState } from 'react';
 import { IcUnselectedClock } from '../../../assets/svg';
 import * as S from './Step04.style';
+import { useOnboardingContext } from '../../../context/Onboarding/OnboardingContext';
+import { toast } from 'react-toastify';
+import { MESSAGE } from '../../../core/toast-messages';
 
 interface TimePickerProps {
   onSelect: (selectedTime: string) => void;
 }
 
 const TimePicker = ({ onSelect }: TimePickerProps) => {
   const [isPickerOpen, setIsPickerOpen] = useState<boolean>(false);
-  const [selectedTime, setSelectedTime] = useState<string>('');
-
+  const { onboardingInfo, selectedTime, setSelectedTime } = useOnboardingContext();
   const clockRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
@@ -29,9 +31,11 @@ const TimePicker = ({ onSelect }: TimePickerProps) => {
   }, []);
 
   const handleIconClick = () => {
-    setIsPickerOpen(!isPickerOpen);
-    console.log('isPickerOpen', isPickerOpen);
-    clockRef.current?.showPicker();
+    if (!onboardingInfo.tournamentStartDate) {
+      toast(MESSAGE.UNSELECT_DATE);
+    } else {
+      clockRef.current?.showPicker();
+    }
   };
 
   const handleTimeSelect = (time: string) => {

diff --git a/src/components/common/Modal/DeleteModal.tsx b/src/components/common/Modal/DeleteModal.tsx
@@ -5,12 +5,21 @@ import { IcCancel } from '../../../assets/svg';
 
 interface DeleteModalProps {
   children: React.ReactNode;
-  onClickDelete: (giftId: number) => void;
-  onClickCancel: () => void;
-  clickedItem: number | undefined;
+  onClickDelete: (giftId?: number) => void;
+  setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  clickedItem?: number | undefined;
 }
 
-const DeleteModal = ({ children, onClickDelete, onClickCancel, clickedItem }: DeleteModalProps) => {
+const DeleteModal = ({
+  children,
+  onClickDelete,
+  setIsModalOpen,
+  clickedItem,
+}: DeleteModalProps) => {
+  const onClickCancel = () => {
+    setIsModalOpen(false);
+  };
+
   return (
     <>
       <S.Overlay />

diff --git a/src/context/Onboarding/OnboardingContext.tsx b/src/context/Onboarding/OnboardingContext.tsx
@@ -1,11 +1,19 @@
-import { PropsWithChildren, createContext, useContext, useEffect, useMemo, useState } from 'react';
+import {
+  PropsWithChildren,
+  SetStateAction,
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 import { OnboardingInfo } from '../../types/Onboarding';
 
 interface OnboardingInfoContext {
   onboardingInfo: OnboardingInfo;
   updateOnboardingInfo: (newInfo: Partial<OnboardingInfo>) => void;
-  previewImage: string;
-  setPreviewImage: (previewImage: string) => void;
+  selectedTime: string;
+  setSelectedTime: React.Dispatch<SetStateAction<string>>;
 }
 
 const initialOnboardingInfo: OnboardingInfo = {
@@ -19,15 +27,15 @@ const initialOnboardingInfo: OnboardingInfo = {
 const OnboardingContext = createContext<OnboardingInfoContext>({
   onboardingInfo: initialOnboardingInfo,
   updateOnboardingInfo: () => {},
-  previewImage: '',
-  setPreviewImage: () => {},
+  selectedTime: '',
+  setSelectedTime: () => {},
 });
 
 export const useOnboardingContext = () => useContext(OnboardingContext);
 
 export const OnboardingProvider = ({ children }: PropsWithChildren) => {
   const [onboardingInfo, setOnboardingInfo] = useState<OnboardingInfo>(initialOnboardingInfo);
-  const [previewImage, setPreviewImage] = useState<string>('');
+  const [selectedTime, setSelectedTime] = useState<string>('');
 
   const updateOnboardingInfo = (newInfo: Partial<OnboardingInfo>) => {
     setOnboardingInfo((prev) => ({ ...prev, ...newInfo }));
@@ -36,20 +44,17 @@ export const OnboardingProvider = ({ children }: PropsWithChildren) => {
   /**@todo 전체 값 확인용 useEffect */
   useEffect(() => {
     console.log('전체 값 확인:', onboardingInfo);
-  }, [onboardingInfo]);
-
-  useEffect(() => {
-    console.log(' 컨텍스트 내 previewImage 확인', previewImage);
-  }, [previewImage]);
+    console.log('selectedTime', selectedTime);
+  }, [onboardingInfo, selectedTime]);
 
   const OnboardingInfoContextValue = useMemo(
     () => ({
       onboardingInfo,
       updateOnboardingInfo,
-      previewImage,
-      setPreviewImage,
+      selectedTime,
+      setSelectedTime,
     }),
-    [onboardingInfo, previewImage],
+    [onboardingInfo, selectedTime],
   );
 
   return (

diff --git a/src/context/Onboarding/PreviewImageContext.tsx b/src/context/Onboarding/PreviewImageContext.tsx
@@ -0,0 +1,50 @@
+import { PropsWithChildren, createContext, useContext, useEffect, useMemo, useState } from 'react';
+import { PreviewImageInfo } from '../../types/Onboarding';
+
+interface PreviewImageContext {
+  previewImageInfo: PreviewImageInfo;
+  updatePreviewImageInfo: (newInfo: Partial<PreviewImageInfo>) => void;
+}
+
+const initialPreviewImageInfo: PreviewImageInfo = {
+  isImageUploaded: false,
+  previewImage: '' || null,
+  imageName: '',
+  file: null,
+};
+
+const PreviewImageContext = createContext<PreviewImageContext>({
+  previewImageInfo: initialPreviewImageInfo,
+  updatePreviewImageInfo: () => {},
+});
+
+export const usePreviewImageContext = () => useContext(PreviewImageContext);
+
+export const PreviewImageProvider = ({ children }: PropsWithChildren) => {
+  const [previewImageInfo, setPreviewImageInfo] =
+    useState<PreviewImageInfo>(initialPreviewImageInfo);
+
+  const updatePreviewImageInfo = (newInfo: Partial<PreviewImageInfo>) => {
+    setPreviewImageInfo((prev) => ({ ...prev, ...newInfo }));
+  };
+
+  /**@todo 전체 값 확인용 useEffect */
+
+  useEffect(() => {
+    console.log(' 컨텍스트 내 previewImageInfo 확인', previewImageInfo);
+  }, [previewImageInfo]);
+
+  const PreviewImageContextValue = useMemo(
+    () => ({
+      previewImageInfo,
+      updatePreviewImageInfo,
+    }),
+    [previewImageInfo],
+  );
+
+  return (
+    <PreviewImageContext.Provider value={PreviewImageContextValue}>
+      {children}
+    </PreviewImageContext.Provider>
+  );
+};
diff --git a/src/core/toast-messages.ts b/src/core/toast-messages.ts
@@ -0,0 +1,11 @@
+/**@todo 이미지 최소,최대 height 상의 필요*/
+export const IMAGE_HEIGHT = Object.freeze({
+  MAX: 1800,
+  MIN: 300,
+});
+
+export const MESSAGE = Object.freeze({
+  HEIGHT_SMALL: `이미지 세로길이가 너무 작습니다. ${IMAGE_HEIGHT.MIN}px 이상 이미지를 선택해주세요.`,
+  HEIGHT_BIG: `이미지 세로길이가 너무 큽니다. ${IMAGE_HEIGHT.MAX}px 이하 이미지를 선택해주세요. `,
+  UNSELECT_DATE: '날짜를 먼저 선택해주세요.',
+});