[FEAT] 상세페이지 신청하기 섹션 구현

src/components/ExperienceDetailPage/BubbleSection.tsx

@@ -0,0 +1,3 @@
+export const BubbleSection = () => {
+  return <div>여긴 버블버블</div>;
+};

src/components/ExperienceDetailPage/DetailSection.tsx

@@ -0,0 +1,176 @@
+import { useState } from 'react';
+
+import { styled } from 'styled-components';
+
+import TestImage from '@/assets/test1.png';
+import { PlainButton } from '@/components/common/Button/PlainButton';
+import { PlainChip } from '@/components/common/Chip/PlainChip';
+import { Modal } from '@/components/common/Modal/modal';
+
+export const DetailSection = () => {
+  const [isModalOpen, setModalOpen] = useState(false);
+  const [participants, setParticipants] = useState(Dummy1.participants);
+  const [isButtonDisabled, setButtonDisabled] = useState(false);
+
+  const handleOpenModal = () => {
+    setModalOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setModalOpen(false);
+  };
+
+  const handleIncreaseParticipants = () => {
+    setParticipants((prevParticipants) => prevParticipants + 1);
+    setButtonDisabled(true);
+    setModalOpen(false);
+  };
+  return (
+    <StyledContainer>
+      <ImageContainer>
+        <img src={Dummy1.imageURL} alt="Detail" />
+      </ImageContainer>
+      <DetailContainer>
+        <TextContainer>
+          <PlainChip>{participants}명 참여 중!</PlainChip>
+          <TitleContainer>{Dummy1.title}</TitleContainer>
+          <SubTitleContainer>{Dummy1.subtitle}</SubTitleContainer>
+        </TextContainer>
+        <ProfileContainer>
+          <ProfileImageContainer>
+            <img src={Dummy1.profileImageURL} alt="profile" />
+          </ProfileImageContainer>
+          <ProfileTextContainer>
+            <ProfileTitleContainer>{Dummy1.profileTitle}</ProfileTitleContainer>
+            <ProfileSubTitleContainer>{Dummy1.profileSubtitle}</ProfileSubTitleContainer>
+          </ProfileTextContainer>
+        </ProfileContainer>
+        <PlainButton
+          variant="gray"
+          height="48px"
+          onClick={handleOpenModal}
+          disabled={isButtonDisabled}
+        >
+          신청하기
+        </PlainButton>
+      </DetailContainer>
+      <Modal
+        isOpen={isModalOpen}
+        onClose={handleCloseModal}
+        onConfirm={handleIncreaseParticipants}
+      />
+    </StyledContainer>
+  );
+};
+
+const StyledContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: 32px;
+  display: inline-flex;
+`;
+
+const ImageContainer = styled.div`
+  width: 597px;
+  height: 373px;
+  position: relative;
+  border-radius: 8px;
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 8px;
+  }
+`;
+
+const DetailContainer = styled.div`
+  flex: 1 1 0;
+  align-self: stretch;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: 16px;
+  display: inline-flex;
+`;
+
+const TextContainer = styled.div`
+  align-self: stretch;
+  flex: 1 1 0;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: 10px;
+  display: flex;
+`;
+
+const TitleContainer = styled.div`
+  align-self: stretch;
+  color: ${({ theme }) => `${theme.color.gray700}`};
+  ${({ theme }) => theme.font.desktop.title1};
+`;
+
+const SubTitleContainer = styled.div`
+  align-self: stretch;
+  color: ${({ theme }) => `${theme.color.gray500}`};
+  ${({ theme }) => theme.font.desktop.body2m};
+`;
+
+const ProfileContainer = styled.div`
+  align-self: stretch;
+  padding: 16px;
+  background-color: ${({ theme }) => `${theme.color.white}`};
+  border-radius: 8px;
+  overflow: hidden;
+  border: 2px solid ${({ theme }) => `${theme.color.gray150}`};
+  justify-content: flex-start;
+  align-items: center;
+  gap: 16px;
+  display: inline-flex;
+`;
+
+const ProfileImageContainer = styled.div`
+  width: 56px;
+  height: 56px;
+  background: linear-gradient(0deg, #f4efff 0%, #f4efff 100%);
+  border-radius: 8px;
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+`;
+
+const ProfileTextContainer = styled.div`
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 4px;
+  display: inline-flex;
+`;
+
+const ProfileTitleContainer = styled.div`
+  color: ${({ theme }) => `${theme.color.gray700}`};
+  ${({ theme }) => theme.font.desktop.body1m};
+`;
+
+const ProfileSubTitleContainer = styled.div`
+  color: ${({ theme }) => `${theme.color.gray700}`};
+  ${({ theme }) => theme.font.desktop.body2m};
+`;
+
+const Dummy1 = {
+  imageURL: TestImage,
+  profileImageURL: TestImage,
+  participants: 28,
+  title: '퍼스널 브랜딩, ‘나’를 기획, 디자인하기',
+  subtitle:
+    '대한민국은 국제평화의 유지에 노력하고 침략적 전쟁을 부인한다. 국민의 모든 자유와 권리는 국가안전보장·질서유지 또는 공공복리를 위하여 필요한 경우에 한하여 법률로써 제한할 수 있으며.대한민국은 국제평화의 유지에 노력하고 침략적 전쟁을 부인한다.',
+  profileTitle: '신민선',
+  profileSubtitle: '콘텐츠 마케터 | 퍼스널브랜딩 | 어쩌구',
+};

src/components/ExperienceDetailPage/ImageSection.tsx

@@ -0,0 +1,46 @@
+import { styled } from 'styled-components';
+
+export const ImageSection = () => {
+  return (
+    <StyledContainer>
+      <TitleContainer>프로그램 소개</TitleContainer>
+      <ImageBorderContainer>
+        <ImageContainer>기ㅣㅣㅣㅣㅣㅣㅣㅣㅣㅣㅣㅣㅣㅣㅣㅣㅣㅣㅣㅣㅣㅣ다란 이미지</ImageContainer>
+      </ImageBorderContainer>
+    </StyledContainer>
+  );
+};
+
+const StyledContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: 24px;
+  display: inline-flex;
+`;
+
+const TitleContainer = styled.div`
+  text-align: center;
+  color: ${({ theme }) => `${theme.color.gray900}`};
+  ${({ theme }) => theme.font.desktop.title1};
+`;
+
+const ImageBorderContainer = styled.div`
+  align-self: stretch;
+  padding: 32px;
+  background-color: ${({ theme }) => `${theme.color.white}`};
+  border-radius: 8px;
+  overflow: hidden;
+  border: 2px solid ${({ theme }) => `${theme.color.gray150}`};
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: 20px;
+  display: flex;
+`;
+
+const ImageContainer = styled.div`
+  align-self: stretch;
+`;

src/components/common/Modal/modal.tsx

@@ -0,0 +1,90 @@
+import styled from 'styled-components';
+
+import { PlainButton } from '@/components/common/Button/PlainButton';
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+}
+export const Modal = ({ isOpen, onClose, onConfirm }: ModalProps) => {
+  if (!isOpen) return null;
+
+  return (
+    <ModalOverlay>
+      <ModalContent>
+        <TitleContainer>금액 선택</TitleContainer>
+        <ContentContainer>
+          해당 프로그램을 <Highlight>신청</Highlight>하시겠습니까?
+        </ContentContainer>
+        <ButtonContainer>
+          <StyledButton height="48px" onClick={onClose}>
+            취소하기
+          </StyledButton>
+          <PlainButton variant="gray" height="48px" onClick={onConfirm}>
+            신청하기
+          </PlainButton>
+        </ButtonContainer>
+      </ModalContent>
+    </ModalOverlay>
+  );
+};
+
+const ModalOverlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(17.85, 17.85, 17.85, 0.36);
+  backdrop-filter: blur(10px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const ModalContent = styled.div`
+  width: 618px;
+  height: 338px;
+  background: white;
+  padding: 24px;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
+  border-radius: 16px;
+  overflow: hidden;
+  backdrop-filter: blur(8px);
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  display: inline-flex;
+`;
+
+const TitleContainer = styled.div`
+  align-self: stretch;
+  text-align: center;
+  color: ${({ theme }) => `${theme.color.gray800}`};
+  ${({ theme }) => theme.font.desktop.body1b};
+`;
+
+const ContentContainer = styled.div`
+  color: ${({ theme }) => `${theme.color.gray700}`};
+  ${({ theme }) => theme.font.desktop.title2};
+`;
+
+const ButtonContainer = styled.div`
+  align-self: stretch;
+  justify-content: flex-start;
+  gap: 8px;
+  display: inline-flex;
+`;
+
+const StyledButton = styled(PlainButton)`
+  background: ${({ theme }) => `${theme.color.gray200}`};
+  &:hover {
+    background: ${({ theme }) => `${theme.color.gray200}`};
+  }
+  color: inherit;
+`;
+
+const Highlight = styled.span`
+  color: ${({ theme }) => theme.color.primary500};
+`;

src/pages/ExperienceDetailPage.tsx

@@ -0,0 +1,27 @@
+import { styled } from 'styled-components';
+
+import { BubbleSection } from '@/components/ExperienceDetailPage/BubbleSection';
+import { DetailSection } from '@/components/ExperienceDetailPage/DetailSection';
+import { ImageSection } from '@/components/ExperienceDetailPage/ImageSection';
+
+export const ExperienceDetailPage = () => {
+  return (
+    <StyledContainer>
+      <DetailSection />
+      <BubbleSection />
+      <ImageSection />
+    </StyledContainer>
+  );
+};
+
+const StyledContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  padding: 64px 56px;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: 72px;
+  display: inline-flex;
+  padding-top: 142px;
+`;