Merge pull request #70 from ktmihs/develop

Trainer page and Trainer edit page
bodyBudy · Jul 6, 2022 · 6903314 · 6903314
2 parents 6268621 + e06a988
commit 6903314
Show file tree

Hide file tree

Showing 7 changed files with 275 additions and 78 deletions.
diff --git a/components/layout/trainer/ImageViewer.tsx b/components/layout/trainer/ImageViewer.tsx
@@ -0,0 +1,33 @@
+import styled from '@emotion/styled';
+import Image from 'next/image';
+import profile from '@assets/common/profile.svg';
+
+export const ImageViewer = ({ images, handleClick, len }: ImageViewerProps) => {
+  const ImageContainer = styled.div`
+    display: flex;
+    gap: 10px;
+  `;
+
+  const ImageWrapper = styled.div`
+    width: ${len}px;
+    height: ${len}px;
+    border-radius: 10px;
+    background-color: #d9d9d9;
+    cursor: pointer;
+    overflow: hidden;
+  `;
+
+  return (
+    <ImageContainer>
+      {images.length ? (
+        images.map((image: string, index: number) => (
+          <ImageWrapper key={index} id={String(index)} onClick={handleClick}>
+            <Image src={image} alt={'강사 사진'} width={len} height={len} />
+          </ImageWrapper>
+        ))
+      ) : (
+        <Image src={profile} alt={'이미지 없음'} width={len} height={len} />
+      )}
+    </ImageContainer>
+  );
+};
diff --git a/components/layout/trainer/TrainerBody.tsx b/components/layout/trainer/TrainerBody.tsx
@@ -1,10 +1,14 @@
 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';
+import RatingGroup from '@components/common/rating';
+import { ImageViewer } from './ImageViewer';
+import Link from 'next/link';
 
 export const TrainerBody = ({ careers, reviews, address, images }: BodyProps) => {
+  const id = 123456789; // 로그인 된 유저 아이디 받아오기
+
   const [modal, setModal] = useState(false);
   const [initialslider, setInitialslider] = useState<number>(0);
 
@@ -13,7 +17,10 @@ export const TrainerBody = ({ careers, reviews, address, images }: BodyProps) =>
     setInitialslider(+e.currentTarget.id);
   };
 
+  const handleDeleteReview = () => {};
+
   const BodySection = styled.section`
+    position: relative;
     margin: 10px 20px;
 
     h2 {
@@ -23,30 +30,87 @@ export const TrainerBody = ({ careers, reviews, address, images }: BodyProps) =>
       color: #858ff1;
       margin-bottom: 10px;
     }
+  `;
 
-    ul {
-      list-style: disc;
-      padding: 0 20px 5px 20px;
+  const Careers = styled.ul`
+    list-style: disc;
+    padding: 0 20px 5px 20px;
 
-      li {
-        font-size: 14px;
-        line-height: 20px;
-      }
+    li {
+      font-size: 14px;
+      line-height: 20px;
     }
   `;
 
-  const ImageContainer = styled.div`
+  const TotalReviews = styled.div`
+    position: absolute;
+    top: 0;
+    right: 0;
+    border-bottom: 1px solid #ededed;
+    padding-bottom: 5px;
+    width: 100%;
+
+    p {
+      float: right;
+      width: fit-content;
+      cursor: pointer;
+      padding: 2px;
+      font-size: 11px;
+      color: #9c9c9c;
+    }
+  `;
+
+  const ReviewContainer = styled.section`
+    position: relative;
     display: flex;
-    justify-content: center;
+    justify-content: space-between;
     gap: 10px;
+    padding: 5px 0 10px 0;
+    border-bottom: 1px solid #ededed;
   `;
 
-  const ImageWrapper = styled.div`
+  const ReviewHeader = styled.div`
+    box-sizing: border-box;
     width: 100px;
-    height: 100px;
-    border-radius: 10px;
-    background-color: #d9d9d9;
+    display: flex;
+    flex-flow: column nowrap;
+    padding-top: 5px;
+    gap: 10px;
+
+    p {
+      font-weight: 700;
+      font-size: 8px;
+      line-height: 10px;
+      text-align: center;
+      color: #5a5858;
+    }
+  `;
+
+  const ReviewBody = styled.div`
+    text-align: right;
+    width: 100%;
+
+    p {
+      text-align: left;
+      margin: 5px 0;
+      font-size: 10px;
+      line-height: 14px;
+      color: #626161;
+    }
+  `;
+
+  const NoReview = styled.div`
+    padding: 20px 0;
+  `;
+
+  const DeleteReview = styled.div`
+    position: absolute;
+    bottom: 10px;
+    right: 0;
+    font-size: 9px;
+    color: #9c9c9c;
     cursor: pointer;
+    padding: 2px;
   `;
 
   return (
@@ -57,23 +121,62 @@ export const TrainerBody = ({ careers, reviews, address, images }: BodyProps) =>
       <main>
         <BodySection>
           <h2>자격 및 수상 경력</h2>
-          <ul>
+          <Careers>
             {careers.map((career, index) => (
               <li key={index}>{career}</li>
             ))}
-          </ul>
+          </Careers>
         </BodySection>
         <BodySection>
           <h2>후기</h2>
           <ul>
             {reviews.length ? (
-              reviews.map((review, index) => (
-                <li key={index}>
-                  <div>{review.content}</div>
-                </li>
-              ))
+              <>
+                <TotalReviews>
+                  <Link href={`reviews/${reviews[0].trainerId}`}>
+                    <p>더보기</p>
+                  </Link>
+                </TotalReviews>
+                {reviews.map((review, index) => {
+                  // review.userId로 유저 정보 받아오기
+                  const profile = ''; // images[0]
+                  const nickname = '루시안';
+
+                  return (
+                    <li key={index}>
+                      <ReviewContainer>
+                        <ReviewHeader>
+                          <Image
+                            src={profile || '/assets/common/profile.svg'}
+                            width={50}
+                            height={50}
+                          />
+                          <p>{nickname}</p>
+                        </ReviewHeader>
+                        <ReviewBody>
+                          <RatingGroup
+                            isEditingMode={false}
+                            star={review.rating}
+                            width={11}
+                            height={11}
+                          />
+                          <div>
+                            <p>{review.content}</p>
+                            {review.image.length ? <ImageViewer images={images} len={60} /> : <></>}
+                          </div>
+                          {review.userId === id ? (
+                            <DeleteReview onClick={handleDeleteReview}>삭제</DeleteReview>
+                          ) : (
+                            <></>
+                          )}
+                        </ReviewBody>
+                      </ReviewContainer>
+                    </li>
+                  );
+                })}
+              </>
             ) : (
-              <div>작성된 후기가 없습니다.</div>
+              <NoReview>작성된 후기가 없습니다.</NoReview>
             )}
           </ul>
         </BodySection>
@@ -84,17 +187,7 @@ export const TrainerBody = ({ careers, reviews, address, images }: BodyProps) =>
         </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>
+          <ImageViewer images={images} handleClick={handleClick} len={100} />
         </BodySection>
       </main>
     </>

diff --git a/components/layout/trainer/TrainerHeader.tsx b/components/layout/trainer/TrainerHeader.tsx
@@ -7,16 +7,16 @@ import love from '@assets/trainer/love.svg';
 import setting from '@assets/common/setting-white.svg';
 import styled from '@emotion/styled';
 
-export const TrainerHeader = ({ state, liked, onClickSetLiked }: HeaderProps) => {
-  const id = 1234;
+export const TrainerHeader = ({ state, trainer, liked, onClickSetLiked }: HeaderProps) => {
+  const { id, online } = trainer;
   const edit = {
-    // 강사로 로그인됐을 경우에만,
     link: `${id}/edit`,
     src: setting,
     alt: '수정페이지로 이동하기',
     height: 30,
     right: 30,
   };
+
   const likedObj = {
     liked: love,
     unLiked: loveBlank,
@@ -54,6 +54,7 @@ export const TrainerHeader = ({ state, liked, onClickSetLiked }: HeaderProps) =>
   `;
 
   const TrainerIntro = styled.p`
+    position: relative;
     color: #fff;
     font-size: 17px;
     line-height: 21px;
@@ -63,8 +64,8 @@ export const TrainerHeader = ({ state, liked, onClickSetLiked }: HeaderProps) =>
     &::before {
       content: url('/assets/trainer/trainer-intro.svg');
       position: absolute;
-      top: 60px;
-      left: 24px;
+      top: -55px;
+      left: 0px;
     }
   `;
 
@@ -177,12 +178,18 @@ export const TrainerHeader = ({ state, liked, onClickSetLiked }: HeaderProps) =>
               <span>다이어트</span>
             </FieldAndPurpose>
             {state === 'user' ? (
-              <div>
-                <Button>상담 하기</Button>
-              </div>
+              online ? (
+                <div>
+                  <Button>상담 하기</Button>
+                </div>
+              ) : (
+                <OnlineState>
+                  현재 <div>Off</div> 상태입니다.
+                </OnlineState>
+              )
             ) : (
               <OnlineState>
-                현재 <div>Off</div> 상태입니다.
+                현재 <div>{online ? 'On' : 'Off'}</div> 상태입니다.
               </OnlineState>
             )}
           </TrainerInfo>

diff --git a/components/layout/trainer/edit.tsx b/components/layout/trainer/edit.tsx
@@ -1,18 +1,13 @@
-import { FixedBottomLinkButton } from '@components/common/button';
 import { KakaoMap } from '@components/common/map';
 import { ProfileUploader } from '@components/common/profile';
 import { Select } from '@components/common/select';
 import { ImageUploader } from '@components/common/uploader';
 import { healthEvents, healthPurpose } from '@data';
 import styled from '@emotion/styled';
-import { useState } from 'react';
 
-export const Edit = ({ field, purpose, images, gymImage }: EditProps) => {
-  const [newField, setNewFieled] = useState(field);
-  const [newPurpose, setNewPurpose] = useState(purpose);
-  const [profile, setProfile] = useState<string>(images[0] || '');
-
-  const id = 1;
+export const Edit = ({ trainerState, trainerSetState }: EditProps) => {
+  const { field, purpose, profileUrl, imagesUrl, gymUrl } = trainerState;
+  const { setField, setPurpose, setProfileUrl, setImagesUrl, setGymUrl } = trainerSetState;
 
   const TrainerEdit = styled.main`
     margin: 10px 20px;
@@ -49,38 +44,38 @@ export const Edit = ({ field, purpose, images, gymImage }: EditProps) => {
     <TrainerEdit>
       <section>
         <h2 className="srOnly">썸네일</h2>
-        <ProfileUploader profile={profile} setProfile={setProfile} />
+        <ProfileUploader profile={profileUrl} setProfile={setProfileUrl} />
       </section>
       <section>
         <h2>상세 정보</h2>
         <section>
           <h3>종목 및 분야</h3>
           <SelectBoxes>
             <Select
-              currentSelectedData={newField}
+              currentSelectedData={field}
               selectData={healthEvents}
               selectWidth={140}
-              onSetCurrentSelected={setNewFieled}
+              onSetCurrentSelected={setField}
             />
             <Select
-              currentSelectedData={newPurpose}
+              currentSelectedData={purpose}
               selectData={healthPurpose}
               selectWidth={140}
-              onSetCurrentSelected={setNewPurpose}
+              onSetCurrentSelected={setPurpose}
             />
           </SelectBoxes>
         </section>
         <section>
           <h3>프로필 사진</h3>
           <p>트레이너 님을 대표할 수 있는 사진을 업로드 해주세요 :)</p>
-          <ImageUploader />
+          <ImageUploader url={imagesUrl} setImageUrl={setImagesUrl} />
         </section>
       </section>
       <section>
         <h2>트레이닝장 정보</h2>
         <section>
           <h3>트레이닝장 사진</h3>
-          <ImageUploader />
+          <ImageUploader url={gymUrl} setImageUrl={setGymUrl} />
         </section>
         <section>
           <h3>트레이닝장 위치</h3>
@@ -94,7 +89,6 @@ export const Edit = ({ field, purpose, images, gymImage }: EditProps) => {
       <section>
         <h2>경력 정보</h2>
       </section>
-      <FixedBottomLinkButton isValid link={`/trainer/${id}`} buttonTitle={'변경 사항 저장'} />
     </TrainerEdit>
   );
 };