React
수정, 삭제, 완료 API 연결
WEB_CREASTORY
2024. 2. 13. 03:14
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { fundingCreate } from '../../../api/api'; // 펀딩 생성 API import
import { useParams } from 'react-router-dom';
import CreateModal from './Modal/CreateModal';
import Navbar from '../../../components/Navbar'; // 추가된 코드
import { useDispatch, useSelector } from 'react-redux'; // 추가된 코드
import { userLogout } from '../../../redux/authSlice'; // 추가된 코드
import {
MainContainer,
LeftContainer,
Logo,
P,
Button,
RightContainer,
NavbarDiv,
ProducImgtDiv,
InputTag,
FundingImg,
Body,
FundingDiv,
SponserDiv,
RadioInput,
SponserComment,
TogetherDiv,
SponsorComment,
ImgText,
} from './FundingCreateStyles';
// 펀딩 생성 페이지 컴포넌트
const FundingCreate = () => {
const navigate = useNavigate(); // React Router의 네비게이션 기능을 사용하기 위한 hook
const { id } = useParams(); // URL 매개변수(id)를 가져옴
const [itemImage, setItemImage] = useState(false);
const [isFundingModalOpen, setIsFundingModalOpen] = useState(false); // 모달 창의 열림 여부 상태 변수
const isLoggedIn = useSelector((state) => state.auth.isLoggedIn); // 추가된 코드
const dispatch = useDispatch(); // 추가된 코드
// 펀딩 생성 페이지에서 사용될 상태 변수 초기화
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 === ''
) {
alert('내용을 입력해주세요');
return;
}
// 펀딩 생성 API 호출 및 데이터 전송
const response = await fundingCreate({
id,
itemImage,
itemName: createData.itemName,
targetAmount: createData.targetAmount,
publicFlag: createData.publicFlag,
showName: createData.showName,
title: createData.title,
content: createData.content,
endDate: createData.endDate,
});
console.log('펀딩 생성 성공:', response);
navigate(`/fundingdetail/${response.id}`);
} catch (error) {
if (error.response) {
const statusCode = error.response.status;
const errorMessage = error.response.data.message;
if (statusCode === 400) {
// alert(errorMessage);
alert('펀딩 생성 실패 :', errorMessage);
}
}
}
};
// 추가된 코드
const handleLogoutClick = () => {
dispatch(userLogout()); // 로그아웃 액션 디스패치
navigate('/');
};
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>
<Button onClick={() => navigate('/')} mt="20px" w="180px" h="50px" fs="16px" color="white" bc="orange">
펀딩 시작하기
</Button>
</LeftContainer>
<RightContainer>
{/* 추가된 코드 */}
<NavbarDiv>
<Navbar isLoggedIn={isLoggedIn} handleLogoutClick={handleLogoutClick} />
</NavbarDiv>
<Body>
<form
onSubmit={(e) => {
e.preventDefault();
}}
>
<FundingDiv>
<P pb="10px" fs="16px" fw="900">
펀딩 생성페이지
</P>
<P pb="20px" fs="10px" fw="900">
펀딩 생성 페이지에 상품명과 이미지가 노출돼요.
</P>
<ProducImgtDiv>
<SponsorComment mt="10px" pointer="pointer" onClick={handleFundingModalClick}>
<FundingImg src={itemImage} h="90px" w="80px" />
<ImgText>상품 링크 URL</ImgText>
</SponsorComment>
<div>
<InputTag
type="text"
value={createData.itemName}
onChange={handleItemNameChange}
placeholder="상품명을 입력해주세요"
h="40px"
w="97%"
ml="10px"
mb="10px"
pl="10px"
/>
<InputTag
type="text"
value={createData.targetAmount}
onChange={handleTargetAmountChange}
placeholder="가격을 입력해주세요"
h="40px"
w="97%"
ml="10px"
pl="10px"
/>
</div>
</ProducImgtDiv>
{/* 모달 컴포넌트 표시 여부 확인 후 표시 */}
{isFundingModalOpen && (
<CreateModal closeModal={closeModal} handleImageSelection={handleImageSelection} />
)}
{/* 펀딩 내용 및 공개 여부 입력 폼 */}
<SponserDiv>
<SponserComment mt="50px">
<P pb="10px" fs="16px" fw="900">
펀딩 내용
</P>
<P pb="20px" fs="13px" fw="900">
공개 방식
</P>
<SponserDiv>
<RadioInput
value="true"
checked={createData.publicFlag === true}
onChange={handlePublicFlagChange}
type="radio"
mb="21px"
/>
<P pb="20px" fs="13px" fw="900" pl="20px">
공개
</P>
<P pb="20px" fs="10px" fw="900" pl="42px">
누구나 볼 수 있어요
</P>
</SponserDiv>
{/* 여기까지*/}
<SponserDiv>
<RadioInput
value="false"
checked={createData.publicFlag === false}
onChange={handlePublicFlagChange}
type="radio"
mb="21px"
/>
<P pb="20px" fs="13px" fw="900" pl="20px">
비공개
</P>
<P pb="20px" fs="10px" fw="900" pl="30px">
링크를 통해서만 방문할 수 있어요
</P>
</SponserDiv>
</SponserComment>
</SponserDiv>
<P pt="30px" pb="5px" fs="13px" fw="800">
보여줄 이름
</P>
<InputTag
type="text"
value={createData.showName}
onChange={handleShowNameChange}
placeholder="이름을 입력해주세요"
h="40px"
w="97%"
mb="10px"
pl="10px"
/>
<P pt="10px" pb="5px" fs="13px" fw="800">
제목
</P>
<InputTag
type="text"
value={createData.title}
onChange={handleTitleChange}
placeholder="제목을 입력해주세요"
h="40px"
w="97%"
mb="10px"
pl="10px"
/>
<P pt="10px" pb="5px" fs="13px" fw="800">
본문
</P>
<InputTag
type="text"
value={createData.content}
onChange={handleContentChange}
placeholder="본문을 입력해주세요"
h="90px"
w="97%"
mb="10px"
pl="10px"
pb="50px"
/>
<P pt="10px" pb="5px" fs="13px" fw="800">
마감일 설정
</P>
<InputTag
type="date"
value={createData.endDate}
onChange={handleEndDateChange}
h="40px"
w="97%"
pl="10px"
pt="10px"
/>
</FundingDiv>
<TogetherDiv>
<P pl="130px" fs="14px" fw="800">
펀딩 금액은 계좌로 전달돼요
</P>
<P pl="95px" fs="14px" fw="800">
펀딩에 성공하면 카톡으로 알림이 가요
</P>
</TogetherDiv>
<Button
onClick={handleFundingClick}
w="442px"
h="60px"
mt="10px"
color="white"
fs="19px"
bc="gray"
>
펀딩 등록하기
</Button>
</form>
</Body>
</RightContainer>
</MainContainer>
);
};
export default FundingCreate;import axios from "axios";
export const instance = axios.create({
baseURL: process.env.REACT_APP_API_URL,
withCredentials: true, // Cookies에 브라우저가 자동으로 쿠키를 넣어줌
headers: {
"Access-Control-Allow-Origin": `${process.env.REACT_APP_API_URL}`,
},
});
// 회원가입 API
export const signup = async (userData) => {
try {
const response = await instance.post("/api/signup", userData);
if (response.status === 201) {
const { code, message } = response.data;
if (code === 2000) {
alert(message);
console.log("가입 성공! 환영합니다.");
} else {
console.error("올바르지 않은 응답 형식 또는 값");
throw new Error("회원가입 처리 중 오류가 발생했습니다.");
}
}
return response.data;
} catch (error) {
console.error("회원가입 오류:", error);
if (error.response && error.response.status === 400) {
const { code, message } = error.response.data;
if (code === 4000) {
alert(message);
} else {
console.error("올바르지 않은 응답 형식 또는 값");
alert("회원가입 처리 중 오류가 발생했습니다.");
}
}
throw error;
}
};
// 로그인 API
export const login = async (credentials) => {
try {
const response = await instance.post("/api/login", credentials);
if (response.status === 200) {
const { code, message, result } = response.data;
if (code === 2000 && result) {
alert(message);
} else {
console.error("올바르지 않은 응답 형식 또는 값");
throw new Error("로그인 처리 중 오류가 발생했습니다.");
}
}
return response.data;
} catch (error) {
console.error("로그인 오류:", error);
if (error.response && error.response.status === 401) {
const { code, message } = error.response.data;
if (code === 4000) {
alert(message);
} else {
console.error("올바르지 않은 응답 형식 또는 값");
alert("로그인 처리 중 오류가 발생했습니다.");
}
}
throw error;
}
};
// 펀딩 생성페이지 API
export const fundingCreate = async (fundingData) => {
try {
const response = await instance.post("/api/funding/create", fundingData); // 펀딩 생성 요청
console.log("펀딩 생성페이지 API", response);
return response.data; // 응답 데이터 반환
} catch (error) {
throw error; // 실패 시 예외 처리
}
};
// 펀딩 생성페이지 모달창(ItemLink) API
export const modalItemLink = async (LinkData) => {
try {
const response = await instance.post("/api/funding/addLink", LinkData); // 모달창(ItemLink) API 호출
return response.data; // 응답 데이터 반환
} catch (error) {
throw error; // 실패 시 예외 처리
}
};
// 펀딩 상세페이지 API
export const fetchFundingDetail = async (id) => {
try {
const response = await instance.get(`/api/funding/${id}`); // 펀딩 상세페이지 요청
console.log("펀딩 상세페이지 API", response);
return response.data; // 응답 데이터 반환
} catch (error) {
console.error("펀딩 상세페이지 API 호출 오류:", error); // 오류 로깅
throw error; // 에러 다시 throw 또는 다른 적절한 처리를 수행
}
};
// 펀딩 후원자 상세페이지 API
export const fetchSponsorDetail = async (id) => {
try {
const response = await instance.get(`/api/fundingsponsordetail/${id}`); // 펀딩 후원자 상세페이지 요청
if (response.status === 200) {
alert("후원자 상세페이지입니다.");
return response.data; // 응답 데이터 반환
}
} catch (error) {
console.error("펀딩 상세페이지 API 호출 오류:", error); // 오류 로깅
throw error; // 에러 다시 throw 또는 다른 적절한 처리를 수행
}
};
// 펀딩 수정페이지 불러오기 API - get
export const FundingModifyGet = async (id, data) => {
try {
const response = await instance.get(`/api/funding/${id}`, data); // 펀딩 수정페이지 요청
console.log("펀딩 불러오기 API", response);
if (response.status === 200) {
return response.data; // 응답 데이터 반환
}
} catch (error) {
console.error("API 호출 중 에러 발생:", error); // 오류 로깅
throw error; // 에러 다시 throw
}
};
// 펀딩 수정페이지 API - 변경버튼 - patch
export const updateFundingModify = async (id, data) => {
try {
const response = await instance.patch(`/api/funding/${id}/update`, data); // 펀딩 수정페이지 요청
console.log("펀딩 수정 API", response);
if (response.status === 200) {
return response.data; // 응답 데이터 반환
}
} catch (error) {
throw error; // 실패 시 예외 처리
}
};
// 펀딩 수정페이지 - 상품링크 변경 모달창(ItemLink) API
export const modalLinkModify = async (linkModifyData) => {
try {
const response = await instance.post(
"/api/funding/modifyLink",
linkModifyData
); // 모달창(ItemLink) API 호출
if (response.status === 200) {
return response.data; // 응답 데이터 반환
}
} catch (error) {
if (error.response) {
const statusCode = error.response.status;
const errorMessage = error.response.data.message;
if (statusCode === 400) {
alert(errorMessage);
}
}
}
};
// 펀딩 수정페이지 - 삭제하기 버튼 API - delete
export const deleteFundingModify = async (id, data) => {
try {
const response = await instance.delete(`/api/funding/${id}`, data);
console.log("펀딩 삭제 API", response);
if (response.status === 200) {
return response.data; // 응답 데이터 반환
}
} catch (error) {
if (error.response) {
const statusCode = error.response.status;
const errorMessage = error.response.data.message;
if (statusCode === 400) {
alert(errorMessage);
}
}
}
};
// 펀딩 수정페이지 API - 종료버튼 API - patch
export const completeFundingModify = async (id, data) => {
try {
const response = await instance.patch(`/api/funding/${id}/finish`, data); // 펀딩 수정페이지 요청
console.log("펀딩 종료 API", response);
if (response.status === 200) {
return response.data; // 응답 데이터 반환
}
} catch (error) {
throw error; // 실패 시 예외 처리
}
};import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { useParams } from "react-router-dom";
import { fetchFundingDetail } from "../../../api/api"; // 펀딩 상세 정보를 가져오는 API 함수 import
import Navbar from "../../../components/Navbar"; // 추가된 코드
import { useDispatch, useSelector } from "react-redux"; // 추가된 코드
import { userLogout } from "../../../redux/authSlice"; // 추가된 코드
import {
MainContainer,
LeftContainer,
Logo,
P,
Button,
RightContainer,
NavbarDiv,
NavbarBtn,
NavigateBtn,
Body,
BannerImg,
FundingDiv,
SponserDiv,
SponserComment,
SponsorImg,
ProgressBar,
Progress,
BetweenDiv,
TogetherDiv,
} from './FundingDetailStyles';
// 펀딩 상세 페이지 컴포넌트
const FundingDetail = () => {
const navigate = useNavigate(); // React Router의 네비게이션 기능을 사용하기 위한 hook
const { id } = useParams(); // URL 매개변수(id)를 가져옴
const isLoggedIn = useSelector((state) => state.auth.isLoggedIn); // 추가된 코드
const dispatch = useDispatch(); // 추가된 코드
// 펀딩 상세 정보를 담는 상태 변수 초기화
const [detailData, setDetailData] = useState({
// 초기 상태를 명세서에 따라 설정
// FundingCreate에서 받아올 Data 초기값
itemImage: '',
itemName: '',
targetAmount: 0,
publicFlag: false, // 공개, 비공개 여부
showName: '',
title: '',
content: '',
endDate: '',
// FundignDetail에 출력되는 Data 초기값
itemLink: '',
currentAmount: 0,
dday: '',
status: false,
achievementRate: 0,
ownerFlag: false, // true면 수정 페이지 버튼 보여지게
modifiedAt: '', // 수정 날짜
// 후원자 이름 추가
// 후원자 댓글 추가
});
useEffect(() => {
// API를 호출하여 펀딩 상세 정보를 가져오는 함수 정의
const fetchData = async () => {
try {
if (!id) {
// 유효한 id가 없으면 데이터를 요청하지 않음
return;
}
// 펀딩 ID를 설정하여 특정 펀딩의 상세 정보 가져오기
// const fundingid = 1; // 예: 펀딩 ID가 1인 경우
const data = await fetchFundingDetail(id);
setDetailData(data); // 가져온 데이터를 상태 변수에 설정
} catch (error) {
if (error.response) {
const statusCode = error.response.status;
const errorMessage = error.response.data.message;
if (statusCode === 400) {
alert(errorMessage);
}
}
}
};
// 컴포넌트가 마운트될 때 API 호출 함수 실행
fetchData();
}, [id]); // 빈 배열을 전달하여 한 번만 실행하도록 설정
// 추가된 코드
const handleLogoutClick = () => {
dispatch(userLogout()); // 로그아웃 액션 디스패치
navigate("/");
};
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>
<Button
onClick={() => navigate("/")}
mt="20px"
w="180px"
h="50px"
fs="16px"
color="white"
bc="orange"
>
펀딩 시작하기
</Button>
</LeftContainer>
<RightContainer>
{/* 추가된 코드 */}
<NavbarDiv>
<Navbar
isLoggedIn={isLoggedIn}
handleLogoutClick={handleLogoutClick}
/>
</NavbarDiv>
<Body>
<NavigateBtn onClick={() => navigate(`/fundingModify/${id}`)} pl="360px" fs="13px" fw="600">
🖍 수정하기
</NavigateBtn>
<BannerImg src={detailData.itemImage} alt="image" />
<FundingDiv>
<P pt="20px" fs="13px" fw="800">
{detailData.status}
</P>
<P pt="10px" fs="20px" fw="900">
{detailData.title}
</P>
<P pt="10px" fs="15px" fw="900">
{detailData.itemName}
</P>
<BetweenDiv>
<P pt="10px" fs="15px" fw="800">
{detailData.dday}
</P>
<P pt="10px" fs="15px" fw="800">
{detailData.endDate}
</P>
</BetweenDiv>
<P pt="10px" fs="15px" fw="800">
{detailData.showName}
</P>
<ProgressBar>
<Progress width={(65 / 100) * 100} />
</ProgressBar>
<BetweenDiv>
<P pt="8px" fs="15px" fw="800">
{detailData.achievementRate}%
</P>
<P pt="8px" pl="90px" fs="15px" fw="800">
현재 {detailData.currentAmount}원
</P>
<P pt="8px" pl="90px" fs="15px" fw="800">
{detailData.targetAmount}원
</P>
</BetweenDiv>
</FundingDiv>
<TogetherDiv bc="orange">
<P pt="30px" pl="30px" fs="14px" fw="800">
{detailData.content}
</P>
</TogetherDiv>
<FundingDiv>
<P pt="20px" fs="16px" fw="900">
후원자
</P>
{/* <Sponsor /> */}
<SponserDiv>
<SponsorImg src="/imgs/iu.jpg" alt="image" />
<SponserComment mt="10px">
<P pl="5px" fs="13px" fw="800">
아**
</P>
<Button
mt="5px"
w="300px"
h="40px"
pr="90px"
fs="13px"
bc="violet"
>
줄이어폰 그만써~ 생일축하해!!
</Button>
</SponserComment>
</SponserDiv>
<SponserDiv>
<SponsorImg src="/imgs/songjoongy.jpg" alt="logo" />
<SponserComment mt="10px">
<P pl="5px" fs="13px" fw="800">
{detailData.showName}
</P>
<Button
mt="5px"
w="300px"
h="40px"
pr="90px"
fs="13px"
bc="violet"
>
{detailData.content}
</Button>
</SponserComment>
</SponserDiv>
<SponserDiv>
<SponsorImg src="/imgs/junjihyun.jpg" alt="img" />
<SponserComment mt="10px">
<P pl="5px" fs="13px" fw="800">
{detailData.showName}
</P>
<Button
mt="5px"
w="300px"
h="40px"
pr="90px"
fs="13px"
bc="violet"
>
{detailData.content}
</Button>
</SponserComment>
</SponserDiv>
<P
onClick={() => navigate("/fundingsponsordetail")}
pt="40px"
pl="160px"
fs="14px"
fw="800"
>
전체보기 ▶
</P>
</FundingDiv>
<FundingDiv>
<P pt="10px" fs="16px" fw="900">
펀딩 참여하기
</P>
<Button onClick={() => navigate("/fundingpay")} mt="30px" w="375px" h="60px" bc="orange">
<BetweenDiv>
<P pt="2px" pl="20px" fs="15px" fw="800" color="black">
커피 한잔 선물하기
</P>
<P pt="2px" pr="20px" fs="15px" fw="700" color="black">
5,000원
</P>
</BetweenDiv>
</Button>
<Button onClick={() => navigate("/fundingpay")} mt="10px" w="375px" h="60px" bc="orange">
<BetweenDiv>
<P pt="2px" pl="20px" fs="15px" fw="800" color="black">
파인트 아이스크림 선물하기
</P>
<P pt="2px" pr="20px" fs="15px" fw="700" color="black">
10,000원
</P>
</BetweenDiv>
</Button>
<Button onClick={() => navigate("/fundingpay")}
mt="10px"
w="375px"
h="60px"
bc="orange"
>
<BetweenDiv>
<P pt="2px" pl="20px" fs="15px" fw="800" color="black">
원하는만큼 선물하기
</P>
<P pt="2px" pr="20px" fs="15px" fw="700" color="black">
직접입력
</P>
</BetweenDiv>
</Button>
<Button onClick={() => navigate("/fundingpay")} mt="10px" w="375px" h="60px" bc="orange">
<BetweenDiv>
<P pt="2px" pl="20px" fs="15px" fw="800" color="black">
이 펀딩을 끝내러 왔다
</P>
<P pt="2px" pr="20px" fs="15px" fw="700" color="black">
{detailData.currentAmount}원
</P>
</BetweenDiv>
</Button>
</FundingDiv>
<TogetherDiv bc="violet">
<P pt="30px" pl="30px" fs="16px" fw="800">
Giftipie에서 함께 하는 기쁨
</P>
<BetweenDiv>
<P pt="40px" pl="30px" fs="13px" fw="800">
펀딩에 참여한 사람
</P>
<P pt="40px" pr="30px" fs="13px" fw="800">
11명
</P>
</BetweenDiv>
<BetweenDiv>
<P pt="20px" pl="30px" fs="13px" fw="800">
선물을 받은 사람
</P>
<P pt="20px" pr="30px" fs="13px" fw="800">
11명
</P>
</BetweenDiv>
<BetweenDiv>
<P pt="20px" pl="30px" fs="13px" fw="800">
모인 펀딩 금액
</P>
<P pt="20px" pr="30px" fs="13px" fw="800">
{detailData.currentAmount}원
</P>
</BetweenDiv>
</TogetherDiv>
<Button
onClick={() => navigate("/fundingpay")}
mt="30px"
w="442px"
h="60px"
color="black"
fs="19px"
bc="orange"
>
선물하기
</Button>
</Body>
</RightContainer>
</MainContainer>
);
};
export default FundingDetail;import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom'; // React Router에서 네비게이션 기능을 사용하기 위한 hook
import { useParams } from 'react-router-dom'; // React Router에서 URL 매개변수를 가져오기 위한 hook
import Navbar from '../../../components/Navbar'; // 추가된 코드
import { useDispatch, useSelector } from 'react-redux'; // 추가된 코드
import { userLogout } from '../../../redux/authSlice'; // 추가된 코드
import { updateFundingModify } from '../../../api/api'; // 펀딩 수정 API를 호출하기 위한 함수 import
import { deleteFundingModify } from '../../../api/api'; // 펀딩 수정 API를 호출하기 위한 함수 import
import { FundingModifyGet } from '../../../api/api'; // 펀딩 상세 정보를 가져오기 위한 함수 import
import { completeFundingModify } from '../../../api/api'; // 펀딩 상세 정보를 가져오기 위한 함수 import
// import ModifyModal from './ModifyModal'; // 이미지 선택 모달 컴포넌트 import
import {
MainContainer,
LeftContainer,
Logo,
P,
Button,
NavbarDiv,
RightContainer,
InputTag,
Body,
FundingDiv,
SponsorDiv,
RadioInput,
SponsorComment,
FundingImg,
// ImgText,
TogetherDiv,
} from './FundingModifyStyles'; // 스타일 컴포넌트 import
// 펀딩 수정 페이지 컴포넌트
const FundingModify = () => {
const navigate = useNavigate(); // React Router의 네비게이션 기능을 사용하기 위한 hook
const { id } = useParams(); // URL 매개변수(id)를 가져옴
const isLoggedIn = useSelector((state) => state.auth.isLoggedIn); // 추가된 코드
const dispatch = useDispatch(); // 추가된 코드
// 펀딩 데이터 상태와 상태 설정 함수 초기화
const [fundingData, setFundingData] = useState({
itemName: '',
showName: '',
title: '',
content: '',
targetAmount: 0,
publicFlag: '',
endDate: '',
itemImage: '',
});
// 추가된 코드
const handleLogoutClick = () => {
dispatch(userLogout()); // 로그아웃 액션 디스패치
navigate('/');
};
// const [isFundingModalOpen, setIsFundingModalOpen] = useState(false); // 모달 창의 열림 여부 상태 변수
// 펀딩 이미지를 클릭하여 모달을 열고 이미지를 설정하는 함수
// const handleFundingModalClick = (e) => {
// setIsFundingModalOpen(true);
// };
// 모달을 닫는 함수
// const closeModal = () => {
// setIsFundingModalOpen(false);
// // setItemImage(''); // 이미지 상태를 초기화하여 이미지를 숨김
// };
// 모달 내에서 이미지를 선택하고 설정하는 함수
// const handleImageSelection = (itemImage) => {
// setFundingData(itemImage);
// setIsFundingModalOpen(false); // 이미지 선택 후 모달 닫기
// };
useEffect(() => {
// API를 호출하여 펀딩 상세 정보를 가져오는 함수 정의
const fetchData = async () => {
try {
if (!id) {
// 유효한 id가 없으면 데이터를 요청하지 않음
return;
}
const data = await FundingModifyGet(id); // 펀딩 상세 정보 가져오기
setFundingData(data); // 가져온 데이터를 상태 변수에 설정
console.log('펀딩상세 가져오기 성공', data);
} catch (error) {
console.error('펀딩상세 가져오기 오류:', error);
}
};
// 컴포넌트가 마운트될 때 API 호출 함수 실행
fetchData();
}, [id]); // 빈 배열을 전달하여 한 번만 실행하도록 설정
// 펀딩 수정 요청 함수
const handlefundingModifyClick = async () => {
try {
if (
fundingData.publicFlag === '' ||
fundingData.showName === '' ||
fundingData.title === '' ||
fundingData.content === ''
) {
alert('내용을 입력해주세요');
return;
}
const data = await updateFundingModify(id, fundingData); // 펀딩 수정 API 호출
// setFundingData(fundingData.map((data) => {
// if (data.id === id) {
// return { ...data, fundingData };
// } else {
// return data;
// }
// }))
console.log('펀딩 수정 성공:', data);
navigate(`/fundingdetail/${data.id}`); // 펀딩 상세 페이지로 이동
} catch (error) {
if (error.response) {
const statusCode = error.response.status;
const errorMessage = error.response.data.message;
if (statusCode === 400) {
alert('펀딩 수정 실패 :', errorMessage);
}
}
}
};
const handledeleteFundingClick = async () => {
try {
const confirmDelete = window.confirm('정말 삭제하시겠습니까?');
if (!confirmDelete) return;
await deleteFundingModify(id, fundingData);
console.log('펀딩 삭제 성공:', id);
navigate(`/`);
// if (id) {
// alert('정말 삭제하시겠습니까?');
// return;
// }
// const data = await deleteFundingModify(id, fundingData);
// const data = await deleteFundingModify(id);
// setFundingData(
// fundingData.filter((data) => {
// return data.id !== id;
// })
// );
// console.log('펀딩 삭제 성공:', data);
// navigate(`/`);
} catch (error) {
console.error('펀딩 삭제 실패:', error);
// 에러 핸들링
}
};
const handlecompleteFundingClick = async () => {
try {
if (!id) {
// 유효한 id가 없으면 데이터를 요청하지 않음
return;
}
const data = await completeFundingModify(id); // 펀딩 상세 정보 가져오기
setFundingData(data); // 가져온 데이터를 상태 변수에 설정
console.log('펀딩 종료 성공', data);
navigate(`/`);
} catch (error) {
console.error('펀딩 종료 오류:', error);
}
};
// UI 렌더링
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>
{/* 펀딩 시작하기 버튼 */}
<Button onClick={() => navigate('/')} mt="20px" w="180px" h="50px" fs="16px" color="white" bc="orange">
펀딩 시작하기
</Button>
</LeftContainer>
{/* 오른쪽 컨테이너 */}
<RightContainer>
{/* 추가된 코드 */}
<NavbarDiv>
<Navbar isLoggedIn={isLoggedIn} handleLogoutClick={handleLogoutClick} />
</NavbarDiv>
{/* 펀딩 수정 내용 입력 부분 */}
<Body>
{/* 펀딩 상품 정보 입력 및 이미지 변경 */}
<FundingDiv>
{/* 펀딩 페이지에 노출되는 상품명 및 이미지 변경 버튼 */}
<P pb="10px" fs="16px" fw="900">
펀딩 수정페이지
</P>
<P pb="20px" fs="10px" fw="900">
펀딩페이지의 상품명, 가격, 이미지는 변경할 수 없습니다.
</P>
<SponsorDiv>
{/* <SponsorComment pointer="pointer" onClick={handleFundingModalClick}> */}
{/* <FundingImg onClick={handleFundingModalClick} src={fundingData.itemImage} alt="logo"/> */}
<FundingImg src={fundingData.itemImage} alt="logo" />
{/* <ImgText>이미지 변경</ImgText> */}
{/* </SponsorComment> */}
<SponsorComment mt="10px">
<div>
<InputTag
type="text"
placeholder="상품명을 입력해주세요"
value={fundingData.itemName}
// onChange={(e) => {
// setFundingData({ ...fundingData, itemName: e.target.value });
// }}
h="40px"
w="92%"
ml="10px"
mb="10px"
pl="10px"
/>
<InputTag
type="text"
placeholder="가격을 입력해주세요"
value={fundingData.targetAmount}
// onChange={(e) => {
// setFundingData({ ...fundingData, targetAmount: e.target.value });
// }}
h="40px"
w="92%"
ml="10px"
pl="10px"
/>
</div>
</SponsorComment>
{/* 모달 컴포넌트 표시 여부 확인 후 표시 */}
{/* {isFundingModalOpen && (
<ModifyModal closeModal={closeModal} handleImageSelection={handleImageSelection} />
)} */}
</SponsorDiv>
{/* 펀딩 내용 및 공개 여부 입력 부분 */}
<SponsorDiv>
<SponsorComment mt="50px">
<P pb="10px" fs="16px" fw="900">
펀딩 내용
</P>
<P pb="20px" fs="13px" fw="900">
공개 방식
</P>
<SponsorDiv>
<RadioInput
value="true"
checked={fundingData.publicFlag === "true"}
onChange={(e) => {
setFundingData({ ...fundingData, publicFlag: e.target.value });
}}
type="radio"
mb="21px"
/>
<P pb="20px" fs="13px" fw="900" pl="20px">
공개
</P>
<P pb="20px" fs="10px" fw="900" pl="42px">
누구나 볼 수 있어요
</P>
</SponsorDiv>
<SponsorDiv>
<RadioInput
value="false"
checked={fundingData.publicFlag === "false"}
onChange={(e) => {
setFundingData({ ...fundingData, publicFlag: e.target.value });
}}
type="radio"
mb="21px"
/>
<P pb="20px" fs="13px" fw="900" pl="20px">
비공개
</P>
<P pb="20px" fs="10px" fw="900" pl="30px">
링크를 통해서만 방문할 수 있어요
</P>
</SponsorDiv>
</SponsorComment>
</SponsorDiv>
<P pt="30px" pb="5px" fs="13px" fw="800">
이름
</P>
<InputTag
type="text"
placeholder="이름을 입력해주세요"
value={fundingData.showName}
onChange={(e) => {
setFundingData({ ...fundingData, showName: e.target.value });
}}
h="40px"
w="97%"
mb="10px"
pl="10px"
/>
<P pt="10px" pb="5px" fs="13px" fw="800">
제목
</P>
<InputTag
type="text"
placeholder="제목을 입력해주세요"
value={fundingData.title}
onChange={(e) => {
setFundingData({ ...fundingData, title: e.target.value });
}}
h="40px"
w="97%"
mb="10px"
pl="10px"
/>
<P pt="10px" pb="5px" fs="13px" fw="800">
본문
</P>
<InputTag
type="text"
placeholder="본문을 입력해주세요"
value={fundingData.content}
onChange={(e) => {
setFundingData({ ...fundingData, content: e.target.value });
}}
h="90px"
w="97%"
mb="10px"
pl="10px"
pb="50px"
/>
<P pt="10px" pb="5px" fs="13px" fw="800">
마감일 설정
</P>
<InputTag
type="date"
value={fundingData.endDate}
// onChange={(e) => {
// setFundingData({ ...fundingData, endDate: e.target.value });
// }}
h="40px"
w="97%"
pl="10px"
pt="10px"
/>
</FundingDiv>
{/* 펀딩 안내 문구 */}
<TogetherDiv>
<P pl="130px" fs="14px" fw="800">
펀딩 금액은 계좌로 전달돼요
</P>
<P pl="95px" fs="14px" fw="800">
펀딩에 성공하면 카톡으로 알림이 가요
</P>
</TogetherDiv>
{/* 펀딩 변경하기 및 펀딩 종료하기 버튼 */}
<Button
onClick={handlefundingModifyClick}
w="442px"
h="60px"
mt="10px"
color="white"
fs="19px"
bc="gray"
>
펀딩 변경하기
</Button>
<Button
onClick={handlecompleteFundingClick}
w="442px"
h="60px"
mt="10px"
color="white"
fs="19px"
bc="orange"
>
펀딩 종료하기
</Button>
<Button
onClick={handledeleteFundingClick}
w="442px"
h="60px"
mt="10px"
color="white"
fs="19px"
bc="red"
>
펀딩 삭제하기
</Button>
</Body>
</RightContainer>
</MainContainer>
);
};
export default FundingModify;import React from 'react';
import { useNavigate } from 'react-router-dom';
import {
MainContainer,
LeftContainer,
Logo,
P,
Button,
RightContainer,
SponserMoney,
InputTag,
Body,
FundingDiv,
SponserDiv,
SponserComment,
SponsorImg,
TogetherDiv,
} from './FundingPayStyles';
import CheckBox from '../FundingPay/CheckBox/CheckBox';
import KakaoPay from './KakaoPay/KakaoPay';
const FundingPay = () => {
const navigate = useNavigate();
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>
<Button onClick={() => navigate('/')} mt="20px" w="180px" h="50px" fs="16px" color="white" bc="orange">
펀딩 시작하기
</Button>
</LeftContainer>
<RightContainer>
<Body>
<FundingDiv>
<SponserMoney>
<SponsorImg src="/imgs/junjihyun.jpg" alt="logo" />
<P pt="10px" fs="16px" fw="800" pb="5px">
윤다인 님에게
</P>
<P fs="16px" fw="800" pb="5px">
5,000원
</P>
<P fs="16px" fw="800">
후원하기
</P>
</SponserMoney>
<P pt="20px" pb="20px" fs="16px" fw="900">
후원자
</P>
<SponserDiv>
<SponserComment mt="10px">
<P pl="10px" pb="5px" fs="13px" fw="800">
이름
</P>
<InputTag type="text" placeholder="남길 이름을 입력해주세요" h="40px" />
<P pl="10px" fs="10px" fw="800">
주최자에게 이름이 모두 공개되고, 후원자 목록에는 두번째 글자부터 *으로 표시됩니다.
예) 김 * *
</P>
</SponserComment>
</SponserDiv>
<P pt="10px" pl="10px" pb="5px" fs="13px" fw="800">
후원금
</P>
<InputTag type="text" placeholder="남길 이름을 입력해주세요" h="40px" />
<P pt="10px" pl="10px" pb="5px" fs="13px" fw="800">
메시지
</P>
<InputTag type="text" placeholder="남길 메시지를 입력해주세요" pb="50px" h="100px" />
<P pl="10px" fs="10px" fw="800">
현재는 테스트 기간으로, 실제 결제가 이루어지지 않습니다. 대신 1명이 참여할 때마다 개설자에게
1,000원이 적립됩니다.
</P>
</FundingDiv>
<CheckBox />
<TogetherDiv pt="10px" bc="orange">
<P pl="140px" fs="14px" fw="800">
<br />
지금 선물하면 3등이에요!
<br />
</P>
</TogetherDiv>
<KakaoPay />
</Body>
</RightContainer>
</MainContainer>
);
};
export default FundingPay;import React, { useEffect } from "react"; // React와 useEffect 훅을 React 라이브러리에서 불러옵니다.
import axios from "axios"; // HTTP 요청을 보내기 위해 axios를 가져옵니다.
import { Button, KakaoPayLogo } from "./KakaoPayStyles";
const KakaoPay = () => {
// KakaoPay라는 함수형 컴포넌트를 정의합니다.
const sendAmountToServer = async (amount) => {
// 서버로 금액을 전송하는 비동기 함수를 정의합니다.
const accessToken = localStorage.getItem("accessToken"); // localStorage에서 accessToken을 가져옵니다.
try {
const response = await axios.post(
"REACT_APP_API_URL",
{
// 서버로 POST 요청을 보냅니다.
point: amount, // 요청 본문에 금액을 담습니다.
},
{
headers: {
Authorization: accessToken, // 요청 헤더에 accessToken을 포함시킵니다.
},
}
);
if (response.status === 200) {
// 요청이 성공했는지 확인합니다.
alert("서버로 amount 전송 완료"); // 서버로의 전송이 성공한 경우 알림창을 띄웁니다.
} else {
alert("서버로 amount 전송 실패"); // 서버로의 전송이 실패한 경우 알림창을 띄웁니다.
}
} catch (error) {
console.error("서버로 amount 전송 중 오류:", error); // 전송 중 오류가 발생한 경우 콘솔에 오류를 기록합니다.
alert("서버로 amount 전송 중 오류 발생"); // 전송 중 오류가 발생한 경우 알림창을 띄웁니다.
}
};
const requestPay = () => {
// 결제 요청을 처리하는 함수를 정의합니다.
const { IMP } = window; // window 객체에서 IMP 객체를 가져옵니다.
IMP.init("imp82385247"); // IMP 객체를 초기화합니다.
IMP.request_pay(
{
// IMP 객체를 사용하여 결제 요청을 보냅니다.
pg: "kakaopay.TC0ONETIME", // 결제 수단을 설정합니다.
pay_method: "card", // 결제 방법을 설정합니다.
merchant_uid: new Date().getTime(), // 고유한 상점 ID를 생성합니다.
name: "Giftipie후원금", // 상품 이름을 설정합니다.
amount: 10000, // 결제 금액을 설정합니다.
buyer_email: "test@naver.com", // 구매자 이메일을 설정합니다.
buyer_name: "코드쿡", // 구매자 이름을 설정합니다.
buyer_tel: "010-1234-5678", // 구매자 전화번호를 설정합니다.
// buyer_addr: '서울특별시', // 구매자 주소를 설정합니다.
// buyer_postcode: '123-456', // 구매자 우편번호를 설정합니다.
},
async (rsp) => {
// 결제 요청 후 콜백 함수를 처리합니다.
try {
const { data } = await axios.post("REACT_APP_API_URL" + rsp.imp_uid); // 서버에서 결제 검증을 수행합니다.
if (rsp.paid_amount === data.response.amount) {
// 결제 금액이 서버 응답과 일치하는지 확인합니다.
alert("결제 성공"); // 결제가 성공한 경우 알림창을 띄웁니다.
sendAmountToServer(rsp.paid_amount); // 결제된 금액을 서버로 전송합니다.
} else {
alert("결제 실패"); // 결제가 실패한 경우 알림창을 띄웁니다.
}
} catch (error) {
console.error("결제 검증 중 오류:", error); // 결제 검증 중 오류가 발생한 경우 콘솔에 오류를 기록합니다.
alert("결제 실패"); // 결제 검증 중 오류가 발생한 경우 알림창을 띄웁니다.
}
}
);
};
useEffect(() => {
// 외부 스크립트를 로드하기 위해 useEffect 훅을 사용합니다.
const jquery = document.createElement("script"); // jQuery 스크립트 엘리먼트를 생성합니다.
jquery.src = "http://code.jquery.com/jquery-1.12.4.min.js"; // jQuery 스크립트의 소스를 설정합니다.
const iamport = document.createElement("script"); // Iamport 스크립트 엘리먼트를 생성합니다.
iamport.src = "http://cdn.iamport.kr/js/iamport.payment-1.1.7.js"; // Iamport 스크립트의 소스를 설정합니다.
document.head.appendChild(jquery); // jQuery 스크립트를 문서 헤드에 추가합니다.
document.head.appendChild(iamport); // Iamport 스크립트를 문서 헤드에 추가합니다.
return () => {
// 컴포넌트가 언마운트될 때 추가한 스크립트를 제거하기 위한 클린업 함수를 반환합니다.
document.head.removeChild(jquery); // 문서 헤드에서 jQuery 스크립트를 제거합니다.
document.head.removeChild(iamport); // 문서 헤드에서 Iamport 스크립트를 제거합니다.
};
}, []); // useEffect가 초기 렌더링 후 한 번만 실행되도록 빈 의존성 배열을 전달합니다.
return (
<div>
{/* <button onClick={requestPay}>결제하기</button> */}
<Button onClick={requestPay}>
<KakaoPayLogo src="/imgs/kakaopay.png" alt="image" />
</Button>
</div>
);
};
export default KakaoPay; // Payment 컴포넌트를 내보냅니다.