Skip to content

Commit

Permalink
Merge pull request #91 from Make-A-Wish-Sopt/develop
Browse files Browse the repository at this point in the history
Develop
  • Loading branch information
myeongheonhong authored Aug 23, 2023
2 parents 772e318 + 46f3e04 commit 1f23bbf
Show file tree
Hide file tree
Showing 15 changed files with 178 additions and 101 deletions.
17 changes: 17 additions & 0 deletions api/wishes/getPresignedURL.ts
Original file line number Diff line number Diff line change
@@ -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;
};
13 changes: 13 additions & 0 deletions api/wishes/uploadPresignedURL.ts
Original file line number Diff line number Diff line change
@@ -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;
};
2 changes: 1 addition & 1 deletion components/common/mainHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand Down
4 changes: 2 additions & 2 deletions components/common/progressBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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};
Expand Down
132 changes: 79 additions & 53 deletions components/main/cake.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -40,53 +40,49 @@ export default function Cake(props: CakeProps) {
const CakeImg = () => (wishStatus === 'end' ? MainEndCakeImg : PillCakeImg);

return (
<>
<Styled.Container>
<Styled.CenterContainer>
<Styled.ContentContainer>
<Image src={ChatImg()} alt="말풍선" />
<Styled.ImageContainer>
<Image src={CakeImg()} alt="케이크" />
</Styled.ImageContainer>

{wishStatus === 'while' || wishStatus === 'end' ? (
<Styled.AboutButton onClick={handleMoveToLetters}>
모인 케이크 보러가기 {'>'}
</Styled.AboutButton>
) : (
<Styled.AboutButton>모인 케이크 금액</Styled.AboutButton>
)}

<Styled.AboutSmall>{priceData}</Styled.AboutSmall>
</Styled.ContentContainer>

{/* 수정 필요 */}
<Styled.BarContainer>
{percent && <ProgressBar percent={percent} vertical={true} />}
<Styled.ProgressBox>
<Styled.Percent>{percent}%</Styled.Percent>
{percent && <Styled.PercentWrapper percent={percent}></Styled.PercentWrapper>}
</Styled.ProgressBox>
</Styled.BarContainer>
</Styled.CenterContainer>

{(wishStatus === 'while' || wishStatus === 'end') && (
<Styled.Warning>
펀딩 종료 후 3일내에 송금이 완료됩니다.
<br />
계좌번호를 확인해주세요!
</Styled.Warning>
)}
</Styled.Container>
</>
<Styled.Container>
<Styled.CenterContainer>
<Styled.ContentContainer>
<Image src={ChatImg()} alt="말풍선" />
<Styled.ImageContainer>
<Image src={CakeImg()} alt="케이크" />
</Styled.ImageContainer>

{wishStatus === 'while' || wishStatus === 'end' ? (
<Styled.AboutButton onClick={handleMoveToLetters}>
모인 케이크 보러가기 {'>'}
</Styled.AboutButton>
) : (
<Styled.AboutButton>모인 케이크 금액</Styled.AboutButton>
)}

<Styled.AboutSmall>{priceData}</Styled.AboutSmall>
</Styled.ContentContainer>

<Styled.ProgressBox>
<Styled.Percent>{percent}%</Styled.Percent>
<Styled.PercentWrapper percent={Number(percent)}></Styled.PercentWrapper>
</Styled.ProgressBox>

<Styled.BarContainer>
<Styled.Progress percent={Number(percent)} />
</Styled.BarContainer>
</Styled.CenterContainer>

{(wishStatus === 'while' || wishStatus === 'end') && (
<Styled.Warning>
펀딩 종료 후 3일내에 송금이 완료됩니다.
<br />
계좌번호를 확인해주세요!
</Styled.Warning>
)}
</Styled.Container>
);
}

const Styled = {
Container: styled.div`
margin: 9rem 0 0;
display: flex;
flex-direction: column;
`,

ImageContainer: styled.div`
Expand All @@ -96,9 +92,6 @@ const Styled = {

AboutButton: styled.button`
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin: 0 0 1rem;
${theme.fonts.headline24_100};
color: ${theme.colors.main_blue};
Expand All @@ -122,37 +115,70 @@ const Styled = {
`,

CenterContainer: styled.div`
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-start;
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;
`,
};
10 changes: 4 additions & 6 deletions components/mypage/letters/[id].tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand All @@ -25,11 +23,11 @@ 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) => {
Expand Down Expand Up @@ -60,7 +58,7 @@ export default function LettersContainer() {
fonts={theme.fonts.headline20}
image={cakeData ? cakeData.smallImage : ''}
cakeName={cakeData?.name}
cakeNum={selectedCake?.count}
cakeNum={Number(cake)}
/>

<Styled.Text>
Expand Down
11 changes: 10 additions & 1 deletion components/mypage/letters/lettersMain.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 = (
Expand Down
2 changes: 2 additions & 0 deletions constant/path.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ const PATH = {
USER: 'user',
ACCOUNT: 'account',
PROGRESS: 'progress',
FILE: 'file',
FILE_NAME: 'fileName',
PUBLIC: 'public',
};

Expand Down
5 changes: 2 additions & 3 deletions constant/queryKey.ts
Original file line number Diff line number Diff line change
@@ -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',
Expand All @@ -12,4 +10,5 @@ export const QUERY_KEY: QueryKeyType = {
CAKE_LETTERS: 'cakeLetters',
WISH_LINKS: 'wishLinks',
ONE_WISH: 'oneWish',
PRE_SIGNED_URL: 'preSignedURL',
};
8 changes: 4 additions & 4 deletions hooks/queries/letters/useGetCakesCount.ts
Original file line number Diff line number Diff line change
@@ -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);
Expand Down
44 changes: 44 additions & 0 deletions hooks/wishes/useUploadItemInfo.ts
Original file line number Diff line number Diff line change
@@ -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<File | Blob | null>(null);
const [previewImage, setPreviewImage] = useState<string | ArrayBuffer | null>('');
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<HTMLInputElement>) {
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 };
}
File renamed without changes.
13 changes: 0 additions & 13 deletions recoil/cakesCountData.ts

This file was deleted.

5 changes: 0 additions & 5 deletions types/letters/cakesCountType.ts

This file was deleted.

Loading

0 comments on commit 1f23bbf

Please sign in to comment.