⚡️ :: (#118) 프로필 박스 추가

Walkhub · May 31, 2022 · 458c60d · 458c60d
1 parent 4d2de06
commit 458c60d
Showing 1 changed file with 29 additions and 18 deletions.
diff --git a/src/components/common/ProfileBox.tsx b/src/components/common/ProfileBox.tsx
@@ -1,27 +1,39 @@
 import styled from "@emotion/styled";
-
+import useSWR from "swr";
+import dayjs from "dayjs";
+import Image from "next/image";
 interface Props {
-  name: string;
-  profile_image_url?: string;
-  grade: number;
-  class_num: number;
+  userId: number;
 }
 
-const ProfileBox: React.FC<Props> = ({
-  name,
-  profile_image_url,
-  grade,
-  class_num,
-}) => {
+const ProfileBox: React.FC<Props> = ({ userId }) => {
+  const { data } = useSWR(
+    `/teachers/users/${userId}?startAt=${dayjs()
+      .subtract(6, "day")
+      .format("YYYY-MM-DD")}&endAt=${dayjs().format("YYYY-MM-DD")}`
+  );
+
   return (
     <UserSchoolInfo>
-      <img src={profile_image_url}></img>
+      <img
+        src={
+          data?.profile_image_url ||
+          "https://blog.kakaocdn.net/dn/bftRiB/btqAjaghSBk/5CcN9W5qyCU8HLylVYcXb1/img.png"
+        }
+        width={90}
+        height={90}
+        alt=''
+      />
       <Box>
-        <h2>{name}</h2>
+        <h2>{data?.name}</h2>
         <div>
-          <p>{grade}학년</p>
-          <p>3반</p>
-          <p>{class_num}번</p>
+          {data?.grade && data?.class_num && (
+            <>
+              <p>{data?.grade}학년</p>
+              <p>{data?.class_num}반</p>
+            </>
+          )}
+          <p>{data?.number ? `${data?.number}번` : "선생님"}</p>
         </div>
       </Box>
     </UserSchoolInfo>
@@ -32,8 +44,7 @@ const UserSchoolInfo = styled.div`
   display: flex;
   gap: 28px;
   align-items: center;
-  > img {
-    background-color: ${({ theme }) => theme.color.main};
+  & img {
     border-radius: 50%;
     width: 90px;
     height: 90px;