CSE-Final-Project · heeeesoo · May 6, 2022 · May 17, 2022 · May 18, 2022 · May 18, 2022
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "nd-front",
   "version": "0.1.0",
   "private": true,
-  "proxy": "https://10.200.11.221:8000",
+  "proxy": "https://192.168.35.83:8000",
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-brands-svg-icons": "^5.15.4",

diff --git a/public/img/studydo.png b/public/img/studydo.png
diff --git a/src/components/AllStudy.js b/src/components/AllStudy.js
@@ -3,6 +3,54 @@ import styled from 'styled-components';
 import axios from 'axios';
 import {Card,Button} from 'react-bootstrap';
 
+const Container = styled.div`
+  padding: 20px;
+`;
+
+//
+const Ranking_font = styled.div`
+    font-size: xx-large;
+    font-weight: bold;
+`;
+//
+
+const Date_font = styled.div`
+    font-size: large;
+    font-weight: bold;
+    text-align: center; 
+`;
+
+const ContentBox = styled.div`
+    display: flex;
+    gap: 0.25rem;
+
+    align-items: center;
+    grid-area: content;
+    justify-content: center;
+`;
+const Content1 = styled.div`
+    padding: 0.25rem;
+    // background: yellow;
+    text-align: left;
+    width: 30%;
+    height: 100%;
+`;
+const Content2 = styled.div`
+    padding: 0.25rem;
+    // background: yellow;
+    text-align: left;
+    width: 50%;
+    height: 100%;
+    font-size: large;
+`;
+const Content3 = styled.div`
+    padding: 0.25rem;
+    // background: yellow;
+    text-align: center;
+    width: 100%;
+    height: 100%;
+`;
+
 const StudiesComp = (props) => {
     const study = props.study;
 
@@ -45,17 +93,39 @@ const StudiesComp = (props) => {
                 <Card.Body>
                     <Card.Title>{study.title}</Card.Title>
                     <Card.Text>
-                        목표 시간: {study.target_time} <br/>
-                        멤버 수: {study.member_number} <br/>
-                        하루 벌금: {study.penalty} <br/>
-                        스터디 정보: {study.info} <br/>
-                        방장이름: {study.leader} <br/>
-                        스터디 아이디: {study.id} <br/>
+                    <ContentBox>
+                        <Content1>방장</Content1>
+                        <Content2>{study.leader}</Content2>
+                        <Content3></Content3>
+                    </ContentBox>
+                    <hr/>
+                    <ContentBox>
+                        <Content1>목표 시간</Content1>
+                        <Content2>{study.target_time}</Content2>
+                        <Content3></Content3>
+                    </ContentBox>
+                    <ContentBox>
+                        <Content1>하루 벌금</Content1>
+                        <Content2>{study.penalty}</Content2>
+                        <Content3></Content3>
+                    </ContentBox>
+                    <ContentBox>
+                        <Content1>멤버 수</Content1>
+                        <Content2>{study.member_number}</Content2>
+                        <Content3></Content3>
+                    </ContentBox>
+                    <hr/>
+                    <ContentBox>
+                        <Content1>스터디 정보</Content1>
+                        <Content2>{study.info}</Content2>
+                        <Content3></Content3>
+                    </ContentBox>
+                    <hr/>
                     </Card.Text>
                     {
                         (study.is_recruit === true)?
                         <>
-                            <Button onClick={() => {fetchJoin()}}>JOIN</Button>
+                            <Button variant="dark" onClick={() => {fetchJoin()}}>JOIN</Button>
                         </>
                         : null
                     }

diff --git a/src/components/MyStudy.js b/src/components/MyStudy.js
@@ -3,6 +3,55 @@ import { withRouter } from 'react-router';
 import {createBrowserHistory} from 'history';
 import axios from 'axios';
 import {Card,Button} from 'react-bootstrap';
+import styled from 'styled-components';
+
+const Container = styled.div`
+  padding: 20px;
+`;
+
+//
+const Ranking_font = styled.div`
+    font-size: xx-large;
+    font-weight: bold;
+`;
+//
+
+const Date_font = styled.div`
+    font-size: large;
+    font-weight: bold;
+    text-align: center; 
+`;
+
+const ContentBox = styled.div`
+    display: flex;
+    gap: 0.25rem;
+
+    align-items: center;
+    grid-area: content;
+    justify-content: center;
+`;
+const Content1 = styled.div`
+    padding: 0.25rem;
+    // background: yellow;
+    text-align: left;
+    width: 30%;
+    height: 100%;
+`;
+const Content2 = styled.div`
+    padding: 0.25rem;
+    // background: yellow;
+    text-align: left;
+    width: 50%;
+    height: 100%;
+    font-size: large;
+`;
+const Content3 = styled.div`
+    padding: 0.25rem;
+    // background: yellow;
+    text-align: center;
+    width: 100%;
+    height: 100%;
+`;
 
 const MyStudy = (props) => {
     const mystudy = props.mystudy;
@@ -65,20 +114,51 @@ const MyStudy = (props) => {
                 <Card.Header>{mystudy.topic}</Card.Header>
                 <Card.Body>
                     <Card.Title>{mystudy.title}</Card.Title>
+
                     <Card.Text>
-                        목표 시간: {mystudy.target_time} <br/>
+                    <ContentBox>
+                        <Content1>방장</Content1>
+                        <Content2>{mystudy.leader}</Content2>
+                        <Content3></Content3>
+                    </ContentBox>
+                    <hr/>
+                    <ContentBox>
+                        <Content1>목표 시간</Content1>
+                        <Content2>{mystudy.target_time}</Content2>
+                        <Content3></Content3>
+                    </ContentBox>
+                    <ContentBox>
+                        <Content1>하루 벌금</Content1>
+                        <Content2>{mystudy.penalty}</Content2>
+                        <Content3></Content3>
+                    </ContentBox>
+                    <ContentBox>
+                        <Content1>멤버 수</Content1>
+                        <Content2>{mystudy.member_number}</Content2>
+                        <Content3></Content3>
+                    </ContentBox>
+                    <hr/>
+                    <ContentBox>
+                        <Content1>스터디 정보</Content1>
+                        <Content2>{mystudy.info}</Content2>
+                        <Content3></Content3>
+                    </ContentBox>
+                    <hr/>
+
+                    {/* 목표 시간:  {mystudy.target_time} <br/>
                         멤버 수: {mystudy.member_number} <br/>
                         하루 벌금: {mystudy.penalty} <br/>
                         스터디 정보: {mystudy.info} <br/>
                         방장이름: {mystudy.leader} <br/>
-                        스터디 아이디: {mystudy.id} <br/>
+                        스터디 아이디: {mystudy.id} <br/> */}
                     </Card.Text>
+
                     {
                         (mystudy.is_recruit===false)?
                         <>
-                            <Button size="sm" onClick={() => {fetchRoom()}}>공부 시작</Button>
+                            <Button size="sm" variant="dark" onClick={() => {fetchRoom()}}>공부 시작</Button>
                             &nbsp;
-                            <Button size="sm" onClick={() => {enterManage()}}>관리</Button>
+                            <Button size="sm" variant="dark" onClick={() => {enterManage()}}>관리</Button>
                             &nbsp; 
                         </>
                         :

diff --git a/src/components/Room.js b/src/components/Room.js
@@ -99,7 +99,7 @@ const Room = (props) => {
 //         socketRef.current = io.connect("https://10.200.11.221:8000"); //현재 커넥트 정보 저장 
 //         console.log(socketRef.current) 
 // =======
-        socketRef.current = io.connect("https://192.168.0.28:8000"); //현재 커넥트 정보 저장  
+        socketRef.current = io.connect("https://192.168.35.64:8000"); //현재 커넥트 정보 저장  
 // >>>>>>> main
 
         navigator.mediaDevices.getUserMedia({ video: videoConstraints, audio: false })
@@ -216,7 +216,7 @@ const Room = (props) => {
 // =======
                 var response; 
                 if(mode) { //자동 측정 on 모드
-                    response = await fetch('https://192.168.0.28:5000/image', { //https://223.131.223.239:5000/image
+                    response = await fetch('https://192.168.35.64:5000/image', { //https://223.131.223.239:5000/image
                     method: "POST",
                     body: formData,
                     signal: abortController.signal,

diff --git a/src/components/auth/AuthForm.js b/src/components/auth/AuthForm.js
@@ -2,7 +2,8 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import palette from '../../lib/styles/palette';
-import Button from '../common/Button';
+import Button_2 from '../common/Button_2';
+// import {Card,Button} from 'react-bootstrap';
 /*
 회원가입, 로그인 폼을 보여주는 component
 */
@@ -87,13 +88,20 @@ const AuthForm = ({type,form,onChange,onSubmit}) => {
                         value={form.passwordConfirm}
                     />
                 )}
-                <Button cyan fullWidth style={{marginTop: '1rem'}}>{text}</Button>
+                {/* <Button_2 cyan fullWidth style={{marginTop: '1rem'}}>{text}</Button_2> */}
+                <Button_2 >{text}</Button_2>
+                {/* <br/> */}
+                {/* <div className="d-grid gap-2">
+                <Button variant="warning" size="lg">{text}</Button>
+                </div> */}
             </form>
             <Footer>
                 {
                     type ==='login'?
                     (
+                        <>
                         <Link to= '/register'>회원가입</Link>
+                        </>
                     ):
                     (
                         <Link to= '/login'>로그인</Link>

diff --git a/src/components/auth/AuthTemplate.js b/src/components/auth/AuthTemplate.js
@@ -39,7 +39,9 @@ const AuthTemplate = ({children}) => {
         <AuthTemplateBlock>
             <WhiteBox>
                 <div className='logo-area'>
-                    <Link to = '/'>STUDY.DO</Link>
+                    <Link to = '/'>
+                    <img src="img/studydo.png" width="130px" height="40px"/>
+                    </Link>
                 </div>
                 {children}
             </WhiteBox>

diff --git a/src/components/common/Button.js → src/components/common/Button_2.js b/src/components/common/Button.js → src/components/common/Button_2.js
@@ -2,6 +2,7 @@ import React from 'react';
 import styled, { css } from 'styled-components';
 import palette from '../../lib/styles/palette';
 import { withRouter } from 'react-router-dom';
+import { Button } from 'react-bootstrap';
 
 const StyledButton = styled.button`
     border:nond;
@@ -34,7 +35,7 @@ const StyledButton = styled.button`
 `;
 
 //{...props}쓴 이유 : Button이 받아 오는 props를 모두 StyledButton에 전달한다.
-const Button = ({ to, history, ...rest }) => {
+const Button_2 = ({ to, history, ...rest }) => {
     const onClick = e => {
         // to가 있다면 to로 페이지 이동
         if (to) {
@@ -45,8 +46,10 @@ const Button = ({ to, history, ...rest }) => {
         }
     };
     return (
+        <div className="d-grid gap-2">
         <StyledButton {...rest} onClick={onClick} />
+        </div>
     );
 };
 
-export default withRouter(Button);
+export default withRouter(Button_2);
diff --git a/src/components/common/Header.js b/src/components/common/Header.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import Button from './Button';
+// import Button from './Button_2';
 import font from '../../css/font.css'
 import { Nav, Navbar,Container,Offcanvas,NavDropdown,Form,FormControl } from 'react-bootstrap';
 import '../../App.css'

diff --git a/src/components/manage/Penalty.js b/src/components/manage/Penalty.js
@@ -24,6 +24,7 @@ const Penalty = (props) => {
         setLoading(false);
     }
 
+
     useEffect(()=>{
         fetchPenalty();
     },[]);
@@ -36,7 +37,7 @@ const Penalty = (props) => {
             {
                 penalty.map(function(penalty,i){
                     return(
-                        <PenaltyCard penalty={penalty} i={i} key={i}/>
+                        <PenaltyCard penalty={penalty} studyID={studyID} i={i} key={i}/>
                     )
                 })
             }