api post, get, patch 기능 구현

import axios from "axios";
import Cookies from "js-cookie";

export const instance = axios.create({
  baseURL: process.env.REACT_APP_API_URL,
  withCredentials: true, // 쿠키 전송을 위한 옵션
});

// 토큰을 쿠키에 저장하는 함수
const saveTokensToCookies = (accessToken, refreshToken) => {
  // 쿠키에 저장하는 로직 구현
  Cookies.set("accessToken", accessToken, { path: "/" });
  Cookies.set("refreshToken", refreshToken, { path: "/" });
};

// Axios 인터셉터를 사용하여 요청을 변경하는 함수
instance.interceptors.request.use((config) => {
  const accessToken = Cookies.get("accessToken");

  if (accessToken) {
    config.headers.Authorization = `Bearer ${accessToken}`;
  }

  return config;
});

// 회원가입 API
export const signupUser = async (userData) => {
  try {
    const response = await instance.post("/api/signup", userData);
    return response.data;
  } catch (error) {
    console.error("회원가입 오류:", error);
    if (error.response) {
      const { status } = error.response;
      const errorMessages = {
        401: "이미 존재하는 사용자입니다.",
        404: "이메일 또는 비밀번호가 존재하지 않습니다.",
      };
      const errorMessage =
        errorMessages[status] || "알 수 없는 오류가 발생했습니다.";
      throw new Error(errorMessage);
    } else {
      throw error;
    }
  }
};

// 로그인 API
export const loginUser = async (credentials) => {
  try {
    const response = await instance.post("/api/login", credentials);
    const { accessToken, user } = response.data;
    console.log('sp')
    // 로그인 성공 시 토큰을 저장
    saveTokensToCookies(accessToken);
    return user;
  } catch (error) {
    console.error("로그인 오류:", error);
    if (error.response) {
      const { status } = error.response;
      const errorMessages = {
        401: "이메일 또는 비밀번호가 일치하지 않습니다.",
        404: "사용자를 찾을 수 없습니다.",
      };
      const errorMessage =
        errorMessages[status] || "알 수 없는 오류가 발생했습니다.";
      throw new Error(errorMessage);
    } else {
      throw error;
    }
  }
};

// 펀딩 생성페이지 API
export const fundingCreate = async (fundingData) => {
  try {
    // API 호출
    const response = await instance.post("/api/funding/create", fundingData);
    // API 호출 결과 반환
    return response.data;
  } catch (error) {
    throw error; // 실패 시 예외를 던지거나, 다른 처리를 수행할 수 있음
  }
};

// 펀딩 생성페이지 모달창(ItemLink) API
export const modalItemLink = async (LinkData) => {
  try {
    // API 호출
    const response = await instance.post("/api/funding/addLink", LinkData);
    // API 호출 결과 반환
    return response.data;
  } catch (error) {
    throw error; // 실패 시 예외를 던지거나, 다른 처리를 수행할 수 있음
  }
};

// 펀딩 상세페이지 
// export const fundingDetail = async () => {
//   try {
//     // API 호출
//     const response = await instance.get(`/api/funding/${fundingId}`);
//     // API 호출 결과 반환
//     return response.data;
//   } catch (error) {
//     // throw error; // 실패 시 예외를 던지거나, 다른 처리를 수행할 수 있음
//   }
  
  // 펀딩 상세페이지의 모든 데이터를 불러오는 API
export const fetchFundingDetail = async (fundingId) => {
  try {
    const response = await instance.get(`/api/funding/${fundingId}`);
    return response.data;
  } catch (error) {
    // 실패 시 예외 처리
    console.error("펀딩 상세페이지 API 호출 오류:", error);
    throw error; // 에러 다시 throw 또는 다른 적절한 처리를 수행
  }
};

  // 펀딩 수정페이지 API
export const fundingModify = async (fundingId) => {
  try {
    const response = await instance.patch(`/api/funding/${fundingId}`);
    return response.data;
  } catch (error) {
    // 실패 시 예외 처리
    console.error("펀딩 상세페이지 API 호출 오류:", error);
    throw error; // 에러 다시 throw 또는 다른 적절한 처리를 수행
  }
};

import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import {
    MainContainer,
    LeftContainer,
    Logo,
    P,
    Button,
    RightContainer,
    Navbar,
    NavbarBtn,
    ProducImgtDiv,
    InputTag,
    FundingImg,
    PlusImg,
    Body,
    FundingDiv,
    SponserDiv,
    RadioInput,
    SponserComment,
    TogetherDiv,
} from './FundingCreateStyles';
import Modal from './Modal/Modal';
import { fundingCreate } from '../../../api/api';

const FundingCreate = () => {
    const navigate = useNavigate();
    const [itemName, setItemName] = useState('');
    const [showName, setShowName] = useState('');
    const [title, setTitle] = useState('');
    const [content, setContent] = useState('');
    const [targetAmount, setTargetAmount] = useState('');
    const [publicFlag, setPublicFlag] = useState('');
    const [endDate, setEndDate] = useState('');
    const [isFundingModalOpen, setIsFundingModalOpen] = useState(false);

    const handleFundingModalClick = () => {
        setIsFundingModalOpen(true);
    };

    const closeModal = () => {
        setIsFundingModalOpen(false);
    };


    const handleItemNameChange = (e) => {
        setItemName(e.target.value);
    };

    const handleTargetAmountChange = (e) => {
        setTargetAmount(e.target.value);
    };

    const handleShowNameChange = (e) => {
        setShowName(e.target.value);
    };

    const handleTitleChange = (e) => {
        setTitle(e.target.value);
    };

    const handleContentChange = (e) => {
        setContent(e.target.value);
    };

    const handleEndDateChange = (e) => {
        setEndDate(e.target.value);
    };

    const handlePublicFlagChange = (e) => {
        // 업데이트: 한 번에 하나의 옵션만 선택했는지 확인하세요.
        const value = e.target.value === 'true' ? true : false;
        setPublicFlag(value.toString());
    };

    const handleFundingClick = async () => {
        try {
            const fundingData = await fundingCreate({
                itemName,
                showName,
                title,
                content,
                targetAmount,
                publicFlag,
                endDate,
            });
            console.log('펀딩 생성 성공:', fundingData);
            // 성공 시 처리: 새 페이지로 이동하거나 성공 메시지 표시 등
            navigate('/fundingdetail');
        } catch (error) {
            console.error('펀딩 생성 오류:', error);
            // 실패 시 처리: 사용자에게 오류 메시지 표시 등
        }
    };

    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>
                <Navbar>
                    <NavbarBtn onClick={() => navigate('/fundingmodify')} fs="15px" fw="800" pl="15px">
                        😉 펀딩 수정페이지로 이동
                    </NavbarBtn>
                </Navbar>

                <Body>
                    <FundingDiv>
                        <P pb="10px" fs="16px" fw="900">
                            펀딩 제품
                        </P>
                        <P pb="20px" fs="10px" fw="900">
                            펀딩 페이지에 상품명과 이미지가 노출돼요.
                        </P>

                        <ProducImgtDiv>
                            <FundingImg
                                onClick={handleFundingModalClick}
                                htmlfor="file-input"
                                h="90px"
                                w="90px"
                            >
                                <PlusImg src="/imgs/plus.png" />
                            </FundingImg>
                            <div>
                                <InputTag
                                    type="text"
                                    value={itemName}
                                    onChange={handleItemNameChange}
                                    placeholder="상품명을 입력해주세요"
                                    h="40px"
                                    w="97%"
                                    ml="10px"
                                    mb="10px"
                                    pl="10px"
                                />
                                <InputTag
                                    type="text"
                                    value={targetAmount}
                                    onChange={handleTargetAmountChange}
                                    placeholder="가격을 입력해주세요"
                                    h="40px"
                                    w="97%"
                                    ml="10px"
                                    pl="10px"
                                />
                            </div>
                        </ProducImgtDiv>
                        {/* {modal === true ? <Modal /> : null} */}
                        {isFundingModalOpen && <Modal closeModal={closeModal} />}
                        <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={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={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={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={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={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={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>
                </Body>
            </RightContainer>
        </MainContainer>
    );
};

export default FundingCreate;

import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Container, Background, P, ModalBox, ModalInput, ModalButton } from './ModalStyles';
import { modalItemLink } from '../../../../api/api';

function Modal({ closeModal }) {
    const navigate = useNavigate();
    const [itemLink, setItemLink] = useState('');

    const handleItemLinkChange = (e) => {
        setItemLink(e.target.value);
    };

    const handleModalButtonClick = async () => {
        try {
            const LinkData = await modalItemLink({
                itemLink,
            });
            console.log('펀딩 생성 성공:', LinkData);
            // 성공 시 처리: 새 페이지로 이동하거나 성공 메시지 표시 등
            navigate('/fundingcreate');
        } catch (error) {
            console.error('펀딩 생성 오류:', error);
            // 실패 시 처리: 사용자에게 오류 메시지 표시 등
        }
    };

    return (
        <Container>
                <Background onClick={() => closeModal()}>
                    <ModalBox>
                        <button onClick={() => closeModal()}>X</button>
                        <P>상품 링크</P>
                        <ModalInput
                            type="text"
                            value={itemLink}
                            onChange={handleItemLinkChange}
                            placeholder="상품 링크를 입력해주세요"
                        ></ModalInput>
                        <ModalButton onClick={handleModalButtonClick}>등록하기</ModalButton>
                    </ModalBox>
                </Background>
        </Container>
    );
}

export default Modal;

import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { fetchFundingDetail } from '../../../api/api'
import {
    MainContainer,
    LeftContainer,
    Logo,
    P,
    Button,
    RightContainer,
    Navbar,
    NavbarBtn,
    NavbarBtnDiv,
    Body,
    BannerImg,
    FundingDiv,
    SponserDiv,
    SponserComment,
    SponsorImg,
    ProgressBar,
    Progress,
    BetweenDiv,
    TogetherDiv,
} from './FundingDetailStyles';

const FundingDetail = () => {
    const navigate = useNavigate();

    const [detailData, setDetailData] = useState({
        fundingid: 1,
        itemLink: 'https://www.naver.com',
        itemImage: '신발',
        title: '인생 첫 에어팟을 선물해주세요 😘', // 펀딩 제목
        content: '본문 내용 블라블라~ 😘😘😘', // 본문 내용
        currentAmount: 210500, // 현재 금액
        targetAmount: 300000, // 목표 금액
        publicFlag: false,
        endDate: '2024-02-01', // 2월 1일 23:59 마감
        dDay: 'D-5', // 디데이
        status: false, // (펀딩 상태)
        achievementRate: 70, // 달성률%
        ownerFlag: true, // (작성자 확인)
        modifiedAt: '2024-02-02', // (수정 날짜)
        showName: '윤다인', // 보여줄 이름
    });

    // const [detailData, setDetailData] = useState({
    //     // 초기 상태를 명세서에 따라 설정
    //     fundingid: 0,
    //     itemLink: '',
    //     itemImage: '',
    //     title: '',
    //     content: '',
    //     currentAmount: 0,
    //     targetAmount: 0,
    //     publicFlag: false,
    //     endDate: '',
    //     dDay: '',
    //     status: false,
    //     achievementRate: 0,
    //     ownerFlag: false,
    //     modifiedAt: '',
    //     showName: '',
    // });

    useEffect(() => {
        // API 호출 함수를 정의
        const fetchData = async () => {
            try {
                // 펀딩 ID를 적절하게 설정 (예: 1)
                const fundingId = 1;
                const data = await fetchFundingDetail(fundingId);
                setDetailData(data);
            } catch (error) {
                // API 호출 실패 시 에러 처리
                console.error('API 호출 오류:', error);
            }
        };

        // 컴포넌트가 마운트될 때 API 호출
        fetchData();
    }, []); // 두 번째 매개변수로 빈 배열을 전달하여 한 번만 호출하도록 설정

    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>
                <Navbar>
                    <NavbarBtn onClick={() => navigate('/')} fs="20px" fw="800" pl="15px">
                        😉 Giftipie
                    </NavbarBtn>
                    <NavbarBtnDiv pr="15px">
                        <NavbarBtn fs="13px" fw="600">
                            문의
                        </NavbarBtn>
                        <NavbarBtn fs="13px" fw="600">
                            로그인/회원가입
                        </NavbarBtn>
                    </NavbarBtnDiv>
                </Navbar>

                <Body>
                    <BannerImg src="/imgs/airpodspro2.jpg" alt="image" />
                    <FundingDiv>
                        <P pt="20px" fs="13px" fw="800">
                            진행중
                        </P>
                        <P pt="10px" fs="20px" fw="900">
                            {detailData.title}
                        </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.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>
                        <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">
                                    송**
                                </P>
                                <Button mt="5px" w="300px" h="40px" pr="90px" fs="13px" bc="violet">
                                    이게 뭐야 ㅋㅋㅋㅋ 생일 축하해ㅎ
                                </Button>
                            </SponserComment>
                        </SponserDiv>

                        <SponserDiv>
                            <SponsorImg src="/imgs/junjihyun.jpg" alt="img" />
                            <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>

                        <P onClick={() => navigate('/sponsor')} pt="40px" pl="160px" fs="14px" fw="800">
                            전체보기 ▶
                        </P>
                    </FundingDiv>

                    <FundingDiv>
                        <P pt="10px" fs="16px" fw="900">
                            펀딩 참여하기
                        </P>

                        <Button 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 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('/fundingcreate')} 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 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';
import { fundingModify } from '../../../api/api';
import {
    MainContainer,
    LeftContainer,
    Logo,
    P,
    Button,
    RightContainer,
    Navbar,
    NavbarBtn,
    ProducImgtDiv,
    InputTag,
    Body,
    FundingDiv,
    SponsorDiv,
    RadioInput,
    SponsorComment,
    FundingImg,
    TogetherDiv,
} from './FundingModifyStyles';

const FundingModify = () => {
    const navigate = useNavigate();

    // const [modifyData, setModifyData] = useState({
    //     // 초기 상태를 명세서에 따라 설정
    //     ItemName: '', // 상품이름
    //     showName: '', // 보여지는 이름
    //     title: '', // 펀딩 제목
    //     content: '', // 본문 내용
    //     targetAmount: 0, // 목표금액
    //     publicFlag: false, // true&false
    //     endDate: '', // 2024-02-01
    // });

    const [itemName, setItemName] = useState('');
    const [showName, setShowName] = useState('');
    const [title, setTitle] = useState('');
    const [content, setContent] = useState('');
    const [targetAmount, setTargetAmount] = useState('');
    const [publicFlag, setPublicFlag] = useState('');
    const [endDate, setEndDate] = useState('');

    // useEffect(() => {
    //     // API 호출 함수를 정의
    //     const fundingModifyData = async () => {
    //         try {
    //             // 펀딩 ID를 적절하게 설정 (예: 1)
    //             const fundingId = 1;
    //             const data = await fundingModify(fundingId);
    //             setModifyData(data);
    //         } catch (error) {
    //             // API 호출 실패 시 에러 처리
    //             console.error('API 호출 오류:', error);
    //         }
    //     };

    //     // 컴포넌트가 마운트될 때 API 호출
    //     fundingModifyData();
    // }, []);

    const handlePublicFlagChange = (e) => {
        // 업데이트: 한 번에 하나의 옵션만 선택했는지 확인하세요.
        const value = e.target.value === 'true' ? true : false;
        setPublicFlag(value.toString());
    };

    const handleModifyClick = async () => {
        try {
            const fundingData = await fundingModify({
                itemName,
                showName,
                title,
                content,
                targetAmount,
                publicFlag,
                endDate,
            });
            console.log('펀딩 생성 성공:', fundingData);
            // 성공 시 처리: 새 페이지로 이동하거나 성공 메시지 표시 등
            navigate('/fundingdetail');
        } catch (error) {
            console.error('펀딩 생성 오류:', error);
            // 실패 시 처리: 사용자에게 오류 메시지 표시 등
        }
    };

    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>
                <Navbar>
                    <NavbarBtn onClick={() => navigate('/fundingdetail')} fs="15px" fw="800" pl="15px">
                        😉 펀딩 상세페이지로 이동
                    </NavbarBtn>
                </Navbar>

                <Body>
                    <FundingDiv>
                        <P pb="10px" fs="16px" fw="900">
                            펀딩 제품
                        </P>
                        <P pb="20px" fs="10px" fw="900">
                            펀딩 페이지에 상품명과 이미지가 노출돼요.
                        </P>

                        <ProducImgtDiv></ProducImgtDiv>

                        <SponsorDiv>
                            <FundingImg src="/imgs/airpodspro.jpeg" alt="logo" />
                            <SponsorComment mt="10px">
                                <div>
                                    <InputTag
                                        type="text"
                                        placeholder="상품명을 입력해주세요"
                                        // onChange={(e) => {
                                        //     setItemName(e.target.value);
                                        // }}
                                        h="40px"
                                        w="92%"
                                        ml="10px"
                                        mb="10px"
                                        pl="10px"
                                    />
                                    <InputTag
                                        type="text"
                                        placeholder="가격을 입력해주세요"
                                        h="40px"
                                        w="92%"
                                        ml="10px"
                                        pl="10px"
                                    />
                                </div>
                            </SponsorComment>
                            {/* <SponsorComment mt="10px">
                                <Button w="70px" h="40px" color="white" fs="12px" fw="600" bc="gray" pb="5px">
                                    변경
                                </Button>
                                <Button w="70px" h="40px" mt="10px" color="white" fs="12px" fw="600" bc="gray">
                                    변경
                                </Button>
                            </SponsorComment> */}
                        </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={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>
                                </SponsorDiv>

                                <SponsorDiv>
                                    <RadioInput
                                        value="false"
                                        checked={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>
                                </SponsorDiv>
                            </SponsorComment>
                        </SponsorDiv>
                        <P pt="30px" pb="5px" fs="13px" fw="800">
                            이름
                        </P>
                        <InputTag type="text" placeholder="이름을 입력해주세요" h="40px" w="97%" mb="10px" pl="10px" />
                        <P pt="10px" pb="5px" fs="13px" fw="800">
                            제목
                        </P>
                        <InputTag type="text" placeholder="제목을 입력해주세요" h="40px" w="97%" mb="10px" pl="10px" />
                        <P pt="10px" pb="5px" fs="13px" fw="800">
                            본문
                        </P>
                        <InputTag
                            type="text"
                            placeholder="본문을 입력해주세요"
                            h="90px"
                            w="97%"
                            mb="10px"
                            pl="10px"
                            pb="50px"
                        />
                        <P pt="10px" pb="5px" fs="13px" fw="800">
                            마감일 설정
                        </P>
                        <InputTag type="date" 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={() => navigate('/fundingdetail')}
                        w="442px"
                        h="60px"
                        mt="10px"
                        color="white"
                        fs="19px"
                        bc="orange"
                    >
                        펀딩 종료하기
                    </Button>
                    <Button onClick={handleModifyClick} w="442px" h="60px" mt="10px" color="white" fs="19px" bc="gray">
                        펀딩 변경하기
                    </Button>
                </Body>
            </RightContainer>
        </MainContainer>
    );
};

export default FundingModify;