Merge pull request #83 from LikeLionHGU/#56/UserPointPage-최예라

#56/user point page 최예라
LikeLionHGU · Aug 5, 2024 · ebb3c3e · ebb3c3e
2 parents 8154554 + 5d9b969
commit ebb3c3e
Show file tree

Hide file tree

Showing 6 changed files with 163 additions and 61 deletions.
diff --git a/src/components/Common/GrayInfoBox.jsx b/src/components/Common/GrayInfoBox.jsx
@@ -9,7 +9,7 @@ export default GrayInfoBox;
 
 const Wrapper = styled.div`
   background-color: #f1f1f1;
-  height: 45px;
+  /* height: 45px; */
   display: flex;
   align-items: center;
   padding-left: 18px;
@@ -18,4 +18,6 @@ const Wrapper = styled.div`
   margin-top: 10px;
   border-radius: 15px;
   max-width: 310px;
+  padding-top: 11.5px;
+  padding-bottom: 11.5px;
 `;
diff --git a/src/components/MainPage/SignInContent.jsx b/src/components/MainPage/SignInContent.jsx
@@ -136,17 +136,17 @@ function SignInContent() {
                   type="radio"
                   id="male"
                   name="sex"
-                  value={false}
-                  checked={form.sex === false}
+                  value={true}
+                  checked={form.sex === true}
                   onChange={handleChange}
                 />
                 <GenderLabel htmlFor="male">남성</GenderLabel>
                 <input
                   type="radio"
                   id="female"
                   name="sex"
-                  value={true}
-                  checked={form.sex === true}
+                  value={false}
+                  checked={form.sex === false}
                   onChange={handleChange}
                 />
                 <GenderLabel htmlFor="female">여성</GenderLabel>

diff --git a/src/components/UserPage/UserCompleteLetureContent.jsx b/src/components/UserPage/UserCompleteLetureContent.jsx
@@ -5,6 +5,7 @@ import CourseCard from "../Common/CourseCard";
 import axios from "axios";
 import { Link } from "react-router-dom";
 import pickleImg from "../../assets/img/UserLevel0.svg";
+import grayPickle from "../../assets/img/grayUserLevel0.svg";
 
 function UserCompleteLetureContent() {
   const [userData, setUserData] = useState();
@@ -61,24 +62,35 @@ function UserCompleteLetureContent() {
       <Content>
         <Title>{userData.nickname} 님! 지금까지 수강했던 강좌들이에요</Title>
         <Count>총 {data.length}개를 수강했습니다</Count>
-        <CourseContainer>
-          {data.map((data, index) => (
-            <Link
-              key={data.id}
-              style={{
-                textDecoration: "none",
-                color: "black",
-                display: "flex",
-              }}
-              to={`/lecture/${data.id}`}
-            >
-              <React.Fragment key={data.id}>
-                <CourseCard course={data} />
-                {index % 2 === 0 && <CourseDivideLine />}
-              </React.Fragment>
-            </Link>
-          ))}
-        </CourseContainer>
+        {data.length === 0 ? (
+          <CourseContainer>
+            <NoCourse>
+              <div>
+                <img src={grayPickle} alt="회색 피클 이미지" />
+                <NoCourseText>아직 완료한 강좌가 없습니다.</NoCourseText>
+              </div>
+            </NoCourse>
+          </CourseContainer>
+        ) : (
+          <CourseContainer>
+            {data.map((data, index) => (
+              <Link
+                key={data.id}
+                style={{
+                  textDecoration: "none",
+                  color: "black",
+                  display: "flex",
+                }}
+                to={`/lecture/${data.id}`}
+              >
+                <React.Fragment key={data.id}>
+                  <CourseCard course={data} />
+                  {index % 2 === 0 && <CourseDivideLine />}
+                </React.Fragment>
+              </Link>
+            ))}
+          </CourseContainer>
+        )}
       </Content>
     </Wrapper>
   );
@@ -131,3 +143,25 @@ const LoadingText = styled.div`
   margin-top: 30px;
   font-size: 20px;
 `;
+
+const NoCourse = styled.div`
+  display: flex;
+  margin-left: 350px;
+  margin-top: 60px;
+  height: 500px;
+  width: 1040px;
+  /* border: 1px solid red; */
+
+  img {
+    height: 200px;
+    padding-left: 50px;
+    /* border: 1px solid red; */
+  }
+`;
+
+const NoCourseText = styled.div`
+  font-size: 20px;
+  margin-top: 10px;
+  color: #9c9c9c;
+  padding-left: 20px;
+`;
diff --git a/src/components/UserPage/UserEditProfileContent.jsx b/src/components/UserPage/UserEditProfileContent.jsx
@@ -185,7 +185,7 @@ function UserEditProfileContent() {
             <UserInfo>성별</UserInfo>
             <GrayInfoBox>
               <div onClick={handleNoEditField}>
-                {formData.sex ? "여성" : "남성"}
+                {formData.sex ? "남성" : "여성"}
               </div>
             </GrayInfoBox>
             <UserInfo>전화번호</UserInfo>

diff --git a/src/components/UserPage/UserLearningContent.jsx b/src/components/UserPage/UserLearningContent.jsx
@@ -5,6 +5,7 @@ import CourseDivideLine from "../Common/CourseDivideLine";
 import axios from "axios";
 import { Link } from "react-router-dom";
 import pickleImg from "../../assets/img/UserLevel0.svg";
+import grayPickle from "../../assets/img/grayUserLevel0.svg";
 
 function UserLearningContent() {
   const [userData, setUserData] = useState();
@@ -56,25 +57,36 @@ function UserLearningContent() {
   return (
     <Wrapper>
       <Content>
-        <Title>{userData.nickname} 님! 현재 수강 중인 강좌예요</Title>
-        <CourseContainer>
-          {data.map((data, index) => (
-            <Link
-              key={data.id}
-              style={{
-                textDecoration: "none",
-                color: "black",
-                display: "flex",
-              }}
-              to={`/lecture/${data.id}`}
-            >
-              <React.Fragment key={data.id}>
-                <CourseCard course={data} />
-                {index % 2 === 0 && <CourseDivideLine />}
-              </React.Fragment>
-            </Link>
-          ))}
-        </CourseContainer>
+        <Title>{userData.nickname} 님! 현재 수강 중인 강좌에요</Title>
+        {data.length === 0 ? (
+          <CourseContainer>
+            <NoCourse>
+              <div>
+                <img src={grayPickle} alt="회색 피클 이미지" />
+                <NoCourseText>아직 수강 중인 강좌가 없습니다.</NoCourseText>
+              </div>
+            </NoCourse>
+          </CourseContainer>
+        ) : (
+          <CourseContainer>
+            {data.map((data, index) => (
+              <Link
+                key={data.id}
+                style={{
+                  textDecoration: "none",
+                  color: "black",
+                  display: "flex",
+                }}
+                to={`/lecture/${data.id}`}
+              >
+                <React.Fragment key={data.id}>
+                  <CourseCard course={data} />
+                  {index % 2 === 0 && <CourseDivideLine />}
+                </React.Fragment>
+              </Link>
+            ))}
+          </CourseContainer>
+        )}
       </Content>
     </Wrapper>
   );
@@ -121,3 +133,24 @@ const LoadingText = styled.div`
   margin-top: 30px;
   font-size: 20px;
 `;
+
+const NoCourse = styled.div`
+  display: flex;
+  margin-left: 350px;
+  margin-top: 90px;
+  height: 500px;
+  width: 1040px;
+  /* border: 1px solid red; */
+
+  img {
+    height: 200px;
+    padding-left: 50px;
+    /* border: 1px solid red; */
+  }
+`;
+
+const NoCourseText = styled.div`
+  font-size: 20px;
+  margin-top: 10px;
+  color: #9c9c9c;
+`;
diff --git a/src/components/UserPage/UserSavedLectureContent.jsx b/src/components/UserPage/UserSavedLectureContent.jsx
@@ -5,6 +5,7 @@ import CourseDivideLine from "../Common/CourseDivideLine";
 import pickleImg from "../../assets/img/UserLevel0.svg";
 import axios from "axios";
 import { Link } from "react-router-dom";
+import grayPickle from "../../assets/img/grayUserLevel0.svg";
 
 function UserSavedLectureContent() {
   const [data, setData] = useState();
@@ -52,24 +53,35 @@ function UserSavedLectureContent() {
     <Wrapper>
       <Content>
         <Title>{userData.nickname} 님! 찜한 강좌들이에요</Title>
-        <CourseContainer>
-          {data?.map((data, index) => (
-            <Link
-              key={data.id}
-              style={{
-                textDecoration: "none",
-                color: "black",
-                display: "flex",
-              }}
-              to={`/lecture/${data.id}`}
-            >
-              <React.Fragment key={data.id}>
-                <CourseCard course={data} />
-                {index % 2 === 0 && <CourseDivideLine />}
-              </React.Fragment>
-            </Link>
-          ))}
-        </CourseContainer>
+        {data.length === 0 ? (
+          <CourseContainer>
+            <NoCourse>
+              <div>
+                <img src={grayPickle} alt="회색 피클 이미지" />
+                <NoCourseText>아직 찜한 강좌가 없습니다.</NoCourseText>
+              </div>
+            </NoCourse>
+          </CourseContainer>
+        ) : (
+          <CourseContainer>
+            {data.map((course, index) => (
+              <Link
+                key={course.id}
+                style={{
+                  textDecoration: "none",
+                  color: "black",
+                  display: "flex",
+                }}
+                to={`/lecture/${course.id}`}
+              >
+                <React.Fragment key={course.id}>
+                  <CourseCard course={course} />
+                  {index % 2 === 0 && <CourseDivideLine />}
+                </React.Fragment>
+              </Link>
+            ))}
+          </CourseContainer>
+        )}
       </Content>
     </Wrapper>
   );
@@ -116,3 +128,24 @@ const LoadingText = styled.div`
   margin-top: 30px;
   font-size: 20px;
 `;
+
+const NoCourse = styled.div`
+  display: flex;
+  margin-left: 370px;
+  margin-top: 90px;
+  height: 500px;
+  width: 1040px;
+  /* border: 1px solid red; */
+
+  img {
+    height: 200px;
+    padding-left: 30px;
+    /* border: 1px solid red; */
+  }
+`;
+
+const NoCourseText = styled.div`
+  font-size: 20px;
+  margin-top: 10px;
+  color: #9c9c9c;
+`;