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

#43/connect sign in api 최예라
LikeLionHGU · Aug 3, 2024 · fd584ec · fd584ec
2 parents 5de9dd2 + e9eee26
commit fd584ec
Show file tree

Hide file tree

Showing 9 changed files with 54 additions and 13 deletions.
diff --git a/src/components/Common/CourseCard.jsx b/src/components/Common/CourseCard.jsx
@@ -2,7 +2,6 @@ import React from "react";
 import styled from "styled-components";
 import StarRating from "./StarRating";
 import heartIcon from "../../assets/img/heart.svg";
-import defaultImg from "../../assets/img/defaultImg.jpg";
 
 function CourseCard({ course }) {
   const possibleDisabilityTypes = course.possibleDisabilityType?.map(
@@ -13,7 +12,7 @@ function CourseCard({ course }) {
   return (
     <Card>
       <CourseImg>
-        <img src={defaultImg} alt="기본 강좌 이미지" />
+        <img src={course.imageURL} alt="기본 강좌 이미지" />
       </CourseImg>
       <InfoSection>
         <Top>

diff --git a/src/components/Common/HeaderLightVer.jsx b/src/components/Common/HeaderLightVer.jsx
@@ -8,6 +8,7 @@ import LoginModal from "../MainPage/LoginModal";
 function HeaderLightVer() {
   const [isLoginModalOpen, setLoginModalOpen] = useState(false);
   const navigate = useNavigate();
+  const token = localStorage.getItem("jwtToken");
 
   const handleMenuClick = (url) => {
     navigate(url);
@@ -29,6 +30,12 @@ function HeaderLightVer() {
     navigate("/sign");
   };
 
+  const handleSignOutBtnClick = () => {
+    localStorage.removeItem("jwtToken");
+    window.location.reload();
+    navigate("/");
+  };
+
   return (
     <Wrapper>
       <Menus>
@@ -44,8 +51,14 @@ function HeaderLightVer() {
         </Logo>
       </Menus>
       <SignInSection>
-        <SignIn onClick={toggleLoginModal}>로그인</SignIn>
-        <SignIn onClick={handleSignInClick}>회원가입</SignIn>
+        {!token ? (
+          <>
+            <SignIn onClick={toggleLoginModal}>로그인</SignIn>
+            <SignIn onClick={handleSignInClick}>회원가입</SignIn>
+          </>
+        ) : (
+          <SignOut onClick={handleSignOutBtnClick}>로그아웃</SignOut>
+        )}
       </SignInSection>
       {isLoginModalOpen && <LoginModal toggleModal={toggleLoginModal} />}
       <SearchSection>
@@ -138,3 +151,11 @@ const SignIn = styled.div`
   font-size: 14px;
   cursor: pointer;
 `;
+
+const SignOut = styled.div`
+  color: #1997fc;
+  font-size: 14px;
+  cursor: pointer;
+  /* border: 1px solid red; */
+  margin-left: 70px;
+`;
diff --git a/src/components/LectureListPage/LectureDetailContent.jsx b/src/components/LectureListPage/LectureDetailContent.jsx
@@ -112,7 +112,7 @@ function LectureDetailContent() {
       <Wrapper>
         <CourseCard>
           <CourseImg>
-            <img src={defaultImg} alt="기본 강좌 이미지" />
+            <img src={data.imageURL} alt="기본 강좌 이미지" />
           </CourseImg>
           <CourseDetail>
             <Top>

diff --git a/src/components/LectureListPage/TeacherProfileModal.jsx b/src/components/LectureListPage/TeacherProfileModal.jsx
@@ -54,7 +54,7 @@ function TeacherProfileModal({ toggleModal }) {
                 <DetailContent>{data.teacher.reviewCount}</DetailContent>
               </CourseReview>
               <CourseRate>
-                <DetailCategory>강의평점</DetailCategory>
+                <DetailCategory>강좌평점</DetailCategory>
                 <div style={{ display: "flex" }}>
                   <img src={star} alt="별 이미지"></img>
                   <DetailContent>{data.teacher.score}</DetailContent>

diff --git a/src/components/MainPage/HeaderMain.jsx b/src/components/MainPage/HeaderMain.jsx
@@ -8,6 +8,7 @@ import LoginModal from "./LoginModal";
 function HeaderMain() {
   const [isLoginModalOpen, setLoginModalOpen] = useState(false);
   const navigate = useNavigate();
+  const token = localStorage.getItem("jwtToken");
 
   const toggleLoginModal = () => {
     setLoginModalOpen((prevState) => !prevState);
@@ -17,6 +18,11 @@ function HeaderMain() {
     navigate("/sign");
   };
 
+  const handleSignOutBtnClick = () => {
+    localStorage.removeItem("jwtToken");
+    window.location.reload();
+  };
+
   useEffect(() => {
     document.body.style.overflow = isLoginModalOpen ? "hidden" : "auto";
   }, [isLoginModalOpen]);
@@ -44,8 +50,14 @@ function HeaderMain() {
         </Logo>
       </Menus>
       <SignInSection>
-        <SignIn onClick={toggleLoginModal}>로그인</SignIn>
-        <SignIn onClick={handleSignInClick}>회원가입</SignIn>
+        {!token ? (
+          <>
+            <SignIn onClick={toggleLoginModal}>로그인</SignIn>
+            <SignIn onClick={handleSignInClick}>회원가입</SignIn>
+          </>
+        ) : (
+          <SignOut onClick={handleSignOutBtnClick}>로그아웃</SignOut>
+        )}
       </SignInSection>
       {isLoginModalOpen && <LoginModal toggleModal={toggleLoginModal} />}
       <SearchSection>
@@ -131,10 +143,19 @@ const SignInSection = styled.div`
   top: 30%;
   transform: translateX(-50%);
   z-index: 1;
+  /* border: 1px solid red; */
 `;
 
 const SignIn = styled.div`
   color: #1997fc;
   font-size: 14px;
   cursor: pointer;
 `;
+
+const SignOut = styled.div`
+  color: #1997fc;
+  font-size: 14px;
+  cursor: pointer;
+  /* border: 1px solid red; */
+  margin-left: 70px;
+`;
diff --git a/src/components/UserPage/SideBar.jsx b/src/components/UserPage/SideBar.jsx
@@ -26,8 +26,8 @@ function SideBar() {
         </Menu>
         <Menu onClick={() => handleMenuClick("/user/saved")}>
           <Section>
-            <img src={likedCourseIcon} alt="찜한 강의 아이콘"></img>
-            <Text>찜한 강의</Text>
+            <img src={likedCourseIcon} alt="찜한 강좌 아이콘"></img>
+            <Text>찜한 강좌</Text>
           </Section>
         </Menu>
         <Menu onClick={() => handleMenuClick("/user/learning")}>

diff --git a/src/components/UserPage/UserCompleteLetureContent.jsx b/src/components/UserPage/UserCompleteLetureContent.jsx
@@ -8,7 +8,7 @@ function UserCompleteLetureContent() {
   return (
     <Wrapper>
       <Content>
-        <Title>최예라 님! 지금까지 수강했던 강의들이에요</Title>
+        <Title>최예라 님! 지금까지 수강했던 강좌들이에요</Title>
         <Count>총 10개를 수강했습니다</Count>
         <CourseContainer>
           {data.map((course, index) => (

diff --git a/src/components/UserPage/UserLearningContent.jsx b/src/components/UserPage/UserLearningContent.jsx
@@ -8,7 +8,7 @@ function UserLearningContent() {
   return (
     <Wrapper>
       <Content>
-        <Title>최예라 님! 현재 수강 중인 강의에요</Title>
+        <Title>최예라 님! 현재 수강 중인 강좌에요</Title>
         <CourseContainer>
           {data.map((course, index) => (
             <React.Fragment key={course.courseId}>

diff --git a/src/components/UserPage/UserSavedLectureContent.jsx b/src/components/UserPage/UserSavedLectureContent.jsx
@@ -26,7 +26,7 @@ function UserSavedLectureContent() {
   return (
     <Wrapper>
       <Content>
-        <Title>최예라 님! 찜한 강의들이에요</Title>
+        <Title>최예라 님! 찜한 강좌들이에요</Title>
         <CourseContainer>
           {data?.map((data, index) => (
             <React.Fragment key={data.courseId}>