6회차 과제 - 권예원

src/App.css

@@ -0,0 +1,12 @@
+.app {
+  font-family: Arial, sans-serif;
+  background-color: black;
+}
+
+body, html {
+  margin: 0;
+  padding: 0;
+  background-color: #000; /* 전체 배경을 검은색으로 설정 */
+  color: #fff; /* 텍스트 색상을 흰색으로 설정 */
+  height: 100%; /* 전체 높이를 차지하도록 설정 */
+}

src/App.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import Header from './components/Header/Header';
+import MainContent from './components/MainContent/MainContent';
+import Shorts from './components/Shorts/Shorts';
+import './App.css';
+
+function App() {
+  return (
+    <div className="app">
+      <Header />
+      <MainContent />
+      <Shorts />
+    </div>
+  );
+}
+
+export default App;

src/components/Header/Header.css

@@ -0,0 +1,33 @@
+
+
+.header {
+    background-color: black;
+    color: white;
+    display: flex;
+    justify-content: space-between;
+    padding: 5px;
+    align-items: center;
+    height: 40px; 
+
+  }
+
+  .search-input {
+    color: rgb(228, 228, 228);
+    background-color: rgb(59, 59, 59);
+    flex-grow: 1;
+    margin-right: 20px;
+    padding: 6px; /* 패딩 줄임 */
+    margin-top: 0; /* 상단 마진 제거 */
+    margin-bottom: 0; /* 하단 마진 제거 */
+    width :400px;
+
+  }
+
+
+  .header-user{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-right: 20px;
+    padding: 8px;
+  }

src/components/Header/Header.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import './Header.css';
+
+function Header() {
+  return (
+    <div className= 'header'>
+        <div className='header-logo'>
+            <h3>Youtube</h3>
+        </div>
+
+        <div>
+            <div className="header-input">
+                <input type="text" placeholder="Search" className="search-input"/>
+                {/* 아이콘 및 추가 컴포넌트 삽입 가능 */}
+            </div>
+        </div>
+
+        <div className='header-user'>
+            <h4>Make Video/</h4>
+            <h4>Alarm/</h4>
+            <h4>User</h4>
+        </div>
+
+
+    </div>
+
+  );
+}
+
+export default Header;

src/components/MainContent/MainContent.css

@@ -0,0 +1,15 @@
+.main-content {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start; /* 가로 정렬 */
+    padding: 0;
+    gap: 10px; /* 카드 사이의 간격 */
+}
+
+.video-card {
+    flex: 1 1 calc((100% / 6) - 20px); /* 컨테이너 너비의 1/6에서 간격만큼 빼줌 */
+    margin: 5px;
+    height: 320px; /* 고정 높이 설정, 필요에 따라 조정 */
+    background-color: #333;
+    color: white;
+}

src/components/MainContent/MainContent.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import VideoCard from '../VideoCard/VideoCard';
+import './MainContent.css';
+
+function MainContent() {
+    const videos = new Array(5).fill({ title: "Sample Video", views: "1M views", duration: "12:03" }); 
+
+    return (
+      <div className="main-content">
+        {videos.map((video, index) => (
+          <VideoCard key={index} video={video} />
+        ))}
+      </div>
+    );
+  }
+
+
+export default MainContent;

src/components/Shorts/Shorts.css

@@ -0,0 +1,18 @@
+.Shorts {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    gap: 10px;
+}
+
+.video-grid{
+
+    max-width: 270px;  
+    flex: 1 1 270px;  
+    margin: 5px;
+    height: 50px; /* 고정 높이 설정, 필요에 따라 조정 */
+    background-color: #333;
+    color: white;
+
+    border-radius: 20px;
+}

src/components/Shorts/Shorts.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import VideoGrid from '../VideoGrid/VideoGrid';
+import './Shorts.css';
+
+function Shorts() {
+    const videos = new Array(8).fill({ title: "Sample Video", views: "1M views", duration: "12:03" }); 
+
+    return (
+      <div className="Shorts">
+          {videos.map((video, index) => (
+            <VideoGrid key={index} video={video} />
+          ))}
+      </div>
+    );
+  }
+
+
+export default Shorts;

src/components/VideoCard/VideoCard.css

@@ -0,0 +1,18 @@
+.video-card {
+    width: 270px;
+    margin: 10px;
+    color: white;
+    background: #000000;
+    border-radius: 10;
+  }
+
+  .thumbnail {
+    width: 90%;
+    height: auto;
+  }
+
+  .video-info {
+    padding: 5px;
+    margin-top: -10px 
+ }
+

src/components/VideoCard/VideoCard.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import './VideoCard.css';
+import videoImage from './video.png'; 
+
+function VideoCard({ video }) {
+    return (
+      <div className="video-card">
+        <img src={videoImage} alt="Thumbnail" className="video-thumbnail" />
+        <div className="video-info">
+          <h5>{video.title}</h5>
+          <p>{video.views} • {video.duration}</p>
+        </div>
+      </div>
+    );
+  }
+
+export default VideoCard;

src/components/VideoGrid/VideoGrid.css

@@ -0,0 +1,20 @@
+.video-grid {
+    width: 50px;
+    margin: 10px;
+    color: white;
+    background: #000000;
+    border-radius: 10px;
+  }
+
+  .video-thumbnail {
+    width: 100%;       
+    height: 160px;     
+    object-fit: cover;  
+}
+
+
+  .video-info {
+    padding: 5px;
+    margin-top: -10px 
+ }
+

src/components/VideoGrid/VideoGrid.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import './VideoGrid.css';
+import videoImage from './video.png';  // 이미지 파일의 경로를 정확히 지정해야 함
+
+function VideoGrid({ video }) {
+    return (
+      <div className="video-grid">
+        <img src={videoImage} alt="Thumbnail" className="video-thumbnail" />
+        <div className="video-info">
+          <h5>{video.title}</h5>
+          <p>{video.views} • {video.duration}</p>
+        </div>
+      </div>
+    );
+  }
+
+export default VideoGrid;

src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

src/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

src/reportWebVitals.js

@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

src/setupTests.js

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';