From feba17d45266ceb6f5f2b26affe0f8e7f704dd59 Mon Sep 17 00:00:00 2001 From: nkavay Date: Wed, 23 Aug 2023 14:42:49 +0900 Subject: [PATCH 1/3] =?UTF-8?q?[refactor]=20letters=EC=9D=98=20=ED=8E=B8?= =?UTF-8?q?=EC=A7=80=20=EA=B0=9C=EC=88=98=20=EB=84=98=EA=B8=B0=EA=B8=B0=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/mypage/letters/[id].tsx | 10 ++++++---- components/mypage/letters/lettersMain.tsx | 11 ++++++++++- hooks/queries/letters/useGetCakesCount.ts | 8 ++++---- recoil/cakesCountData.ts | 13 ------------- types/letters/cakesCountType.ts | 5 ----- 5 files changed, 20 insertions(+), 27 deletions(-) delete mode 100644 recoil/cakesCountData.ts delete mode 100644 types/letters/cakesCountType.ts diff --git a/components/mypage/letters/[id].tsx b/components/mypage/letters/[id].tsx index ef032b2c..dd07cbf1 100644 --- a/components/mypage/letters/[id].tsx +++ b/components/mypage/letters/[id].tsx @@ -9,8 +9,6 @@ import { useEffect, useState } from 'react'; import { ArrowLeftIc, ArrowRightIc } from '@/public/assets/icons'; import { useRouter } from 'next/router'; import { useGetCakesLetters } from '@/hooks/queries/letters/useGetCakeLetters'; -import { useRecoilValue } from 'recoil'; -import { CakesCountData } from '@/recoil/cakesCountData'; import { CAKE_LIST } from '@/constant/cakeList'; export default function LettersContainer() { @@ -25,11 +23,15 @@ export default function LettersContainer() { setCakeId(router.query.cakeId); }, [router.isReady]); + + // 케이크 정보, 개수 + const { cake } = router.query; const cakeData = CAKE_LIST.find(cake => cake.cakeNumber === Number(cakeId)); - const selectedCake = useRecoilValue(CakesCountData).find(cake => cake.cakeId === Number(cakeId)); + // 편지 const { lettersData, lettersSum } = useGetCakesLetters(wishId, cakeId); + const handleNameBoxClick = (index: number) => { setClickedBox(index); }; @@ -60,7 +62,7 @@ export default function LettersContainer() { image={cakeData ? cakeData.smallImage : ''} cakeName={cakeData?.name} - cakeNum={selectedCake?.count} + cakeNum={Number(cake)} /> {cakeData?.name}를 보낸 선물주님들이
남긴 편지를 읽어보세요 diff --git a/components/mypage/letters/lettersMain.tsx b/components/mypage/letters/lettersMain.tsx index 984c5b9d..b76aec8c 100644 --- a/components/mypage/letters/lettersMain.tsx +++ b/components/mypage/letters/lettersMain.tsx @@ -43,7 +43,16 @@ export default function LettersMainContainer() { const handleMoveToLetters = (cakeId: number) => { - router.push(`/mypage/letters/${wishId}/${cakeId}`); + const cake = CAKE_LIST.find(cake => cake.cakeNumber === cakeId); + + if (cake) { + router.push({ + pathname: `/mypage/letters/${wishId}/${cakeId}`, + query: { + cake: getCakeNum(cake.cakeNumber, cakesCount) + }, + }); + } }; const title = ( diff --git a/hooks/queries/letters/useGetCakesCount.ts b/hooks/queries/letters/useGetCakesCount.ts index ae2b4b48..93f3735b 100644 --- a/hooks/queries/letters/useGetCakesCount.ts +++ b/hooks/queries/letters/useGetCakesCount.ts @@ -1,20 +1,20 @@ import { useQuery } from 'react-query'; import { QUERY_KEY } from '@/constant/queryKey'; import { getCakesCount } from '@/api/letters/getCakesCount'; -import { CakesCountData } from '@/recoil/cakesCountData'; -import { useSetRecoilState } from 'recoil'; +// import { CakesCountData } from '@/recoil/cakesCountData'; +// import { useSetRecoilState } from 'recoil'; import { useState } from 'react'; export function useGetCakesCount(wishId: string | string[] | undefined) { const [total, setTotal] = useState(0); - const setCakesCountData = useSetRecoilState(CakesCountData); + // const setCakesCountData = useSetRecoilState(CakesCountData); const { data: cakesCount } = useQuery( QUERY_KEY.CAKES_COUNT, async () => getCakesCount(wishId), { onSuccess: (data) => { - setCakesCountData(data); + // setCakesCountData(data); if (Array.isArray(data)) { const cakesTotal = calculateTotal(data.map((cake: { count: any; }) => cake.count)); setTotal(cakesTotal); diff --git a/recoil/cakesCountData.ts b/recoil/cakesCountData.ts deleted file mode 100644 index 7c026b1d..00000000 --- a/recoil/cakesCountData.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { CakesCountType } from '@/types/letters/cakesCountType'; -import { atom } from 'recoil'; - -export const CakesCountData = atom({ - key: 'CakesCount', - default: - [ - { - cakeId: 0, - count: 0, - } - ], -}); diff --git a/types/letters/cakesCountType.ts b/types/letters/cakesCountType.ts deleted file mode 100644 index 5d0f30ac..00000000 --- a/types/letters/cakesCountType.ts +++ /dev/null @@ -1,5 +0,0 @@ -export interface CakesCountType { - cakeId: number; - count: number; -} - From e9c12291b5de9a23bc8057c82732fcb2d419c8c6 Mon Sep 17 00:00:00 2001 From: myeongheonhong Date: Wed, 23 Aug 2023 16:38:00 +0900 Subject: [PATCH 2/3] =?UTF-8?q?[=20feat=20]=20=EC=9D=B4=EB=AF=B8=EC=A7=80?= =?UTF-8?q?=20=EC=97=85=EB=A1=9C=EB=93=9C=20pre-signedURL=20=EB=A1=9C=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- api/common/path.ts | 2 + api/main/getProgressData.ts | 1 - api/wishes/getPresignedURL.ts | 17 +++++++ api/wishes/uploadPresignedURL.ts | 13 ++++++ constant/queryKey.ts | 5 +-- hooks/queries/wishes/useCreateWishesLink.ts | 2 - hooks/wishes/useUploadItemInfo.ts | 44 +++++++++++++++++++ hooks/wishes/useUploadItemInfo.tsx | 21 --------- .../{useWisehsStep.tsx => useWisehsStep.ts} | 0 types/queryKeyType.ts | 13 ------ 10 files changed, 78 insertions(+), 40 deletions(-) create mode 100644 api/wishes/getPresignedURL.ts create mode 100644 api/wishes/uploadPresignedURL.ts create mode 100644 hooks/wishes/useUploadItemInfo.ts delete mode 100644 hooks/wishes/useUploadItemInfo.tsx rename hooks/wishes/{useWisehsStep.tsx => useWisehsStep.ts} (100%) delete mode 100644 types/queryKeyType.ts diff --git a/api/common/path.ts b/api/common/path.ts index bb9dbe60..37b836f5 100644 --- a/api/common/path.ts +++ b/api/common/path.ts @@ -16,6 +16,8 @@ const PATH = { USER: 'user', ACCOUNT: 'account', PROGRESS: 'progress', + FILE: 'file', + FILE_NAME: 'fileName', }; export default PATH; diff --git a/api/main/getProgressData.ts b/api/main/getProgressData.ts index f3f3f899..c665a106 100644 --- a/api/main/getProgressData.ts +++ b/api/main/getProgressData.ts @@ -15,6 +15,5 @@ export const getProgressData = async () => { }, ); - console.log(data.data.data); return data.data.data; }; diff --git a/api/wishes/getPresignedURL.ts b/api/wishes/getPresignedURL.ts new file mode 100644 index 00000000..9ecce474 --- /dev/null +++ b/api/wishes/getPresignedURL.ts @@ -0,0 +1,17 @@ +import { client } from '../common/axios'; +import PATH from '../common/path'; + +export const getPresignedURL = async (fileName: string | undefined) => { + const accessToken = localStorage.getItem('accessToken'); + const data = await client.get( + `${PATH.API}/${PATH.V1}/${PATH.FILE}?${PATH.FILE_NAME}=${fileName}`, + { + headers: { + 'Content-Type': 'application/json', + Authorization: `Bearer ${accessToken}`, + }, + }, + ); + + return data; +}; diff --git a/api/wishes/uploadPresignedURL.ts b/api/wishes/uploadPresignedURL.ts new file mode 100644 index 00000000..7af5fff1 --- /dev/null +++ b/api/wishes/uploadPresignedURL.ts @@ -0,0 +1,13 @@ +import axios from 'axios'; + +export const uploadPresignedURL = async (signedURL: string, file: File | Blob | null) => { + console.log(decodeURIComponent(signedURL)); + const data = await axios.put(signedURL, file, { + headers: { + 'Content-Type': file?.type, + }, + }); + + console.log(data); + return data; +}; diff --git a/constant/queryKey.ts b/constant/queryKey.ts index 5413b26e..baf3f1ed 100644 --- a/constant/queryKey.ts +++ b/constant/queryKey.ts @@ -1,6 +1,4 @@ -import { QueryKeyType } from '@/types/queryKeyType'; - -export const QUERY_KEY: QueryKeyType = { +export const QUERY_KEY = { ITEM_DATA: 'itemData', WISHES_DATA: 'wishesData', PAYREADY: 'payReady', @@ -12,4 +10,5 @@ export const QUERY_KEY: QueryKeyType = { CAKE_LETTERS: 'cakeLetters', WISH_LINKS: 'wishLinks', ONE_WISH: 'oneWish', + PRE_SIGNED_URL: 'preSignedURL', }; diff --git a/hooks/queries/wishes/useCreateWishesLink.ts b/hooks/queries/wishes/useCreateWishesLink.ts index d8327445..0598052f 100644 --- a/hooks/queries/wishes/useCreateWishesLink.ts +++ b/hooks/queries/wishes/useCreateWishesLink.ts @@ -8,8 +8,6 @@ export function useCreateWishesLink() { const wishesData = useRecoilValue(WishesData); const setLoginUserInfo = useSetRecoilState(LoginUserInfo); - console.log(wishesData); - const { mutate: postWishesData, isSuccess } = useMutation(() => createWishesLink(wishesData), { onSuccess: (data) => { console.log(data); diff --git a/hooks/wishes/useUploadItemInfo.ts b/hooks/wishes/useUploadItemInfo.ts new file mode 100644 index 00000000..c6d1e503 --- /dev/null +++ b/hooks/wishes/useUploadItemInfo.ts @@ -0,0 +1,44 @@ +import { getPresignedURL } from '@/api/wishes/getPresignedURL'; +import { uploadPresignedURL } from '@/api/wishes/uploadPresignedURL'; +import { QUERY_KEY } from '@/constant/queryKey'; +import { useEffect, useState } from 'react'; +import { useMutation, useQuery } from 'react-query'; + +export default function useUploadItemInfo() { + const [imageFile, setImageFile] = useState(null); + const [previewImage, setPreviewImage] = useState(''); + const [preSignedURL, setPreSignedURL] = useState(''); + + const { data } = useQuery(QUERY_KEY.PRE_SIGNED_URL, () => getPresignedURL(imageFile?.name), { + enabled: imageFile !== null && imageFile?.name !== '', + }); + + useEffect(() => { + if (data?.data?.success) { + mutate(); + } + }, [data]); + + const { mutate } = useMutation(() => uploadPresignedURL(data?.data?.data?.signedUrl, imageFile), { + onSuccess: () => { + // setPreSignedURL() + }, + }); + + console.log(data); + + function uploadImageFile(e: React.ChangeEvent) { + const imageFile = e.target.files && e.target.files[0]; + + if (imageFile) { + setImageFile(imageFile); + const reader = new FileReader(); + imageFile && reader.readAsDataURL(imageFile); + reader.onloadend = () => { + setPreviewImage(reader.result); + }; + } + } + + return { imageFile, previewImage, setPreviewImage, uploadImageFile }; +} diff --git a/hooks/wishes/useUploadItemInfo.tsx b/hooks/wishes/useUploadItemInfo.tsx deleted file mode 100644 index 21726b69..00000000 --- a/hooks/wishes/useUploadItemInfo.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { useState } from 'react'; - -export default function useUploadItemInfo() { - const [imageFile, setImageFile] = useState(null); - const [previewImage, setPreviewImage] = useState(''); - - function uploadImageFile(e: React.ChangeEvent) { - const imageFile = e.target.files && e.target.files[0]; - - if (imageFile) { - setImageFile(imageFile); - const reader = new FileReader(); - imageFile && reader.readAsDataURL(imageFile); - reader.onloadend = () => { - setPreviewImage(reader.result); - }; - } - } - - return { imageFile, previewImage, setPreviewImage, uploadImageFile }; -} diff --git a/hooks/wishes/useWisehsStep.tsx b/hooks/wishes/useWisehsStep.ts similarity index 100% rename from hooks/wishes/useWisehsStep.tsx rename to hooks/wishes/useWisehsStep.ts diff --git a/types/queryKeyType.ts b/types/queryKeyType.ts deleted file mode 100644 index 10270b02..00000000 --- a/types/queryKeyType.ts +++ /dev/null @@ -1,13 +0,0 @@ -export interface QueryKeyType { - ITEM_DATA: string; - WISHES_DATA: string; - PAYREADY: string; - PG_TOKEN: string; - USER: string; - ACCOUNT: string; - PROGRESS: string; - CAKES_COUNT: string; - CAKE_LETTERS: string; - WISH_LINKS: string; - ONE_WISH: string; -} From 9b4597050078bbce19ba16c98937c3a625a1306f Mon Sep 17 00:00:00 2001 From: nkavay Date: Wed, 23 Aug 2023 16:57:40 +0900 Subject: [PATCH 3/3] =?UTF-8?q?[feat]=20ProgressBar=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/common/mainHeader.tsx | 2 +- components/common/progressBar.tsx | 4 +- components/main/cake.tsx | 152 +++++++++++++++++------------- 3 files changed, 92 insertions(+), 66 deletions(-) diff --git a/components/common/mainHeader.tsx b/components/common/mainHeader.tsx index 46620ebd..3613b52c 100644 --- a/components/common/mainHeader.tsx +++ b/components/common/mainHeader.tsx @@ -24,7 +24,7 @@ export default function MainHeader(props: MainHeaderProps) { const Styled = { Container: styled.div` display: flex; - margin: 2rem 0 0; + margin: 2rem 0 0rem; `, SideContainer: styled.div` diff --git a/components/common/progressBar.tsx b/components/common/progressBar.tsx index aa415e4e..ca830bfe 100644 --- a/components/common/progressBar.tsx +++ b/components/common/progressBar.tsx @@ -19,8 +19,8 @@ export default function ProgressBar(props: ProgressBarProps) { const Styled = { Container: styled.div<{ vertical: boolean }>` - width: 27rem; - height: 1rem; + width: 1rem; + height: 27rem; background-color: ${theme.colors.pastel_blue}; diff --git a/components/main/cake.tsx b/components/main/cake.tsx index af481dac..e2a141a6 100644 --- a/components/main/cake.tsx +++ b/components/main/cake.tsx @@ -34,51 +34,47 @@ export default function Cake(props: CakeProps) { const CakeImg = () => (wishStatus === 'end' ? MainEndCakeImg : PillCakeImg); + return ( - <> - - - - - 말풍선 - - 케이크 - - - {wishStatus === 'while' || wishStatus === 'end' ? ( - 모인 케이크 보러가기 {'>'} - ) : ( - 모인 케이크 금액 - )} - - 총 {priceData}원 - - - {/* 수정 필요 */} - - - - {percent}% - - - - - - - {(wishStatus === 'while' || wishStatus === 'end') && ( - 펀딩 종료 후 3일내에 송금이 완료됩니다.
계좌번호를 확인해주세요! - )} - - - + + + + + 말풍선 + + 케이크 + + + {wishStatus === 'while' || wishStatus === 'end' ? ( + 모인 케이크 보러가기 {'>'} + ) : ( + 모인 케이크 금액 + )} + + 총 {priceData}원 + + + + {percent}% + + + + + + + + + + {(wishStatus === 'while' || wishStatus === 'end') && ( + 펀딩 종료 후 3일내에 송금이 완료됩니다.
계좌번호를 확인해주세요! + )} + ); } const Styled = { Container: styled.div` margin: 9rem 0 0; - display: flex; - flex-direction: column; `, ImageContainer: styled.div` @@ -87,22 +83,19 @@ const Styled = { `, AboutButton: styled.button` - width: 100%; + width: 100%; + margin: 0 0 1rem; + ${theme.fonts.headline24_100}; + color: ${theme.colors.main_blue}; + `, + + AboutSmall: styled.div` display: flex; justify-content: center; align-items: center; -margin: 0 0 1rem; -${theme.fonts.headline24_100}; -color: ${theme.colors.main_blue}; -`, - - AboutSmall: styled.div` -display: flex; -justify-content: center; -align-items: center; -${theme.fonts.headline24_100}; -margin: 0 0 5.4rem; - `, + ${theme.fonts.headline24_100}; + margin: 0 0 5.4rem; + `, Warning: styled.div` display: flex; @@ -114,38 +107,71 @@ margin: 0 0 5.4rem; `, CenterContainer: styled.div` -display: flex; -justify-content: space-between; - align-items: flex-start; + width: 100%; + display: flex; + justify-content: right; + align-items: center; + padding: 0 1rem 0 0; `, ContentContainer: styled.div` -width: 100%; -`, + display: flex; + flex-direction: column; + justify-content: center; - // progress bar - BarContainer: styled.div` - `, +`, ProgressBox: styled.div` height: 27rem; display: flex; flex-direction: column; + justify-content: right; `, PercentWrapper: styled.div<{ percent: number }>` height: ${(props) => props.percent}%; - - /* ${(props) => + + ${(props) => props.percent > 3 && css` - margin-left: -1.7rem; - `} */ + margin-top: -2rem; + `} `, Percent: styled.div` ${theme.fonts.button16}; color: ${theme.colors.main_blue}; margin-top: auto; + margin-right: 0.5rem; +`, + + // Progressbar + BarContainer: styled.div` +width: 1rem; +height: 27rem; + +background-color: ${theme.colors.pastel_blue}; + +border-bottom-right-radius: 5rem; +border-bottom-left-radius: 5rem; +border-top-right-radius: 5rem; +border-top-left-radius: 5rem; + +-ms-transform: rotate(180deg); /* IE 9 */ +-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */ +transform: rotate(180deg); +`, + + Progress: styled.div<{ percent: number }>` +height: ${(props) => props.percent}%; +max-height: 100%; +width: 100%; + +background-color: ${theme.colors.main_blue}; + +border-bottom-right-radius: 5rem; +border-bottom-left-radius: 5rem; +border-top-right-radius: 5rem; +border-top-left-radius: 5rem; `, }