Skip to content

Commit f19c0f5

Browse files
hyowoniihyowonii
committed
Feat: 새 플레이리스트 만들기 모달
1 parent 00e7a7c commit f19c0f5

File tree

9 files changed

+210
-160
lines changed

9 files changed

+210
-160
lines changed

‎.env

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
REACT_APP_KAKAO_REST_API_KEY=53ab9d9beaf347ecc3d5779342ef3562
2+
REACT_APP_KAKAO_REDIRECT_URI=http://localhost:3000/oauth/kakao
3+
REACT_APP_YOUTUBE_API_KEY=AIzaSyB-WyiV885WZcrvKmYaADQv0qEbgsvTgR8

‎src/Components/Playlist/PlaylistToggle.js ‎src/Components/Playlist/AddVideoToPlaylistToggle.js

+8-98
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
import React, {useEffect, useState} from "react";
22
import useInput from "../../Hooks/useInput";
3-
import { AutoFrame, OneSelectItemWrapper, ToggleScrollWrapper} from "../../Style/Video";
43
import axios from "axios";
54
import preURL from "../../preURL/preURL";
5+
// Style
6+
import { AutoFrame, OneSelectItemWrapper, ToggleScrollWrapper} from "../../Style/Video";
67
import styled from "styled-components";
78
import StyledBtn from "../../Style/StyledBtn";
9+
import NewPlaylistToggle, {SwitchBtnLabel} from "./NewPlaylistToggle";
810

9-
const PlaylistToggle = ({show, setShow}) => {
11+
const AddVideoToPlaylistToggle = ({show, setShow}) => {
1012

1113
const [playListList, setPlayListList] = useState([]); // 받아온 내 플레이리스트 목록
1214
/* 등록 처리 필요 */
1315
const [playList, setPlayList] = useState([]);
1416
const [selectedPlayListId, setSelectedPlayListId] = useState([]);
15-
// 새로운 플레이리스트 생성
1617
const [addNewPly, setAddNewPly] = useState(false);
17-
const [newPlyName, onChangeNewPlyName, setNewPlyName] = useInput("");
18-
const [newPlyPublic, setNewPlyPublic] = useState(false);
1918

20-
// 사용자 플레이리스트 조회
19+
20+
// 사용자 플레이리스트 조회
2121
useEffect(() => {
2222
axios
2323
.get(preURL.preURL + `/boards/playlist/user/${1}`) /*사용자 id*/
@@ -75,28 +75,9 @@ const PlaylistToggle = ({show, setShow}) => {
7575
})
7676
}
7777

78-
// 새 플레이리스트 생성
79-
const onClickMakePly = () => {
80-
axios
81-
.post(preURL.preURL + '/boards/playlist', {
82-
title: newPlyName,
83-
isPublic: newPlyPublic
84-
})
85-
.then((res) => {
86-
console.log("👍새 플레이리스트 생성 성공", res.data);
87-
setNewPlyName("");
88-
setNewPlyPublic(false);
89-
setAddNewPly(false);
90-
})
91-
.catch((err) => {
92-
console.log("🧨새 플레이리스트 생성 실패", err);
93-
})
94-
};
95-
9678
const onCloseToggle = (e) => {
9779
e.preventDefault();
9880
setShow(prev => !prev)
99-
setAddNewPly(false);
10081
};
10182

10283
// 토글의 리스트
@@ -139,22 +120,7 @@ const PlaylistToggle = ({show, setShow}) => {
139120
<div style={{alignSelf: "center"}}>
140121
{addNewPly
141122
?
142-
<>
143-
<NewPlyInput type="text" placeholder="플레이리스트 이름" value={newPlyName} onChange={onChangeNewPlyName}/>
144-
<div style={{display: "flex", alignItems: "center", justifyContent: "space-evenly", margin: "10px 0"}}>
145-
{newPlyPublic
146-
?
147-
<SwitchBtnLabel style={{margin: 0}}>
148-
<span className="active" onClick={() => setNewPlyPublic(prev => !prev)}>공개</span>
149-
</SwitchBtnLabel>
150-
:
151-
<SwitchBtnLabel style={{margin: 0}}>
152-
<span onClick={() => setNewPlyPublic(prev => !prev)}>비공개</span>
153-
</SwitchBtnLabel>
154-
}
155-
<MakeNewPlyBtn onClick={onClickMakePly}>만들기</MakeNewPlyBtn>
156-
</div>
157-
</>
123+
<NewPlaylistToggle show={addNewPly} setAddNewPly={setAddNewPly}/>
158124
:
159125
<AddNewPlyBtn onClick={() => setAddNewPly(prev => !prev)}>
160126
새 플레이리스트 만들기
@@ -165,7 +131,7 @@ const PlaylistToggle = ({show, setShow}) => {
165131
)
166132
}
167133

168-
export default PlaylistToggle;
134+
export default AddVideoToPlaylistToggle;
169135

170136
const AddNewPlyBtn = styled(StyledBtn)`
171137
box-sizing: border-box;
@@ -178,62 +144,6 @@ const AddNewPlyBtn = styled(StyledBtn)`
178144
align-self: center;
179145
`
180146

181-
const MakeNewPlyBtn = styled(StyledBtn)`
182-
box-sizing: border-box;
183-
width: 70px;
184-
height: 30px;
185-
background: black;
186-
border: 2px dashed white;
187-
border-radius: 29px;
188-
color: white;
189-
`
190-
191-
const NewPlyInput = styled.input`
192-
box-sizing: border-box;
193-
width: 170px;
194-
height: 33px;
195-
background: white;
196-
border: 2px dashed #000000;
197-
border-radius: 29px;
198-
display: block;
199-
align-self: center;
200-
padding: 0 4px;
201-
`
202-
203-
// 플레이리스트 공개/비공개 토글 버튼
204-
const SwitchBtnLabel = styled.label`
205-
width: 60px;
206-
height: 25px;
207-
display: inline-block;
208-
position: relative;
209-
border-radius: 71px;
210-
background-color: black;
211-
cursor: pointer;
212-
transition: all 0.2s ease-in;
213-
& > span{
214-
width: 45px;
215-
height: 18px;
216-
position: absolute;
217-
top: 50%;
218-
left: 4px;
219-
transform: translateY(-50%);
220-
border-radius: 71px;
221-
background-color: #E35D12;
222-
font-size: small;
223-
font-weight: bold;
224-
text-align: center;
225-
transition: all 0.2s ease-in;
226-
}
227-
:active{ // 동작X
228-
background-color: #E35D12;
229-
}
230-
& > span.active{
231-
background-color: black;
232-
color: #E35D12;
233-
left: calc(100% - 50px);
234-
}
235-
`
236-
237147
const XButton = styled(StyledBtn)`
238148
color: #E35D12;
239149
display: block;

‎src/Components/Playlist/NewPlaylistToggle.js

+124
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
import React, {useState} from "react";
2+
import styled from "styled-components";
3+
import useInput from "../../Hooks/useInput";
4+
import axios from "axios";
5+
import preURL from "../../preURL/preURL";
6+
import StyledBtn from "../../Style/StyledBtn";
7+
8+
const NewPlaylistToggle = ({show, setAddNewPly}) => {
9+
// 새로운 플레이리스트 생성
10+
const [newPlyName, onChangeNewPlyName, setNewPlyName] = useInput("");
11+
const [newPlyPublic, setNewPlyPublic] = useState(false);
12+
13+
14+
// 새 플레이리스트 생성
15+
const onClickMakePly = () => {
16+
axios
17+
.post(preURL.preURL + '/boards/playlist', {
18+
title: newPlyName,
19+
isPublic: newPlyPublic
20+
})
21+
.then((res) => {
22+
console.log("👍새 플레이리스트 생성 성공", res.data);
23+
setNewPlyName("");
24+
setNewPlyPublic(false);
25+
setAddNewPly && setAddNewPly(false);
26+
alert(`${newPlyName}을 생성하였습니다.`);
27+
})
28+
.catch((err) => {
29+
console.log("🧨새 플레이리스트 생성 실패", err);
30+
})
31+
};
32+
33+
34+
if(!show) return
35+
36+
return (
37+
<Wrapper>
38+
<NewPlyInput type="text" placeholder="플레이리스트 이름" value={newPlyName} onChange={onChangeNewPlyName}/>
39+
<div style={{display: "flex", alignItems: "center", justifyContent: "space-evenly", margin: "10px 0"}}>
40+
{newPlyPublic
41+
?
42+
<SwitchBtnLabel style={{margin: 0}}>
43+
<span className="active" onClick={() => setNewPlyPublic(prev => !prev)}>공개</span>
44+
</SwitchBtnLabel>
45+
:
46+
<SwitchBtnLabel style={{margin: 0}}>
47+
<span onClick={() => setNewPlyPublic(prev => !prev)}>비공개</span>
48+
</SwitchBtnLabel>
49+
}
50+
<MakeNewPlyBtn onClick={onClickMakePly}>만들기</MakeNewPlyBtn>
51+
</div>
52+
</Wrapper>
53+
)
54+
}
55+
56+
export default NewPlaylistToggle;
57+
58+
const Wrapper = styled.div`
59+
display: flex;
60+
flex-direction: column;
61+
width: 220px;
62+
box-sizing: border-box;
63+
border: 3px dashed black;
64+
border-radius: 29px;
65+
margin-right: 140px;
66+
padding: 20px;
67+
background-color: white;
68+
`
69+
70+
const NewPlyInput = styled.input`
71+
box-sizing: border-box;
72+
width: 170px;
73+
height: 33px;
74+
background: white;
75+
border: 2px dashed #000000;
76+
border-radius: 29px;
77+
display: block;
78+
align-self: center;
79+
padding: 0 4px;
80+
`
81+
82+
// 플레이리스트 공개/비공개 토글 버튼
83+
export const SwitchBtnLabel = styled.label`
84+
width: 60px;
85+
height: 25px;
86+
display: inline-block;
87+
position: relative;
88+
border-radius: 71px;
89+
background-color: black;
90+
cursor: pointer;
91+
transition: all 0.2s ease-in;
92+
& > span{
93+
width: 45px;
94+
height: 18px;
95+
position: absolute;
96+
top: 50%;
97+
left: 4px;
98+
transform: translateY(-50%);
99+
border-radius: 71px;
100+
background-color: #E35D12;
101+
font-size: small;
102+
font-weight: bold;
103+
text-align: center;
104+
transition: all 0.2s ease-in;
105+
}
106+
:active{ // 동작X
107+
background-color: #E35D12;
108+
}
109+
& > span.active{
110+
background-color: black;
111+
color: #E35D12;
112+
left: calc(100% - 50px);
113+
}
114+
`
115+
116+
const MakeNewPlyBtn = styled(StyledBtn)`
117+
box-sizing: border-box;
118+
width: 70px;
119+
height: 30px;
120+
background: black;
121+
border: 2px dashed white;
122+
border-radius: 29px;
123+
color: white;
124+
`

‎src/Components/Video/OneVideo.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, {useState} from "react";
22
import {useNavigate} from "react-router-dom";
33
// Components
4-
import PlaylistToggle from "../Playlist/PlaylistToggle";
4+
import AddVideoToPlaylistToggle from "../Playlist/AddVideoToPlaylistToggle";
55
// Style
66
import styled from "styled-components";
77
import StyledBtn from "../../Style/StyledBtn";
@@ -54,7 +54,7 @@ const OneVideo = ({video}) => {
5454
onClick={onClickAddToPlaylist}
5555
style={{marginLeft: "4px", cursor: "pointer"}}/>
5656
{clickedPlyId === videoId && /*클릭한 아이콘과 id가 동일한 모달창에만 적용되도록*/
57-
<PlaylistToggle
57+
<AddVideoToPlaylistToggle
5858
show={playListToggleDisplay}
5959
setShow={setPlayListToggleDisplay}
6060
/>

‎src/Pages/Playlist/AllPlaylist.js

+37-19
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,10 @@ import {Link} from "react-router-dom";
66
import Header from "../../Components/Header";
77
import Pagination from "../../Components/Pagination";
88
import OnePly from "../../Components/Playlist/Oneply";
9+
import NewPlaylistToggle from "../../Components/Playlist/NewPlaylistToggle";
910
// Style
1011
import {Line, SortBox, Wrapper} from "../../Style/Video";
11-
import {FourListWrapper, FourList, TopBtns, MainLogo} from "../../Style/Playlist";
12+
import {FourListWrapper, FourList, TopBtns, MainLogo, TopBtnsWrapper} from "../../Style/Playlist";
1213
import StyledBtn from "../../Style/StyledBtn";
1314
import {light} from "../../Style/Color";
1415
// Assets
@@ -17,29 +18,51 @@ import Add_New_Ply from "../../Assets/Add_New_Ply.png";
1718
import Stored_Ply from "../../Assets/Stored_Ply.png";
1819

1920

21+
// 플리게시판 상단 버튼 두개
22+
export const PlaylistHeader = () => {
23+
const [showModal, setShowModal] = useState(false);
24+
25+
return (
26+
<TopBtnsWrapper>
27+
<TopBtns>
28+
<Link to="/playlist/subscribe">
29+
<img src={Stored_Ply} alt="구독 플레이리스트 보기" />
30+
</Link>
31+
<img
32+
src={Add_New_Ply}
33+
alt="새 플레이리스트 만들기"
34+
onClick={() => setShowModal(prev => !prev)}
35+
style={{cursor: "pointer"}}
36+
/>
37+
</TopBtns>
38+
<NewPlaylistToggle show={showModal}/>
39+
</TopBtnsWrapper>
40+
)
41+
}
42+
2043
const AllPlaylist = () => {
2144

2245
const colors = light.colors;
2346

2447
const [bestPlaylist, setBestPlaylist] = useState([
25-
{id: 1, title: "베스트 플리1", titleImageUrl: "https://i.ytimg.com/vi/mKkYQ2OwYYg/hq720.jpg?sqp=-…AFwAcABBg==&rs=AOn4CLB-2wmECn5003TmXqION-Nqcgahzw", writerNickname: "작성자", likeCount: 30, saveCount: 3, videoCount: 7},
26-
{id: 2, title: "베스트 플리2", titleImageUrl: "https://i.ytimg.com/vi/MRaAcIQOIIw/hq720.jpg?sqp=-…AFwAcABBg==&rs=AOn4CLDMAXcYHT37gxseIf6CA94ICpnTuQ", writerNickname: "작성자", likeCount: 25, saveCount: 3, videoCount: 7},
27-
{id: 3, title: "베스트 플리3", titleImageUrl: "https://i.ytimg.com/vi/Q2ehBSEkAzw/hq720.jpg?sqp=-…AFwAcABBg==&rs=AOn4CLDgtPhu8WY4xOABtcCjVo5x-hgswA", writerNickname: "작성자", likeCount: 22, saveCount: 3, videoCount: 7},
28-
{id: 4, title: "베스트 플리4", titleImageUrl: "https://i.ytimg.com/vi/iiIcTPoIoZk/hq720.jpg?sqp=-…AFwAcABBg==&rs=AOn4CLAjn_R-euhMSNKaCFjJzO89A93tAA", writerNickname: "작성자", likeCount: 19, saveCount: 3, videoCount: 7}
48+
// {id: 1, title: "베스트 플리1", titleImageUrl: "https://i.ytimg.com/vi/mKkYQ2OwYYg/hq720.jpg?sqp=-…AFwAcABBg==&rs=AOn4CLB-2wmECn5003TmXqION-Nqcgahzw", writerNickname: "작성자", likeCount: 30, saveCount: 3, videoCount: 7},
49+
// {id: 2, title: "베스트 플리2", titleImageUrl: "https://i.ytimg.com/vi/MRaAcIQOIIw/hq720.jpg?sqp=-…AFwAcABBg==&rs=AOn4CLDMAXcYHT37gxseIf6CA94ICpnTuQ", writerNickname: "작성자", likeCount: 25, saveCount: 3, videoCount: 7},
50+
// {id: 3, title: "베스트 플리3", titleImageUrl: "https://i.ytimg.com/vi/Q2ehBSEkAzw/hq720.jpg?sqp=-…AFwAcABBg==&rs=AOn4CLDgtPhu8WY4xOABtcCjVo5x-hgswA", writerNickname: "작성자", likeCount: 22, saveCount: 3, videoCount: 7},
51+
// {id: 4, title: "베스트 플리4", titleImageUrl: "https://i.ytimg.com/vi/iiIcTPoIoZk/hq720.jpg?sqp=-…AFwAcABBg==&rs=AOn4CLAjn_R-euhMSNKaCFjJzO89A93tAA", writerNickname: "작성자", likeCount: 19, saveCount: 3, videoCount: 7}
2952
]);
3053

3154
// 수정 필요
3255
const [playlist1, setPlaylist1] = useState([
33-
{id: 1, title: "플리1", titleImageUrl: "https://i.ytimg.com/vi/xhyWDLWanHE/hqdefault.jpg?s…AFwAcABBg==&rs=AOn4CLDNC541Gll7yxMs9Vcc8MWtC9gzLg", writerNickname: "작성자", likeCount: 3, saveCount: 3, videoCount: 7},
34-
{id: 2, title: "플리2", titleImageUrl: "https://i.ytimg.com/vi/MRaAcIQOIIw/hq720.jpg?sqp=-…AFwAcABBg==&rs=AOn4CLDMAXcYHT37gxseIf6CA94ICpnTuQ", writerNickname: "작성자", likeCount: 25, saveCount: 3, videoCount: 7},
35-
{id: 3, title: "플리3", titleImageUrl: "https://i.ytimg.com/vi/1ktnYFMm4S0/hq720.jpg?sqp=-…AFwAcABBg==&rs=AOn4CLBRJHJTM-_VzaapK9oCWlD8t-K8WQ", writerNickname: "작성자", likeCount: 3, saveCount: 3, videoCount: 7},
36-
{id: 4, title: "플리4", titleImageUrl: "https://i.ytimg.com/vi/Q2ehBSEkAzw/hq720.jpg?sqp=-…AFwAcABBg==&rs=AOn4CLDgtPhu8WY4xOABtcCjVo5x-hgswA", writerNickname: "작성자", likeCount: 22, saveCount: 3, videoCount: 7}
56+
// {id: 1, title: "플리1", titleImageUrl: "https://i.ytimg.com/vi/xhyWDLWanHE/hqdefault.jpg?s…AFwAcABBg==&rs=AOn4CLDNC541Gll7yxMs9Vcc8MWtC9gzLg", writerNickname: "작성자", likeCount: 3, saveCount: 3, videoCount: 7},
57+
// {id: 2, title: "플리2", titleImageUrl: "https://i.ytimg.com/vi/MRaAcIQOIIw/hq720.jpg?sqp=-…AFwAcABBg==&rs=AOn4CLDMAXcYHT37gxseIf6CA94ICpnTuQ", writerNickname: "작성자", likeCount: 25, saveCount: 3, videoCount: 7},
58+
// {id: 3, title: "플리3", titleImageUrl: "https://i.ytimg.com/vi/1ktnYFMm4S0/hq720.jpg?sqp=-…AFwAcABBg==&rs=AOn4CLBRJHJTM-_VzaapK9oCWlD8t-K8WQ", writerNickname: "작성자", likeCount: 3, saveCount: 3, videoCount: 7},
59+
// {id: 4, title: "플리4", titleImageUrl: "https://i.ytimg.com/vi/Q2ehBSEkAzw/hq720.jpg?sqp=-…AFwAcABBg==&rs=AOn4CLDgtPhu8WY4xOABtcCjVo5x-hgswA", writerNickname: "작성자", likeCount: 22, saveCount: 3, videoCount: 7}
3760
]);
3861
const [playlist2, setPlaylist2] = useState([
39-
{id: 5, title: "플리5", titleImageUrl: "https://i.ytimg.com/vi/mKkYQ2OwYYg/hq720.jpg?sqp=-…AFwAcABBg==&rs=AOn4CLB-2wmECn5003TmXqION-Nqcgahzw", writerNickname: "작성자", likeCount: 30, saveCount: 3, videoCount: 7},
40-
{id: 6, title: "플리6", titleImageUrl: "https://i.ytimg.com/vi/iiIcTPoIoZk/hq720.jpg?sqp=-…AFwAcABBg==&rs=AOn4CLAjn_R-euhMSNKaCFjJzO89A93tAA", writerNickname: "작성자", likeCount: 19, saveCount: 3, videoCount: 7},
41-
{id: 7, title: "플리7", titleImageUrl: "https://i.ytimg.com/vi/UfBxMDp7VTo/hq720.jpg?sqp=-…AFwAcABBg==&rs=AOn4CLCJF-TybRxbbgYlWXiz2ARY6e-aHw", writerNickname: "작성자", likeCount: 3, saveCount: 3, videoCount: 7},
42-
{id: 8, title: "플리8", titleImageUrl: "https://i.ytimg.com/vi/MzVRL5W4b1I/hqdefault.jpg?s…AFwAcABBg==&rs=AOn4CLDJ-2oHWJdsOn-YBOi9t52n0qepNw", writerNickname: "작성자", likeCount: 3, saveCount: 3, videoCount: 7}
62+
// {id: 5, title: "플리5", titleImageUrl: "https://i.ytimg.com/vi/mKkYQ2OwYYg/hq720.jpg?sqp=-…AFwAcABBg==&rs=AOn4CLB-2wmECn5003TmXqION-Nqcgahzw", writerNickname: "작성자", likeCount: 30, saveCount: 3, videoCount: 7},
63+
// {id: 6, title: "플리6", titleImageUrl: "https://i.ytimg.com/vi/iiIcTPoIoZk/hq720.jpg?sqp=-…AFwAcABBg==&rs=AOn4CLAjn_R-euhMSNKaCFjJzO89A93tAA", writerNickname: "작성자", likeCount: 19, saveCount: 3, videoCount: 7},
64+
// {id: 7, title: "플리7", titleImageUrl: "https://i.ytimg.com/vi/UfBxMDp7VTo/hq720.jpg?sqp=-…AFwAcABBg==&rs=AOn4CLCJF-TybRxbbgYlWXiz2ARY6e-aHw", writerNickname: "작성자", likeCount: 3, saveCount: 3, videoCount: 7},
65+
// {id: 8, title: "플리8", titleImageUrl: "https://i.ytimg.com/vi/MzVRL5W4b1I/hqdefault.jpg?s…AFwAcABBg==&rs=AOn4CLDJ-2oHWJdsOn-YBOi9t52n0qepNw", writerNickname: "작성자", likeCount: 3, saveCount: 3, videoCount: 7}
4366
]);
4467
const [playlist3, setPlaylist3] = useState([]);
4568
const [totalPageCount, setTotalPageCount] = useState(0); // 총 페이지 수
@@ -103,12 +126,7 @@ const AllPlaylist = () => {
103126
return (
104127
<div>
105128
<Header />
106-
<TopBtns>
107-
<Link to="/playlist/subscribe">
108-
<img src={Stored_Ply} alt="구독 플레이리스트 보기" />
109-
</Link>
110-
<img src={Add_New_Ply} alt="새 플레이리스트 만들기" />
111-
</TopBtns>
129+
<PlaylistHeader />
112130
<Wrapper>
113131
{(page===0) &&
114132
<FourListWrapper>

0 commit comments

Comments
 (0)