[WEB] develop 브랜치에 머지

Author: sang-gyeong

.github/workflows/web.yml

@@ -30,4 +30,5 @@ jobs:
             cd ../frontend
             npm install
             npm run build --if-present
-            pm2 start npm --name "next" -- start
+            pm2 start npm --name "next" -- start
+            

README.md

@@ -28,7 +28,7 @@ VIBE 서비스 사용과정에서 발생하는 이벤트를 수집하는 서비
 
 <p align="center">
 <img width="350" alt="event" src="https://user-images.githubusercontent.com/60839959/102684638-c74b0780-421d-11eb-84fc-8f4f625a66e6.png">
-<img width="570" alt="스크린샷 2020-12-19 오후 5 27 57" src="https://user-images.githubusercontent.com/60839959/102684875-910e8780-421f-11eb-8b64-16f53d06c200.png">
+<img width="570" alt="스크린샷 2020-12-19 오후 5 27 57" src="https://user-images.githubusercontent.com/60839959/102684875-910e8780-421f-11eb-8b64-16f53d06c200.png">
 </p>
 
 📕 ["이벤트 로그" 정의부터 구현까지](https://www.notion.so/9fca9884c5a144b6a8ade2611ae71f20?v=08ee6720efb043ddb19f7989a21f7adc&p=23cd57707992408db323aac536d239f9)
@@ -44,7 +44,7 @@ VIBE 서비스 사용과정에서 발생하는 이벤트를 수집하는 서비
 <p align="center"><img width="700" alt="기술 스택" src="https://user-images.githubusercontent.com/60839959/102687079-d470f200-422f-11eb-982d-0ee36795a17a.png"></p>
 
 #### iOS 🍎
-<p align="center"><img width="350" alt="기술 스택" src="https://user-images.githubusercontent.com/60839959/102710138-9e954180-42f3-11eb-890c-751e5895ffab.png"></p>
+<p align="center"><img width="350" alt="기술 스택" src="https://user-images.githubusercontent.com/54564170/102690738-caa8b800-424a-11eb-81f5-96cd0ca4d309.png"></p>
 
 
 <br>
@@ -54,25 +54,17 @@ VIBE 서비스 사용과정에서 발생하는 이벤트를 수집하는 서비
 ## 📹 서비스 데모 영상
 #### Web 🕸
 
-[<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)
+[<img width="500" src="https://user-images.githubusercontent.com/60839959/102683358-bbf2de80-4213-11eb-87e0-c889f0afe61b.png"/>](https://youtu.be/AqSunm6fDfc)
 > 클릭하시면 youtube로 이동합니다💨
 
 #### iOS 🍎
 
-[<img width="500" src="https://user-images.githubusercontent.com/54564170/102687174-9aecb680-4230-11eb-985a-ab967a08f06f.png"/>](https://www.youtube.com/watch?v=_10ZGYLncX0)
+[<img width="500" src="https://user-images.githubusercontent.com/54564170/102687174-9aecb680-4230-11eb-985a-ab967a08f06f.png"/>](https://youtu.be/dQiQtMR8pOM)
 > 클릭하시면 youtube로 이동합니다💨
 
 <br>
 <br>
 
-### Web 배포 주소
-http://115.85.181.152:3000/
-```
-네이버 로그인API 검수 문제로 로그인이 불가하여 주요서비스인 보관함 열람이 불가합니다😂
-전체 서비스 결과물은 데모영상을 활용해주시면 감사하겠습니다 🙏
-```
-
-
 
 ### Web 실행방법 🐈
 ```
@@ -98,7 +90,7 @@ npm run start
 
 ## 🚢 사용자 이벤트 수집기 C팀 소개
 
-<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>
+<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>
 
 | 🕸 Web                                                        | 🕸 Web                                                        | 🕸 Web                                                        | 🍎 iOS                                                        | 🍎 iOS                                                        |
 | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |

backend/src/route/auth/controller.ts

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

backend/src/route/auth2/controller.ts

@@ -0,0 +1,11 @@
+import { Request, Response } from 'express';
+import { IJwtPayload } from '../../middlewares/auth';
+import * as authService from '../../services/auth';
+
+const getToken = (req: Request, res: Response): void => {
+  // 모바일
+  const token = authService.createToken(req.user as IJwtPayload);
+  return res.redirect(`minivibe://token?${token}`);
+};
+
+export { getToken };

backend/src/route/auth2/index.ts

@@ -0,0 +1,10 @@
+import * as express from 'express';
+import * as passport from 'passport';
+import { getToken } from './controller';
+
+const route = express.Router();
+
+route.get('/login', passport.authenticate('naver', { session: false }));
+route.get('/login/callback', passport.authenticate('naver', { session: false }), getToken);
+
+export default route;

backend/src/route/index.ts

@@ -3,6 +3,7 @@ import sampleRoute from './sample';
 import userRoute from './users';
 import logRoute from './log';
 import authRoute from './auth';
+import auth2Route from './auth2';
 import libraryRoute from './library';
 import trackRoute from './track';
 import albumRoute from './album';
@@ -17,6 +18,7 @@ route.use('/sample', sampleRoute);
 route.use('/user', userRoute);
 route.use('/log', tryAuthenticateWithJwt, logRoute);
 route.use('/auth', authRoute);
+route.use('/auth2', auth2Route);
 route.use('/library', authenticateWithJwt, libraryRoute);
 route.use('/track', trackRoute);
 route.use('/album', albumRoute);

event.sample.js

@@ -6,16 +6,9 @@ module.exports = withImages({
     return [
       {
         source: '/',
-        destination: '/today', // Matched parameters can be used in the destination
+        destination: '/today', 
         permanent: true,
       },
     ]
   },
 })
-
-// webpack 사용시
-// module.exports = withTypescript({
-//     webpack(config, options) {
-//       return config
-//     }
-//   })

frontend/next.config.js

@@ -1,4 +1,4 @@
-import App, { Container } from 'next/app';
+import App from 'next/app';
 import React from 'react';
 import theme from '@styles/themes';
 import GlobalStyles from '@styles/global-styles';
@@ -14,7 +14,7 @@ class ReactApp extends App<any> {
   public render() {
     const { Component, pageProps } = this.props;
     return (
-      <Container>
+      <>
         <GlobalStyles />
         <ThemeProvider theme={theme}>
           <AuthProvider>
@@ -25,7 +25,7 @@ class ReactApp extends App<any> {
             </PlayProvider>
           </AuthProvider>
         </ThemeProvider>
-      </Container>
+      </>
     );
   }
 }

frontend/pages/_app.tsx

@@ -59,12 +59,6 @@ const LargeButton = ({ onClick, children, customType }: ILargeButtonProps) => {
   }
 };
 
-// const iconStyle = {
-//   marginRight: '4px',
-//   position: 'relative',
-//   bottom: '1px',
-// };
-
 const CustomButton = styled.button<ILargeButtonProps>`
   display: flex;
   justify-content: center;