Merge pull request #5 from skkuse/feature/ksw

[ADD] frontend final

backend/src/app.js

@@ -25,6 +25,8 @@ class App {
 
     middleware() {
         /* Add your middleware */
+        /* TODO 배포 후 변경 */
+        this.app.use(cors({orgin: 'http://localhost:3000'}));
     }
 
     bodyParsing() {

frontend/package.json

@@ -9,15 +9,24 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@monaco-editor/react": "^4.6.0",
+    "@mui/material": "^5.14.17",
+    "@mui/styled-engine-sc": "^6.0.0-alpha.5",
+    "axios": "^1.6.2",
+    "bootstrap": "^5.3.2",
+    "next": "14.0.1",
     "react": "^18",
+    "react-bootstrap": "^2.9.1",
     "react-dom": "^18",
-    "next": "14.0.1"
+    "styled-components": "^6.1.1"
   },
   "devDependencies": {
     "autoprefixer": "^10.0.1",
-    "postcss": "^8",
-    "tailwindcss": "^3.3.0",
     "eslint": "^8",
-    "eslint-config-next": "14.0.1"
+    "eslint-config-next": "14.0.1",
+    "postcss": "^8",
+    "tailwindcss": "^3.3.0"
   }
 }

frontend/src/app/_components/common/_header.js

@@ -0,0 +1,60 @@
+"use client";
+
+import React, {useEffect, useState} from 'react';
+import {Form, Button} from 'react-bootstrap';
+import styles from '../../../styles/common/_header.module.css';
+import axios from 'axios';
+
+export default function Header(){
+    const [isLogin, setIsLogin] = useState(false);
+    const [userName, setUserName] = useState("");   
+
+    async function login(){
+        // local storage에 저장
+        if (typeof window !== 'undefined') {
+            localStorage.setItem('userName', userName);
+            setIsLogin(true);
+
+            try {
+                const res = await axios.get("http://localhost:8080/user/login", {
+                    params: {user: localStorage.getItem('userName')}
+                })
+                console.log(res.data);
+            } catch (err) {
+                console.log(err);
+            }
+
+        }
+        console.log(localStorage.getItem('userName'));    
+    }
+
+    function logout() {
+        if (typeof window !== 'undefined') {
+            localStorage.removeItem('userName');
+            setIsLogin(false);
+        }
+    }
+
+    return (
+        <div className={styles.headerbox}>
+            <div className={styles.name}>Green Algorithms</div>
+            <div className={styles.logincontainer}>
+                {isLogin ? 
+                <div className={styles.rightcontainer}>
+                    <div className={styles.name}>{localStorage.getItem('userName')}님 환영합니다!</div>
+                    <Button className="m-3" variant="outline-success" 
+                        onClick={() => logout()}>Logout</Button>
+                </div> : 
+                <>
+                    <Form>
+                        <Form.Group className="mb-3 mx-3">
+                            <Form.Control type="text" onChange={e => setUserName(e.target.value)}/>
+                        </Form.Group>
+                    </Form>
+                    <Button className="mb-3" variant="success" onClick={() => login()}>Login</Button>
+                </>
+                }
+            </div>
+        </div>
+    )
+}

frontend/src/app/_components/main/_analysis.js

@@ -0,0 +1,74 @@
+"use client";
+import styles from '../../../styles/main/_analysis.module.css';
+
+export default function Analysis({carbonSample}){
+    console.log(carbonSample);
+
+    return (
+        <>
+        { (carbonSample.length !== 0) ?
+            <div className={styles.analysiscontainer}>
+            <div className={styles.analysisname}>탄소 배출량 분석</div>
+                <div className={styles.analysisboxline}>
+                    <div className={styles.analysisbox}>
+                        <img className={styles.analysisimage} src="/images/tree.png" alt="tree" />
+                        <div className={styles.analysisdes}>{(100*carbonSample[0].figure)/800} 년 동안 활엽수가 흡수하는 탄소</div>
+                    </div>
+                    <div className={styles.analysisbox}>
+                        <img className={styles.analysisimage} src="/images/mountain_fire.png" alt="mountain_fire" />
+                        <div className={styles.analysisdes}>2023년 캐나다 산불이 배출한 탄소의 {(carbonSample[1].figure)/300000000000} 배 </div>
+                    </div>
+                </div>
+                <div className={styles.analysisboxline}>
+                    <div className={styles.analysisbox}>
+                        <img className={styles.analysisimage} src="/images/chatgpt.png" alt="chatgpt" />
+                        <div className={styles.analysisdes}>GPT-4 가 한번 학습할 때 배출하는 탄소의 {(carbonSample[2].figure)/12456000} 배</div>
+                        {/* <div className={styles.analysisname}>{(100*carbonSample[0].figure)/800} 년 동안 활엽수가 흡수하는 탄소</div> */}
+                    </div>
+                    <div className={styles.analysisbox}>
+                        <img className={styles.analysisimage} src="/images/trash.png" alt="trash" />
+                        <div className={styles.analysisdes}>쓰레기를 {(carbonSample[3].figure)/1100} 톤 연소시킬 때 배출되는 탄소</div>
+                        {/* <div className={styles.analysisname}>{(100*carbonSample[0].figure)/800} 년 동안 활엽수가 흡수하는 탄소</div> */}
+                    </div>
+                </div>
+                <div className={styles.analysisboxline}>
+                    <div className={styles.analysisbox}>
+                        <img className={styles.analysisimage} src="/images/rocket.png" alt="rocket" />
+                        <div className={styles.analysisdes}>로켓을 한 번 쏘아 올릴 때 배출되는 탄소의 {(carbonSample[4].figure)/200000}</div>
+                        {/* <div className={styles.analysisname}>{(100*carbonSample[0].figure)/800} 년 동안 활엽수가 흡수하는 탄소</div> */}
+                    </div>
+                    <div className={styles.analysisbox}>
+                        <img className={styles.analysisimage} src="/images/netflix.png" alt="netflix" />
+                        <div className={styles.analysisdes}>넷플릭스를 {(carbonSample[5].figure)/0.441} 시간 이용할 때 배출되는 탄소</div>
+                        {/* <div className={styles.analysisname}>{(100*carbonSample[0].figure)/800} 년 동안 활엽수가 흡수하는 탄소</div> */}
+                    </div>
+                </div>
+                <div className={styles.analysisboxline}>
+                    <div className={styles.analysisbox}>
+                        <img className={styles.analysisimage} src="/images/boiler.png" alt="boiler" />
+                        <div className={styles.analysisdes}>건물용 보일러를 {(carbonSample[6].figure)/2059} 시간 이용할 때 배출되는 탄소</div>
+                        {/* <div className={styles.analysisname}>{(100*carbonSample[0].figure)/800} 년 동안 활엽수가 흡수하는 탄소</div> */}
+                    </div>
+                    <div className={styles.analysisbox}>
+                        <img className={styles.analysisimage} src="/images/person.png" alt="person" />
+                        <div className={styles.analysisdes}>한국인 한 명이 {(24*carbonSample[7].figure)/42} 시간동안 배출하는 탄소</div>
+                        {/* <div className={styles.analysisname}>{(100*carbonSample[0].figure)/800} 년 동안 활엽수가 흡수하는 탄소</div> */}
+                    </div>
+                </div>
+                <div className={styles.analysisboxline}>
+                    <div className={styles.analysisbox}>
+                        <img className={styles.analysisimage} src="/images/airplane.png" alt="airplane" />
+                        <div className={styles.analysisdes}>여객기의 승객 1명이 {(carbonSample[8].figure)/0.255} km 이동할 때 배출되는 탄소</div>
+                        {/* <div className={styles.analysisname}>{(100*carbonSample[0].figure)/800} 년 동안 활엽수가 흡수하는 탄소</div> */}
+                    </div>
+                    <div className={styles.analysisbox}>
+                        <img className={styles.analysisimage} src="/images/power_plant.png" alt="power_plant" />
+                        <div className={styles.analysisdes}>화력발전소가 {(carbonSample[9].figure)} kWh당 배출하는 탄소</div>
+                        {/* <div className={styles.analysisname}>{(100*carbonSample[0].figure)/800} 년 동안 활엽수가 흡수하는 탄소</div> */}
+                    </div>
+                </div>
+            </div>
+        : null }
+        </>
+    )
+}

frontend/src/app/_components/main/_coding.js

@@ -0,0 +1,101 @@
+"use client";
+import Editor from "@monaco-editor/react";
+import React, { use, useRef, useState } from 'react';
+import { Button } from 'react-bootstrap';
+
+import styles from '../../../styles/main/_coding.module.css';
+
+export default function Coding({onInteract, carbonEmission}){
+    const editorRef = useRef(null);
+    const [isExecution, setIsExecution] = useState(false);
+
+    const handleEditorDidMount = (editor, monaco) => {
+        editorRef.current = editor;
+        onInteract('init', editorRef.current.getValue());
+    }
+
+    const handleContentChange = (value, event) => {
+        onInteract(null, value);
+    }
+
+    function openFile() {
+        var input = document.createElement("input");
+
+        input.type = "file";
+        input.accept = ".java";
+        input.onchange = function (event) {
+            processFile(event.target.files[0]);
+            event.target.value = "";
+        };
+        input.click();
+    }
+
+    function processFile(file) {
+        var reader = new FileReader();
+        reader.onload = function () {
+            // console.log(reader.result);
+            editorRef.current.setValue(reader.result);
+        };
+        reader.readAsText(file);
+    }
+
+    function interaction (action) {
+        onInteract(action, editorRef.current.getValue());
+        setIsExecution(true);
+    }
+
+    function initialization() {
+        // editorRef.current.setValue(basecode);
+    }
+
+    return (
+        <div className={styles.codingcontainer}>
+            { isExecution ? 
+                <div className={styles.carbon_name}>당신의 탄소 배출량은 {carbonEmission} 입니다!</div>
+                : null
+            }
+            <div className={styles.codingheader}>
+                <div className={styles.codingbox_name}>탄소 배출량을 계산해보세요!</div>
+                <div className={styles.buttons}>
+                    <div>
+                        <Button variant="success"
+                            style={{ backgroundColor: "white", border: "none" }}>
+                            <img src="/images/file.png" alt="file" className={styles.image_button}
+                            onClick={() => { openFile(); }} />
+                        </Button>
+                        <Button variant="success"
+                            style={{ backgroundColor: "white", border: "none" }} >
+                            <img src="/images/copy.png" alt="file" className={styles.image_button}
+                            onClick={() => navigator.clipboard.writeText(editorRef.current.getValue())} />
+                        </Button>
+                        <Button variant="success"
+                            // style={{ backgroundColor: "#414E5A", color: "white", fontSize: "20px", margin: "2px" }}
+                            onClick={() => interaction('runCarbon')}>
+                            탄소 배출량 계산
+                        </Button>
+
+                    </div>
+                </div>
+            </div>
+
+            <div className={styles.codingbox}>
+                <div className={styles.border}>
+                    <Editor
+                        onMount={handleEditorDidMount}
+                        onChange={handleContentChange}
+                        defaultLanguage="java"
+                        defaultValue="// Code here" 
+                        options={{
+                            minimap: {
+                                enabled: false,
+                            },
+                            fontSize: 15,
+                            glyphMargin: true,
+                            contextmenu: false,
+                        }}
+                        />
+                </div>
+            </div>
+        </div>
+    )
+}

frontend/src/app/_components/main/_ranking.js

@@ -0,0 +1,24 @@
+"use client";
+
+import React from 'react';
+import styles from '../../../styles/main/_ranking.module.css';
+
+export default function Ranking({ranking}){
+    // console.log(ranking);
+    return (
+        <>
+            {/* <h3>Ranking</h3> */}
+            <div className={styles.rankingcontainer}>
+                {ranking.map((rank, index) => (
+                    <div className={styles.rankingbox}>
+                        <div style={{"display": "flex", "flex-direction": "row"}}>
+                            <div>{index+1}위</div>
+                            <div className={styles.rankingbox_name}>{rank.name}</div>
+                        </div>
+                        <div className={styles.rankingbox_score}>{rank.carbon_emission} </div>
+                    </div>
+                ))}
+            </div>
+        </>
+    )
+}

frontend/src/app/_components/main/_server.js

@@ -0,0 +1,63 @@
+"use client";
+import React, {useEffect, useState} from 'react';
+import {Form, Button, Table} from 'react-bootstrap';
+import styles from '../../../styles/main/_server.module.css';
+
+export default function Server({executionServerInfo}){
+
+    console.log(executionServerInfo)
+
+    return (
+        <div className={styles.servercontainer}>
+            <div className={styles.server_name}>실행 서버 정보</div>
+            <Table striped bordered hover>
+                <tbody>
+                    <tr>
+                        <td>nCPUcores</td>
+                        <td>{executionServerInfo.nCPUcores}</td>
+                    </tr>
+                    <tr>
+                        <td>CPUpower</td>
+                        <td>{executionServerInfo.CPUpower}</td>
+                    </tr>
+                    <tr>
+                        <td>usageCPUUsed</td>
+                        <td>{executionServerInfo.usageCPUUsed}</td>
+                    </tr>
+                    <tr>
+                        <td>memory</td>
+                        <td>{executionServerInfo.memory}</td>
+                    </tr>
+                    <tr>
+                        <td>memoryPower</td>
+                        <td>{executionServerInfo.memoryPower}</td>
+                    </tr>
+                    <tr>
+                        <td>countryName</td>
+                        <td>{executionServerInfo.countryName}</td>
+                    </tr>
+                    <tr>
+                        <td>runTime</td>
+                        <td>{executionServerInfo.runTime}</td>
+                    </tr>
+                    <tr>
+                        <td>PUE</td>
+                        <td>{executionServerInfo.PUE}</td>
+                    </tr>
+                    <tr>
+                        <td>PSF</td>
+                        <td>{executionServerInfo.PSF}</td>
+                    </tr>
+                    <tr>
+                        <td>carbonIntensity</td>
+                        <td>{executionServerInfo.carbonIntensity}</td>
+                    </tr>
+                    <tr>
+                        <td>provider</td>
+                        <td>{executionServerInfo.provider}</td>
+                    </tr>
+                </tbody>
+            </Table>
+        </div>
+    )
+}

frontend/src/app/layout.js

@@ -1,8 +1,16 @@
 import { Inter } from 'next/font/google'
 import './globals.css'
+import 'bootstrap/dist/css/bootstrap.css';
 
 const inter = Inter({ subsets: ['latin'] })
 
+import dynamic from 'next/dynamic';
+
+const DynamicBootstrap = dynamic(
+  () => require('bootstrap/dist/js/bootstrap.min.js'),
+  { ssr: false }
+);
+
 export const metadata = {
   title: 'Create Next App',
   description: 'Generated by create next app',