feat: 우리 동네 강사 페이지 구현

package.json

@@ -15,6 +15,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-dropdown": "1.11.0",
+    "react-indiana-drag-scroll": "2.2.0",
     "react-router-dom": "6.10.0",
     "recoil": "0.7.7",
     "styled-components": "5.3.9"

src/App.tsx

@@ -12,6 +12,7 @@ import CommunityPage from './pages/Commu/CommunityPage';
 import MainPageDetail from './pages/Main/MainPageDetail';
 import RevieDetailPage from './pages/ReviwDetail/RevieDetailPage';
 import TogetherDetailPage from './pages/TogetherDetail/TogetherDetailPage';
+import TeacherDetailPage from './pages/TeacherDetail/TeacherDetailPage';
 
 
 function App() {
@@ -30,6 +31,7 @@ function App() {
           <Route path="/:region" element={<MainPageDetail />}/>
           <Route path="/commu/review/:reviewIdx" element={<RevieDetailPage />}/>
           <Route path="/commu/together/:listenIdx" element={<TogetherDetailPage />}/>
+          <Route path="/suggest/:lectureIdx" element={<TeacherDetailPage />}/>
         </Routes>
     </div>
     </RecoilRoot>

src/components/Modal/Modal.tsx

@@ -105,7 +105,7 @@ const Modal =({ region }: Props)=> {
     })
     try {
       const response = await axios.post(
-        `${import.meta.env.VITE_APP_HOST}/listen/save`,
+        `${import.meta.env.VITE_APP_HOST}/review/posts`,
         {
           title: title,
           region: region,

src/components/ReviewDetail/ReviewDetail.tsx

@@ -8,25 +8,25 @@ import{
     CardContent,
 } from './ReviewDetail.styled'
 //서버 임의 더미데이터 생성
-const data = {
-    reviewIdx: 20,
-    profile: "test.com",
-    nickName: "test2",
-    createdAt: "2023-05-10-11-35",
-    title: "[1주차 후기] 강의 들은 후기 입니다",
-    content: "꽃을 키우다 드는 생각.얘는 이래서 좋고쟤는 저래서 좋고또 얘는 이래서 예쁘고 또 쟤는 이래서 정말 예뻐...한다.골드이파리에 열광하며 골드존을 만들어 흐믓하던..브룩사이드 베티가 골드 이파리로 다. 5월의 시작...근로자들은 휴무라는데 나는 뭘까?...하며 출근중.복잡한 전철역이 오늘은 헐렁이다. 앉아  ",
-    favFields: [
-      "미술",
-      "창작"
-    ],
-    week: 1,
-    image: [],
-    programName: "신박한 정리를 위한 미니멀리즘",
-    tags: [
-      "양천구",
-      "양천구재밌는배움터"
-    ]
-  };
+// const data = {
+//     reviewIdx: 20,
+//     profile: "test.com",
+//     nickName: "test2",
+//     createdAt: "2023-05-10-11-35",
+//     title: "[1주차 후기] 강의 들은 후기 입니다",
+//     content: "꽃을 키우다 드는 생각.얘는 이래서 좋고쟤는 저래서 좋고또 얘는 이래서 예쁘고 또 쟤는 이래서 정말 예뻐...한다.골드이파리에 열광하며 골드존을 만들어 흐믓하던..브룩사이드 베티가 골드 이파리로 다. 5월의 시작...근로자들은 휴무라는데 나는 뭘까?...하며 출근중.복잡한 전철역이 오늘은 헐렁이다. 앉아  ",
+//     favFields: [
+//       "미술",
+//       "창작"
+//     ],
+//     week: 1,
+//     image: [],
+//     programName: "신박한 정리를 위한 미니멀리즘",
+//     tags: [
+//       "양천구",
+//       "양천구재밌는배움터"
+//     ]
+//   };
   interface Program {
     reviewId:number;
     profile:string;

src/components/StickyScroll/StickyScroll.styled.ts

@@ -0,0 +1,87 @@
+import styled from "styled-components";
+export const ReactstickyBox = styled.div`
+width: 327px;
+height: 545px;
+background-color: #F6F6F6;
+border: 1px solid #CBCBCB;
+filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+position: sticky;
+top: 0;
+//margin-top: 702px;
+button{
+    margin-top: 12Px;
+    margin-left: 27px;
+    width: 273px;
+    height: 34px;
+    background-color: #59CACB;
+    border-radius: 14px;
+    color: #FFFFFF;
+    border: none;
+}
+`
+export const Title = styled.div`
+margin-left: 34px;
+margin-top: 30px;
+margin-bottom: 15px;
+.phonetitle{
+font-weight: 600px;
+font-size: 18px;
+letter-spacing: -5%;
+}
+textarea{
+margin-top: 15px;
+border: none;
+background-color: none;
+width: 259px;
+height: 34px;
+font-family:'Pretendard';
+font-weight: 500;
+font-size: 17px;
+}
+`
+export const Email = styled.div`
+margin-left: 34px;
+margin-bottom: 16px;
+.emailtitle{
+font-weight: 600px;
+font-size: 18px;
+letter-spacing: -5%;
+}
+textarea{
+    font-family:'Pretendard';
+    margin-top: 15px;
+    border: none;
+background-color: none;
+width: 259px;
+height: 34px;
+font-weight: 500;
+font-size: 17px;
+}
+
+
+`
+export const Message = styled.div`
+margin-left: 34px;
+.teachertitle{
+    font-weight: 600px;
+font-size: 18px;
+letter-spacing: -5%;
+}
+textarea{
+    margin-top: 13px;
+    border: none;
+background-color: none;
+width: 259px;
+height: 165px;
+font-weight: 500;
+font-size: 17px;
+}
+`
+export const Line = styled.div`
+margin-top:63px;
+width: 300px;
+height: 0px;
+border: 1px solid #CBCBCB;
+margin-left: 13px;
+
+`

src/components/StickyScroll/StickyScroll.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import {
+    ReactstickyBox,
+    Title,
+    Email,
+    Message,
+    Line
+} from './StickyScroll.styled'
+function StickyScroll() {
+  return (
+    <div>
+      <ReactstickyBox>
+        <Title>
+        <div className='phonetitle'>전화번호를 입력하세요</div>
+        <textarea  placeholder='010-XXXX-XXXX'></textarea>
+        </Title>
+        <Email>
+        <div className='emailtitle'>이메일 주소를 입력하세요</div>
+        <textarea placeholder='[email protected]'></textarea>
+        </Email>
+        <Message>
+            <div  className='teachertitle'>강사에게 남길 메세지</div>
+        <textarea  placeholder=''></textarea>
+        </Message>
+        <Line></Line>
+        <button>신청하기</button>
+      </ReactstickyBox>
+    </div>
+  )
+}
+
+export default StickyScroll

src/components/SuggestHeader/SuggestHeader.styled.ts

@@ -0,0 +1 @@
+import styled from "styled-components";

src/components/SuggestHeader/SuggestHeader.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { useEffect, useState } from "react";
+import ScrollContainer from 'react-indiana-drag-scroll'
+import {
+    Content,
+    TodayTeacher,
+    MyTeacher,
+    TodayTitle,
+    TodayCard,
+    MyTeacherTitle,
+    TeacherCard,
+  } from '../../pages/Suggest/SuggestPage.styled'
+  import MyTeacherCard from '../TeacherCard/MyTeacherCard';
+  import TodayTeacherCard from '../TeacherCard/TodayTeacherCard';
+  import axios from 'axios';
+
+
+const SuggestHeader=()=> {
+  return (
+    <div>
+        <Content>
+      <TodayTeacher>
+          <TodayTitle>오늘 등록한 동네강사</TodayTitle>
+          <TodayCard>
+              <TodayTeacherCard/>
+          </TodayCard>
+        </TodayTeacher>
+        <MyTeacher>
+        <MyTeacherTitle>내가 신청한 동네강사</MyTeacherTitle>
+        <TodayCard>
+        <MyTeacherCard/>
+        </TodayCard>
+
+        </MyTeacher>
+        </Content>
+    </div>
+  )
+}
+
+export default SuggestHeader

src/components/SuggestList/SuggestList.syled.ts

@@ -0,0 +1,47 @@
+import styled from "styled-components";
+
+export const SuggestContainer = styled.div`
+  width: 1156px;
+  height: max-content;
+  height: 510px;
+  margin-top: 90px;
+  //position: absolute;
+`
+export const ContentTitle = styled.div`
+  width: 1156px;
+  //height: max-content;
+  height: 64px;
+  position: absolute;
+  display: flex;
+  justify-content: space-between;
+  .maincategory{
+    font-weight: 700;
+font-size: 23px;
+  }
+  .subcategory{
+    margin-top: 7px;
+    font-weight: 500;
+font-size: 18px;
+color: #535353;
+  }
+`
+export const CardContent = styled.div`
+ width: 330px;
+ height: 390px;
+ margin-top: 84px;
+  margin-right: 42px;
+`
+export const SlideButton = styled.div`
+width: 83px;
+height: 36px;
+margin-right: 11px;
+display: flex;
+.carouselLeft{
+  margin-right: 12px;
+}
+img{
+  width: 35px;
+height: 35.7px;
+}
+
+`