diff --git a/public/svg/ic_empty_thumbnail_final.svg b/public/svg/ic_empty_thumbnail_final.svg new file mode 100644 index 00000000..947ccb45 --- /dev/null +++ b/public/svg/ic_empty_thumbnail_final.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/assets/svg/IcDown.tsx b/src/assets/svg/IcDown.tsx index 22498da4..174c85f8 100644 --- a/src/assets/svg/IcDown.tsx +++ b/src/assets/svg/IcDown.tsx @@ -2,7 +2,7 @@ import type { SVGProps } from 'react'; const SvgIcDown = (props: SVGProps) => ( ) => ( + + + + + + + + + + + + + + + + + + +); +export default SvgIcEmptyThumbnailFinal; diff --git a/src/assets/svg/index.ts b/src/assets/svg/index.ts index e3fb9706..e8bb0904 100644 --- a/src/assets/svg/index.ts +++ b/src/assets/svg/index.ts @@ -91,3 +91,4 @@ export { default as Ranking04 } from './Ranking04'; export { default as Ranking1 } from './Ranking1'; export { default as Ranking2 } from './Ranking2'; export { default as Ranking3 } from './Ranking3'; +export { default as IcEmptyThumbnailFinal } from './IcEmptyThumbnailFinal'; diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index 506d5e04..ea08ff6a 100644 --- a/src/components/Footer/Footer.tsx +++ b/src/components/Footer/Footer.tsx @@ -41,9 +41,9 @@ const Footer = ({ customStyle }: FooterType) => { Copyright 2024. Sweet. all rights reserved. - + - + diff --git a/src/components/GiftAdd/AddGiftFooter/AddGiftFooter.tsx b/src/components/GiftAdd/AddGiftFooter/AddGiftFooter.tsx index 5c797140..e0c7ed9f 100644 --- a/src/components/GiftAdd/AddGiftFooter/AddGiftFooter.tsx +++ b/src/components/GiftAdd/AddGiftFooter/AddGiftFooter.tsx @@ -3,6 +3,7 @@ import GiftAddNextBtn from '../AddGiftLink/common/GiftAddNextBtn/GiftAddNextBtn' import * as S from './AddGiftFooter.styled'; import { AddGiftInfo } from '../../../types/gift'; import usePutImageUrlToS3 from '../../../hooks/usePutImageUrlToS3'; +import { useAddGiftContext } from '../../../context/AddGift/AddGiftContext'; interface AddGiftFooterProps { targetDate: string; @@ -18,6 +19,9 @@ interface AddGiftFooterProps { fileName: string; setIsLoading: React.Dispatch>; setIsModalOpen: React.Dispatch>; + setNameText: React.Dispatch>; + setPriceText: React.Dispatch>; + setLinkText: React.Dispatch>; } const AddGiftFooter = ({ @@ -25,7 +29,7 @@ const AddGiftFooter = ({ roomId, setStep, isActivated, - name, + // name, cost, link, file, @@ -34,16 +38,25 @@ const AddGiftFooter = ({ updateAddGiftInfo, setIsLoading, setIsModalOpen, + setNameText, + setPriceText, + setLinkText, }: AddGiftFooterProps) => { - const { mutation } = usePostGift( + const { mutation } = usePostGift({ roomId, targetDate, setStep, updateAddGiftInfo, setIsLoading, setIsModalOpen, - ); + setNameText, + setPriceText, + setImageUrl, + setLinkText, + }); const { putImageUrlToS3 } = usePutImageUrlToS3(roomId); + const { addGiftInfo } = useAddGiftContext(); + const onClick = async () => { setIsLoading(true); const { imageUrlS3 } = await putImageUrlToS3({ fileName, file, roomId, setImageUrl }); @@ -51,7 +64,7 @@ const AddGiftFooter = ({ try { await mutation.mutateAsync({ roomId: roomId, - name: name, + name: addGiftInfo.name, cost: cost, imageUrl: imageUrlS3, url: link, diff --git a/src/components/GiftAdd/AddGiftLayout/AddGiftWithLinkLayout.tsx b/src/components/GiftAdd/AddGiftLayout/AddGiftWithLinkLayout.tsx index e9ab3bc3..bcc4f610 100644 --- a/src/components/GiftAdd/AddGiftLayout/AddGiftWithLinkLayout.tsx +++ b/src/components/GiftAdd/AddGiftLayout/AddGiftWithLinkLayout.tsx @@ -14,6 +14,7 @@ import { useUpdateGifteeNameContext } from '../../../context/GifteeName/GifteeNa interface AddGiftWithLinkLayoutProps { link: string; + setLinkText: React.Dispatch>; roomId: number; step: number; setStep: React.Dispatch>; @@ -25,10 +26,17 @@ interface AddGiftWithLinkLayoutProps { setIsLoading: React.Dispatch>; isModalOpen: boolean; setIsModalOpen: React.Dispatch>; + nameText: string; + setNameText: React.Dispatch>; + priceText: number | null; + setPriceText: React.Dispatch>; + imageUrl: string; + setImageUrl: React.Dispatch>; } const AddGiftWithLinkLayout = ({ link, + setLinkText, roomId, step, setStep, @@ -40,13 +48,17 @@ const AddGiftWithLinkLayout = ({ setIsLoading, isModalOpen, setIsModalOpen, + nameText, + setNameText, + priceText, + setPriceText, + imageUrl, + setImageUrl, }: AddGiftWithLinkLayoutProps) => { const [isActivated, setIsActivated] = useState( !!addGiftInfo.name && !!addGiftInfo.cost && !!addGiftInfo.imageUrl, ); - const [nameText, setNameText] = useState(addGiftInfo.name); - const [priceText, setPriceText] = useState(addGiftInfo.cost); - const [imageUrl, setImageUrl] = useState(addGiftInfo.imageUrl); + const [fileName, setFileName] = useState(''); const [file, setFile] = useState(null); const [, setIsImageUploaded] = useState(false); @@ -69,6 +81,7 @@ const AddGiftWithLinkLayout = ({ const convertResult = await useConvertURLtoFile({ url: openGraph.image, setStep, + setImageUrl, setModalStatus, updateAddGiftInfo, }); @@ -112,6 +125,7 @@ const AddGiftWithLinkLayout = ({ /> ); diff --git a/src/components/GiftAdd/AddGiftLayout/AddGiftWithoutLinkLayout.tsx b/src/components/GiftAdd/AddGiftLayout/AddGiftWithoutLinkLayout.tsx index 26b66978..e8c7fa92 100644 --- a/src/components/GiftAdd/AddGiftLayout/AddGiftWithoutLinkLayout.tsx +++ b/src/components/GiftAdd/AddGiftLayout/AddGiftWithoutLinkLayout.tsx @@ -25,6 +25,16 @@ interface AddGiftWithLinkLayoutProps { setIsLoading: React.Dispatch>; isDuplicateModalOpen: boolean; setIsDuplicateModalOpen: React.Dispatch>; + nameText: string; + setNameText: React.Dispatch>; + priceText: number | null; + setPriceText: React.Dispatch>; + imageUrl: string; + setImageUrl: React.Dispatch>; + file: File | null; + setFile: React.Dispatch>; + fileName: string; + setFileName: React.Dispatch>; } // 직접 입력 화면 @@ -41,15 +51,24 @@ export const AddGiftWithoutLinkLayout = ({ setIsLoading, isDuplicateModalOpen, setIsDuplicateModalOpen, + nameText, + setNameText, + priceText, + setPriceText, + imageUrl, + setImageUrl, + file, + setFile, + fileName, + setFileName, }: AddGiftWithLinkLayoutProps) => { + console.log('오잉'); const [isActivated, setIsActivated] = useState( - !!addGiftInfo.name && !!addGiftInfo.cost && !!addGiftInfo.url && !!addGiftInfo.imageUrl, + !!addGiftInfo.name && !!addGiftInfo.cost && !!addGiftInfo.imageUrl, ); - const [nameText, setNameText] = useState(addGiftInfo.name); - const [priceText, setPriceText] = useState(addGiftInfo.cost); - const [imageUrl, setImageUrl] = useState(addGiftInfo.imageUrl); - const [fileName, setFileName] = useState(''); - const [file, setFile] = useState(null); + + // const [fileName, setFileName] = useState(''); + // const [file, setFile] = useState(null); const [, setIsImageUploaded] = useState(false); const [, setPreviewImage] = useState(null); const [isModalOpen, setIsModalOpen] = useState(modalStatus); @@ -129,6 +148,9 @@ export const AddGiftWithoutLinkLayout = ({ setImageUrl={setImageUrl} setIsLoading={setIsLoading} setIsModalOpen={setIsDuplicateModalOpen} + setNameText={setNameText} + setPriceText={setPriceText} + setLinkText={setLinkText} /> ); diff --git a/src/components/GiftAdd/AddGiftLayout/common/AddGiftImg/AddGiftImg.styled.ts b/src/components/GiftAdd/AddGiftLayout/common/AddGiftImg/AddGiftImg.styled.ts index 7dd121aa..88b0b2f6 100644 --- a/src/components/GiftAdd/AddGiftLayout/common/AddGiftImg/AddGiftImg.styled.ts +++ b/src/components/GiftAdd/AddGiftLayout/common/AddGiftImg/AddGiftImg.styled.ts @@ -18,7 +18,7 @@ export const ImgPreview = styled.img` width: 19.2rem; height: 19.2rem; - object-fit: contain; + object-fit: cover; `; export const IcEmptyThumbnailWrapper = styled.div` @@ -28,7 +28,7 @@ export const IcEmptyThumbnailWrapper = styled.div` margin-top: 2.8rem; cursor: pointer; img { - object-fit: contain; + object-fit: cover; width: 100%; height: 100%; } diff --git a/src/components/GiftAdd/AddGiftLayout/common/AddGiftImg/AddGiftImg.tsx b/src/components/GiftAdd/AddGiftLayout/common/AddGiftImg/AddGiftImg.tsx index 4e0830d7..cd993f32 100644 --- a/src/components/GiftAdd/AddGiftLayout/common/AddGiftImg/AddGiftImg.tsx +++ b/src/components/GiftAdd/AddGiftLayout/common/AddGiftImg/AddGiftImg.tsx @@ -2,6 +2,7 @@ import * as S from './AddGiftImg.styled'; import { IcEmptyThumbnail, IcImgEditBtn } from '../../../../../assets/svg'; import { OpenGraphResponseType } from '../../../../../types/etc'; import useHandleImageUpload from '../../../../../hooks/useHandleImageUpload'; +import { useAddGiftContext } from '../../../../../context/AddGift/AddGiftContext'; interface AddGiftImgProps { imageUrl: string; @@ -30,9 +31,12 @@ const AddGiftImg = ({ setPreviewImage, setIsImageUploaded, }); + + const { addGiftInfo } = useAddGiftContext(); + console.log('ADDGIFTINFO 이미지', addGiftInfo.imageUrl); return ( <> - {openGraph?.image !== '' || imageUrl !== '' ? ( + {openGraph?.image !== '' || imageUrl !== '' || addGiftInfo.imageUrl !== '' ? ( <> + {name} - + ); diff --git a/src/components/GiftHome/GiftHomeSummary/GiftHomeSummary.styled.ts b/src/components/GiftHome/GiftHomeSummary/GiftHomeSummary.styled.ts index c060a43c..6decf04c 100644 --- a/src/components/GiftHome/GiftHomeSummary/GiftHomeSummary.styled.ts +++ b/src/components/GiftHome/GiftHomeSummary/GiftHomeSummary.styled.ts @@ -14,7 +14,7 @@ export const GiftHomeSummaryWrapper = styled.section` background-image: url(${HomeBackgroundImage}); background-size: cover; background-repeat: no-repeat; - width: calc(100% + 1.4rem); + /* width: calc(100% + 1.4rem); */ `; export const FriendsNumber = styled.p` diff --git a/src/components/GiftHome/GiftHomeSummary/GiftHomeSummary.tsx b/src/components/GiftHome/GiftHomeSummary/GiftHomeSummary.tsx index a53a5fa8..06caa639 100644 --- 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 ( @@ -28,8 +30,6 @@ export const GiftHomeSummary = ({ data }: GiftHomeSummaryProps) => { 선물 토너먼트까지 - - ); }; diff --git a/src/components/GiftHome/common/GiftHomeShowcase.styled.ts b/src/components/GiftHome/common/GiftHomeShowcase.styled.ts index 778f881d..4a938722 100644 --- a/src/components/GiftHome/common/GiftHomeShowcase.styled.ts +++ b/src/components/GiftHome/common/GiftHomeShowcase.styled.ts @@ -22,7 +22,6 @@ export const NoGiftsWrapper = styled.div` export const GiftsWrapper = styled.div` width: 36rem; - height: 22.5rem; display: flex; column-gap: 0.8rem; @@ -31,4 +30,8 @@ export const GiftsWrapper = styled.div` color: ${({ theme }) => theme.colors.G_07}; ${({ theme }) => theme.fonts.body_09}; + + &::-webkit-scrollbar { + display: none; + } `; diff --git a/src/components/GiftHome/common/GiftHomeShowcaseHeader/GiftHoeShowcaseHeader.style.ts b/src/components/GiftHome/common/GiftHomeShowcaseHeader/GiftHoeShowcaseHeader.style.ts index 4199cb6f..6a756c88 100644 --- a/src/components/GiftHome/common/GiftHomeShowcaseHeader/GiftHoeShowcaseHeader.style.ts +++ b/src/components/GiftHome/common/GiftHomeShowcaseHeader/GiftHoeShowcaseHeader.style.ts @@ -4,7 +4,7 @@ export const GiftHomeShowcaseHeaderWrapper = styled.article` width: 100%; height: 4rem; padding: 0 1.4rem 0 0; - margin-bottom: 0.7rem; + margin-bottom: 0.6rem; display: flex; justify-content: space-between; align-items: center; diff --git a/src/components/GiftHome/common/GiftHomeShowcaseItem.styled.ts b/src/components/GiftHome/common/GiftHomeShowcaseItem.styled.ts index 7c07c4b8..ae2ba26c 100644 --- a/src/components/GiftHome/common/GiftHomeShowcaseItem.styled.ts +++ b/src/components/GiftHome/common/GiftHomeShowcaseItem.styled.ts @@ -22,6 +22,8 @@ export const GiftsItemImage = styled.img` `; export const GiftsItemTitle = styled.p` + margin-top: 0.8rem; + display: -webkit-box; width: 12.8rem; -webkit-box-orient: vertical; @@ -35,6 +37,7 @@ export const GiftsItemTitle = styled.p` `; export const GiftsItemPrice = styled.span` + margin-top: 0.2rem; ${({ theme }) => theme.fonts.body_09}; color: ${({ theme }) => theme.colors.black}; `; diff --git a/src/components/OnBoardingSteps/Step01/Step01.style.ts b/src/components/OnBoardingSteps/Step01/Step01.style.ts index 8ebc3292..49f9e3a3 100644 --- a/src/components/OnBoardingSteps/Step01/Step01.style.ts +++ b/src/components/OnBoardingSteps/Step01/Step01.style.ts @@ -54,6 +54,5 @@ export const LetterLength = styled.p` export const IconWrapper = styled.div` ${({ theme }) => theme.mixin.flexCenter({ direction: 'row' })}; - width: 4rem; height: 4rem; `; diff --git a/src/components/OnBoardingSteps/Step02/Step02.style.ts b/src/components/OnBoardingSteps/Step02/Step02.style.ts index a1942922..626029df 100644 --- a/src/components/OnBoardingSteps/Step02/Step02.style.ts +++ b/src/components/OnBoardingSteps/Step02/Step02.style.ts @@ -1,10 +1,6 @@ import styled from 'styled-components'; export const ThumbnailWrapper = styled.div` - /* ${({ theme }) => - theme.mixin.flexCenter({ direction: 'column', align: 'center', justify: 'center' })}; - margin-top: 6.1rem; */ - ${({ theme }) => theme.mixin.flexCenter({})} position: relative; @@ -15,19 +11,10 @@ export const ThumbnailWrapper = styled.div` margin: 0 auto; cursor: pointer; - background-color: ${({ theme }) => theme.colors.G_01}; border-radius: 1.2rem; `; export const PreviewImg = styled.img` - /* src: previewImage; - alt: 'preview'; - width: 24rem; - height: 24rem; - position: absolute; - border-radius: 1.2rem; - object-fit: cover; */ - width: 24rem; height: 24rem; @@ -46,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 index bbf18d45..a05922d2 100644 --- a/src/components/OnBoardingSteps/Step02/Step02.tsx +++ b/src/components/OnBoardingSteps/Step02/Step02.tsx @@ -1,5 +1,5 @@ import Title from '../../common/title/Title'; -import { IcEmptyThumbnail, IcImgEditBtn } from '../../../assets/svg'; +import { IcEmptyThumbnailFinal, IcImgEditBtn } from '../../../assets/svg'; import * as S from './Step02.style'; import OnBoardingBtn from '../onboardingBtn/OnBoardingBtn'; import usePreviewImage from '../../../hooks/common/usePreviewImage'; @@ -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,35 +57,26 @@ const ThumbnailInput = React.memo((props: ThumbnailInputProps) => { onChange={handleImageUpload} />