Merge pull request #48 from LikeLionHGU/#43/ConnectSignInAPI-최예라

#43/connect sign in api 최예라
LikeLionHGU · Aug 3, 2024 · cf7c3fb · cf7c3fb
2 parents 5e639a7 + 1f6aa8d
commit cf7c3fb
Show file tree

Hide file tree

Showing 9 changed files with 454 additions and 62 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.7.3",
     "dayjs": "^1.11.12",
     "moment": "^2.30.1",
     "nodejs-pptx": "^1.2.4",

diff --git a/src/App.js b/src/App.js
@@ -13,6 +13,7 @@ import LectureListPage from "./pages/LectureListPage.jsx";
 import LectureDetailPage from "./pages/LectureDetailPage.jsx";
 import LecturePurchasePage from "./pages/LecturePurchasePage.jsx";
 import SignInPage from "./pages/SignInPage.jsx";
+import LoginRedirection from "./pages/LoginRedirection.jsx";
 
 function App() {
   return (
@@ -21,6 +22,7 @@ function App() {
       <Routes>
         <Route path="/" element={<Main />}></Route>
         <Route path="/sign" element={<SignInPage />}></Route>
+        <Route path="/kakao/cb" element={<LoginRedirection />}></Route>
         <Route path="/lecture" element={<LectureListPage />}></Route>
         <Route
           path="/lecture/:courseId"

diff --git a/src/assets/img/defaultUserImg.jpg b/src/assets/img/defaultUserImg.jpg
diff --git a/src/components/Common/DaumPost.jsx b/src/components/Common/DaumPost.jsx
@@ -26,7 +26,7 @@ const DaumPost = ({ setForm }) => {
 
     setForm((prevForm) => ({
       ...prevForm,
-      location: fullAddress,
+      address: fullAddress,
     }));
   };
 

diff --git a/src/components/LectureListPage/LectureDetailContent.jsx b/src/components/LectureListPage/LectureDetailContent.jsx
@@ -8,15 +8,56 @@ import locationIcon from "../../assets/img/PickedCourse.svg";
 import heartIcon from "../../assets/img/heart.svg";
 import heartFalseIcon from "../../assets/img/heartFalse.svg";
 import TeacherProfileModal from "./TeacherProfileModal";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import StarRating from "../Common/StarRating";
 import BgColor from "../Common/BgColor";
+import axios from "axios";
 
 function LectureDetailContent() {
+  const { courseId } = useParams();
+
   const [isTeacherProfileModalOpen, setTeacherProfileModalOpen] =
     useState(false);
+
+  const [data, setData] = useState();
+
   const [isLike, setIsLike] = useState(false);
 
+  useEffect(() => {
+    axios
+      .get(
+        `${process.env.REACT_APP_HOST_URL}/api/course/detail?courseId=${courseId}`,
+        {
+          headers: {
+            Authorization: `Bearer ${localStorage.getItem("jwtToken")}`,
+          },
+        }
+      )
+      .then((response) => {
+        console.log(response.data);
+        setData(response.data);
+      });
+  }, [courseId]);
+
+  const possibleDisabilityTypes = data?.possibleDisabilityType.map(
+    (item) => item.disabilityType
+  );
+  const disabilityTypesText = possibleDisabilityTypes?.join(", ");
+
+  const FormatCourseTime = (courseBlock) => {
+    if (!courseBlock) return "";
+    // 강좌 시간 포맷팅
+    const lectureTimes = courseBlock.map((item) => {
+      const date = new Date(item.date);
+      const formattedDate = `${date.getMonth() + 1}/${date.getDate()}`;
+      const startTime = `${item.takenHour < 10 ? "0" : ""}${item.takenHour}:${
+        item.takenMinute < 10 ? "0" : ""
+      }${item.takenMinute}`;
+      return `${formattedDate}일 ${startTime}`;
+    });
+    return lectureTimes.join(", ");
+  };
+
   const navigate = useNavigate();
 
   const handleCourseApplyBtnClick = () => {
@@ -43,43 +84,45 @@ function LectureDetailContent() {
   console.log("is modal open: ", isTeacherProfileModalOpen);
   console.log("isLike : ", isLike);
 
+  if (!data) return <div>Loading...</div>;
+
   return (
     <BgColor>
       <Wrapper>
         <CourseCard>
           <CourseImg>
-            <img src={defaultImg} alt="기본 강좌 이미지"></img>
+            <img src={defaultImg} alt="기본 강좌 이미지" />
           </CourseImg>
           <CourseDetail>
             <Top>
               <LocationIcon>
-                <img src={locationIcon} alt="위치 아이콘"></img>
+                <img src={locationIcon} alt="위치 아이콘" />
               </LocationIcon>
-              <CourseTitle>물개가 되는 법</CourseTitle>
+              <CourseTitle>{data.title}</CourseTitle>
               <Like>
                 <img
                   onClick={handleHeartIconClick}
                   src={isLike ? heartIcon : heartFalseIcon}
                   alt="하트 아이콘"
-                ></img>
+                />
               </Like>
             </Top>
             <Middle>
               <Teacher>
-                <DetailText>• 강사 : 이다빈</DetailText>
+                <DetailText>• 강사 : {data.teacher.name}</DetailText>
                 <Score>
-                  <StarRating score={3.5} />
-                  <StarRate>(45)</StarRate>
+                  <StarRating score={data.teacher.score} />
+                  <StarRate>({data.teacher.reviewCount})</StarRate>
                 </Score>
               </Teacher>
-              <DetailText>• 연락처 : 010-1234-1234</DetailText>
+              <DetailText>• 연락처 : {data.teacher.contactNumber}</DetailText>
+              <DetailText>• 주소 : {data.location}</DetailText>
               <DetailText>
-                • 주소 : 경북 포항시 북구 법원로 98번길 36 1층
+                • 가능한 장애유형 : {disabilityTypesText} 장애 가능
               </DetailText>
               <DetailText>
-                • 가능한 장애유형 : 뇌병변 / 시,청각 장애 가능
+                • 강좌 시간 : {FormatCourseTime(data.courseBlock)}
               </DetailText>
-              <DetailText>• 강좌 시간 : 8/1, 8/2, 8/3 오전 10-12시</DetailText>
             </Middle>
           </CourseDetail>
         </CourseCard>
@@ -89,11 +132,7 @@ function LectureDetailContent() {
         <CourseInfo>
           <InfoTitle>개설 강좌정보</InfoTitle>
           <InfoContent>
-            <InfoText>
-              모두가 차별없이 건강한 세상! <br /> <br /> 장애를 가지고 있어도
-              수영을 배우는 것은 식은 죽 먹기! <br /> 즐거운 마음으로 수영을
-              배우실 여러분들을 초대합니다
-            </InfoText>
+            <InfoText>{data.description}</InfoText>
           </InfoContent>
         </CourseInfo>
         <Btn>