Refactor: UserSelectCard 컴포넌트에 State 연결

sync-without-async · Nov 16, 2023 · 5fef48f · 5fef48f
1 parent 7b702ed
commit 5fef48f
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 29 deletions.
diff --git a/src/components/Reservation/ReservationSelect.jsx b/src/components/Reservation/ReservationSelect.jsx
@@ -1,7 +1,6 @@
 import { useState, useEffect } from "react";
 import styled from "styled-components";
 import { UserSelectCard } from "../UserDashBoard/UserSelectCard";
-import { getDoctorData, userLogin } from "../../librarys/dummy-api";
 import BlockContainer from "../Common/BlockContainer.jsx";
 import TitleText from "../Common/TitleText.jsx";
 import ReservationCreateModal from "./ReservationCreateModal.jsx";
@@ -19,17 +18,27 @@ const Text = styled.p`
   font-weight: 400;
 `;
 
-const { doctor, therapist } = getDoctorData();
-
 const ReservationSelect = () => {
   return (
     <BlockContainer>
       <ReservationCreateModal />
       <TitleText text="비대면 진료 예약" />
       <Text>진료를 희망하는 의료진을 선택해주세요.</Text>
       <CardWrapper>
-        <UserSelectCard userType="admin1" userData={doctor} />
-        <UserSelectCard userType="admin2" userData={therapist} />
+        <UserSelectCard
+          id="doctor1"
+          role="전문의"
+          name="사용자"
+          hospital="춘천성심병원"
+          department="재활의학과"
+        />
+        <UserSelectCard
+          id="therapist1"
+          role="재활치료사"
+          name="사용자"
+          hospital="춘천성심병원"
+          department="재활의학과"
+        />
       </CardWrapper>
     </BlockContainer>
   );

diff --git a/src/components/UserDashBoard/UserSelectCard.jsx b/src/components/UserDashBoard/UserSelectCard.jsx
@@ -85,56 +85,64 @@ const MidSection = styled.div`
   background-color: rgba(0, 100, 255, 0.03);
 `;
 
-export const UserSelectCard = ({ userType, userData }) => {
+export const UserSelectCard = ({
+  id,
+  role,
+  name,
+  image,
+  hospital,
+  department,
+}) => {
   const dispatch = useDispatch();
-  const [isModalOpen, setIsModalOpen] = useState(false);
 
-  const toggleModal = () => {
-    dispatch(show("reservation_create"));
+  const handleClick = () => {
+    dispatch(
+      show({
+        id: "reservation_create",
+        props: id,
+      }),
+    );
   };
 
-  if (!userData) return null;
-
-  const imageUrl = userType === "admin1" ? DoctorImage : TherapistImage;
-  const title =
-    userType === "admin1" ? "담당 전문의 프로필" : "담당 재활치료사 프로필";
-
   return (
     <>
       <Card>
-        <Title>{title}</Title>
+        <Title>담당 {role} 프로필</Title>
         <Separator />
         <MidSection>
           <ImageContainer>
-            <Avatar src={imageUrl} alt="avatar" />
+            <Avatar src={image} alt="avatar" />
           </ImageContainer>
-          <UserName>{userData.name}</UserName>
+          <UserName>{name}</UserName>
         </MidSection>
         <Separator />
         <Info>
-          <Icon src={Icondoctor} alt="icon" />{" "}
-          {userType === "admin1" ? "전문의" : "재활치료사"}
+          <Icon src={Icondoctor} alt="icon" /> {role}
         </Info>
         <Info>
-          <Icon src={Iconhospital} alt="icon" /> {userData.workplace}
+          <Icon src={Iconhospital} alt="icon" /> {hospital}
         </Info>
         <Info>
-          <Icon src={Iconmajor} alt="icon" /> {userData.major}
+          <Icon src={Iconmajor} alt="icon" /> {department}
         </Info>
         <Separator />
-        <Button onClick={toggleModal}>진료 예약</Button>
+        <Button onClick={handleClick}>진료 예약</Button>
       </Card>
     </>
   );
 };
 
 UserSelectCard.propTypes = {
-  userType: PropTypes.string.isRequired,
-  userData: PropTypes.shape({
-    name: PropTypes.string,
-    workplace: PropTypes.string,
-    major: PropTypes.string,
-  }).isRequired,
+  id: PropTypes.string,
+  role: PropTypes.string,
+  name: PropTypes.string,
+  image: PropTypes.string,
+  hospital: PropTypes.string,
+  department: PropTypes.string,
+};
+
+UserSelectCard.defaultProps = {
+  image: DoctorImage,
 };
 
 export default UserSelectCard;