Feat: 전문의 환자 차트 작성 페이지 구현

sync-without-async · Sep 30, 2023 · 83df836 · 83df836
1 parent a62d2c4
commit 83df836
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 22 deletions.
diff --git a/src/components/DoctorDashBoard/DoctorChart.jsx b/src/components/DoctorDashBoard/DoctorChart.jsx
@@ -2,10 +2,11 @@ import styled from "styled-components";
 import InputText from "../Input/InputText";
 import Dropdown from "../Dropdown/Dropdown";
 import DateSelect from "../Input/DateSelect";
+import InputTextLong from "../Input/InputTextLong";
 
-const SignupContainer = styled.div`
-  width: 750px;
-  height: 750px;
+const ChartContainer = styled.div`
+  width: 800px;
+  height: 900px;
   border-radius: 7.5px;
   background-color: #ffffff;
   border: 1.5px solid #0064ff;
@@ -60,9 +61,11 @@ const Button = styled.button`
 const DoctorChart = () => {
 
   const gender = ["남성", "여성"];
+
+  const therapist = ["오민혁" , "오민혁", "오민혁"];
 
   return (
-    <SignupContainer>
+    <ChartContainer>
       <Title>환자 차트 작성</Title>
       <Divider />
       <InputFieldsContainer>
@@ -75,10 +78,19 @@ const DoctorChart = () => {
       </InputFieldsContainer>
       <InputFieldsContainer>
         <InputText label="환자 전화번호*" />
-        <Dropdown label="담당 치료사 *" items={gender} />
+        <Dropdown label="담당 치료사 *" items={therapist} />
       </InputFieldsContainer>
-      <Button>가입하기</Button>
-    </SignupContainer>
+      <InputFieldsContainer>
+        <DateSelect labelText="다음 외래 일정 *" />
+      </InputFieldsContainer>
+      <InputFieldsContainer>
+      <InputTextLong label="진료 기록 작성*" />
+      </InputFieldsContainer>
+      <InputFieldsContainer>
+      <InputTextLong label="재활치료사 재활 운동 요청서 작성*" />
+      </InputFieldsContainer>
+      <Button>작성하기</Button>
+      </ChartContainer>
   );
 };
 

diff --git a/src/components/Dropdown/Dropdown.jsx b/src/components/Dropdown/Dropdown.jsx
@@ -12,7 +12,7 @@ const Label = styled.div`
 `;
 
 const DropdownContainer = styled.div`
-  width: 240px;
+  width: 250px;
   height: 37.5px;
   background-color: #FFFFFF;
   border: 0.75px solid #BBBBBB; 

diff --git a/src/components/Input/DateSelect.jsx b/src/components/Input/DateSelect.jsx
@@ -13,7 +13,7 @@ const Container = styled.div`
 
 const DateInput = styled.input`
   box-sizing: border-box;
-  width: 188px;
+  width: 200px;
   height: 40px;
   border-radius: 10px;
   background-color: #FAFAFA;
@@ -142,7 +142,7 @@ const DateSelect = ({ labelText }) => {
         <DateInput
           type='text'
           value={date}
-          placeholder='날짜를 선택해주세요.'
+          placeholder='   날짜를 선택해주세요.'
           onChange={handleChangeDate}
         />
         <CalendarButton type='button' onClick={handleClickButton} />

diff --git a/src/components/Input/InputTextLong.jsx b/src/components/Input/InputTextLong.jsx
@@ -4,13 +4,18 @@ const InputContainer = styled.div`
   display: flex;
   flex-direction: column;
   width: 320px;
-  margin-top:10px;
 `;
 
+const Label = styled.label`
+  font-family: 'Spoqa Han Sans Neo', 'sans-serif';
+  font-size: 16px;
+  font-weight: 500;
+  margin-bottom: 5px;
+`;
 
 const Input = styled.input`
-  width: 500px;
-  height: 100px;
+  width: 550px;
+  height: 133px;
   border-radius: 10px;
   background-color: #FAFAFA;
   border: 1px solid #BBBBBB;
@@ -22,13 +27,14 @@ const Input = styled.input`
   }
 `;
 
-function InputTextLong() {
+function InputLongText({ label }) {
   return (
     <InputContainer>
+      <Label>{label}</Label>
       <Input type="text" />
     </InputContainer>
   );
 }
 
 export { Input };
-export default InputTextLong;
+export default InputLongText;
diff --git a/src/components/UntactReserve/UntactReserveModal.jsx b/src/components/UntactReserve/UntactReserveModal.jsx
@@ -56,11 +56,6 @@ const DateText = styled.p`
   margin-top: -10px;
 `;
 
-const ReasonText = styled.p`
-  font-size: 16px;
-  margin-top: 10px;
-`;
-
 const TimeButton = styled.button`
   width: 90px;
   height: 40px;
@@ -136,8 +131,7 @@ export const UntactReserveModal = ({ onClose }) => {
             </TimeButton>
           ))}
         </TimeButtonContainer>
-        <ReasonText>진료 희망 사유 *</ReasonText>
-        <InputTextLong/>
+        <InputTextLong label="진료 희망 사유*" />
         <Button>예약 신청</Button>
       </ModalContainer>
     </Overlay>