Merge branch 'feature/trainer-feat' into develop

components/layout/trainer/Button.tsx

@@ -0,0 +1,34 @@
+import styled from '@emotion/styled';
+
+interface ButtonProps {
+  onClick: () => void;
+  role: string;
+}
+
+const Button = ({ onClick, role }: ButtonProps) => {
+  const StyledButton = styled.button`
+    position: absolute;
+    top: 50%;
+    right: ${(props) => props.role === 'next' && '0px'};
+    transform: translateY(-50%);
+    width: 20px;
+    cursor: pointer;
+    z-index: 10;
+  `;
+
+  return (
+    <StyledButton onClick={onClick} role={role} aria-label={role === 'prev' ? '이전' : '다음'}>
+      {role === 'prev' ? (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512">
+          <path d="M192 448c-8.188 0-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L77.25 256l137.4 137.4c12.5 12.5 12.5 32.75 0 45.25C208.4 444.9 200.2 448 192 448z" />
+        </svg>
+      ) : (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512">
+          <path d="M64 448c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L178.8 256L41.38 118.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25l-160 160C80.38 444.9 72.19 448 64 448z" />
+        </svg>
+      )}
+    </StyledButton>
+  );
+};
+
+export default Button;

components/layout/trainer/TrainerBody.tsx

@@ -1,8 +1,18 @@
 import Image from 'next/image';
 import profile from '@assets/common/profile.svg';
 import styled from '@emotion/styled';
+import { TrainerImages } from './TrainerImages';
+import { MouseEvent, useState } from 'react';
 
 export const TrainerBody = ({ careers, reviews, address, images }: BodyProps) => {
+  const [modal, setModal] = useState(false);
+  const [initialslider, setInitialslider] = useState<number>(0);
+
+  const handleClick = (e: MouseEvent<HTMLDivElement>) => {
+    setModal((state) => !state);
+    setInitialslider(+e.currentTarget.id);
+  };
+
   const BodySection = styled.section`
     margin: 10px 20px;
 
@@ -11,60 +21,82 @@ export const TrainerBody = ({ careers, reviews, address, images }: BodyProps) =>
       font-size: 14px;
       line-height: 14px;
       color: #858ff1;
+      margin-bottom: 10px;
     }
 
     ul {
       list-style: disc;
-      padding: 10px 20px;
+      padding: 0 20px 5px 20px;
 
       li {
         font-size: 14px;
-        line-height: 19px;
+        line-height: 20px;
       }
     }
   `;
 
+  const ImageContainer = styled.div`
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+  `;
+
+  const ImageWrapper = styled.div`
+    width: 100px;
+    height: 100px;
+    border-radius: 10px;
+    background-color: #d9d9d9;
+    cursor: pointer;
+  `;
+
   return (
-    <main>
-      <BodySection>
-        <h2>자격 및 수상 경력</h2>
-        <ul>
-          {careers.map((career, index) => (
-            <li key={index}>{career}</li>
-          ))}
-        </ul>
-      </BodySection>
-      <BodySection>
-        <h2>후기</h2>
-        <ul>
-          {reviews.length ? (
-            reviews.map((review, index) => (
-              <li key={index}>
-                <div>{review.content}</div>
-              </li>
-            ))
-          ) : (
-            <div>작성된 후기가 없습니다.</div>
-          )}
-        </ul>
-      </BodySection>
-      <BodySection>
-        <h2>위치</h2>
-        <div>{address}</div>
-        {/* 지도 가져오기 */}
-      </BodySection>
-      <BodySection>
-        <h2>사진</h2>
-        <div>
-          {images.length ? (
-            images.map((image, index) => (
-              <Image key={index} src={image} alt={'강사 사진'} width={100} height={100} />
-            ))
-          ) : (
-            <Image src={profile} alt={'이미지 없음'} width={100} height={100} />
-          )}
-        </div>
-      </BodySection>
-    </main>
+    <>
+      {modal && (
+        <TrainerImages images={images} initialslider={initialslider} onClickSetModal={setModal} />
+      )}
+      <main>
+        <BodySection>
+          <h2>자격 및 수상 경력</h2>
+          <ul>
+            {careers.map((career, index) => (
+              <li key={index}>{career}</li>
+            ))}
+          </ul>
+        </BodySection>
+        <BodySection>
+          <h2>후기</h2>
+          <ul>
+            {reviews.length ? (
+              reviews.map((review, index) => (
+                <li key={index}>
+                  <div>{review.content}</div>
+                </li>
+              ))
+            ) : (
+              <div>작성된 후기가 없습니다.</div>
+            )}
+          </ul>
+        </BodySection>
+        <BodySection>
+          <h2>위치</h2>
+          <div>{address}</div>
+          {/* 지도 가져오기 */}
+        </BodySection>
+        <BodySection>
+          <h2>사진</h2>
+          <ImageContainer>
+            {images.length ? (
+              images.map((image, index) => (
+                <ImageWrapper key={index} id={String(index)} onClick={handleClick}>
+                  <Image src={image} alt={'강사 사진'} width={100} height={100} />
+                </ImageWrapper>
+              ))
+            ) : (
+              <Image src={profile} alt={'이미지 없음'} width={100} height={100} />
+            )}
+          </ImageContainer>
+        </BodySection>
+      </main>
+    </>
   );
 };

components/layout/trainer/TrainerHeader.tsx

@@ -8,9 +8,10 @@ import setting from '@assets/common/setting-white.svg';
 import styled from '@emotion/styled';
 
 export const TrainerHeader = ({ state, liked, onClickSetLiked }: HeaderProps) => {
+  const id = 1234;
   const edit = {
     // 강사로 로그인됐을 경우에만,
-    link: '[id]/edit',
+    link: `${id}/edit`,
     src: setting,
     alt: '수정페이지로 이동하기',
     height: 30,

components/layout/trainer/TrainerImages.tsx

@@ -0,0 +1,73 @@
+import styled from '@emotion/styled';
+import Image from 'next/image';
+import { useState } from 'react';
+import Slider from 'react-slick';
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
+import Button from './Button';
+
+export const TrainerImages = ({ images, onClickSetModal, initialslider }: TrainerModalProps) => {
+  const Background = styled.div`
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 390px;
+    height: 100vh;
+    z-index: 1;
+    background-color: rgba(0, 0, 0, 0.5);
+  `;
+
+  const ImageModal = styled.article`
+    box-sizing: border-box;
+    background-color: #fff;
+    width: 350px;
+    height: 400px;
+    position: absolute;
+    z-index: 10;
+    top: 200px;
+    left: 20px;
+    padding: 10px;
+  `;
+
+  const CloseButton = styled.button`
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    width: 30px;
+    height: 30px;
+    font-size: 20px;
+    font-weight: 700;
+    cursor: pointer;
+    background-color: white;
+    border-radius: 50%;
+    z-index: 20;
+  `;
+
+  const settings = {
+    dots: true,
+    infinite: true,
+    speed: 500,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    initialSlide: initialslider,
+    nextArrow: <Button role="next" onClick={() => {}} />,
+    prevArrow: <Button role="prev" onClick={() => {}} />,
+  };
+
+  return (
+    <Background>
+      <ImageModal>
+        <CloseButton onClick={() => onClickSetModal((state: boolean) => !state)}>X</CloseButton>
+        <section>
+          <Slider {...settings}>
+            {images.map((image: string, index: number) => (
+              <div key={index}>
+                <Image src={image} title={'강사 사진'} alt={'강사 사진'} width={350} height={350} />
+              </div>
+            ))}
+          </Slider>
+        </section>
+      </ImageModal>
+    </Background>
+  );
+};

components/layout/trainer/trainer.d.ts

@@ -29,3 +29,9 @@ interface EditProps {
   images: string[];
   gymImage: string;
 }
+
+interface TrainerModalProps {
+  images: string[];
+  initialslider: number;
+  onClickSetModal: Dispatch<SetStateAction<boolean>>;
+}