메인페이지 webkit-scrollbar 적용

import React, { useEffect, useState } from 'react';
import { FaChevronRight } from 'react-icons/fa';
import { FaPlus } from 'react-icons/fa6';
import { useNavigate } from 'react-router-dom';
import LoginModal from '../Home/Login/LoginModal';
import { useDispatch, useSelector } from 'react-redux';
import { bootChannelTalk } from '../../redux/channelTalkSlice';
import { userLogout } from '../../redux/authSlice';
import Navbar from '../../components/Navbar';
import { getHomeFundingList } from '../../apis/home';
// import { getKakaoResponse } from "../../apis/auth";
import {
    MainContainer,
    LeftContainer,
    Logo,
    P,
    Button,
    RightContainer,
    NavbarDiv,
    Body,
    MainDiv,
    MainTitle,
    MainFunding,
    MainImg,
    MainBtnContainer,
    CharacterImg,
    MainBtn,
    MainBtnLine,
    BannerImg,
    FundingDiv,
    FundingSection,
    EndingSection,
    FundingGrid,
    FundingImg,
    ProgressDivBar,
    RoundProgressBar,
    RoundProgress,
    ProgressDiv,
    ProgressBar,
    Progress,
    BetweenDiv,
    BetweenMainDiv,
    BannerProgressDiv,
    TogetherDiv,
    TogetherImg,
    TogetherGrids,
    TogetherGrid,
    ProductDiv,
    ProductGrids,
    ProductGrid,
    ProductImg,
    ProductBlank,
    Footer,
    FooterLine,
    FundingBtn,
    FloatingBtn,
} from './HomeStyles';

const Home = () => {
    const navigate = useNavigate();
    const dispatch = useDispatch();
    const isLoggedIn = useSelector((state) => state.auth.isLoggedIn);
    const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
    const [homeFundingList, setHomeFundingList] = useState([]);

    const closeModal = () => setIsLoginModalOpen(false);

    const handleLoginClick = () => setIsLoginModalOpen(true);

    const handleLogoutClick = () => {
        dispatch(userLogout()); // 로그아웃 액션 디스패치
        navigate('/');
    };

    const handleFundingClick = (id) => {
        navigate(`/fundingdetail/${id}`);
    };

    const handleOngoingFundingClick = () => navigate('/ongoingfunding');

    const handleFundingCreate = () => navigate('/fundingcreate');

    // const myFundingData = async () => {
    //   try {
    //     const response = await getMyFunding();

    //     if (response && response.status === 200) setMyFunding(response.data);
    //   } catch (error) {
    //     console.error("내 펀딩 정보를 가져오는 함수 호출 실패: ", error);
    //   }
    // };

    const homeFundingListData = async () => {
        try {
            const response = await getHomeFundingList();

            setHomeFundingList(response);
        } catch (error) {
            console.error('펀딩 리스트 정보를 가져오는 함수 호출 실패: ', error);
        }
    };

    useEffect(() => {
        dispatch(bootChannelTalk());
        // myFundingData();
        homeFundingListData();
    }, [dispatch]);

    // useEffect(() => {
    //   const kakaoResponseData = async () => {
    //     await getKakaoResponse();
    //   };

    //   kakaoResponseData();
    // }, [isLoggedIn]);

    const ProductGridComponent = ({ imgSrc, altText, brand, itemName, price }) => (
        <ProductGrid>
            <ProductImg src={imgSrc} alt={altText} />
            <P pt="8px" fs="12px" fw="600" color="gray">
                {brand}
            </P>
            <P pt="8px" fs="13px" fw="600">
                {itemName}
            </P>
            <P pt="8px" pb="20px" fs="13px" fw="900">
                {price}
            </P>
        </ProductGrid>
    );

    return (
        <MainContainer>
            <LeftContainer>
                <Logo>🥧 Giftipie</Logo>
                <P pt="100px" fs="16px" fw="800" pb="5px">
                    Vercel 배포 환경 테스트
                </P>
                <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>펀딩 시작하기</Button>
            </LeftContainer>

            <RightContainer>
                <NavbarDiv>
                    <Navbar
                        isLoggedIn={isLoggedIn}
                        handleLoginClick={handleLoginClick}
                        handleLogoutClick={handleLogoutClick}
                    />
                </NavbarDiv>

                <Body>
                    <TogetherDiv bc="#3F3F3F">
                        <BetweenDiv>
                            <P pt="45px" pl="50px" fs="17px" fw="800" color="#FFE6C1">
                                펀딩은 1개만
                                <br />
                                진행할 수 있어요
                            </P>
                            <CharacterImg src="/imgs/Character/giftipie-02.png" h="20px" />
                        </BetweenDiv>
                    </TogetherDiv>

                    <TogetherDiv bc="white">
                        <BetweenDiv pt="40px">
                            <P pt="20px" pl="23px" pb="10px" fs="16px" fw="900">
                                내 펀딩
                            </P>
                            <MainBtnContainer>
                                <MainBtn>링크 복사</MainBtn>
                                {/* <MainBtnLine /> */}
                                <MainBtn>수정</MainBtn>
                                {/* <MainBtnLine /> */}
                                <MainBtn color="#FF7C7C">삭제</MainBtn>
                            </MainBtnContainer>
                        </BetweenDiv>
                        <BetweenDiv>
                            <BannerImg src="/imgs/Product/airpods.jpeg" />
                            <BannerProgressDiv>
                                <P fs="11px" fw="800" color="gray">
                                    에어팟
                                </P>
                                <P pt="5px" fs="13px" fw="800">
                                    인생 첫 에어팟을 선물해주세요
                                </P>
                                <P pt="10px" fs="15px" fw="900" color="#FF7C7C">
                                    36%
                                </P>
                                <RoundProgressBar>
                                    <RoundProgress width={(65 / 100) * 100} />
                                </RoundProgressBar>
                                <BetweenDiv>
                                    <P pl="0px" fs="10px" fw="800" color="gray">
                                        현재&nbsp;852000원
                                    </P>
                                    <P fs="10px" fw="800" color="gray">
                                        5686000원
                                    </P>
                                </BetweenDiv>
                            </BannerProgressDiv>
                        </BetweenDiv>
                        <BetweenDiv>
                            <P pt="15px" pl="30px" fs="13px" fw="800" color="gray">
                                D-12
                            </P>
                            <P pt="15px" pr="30px" pb="20px" fs="13px" fw="800" color="gray">
                                2024-03-08
                            </P>
                        </BetweenDiv>
                    </TogetherDiv>

                    <TogetherDiv bc="white">
                        <FundingDiv>
                            <BetweenDiv>
                                <button onClick={handleOngoingFundingClick}>
                                    <P fs="16px" fw="900" pt="20px" pb="5px" pl="23px">
                                        지금 진행중인 펀딩 &nbsp;
                                        <FaChevronRight />
                                    </P>
                                </button>
                            </BetweenDiv>
                            <BetweenDiv>
                                <P fs="14px" fw="400" pl="29px" color="gray">
                                    비공개 펀딩은 이곳에 공개되지 않아요
                                </P>
                            </BetweenDiv>

                            <FundingSection>
                                {homeFundingList.map((funding) => (
                                    <FundingGrid key={funding.id} onClick={() => handleFundingClick(funding.id)}>
                                        <FundingImg src={funding.itemImage} alt={funding.itemName} />
                                        {/* <ProgressBar>
                                            <Progress width={(funding.achievementRate / 100) * 100} />
                                        </ProgressBar> */}
                                        <ProgressBar>
                                            <Progress width={(65 / 100) * 100} />
                                        </ProgressBar>
                                        <BetweenDiv>
                                            <P pt="2px" fs="13px" fw="800" color="orange">
                                                {funding.achievementRate}%
                                            </P>
                                        </BetweenDiv>

                                        <P pt="10px" fs="11px" fw="600" color="gray">
                                            {funding.itemName}
                                        </P>
                                        <P pt="10px" fs="14px" fw="600">
                                            {funding.content}
                                        </P>
                                    </FundingGrid>
                                ))}
                            </FundingSection>
                        </FundingDiv>
                    </TogetherDiv>

                    <TogetherDiv bc="white">
                        <FundingDiv>
                            <BetweenDiv>
                                <button onClick={handleOngoingFundingClick}>
                                    <P fs="16px" fw="900" pt="20px" pb="5px" pl="23px">
                                        종료된 펀딩 &nbsp;
                                        <FaChevronRight />
                                    </P>
                                </button>
                            </BetweenDiv>
                            <BetweenDiv>
                                <P fs="14px" fw="400" pl="29px" color="gray">
                                    비공개 펀딩은 이곳에 공개되지 않아요
                                </P>
                            </BetweenDiv>

                            <EndingSection>
                                {homeFundingList.map((funding) => (
                                    <FundingGrid key={funding.id} onClick={() => handleFundingClick(funding.id)}>
                                        <FundingImg src={funding.itemImage} alt={funding.itemName} />
                                        <ProgressBar>
                                            <Progress width={(65 / 100) * 100} />
                                        </ProgressBar>
                                        <BetweenDiv>
                                            <P pt="2px" fs="13px" fw="800" color="orange">
                                                {funding.achievementRate}%
                                            </P>
                                        </BetweenDiv>

                                        <P pt="10px" fs="11px" fw="600" color="gray">
                                            {funding.itemName}
                                        </P>
                                        <P pt="10px" fs="14px" fw="600">
                                            {funding.content}
                                        </P>
                                    </FundingGrid>
                                ))}
                            </EndingSection>
                        </FundingDiv>
                    </TogetherDiv>

                    <>
                        <P pt="40px" pb="40px" fs="18px" fw="600" color="white">
                            Giftipie에서 함께한 선물
                        </P>

                        <TogetherGrids>
                            <TogetherGrid>
                                <TogetherImg src="/imgs/Icon/hearthand.png" alt="hearthand" />
                                <P pt="10px" fs="14px" fw="400">
                                    &nbsp;&nbsp;&nbsp;펀딩에
                                    <br />
                                    참여한 사람
                                </P>
                                <P pt="10px" pb="10px" fs="14px" fw="700">
                                    13명
                                </P>
                            </TogetherGrid>
                            <TogetherGrid>
                                <TogetherImg src="/imgs/Icon/giftbox.png" alt="receive" />
                                <P fs="14px" fw="400">
                                    &nbsp; 선물을
                                    <br />
                                    받은 사람
                                </P>
                                <P pt="10px" pb="10px" fs="14px" fw="700">
                                    6명
                                </P>
                            </TogetherGrid>
                            <TogetherGrid>
                                <TogetherImg src="/imgs/Icon/fundingdonation.png" alt="amount" />
                                <P fs="14px" fw="400">
                                    &nbsp;&nbsp;&nbsp; 모인
                                    <br /> 펀딩 금액
                                </P>
                                <P pt="10px" pb="10px" fs="14px" fw="700">
                                    1억원
                                </P>
                            </TogetherGrid>
                        </TogetherGrids>
                    </>

                    <TogetherDiv bc="white">
                        <button>
                            <P fs="16px" fw="900" pt="20px" pb="5px" pl="23px">
                                추천 상품 &nbsp;
                                <FaChevronRight />
                            </P>
                        </button>
                        <ProductGrids>
                            <ProductGrid>
                                <ProductBlank />
                            </ProductGrid>
                            <ProductGridComponent
                                imgSrc="/imgs/Product/airpods.jpeg"
                                altText="iphone"
                                brand="Apple"
                                itemName="아이폰 15 256BG 자급제"
                                price="1,250,000원"
                            />

                            <ProductGridComponent
                                imgSrc="/imgs/Product/iphone15pro.jpeg"
                                altText="iphone"
                                brand="Apple"
                                itemName="아이폰 15 Pro 256BG 자급제"
                                price="1,550,000원"
                            />

                            <ProductGridComponent
                                imgSrc="/imgs/Product/tesla.jpeg"
                                altText="iphone"
                                brand="Apple"
                                itemName="아이폰 14 256BG 자급제"
                                price="1,090,000원"
                            />
                            <ProductGridComponent
                                imgSrc="/imgs/Product/iphone15pro.jpeg"
                                altText="iphone"
                                brand="Apple"
                                itemName="아이폰 14 256BG 자급제"
                                price="1,090,000원"
                            />
                            <ProductGridComponent
                                imgSrc="/imgs/Product/massage.jpeg"
                                altText="iphone"
                                brand="Apple"
                                itemName="아이폰 14 256BG 자급제"
                                price="1,090,000원"
                            />
                        </ProductGrids>
                    </TogetherDiv>
                </Body>

                <Footer>
                    <P fs="18px" fw="600" pt="30px" pb="10px" color="lightgray">
                        GiftiPie란?
                    </P>
                    <P fs="14px" color="dimgray" pb="4px">
                        커피 기프티콘 대신, 친구가 정말로 원하는 선물을
                    </P>
                    <P fs="14px" color="dimgray" pb="50px">
                        함께 모금해서 선물하는 서비스예요!
                    </P>

                    <Button
                        onClick={handleFundingCreate}
                        w="100%"
                        h="60px"
                        color="black"
                        fs="20px"
                        bc="#FF7C7C"
                        as={FloatingBtn} // FloatingButton 스타일을 적용
                    >
                        <FaPlus />
                        &nbsp; 펀딩 만들기
                    </Button>
                </Footer>
            </RightContainer>

            {/* 로그인 모달 */}
            {isLoginModalOpen && <LoginModal closeModal={closeModal} />}
        </MainContainer>
    );
};

export default Home;

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; */
  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;
  margin-right: 100px;

  @media (max-width: 1024px) {
    display: none;
  }
`;

/* 로고 */
export const Logo = styled.h1`
  font-size: 30px;
  font-weight: 700;
  color: white;
`;

/* 다용도 P 태그 */
export const P = styled.p`
/* display: flex; */
  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};
  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};
  /* width: 200px; */
  /* height: 50px; */
  padding: 10px;
  background-color: ${(props) => props.bc};
  /* background-color: orange; */
  border-radius: 7px;
  color: ${(props) => props.color};
  /* color: white; */
  font-size: ${(props) => props.fs};
  /* font-size: 15px; */
  font-weight: 600;
  margin-top: ${(props) => props.mt};
  /* margin-top: 30px; */
  margin-bottom: ${(props) => props.mb};
  /* margin-bottom: 20px; */
  padding-left: ${(props) => props.pl};
  padding-right: ${(props) => props.pr};
  &:hover {
    color: white;
    background-color: #FF7C7C;
    cursor: pointer;
  }
`;

/* 오른쪽 컨테이너 */
export const RightContainer = styled.div`
  position: relative;
  width: -webkit-fill-available; /* 사용 가능한 너비로 채움 */
  max-width: 390px; /* 최대 너비를 390px로 제한 */
  margin: 0 auto; /* 가운데 정렬을 위해 margin을 auto로 설정 */
  /* border: 1px solid lightgray; */
  height: 100vh;
  overflow-y: scroll;
  &::-webkit-scrollbar {
    display: none;
  }

  @media screen and (max-width: 390px) {
    max-width: 100%; /* 최대 너비를 100%로 설정하여 가득 차게 함 */
    /* width: 100%; */
  }
`;

/* 네브바 영역 */
export const NavbarDiv = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  /* height: 70px; */
   padding-left: 2px;
   padding-right: 10px;
`;

/* 네브바 버튼 영역 */
export const NavbarBtnDiv = styled.div`
  flex-direction: row;
  padding-right: ${(props) => props.pr};
`;

/* 네브바 버튼 */
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};
`;

export const NavbarIconContainer = styled.div`
  display: flex;
  align-items: center;
  gap: 10px;
`;

export const NavbarNotificationIconDiv = styled.div`
  font-size: 24px;
  cursor: pointer;
`;

export const NavbarIconDiv = styled.div`
  font-size: 24px;
  cursor: pointer;
`;

export const LoginIcon = styled.img`
  width: 25px;
  height: 25px;
  /* margin-top: 20px; */
`;

export const LogoDiv = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
`

export const LogoIcon = styled.img`
  height: 35px;
  margin-top: 10px;
`;

export const LogoTextIcon = styled.img`
  height: 25px;
  margin-left: 10px;
  margin-top: 10px;
`;

// 바디 영역
export const Body = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 442px;
  height: auto;
`;

export const MainDiv = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 95%;
  max-width: 442px;
  height: auto;
  background-color: #e9e9e9;
  border-radius: 10px;
`;

export const MainTitle = styled.div`
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 442px;
  height: auto;
`;

export const MainFunding = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 442px;
  height: auto;
`;

export const MainImg = styled.img`
  display: flex;
  width: 94%;
  max-width: 442px;
  height: 100%;
  max-height: 150px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  margin-top: 12px;
`;

export const ProgressDivBar = styled.div`
  width: 94%;
  height: 10px;
  background-color: #dedede;
  font-weight: 600;
  overflow: hidden;
`;

export const ProgressDiv = styled.div`
  width: ${(props) => props.width}%;
  height: 10px;
  padding: 0;
  text-align: center;
  background-color: orange;
  color: #111;
`;

export const BetweenMainDiv = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  max-width: 442px;
`;

export const MainBtnContainer = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  /* width: 100%; */
  /* max-width: px; */
  /* height: auto; */
  margin-right: 20px;
  /* padding-bottom: 10px; */
`;

export const MainBtn = styled.button`
  justify-content: center;
  align-items: center;
  /* width: 130px; */
  color: gray;
  font-size: 10px;
  color: ${(props) => props.color};
`;

export const FundingDiv = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 390px;
  height: auto;
  margin-bottom: 10px;
`;

export const FundingSection = styled.section`
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  width: 100%;
  height: 265px;
  gap: 10px;
  padding: 10px;
`;

export const EndingSection = styled.section`
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  width: 100%;
  height: 265px;
  gap: 10px;
  padding: 10px;
`;

export const FundingGrid = styled.div`
width: 100%;
  max-width: 110px;
  overflow: hidden;

  @media (max-width: 100px) {
    width: 100%;
  }
`;

export const CharacterImg = styled.img`
  width: 100px;
  margin: 20px;
`;

export const FundingImg = styled.img`
width: 100%;
  max-width: 110px;
  height: 100%;
  max-height: 110px;
  border: 2px solid #e9e9e9;
  margin-top: 10px;
`;

export const BannerImg = styled.img`
  width: 100%;
  max-width: 100px;
  height: 100%;
  max-height: 100px;
  border-radius: 20px;
  margin: 0px 20px 0px 25px;
  /* border: 2px solid #e9e9e9; */
  border: 0.3px solid lightgray;
  box-shadow: 0px 0.3px 0px 0.3px lightgray;
`;

export const ProgressBar = styled.div`
  width: 100%;
  max-width: 110px;
  height: 5px;
  background-color: #dedede;
  overflow: hidden;
  transform: translateY(-3px);
`;

export const Progress = styled.div`
  width: ${(props) => props.width}%;
  height: 5px;
  padding: 0;
  text-align: center;
  background-color: ${theme.primary};
  /* border-radius: 15px; // 추가 */
  color: #FF7C7C;
`;

export const BetweenDiv = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  max-width: 442px;
`;

export const TogetherDiv = styled.div`
//   display: flex;
//   flex-direction: column;
//   justify-content: center;
//   align-items: center;
  background-color: ${(props) => props.bc};
  border-radius: 30px;
  border: 0.3px solid lightgray;
  box-shadow: 0px 5px 0px 0px lightgray;
  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 TogetherImg = styled.img`
  width: 70px;
  height: 70px;
  margin-bottom: 10px;
`;

export const TogetherGrids = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 390px;
  margin-top: 10px;
  gap: 5px;
`;

/* 프로그레스바 관련 */
export const BannerProgressDiv = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: 40px;
  width: 100%;
  max-width: 250px;
`;

export const RoundProgressBar = styled.div`
  width: 100%;
  height: 11px;
  background-color: #dedede;
  border-radius: 12px;
  font-weight: 600;
`;

export const RoundProgress = styled.div`
  width: ${(props) => props.width}%;
  height: 11px;
  padding: 0;
  text-align: center;
  background-color: ${theme.primary};
  border-radius: 15px;
`;


export const TogetherGrid = styled.div`
  background-color: snow;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 115px;
  height: 130px;
  border-radius: 8px;
  margin-bottom: 50px;
  padding-bottom: 40px;
`;

export const ProductDiv = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 442px;
  height: 350px;
`;

export const ProductGrids = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 390px;
  gap: 10px;
  margin-right: 20px;

  overflow-x: scroll;

  &::-webkit-scrollbar {
    display: none;
  }
`;

export const ProductGrid = styled.div`
  width: 100%;
  max-width: 100px;

  @media (max-width: 110px) {
    width: 100%;
  }
`;

export const ProductImg = styled.img`
  width: 130px;
  height: 130px;
  border: 2px solid #e9e9e9;
  margin-top: 10px;

`;

export const ProductBlank = styled.div`
  width: 150px;
  height: 150px;
  background-color: white;
`;

export const FundingProductGrid = styled.div`
  width: 100%;
  max-width: 110px;
  /* overflow: hidden; */

  @media (max-width: 100px) {
    width: 100%;
  }
`;

export const FloatingBtn = styled.button`
  position: sticky;
  bottom: 10px;
  left: 85px;
  margin-bottom: 20px;
  width: 220px; /* 버튼의 너비 조정 */
  height: 50px; /* 버튼의 높이 조정 */
  border-radius: 25px; /* 버튼의 모양을 둥글게 만듭니다. */
  background-color: #ff7c7c; /* 버튼의 배경색을 지정합니다. */
  color: white; /* 버튼 텍스트의 색상을 지정합니다. */
  font-size: 16px; /* 버튼 텍스트의 크기를 지정합니다. */
  font-weight: bold; /* 버튼 텍스트의 굵기를 지정합니다. */
  border: none; /* 버튼의 테두리를 없앱니다. */
  cursor: pointer; /* 버튼에 마우스를 올리면 커서를 포인터로 변경합니다. */
  z-index: 1000; /* 다른 요소 위에 버튼을 표시합니다. */
`;

export const FooterLine = styled.div`
  height: 16px;
  background-color: orange;
`;

export const Footer = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 442px;
`;

export const FundingBtn = styled.button`
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #3f3f3f;
  color: snow;
  border-radius: 50px;
  width: 150px;
  height: 40px;
  font-size: 14px;
  margin-bottom: 20px;
`;