[Feat] Modify PeoplePanel

- PeoplePanel에서 인물 리스트 부분의 height를 video의 height와 같도록
설정하였습니다.
- PeoplePanel에서 인물을 선택하지 않고 완료 버튼을 누를 때 경고 모달
창이 뜨도록 하였습니다.
- PeoplePanel에서 인물 선택 후 timeline 추출 시, spinner가 panel의
가운데에 위치하도록 하였습니다.
issue #47

serving/frontend/src/components/PeoplePanel.js

@@ -1,9 +1,10 @@
-import { Spin, Checkbox, Avatar, Image } from 'antd';
+import { Spin, Checkbox, Avatar, Image, Modal } from 'antd';
 import axios from 'axios';
 import { useState } from 'react';
 import styled from "styled-components";
 import { useNavigate } from 'react-router-dom';
 
+
 const STORAGE = "https://storage.googleapis.com/snowman-bucket/";
 
 function PeoplePanel(props) {
@@ -44,7 +45,7 @@ function PeoplePanel(props) {
 
     const getHighlight = async(res) => {
         await axios.post(
-            "http://101.101.218.23:30001/timeline-highlight", res // 101.101.218.23
+            "http://118.67.130.53:30001/timeline-highlight", res // 101.101.218.23
         ).then((response) => {
             console.log(response);
             setLoading(false);
@@ -53,13 +54,11 @@ function PeoplePanel(props) {
     };
 
     const personSelect = async () => {
-        // e.preventDefault();
-        setLoading(true);
 
         const FaceTimeline = () => {
             return axios({
                 method:"post",
-                url : "http://101.101.218.23:30001/timeline-face", // 101.101.218.23
+                url : "http://118.67.130.53:30001/timeline-face", // 101.101.218.23
                 data : {"face": checkedList, "id":props.id}
             });
         };
@@ -72,31 +71,45 @@ function PeoplePanel(props) {
             });
         };
 
-        console.log('checkedList', checkedList);
-
-        await axios.all([FaceTimeline(), LaughTimeline()])
-        .then(axios.spread(function (face_timeline, laugh_timeline) {
-            var res = { ...face_timeline.data};
-            res["laugh"] = laugh_timeline.data.laugh;
-            res["people_img"] = props.people
-            getHighlight(res);
-            console.log(res);
-        })).catch((error) => {
-            console.log("Failure :(");
-        });
+        if (checkedList.length) {
+            setLoading(true);
+
+            console.log('checkedList', checkedList);
+
+            await axios.all([FaceTimeline(), LaughTimeline()])
+            .then(axios.spread(function (face_timeline, laugh_timeline) {
+                var res = { ...face_timeline.data};
+                res["laugh"] = laugh_timeline.data.laugh;
+                res["people_img"] = props.people
+                getHighlight(res);
+                console.log(res);
+            })).catch((error) => {
+                console.log("Failure :(");
+            });
+        } else {
+            Modal.error({
+                title: "선택한 인물이 없습니다.",
+                content: "쇼츠를 추출할 인물을 선택해주세요.",
+                centered: true,
+                maskClosable: true,
+            });
+        }
     };
 
     return (
         <StyledPanel>
-            <Spin spinning={loading} size="large" tip="Making shorts...">
-            <div>
-                <Checkbox.Group style={{width: "100%"}} value={checkedList} onChange={onChange}>
-                    {render(props.people)}
-                </Checkbox.Group>
-            </div>
-            <StyledButton onClick={personSelect}>
+            <Spin spinning={loading} 
+                style={{position: "absolute", top: "50%", transform: "translateY(-50%)"}} 
+                size="large" 
+                tip="Making shorts...">
+                <div style={{maxHeight: props.height, overflow: "auto"}}>
+                    <Checkbox.Group style={{width: "100%"}} value={checkedList} onChange={onChange}>
+                        {render(props.people)}
+                    </Checkbox.Group>
+                </div>
+                <StyledButton onClick={personSelect}>
                     인물 선택 완료!
-            </StyledButton>
+                </StyledButton>
             </Spin>
         </StyledPanel>
     );

serving/frontend/src/pages/SelectPerson.js

@@ -1,14 +1,31 @@
 import { useLocation } from 'react-router-dom';
-import { useEffect, useState } from 'react';
-import axios from 'axios';
+import { useEffect, useState, useRef } from 'react';
 import styled from "styled-components";
 import { PeoplePanel } from '../components';
 
 
 function SelectPerson() {
+
     const location = useLocation();
     console.log(location.state);
-
+
+    const ref = useRef();
+    const [height, setHeight] = useState();
+    const [loaded, setLoaded] = useState(false);
+
+    const getVideoHeight = () => {
+        if (ref.current) {
+            setHeight(ref.current.clientHeight);
+        }
+    };
+    useEffect(() => {
+        getVideoHeight();
+    }, [loaded]);
+
+    useEffect(() => {
+        window.addEventListener("resize", getVideoHeight);
+    }, []);
+
     return (
         <div style={{padding: "20px"}}>
             <div style={{width: "75%", 
@@ -19,13 +36,13 @@ function SelectPerson() {
                 paddingTop: "30px",
                 fontSize: "25px"}}>인물을 선택하세요.</div>
             <StyledArea>
-                <div style={{flexGrow: "1", marginRight: "20px"}}>
-                    <video width="100%" controls>
+                <div style={{flexGrow: "1", marginRight: "25px"}}>
+                    <video ref={ref} width="100%" onLoadedData={() => {setLoaded(true)}} controls>
                         <source src={location.state.video}></source>
                     </video>
                 </div>
                 <div style={{flexGrow: "1"}}>
-                    <PeoplePanel people={location.state.people_img} id={location.state.id} id_laughter={location.state.id_laughter} />
+                    <PeoplePanel height={height} people={location.state.people_img} id={location.state.id} id_laughter={location.state.id_laughter} />
                 </div>
             </StyledArea>
         </div>