Merge pull request #373 from TEAM-BEAT/feat/#370/GigPagePerformanceImage

[Feat/#370] 상세 페이지에서 상세 이미지 뷰 추가

src/pages/gig/Gig.tsx

@@ -62,7 +62,7 @@ const Gig = () => {
     return <Loading />;
   }
 
-  if (!data) {
+  if (!isLoading && !data) {
     return <NotFound />;
   }
 
@@ -88,6 +88,7 @@ const Gig = () => {
       />
       <Content
         description={data?.performanceDescription ?? ""}
+        performanceImageList={data?.performanceImageList ?? []}
         attentionNote={data?.performanceAttentionNote ?? ""}
         contact={data?.performanceContact ?? ""}
         teamName={data?.performanceTeamName ?? ""}

src/pages/gig/components/content/Content.tsx

@@ -20,8 +20,14 @@ export type StaffListType = {
   staffPhoto?: string;
 };
 
+export interface PerformanceImageList {
+  performanceImageId?: number;
+  performanceImage?: string;
+}
+
 interface ContentProps {
   description: string;
+  performanceImageList: PerformanceImageList[];
   attentionNote: string;
   contact: string;
   teamName: string;
@@ -31,6 +37,7 @@ interface ContentProps {
 
 const Content = ({
   description,
+  performanceImageList,
   attentionNote,
   contact,
   teamName,
@@ -50,6 +57,7 @@ const Content = ({
         {activeTab === TAB_TYPE.PERFORMANCE && (
           <PerformanceIntroduce
             description={description}
+            performanceImageList={performanceImageList}
             attentionNote={attentionNote}
             contact={contact}
           />

src/pages/gig/components/detailImage/DetailImage.styled.ts

@@ -0,0 +1,47 @@
+import styled from "styled-components";
+
+export const Wrapper = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+`;
+
+export const ImageWrapper = styled.div<{ $showAllImages: boolean; $toggleAvailable: boolean }>`
+  display: flex;
+  flex-direction: column;
+  gap: 1.6rem;
+  height: ${({ $showAllImages, $toggleAvailable }) =>
+    $showAllImages ? "auto" : $toggleAvailable && "70rem"};
+  overflow: ${({ $showAllImages }) =>
+    $showAllImages ? "visible" : "hidden"}; /* 이미지의 하단 부분을 잘라내도록 설정 */
+`;
+
+export const Image = styled.img`
+  width: 100%;
+  height: auto;
+`;
+
+export const ShowMoreButton = styled.button`
+  display: flex;
+  justify-content: space-between;
+  margin-top: 0.8rem;
+  padding: 1.6rem 9.1rem;
+
+  color: ${({ theme }) => theme.colors.white};
+  ${({ theme }) => theme.fonts["body1-normal-semi"]};
+
+  background-color: ${({ theme }) => theme.colors.gray_900};
+  cursor: pointer;
+  border: 1px solid ${({ theme }) => theme.colors.gray_700};
+  border-radius: 0.6rem;
+`;
+
+export const Overlay = styled.div`
+  position: absolute;
+  bottom: 6.3rem;
+
+  width: 100%;
+  height: 10rem;
+
+  background: linear-gradient(180deg, rgb(27 27 27 / 0%) 0%, #1b1b1b 100%);
+`;

src/pages/gig/components/detailImage/DetailImage.tsx

@@ -0,0 +1,45 @@
+import { useState } from "react";
+import { IconArrowDown, IconArrowUp } from "@assets/svgs";
+import * as S from "./DetailImage.styled";
+
+const DetailImage = ({ performanceImageList }) => {
+  const toggleAvailable = performanceImageList?.length > 2;
+  const [showAllImages, setShowAllImages] = useState(false);
+
+  const handleDetailImageToggle = () => {
+    setShowAllImages((prev) => !prev);
+  };
+
+  if (!performanceImageList || performanceImageList.length === 0) {
+    return null;
+  }
+
+  return (
+    <S.Wrapper>
+      <S.ImageWrapper $showAllImages={showAllImages} $toggleAvailable={toggleAvailable}>
+        {performanceImageList.map((image) => (
+          <S.Image key={image.performanceImageId} src={image.performanceImage} />
+        ))}
+      </S.ImageWrapper>
+
+      {toggleAvailable && (
+        <>
+          {!showAllImages && <S.Overlay />}
+          <S.ShowMoreButton onClick={handleDetailImageToggle}>
+            {showAllImages ? (
+              <>
+                <span>상세 이미지 접기</span> <IconArrowUp width={"24px"} />
+              </>
+            ) : (
+              <>
+                <span>상세 이미지 더보기</span> <IconArrowDown width={"24px"} />
+              </>
+            )}
+          </S.ShowMoreButton>
+        </>
+      )}
+    </S.Wrapper>
+  );
+};
+
+export default DetailImage;

src/pages/gig/components/performanceIntroduce/PerformanceIntroduce.styled.ts

@@ -20,6 +20,7 @@ export const Title = styled.h1`
 
 export const Description = styled.pre`
   width: 32.7rem;
+
   ${({ theme }) => theme.fonts["body2-long"]};
   color: ${({ theme }) => theme.colors.white};
   white-space: pre-line;
@@ -57,12 +58,12 @@ export const Toggle = styled.span`
 `;
 
 export const Contact = styled.p`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
   width: 100%;
   padding: 1.2rem 1.2rem 1.2rem 0;
   text-decoration-line: underline;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
 
   color: ${({ theme }) => theme.colors.white};
 

src/pages/gig/components/performanceIntroduce/PerformanceIntroduce.tsx

@@ -1,14 +1,19 @@
+import { useState } from "react";
+import { PerformanceImageList } from "../content/Content";
 import Contact from "./Contact";
 import * as S from "./PerformanceIntroduce.styled";
+import DetailImage from "../detailImage/DetailImage";
 
 interface PerformanceIntroduceProps {
   description: string;
+  performanceImageList: PerformanceImageList[];
   attentionNote: string;
   contact: string;
 }
 
 const PerformanceIntroduce = ({
   description,
+  performanceImageList,
   attentionNote,
   contact,
 }: PerformanceIntroduceProps) => {
@@ -18,6 +23,7 @@ const PerformanceIntroduce = ({
         <S.Title>공연소개</S.Title>
         <S.Description>{description}</S.Description>
       </S.Container>
+      <DetailImage performanceImageList={performanceImageList} />
       <S.Divider />
       <S.Container>
         <S.Title>유의사항</S.Title>

src/pages/register/Register.tsx

@@ -602,6 +602,7 @@ const Register = () => {
         <Content
           description={performanceDescription}
           attentionNote={performanceAttentionNote}
+          performanceImageList={performanceImageList}
           contact={performanceContact}
           teamName={performanceTeamName}
           castList={castList.map((cast, index) => ({