fix : 멘토 사진 출력 변경

Soongsil-CoffeeChat · Jun 12, 2024 · e1f76bf · e1f76bf
1 parent d4cf2d7
commit e1f76bf
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/src/pages/main/main.styles.tsx b/src/pages/main/main.styles.tsx
@@ -82,13 +82,19 @@ export const ImageButton = styled.img`
   border: none;
   cursor: pointer;
 `;
-export const ProfileCircle = styled.div`
+interface ProfileCircleProps {
+  imageUrl: string;
+}
+
+export const ProfileCircle = styled.div<ProfileCircleProps>`
   width: 196px;
   height: 196px;
   background-color: white;
   border-radius: 50%;
   flex: none;
+  background-image: url(${(props) => props.imageUrl});
 `;
+
 export const ProfileTopContainer = styled.div`
   display: flex;
   flex-direction: row;

diff --git a/src/pages/main/main.tsx b/src/pages/main/main.tsx
@@ -111,7 +111,13 @@ function Main() {
               alt="Left"
               onClick={handlePrevClick}
             />
-            <styles.ProfileCircle />
+            <styles.ProfileCircle
+              imageUrl={
+                mentorData !== null
+                  ? mentorData[currentIndex].mentorName
+                  : "https://picsum.photos/250/250"
+              }
+            />
             <styles.ImageButton
               src={RightButton}
               alt="Right"