import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { postFundingCreate } from '../../../apis/funding';
import { useParams } from 'react-router-dom';
import CreateModal from './Modal/CreateModal';
import { infoToast } from '../../../components/toast';
import { IoIosArrowBack } from 'react-icons/io';
import { GrAdd } from 'react-icons/gr';
import theme from '../../../styles/theme';
import {
MainContainer,
LeftContainer,
LeftImgContainer,
LeftLogoTextIcon,
BubbleImg,
LeftRowdiv,
LeftImg,
Leftcolumndiv,
IpadLoveImg,
P,
Button,
RightContainer,
NavbarDiv,
ImgPlus,
ProducImgtDiv,
FundingImg,
Body,
FundingDiv,
SponserDiv,
RadioInput,
OpenPrivateComment,
TogetherDiv,
SponsorComment,
Textarea,
ImgText,
ColumnDiv,
InputLabel,
TitleLabel,
InputSpan,
InputInput,
} from './FundingCreateStyles';
const FundingCreate = () => {
const navigate = useNavigate();
const { id } = useParams(); // URL 매개변수(id)를 가져옴
const [itemImage, setItemImage] = useState(false);
const [isFundingModalOpen, setIsFundingModalOpen] = useState(false);
const [createData, setCreateData] = useState({
itemName: '',
targetAmount: '',
publicFlag: true,
showName: '',
title: '',
content: '',
endDate: '',
});
// 펀딩 이미지를 클릭했을 때 모달을 열고 이미지를 설정하는 함수
const handleFundingModalClick = (e) => {
setIsFundingModalOpen(true);
};
// 모달을 닫는 함수
const closeModal = () => {
setIsFundingModalOpen(false);
};
// 모달 내에서 이미지를 선택하고 설정하는 함수
const handleImageSelection = (itemImage) => {
setItemImage(itemImage);
setIsFundingModalOpen(false);
};
// 각 입력값에 대한 상태 업데이트 핸들러
const handleItemNameChange = (e) => {
setCreateData({ ...createData, itemName: e.target.value });
};
const handleTargetAmountChange = (e) => {
setCreateData({ ...createData, targetAmount: e.target.value });
};
const handleShowNameChange = (e) => {
setCreateData({ ...createData, showName: e.target.value });
};
const handleTitleChange = (e) => {
setCreateData({ ...createData, title: e.target.value });
};
const handleContentChange = (e) => {
setCreateData({ ...createData, content: e.target.value });
};
const handleEndDateChange = (e) => {
setCreateData({ ...createData, endDate: e.target.value });
};
const handlePublicFlagChange = (e) => {
// 업데이트: 한 번에 하나의 옵션만 선택했는지 확인하세요.
const value = e.target.value === 'true' ? true : false;
setCreateData({ ...createData, publicFlag: value });
};
const handleFundingClick = async () => {
try {
if (
itemImage === '' ||
createData.itemName === '' ||
createData.targetAmount === '' ||
createData.publicFlag === '' ||
createData.showName === '' ||
createData.title === '' ||
createData.content === '' ||
createData.endDate === ''
) {
infoToast('내용을 입력해주세요');
return;
}
// 펀딩 추가 API
const data = await postFundingCreate({
id,
itemImage,
itemName: createData.itemName,
targetAmount: createData.targetAmount,
publicFlag: createData.publicFlag,
showName: createData.showName,
title: createData.title,
content: createData.content,
endDate: createData.endDate,
});
navigate(`/fundingdetail/${data.id}`);
} catch (error) {
console.error('펀딩 추가 API 호출 실패: ', error);
}
};
// const handleLogoutClick = () => {
// dispatch(userLogout()); // 로그아웃 액션 디스패치
// navigate('/');
// };
return (
<MainContainer>
<LeftContainer>
<LeftContainer pt="70px">
<LeftImgContainer>
<div>
<LeftLogoTextIcon src="/imgs/Common/giftipie.png" />
</div>
<div>
<P pt="60px" pl="355px" fs="23px" fw="800" color={theme.white}>
생일선물
<br />뭐 받고싶어?
</P>
<BubbleImg src="/imgs/Home/speech-bubble.png" />
</div>
</LeftImgContainer>
<LeftRowdiv ml="30px">
<LeftRowdiv color="#3F3F3F" mr="10px" bc={theme.primary} br="25px" p="8px">
<LeftImg src="/imgs/Home/giftbox-red.png" w="30px" h="25px" mr="10px" pl="10px" />
<P fs="20px" fw="900" pr="10px">
정말 원하는 선물
</P>
</LeftRowdiv>
<div>
<P mt="6px" pt="2px" fs="20px" fw="700" color={theme.white}>
을 주고 받아요!
</P>
</div>
</LeftRowdiv>
<LeftRowdiv>
<Leftcolumndiv ml="30px">
<P fs="16px" fw="500" pt="30px" pb="5px" color={theme.white}>
지금은 유저테스트 진행 중 입니다
</P>
<P pb="100px" fs="16px" fw="500" color={theme.white}>
6명의 개발자와 1명의 디자이너가 함께 개발하고 있습니다
</P>
</Leftcolumndiv>
<LeftImg src="/imgs/Home/pie-hi.png" w="340px" pl="100px" />
</LeftRowdiv>
</LeftContainer>
<LeftRowdiv ml="30px"></LeftRowdiv>
<IpadLoveImg src="/imgs/Home/pie-ipad.png" w="330px" />
</LeftContainer>
<RightContainer>
<NavbarDiv>
<IoIosArrowBack onClick={() => navigate('/')} color={theme.white} size="20px" />
<P pl="120px" fs="13px" fw="900" color={theme.white}>
메시지 더보기
</P>
</NavbarDiv>
<Body>
<form
onSubmit={(e) => {
e.preventDefault();
}}
>
<FundingDiv>
<TogetherDiv bc={theme.white}>
<P pt="5px" pb="5px" fw="600" fs={theme.title} color={theme.black}>
펀딩 제품
</P>
<P pb="20px" fs={theme.body2} color={theme.gray3}>
펀딩 생성 페이지에 상품명과 이미지가 노출돼요.
</P>
<ProducImgtDiv>
<SponsorComment onClick={handleFundingModalClick}>
<FundingImg src={itemImage} h="120px" w="110px" />
<ImgPlus>
<GrAdd fontSize={theme.title} color={theme.gray3} />
</ImgPlus>
<ImgText>
상품 이미지
<br />
등록
</ImgText>
</SponsorComment>
<ColumnDiv>
<TitleLabel>
<InputSpan>상품명</InputSpan>
<InputInput
type="text"
value={createData.itemName}
onChange={handleItemNameChange}
placeholder="상품명을 입력해주세요"
></InputInput>
</TitleLabel>
<TitleLabel>
<InputSpan>목표 금액</InputSpan>
<InputInput
type="text"
value={createData.targetAmount}
onChange={handleTargetAmountChange}
placeholder="목표 금액을 입력해주세요"
></InputInput>
</TitleLabel>
</ColumnDiv>
</ProducImgtDiv>
{isFundingModalOpen && (
<CreateModal closeModal={closeModal} handleImageSelection={handleImageSelection} />
)}
</TogetherDiv>
<TogetherDiv bc={theme.white}>
<SponserDiv>
<OpenPrivateComment mt="5px">
<P pb="10px" fw="600" fs={theme.title} color={theme.black}>
펀딩 내용
</P>
<P pb="20px" fs={theme.detail} color={theme.gray2}>
공개 방식
</P>
<SponserDiv>
<RadioInput
value="true"
checked={createData.publicFlag === true}
onChange={handlePublicFlagChange}
type="radio"
mb="21px"
/>
<P pb="20px" pl="20px" fs={theme.body2} color={theme.black}>
공개
</P>
<P pb="20px" pl="42px" fs={theme.detail} color={theme.gray2}>
누구나 볼 수 있어요
</P>
</SponserDiv>
<SponserDiv>
<RadioInput
value="false"
checked={createData.publicFlag === false}
onChange={handlePublicFlagChange}
type="radio"
mb="21px"
/>
<P pb="20px" pl="20px" fs={theme.body2} color={theme.black}>
비공개
</P>
<P pb="20px" pl="30px" fs={theme.detail} color={theme.gray2}>
링크를 통해서만 방문할 수 있어요
</P>
</SponserDiv>
</OpenPrivateComment>
</SponserDiv>
<InputLabel>
<InputSpan>보여줄 이름</InputSpan>
<InputInput
type="text"
value={createData.showName}
onChange={handleShowNameChange}
placeholder="이름을 입력해주세요"
></InputInput>
</InputLabel>
<InputLabel>
<InputSpan>제목</InputSpan>
<InputInput
type="text"
value={createData.title}
onChange={handleTitleChange}
placeholder="제목을 입력해주세요"
></InputInput>
</InputLabel>
<InputLabel>
<InputSpan>본문</InputSpan>
<Textarea
type="textarea"
value={createData.content}
onChange={handleContentChange}
placeholder="본문을 입력해주세요"
/>
</InputLabel>
</TogetherDiv>
<TogetherDiv bc={theme.white} br="30px 30px 0px 0px">
<InputLabel>
<InputSpan>마감일 설정</InputSpan>
<InputInput
type="date"
value={createData.endDate}
onChange={handleEndDateChange}
></InputInput>
</InputLabel>
<Button
onClick={handleFundingClick}
w="100%"
h="60px"
mt="10px"
mb="10px"
color="white"
fs="19px"
bc={theme.primary}
>
펀딩 등록하기
</Button>
<ColumnDiv>
<P fs={theme.body2} color={theme.gray3}>
펀딩 금액은 계좌로 전달돼요
</P>
<P pb="40px" fs={theme.body2} color={theme.gray3}>
펀딩에 성공하면 카톡으로 알림이 가요
</P>
</ColumnDiv>
</TogetherDiv>
</FundingDiv>
</form>
</Body>
</RightContainer>
</MainContainer>
);
};
export default FundingCreate;
import styled from "styled-components";
import theme from "../../../styles/theme";
// 전체 컨테이너
export const MainContainer = styled.div`
display: flex;
justify-content: center;
max-width: 1200px;
min-height: 100vh;
margin: 0 auto;
flex-wrap: wrap;
`;
/* 왼쪽 컨테이너 */
export const LeftContainer = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
height: 100vh;
padding-top: ${(props) => props.pt};
@media (max-width: 1200px) {
display: none;
}
`;
export const LeftImgContainer = styled.div`
position: relative; /*상대 위치 지정*/
//width: 300px; /* 이미지 너비 */
height: 200px; /* 이미지 높이 */
padding-left: 100px; /* 이미지 왼쪽 간격 조정 */
justify-content: space-between;
`;
export const LeftLogoTextIcon = styled.img`
height: 40px;
position: absolute; /* 절대 위치 지정 */
bottom: 20px; /* 아래쪽 위치 조정 */
left: 30px; /* 왼쪽 위치 조정 */
`;
export const BubbleImg = styled.img`
position: absolute; /* 절대 위치 지정 */
top: 0; /* 위쪽 정렬 */
left: 368px; /* 왼쪽 정렬 */
width: 290px; /* 부모 요소에 대한 상대적인 너비 */
height: 230px; /* 부모 요소에 대한 상대적인 높이 */
`;
export const LeftRowdiv = styled.div`
display: flex;
flex-direction: row;
/* align-items: center; */
padding-top: ${(props) => props.pt};
margin-top: ${(props) => props.mt};
padding-bottom: ${(props) => props.pb};
padding-left: ${(props) => props.pl};
padding-right: ${(props) => props.pr};
margin-right: ${(props) => props.mr};
margin-left: ${(props) => props.ml};
font-size: ${(props) => props.fs};
font-weight: ${(props) => props.fw};
color: ${(props) => props.color};
background-color: ${(props) => props.bc};
border-radius: ${(props) => props.br};
padding: ${(props) => props.p};
border: none;
`;
export const LeftImg = styled.img`
margin-top: ${(props) => props.mt};
margin-right: ${(props) => props.mr};
padding-right: ${(props) => props.pr};
padding-left: ${(props) => props.pl};
width: ${(props) => props.w};
height: ${(props) => props.h};
`;
export const Leftcolumndiv = styled.div`
flex-direction: column;
margin-left: ${(props) => props.ml};
`;
export const IpadLoveImg = styled.img`
position: absolute;
bottom: 0;
left: 0;
width: ${(props) => props.w};
height: ${(props) => props.h};
`;
export const Logo = styled.h1`
font-size: 24px;
font-weight: 800;
`;
export const P = styled.p`
padding-top: ${(props) => props.pt};
padding-bottom: ${(props) => props.pb};
padding-left: ${(props) => props.pl};
padding-right: ${(props) => props.pr};
font-size: ${(props) => props.fs};
font-weight: ${(props) => props.fw};
color: ${(props) => props.color};
margin-top: ${(props) => props.mt};
margin-right: ${(props) => props.mr};
background-color: ${(props) => props.bc};
border-radius: ${(props) => props.br};
padding: ${(props) => props.p};
border: none;
align-items: center;
`;
export const Button = styled.button`
justify-content: center;
align-items: center;
width: ${(props) => props.w};
height: ${(props) => props.h};
padding: 10px;
background-color: ${(props) => props.bc};
border-radius: 15px;
color: ${(props) => props.color};
font-size: ${(props) => props.fs};
font-weight: 600;
margin-top: ${(props) => props.mt};
margin-bottom: ${(props) => props.mb};
padding-left: ${(props) => props.pl};
padding-right: ${(props) => props.pr};
padding-right: ${(props) => props.pr};
&:hover {
color: white;
background-color: black;
cursor: pointer;
}
`;
/* 오른쪽 컨테이너 */
export const RightContainer = styled.div`
position: relative;
width: -webkit-fill-available; /* 사용 가능한 너비로 채움 */
max-width: 390px; /* 최대 너비를 390px로 제한 */
height: 100vh;
overflow-y: scroll;
&::-webkit-scrollbar {
display: none;
}
@media screen and (max-width: 390px) {
max-width: 100%; /* 최대 너비를 100%로 설정하여 가득 차게 함 */
}
`;
// 네브바 영역
export const NavbarDiv = styled.div`
display: flex;
flex-direction: row;
align-items: center;
height: 70px;
padding-left: 20px;
`;
// 바디 영역
export const Body = styled.div`
height: auto;
`;
export const TogetherDiv = styled.div`
background-color: ${(props) => props.bc};
border-radius: 30px;
border-radius: ${(props) => props.br};
width: -webkit-fill-available; /* 사용 가능한 너비로 채움 */
max-width: 390px; /* 최대 너비를 390px로 제한 */
margin: 0 auto; /* 가운데 정렬을 위해 margin을 auto로 설정 */
margin-bottom: 15px;
padding: 20px;
@media screen and (max-width: 390px) {
width: 100%; /* 최대 너비를 100%로 설정하여 가득 차게 함 */
}
`;
export const FundingDiv = styled.div`
justify-content: center;
width: 100%;
max-width: 390px;
height: auto;
`;
export const ProducImgtDiv = styled.div`
display: flex;
flex-direction: row;
justify-content: start;
align-items: start;
`;
export const SponserDiv = styled.div`
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
`;
export const OpenPrivateComment = styled.div`
margin-top: ${(props) => props.mt};
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
`;
export const FundingImg = styled.img`
justify-content: start;
align-items: start;
width: ${(props) => props.w};
height: ${(props) => props.h};
background-color: ${theme.gray5};
padding-left: ${(props) => props.pl};
border: 0.3px solid ${theme.gray6};
border-radius: 10px;
height: 133px;
&:hover {
cursor: pointer;
}
`;
export const SponsorComment = styled.div`
margin-top: ${(props) => props.mt};
margin-right: 10px;
border: none;
border-radius: 10px;
height: 100px;
`;
export const ImgPlus = styled.h1`
transform: translate(42%, -405%); // 핵심코드
`;
export const ImgText = styled.h1`
/* position: absolute; // 핵심코드
top: 47%; // 핵심코드
right: 25%; //핵심코드 */
transform: translate(22%, -215%); // 핵심코드
color: ${theme.gray3};
font-size: ${theme.detail};
&:hover {
cursor: pointer;
}
`;
export const Textarea = styled.textarea`
width: 98%;
height: 128px;
outline: none;
border: none;
resize: none;
border-radius: 10px;
margin-bottom: 10px;
padding-left: 10px;
font-size: ${theme.body1};
color: ${theme.black};
justify-content: start;
align-items: start;
`;
export const RadioInput = styled.input`
margin-bottom: ${(props) => props.mb};
accent-color: black;
`;
export const FundingNewline = styled.div`
width: 100%;
height: 12px;
`;
export const ColumnDiv = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
`;
export const InputLabel = styled.label`
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
border-radius: 10px;
border: 0.3px solid ${theme.gray5};
margin-bottom: 10px;
&:hover {
border: 0.5px solid ${theme.gray3};
}
`;
export const TitleLabel = styled.label`
width: 230px;
max-width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
border-radius: 10px;
border: 0.3px solid ${theme.gray5};
margin-bottom: 10px;
&:hover {
border: 0.5px solid ${theme.gray3};
}
`
export const InputSpan = styled.span`
padding-top: 10px;
padding-bottom: 5px;
padding-left: 10px;
font-size: ${theme.detail2};
color: ${theme.gray2};
`;
export const InputInput = styled.input`
border: none;
width: 95%;
padding-left: 10px;
padding-bottom: 10px;
font-weight: 500;
font-size: ${theme.body1};
color: ${theme.black};
border-radius: 10px;
justify-content: start;
align-items: start;
font-family: 'Pretendard', sans-serif;
`;
import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useParams } from 'react-router-dom';
import { infoToast } from '../../../components/toast';
import { IoIosArrowBack } from 'react-icons/io';
import theme from '../../../styles/theme';
import { patchFundingModify, deleteFundingModify, getFundingDetail, endFundingModify } from '../../../apis/funding';
import {
MainContainer,
LeftContainer,
LeftImgContainer,
LeftLogoTextIcon,
BubbleImg,
LeftRowdiv,
LeftImg,
Leftcolumndiv,
IpadLoveImg,
P,
Button,
RightContainer,
NavbarDiv,
ProducImgtDiv,
NonInputTag,
FundingImg,
Body,
FundingDiv,
SponserDiv,
RadioInput,
BetweenDiv,
ColumnStartDiv,
TogetherDiv,
SponsorComment,
Textarea,
ColumnDiv,
InputLabel,
InputSpan,
InputInput,
} from './FundingModifyStyles';
const FundingModify = () => {
const navigate = useNavigate();
const { id } = useParams();
const [fundingData, setFundingData] = useState([
{
itemName: '',
showName: '',
title: '',
content: '',
targetAmount: 0,
publicFlag: '',
endDate: '',
itemImage: '',
},
]);
// 수정페이지로 상세페이지 데이터 불러오기
useEffect(() => {
const getData = async () => {
try {
if (!id) {
return;
}
const data = await getFundingDetail(id);
console.log('상세페이지 데이터 불러오기: ', data)
setFundingData(data);
} catch (error) {
console.error('펀딩상세 가져오기 오류:', error);
}
};
getData();
}, [id]);
// 펀딩 수정 API
const handlefundingModifyClick = async () => {
try {
if (
fundingData.publicFlag === '' ||
fundingData.showName === '' ||
fundingData.title === '' ||
fundingData.content === ''
) {
infoToast('내용을 입력해주세요');
return;
}
const data = await patchFundingModify(id, fundingData);
setFundingData(
fundingData.map((data) => {
if (data.id === id) {
return { ...data, fundingData };
} else {
return data;
}
})
);
navigate(`/fundingdetail/${data.id}`);
} catch (error) {
console.error('펀딩 수정 오류:', error);
}
};
// 펀딩 삭제 API
const handledeleteFundingClick = async () => {
try {
const confirmDelete = window.confirm('정말 삭제하시겠습니까?');
if (!confirmDelete) return;
await deleteFundingModify(id, fundingData);
console.log('펀딩 삭제 성공:', id);
navigate('/');
} catch (error) {
console.error('펀딩 삭제 실패:', error);
}
};
// 펀딩 종료 API
const handlecompleteFundingClick = async () => {
try {
if (!id) {
// 유효한 id가 없으면 데이터를 요청하지 않음
return;
}
const data = await endFundingModify(id); // 펀딩 상세 정보 가져오기
setFundingData(data); // 가져온 데이터를 상태 변수에 설정
console.log('펀딩 종료 성공', data);
navigate('/');
} catch (error) {
console.error('펀딩 종료 오류:', error);
}
};
return (
<MainContainer>
<LeftContainer>
<LeftContainer pt="70px">
<LeftImgContainer>
<div>
<LeftLogoTextIcon src="/imgs/Common/giftipie.png" />
</div>
<div>
<P pt="60px" pl="355px" fs="23px" fw="800" color={theme.white}>
생일선물
<br />뭐 받고싶어?
</P>
<BubbleImg src="/imgs/Home/speech-bubble.png" />
</div>
</LeftImgContainer>
<LeftRowdiv ml="30px">
<LeftRowdiv color={theme.gray1} mr="10px" bc={theme.primary} br="25px" p="8px">
<LeftImg src="/imgs/Home/giftbox-red.png" w="30px" h="25px" mr="10px" pl="10px" />
<P fs="20px" fw="900" pr="10px">
정말 원하는 선물
</P>
</LeftRowdiv>
<div>
<P mt="6px" pt="2px" fs="20px" fw="700" color={theme.white}>
을 주고 받아요!
</P>
</div>
</LeftRowdiv>
<LeftRowdiv>
<Leftcolumndiv ml="30px">
<P fs="16px" fw="500" pt="30px" pb="5px" color={theme.white}>
지금은 유저테스트 진행 중 입니다
</P>
<P pb="100px" fs="16px" fw="500" color={theme.white}>
6명의 개발자와 1명의 디자이너가 함께 개발하고 있습니다
</P>
</Leftcolumndiv>
<LeftImg src="/imgs/Home/pie-hi.png" w="340px" pl="100px" />
</LeftRowdiv>
</LeftContainer>
<LeftRowdiv ml="30px"></LeftRowdiv>
<IpadLoveImg src="/imgs/Home/pie-ipad.png" w="330px" />
</LeftContainer>
<RightContainer>
<NavbarDiv>
<IoIosArrowBack onClick={() => navigate(`/fundingdetail/${id}`)} color={theme.white} size="20px" />
<P pl="120px" fs="13px" fw="900" color={theme.white}>
펀딩 수정하기
</P>
</NavbarDiv>
<Body>
<FundingDiv>
<TogetherDiv bc={theme.white}>
<P pt="5px" pb="5px" fs={theme.title} color={theme.black}>
펀딩 제품
</P>
<P pb="20px" fs={theme.detail} color={theme.gray2}>
상품명과 이미지, 가격은 변경할 수 없어요.
</P>
<ProducImgtDiv>
<SponsorComment>
<FundingImg src={fundingData.itemImage} alt="logo" h="124px" w="110px" />
</SponsorComment>
<ColumnStartDiv>
<NonInputTag mw="230px">
<P pl="10px" pt="5px" fs={theme.detail2} color={theme.gray3}>
상품명
</P>
<P pl="10px" pb="5px" fw="500" fs={theme.body1} color={theme.black}>
{fundingData.itemName}
</P>
</NonInputTag>
<NonInputTag mw="230px">
<P pl="10px" pt="5px" fs={theme.detail2} color={theme.gray3}>
목표 금액
</P>
<P pl="10px" pb="5px" fw="500" fs={theme.body1} color={theme.black}>
{fundingData.targetAmount}원
</P>
</NonInputTag>
</ColumnStartDiv>
</ProducImgtDiv>
</TogetherDiv>
<TogetherDiv bc={theme.white}>
<SponserDiv>
<div>
<P pt="10px" pb="10px" fs={theme.title} color={theme.black}>
펀딩 내용
</P>
<P pb="20px" fs={theme.detail} color={theme.gray2}>
공개 방식
</P>
<SponserDiv>
<RadioInput
value="true"
checked={fundingData.publicFlag === 'true'}
onChange={(e) => {
setFundingData({
...fundingData,
publicFlag: e.target.value,
});
}}
type="radio"
mb="21px"
/>
<P pb="20px" pl="20px" fs={theme.body2} color={theme.black}>
공개
</P>
<P pb="20px" pl="42px" fs={theme.detail2} color={theme.gray2}>
누구나 볼 수 있어요
</P>
</SponserDiv>
<SponserDiv>
<RadioInput
value="false"
checked={fundingData.publicFlag === 'false'}
onChange={(e) => {
setFundingData({
...fundingData,
publicFlag: e.target.value,
});
}}
type="radio"
mb="21px"
/>
<P pb="20px" pl="20px" fs={theme.body2} color={theme.black}>
비공개
</P>
<P pb="20px" pl="30px" fs={theme.detail2} color={theme.gray2}>
링크를 통해서만 방문할 수 있어요
</P>
</SponserDiv>
</div>
</SponserDiv>
<InputLabel>
<InputSpan>보여줄 이름</InputSpan>
<InputInput
type="text"
placeholder="이름을 입력해주세요"
value={fundingData.showName}
onChange={(e) => {
setFundingData({ ...fundingData, showName: e.target.value });
}}
></InputInput>
</InputLabel>
<InputLabel>
<InputSpan>제목</InputSpan>
<InputInput
type="text"
placeholder="제목을 입력해주세요"
value={fundingData.title}
onChange={(e) => {
setFundingData({ ...fundingData, title: e.target.value });
}}
></InputInput>
</InputLabel>
<InputLabel>
<InputSpan>본문</InputSpan>
<Textarea
type="textarea"
placeholder="본문을 입력해주세요"
value={fundingData.content}
onChange={(e) => {
setFundingData({ ...fundingData, content: e.target.value });
}}
/>
</InputLabel>
</TogetherDiv>
<TogetherDiv bc={theme.white} br="30px 30px 0px 0px">
{/* <P pt="10px" pb="5px" fs={theme.detail} color={theme.gray2}>
마감일 설정
</P>
<InputTag type="date" disabled={false} value={fundingData.endDate} h="40px" w="97%" pl="10px" pt="10px" /> */}
<NonInputTag>
<P pl="10px" pt="5px" w="240px" fs={theme.detail2} color={theme.gray3}>
마감일 설정
</P>
<P pl="10px" pb="5px" fw="500" fs={theme.title2} color={theme.gray4}>
{fundingData.endDate}
</P>
</NonInputTag>
<Button
onClick={handlefundingModifyClick}
w="100%"
h="48px"
br="16px"
fs={theme.body1}
color={theme.white}
bc={theme.primary}
>
펀딩 저장하기
</Button>
<BetweenDiv>
<Button
onClick={handledeleteFundingClick}
w="100%"
h="48px"
br="16px 4px 4px 16px"
mt="10px"
fs={theme.body1}
fw="700"
color={theme.primaryFont}
bc={theme.primaryBtn}
// bc="#FFE6E6"
>
삭제하기
</Button>
<Button
onClick={handlecompleteFundingClick}
w="100%"
h="48px"
br="4px 16px 16px 4px"
mt="10px"
fw="900"
fs={theme.body1}
color={theme.gray2}
bc={theme.gray6}
>
종료하기
</Button>
</BetweenDiv>
<ColumnDiv>
<P fs={theme.body2} color={theme.gray4}>
펀딩 금액은 계좌로 전달돼요
</P>
<P pb="40px" fs={theme.body2} color={theme.gray4}>
펀딩에 성공하면 카톡으로 알림이 가요
</P>
</ColumnDiv>
</TogetherDiv>
</FundingDiv>
</Body>
</RightContainer>
</MainContainer>
);
};
export default FundingModify;
import styled from "styled-components";
import theme from "../../../styles/theme";
// 전체 컨테이너
export const MainContainer = styled.div`
display: flex;
justify-content: center;
max-width: 1200px;
min-height: 100vh;
margin: 0 auto;
flex-wrap: wrap;
`;
/* 왼쪽 컨테이너 */
export const LeftContainer = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
height: 100vh;
padding-top: ${(props) => props.pt};
@media (max-width: 1200px) {
display: none;
}
`;
export const LeftImgContainer = styled.div`
position: relative; /*상대 위치 지정*/
//width: 300px; /* 이미지 너비 */
height: 200px; /* 이미지 높이 */
padding-left: 100px; /* 이미지 왼쪽 간격 조정 */
justify-content: space-between;
`;
export const LeftLogoTextIcon = styled.img`
height: 40px;
position: absolute; /* 절대 위치 지정 */
bottom: 20px; /* 아래쪽 위치 조정 */
left: 30px; /* 왼쪽 위치 조정 */
`;
export const BubbleImg = styled.img`
position: absolute; /* 절대 위치 지정 */
top: 0; /* 위쪽 정렬 */
left: 368px; /* 왼쪽 정렬 */
width: 290px; /* 부모 요소에 대한 상대적인 너비 */
height: 230px; /* 부모 요소에 대한 상대적인 높이 */
`;
export const LeftRowdiv = styled.div`
display: flex;
flex-direction: row;
/* align-items: center; */
padding-top: ${(props) => props.pt};
margin-top: ${(props) => props.mt};
padding-bottom: ${(props) => props.pb};
padding-left: ${(props) => props.pl};
padding-right: ${(props) => props.pr};
margin-right: ${(props) => props.mr};
margin-left: ${(props) => props.ml};
font-size: ${(props) => props.fs};
font-weight: ${(props) => props.fw};
color: ${(props) => props.color};
background-color: ${(props) => props.bc};
border-radius: ${(props) => props.br};
padding: ${(props) => props.p};
border: none;
`;
export const LeftImg = styled.img`
margin-top: ${(props) => props.mt};
margin-right: ${(props) => props.mr};
padding-right: ${(props) => props.pr};
padding-left: ${(props) => props.pl};
width: ${(props) => props.w};
height: ${(props) => props.h};
`;
export const Leftcolumndiv = styled.div`
flex-direction: column;
margin-left: ${(props) => props.ml};
`;
export const IpadLoveImg = styled.img`
position: absolute;
bottom: 0;
left: 0;
width: ${(props) => props.w};
height: ${(props) => props.h};
`;
export const Logo = styled.h1`
font-size: 24px;
font-weight: 800;
`;
export const P = styled.p`
padding-top: ${(props) => props.pt};
padding-bottom: ${(props) => props.pb};
padding-left: ${(props) => props.pl};
padding-right: ${(props) => props.pr};
font-size: ${(props) => props.fs};
font-weight: ${(props) => props.fw};
color: ${(props) => props.color};
margin-top: ${(props) => props.mt};
margin-right: ${(props) => props.mr};
background-color: ${(props) => props.bc};
border-radius: ${(props) => props.br};
padding: ${(props) => props.p};
width: ${(props) => props.w};
border: none;
align-items: center;
`;
export const Button = styled.button`
justify-content: center;
align-items: center;
width: ${(props) => props.w};
height: ${(props) => props.h};
padding: 10px;
background-color: ${(props) => props.bc};
border-radius: ${(props) => props.br};
color: ${(props) => props.color};
font-size: ${(props) => props.fs};
font-weight: 600;
margin-top: ${(props) => props.mt};
margin-bottom: ${(props) => props.mb};
padding-left: ${(props) => props.pl};
padding-right: ${(props) => props.pr};
padding-right: ${(props) => props.pr};
&:hover {
color: white;
background-color: ${theme.primaryFont};
cursor: pointer;
}
`;
/* 오른쪽 컨테이너 */
export const RightContainer = styled.div`
position: relative;
width: -webkit-fill-available;
max-width: 390px;
height: 100vh;
overflow-y: scroll;
&::-webkit-scrollbar {
display: none;
}
@media screen and (max-width: 390px) {
max-width: 100%;
}
`;
// 네브바 영역
export const NavbarDiv = styled.div`
display: flex;
flex-direction: row;
align-items: center;
height: 70px;
padding-left: 20px;
`;
// 바디 영역
export const Body = styled.div`
font-size: 24px;
font-weight: 800;
height: auto;
`;
export const TogetherDiv = styled.div`
background-color: ${(props) => props.bc};
border-radius: 30px;
border-radius: ${(props) => props.br};
width: -webkit-fill-available;
max-width: 390px;
margin: 0 auto;
margin-bottom: 15px;
padding: 20px;
@media screen and (max-width: 390px) {
width: 100%;
}
`;
export const FundingDiv = styled.div`
justify-content: center;
width: 100%;
max-width: 390px;
height: auto;
`;
export const ProducImgtDiv = styled.div`
display: flex;
flex-direction: row;
justify-content: start;
align-items: start;
`;
export const SponserDiv = styled.div`
display: flex;
flex-direction: row;
align-items: center;
`;
export const FundingImg = styled.img`
width: ${(props) => props.w};
height: ${(props) => props.h};
padding-left: ${(props) => props.pl};
border: 1px solid ${theme.gray5};
border-radius: 10px;
object-fit: cover;
`;
export const SponsorComment = styled.div`
margin-top: ${(props) => props.mt};
margin-right: 10px;
border-radius: 10px;
`;
export const NonInputTag = styled.div`
width: ${(props) => props.mw};
max-width: 100%;
height: ${(props) => props.h};
background-color: ${theme.gray6};
margin-bottom: ${(props) => props.mb};
padding-left: ${(props) => props.pl};
padding: 4px;
margin-bottom: 10px;
border-radius: 7px;
justify-content: start;
align-items: start;
`;
export const Textarea = styled.textarea`
width: 98%;
height: 128px;
outline: none;
border-radius: 10px;
border: none;
resize: none;
overflow:hidden;
margin-bottom: 10px;
padding-left: 10px;
font-size: ${theme.body1};
color: ${theme.black};
justify-content: start;
align-items: start;
`;
export const RadioInput = styled.input`
margin-bottom: ${(props) => props.mb};
accent-color: ${theme.black};
`;
export const FundingNewline = styled.div`
width: 100%;
height: 12px;
`;
export const ColumnDiv = styled.div`
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
margin-top: 15px;
`;
export const ColumnStartDiv = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
`;
export const BetweenDiv = styled.div`
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: start;
gap: 10px;
`;
export const InputLabel = styled.label`
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
border-radius: 10px;
border: 0.3px solid ${theme.gray5};
margin-bottom: 10px;
&:hover {
border: 0.5px solid ${theme.gray3};
}
`
export const InputSpan = styled.span`
padding-top: 10px;
padding-bottom: 5px;
padding-left: 10px;
font-size: ${theme.detail2};
color: ${theme.gray2};
`;
export const InputInput = styled.input`
border: none;
width: 95%;
padding-left: 10px;
padding-bottom: 10px;
font-size: ${theme.body1};
color: ${theme.black};
border-radius: 10px;
justify-content: start;
align-items: start;
`;
import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useParams } from 'react-router-dom';
import { getFundingDetail } from '../../../apis/funding';
import Navbar from '../../../components/Navbar';
import { useDispatch, useSelector } from 'react-redux';
import { userLogout } from '../../../redux/authSlice';
import DetailModal from './Modal/DetailModal';
import FundingPay from '../FundingPay/FundingPay';
import { FaAngleRight } from 'react-icons/fa6';
import theme from '../../../styles/theme';
import {
MainContainer,
LeftContainer,
LeftImgContainer,
LeftLogoTextIcon,
BubbleImg,
P,
LeftRowdiv,
LeftImg,
Leftcolumndiv,
IpadLoveImg,
Button,
RightContainer,
NavbarDiv,
NavigateBtn,
NavigateDiv,
Body,
BannerImgDiv,
BannerImg,
IllustImg,
TitleDiv,
FundingDiv,
SponsorimgDiv,
SponserComment,
FundingImg,
ProgressBar,
Progress,
BetweenDiv,
TogetherDiv,
FloatingBtn,
SponserDiv,
FundingComment,
NamingDiv,
MakerDiv,
CommentDiv,
SponsorImg,
SponsorDiv,
DdayDiv,
MassageBtn,
GiftTitle,
StartRowDiv,
} from './FundingDetailStyles';
const FundingDetail = () => {
const navigate = useNavigate();
const { id } = useParams();
const isLoggedIn = useSelector((state) => state.auth.isLoggedIn);
const dispatch = useDispatch();
const [detailData, setDetailData] = useState({
itemImage: '',
itemName: '',
targetAmount: 0,
publicFlag: false, // 공개, 비공개 여부
showName: '',
title: '',
content: '',
endDate: '',
// FundignDetail에 출력되는 Data 초기값
itemLink: '',
currentAmount: 0,
dday: '',
status: false,
achievementRate: 0,
ownerFlag: false, // true면 수정 페이지 버튼 보여지게
modifiedAt: '', // 수정 날짜
sponsorNickname: '', // 후원자 이름 추가
sponsorComment: '', // 후원자 댓글 추가
donationRanking: '', // 후원자 랭킹 추가
});
const [sponsorDonation, setSponsorDonation] = useState({
donation5000: 5000,
donation10000: 10000,
donation20000: 20000,
donation30000: 30000,
donation50000: 50000,
donationAll: '남은금액',
donationInput: '직접입력',
});
const [isFundingModalOpen, setIsFundingModalOpen] = useState(false);
// 버튼 클릭했을 때 모달을 열고 금액을 설정하는 함수
const handleFundingModalClick = (e) => {
setIsFundingModalOpen(true);
};
// 모달을 닫는 함수
const closeModal = () => {
setIsFundingModalOpen(false);
};
// 모달 내에서 입력값을 설정하는 함수
const handleInputSelection = (donationInput) => {
setSponsorDonation({ ...sponsorDonation, donationInput });
setIsFundingModalOpen(false);
navigate(`/fundingpay/${id}?donation=${donationInput}&showName=${detailData.showName}`);
};
const handledonation5000Change = () => {
navigate(`/fundingpay/${id}?donation=${sponsorDonation.donation5000}&showName=${detailData.showName}`);
};
const handledonation10000Change = () => {
navigate(`/fundingpay/${id}?donation=${sponsorDonation.donation10000}&showName=${detailData.showName}`);
};
const handledonation20000Change = () => {
navigate(`/fundingpay/${id}?donation=${sponsorDonation.donation20000}&showName=${detailData.showName}`);
};
const handledonation30000Change = () => {
navigate(`/fundingpay/${id}?donation=${sponsorDonation.donation30000}&showName=${detailData.showName}`);
};
// const handledonationAllChange = () => {
// setSponsorDonation({ ...sponsorDonation, donationAll: '남은금액' });
// navigate(`/fundingpay/${id}?donation=${sponsorDonation.donationAll}&showName=${detailData.showName}`);
// };
// const handledonationInputChange = () => {
// setSponsorDonation({ ...sponsorDonation, donationInput: '직접입력' });
// navigate(`/fundingpay/${id}?donation=${sponsorDonation.donationInput}&showName=${detailData.showName}`);
// };
useEffect(() => {
const getData = async () => {
try {
if (!id) {
return;
}
const data = await getFundingDetail(id);
setDetailData(data);
} catch (error) {
console.error('펀딩 상세페이지 오류:', error);
}
};
getData();
}, [id]);
const handleLogoutClick = () => {
dispatch(userLogout());
navigate('/');
};
return (
<MainContainer>
<LeftContainer>
<LeftContainer pt="70px">
<LeftImgContainer>
<div>
<LeftLogoTextIcon src="/imgs/Common/giftipie.png" />
</div>
<div>
<P pt="60px" pl="355px" fs="23px" fw="800" color={theme.white}>
생일선물
<br />뭐 받고싶어?
</P>
<BubbleImg src="/imgs/Home/speech-bubble.png" />
</div>
</LeftImgContainer>
<LeftRowdiv ml="30px">
<LeftRowdiv color={theme.gray1} mr="10px" bc={theme.primary} br="25px" p="8px">
<LeftImg src="/imgs/Home/giftbox-red.png" w="30px" h="25px" mr="10px" pl="10px" />
<P fs="20px" fw="900" pr="10px">
정말 원하는 선물
</P>
</LeftRowdiv>
<div>
<P mt="6px" pt="2px" fs="20px" fw="700" color={theme.white}>
을 주고 받아요!
</P>
</div>
</LeftRowdiv>
<LeftRowdiv>
<Leftcolumndiv ml="30px">
<P fs="16px" fw="500" pt="30px" pb="5px" color={theme.white}>
지금은 유저테스트 진행 중 입니다
</P>
<P pb="100px" fs="16px" fw="500" color={theme.white}>
6명의 개발자와 1명의 디자이너가 함께 개발하고 있습니다
</P>
</Leftcolumndiv>
<LeftImg src="/imgs/Home/pie-hi.png" w="340px" pl="100px" />
</LeftRowdiv>
</LeftContainer>
<LeftRowdiv ml="30px"></LeftRowdiv>
<IpadLoveImg src="/imgs/Home/pie-ipad.png" w="330px" />
</LeftContainer>
<RightContainer>
<NavbarDiv>
<Navbar isLoggedIn={isLoggedIn} handleLogoutClick={handleLogoutClick} />
</NavbarDiv>
<Body>
<TitleDiv>
<P pt="20px" fs="13px" fw="800" color={theme.gray3}>
{detailData.status === 'FINISHED' ? '종료' : '진행중'}
</P>
<P pt="10px" fs="20px" fw="900" color={theme.white}>
{detailData.title}
</P>
<P pt="10px" pb="10px" fs="13px" fw="800" color={theme.white}>
{detailData.showName}
</P>
</TitleDiv>
<BannerImgDiv>
<IllustImg src="/imgs/Funding/FundingDetail/pangpang-left.png" alt="img" />
<BannerImg src={detailData.itemImage} alt="image" />
<IllustImg src="/imgs/Funding/FundingDetail/pangpang-right.png" alt="img" />
</BannerImgDiv>
<NavigateDiv>
<NavigateBtn>링크복사</NavigateBtn>
<NavigateBtn onClick={() => navigate(`/fundingModify/${id}`)}>수정</NavigateBtn>
</NavigateDiv>
<TogetherDiv bc={theme.white}>
<BetweenDiv pt="27px">
<P fs="20px" color={theme.primary}>
{detailData.achievementRate}%
</P>
</BetweenDiv>
<BetweenDiv pt="0px">
{/* <P fs={theme.body2} color={theme.gray2}>
{detailData.itemName}
</P> */}
<P fs={theme.body2} color={theme.gray2}>
{detailData.targetAmount - detailData.currentAmount}원 남았어요
</P>
<DdayDiv>{detailData.dday}</DdayDiv>
</BetweenDiv>
<ProgressBar>
<Progress width={(detailData.achievementRate / 100) * 100} />
</ProgressBar>
</TogetherDiv>
<FundingDiv>
<SponserDiv>
<FundingComment mt="10px">
<NamingDiv>
<P fs={theme.detail2} color={theme.gray2}>
후원자 보여줄 이름
{/* {sponsorData.showName} */}
</P>
<MakerDiv>만든이</MakerDiv>
</NamingDiv>
<CommentDiv mt="5px" fs="13px" bc={theme.secondary}>
후원자 남길 메시지 후원자 남길 메시지 후원자 남길 메시지 후원자 남길 메시지 후원자
남길 메시지 후원자 남길 메시지
</CommentDiv>
</FundingComment>
<SponsorImg src="/imgs/Common/profile-1.svg" alt="image" />
</SponserDiv>
<SponserDiv>
<SponsorImg src="/imgs/Common/profile-2.svg" alt="image" />
<SponserComment mt="15px">
<NamingDiv>
<P fs={theme.detail2} color={theme.gray2}>
{/* {sponsorData.sponsorNickname} */}
후원자 보여줄 이름
</P>
<SponsorDiv>1등</SponsorDiv>
</NamingDiv>
<CommentDiv mt="5px" fs="13px" bc={theme.gray6}>
{/* {sponsorData.content} */}
후원자 남길 메시지
</CommentDiv>
</SponserComment>
</SponserDiv>
<SponserDiv>
<SponsorImg src="/imgs/Common/profile-3.svg" alt="image" />
<SponserComment mt="15px">
<NamingDiv>
<P fs={theme.detail2} color={theme.gray2}>
{/* {sponsorData.sponsorNickname} */}
후원자 보여줄 이름
</P>
<SponsorDiv>2등</SponsorDiv>
</NamingDiv>
<CommentDiv mt="5px" fs="13px" bc={theme.gray6}>
{/* {sponsorData.content} */}
후원자 남길 메시지
</CommentDiv>
</SponserComment>
</SponserDiv>
<SponserDiv>
<SponsorImg src="/imgs/Common/profile-4.svg" alt="image" />
<SponserComment mt="15px">
<NamingDiv>
<P fs={theme.detail2} color={theme.gray2}>
{/* {sponsorData.sponsorNickname} */}
후원자 보여줄 이름
</P>
<SponsorDiv>3등</SponsorDiv>
</NamingDiv>
<CommentDiv mt="5px" fs="13px" bc={theme.gray6}>
후원자 남길 메시지 후원자 남길 메시지 후원자 남길 메시지 후원자 남길 메시지 후원자
남길 메시지
</CommentDiv>
</SponserComment>
</SponserDiv>
<MassageBtn onClick={() => navigate('/fundingsponsordetail')}>
<P pt="2px" fs={theme.detail} color={theme.gray2}>
펀딩 더보기
</P>
<P pt="4px" fs={theme.detail}>
<FaAngleRight />
</P>
</MassageBtn>
</FundingDiv>
<FundingDiv p="20px" pb="40px">
<P pt="20px" pl="10px" fs={theme.headline2} color={theme.black}>
펀딩 참여하여
</P>
<GiftTitle>
<P pt="0px" pl="10px" fs={theme.headline2} color={theme.primary}>
특별한 선물
</P>
<P pt="0px" pl="0px" fs={theme.headline2} color={theme.black}>
을 선물하세요!
</P>
</GiftTitle>
<GiftTitle>
<P pt="0px" pl="10px" fs={theme.detail} color={theme.gray4}>
메시지와 선물이
</P>
<P pt="0px" pl="5px" fs={theme.detail} color={theme.primary}>
{detailData.showName}
</P>
<P pt="0px" pl="0px" fs={theme.detail} color={theme.gray4}>
님에게 전달돼요
</P>
</GiftTitle>
<SponsorimgDiv pt="40px">
<StartRowDiv>
<FundingImg src="/imgs/Funding/FundingDetail/coffee.svg" alt="image" ml="10px" />
<div>
<P pl="20px" fs={theme.body1} color={theme.black}>
{sponsorDonation.donation5000}원
</P>
<P pl="20px" fs={theme.detail} color={theme.gray4}>
커피 한 잔 만큼
</P>
</div>
</StartRowDiv>
<Button
mr="10px"
onClick={handledonation5000Change}
w="58px"
h="34px"
bc={theme.primaryBtn}
fw="700"
fs="11px"
color={theme.primaryFont}
>
선물하기
</Button>
</SponsorimgDiv>
<SponsorimgDiv pt="30px">
<StartRowDiv>
<FundingImg src="/imgs/Funding/FundingDetail/icecream.svg" alt="image" ml="10px" />
<div>
<P pl="20px" fs={theme.body1} color={theme.black}>
{sponsorDonation.donation10000}원
</P>
<P pl="20px" fs={theme.detail} color={theme.gray4}>
파인트 아이스크림 만큼
</P>
</div>
</StartRowDiv>
<Button
mr="10px"
onClick={handledonation10000Change}
w="58px"
h="34px"
bc={theme.primaryBtn}
fw="700"
fs="11px"
color={theme.primaryFont}
>
선물하기
</Button>
</SponsorimgDiv>
<SponsorimgDiv pt="30px">
<StartRowDiv>
<FundingImg src="/imgs/Funding/FundingDetail/chicken.svg" alt="image" ml="10px" />
<div>
<P pl="20px" fs={theme.body1} color={theme.black}>
{sponsorDonation.donation20000}원
</P>
<P pl="20px" fs={theme.detail} color={theme.gray4}>
치킨 한 마리 만큼
</P>
</div>
</StartRowDiv>
<Button
mr="10px"
onClick={handledonation20000Change}
w="58px"
h="34px"
bc={theme.primaryBtn}
fw="700"
fs="11px"
color={theme.primaryFont}
>
선물하기
</Button>
</SponsorimgDiv>
<SponsorimgDiv pt="30px">
<StartRowDiv>
<FundingImg src="/imgs/Funding/FundingDetail/cake.svg" alt="image" ml="10px" />
<div>
<P pl="20px" fs={theme.body1} color={theme.black}>
{sponsorDonation.donation30000}원
</P>
<P pl="20px" fs={theme.detail} color={theme.gray4}>
2호 케이크 만큼
</P>
</div>
</StartRowDiv>
<Button
mr="10px"
onClick={handledonation30000Change}
w="58px"
h="34px"
bc={theme.primaryBtn}
fw="700"
fs="11px"
color={theme.primaryFont}
>
선물하기
</Button>
</SponsorimgDiv>
<SponsorimgDiv pt="30px">
<StartRowDiv>
<FundingImg src="/imgs/Funding/FundingDetail/shimsaimdang.svg" alt="image" ml="10px" />
<div>
<P pl="20px" fs={theme.body1} color={theme.black}>
{sponsorDonation.donation50000}원
</P>
<P pl="20px" fs={theme.detail} color={theme.gray4}>
심사임당 만큼
</P>
</div>
</StartRowDiv>
<Button
mr="10px"
onClick={handledonation30000Change}
w="58px"
h="34px"
bc={theme.primaryBtn}
fw="700"
fs="11px"
color={theme.primaryFont}
>
선물하기
</Button>
</SponsorimgDiv>
</FundingDiv>
</Body>
<Button
onClick={handleFundingModalClick}
w="100%"
h="60px"
color={theme.black}
fs="20px"
bc={theme.primary}
as={FloatingBtn}
>
원하는 금액만큼 펀딩 참여하기
</Button>
{isFundingModalOpen && (
<DetailModal
closeModal={closeModal}
handleInputSelection={handleInputSelection}
/>
)}
</RightContainer>
</MainContainer>
);
};
export default FundingDetail;
import styled from "styled-components";
import theme from "../../../styles/theme";
/* 전체 컨테이너 */
export const MainContainer = styled.div`
display: flex;
justify-content: center;
max-width: 1200px;
min-height: 100vh;
margin: 0 auto;
flex-wrap: wrap;
`;
/* 왼쪽 컨테이너 */
export const LeftContainer = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
height: 100vh;
padding-top: ${(props) => props.pt};
@media (max-width: 1200px) {
display: none;
}
`;
export const LeftImgContainer = styled.div`
position: relative; /*상대 위치 지정*/
//width: 300px; /* 이미지 너비 */
height: 200px; /* 이미지 높이 */
padding-left: 100px; /* 이미지 왼쪽 간격 조정 */
justify-content: space-between;
`;
export const LeftLogoTextIcon = styled.img`
height: 40px;
position: absolute; /* 절대 위치 지정 */
bottom: 20px; /* 아래쪽 위치 조정 */
left: 30px; /* 왼쪽 위치 조정 */
`;
export const BubbleImg = styled.img`
position: absolute; /* 절대 위치 지정 */
top: 0; /* 위쪽 정렬 */
left: 368px; /* 왼쪽 정렬 */
width: 290px; /* 부모 요소에 대한 상대적인 너비 */
height: 230px; /* 부모 요소에 대한 상대적인 높이 */
`;
export const LeftRowdiv = styled.div`
display: flex;
flex-direction: row;
/* align-items: center; */
padding-top: ${(props) => props.pt};
margin-top: ${(props) => props.mt};
padding-bottom: ${(props) => props.pb};
padding-left: ${(props) => props.pl};
padding-right: ${(props) => props.pr};
margin-right: ${(props) => props.mr};
margin-left: ${(props) => props.ml};
font-size: ${(props) => props.fs};
font-weight: ${(props) => props.fw};
color: ${(props) => props.color};
background-color: ${(props) => props.bc};
border-radius: ${(props) => props.br};
padding: ${(props) => props.p};
border: none;
`;
export const LeftImg = styled.img`
margin-top: ${(props) => props.mt};
margin-right: ${(props) => props.mr};
padding-right: ${(props) => props.pr};
padding-left: ${(props) => props.pl};
width: ${(props) => props.w};
height: ${(props) => props.h};
`;
export const Leftcolumndiv = styled.div`
flex-direction: column;
margin-left: ${(props) => props.ml};
`;
export const IpadLoveImg = styled.img`
position: absolute;
bottom: 0;
left: 0;
width: ${(props) => props.w};
height: ${(props) => props.h};
`;
/* 로고 */
export const Logo = styled.h1`
font-size: 30px;
/* font-weight: 700; */
color: ${theme.white};
`;
/* 다용도 P 태그 */
export const P = styled.p`
padding-top: ${(props) => props.pt};
padding-bottom: ${(props) => props.pb};
padding-left: ${(props) => props.pl};
padding-right: ${(props) => props.pr};
font-size: ${(props) => props.fs};
font-weight: ${(props) => props.fw};
color: ${(props) => props.color};
margin-top: ${(props) => props.mt};
margin-right: ${(props) => props.mr};
background-color: ${(props) => props.bc};
border-radius: ${(props) => props.br};
padding: ${(props) => props.p};
align-items: center;
border: none;
`;
/* 다용도 버튼 */
export const Button = styled.button`
justify-content: center;
align-items: center;
width: ${(props) => props.w};
height: ${(props) => props.h};
background-color: ${(props) => props.bc};
border-radius: 7px;
color: ${(props) => props.color};
font-size: ${(props) => props.fs};
margin-top: ${(props) => props.mt};
margin-bottom: ${(props) => props.mb};
margin-left: ${(props) => props.ml};
margin-right: ${(props) => props.mr};
padding-left: ${(props) => props.pl};
padding-right: ${(props) => props.pr};
&:hover {
color: ${theme.white};
background-color: ${theme.primary};
cursor: pointer;
}
`;
/* 오른쪽 컨테이너 */
export const RightContainer = styled.div`
position: relative;
width: -webkit-fill-available; /* 사용 가능한 너비로 채움 */
max-width: 390px; /* 최대 너비를 390px로 제한 */
/* border: 1px solid lightgray; */
height: 100vh;
overflow-y: scroll;
&::-webkit-scrollbar {
display: none;
}
@media screen and (max-width: 390px) {
max-width: 100%; /* 최대 너비를 100%로 설정하여 가득 차게 함 */
}
`;
/* 네브바 영역 */
export const NavbarDiv = styled.div`
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 70px;
`;
// 바디 영역
export const Body = styled.div`
height: auto;
`;
export const BannerImgDiv = styled.div`
text-align: center;
margin-bottom: 10px;
`;
export const BannerImg = styled.img`
width: 100%;
max-width: 121.82px;
height: 100%;
max-height: 121.82px;
border-radius: 20px;
`;
export const IllustImg = styled.img`
width: 100%;
max-width: 56px;
height: 100%;
max-height: 76px;
margin: 10px;
`;
export const NavigateDiv = styled.div`
text-align: right;
margin-right: 22px;
`;
export const NavigateBtn = styled.button`
font-size: ${theme.detail};
color: ${theme.white};
margin-bottom: 7px;
`;
export const TitleDiv = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
`;
export const FundingDiv = styled.div`
background-color: ${theme.white};
border-radius: 20px;
border: 0.3px solid ${theme.gray4};
width: -webkit-fill-available; /* 사용 가능한 너비로 채움 */
max-width: 390px; /* 최대 너비를 390px로 제한 */
margin: 0 auto; /* 가운데 정렬을 위해 margin을 auto로 설정 */
margin-top: 15px;
padding: 20px;
padding-bottom: ${(props) => props.pb};
@media screen and (max-width: 390px) {
max-width: 100%; /* 최대 너비를 100%로 설정하여 가득 차게 함 */
}
`;
export const MassageBtn = styled.button`
display: flex;
width: -webkit-fill-available;
max-width: 390px;
justify-content: center;
align-items: center;
border-top: 1px solid ${theme.gray5};
padding-top: 15px;
margin-top: 20px;
`;
export const FundingNewline = styled.div`
width: 100%;
height: 12px;
`;
export const ProgressBar = styled.div`
width: 85%;
height: 15px;
background-color: ${theme.gray6};
border-radius: 12px;
font-size: 0.8rem;
margin: 10px 30px 10px 30px;
text-align: center;
overflow: hidden;
padding-left: ${(props) => props.pl};
padding-right: ${(props) => props.pr};
`;
export const Progress = styled.div`
width: ${(props) => props.width}%;
height: 15px;
padding: 0;
text-align: center;
background-color: ${theme.primary};
border-radius: 15px;
/* color: #111; */
padding-left: ${(props) => props.pl};
padding-right: ${(props) => props.pr};
`;
export const BetweenDiv = styled.div`
display: flex;
flex-direction: row;
justify-content: space-between;
width: -webkit-fill-available; /* 사용 가능한 너비로 채움 */
max-width: 390px; /* 최대 너비를 390px로 제한 */
margin: 0 auto; /* 가운데 정렬을 위해 margin을 auto로 설정 */
/* padding: 0px 33px 0px 33px; */
padding: 0px 33px 0px 33px;
padding-top: ${(props) => props.pt};
@media screen and (max-width: 390px) {
max-width: 100%; /* 최대 너비를 100%로 설정하여 가득 차게 함 */
}
`;
export const TogetherDiv = styled.div`
background-color: ${(props) => props.bc};
border-radius: 30px;
border: 0.3px solid ${theme.gray4};
box-shadow: 0px 5px 0px 0px ${theme.gray4};
height: 130px;
width: -webkit-fill-available; /* 사용 가능한 너비로 채움 */
max-width: 390px; /* 최대 너비를 390px로 제한 */
margin: 0 auto; /* 가운데 정렬을 위해 margin을 auto로 설정 */
margin-bottom: 15px;
@media screen and (max-width: 390px) {
max-width: 100%; /* 최대 너비를 100%로 설정하여 가득 차게 함 */
}
`;
export const SponserDiv = styled.div`
display: flex;
flex-direction: row;
align-items: center;
`;
// 네브바 영역
export const NamingDiv = styled.div`
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
`;
export const MakerDiv = styled.div`
border: 1.5px solid ${theme.primary};
border-radius: 5px;
color: ${theme.primary};
font-size: ${theme.detail2};
/* font-weight: 600; */
padding: 2px 5px 1.5px 5px;
margin-left: 7px;
`;
export const DdayDiv = styled.p`
border-radius: 5px;
color: ${theme.gray2};
font-size: ${theme.detail2};
background-color: ${theme.gray6};
/* font-weight: 600; */
padding: 5px 15px 5px 15px;
`;
export const FundingComment = styled.div`
margin-top: ${(props) => props.mt};
display: flex;
flex-direction: column;
justify-content: center;
align-items: end;
`;
export const CommentDiv = styled.div`
justify-content: center;
align-items: center;
width: 290px; /* 최대 너비를 390px로 제한 */
padding: 10px;
border-radius: 7px;
background-color: ${(props) => props.bc};
color: ${theme.black};
font-size: ${theme.detail};
margin-top: ${(props) => props.mt};
margin-bottom: ${(props) => props.mb};
padding-left: ${(props) => props.pl};
padding-right: ${(props) => props.pr};
`;
export const SponserComment = styled.div`
margin-top: ${(props) => props.mt};
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
width: 100%;
`;
export const GiftTitle = styled.div`
display: flex;
flex-direction: row;
justify-content: start;
align-items: start;
`;
export const SponsorImg = styled.img`
width: 60px;
height: 60px;
border-radius: 100px;
margin-top: 10px;
`;
export const SponsorDiv = styled.div`
background-color: ${theme.primary};
border-radius: 5px;
color: ${theme.white};
font-size: ${theme.detail2};
/* font-weight: 600; */
padding: 2px 5px 1.5px 5px;
margin-left: 7px;
`;
export const FundingImg = styled.img`
height: 48px;
width: 48px;
margin-left: ${(props) => props.ml};
margin-bottom: ${(props) => props.mb};
`;
export const SponsorimgDiv = styled.div`
padding-top: ${(props) => props.pt};
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
`;
export const StartRowDiv = styled.div`
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
`;
export const FloatingBtn = styled.button`
position: sticky;
bottom: 25px;
left: 50%;
transform: translateX(-5.5%);
margin-bottom: 10px;
width: 350px;
height: 48px;
border-radius: 15px;
background-color: ${theme.primary};
color: ${theme.white};
font-size: ${theme.body2};
z-index: 1000;
&:hover {
background-color: ${theme.primaryFont};
}
@media screen and (max-width: 390px) {
position: fixed;
bottom: 8px;
left: 50%;
transform: translateX(-50%);
margin-bottom: 10px;
width: 132px;
height: 44px;
border-radius: 24px;
background-color: ${theme.primary};
color: ${theme.white};
font-size: ${theme.body2};
z-index: 1000;
&:hover {
background-color: ${theme.primaryFont};
}
}
`;
import React, { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useParams } from 'react-router-dom';
import { IoIosArrowBack } from 'react-icons/io';
import theme from '../../../../styles/theme';
// import { getSponsorDetail } from "../../../../apis/funding";
import {
MainContainer,
LeftContainer,
Logo,
P,
Button,
RightContainer,
Navbar,
NavbarBtn,
NavbarBtnDiv,
Body,
FundingDiv,
SponserDiv,
SponserComment,
SponsorImg,
NavbarDiv,
TogetherDiv,
CommentDiv,
FundingComment,
NamingDiv,
MakerDiv,
SponsorDiv,
} from './SponsorStyles';
const Sponsor = () => {
const navigate = useNavigate();
const { fundingId } = useParams();
// const [sponsorData, setSponsorData] = useState({
// fundingid: 0,
// itemImage: "",
// content: "",
// showName: "",
// });
useEffect(() => {
const getData = async () => {
try {
if (!fundingId) {
return;
}
// const data = await getSponsorDetail(fundingId);
// setSponsorData(data);
} catch (error) {
console.error('후원자 상세페이지 API 호출 오류:', error);
}
};
getData();
}, [fundingId]);
return (
<MainContainer>
<LeftContainer>
<Logo>Giftipie</Logo>
<P pt="25px" fs="16px" fw="800" pb="5px">
기프티파이에서
</P>
<P fs="16px" fw="800" pb="5px">
정말 원하는 선물을
</P>
<P fs="16px" fw="800">
주고 받아요
</P>
</LeftContainer>
<RightContainer>
<NavbarDiv>
<IoIosArrowBack onClick={() => navigate('/')} color={theme.white} size="20px" />
<P pl="120px" fs="13px" fw="900" color={theme.white}>
펀딩 만들기
</P>
</NavbarDiv>
<Body>
<FundingDiv>
<TogetherDiv bc={theme.white}>
<SponserDiv>
<FundingComment mt="10px">
<NamingDiv>
<P fs={theme.detail2} color={theme.gray2}>
후원자 보여줄 이름
</P>
<MakerDiv >
만든이
</MakerDiv>
</NamingDiv>
<CommentDiv mt="5px" fs="13px" bc={theme.secondary}>
후원자 남길 메시지 후원자 남길 메시지 후원자 남길 메시지 후원자 남길 메시지 후원자 남길 메시지 후원자 남길 메시지
</CommentDiv>
</FundingComment>
<SponsorImg src="/imgs/Common/profile-1.svg" alt="image" />
</SponserDiv>
<SponserDiv>
<SponsorImg src="/imgs/Common/profile-2.svg" alt="image" />
<SponserComment mt="10px">
<NamingDiv>
<P fs={theme.detail2} color={theme.gray2}>
{/* {sponsorData.showName} */}
후원자 보여줄 이름
</P>
<SponsorDiv >
1등
</SponsorDiv>
</NamingDiv>
<CommentDiv mt="5px" fs="13px" bc={theme.gray6}>
{/* {sponsorData.content} */}
후원자 남길 메시지
</CommentDiv>
</SponserComment>
</SponserDiv>
<SponserDiv>
<SponsorImg src="/imgs/Common/profile-3.svg" alt="image" />
<SponserComment mt="10px">
<NamingDiv>
<P fs={theme.detail2} color={theme.gray2}>
{/* {sponsorData.showName} */}
후원자 보여줄 이름
</P>
<SponsorDiv >
2등
</SponsorDiv>
</NamingDiv>
<CommentDiv mt="5px" fs="13px" bc={theme.gray6}>
{/* {sponsorData.content} */}
후원자 남길 메시지
</CommentDiv>
</SponserComment>
</SponserDiv>
<SponserDiv>
<SponsorImg src="/imgs/Common/profile-4.svg" alt="image" />
<SponserComment mt="10px">
<NamingDiv>
<P fs={theme.detail2} color={theme.gray2}>
{/* {sponsorData.showName} */}
후원자 보여줄 이름
</P>
<SponsorDiv >
3등
</SponsorDiv>
</NamingDiv>
<CommentDiv mt="5px" fs="13px" bc={theme.gray6}>
후원자 남길 메시지 후원자 남길 메시지 후원자 남길 메시지 후원자 남길 메시지 후원자 남길 메시지
</CommentDiv>
</SponserComment>
</SponserDiv>
<SponserDiv>
<SponsorImg src="/imgs/Common/profile-5.svg" alt="image" />
<SponserComment mt="10px">
<P fs={theme.detail2} color={theme.gray2}>
후원자 보여줄 이름
{/* {sponsorData.showName} */}
</P>
<CommentDiv mt="5px" fs="13px" bc={theme.gray6}>
{/* {sponsorData.content} */}
후원자 남길 메시지
</CommentDiv>
</SponserComment>
</SponserDiv>
<SponserDiv>
<SponsorImg src="/imgs/Common/profile-5.svg" alt="image" />
<SponserComment mt="10px">
<P fs={theme.detail2} color={theme.gray2}>
후원자 보여줄 이름
{/* {sponsorData.showName} */}
</P>
<CommentDiv mt="5px" fs="13px" bc={theme.gray6}>
{/* {sponsorData.content} */}
후원자 남길 메시지
</CommentDiv>
</SponserComment>
</SponserDiv>
<SponserDiv>
<SponsorImg src="/imgs/Common/profile-5.svg" alt="image" />
<SponserComment mt="10px">
<P fs={theme.detail2} color={theme.gray2}>
후원자 보여줄 이름
{/* {sponsorData.showName} */}
</P>
<CommentDiv mt="5px" fs="13px" bc={theme.gray6}>
{/* {sponsorData.content} */}
후원자 남길 메시지
</CommentDiv>
</SponserComment>
</SponserDiv>
<SponserDiv>
<SponsorImg src="/imgs/Common/profile-5.svg" alt="image" />
<SponserComment mt="10px">
<P fs={theme.detail2} color={theme.gray2}>
후원자 보여줄 이름
{/* {sponsorData.showName} */}
</P>
<CommentDiv mt="5px" fs="13px" bc={theme.gray6}>
{/* {sponsorData.content} */}
후원자 남길 메시지
</CommentDiv>
</SponserComment>
</SponserDiv>
</TogetherDiv>
</FundingDiv>
</Body>
</RightContainer>
</MainContainer>
);
};
export default Sponsor;
import styled from "styled-components";
import theme from "../../../../styles/theme";
// 전체 컨테이너
export const MainContainer = styled.div`
display: flex;
justify-content: center;
max-width: 1200px;
min-height: 100vh;
margin: 0 auto;
flex-wrap: wrap;
`;
// 왼쪽 컨테이너
export const LeftContainer = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 500px;
height: 100vh;
padding: 20px;
border: 1px solid ${theme.gray4};
border-radius: 8px;
margin-right: 100px;
@media (max-width: 1024px) {
display: none;
}
`;
export const Logo = styled.h1`
font-size: 24px;
font-weight: 800;
`;
export const P = styled.p`
padding-top: ${(props) => props.pt};
padding-bottom: ${(props) => props.pb};
padding-left: ${(props) => props.pl};
padding-right: ${(props) => props.pr};
font-size: ${(props) => props.fs};
font-weight: ${(props) => props.fw};
color: ${(props) => props.color};
margin-top: ${(props) => props.mt};
margin-right: ${(props) => props.mr};
background-color: ${(props) => props.bc};
border-radius: ${(props) => props.br};
padding: ${(props) => props.p};
border: none;
align-items: center;
&:hover {
cursor: pointer;
}
`;
export const Button = styled.button`
justify-content: center;
align-items: center;
width: ${(props) => props.w};
height: ${(props) => props.h};
padding: 10px;
background-color: ${(props) => props.bc};
border-radius: 7px;
color: ${(props) => props.color};
font-size: ${(props) => props.fs};
font-weight: 600;
margin-top: ${(props) => props.mt};
margin-bottom: ${(props) => props.mb};
padding-left: ${(props) => props.pl};
padding-right: ${(props) => props.pr};
`;
export const MakerDiv = styled.div`
border: 1.5px solid ${theme.primary};
border-radius: 5px;
color: ${theme.primary};
font-size: ${theme.detail2};
font-weight: 600;
padding: 2px 5px 1.5px 5px;
margin-left: 7px;
`
export const SponsorDiv = styled.div`
background-color: ${theme.primary};
border-radius: 5px;
color: ${theme.white};
font-size: ${theme.detail2};
font-weight: 600;
padding: 2px 5px 1.5px 5px;
margin-left: 7px;
`
/* 오른쪽 컨테이너 */
export const RightContainer = styled.div`
position: relative;
width: -webkit-fill-available;
max-width: 390px;
height: 100vh;
margin: 0 10px;
overflow-y: scroll;
border: 1px solid lightgray;
&::-webkit-scrollbar {
display: none;
}
/* 모바일뷰 */
@media screen and (max-width: 390px) {
max-width: 100%;
}
/* 태블릿뷰는 추후에 적용예정 */
/* @media screen and (max-width: 1024px) {
max-width: 100%;
} */
`;
// 네브바 영역
export const NamingDiv = styled.div`
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
`;
// 네브바 영역
export const NavbarDiv = styled.div`
display: flex;
flex-direction: row;
align-items: center;
height: 70px;
padding-left: 20px;
`;
export const NavbarBtn = styled.button`
font-size: ${(props) => props.fs};
font-weight: ${(props) => props.fw};
padding-left: ${(props) => props.pl};
padding-right: ${(props) => props.pr};
color: #ffffff;
`;
export const NavbarBtnDiv = styled.div`
flex-direction: row;
padding-right: ${(props) => props.pr};
`;
// 바디 영역
export const Body = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
max-width: 390px;
height: auto;
`;
export const FundingDiv = styled.div`
width: 100%;
max-width: 390px;
`;
export const TogetherDiv = styled.div`
background-color: ${(props) => props.bc};
border-radius: 30px 30px 0px 0px;
width: -webkit-fill-available; /* 사용 가능한 너비로 채움 */
max-width: 390px; /* 최대 너비를 390px로 제한 */
margin: 0 auto; /* 가운데 정렬을 위해 margin을 auto로 설정 */
padding: 20px;
@media screen and (max-width: 390px) {
width: 100%; /* 최대 너비를 100%로 설정하여 가득 차게 함 */
}
`;
export const CommentDiv = styled.div`
justify-content: center;
align-items: center;
width: 290px; /* 최대 너비를 390px로 제한 */
padding: 10px;
border-radius: 7px;
font-weight: 600;
background-color: ${(props) => props.bc};
color: ${theme.black};
font-size: ${theme.detail};
margin-top: ${(props) => props.mt};
margin-bottom: ${(props) => props.mb};
padding-left: ${(props) => props.pl};
padding-right: ${(props) => props.pr};
`;
export const SponserDiv = styled.div`
display: flex;
flex-direction: row;
align-items: center;
`;
export const FundingComment = styled.div`
margin-top: ${(props) => props.mt};
display: flex;
flex-direction: column;
justify-content: center;
align-items: end;
`;
export const SponserComment = styled.div`
margin-top: ${(props) => props.mt};
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
`;
export const SponsorImg = styled.img`
width: 60px;
height: 60px;
border-radius: 100px;
margin-top: 10px;
`;
export const FundingNewline = styled.div`
width: 100%;
height: 12px;
`;
import React, { useState, useEffect } from 'react';
import { useNavigate, useParams, useLocation } from 'react-router-dom';
import { warnToast } from '../../../components/toast';
import { fundingPayDonationReady, getFundingDonation, getDonationApproval } from '../../../apis/funding';
import { IoIosArrowBack } from 'react-icons/io';
import theme from '../../../styles/theme';
import {
MainContainer,
LeftContainer,
LeftImgContainer,
LeftLogoTextIcon,
BubbleImg,
LeftRowdiv,
LeftImg,
Leftcolumndiv,
IpadLoveImg,
P,
NavbarDiv,
RightContainer,
SponserMoney,
InputTag,
Body,
FundingDiv,
SponserDiv,
SponserComment,
TogetherDiv,
KakaoButton,
KakaoPayLogo,
InputLabel,
InputSpan,
InputInput,
Textarea,
ProfileImageRow,
ProfileImg,
Checkbox,
} from './FundingPayStyles';
const FundingPay = ({ donation }) => {
const navigate = useNavigate();
const { id } = useParams();
const location = useLocation();
// 후원자 정보 및 펀딩 정보를 관리할 상태 변수들을 설정
const [sponsorDonation, setSponsorDonation] = useState({
showName: '',
donation: '',
donationRanking: '',
sponsorNickname: '',
sponsorComment: '',
});
const handleFundingDonationClick = async () => {
try {
if (sponsorDonation.sponsorNickname === '' || sponsorDonation.sponsorComment === '') {
warnToast('내용을 입력해주세요');
return;
}
// 후원 결제준비 API
const response = await fundingPayDonationReady({
id,
sponsorNickname: sponsorDonation.sponsorNickname,
sponsorComment: sponsorDonation.sponsorComment,
donation: sponsorDonation.donation,
});
console.log('결제 준비 성공: ', response);
window.location.href = response.result.next_redirect_pc_url;
} catch (error) {
console.error('결제 준비 오류:', error);
}
};
// useEffect를 이용하여 URL 매개변수에서 donation, showName 값을 가져오는 부분 합침
useEffect(() => {
const getData = async () => {
try {
if (!id) {
return;
}
const params = new URLSearchParams(location.search);
const donation = params.get('donation');
const showName = params.get('showName');
// 특정 펀딩의 상세 정보를 가져오기
const response = await getFundingDonation(id);
// 후원자 정보 업데이트
setSponsorDonation((prev) => ({
...prev,
donation: donation ? parseInt(donation) : '',
showName: showName || prev.showName,
donationRanking: response.result.donationRanking,
}));
// 후원 결제승인 API 호출
if (params.has('pg_token')) {
const pg_token = params.get('pg_token');
await getDonationApproval(pg_token);
navigate(`/fundingdetail/${id}`);
}
} catch (error) {
console.error('결제 오류:', error);
}
};
// 컴포넌트가 마운트될 때와 id가 변경될 때 API 호출 함수 실행
getData();
}, [id, location.search, navigate]);
// donation 값 사용
console.log(`펀딩 금액: ${donation}`);
return (
<MainContainer>
<LeftContainer>
<LeftContainer pt="70px">
<LeftImgContainer>
<div>
<LeftLogoTextIcon src="/imgs/Common/giftipie.png" />
</div>
<div>
<P pt="60px" pl="355px" fs="23px" fw="800" color={theme.white}>
생일선물
<br />뭐 받고싶어?
</P>
<BubbleImg src="/imgs/Home/speech-bubble.png" />
</div>
{/* <BubbleImg src="/imgs/Home/speech-bubble.png" /> */}
</LeftImgContainer>
<LeftRowdiv ml="30px">
<LeftRowdiv color="#3F3F3F" mr="10px" bc="#FF7C7C" br="25px" p="8px">
<LeftImg src="/imgs/Home/giftbox-red.png" w="30px" h="25px" mr="10px" pl="10px" />
<P fs="20px" fw="900" pr="10px">
정말 원하는 선물
</P>
</LeftRowdiv>
<div>
<P mt="6px" pt="2px" fs="20px" fw="700" color="#FFFFFF">
을 주고 받아요!
</P>
</div>
</LeftRowdiv>
<LeftRowdiv>
<Leftcolumndiv ml="30px">
<P fs="16px" fw="500" pt="30px" pb="5px" color="#FFFFFF">
지금은 유저테스트 진행 중 입니다
</P>
<P pb="100px" fs="16px" fw="500" color="#FFFFFF">
6명의 개발자와 1명의 디자이너가 함께 개발하고 있습니다
</P>
</Leftcolumndiv>
<LeftImg src="/imgs/Home/pie-hi.png" w="340px" pl="100px" />
</LeftRowdiv>
</LeftContainer>
<LeftRowdiv ml="30px">
</LeftRowdiv>
<IpadLoveImg src="/imgs/Home/pie-ipad.png" w="330px" />
</LeftContainer>
<RightContainer>
<NavbarDiv>
<IoIosArrowBack onClick={() => navigate('/')} color={theme.white} size="20px" />
<P pl="80px" fs={theme.body2} color={theme.white}>
지금 선물하면
</P>
<P pl="5px" fs={theme.body2} color={theme.primary}>
{sponsorDonation.donationRanking}등
</P>
<P pl="0px" fs={theme.body2} color={theme.white}>
이에요!
</P>
</NavbarDiv>
<Body>
<FundingDiv>
<TogetherDiv bc={theme.white} mb="15px">
<SponserMoney>
<P pt="40px" fs={theme.headline1} fw="700" pb="5px">
{sponsorDonation.showName} 님에게
</P>
<LeftRowdiv>
<P fs={theme.headline1} fw="700" pb="5px" color={theme.primaryFont}>
{sponsorDonation.donation}원
</P>
<P pl="10px" fs={theme.headline1} fw="700">
선물하기
</P>
</LeftRowdiv>
</SponserMoney>
<InputLabel mt="50px">
<InputSpan>남길 이름</InputSpan>
<InputInput
type="text"
placeholder="남길 이름을 입력해주세요"
value={sponsorDonation.sponsorNickname}
onChange={(e) => {
setSponsorDonation({
...sponsorDonation,
sponsorNickname: e.target.value,
});
}}
></InputInput>
</InputLabel>
<P pl="10px" fs={theme.detail2} color={theme.gray2}>
만든이와 방문자 모두에게 표시됩니다.
</P>
<InputLabel mt="25px">
<InputSpan>남길 메시지</InputSpan>
<Textarea
type="text"
placeholder="남길 메시지를 입력해주세요"
value={sponsorDonation.sponsorComment}
onChange={(e) => {
setSponsorDonation({
...sponsorDonation,
sponsorComment: e.target.value,
});
}}
/>
</InputLabel>
<P fs={theme.detail2} color={theme.gray2} pb="10px">
프로필 이미지
</P>
<ProfileImageRow mb="25px">
<ProfileImg src="/imgs/Funding/FundingPay/blue-dog.svg" alt="image" mr="9px" />
<ProfileImg src="/imgs/Funding/FundingPay/water-melon.svg" alt="image" mr="9px" />
<ProfileImg src="/imgs/Funding/FundingPay/icecream.svg" alt="image" mr="9px" />
<ProfileImg src="/imgs/Funding/FundingPay/yellow-tube.svg" alt="image" mr="9px" />
<ProfileImg src="/imgs/Funding/FundingPay/violet-star.svg" alt="image" />
</ProfileImageRow>
</TogetherDiv>
<TogetherDiv bc={theme.white} br="30px 30px 0px 0px">
<SponserDiv>
<P fs={theme.body2} color={theme.gray2} pl="10px" pt="19px">
카카오페이 테스트 결제에 필요한 개인정보 <br/>제공에 동의하십니까?
</P>
<Checkbox type="checkbox" />
</SponserDiv>
<KakaoButton onClick={handleFundingDonationClick}>
<KakaoPayLogo src="/imgs/Funding/FundingPay/kakao-pay.svg" alt="image" />
</KakaoButton>
</TogetherDiv>
</FundingDiv>
</Body>
</RightContainer>
</MainContainer>
);
};
export default FundingPay;
import styled from "styled-components";
import theme from "../../../styles/theme";
// 전체 컨테이너
export const MainContainer = styled.div`
display: flex;
justify-content: center;
max-width: 1200px;
min-height: 100vh;
margin: 0 auto;
flex-wrap: wrap;
`;
/* 왼쪽 컨테이너 */
export const LeftContainer = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
height: 100vh;
padding-top: ${(props) => props.pt};
@media (max-width: 1200px) {
display: none;
}
`;
export const LeftImgContainer = styled.div`
position: relative; /*상대 위치 지정*/
//width: 300px; /* 이미지 너비 */
height: 200px; /* 이미지 높이 */
padding-left: 100px; /* 이미지 왼쪽 간격 조정 */
justify-content: space-between;
`;
export const LeftLogoTextIcon = styled.img`
height: 40px;
position: absolute; /* 절대 위치 지정 */
bottom: 20px; /* 아래쪽 위치 조정 */
left: 30px; /* 왼쪽 위치 조정 */
`;
export const BubbleImg = styled.img`
position: absolute; /* 절대 위치 지정 */
top: 0; /* 위쪽 정렬 */
left: 368px; /* 왼쪽 정렬 */
width: 290px; /* 부모 요소에 대한 상대적인 너비 */
height: 230px; /* 부모 요소에 대한 상대적인 높이 */
`;
export const LeftRowdiv = styled.div`
display: flex;
flex-direction: row;
/* align-items: center; */
padding-top: ${(props) => props.pt};
margin-top: ${(props) => props.mt};
padding-bottom: ${(props) => props.pb};
padding-left: ${(props) => props.pl};
padding-right: ${(props) => props.pr};
margin-right: ${(props) => props.mr};
margin-left: ${(props) => props.ml};
font-size: ${(props) => props.fs};
font-weight: ${(props) => props.fw};
color: ${(props) => props.color};
background-color: ${(props) => props.bc};
border-radius: ${(props) => props.br};
padding: ${(props) => props.p};
border: none;
`;
// 입력한 영역
export const InputLabel = styled.label`
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
width: 100%;
max-width: 390px;
border-radius: 10px;
margin-top: ${(props) => props.mt};
border: 0.3px solid ${theme.gray5};
margin-bottom: 8px;
&:hover {
border: 0.5px solid ${theme.gray3};
}
`;
export const InputSpan = styled.span`
padding-top: 10px;
padding-bottom: 5px;
padding-left: 10px;
font-size: ${theme.detail2};
color: ${theme.gray2};
`;
export const InputInput = styled.input`
border: none;
width: 95%;
padding-left: 10px;
padding-bottom: 10px;
font-weight: 500;
font-size: ${theme.body1};
color: ${theme.black};
border-radius: 10px;
justify-content: start;
align-items: start;
font-family: 'Pretendard', sans-serif;
`;
export const Textarea = styled.textarea`
width: 98%;
height: 128px;
outline: none;
border: none;
resize: none;
border-radius: 10px;
margin-bottom: 10px;
padding-left: 10px;
font-size: ${theme.body1};
color: ${theme.black};
justify-content: start;
align-items: start;
`;
export const ProfileImageRow = styled.div`
display: flex;
flex-direction: row;
align-items: center;
justify-content: start;
margin-bottom: ${(props) => props.mb};
`;
export const ProfileImg = styled.img`
height: 62px;
width: 62px;
border-radius: 3px;
margin-right: ${(props) => props.mr};
`;
export const LeftImg = styled.img`
margin-top: ${(props) => props.mt};
margin-right: ${(props) => props.mr};
padding-right: ${(props) => props.pr};
padding-left: ${(props) => props.pl};
width: ${(props) => props.w};
height: ${(props) => props.h};
`;
export const Leftcolumndiv = styled.div`
flex-direction: column;
margin-left: ${(props) => props.ml};
`;
export const IpadLoveImg = styled.img`
position: absolute;
bottom: 0;
left: 0;
width: ${(props) => props.w};
height: ${(props) => props.h};
`;
export const Logo = styled.h1`
font-size: 24px;
font-weight: 800;
`;
export const P = styled.p`
padding-top: ${(props) => props.pt};
padding-bottom: ${(props) => props.pb};
padding-left: ${(props) => props.pl};
padding-right: ${(props) => props.pr};
font-size: ${(props) => props.fs};
font-weight: ${(props) => props.fw};
color: ${(props) => props.color};
background-color: ${(props) => props.bc};
margin-top: ${(props) => props.mt};
margin-right: ${(props) => props.mr};
border-radius: ${(props) => props.br};
padding: ${(props) => props.p};
align-items: center;
border: none;
`;
export const Button = styled.button`
justify-content: center;
align-items: center;
width: ${(props) => props.w};
height: ${(props) => props.h};
background-color: ${(props) => props.bc};
border-radius: 7px;
color: ${(props) => props.color};
font-size: ${(props) => props.fs};
font-weight: 600;
margin-top: ${(props) => props.mt};
margin-bottom: ${(props) => props.mb};
padding-left: ${(props) => props.pl};
padding-right: ${(props) => props.pr};
&:hover {
color: white;
background-color: black;
cursor: pointer;
}
`;
// 네브바 영역
export const NavbarDiv = styled.div`
display: flex;
flex-direction: row;
align-items: center;
height: 70px;
padding-left: 20px;
`;
/* 오른쪽 컨테이너 */
export const RightContainer = styled.div`
position: relative;
width: -webkit-fill-available; /* 사용 가능한 너비로 채움 */
max-width: 390px; /* 최대 너비를 390px로 제한 */
height: 100vh;
overflow-y: scroll;
&::-webkit-scrollbar {
display: none;
}
@media screen and (max-width: 390px) {
max-width: 100%; /* 최대 너비를 100%로 설정하여 가득 차게 함 */
}
`;
// 바디 영역
export const Body = styled.div`
height: auto;
`;
export const FundingDiv = styled.div`
justify-content: center;
width: 100%;
max-width: 442px;
height: auto;
`;
export const SponserDiv = styled.div`
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
`;
export const SponserMoney = styled.div`
margin-top: ${(props) => props.mt};
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
`;
export const SponserComment = styled.div`
margin-top: ${(props) => props.mt};
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
`;
export const InputTag = styled.input`
width: 98%;
height: ${(props) => props.h};
background-color: #eae7de;
border-radius: 4px;
border: none;
margin-left: 10px;
margin-bottom: 10px;
padding-left: 10px;
padding-bottom: ${(props) => props.pb};
font-weight: 500;
font-size: 11px;
justify-content: start;
align-items: start;
`;
export const FundingNewline = styled.div`
width: 100%;
height: 12px;
`;
export const TogetherDiv = styled.div`
background-color: ${(props) => props.bc};
border-radius: 30px;
border-radius: ${(props) => props.br};
width: -webkit-fill-available; /* 사용 가능한 너비로 채움 */
max-width: 390px; /* 최대 너비를 390px로 제한 */
margin: 0 auto; /* 가운데 정렬을 위해 margin을 auto로 설정 */
margin-bottom: ${(props) => props.mb};
padding: 20px;
@media screen and (max-width: 390px) {
width: 100%; /* 최대 너비를 100%로 설정하여 가득 차게 함 */
}
`;
// 체크박스
export const Checkbox = styled.input`
margin-top: 30px;
margin-right: 15px;
width: 25px;
height: 25px;
accent-color: ${theme.primary};
border-radius: 50px;
color: ${theme.white};
background-color: ${theme.primary};
`;
// 카카오버튼
export const KakaoButton = styled.button`
justify-content: center;
align-items: center;
width: 100%;
height: 60px;
background-color: #fae101;
border-radius: 7px;
font-size: 19px;
font-weight: 600;
margin-top: 14px;
margin-bottom: ${(props) => props.mb};
padding-left: ${(props) => props.pl};
padding-right: ${(props) => props.pr};
&:hover {
background-color: #fae102;
cursor: pointer;
}
`;
export const KakaoPayLogo = styled.img`
height: 35px;
margin-top: 5px;
`;
