Feat/#5

package.json

@@ -20,7 +20,9 @@
     "react": "^19.1.0",
     "react-chartjs-2": "^5.3.0",
     "react-dom": "^19.1.0",
+    "react-player": "^2.16.0",
     "react-router-dom": "^7.6.0",
+    "react-youtube": "^10.1.0",
     "zustand": "^5.0.5"
   },
   "devDependencies": {

src/App/App.css

@@ -5,19 +5,16 @@
     height: 852px;
     justify-content: center;
     align-items: center;
-    background-color: black;
     font-family: 'Pretendard-Regular';
     overflow: hidden;
 }
 
 #root::before {
     content: "";
     position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-image: url('/public/songBG.png');
+    width: 393px;
+    height: 852px;
+    background-image: url('/public/songBG.svg'); 
     background-size: cover;
     background-position: center;
     opacity: 0.3;

src/App/App.tsx

@@ -1,113 +1,15 @@
-import { css } from '@emotion/css';
-import { useNavigate } from 'react-router-dom';
-import "./App.css";
-import album from '../assets/album.png'
-import MusicPlayBar from '../Shared/MusicPlayBar';
-import BackIcon from '../Shared/BackIcon';
-
-const lyrics = [
-  { text: "How do I look? 내가 변했나구?" },
-  { text: "티비를 틀어봐 I'm the woman on the moon" },
-  { text: "네 머리 위로 사뿐사뿐 걸어 feel no gravity" },
-];
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import PlayMusic from "../Pages/PlayMusic";
 
 
 function App() {
-  const navigate = useNavigate();
-  return (
-    <div className={container}>
-      <BackIcon />
-      <div className={Wrapper}>
-        <div className={TopContent}>
-          <img src={album} alt="album" className={albumStyle} />
-          <div className={SongnameStyle}>Bad News</div>
-          <div className={SongMakerStyle}>kiss of life</div>
-        </div>
-          <div className={LyricsWrapper}>
-            {lyrics.map((line, index) => (
-              <div
-              key={index}
-              className={index === 1 ? `${LyricLine} ${highlight}` : LyricLine}
-              onClick={() => navigate('/music-detail')}
-              >
-                {line.text}
-              </div>
-            ))}
-          </div>
-        <MusicPlayBar />
-      </div>
-    </div>
-  );
+    return (
+        <Router>
+            <Routes>
+                <Route path="/" element={<PlayMusic />} />
+            </Routes>
+        </Router>
+    );
 }
 
-
-const container = css`
-  position: relative;
-  width: 361px;
-  height: 798px;
-`;
-
-const Wrapper = css`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-`;
-
-const albumStyle = css`
-  width: 236px;
-  height: 238px;
-  border-radius: 999px;
-  animation: rotateAlbum 16s linear infinite;
-
-  @keyframes rotateAlbum {
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(360deg);
-    }
-  }
-`;
-
-const SongnameStyle = css`
-  margin-top: 20px;
-  font-size: 24px;
-  font-weight: bold;
-  color: #fff;
-`;
-
-const SongMakerStyle = css`
-  margin-top: 4px;
-  font-size: 14px;
-  color: #fff;
-`;
-
-const TopContent = css`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`;
-
-const LyricsWrapper = css`
-  display: flex;
-  flex-direction: column;
-  text-align: center;
-  cursor: pointer;
-  gap: 4px;
-  margin-top: 4%;
-`;
-
-const LyricLine = css`
-  font-size: 14px;
-  color: #ccc;
-`;
-
-const highlight = css`
-  font-size: 16px;
-  font-weight: 600;
-  color: #fff; 
-`;
-
-export default App;
+export default App;