[Feat/FE] 021 재활치료사가 확인하는 운동 등록 페이지를 구현한다.

src/App.jsx

@@ -15,6 +15,7 @@ import TheraUntactReservePage from './pages/Therapist/TheraUntactReservePage.jsx
 import TheraPatientListPage from './pages/Therapist/TheraPatientListPage.jsx';
 import TheraDetailPage from './pages/Therapist/TheraDetailPage.jsx';
 import TheraExerciseListPage from './pages/Therapist/TheraExerciseListPage.jsx';
+import TheraExerciseAddPage from './pages/Therapist/TheraExerciseAddPage.jsx';
 import styled from "styled-components";
 import "./App.scss";
 
@@ -43,7 +44,9 @@ function App() {
           <Route path="/therauntactreserve" element={<TheraUntactReservePage  />} />
           <Route path="/therapatientlist" element={<TheraPatientListPage />} />
           <Route path="/theradetail" element={<TheraDetailPage />} />
-          <Route path="/theraexerciselist" element={<TheraExerciseListPage />} />
+          <Route path="/theraexerciselist" element={<TheraExerciseListPage />} /> 
+          <Route path="/theraexerciseadd" element={<TheraExerciseAddPage/>} />
+
         </Routes>
       </Container>
     </Router>

src/components/Button/FilterButton.jsx

@@ -0,0 +1,65 @@
+import { useState } from 'react';
+import styled from 'styled-components';
+
+const InputContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-left: -40px;
+`;
+
+const Label = styled.label`
+  font-family: 'Spoqa Han Sans Neo', 'sans-serif';
+  font-size: 16px;
+  font-weight: 500;
+  margin-bottom: 5px;
+`;
+
+const TagButton = styled.button`
+  width: 100px;
+  height: 40px;
+  border-radius: 10px;
+  background-color: ${props => props.selected ? '#F3F1FF' : '#FAFAFA'};
+  border: ${props => props.selected ? '2px solid #0064FF' : '1px solid #E8E8E8'};
+  color: #000000;
+  font-size: 18px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+  margin-right: 10px; // 마지막 버튼 제외 각 버튼의 오른쪽 간격
+  cursor: pointer;
+
+  &:last-child {
+    margin-right: 0; // 마지막 버튼 오른쪽 간격 제거
+  }
+`;
+
+function FilterButton({ label }) {
+  const [selectedTag, setSelectedTag] = useState(null);
+
+  const tags = ["팔", "허벅지", "어깨", "무릎"];
+
+  const handleTagClick = (tag) => {
+    if (selectedTag === tag) {
+      setSelectedTag(null); 
+    } else {
+      setSelectedTag(tag); 
+    }
+  }
+
+  return (
+    <InputContainer>
+      <Label>{label}</Label>
+      <div>
+        {tags.map(tag => (
+          <TagButton 
+            key={tag}
+            selected={selectedTag === tag}
+            onClick={() => handleTagClick(tag)}
+          >
+            {tag}
+          </TagButton>
+        ))}
+      </div>
+    </InputContainer>
+  );
+}
+
+export default FilterButton;

src/components/Input/InputDText.jsx

@@ -0,0 +1,39 @@
+import styled from 'styled-components';
+
+const InputContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+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: 720px;
+  height: 100px;
+  border-radius: 10px;
+  background-color: #FAFAFA;
+  border: 1px solid #BBBBBB;
+  font-family: 'Spoqa Han Sans Neo', 'sans-serif';
+  padding-left: 0px;
+
+  &:focus {
+    outline: none;
+  }
+`;
+
+function InputDText({ label }) {
+  return (
+    <InputContainer>
+      <Label>{label}</Label>
+      <Input type="text" />
+    </InputContainer>
+  );
+}
+
+export { Input };
+export default InputDText;

src/components/TherapistDashBoard/TheraExerciseAdd.jsx

@@ -0,0 +1,81 @@
+import styled from "styled-components";
+import TheraVideoUploader from "./TheraVideoUploader";
+import InputText from "../Input/InputText";
+import InputDText from "../Input/InputDText";
+import FilterButton from "../Button/FilterButton";
+
+const Container = styled.div`
+  width: 800px;
+  height: 800px;
+  margin: 0 auto;
+  padding: 20px;
+  border: 1px solid #0064ff;
+  border-radius: 10px;
+  background-color: #ffffff;
+  font-family: "Spoqa Han Sans Neo", "sans-serif";
+  margin-top: 10px;
+  padding: 20px 40px;
+`;
+
+const Title = styled.h1`
+  font-size: 28px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 15px;
+`;
+
+const Divider = styled.hr`
+  width: 100%;
+  height: 1px;
+  background-color: #d9d9d9;
+  border: none;
+  margin-bottom: 20px;
+`;
+
+const TitleA = styled.p`
+  font-size: 16px;
+  margin-bottom:10px;
+`;
+
+const FlexContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  margin-top:20px;
+`;
+
+const Button = styled.button`
+  width: 210px;
+  height: 40px;
+  background-color: #3592FF;
+  font-weight: 300;
+  color: #FEFDFD;
+  font-size: 14px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  margin-top:20px;
+  display: block;     
+  margin-left: auto;
+  margin-right: auto; 
+`;
+
+const TheraExerciseAdd = () => {
+  return (
+    <Container>
+      <Title>운동 등록</Title>
+      <Divider />
+      <TitleA>가이드 영상 업로드*</TitleA>
+      <TheraVideoUploader />
+      <FlexContainer>
+        <InputText label="운동 제목 *" />
+        <FilterButton label="운동 태그 *" />
+      </FlexContainer>
+      <InputDText label="운동 설명 *"/>
+      <Button>기록 추가</Button>
+    </Container>
+  );
+};
+
+export default TheraExerciseAdd;

src/components/TherapistDashBoard/TheraVideoUploader.jsx

@@ -0,0 +1,75 @@
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { useState } from 'react';
+
+const VideoUploadContainer = styled.div`
+  width: 720px;
+  height: 300px;
+  background-color: #DFDFDF;
+  border: 1px solid #ABABAB;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer; 
+  position: relative;
+  overflow: hidden; 
+  &:hover {
+    opacity: 0.8;
+  }
+`;
+
+const UploadText = styled.span`
+  color: #878787;
+  font-size: 36px;
+  text-align: center;
+`;
+
+const HiddenInput = styled.input`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+`;
+
+const VideoPreview = styled.video`
+  width: 100%;
+  height: 100%;
+  border-radius: 10px;
+`;
+
+const TheraVideoUploader = ({ onUpload }) => {
+  const [videoPreview, setVideoPreview] = useState(null);
+
+  const handleFileChange = (event) => {
+    const file = event.target.files[0];
+    if (file) {
+      // 파일 객체에서 URL을 생성하여 미리보기에 사용
+      const videoURL = URL.createObjectURL(file);
+      setVideoPreview(videoURL);
+      onUpload && onUpload(file);
+    }
+  };
+
+  return (
+    <VideoUploadContainer>
+      <HiddenInput type="file" accept="video/*" onChange={handleFileChange} />
+      {videoPreview ? (
+        <VideoPreview controls src={videoPreview} />
+      ) : (
+        <UploadText>
+          여기를 클릭해서 <br /> 동영상 업로드
+        </UploadText>
+      )}
+    </VideoUploadContainer>
+  );
+};
+
+TheraVideoUploader.propTypes = {
+  onUpload: PropTypes.func,
+};
+
+export default TheraVideoUploader;

src/pages/Therapist/TheraExerciseAddPage.jsx

@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+import Header from '../../components/Header/Header';
+import BackButton from '../../components/Button/BackButton';
+import TheraExerciseAdd from '../../components/TherapistDashBoard/TheraExerciseAdd';
+
+const PageContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+`;
+
+const CenteredContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex: 1;
+  margin-top: 50px; 
+`;
+
+const TheraExerciseAddPage = () => {
+  return (
+    <PageContainer>
+      <Header/>
+      <CenteredContainer>
+      <BackButton pageName="운동 목록" />
+      <TheraExerciseAdd/>
+      </CenteredContainer>
+    </PageContainer>
+  );
+}
+
+export default TheraExerciseAddPage;