Skip to content

Commit 4cac40b

Browse files
sang-gyeongsang-gyeong
committed
[WEB] develop 브랜치에 머지
2 parents c1d9d32 + e75271f commit 4cac40b

File tree

30 files changed

+69
-274
lines changed

30 files changed

+69
-274
lines changed

‎.github/workflows/web.yml

+2-1
Original file line numberDiff line numberDiff line change
@@ -30,4 +30,5 @@ jobs:
3030
cd ../frontend
3131
npm install
3232
npm run build --if-present
33-
pm2 start npm --name "next" -- start
33+
pm2 start npm --name "next" -- start
34+

‎README.md

+5-13
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ VIBE 서비스 사용과정에서 발생하는 이벤트를 수집하는 서비
2828
2929
<p align="center">
3030
<img width="350" alt="event" src="https://user-images.githubusercontent.com/60839959/102684638-c74b0780-421d-11eb-84fc-8f4f625a66e6.png">
31-
<img width="570" alt="스크린샷 2020-12-19 오후 5 27 57" src="https://user-images.githubusercontent.com/60839959/102684875-910e8780-421f-11eb-8b64-16f53d06c200.png">
31+
<img width="570" alt="스크린샷 2020-12-19 오후 5 27 57" src="https://user-images.githubusercontent.com/60839959/102684875-910e8780-421f-11eb-8b64-16f53d06c200.png">
3232
</p>
3333

3434
📕 ["이벤트 로그" 정의부터 구현까지](https://www.notion.so/9fca9884c5a144b6a8ade2611ae71f20?v=08ee6720efb043ddb19f7989a21f7adc&p=23cd57707992408db323aac536d239f9)
@@ -44,7 +44,7 @@ VIBE 서비스 사용과정에서 발생하는 이벤트를 수집하는 서비
4444
<p align="center"><img width="700" alt="기술 스택" src="https://user-images.githubusercontent.com/60839959/102687079-d470f200-422f-11eb-982d-0ee36795a17a.png"></p>
4545

4646
#### iOS 🍎
47-
<p align="center"><img width="350" alt="기술 스택" src="https://user-images.githubusercontent.com/60839959/102710138-9e954180-42f3-11eb-890c-751e5895ffab.png"></p>
47+
<p align="center"><img width="350" alt="기술 스택" src="https://user-images.githubusercontent.com/54564170/102690738-caa8b800-424a-11eb-81f5-96cd0ca4d309.png"></p>
4848

4949

5050
<br>
@@ -54,25 +54,17 @@ VIBE 서비스 사용과정에서 발생하는 이벤트를 수집하는 서비
5454
## 📹 서비스 데모 영상
5555
#### Web 🕸
5656

57-
[<img width="500" src="https://user-images.githubusercontent.com/60839959/102683358-bbf2de80-4213-11eb-87e0-c889f0afe61b.png"/>](https://www.youtube.com/watch?v=WWSpciYdGR4&feature=youtu.be)
57+
[<img width="500" src="https://user-images.githubusercontent.com/60839959/102683358-bbf2de80-4213-11eb-87e0-c889f0afe61b.png"/>](https://youtu.be/AqSunm6fDfc)
5858
> 클릭하시면 youtube로 이동합니다💨
5959
6060
#### iOS 🍎
6161

62-
[<img width="500" src="https://user-images.githubusercontent.com/54564170/102687174-9aecb680-4230-11eb-985a-ab967a08f06f.png"/>](https://www.youtube.com/watch?v=_10ZGYLncX0)
62+
[<img width="500" src="https://user-images.githubusercontent.com/54564170/102687174-9aecb680-4230-11eb-985a-ab967a08f06f.png"/>](https://youtu.be/dQiQtMR8pOM)
6363
> 클릭하시면 youtube로 이동합니다💨
6464
6565
<br>
6666
<br>
6767

68-
### Web 배포 주소
69-
http://115.85.181.152:3000/
70-
```
71-
네이버 로그인API 검수 문제로 로그인이 불가하여 주요서비스인 보관함 열람이 불가합니다😂
72-
전체 서비스 결과물은 데모영상을 활용해주시면 감사하겠습니다 🙏
73-
```
74-
75-
7668

7769
### Web 실행방법 🐈
7870
```
@@ -98,7 +90,7 @@ npm run start
9890

9991
## 🚢 사용자 이벤트 수집기 C팀 소개
10092

101-
<p align="center"><img width="650" alt="스크린샷 2020-12-19 오후 5 47 21" src="https://user-images.githubusercontent.com/60839959/102685197-49d5c600-4222-11eb-87e7-b3942e03a465.png"></p>
93+
<p align="center"><img width="650" alt="스크린샷 2020-12-19 오후 5 47 21" src="https://user-images.githubusercontent.com/60839959/102685197-49d5c600-4222-11eb-87e7-b3942e03a465.png"></p>
10294

10395
| 🕸 Web | 🕸 Web | 🕸 Web | 🍎 iOS | 🍎 iOS |
10496
| ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |

‎backend/src/route/auth/controller.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,10 @@ import * as authService from '../../services/auth';
44

55
const getToken = (req: Request, res: Response): void => {
66
const token = authService.createToken(req.user as IJwtPayload);
7-
if (req.headers['user-agent']?.includes('iPhone')) {
7+
if (
8+
req.headers['user-agent']?.includes('iPhone') ||
9+
req.headers['user-agent']?.includes('iPad')
10+
) {
811
return res.redirect(`minivibe://token?${token}`); // 모바일
912
}
1013
res.cookie('token', token, { maxAge: 1000 * 60 * 60 * 24 * 1, httpOnly: false });

‎backend/src/route/auth2/controller.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { Request, Response } from 'express';
2+
import { IJwtPayload } from '../../middlewares/auth';
3+
import * as authService from '../../services/auth';
4+
5+
const getToken = (req: Request, res: Response): void => {
6+
// 모바일
7+
const token = authService.createToken(req.user as IJwtPayload);
8+
return res.redirect(`minivibe://token?${token}`);
9+
};
10+
11+
export { getToken };

‎backend/src/route/auth2/index.ts

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import * as express from 'express';
2+
import * as passport from 'passport';
3+
import { getToken } from './controller';
4+
5+
const route = express.Router();
6+
7+
route.get('/login', passport.authenticate('naver', { session: false }));
8+
route.get('/login/callback', passport.authenticate('naver', { session: false }), getToken);
9+
10+
export default route;

‎backend/src/route/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import sampleRoute from './sample';
33
import userRoute from './users';
44
import logRoute from './log';
55
import authRoute from './auth';
6+
import auth2Route from './auth2';
67
import libraryRoute from './library';
78
import trackRoute from './track';
89
import albumRoute from './album';
@@ -17,6 +18,7 @@ route.use('/sample', sampleRoute);
1718
route.use('/user', userRoute);
1819
route.use('/log', tryAuthenticateWithJwt, logRoute);
1920
route.use('/auth', authRoute);
21+
route.use('/auth2', auth2Route);
2022
route.use('/library', authenticateWithJwt, libraryRoute);
2123
route.use('/track', trackRoute);
2224
route.use('/album', albumRoute);

‎event.sample.js

-67
This file was deleted.

‎frontend/next.config.js

+1-8
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,9 @@ module.exports = withImages({
66
return [
77
{
88
source: '/',
9-
destination: '/today', // Matched parameters can be used in the destination
9+
destination: '/today',
1010
permanent: true,
1111
},
1212
]
1313
},
1414
})
15-
16-
// webpack 사용시
17-
// module.exports = withTypescript({
18-
// webpack(config, options) {
19-
// return config
20-
// }
21-
// })

‎frontend/pages/_app.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import App, { Container } from 'next/app';
1+
import App from 'next/app';
22
import React from 'react';
33
import theme from '@styles/themes';
44
import GlobalStyles from '@styles/global-styles';
@@ -14,7 +14,7 @@ class ReactApp extends App<any> {
1414
public render() {
1515
const { Component, pageProps } = this.props;
1616
return (
17-
<Container>
17+
<>
1818
<GlobalStyles />
1919
<ThemeProvider theme={theme}>
2020
<AuthProvider>
@@ -25,7 +25,7 @@ class ReactApp extends App<any> {
2525
</PlayProvider>
2626
</AuthProvider>
2727
</ThemeProvider>
28-
</Container>
28+
</>
2929
);
3030
}
3131
}

‎frontend/src/components/Common/Button/LargeButton.tsx

-6
Original file line numberDiff line numberDiff line change
@@ -59,12 +59,6 @@ const LargeButton = ({ onClick, children, customType }: ILargeButtonProps) => {
5959
}
6060
};
6161

62-
// const iconStyle = {
63-
// marginRight: '4px',
64-
// position: 'relative',
65-
// bottom: '1px',
66-
// };
67-
6862
const CustomButton = styled.button<ILargeButtonProps>`
6963
display: flex;
7064
justify-content: center;

‎frontend/src/components/Common/Carousel/index.tsx

-3
Original file line numberDiff line numberDiff line change
@@ -39,9 +39,6 @@ const ContentWrapper = styled.div<CarouselWrapperProps>`
3939
`;
4040

4141
const Wrapper = styled.div`
42-
.carousel {
43-
// position: relative;
44-
}
4542
.carousel-inner {
4643
overflow: visible;
4744
}

‎frontend/src/components/Common/Dropdown/BoxDropdown.tsx

-7
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import api from '@api/index';
66
import useEventHandler from '@hooks/useEventHandler';
77
import { usePlayDispatch } from '@context/PlayContext';
88
import ClickEventWrapper from '@components/EventWrapper/ClickEventWrapper';
9-
// import { useAuthDispatch, useAuthState } from '@context/AuthContext';
109
import * as T from '../../../constants/dropdownText';
1110

1211
interface IBoxDropdownProps {
@@ -18,8 +17,6 @@ interface IBoxDropdownProps {
1817
const BoxDropdown = ({ trackData, type, id }: IBoxDropdownProps) => {
1918
const dispatch = usePlayDispatch();
2019
const router = useRouter();
21-
// const authState = useAuthState();
22-
// const authDispatch = useAuthDispatch();
2320

2421
const libraryLogData = action => {
2522
return {
@@ -62,10 +59,6 @@ const BoxDropdown = ({ trackData, type, id }: IBoxDropdownProps) => {
6259
}
6360
};
6461

65-
// const addPlaylistEvent = () => api.post('/library/playlists', { playlistId: id });
66-
// const addTrackEvent = () => api.post('/library/tracks', { trackId: id });
67-
// const addAlbumEvent = () => api.post('/library/albums', { albumId: id });
68-
6962
return (
7063
<Wrapper>
7164
<Dropdown style={dropdownStyle}>

‎frontend/src/components/Common/Modal/index.tsx

-3
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ interface IModalProps {
1111
function Modal() {
1212
const router = useRouter();
1313
const randomNum = Math.floor(Math.random() * 2);
14-
// 50퍼센트의 확률로 모달 등장
1514
const [isModalOpened, setIsModalOpened] = useState(randomNum === 1);
1615
const modalCloseEvent = () => {
1716
setIsModalOpened(false);
@@ -80,7 +79,6 @@ const ModalContent = styled.div`
8079
const ModalCloseButton = styled.button`
8180
width: 45px;
8281
height: 45px;
83-
// border: 2px solid gold;
8482
position: absolute;
8583
top: 12px;
8684
right: 12px;
@@ -90,7 +88,6 @@ const ModalCloseButton = styled.button`
9088
const MembershipButton = styled.button`
9189
width: 370px;
9290
height: 65px;
93-
// border: 2px solid gold;
9491
position: absolute;
9592
bottom: 43px;
9693
left: 40px;

‎frontend/src/components/Common/PlayTrackItem/index.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,6 @@ const IconWrapper = styled.div`
106106
width: 75px;
107107
padding-left: 20px;
108108
display: flex;
109-
// justify-content: space-between;
110109
justify-content: flex-end;
111110
position: relative;
112111
.icon:hover {

‎frontend/src/components/EventWrapper/ClickEventWrapper.tsx

-13
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,6 @@ import styled from 'styled-components';
33
import { useRouter } from 'next/router';
44
import api from '@api/index';
55

6-
// type EventType = 'move' | 'click' | 'library' | 'login' | 'logout' | 'logout' | 'music' | 'error';
7-
// type ActionType =
8-
// | 'like'
9-
// | 'remove'
10-
// | 'prev'
11-
// | 'next'
12-
// | 'shuffle_on'
13-
// | 'shuffle_off'
14-
// | 'play'
15-
// | 'pause'
16-
// | 'repeat_on'
17-
// | 'repeat_off';
18-
196
interface IClickEventProps {
207
target: string;
218
id?: number | null;

‎frontend/src/components/EventWrapper/LibraryEventWrapper.tsx

-13
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,6 @@ import React from 'react';
22
import styled from 'styled-components';
33
import useEventHandler from '@hooks/useEventHandler';
44

5-
// type EventType = 'move' | 'click' | 'library' | 'login' | 'logout' | 'logout' | 'music' | 'error';
6-
// type ActionType =
7-
// | 'like'
8-
// | 'remove'
9-
// | 'prev'
10-
// | 'next'
11-
// | 'shuffle_on'
12-
// | 'shuffle_off'
13-
// | 'play'
14-
// | 'pause'
15-
// | 'repeat_on'
16-
// | 'repeat_off';
17-
185
interface ILibraryEventProps {
196
type: string;
207
action: string;

‎frontend/src/components/Layout/PlayBar/index.tsx

+4-15
Original file line numberDiff line numberDiff line change
@@ -203,22 +203,11 @@ function PlayBar() {
203203
{JSON.stringify(log.eventTime)}
204204
</Info>
205205
<Info style={{ color: '#ffe500' }}>
206-
eventName :
207-
{' '}
208-
{JSON.stringify(log.eventName)}
209-
</Info>
210-
<Info>
211-
parameters :
212-
{JSON.stringify(log.parameters)}
213-
</Info>
214-
<Info>
215-
userInfo :
216-
{JSON.stringify(log.userInfo)}
217-
</Info>
218-
<Info>
219-
userAgent :
220-
{JSON.stringify(log.userAgent)}
206+
eventName : {JSON.stringify(log.eventName)}
221207
</Info>
208+
<Info>parameters :{JSON.stringify(log.parameters)}</Info>
209+
<Info>userInfo :{JSON.stringify(log.userInfo)}</Info>
210+
<Info>userAgent :{JSON.stringify(log.userAgent)}</Info>
222211
<hr style={{ borderColor: 'darkgrey' }} />
223212
</Log>
224213
))}

‎frontend/src/components/Layout/SideBar/NavBar/NavList/index.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from 'react';
22
import styled from '@styles/themed-components';
33
import { FaMusic } from 'react-icons/fa';
4-
// import { FaBookOpen, FaMusic, FaTrophy, FaRecordVinyl, FaRegCalendar } from 'react-icons/fa';
54
import { useRouter } from 'next/router';
65
import A from '@components/Common/A';
76

‎frontend/src/components/Layout/index.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,6 @@ const Container = styled.div`
3535
margin: 0;
3636
`;
3737

38-
// todaypage 빼고 다 max-width 964임.
3938
const Content = styled.div`
4039
width: auto;
4140
`;

‎frontend/src/components/Template/Content/index.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ interface IContent {
55
children: any;
66
}
77

8-
// title이라고 하면 _document랑 충돌남
98
function Content({ children }: IContent): ReactElement {
109
return <Wrapper>{children}</Wrapper>;
1110
}

0 commit comments

Comments
 (0)