{sortedDate.map((item) => {
diff --git a/src/components/SearchBar.jsx b/src/components/SearchBar.jsx
new file mode 100644
index 0000000..b3f6a9c
--- /dev/null
+++ b/src/components/SearchBar.jsx
@@ -0,0 +1,22 @@
+import { useState } from 'react'
+import './css/SearchBar.css'
+import Button from './Button';
+const SearchBar = ({ setQuery }) => {
+ const [inputValue, setInputValue] = useState('');
+
+ const handleInputChange = (e) => {
+ setInputValue(e.target.value);
+ };
+
+ const handleSearch = () => {
+ setQuery(inputValue);
+ };
+ return (
+
+
+
+
+ )
+}
+
+export default SearchBar
\ No newline at end of file
diff --git a/src/components/Selector.jsx b/src/components/Selector.jsx
new file mode 100644
index 0000000..9703076
--- /dev/null
+++ b/src/components/Selector.jsx
@@ -0,0 +1,36 @@
+import './css/Selector.css'
+import { getLogoImage } from '../utils/getLogoImage'
+
+const keywordList = [
+ { id: 1, name: "React", value: "리액트" },
+ { id: 2, name: "Springboot", value: "스프링부트" },
+ { id: 3, name: "AWS", value: "aws클라우드" },
+ { id: 4, name: "Docker", value: "도커" },
+ { id: 5, name: "Programming Language", value: "프로그래밍 언어 추천" },
+]
+
+const Selector = ({ setQuery }) => {
+ const onSearchKeyword = (keyword) => {
+ setQuery(keyword.value);
+ }
+
+ return (
+
+ {
+ keywordList.map((keyword) => {
+ return (
+
+ )
+ })
+ }
+
+ )
+}
+
+export default Selector
\ No newline at end of file
diff --git a/src/components/VideoList.jsx b/src/components/VideoList.jsx
new file mode 100644
index 0000000..f0ab738
--- /dev/null
+++ b/src/components/VideoList.jsx
@@ -0,0 +1,57 @@
+import { youtubeApi } from '../api/youtubeApi';
+import { useEffect, useState } from 'react';
+import './css/VideoList.css';
+import SearchBar from './SearchBar';
+import Selector from './Selector'
+
+const VideoList = () => {
+ const [videoList, setVideoList] = useState([]);
+ const [query, setQuery] = useState("");
+
+ useEffect(() => {
+ getYoutubeVideos();
+ }, [query]);
+
+ const getYoutubeVideos = async () => {
+ try {
+ const res = await youtubeApi.get('search', {
+ params: {
+ part: 'snippet',
+ maxResults: 9,
+ q: query || '좋은 개발자란',
+ type: 'video',
+ },
+ });
+ console.log(res.data.items);
+ setVideoList(res.data.items);
+ } catch (error) {
+ console.error(error);
+ }
+ };
+
+ return (
+ <>
+
+
+
+
LG CNS AM 캠프 과정을 위한 {query} 영상
+
+
+ {videoList.map((v) => (
+
+
{v.snippet.title}
+
+
+ ))}
+
+
+ );
+};
+
+export default VideoList;
diff --git a/src/components/Viewer.jsx b/src/components/Viewer.jsx
index 088d0e4..cf3c021 100644
--- a/src/components/Viewer.jsx
+++ b/src/components/Viewer.jsx
@@ -3,7 +3,6 @@ import { LogoList } from '../utils/constants'
import "./css/Viewer.css"
const Viewer = ({ logoId, content }) => {
-
const logoItem = LogoList.find((item) => String(item.logoId) === String(logoId))
return (
@@ -19,7 +18,7 @@ const Viewer = ({ logoId, content }) => {
diff --git a/src/components/css/Button.css b/src/components/css/Button.css
index 563a205..d3b24db 100644
--- a/src/components/css/Button.css
+++ b/src/components/css/Button.css
@@ -1,11 +1,13 @@
.Button {
- background-color: rgb(236, 236, 236);
+ background-color: rgb(216, 216, 216);
+ color: black;
border : none;
- border-radius: 10px;
+ border-radius: 5px;
cursor: pointer;
- padding: 15px 20px;
+ padding: 15px 15px;
white-space: nowrap;
- font-family: ;
+
+ font-size: small;
}
.Button_POSITIVE {
diff --git a/src/components/css/Editor.css b/src/components/css/Editor.css
index 031f85d..6e84b44 100644
--- a/src/components/css/Editor.css
+++ b/src/components/css/Editor.css
@@ -1,18 +1,16 @@
.Editor > section {
- margin: 40px 0px;
-}
-.Editor > section > h4 {
- font-size: 22px;
- font-weight: bold;
+ margin: 20px 0px;
}
.Editor > section > input, textarea {
background-color: rgb(236, 236, 236);
+ margin: 0;
border: none;
border-radius: 5px;
- font-size: 20px;
- padding: 10px 20px
+ font-size: 15px;
+ padding: 10px;
}
+
.Editor > section > textarea {
padding: 20px;
width: 100%;
@@ -30,4 +28,5 @@
.Editor .button_section {
display: flex;
justify-content: space-between;
+ gap: 10px
}
diff --git a/src/components/css/LogoItem.css b/src/components/css/LogoItem.css
index 6126fa4..9f0c29a 100644
--- a/src/components/css/LogoItem.css
+++ b/src/components/css/LogoItem.css
@@ -1,31 +1,29 @@
.LogoItem {
background-color: rgb(236, 236, 236);
- padding: 20px;
border-radius: 5px;
cursor: pointer;
text-align: center;
-
- width: 200px;
- height: 90px;
+
+ /* 정사각형 모양 유지 */
+ aspect-ratio: 1;
+ width: 100%;
display: flex;
flex-direction: column;
align-items: center;
- justify-content: space-between;
+ justify-content: center;
+ padding: 8px;
}
.LogoItem .logo_img {
width: 75%;
height: auto;
object-fit: contain;
- margin-bottom: 10px;
-}
-
-.LogoItem .logo_name {
- font-size: 10px;
+ margin-bottom: 8px;
}
+/* 선택한 Logo */
.LogoItem_on_1{
color: white;
background-color: rgb(29, 99, 200);
diff --git a/src/components/css/PostItem.css b/src/components/css/PostItem.css
index 2274543..613d7dd 100644
--- a/src/components/css/PostItem.css
+++ b/src/components/css/PostItem.css
@@ -1,4 +1,5 @@
.PostItem{
+ width: 100%;
display: flex;
gap: 15px;
justify-content: space-between;
@@ -7,8 +8,8 @@
}
.PostItem .img_section {
- min-width: 120px;
- height: 80px;
+ width: 60px;
+ height: 60px;
display: flex;
justify-content: center;
cursor: pointer;
@@ -18,29 +19,25 @@
display: flex;
justify-content: center;
align-items: center;
+ flex-shrink: 0;
}
+
.PostItem .img_section > img {
width: 50%;
- height: 65px;
}
.PostItem .info_section {
- flex : 1;
-}
-@media screen and (max-width: 650px) {
- .PostItem .info_section {
- flex: 1;
- max-width: 300px;
- }
+ flex: 1 1 auto;
+ min-width: 0;
}
.PostItem .info_section .created_date {
font-weight: bold;
- font-size: 25px;
+ font-size: 15px;
}
.PostItem .info_section .content {
- font-size: 18px;
+ font-size: 15px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
diff --git a/src/components/css/SearchBar.css b/src/components/css/SearchBar.css
new file mode 100644
index 0000000..a0f014b
--- /dev/null
+++ b/src/components/css/SearchBar.css
@@ -0,0 +1,23 @@
+.SearchBar {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 10px;
+ width: 100%;
+ border-radius: 5px;
+ margin: 10px 0;
+}
+
+.SearchBar input {
+ width: 100%;
+ padding: 10px;
+ border: 2px solid #ddd;
+ border-radius: 5px;
+ outline: none;
+ font-size: 16px;
+ transition: border-color 0.3s ease;
+}
+
+.SearchBar input:focus {
+ border-color: #007bff;
+}
diff --git a/src/components/css/Selector.css b/src/components/css/Selector.css
new file mode 100644
index 0000000..3a21703
--- /dev/null
+++ b/src/components/css/Selector.css
@@ -0,0 +1,73 @@
+.Selector {
+ display: flex;
+ justify-content: center;
+ gap: 16px;
+ margin: 20px 0;
+}
+
+.Selector .SelectorBox {
+ padding: 8px 16px;
+ background-color: #007BFF;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 10px
+}
+
+.Selector img {
+ width: 100%;
+}
+
+
+/* 버튼 클릭 시 */
+
+.Selector .SelectorBox_1 {
+ color: black;
+ background-color: rgb(216, 216, 216);
+}
+
+.Selector .SelectorBox_1:hover {
+ color: white;
+ background-color: rgb(100, 201, 100);
+}
+
+.Selector .SelectorBox_2 {
+ color: black;
+ background-color: rgb(216, 216, 216);
+}
+
+.Selector .SelectorBox_2:hover {
+ color: white;
+ background-color: rgb(157, 215, 114);
+}
+
+.Selector .SelectorBox_3 {
+ color: black;
+ background-color: rgb(216, 216, 216);
+}
+
+.Selector .SelectorBox_3:hover {
+ color: white;
+ background-color: rgb(253, 206, 23);
+}
+
+.Selector .SelectorBox_4 {
+ color: black;
+ background-color: rgb(216, 216, 216);
+}
+
+.Selector .SelectorBox_4:hover {
+ color: white;
+ background-color: rgb(253, 132, 70);
+}
+
+.Selector .SelectorBox_5 {
+ color: black;
+ background-color: rgb(216, 216, 216);
+}
+
+.Selector .SelectorBox_5:hover {
+ color: white;
+ background-color: rgb(253, 86, 95);
+}
\ No newline at end of file
diff --git a/src/components/css/VideoList.css b/src/components/css/VideoList.css
new file mode 100644
index 0000000..3a4e08e
--- /dev/null
+++ b/src/components/css/VideoList.css
@@ -0,0 +1,39 @@
+.Video {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 20px;
+ padding: 20px;
+ justify-items: center;
+ background-color: #f8f8f8;
+ border-radius: 8px;
+}
+
+.VideoTitle{
+ width: 100%;
+ text-align: center;
+}
+
+.VideoItem {
+ width: 100%;
+ height: 300px;
+ aspect-ratio: 16 / 9;
+ background-color: white;
+ border-radius: 8px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ overflow: hidden;
+}
+
+.VideoItem iframe {
+ width: 100%;
+ height: 100%;
+ border: none;
+}
+
+.VideoItem h4 {
+ margin: 10px;
+ font-size: 1rem;
+ font-weight: bold;
+ text-align: center;
+ color: #333;
+ font-family: 'Arial', sans-serif;
+}
diff --git a/src/components/css/Viewer.css b/src/components/css/Viewer.css
index c6b737e..d0550e6 100644
--- a/src/components/css/Viewer.css
+++ b/src/components/css/Viewer.css
@@ -1,6 +1,5 @@
.Viewer > section {
width: 100%;
- margin-bottom: 100px;
display: flex;
flex-direction: column;
@@ -8,14 +7,9 @@
text-align: center;
}
-.Viewer > section > h4 {
- font-size: 30px;
- font-weight: bold;
-}
-
.Viewer .logo_img_wrapper {
- width: 250px;
- height: 250px;
+ width: 30%;
+ padding: 10px;
border-radius: 5px;
display: flex;
@@ -24,11 +18,10 @@
justify-content: space-around;
color: white;
- font-size: 25px;
}
.Viewer .logo_img_wrapper img {
- width: 150px;
+ width: 50%;
}
.Viewer .logo_img_wrapper_1 {
@@ -56,10 +49,9 @@
}
-.Viewer .content_wrapper > p {
+.Viewer .content_wrapper > h5 {
padding: 20px ;
text-align: left;
- font-size: 20px;
- font-weight: 400;
+ font-weight: 500;
line-height: 1.5;
}
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index 65b33a1..3d818b3 100644
--- a/src/index.css
+++ b/src/index.css
@@ -7,23 +7,43 @@
src: url(/Moneygraphy-Pixel.ttf);
}
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
html, body {
- margin: 0px;
+ margin: 0;
background-color: rgb(246, 246, 246);
width: 100%;
display: flex;
+ min-height: 100vh;
+}
+
+body * {
+ font-family: "Moneygraphy-Rounded";
+}
+
+h4 {
+ font-size: large;
+ font-weight: bold;
+ margin: 10px 0px
}
#root {
background-color: white;
- max-width: 700px;
width: 100%;
margin: 0 auto;
min-height: 100vh;
height: 100%;
- padding: 0px 20px;
+ padding: 0 16px;
}
-body * {
- font-family: "Moneygraphy-Rounded";
+/* 태블릿 이상 화면에서의 스타일 */
+@media screen and (min-width: 768px) {
+ #root {
+ max-width: 800px;
+ padding: 0 20px;
+ }
}
\ No newline at end of file
diff --git a/src/main.jsx b/src/main.jsx
index 64af32d..4e474c0 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,10 +1,7 @@
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
-import { BrowserRouter } from 'react-router-dom';
createRoot(document.getElementById('root')).render(
-
-
-
+
)
diff --git a/src/pages/Edit.jsx b/src/pages/Edit.jsx
index 66a4f91..625e948 100644
--- a/src/pages/Edit.jsx
+++ b/src/pages/Edit.jsx
@@ -3,7 +3,7 @@ import { replace, useNavigate, useParams } from 'react-router-dom'
import Header from '../components/Header'
import Editor from '../components/Editor'
import Button from '../components/Button'
-import { useContext, useState } from 'react'
+import { useContext } from 'react'
import { PostDispatchContext } from '../App'
import usePost from '../hooks/usePost'
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index f8f16fc..bd4f1dc 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -25,14 +25,14 @@ const Home = () => {
};
return (
-
+ <>
}
rightChild={
}
/>
-
+
)
}
diff --git a/src/pages/Notfound.jsx b/src/pages/Notfound.jsx
index c01de00..62e0c88 100644
--- a/src/pages/Notfound.jsx
+++ b/src/pages/Notfound.jsx
@@ -1,6 +1,6 @@
const Notfound = () => {
return (
-
잘못된 페이지입니다
+
잘못된 페이지 입니다
)
}
diff --git a/src/pages/Video.jsx b/src/pages/Video.jsx
new file mode 100644
index 0000000..5dc8e42
--- /dev/null
+++ b/src/pages/Video.jsx
@@ -0,0 +1,17 @@
+import Header from '../components/Header';
+import Button from '../components/Button'
+
+import VideoList from '../components/VideoList'
+import { useNavigate } from 'react-router-dom';
+
+const Video = () => {
+ const nav = useNavigate();
+ return (
+ <>
+
nav(-1)} />} title={"영상 글쓰기"} />
+
+
+ )
+}
+
+export default Video
\ No newline at end of file