[Feat/FE] 최종 버전 001 메인페이지를 구현한다.

src/App.jsx

@@ -7,7 +7,6 @@ import { ModalProvider } from "./librarys/context.jsx";
 import PlayerPage from "./pages/PlayerPage.jsx";
 import store from "./redux/store.js";
 
-import LoginModal from "./components/LoginModal.jsx";
 import { useEffect } from "react";
 import { loadToken } from "./librarys/login-api.js";
 import { login } from "./redux/userSlice.js";
@@ -53,7 +52,6 @@ function App() {
     <Provider store={store}>
       <ModalProvider>
         <Container>
-          <LoginModal />
           <Router>
             <Routes>
               {routerList.map((item, index) => (

src/App.scss

@@ -2,6 +2,6 @@
   width: 100%;
   height: 100vh;
   margin: 0 auto;
-  background-color: #fff;
+  background-color: #1E1E1E;
   font-family: "SUIT Variable", sans-serif;
 }

src/components/ExerciseCard.jsx

@@ -0,0 +1,93 @@
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+const CourseCardContainer = styled.div`
+  width: 360px;
+  height: 310px;
+`;
+
+
+const CourseImage = styled.div`
+  height: 240px;
+  width: 360px;
+  background-image: url(${props => props.image});
+  background-size: cover;
+  position: relative;
+  margin-bottom: 10px;
+`;
+
+
+const TimeInfo = styled.div`
+  width: 57px;
+  height: 23px;
+  background-color: rgba(14, 13, 13, 0.8);
+  border-radius: 4px;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const TimeText = styled.span`
+  color: #F2F2F2;
+  font-size: 12px;
+`;
+
+const CourseTitle = styled.span`
+  font-size: 20px;
+  color: #F2F2F2;
+`;
+
+const TagButton = styled.span`
+  margin-top: 10px;
+  height: 28px;
+  padding: 0 10px;
+  background-color: #242424;
+  border-radius: 50px;
+  border: 1px solid #444444;
+  font-size: 16px;
+  color: #F2F2F2;
+  margin-right: 5px;
+  display: inline-flex;
+  align-items: center;
+`;
+
+const Hash = styled.span`
+  color: #727272;
+`;
+
+const ExerciseCard = ({ id, image, title, tags }) => {  
+  return (
+    <Link to={`/program/${id}`} style={{ textDecoration: 'none', color: 'inherit' }}>
+      <CourseCardContainer>
+      <CourseImage image={image}>
+    <TimeInfo>
+        <TimeText>00:00</TimeText> 
+    </TimeInfo>
+</CourseImage>
+
+        <CourseTitle>{title}</CourseTitle>
+        <div>
+          {tags && tags.map((tag, index) => (
+            <TagButton key={index}>
+              <Hash>#</Hash>
+              {tag}
+            </TagButton>
+          ))}
+        </div>
+      </CourseCardContainer>
+    </Link>
+  );
+};
+
+ExerciseCard.propTypes = {
+  id: PropTypes.number.isRequired,
+  image: PropTypes.string,
+  title: PropTypes.string.isRequired,
+  tags: PropTypes.arrayOf(PropTypes.string)
+};
+
+export default ExerciseCard;

src/components/ExerciseList.jsx

@@ -0,0 +1,36 @@
+import { useState, useEffect } from "react";
+import { getAllCourses } from "../librarys/exercise-api";
+import ExerciseCard from "../components/ExerciseCard";
+import styled from "styled-components";
+
+const Container = styled.div`
+  width: 1200px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px; 
+  margin-top: 20px;
+  margin-left:10px;
+`;
+
+function ExerciseList() {
+  const [courses, setCourses] = useState([]);
+
+  useEffect(() => {
+    async function fetchCourses() {
+      const data = await getAllCourses();
+      setCourses(data);
+    }
+
+    fetchCourses();
+  }, []);
+
+  return (
+    <Container>
+      {courses.map((course) => (
+        <ExerciseCard key={course.id} {...course} />
+      ))}
+    </Container>
+  );
+}
+
+export default ExerciseList;

src/components/FilterButtons.jsx

@@ -0,0 +1,87 @@
+import { useState } from "react";
+import styled from "styled-components";
+
+const FilterSection = styled.div`
+  display: flex;
+  align-items: center;
+  margin-right: 10px;
+  margin-top: 20px;
+`;
+
+const Title = styled.span`
+  font-size: 20px;
+  font-weight: bold;
+  color: #5f5f5f;
+  width: 120px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-right: 10px;
+`;
+
+const Divider = styled.div`
+  width: 2px;
+  height: 20px;
+  background-color: #5f5f5f;
+  margin-right: 10px;
+`;
+
+const Button = styled.button`
+  width: 100px;
+  height: 36px;
+  background-color: ${(props) => (props.selected ? "#6968CC" : "#1E1E1E")};
+  color: #f2f2f2;
+  border-radius: 10px;
+  font-size: 16px;
+  border: none;
+  margin-right: 5px;
+
+  &:focus {
+    outline: none;
+  }
+`;
+
+const FilterButtons = () => {
+  const [selectedCategory, setSelectedCategory] = useState("전체");
+  const [selectedPose, setSelectedPose] = useState("전체");
+
+  return (
+    <div>
+      <FilterSection>
+        <Title>카테고리</Title>
+        <Divider />
+        {["전체", "팔", "어깨", "무릎", "허벅지"].map((category) => (
+          <Button
+            key={category}
+            selected={selectedCategory === category}
+            onClick={() => {
+              setSelectedCategory((current) =>
+                current === category ? "전체" : category,
+              );
+            }}
+          >
+            {category}
+          </Button>
+        ))}
+      </FilterSection>
+
+      <FilterSection>
+        <Title>자세</Title>
+        <Divider />
+        {["전체", "선 자세", "앉은 자세", "누운 자세"].map((pose) => (
+          <Button
+            key={pose}
+            selected={selectedPose === pose}
+            onClick={() => {
+              setSelectedPose((current) => (current === pose ? "전체" : pose));
+            }}
+          >
+            {pose}
+          </Button>
+        ))}
+      </FilterSection>
+    </div>
+  );
+};
+
+export default FilterButtons;

src/components/Header.jsx

@@ -1,116 +1,33 @@
+import SearchBar from "./SearchBar";
+import UploadButton from "./UploadButton";
 import styled from "styled-components";
-import { Link } from "react-router-dom";
-import { useDispatch, useSelector } from "react-redux";
-import {
-  selectName,
-  selectIsLoggedIn,
-  selectIsAdmin,
-  logout,
-} from "../redux/userSlice.js";
-import { show } from "../redux/modalSlice.js";
-import { clearToken } from "../librarys/login-api.js";
+import LogoImage from "../assets/icons/LOGO.png";
 
-const HeaderWrapper = styled.header`
+const HeaderContainer = styled.div`
   display: flex;
   align-items: center;
-  padding: 10px 20px;
-  font-weight: bold;
-  position: relative;
-  margin-top: 20px;
-`;
-
-const Logo = styled.div`
-  font-size: 24px;
-  font-weight: bold;
-  position: absolute;
-  left: 100px;
-  top: 50%;
-  transform: translateY(-50%);
-`;
-
-const Nav = styled.nav`
-  display: flex;
-  position: absolute;
-  right: 70px;
-  align-items: center;
+  margin-bottom:-10px;
 `;
 
-const MainLink = styled(Link)`
-  text-decoration: none;
-  color: black;
-  &:hover,
-  &:active,
-  &:focus {
-    text-decoration: none;
-    outline: none;
-  }
+const Logo = styled.img`
+  margin-top: 20px;
+  margin-left: 420px;
+  margin-right: 10px;
 `;
 
-const Divider = styled.div`
-  height: 30px;
-  width: 1px;
-  background-color: black;
-  margin-left: 20px;
-  margin-right: 30px;
+const Spacer = styled.div`
+  width: 10px;
 `;
 
 const Header = () => {
-  const dispatch = useDispatch();
-
-  const userName = useSelector(selectName);
-  const isLoggedIn = useSelector(selectIsLoggedIn);
-  const isAdmin = useSelector(selectIsAdmin);
-
-  const handleLoginClick = () => {
-    if (isLoggedIn) {
-      if (confirm("로그아웃 하시겠습니끼?")) {
-        clearToken();
-        dispatch(logout());
-      }
-    } else {
-      dispatch(show("login")); // 로그인 모달을 표시
-    }
-  };
-
   return (
-    <HeaderWrapper>
-      <Logo>
-        <MainLink to="/">Re:Hab</MainLink>
-      </Logo>
-      <Nav>
-        {isAdmin ? (
-          <>
-            <MainLink to="/register" style={{ marginRight: "50px" }}>
-              운동등록
-            </MainLink>
-            <MainLink to="/" style={{ marginRight: "40px" }}>
-              메인 페이지
-            </MainLink>
-            <MainLink to="/mycourse" style={{ marginRight: "20px" }}>
-              수강내역
-            </MainLink>
-          </>
-        ) : isLoggedIn ? (
-          <>
-            <MainLink to="/" style={{ marginRight: "40px" }}>
-              메인 페이지
-            </MainLink>
-            <MainLink to="/mycourse" style={{ marginRight: "20px" }}>
-              수강내역
-            </MainLink>
-          </>
-        ) : (
-          <MainLink to="/" style={{ marginRight: "40px" }}>
-            메인 페이지
-          </MainLink>
-        )}
-        <Divider />
-
-        <MainLink to="#" onClick={handleLoginClick}>
-          {isLoggedIn ? userName : "로그인"}
-        </MainLink>
-      </Nav>
-    </HeaderWrapper>
+    <HeaderContainer>
+      <Logo src={LogoImage} alt="Logo" />
+      <Spacer />
+      <SearchBar/>
+      <Spacer />
+      <UploadButton />
+    </HeaderContainer>
   );
 };