diff --git a/SOPOLAST/src/Components/Portfolio/portfolioMain.tsx b/SOPOLAST/src/Components/Portfolio/portfolioMain.tsx index 577c3b4..0a0ce62 100644 --- a/SOPOLAST/src/Components/Portfolio/portfolioMain.tsx +++ b/SOPOLAST/src/Components/Portfolio/portfolioMain.tsx @@ -1,32 +1,35 @@ -import React from "react"; +import React, { useState, useEffect } from "react"; import { useNavigate } from "react-router-dom"; -import cnsLogo from "../../Assets/image/cnsLogo.png"; -import b1nd from "../../Assets/image/b1nd.png"; -import Sidename from "src/Components/Sidebar/Side/side"; +import Sidename from "src/constants/Sidebar/Side/side"; import "./protfolio.css"; -import Head from "src/Components/head/Head/head"; +import Head from "../../constants/head/Head/head" +import MajorLine from "../../constants/MajorLine/Major" +import axios from "axios"; import * as S from "./portfolioMain.style"; export default function Portfolio() { - const majorClick = (major) => { - console.log(`Clicked on ${major}`); - }; - - const majorbutton: HTMLElement | null = - document.getElementById("majorbutton"); + const [users, setUsers] = useState([]); + const [activeUser, setActiveUser] = useState(null); + const navigate = useNavigate(); - if (majorbutton) { - majorbutton.addEventListener("click", function () { - if (majorbutton.classList.contains("clicked")) { - majorbutton.classList.remove("clicked"); - } else { - majorbutton.classList.add("clicked"); + useEffect(() => { + const fetchUsers = async () => { + try { + const response = await axios.get("히ㅣㅎ api"); + setUsers(response.data); + } catch (error) { + console.error("Error fetching users:", error); } - }); - } + }; + + fetchUsers(); + }, []); + + const handleNameCardClick = (user) => { + setActiveUser(user); + }; - const navigate = useNavigate(); return (
@@ -38,95 +41,24 @@ export default function Portfolio() { - - - <> - - - - - - - - | - - majorClick("프론트엔드")}> - 프론트엔드 - - - majorClick("백엔드")}> - 백엔드 - - - majorClick("안드로이드")}> - 안드로이드 - - - majorClick("iOS")}> - iOS - - - majorClick("임베디드")}> - 임베디드 - - - majorClick("AI")}>AI - - majorClick("정보보안")}> - 정보보안 - - - majorClick("디자인")}> - 디자인 - - - + - { - navigate("/52562893"); - }} - > - 배채희 - DGSW 8th - Mail - chaeeehui@gmail.com - - - { - navigate("/12362153"); - }} - > - 박규민 - DGSW 8th - Mail - kyumin7487@gmail.com - - - - 전우진 - DGSW 8th - Mail - woojin@gmail.com - - - - 이윤선 - DGSW 8th - Mail - younssun@gmail.com - - - - 이예진 - DGSW 8th - Mail - yejin@gmail.com - + {users.map((user) => ( + handleNameCardClick(user)} + > + {user.name} + {user.grade} + {user.mail} + + ))}
); } - -// export default portfolio(); diff --git a/SOPOLAST/src/Components/Portfolio/protfolio.css b/SOPOLAST/src/Components/Portfolio/protfolio.css deleted file mode 100644 index 02c4d70..0000000 --- a/SOPOLAST/src/Components/Portfolio/protfolio.css +++ /dev/null @@ -1,398 +0,0 @@ - .proBox_{ - position: relative; - - display: inline-block; - - width: 320px; - height: 640px; - flex-shrink: 0; - border-radius: 10px; - background: #F5F5F6; - box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); - margin-left: 40px; - margin-top: 200px; - - color: #000; - font-family: Inter; - font-size: 25px; - font-style: normal; - font-weight: 800; - line-height: normal; - - overflow: hidden; - } - - .proBox_ > .proName{ - position: absolute; - - width: 70.318px; - height: 28.444px; - flex-shrink: 0; - margin: 46.46px 0 0 28.54px; - } - - .proHr{ - - border: #A7A7A7 solid 0.9px; - width: 320px;; - - margin-top: 30.34px; - margin-left: -28.4px; - } - - .proBio{ - margin-top: 30px; - - font-size: 17px; - font-style: normal; - font-weight: 700; - white-space: nowrap; - } - - .proBio > .firstBio{ - font-size: 18px; - font-weight: 800; - } - - .secondBio{ - margin-top: 10px; - } - - .skillTitle{ - margin-top: 20px; - font-size: 20px; - font-weight: 800; - } - - .awardTitle{ - margin-top: 20px; - font-size: 20px; - font-weight: 800; - } - - .bioInfo{ - margin-top: 20px; - } - - .bioInfo > .oddBio{ - margin-top: 10px; - } - - .imgBio{ - width: 20px; - height: 20px; - - vertical-align: middle; - } - - .perBio{ - font-weight: 600; - font-size: 15px; - - vertical-align: middle; - - margin-left: 10px; - } - - .searchBox{ - display: flex; - position: absolute; - left: 300px; - top: 100px; - width: 840px; - height: 150px; - flex-shrink: 0; - - /* border-radius: 50px; - border: 1px solid #178915; - background: #FFF; */ - } - .search{ - position: absolute; - display: inline-block; - top: 10px; - left: 180px; - width: 840px; - height: 50px; - flex-shrink: 0; - border-radius: 50px; - border: 1px solid #1A9A18; - background: #FFF; - } - .search_icon{ - position: absolute; - cursor: pointer; - background-color: #FFF; - top: 9px; - left: 790px; - width: 25px; - height: 25px; - flex-shrink: 0; - border: 1px solid #1A9A18; - border-radius: 50%; - } - .searcg_icon_line{ - position: absolute; - cursor: pointer; - top: 35px; - left: 809px; - background-color: #1A9A18; - transform: rotate( 50deg ); - width: 13px; - height: 1px; - flex-shrink: 0; - stroke-width: 1px; - stroke: #1A9A18; - } - .search_box{ - position: relative; - outline: none; - font-size: 20px; - left: 20px; - top: 4px; - border: none; - width: 750px; - height: 40px; - } - - .searchBox > .searchFito{ - margin-left: 797px; - margin-top: 11.5px; - } - - .gradeSelect{ - width: 80px; - height: 40px; - color: #000; - border: none; - - font-size: 30px; - font-weight: 600; - font-family: Inter; - - margin-top: 20px; - - display: inline; - - } - .gradeSelet::-ms-expand { - display: none; -} - - .gradegreen{ - color: green; - font-size: 30px; - - position: relative; - display: inline; - } - .stackLine{ - position: absolute; - width: 100%; - height: 100px; - bottom: 0px; - left: 200px; - display: inline-block; - } - .majorSelect{ - display: inline; - color: #A7A7A7; - font-family: Inter; - font-size: 20px; - font-style: normal; - font-weight: 600; - line-height: normal; - position: relative; - - } - - .majorbutton{ - border: none; - background-color: none; - - padding: 13px; - - display: inline; - color: #A7A7A7; - font-family: Inter; - font-size: 20px; - font-style: normal; - font-weight: 600; - line-height: normal; - position: relative; - - background: none; - } - - .majorbutton:hover, - .majorbutton.clicked { - color: #1A9A18 !important; - cursor: pointer; - - background-color: none; - } - - /* .majorSelect > .frontEnd{ - display: inline-block; - color: #1A9A18; - margin-top: 27px; - - } - .majorSelect > .frontEnd:active{ - cursor: pointer; - color: #178915; - } - .elseMajor{ - display: inline-block; - margin-left: 25px; - } - .elseMajor:active{ - cursor: pointer; - color: #178915; - } */ - - - .mo{ - position: absolute; - left: 460px; - top: 200px; - width: 900px; - height: 1000px; - - } - - .mo>.namecardBox:hover{ - cursor: pointer; - } - .mo>.namecardBox{ - width: 840px; - height: 130px; - flex-shrink: 0; - border-radius: 10px; - background: #FFF; - box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); - - position: absolute; - margin-left: 22px; - margin-top: 30px; - - display: inline-block; - } - - .nameName{ - color: #000; - font-family: Inter; - font-size: 25px; - font-style: normal; - font-weight: 800; - line-height: normal; - - position: absolute; - - margin-top: 22px; - margin-left: 33px; - } - - .nameGrade{ - color: #8C8C8C; - font-family: Inter; - font-size: 20px; - font-style: normal; - font-weight: 700; - line-height: normal; - - position: absolute; - - margin-top: 55px; - margin-left: 33px; - } - - .nameMail{ - color: #8C8C8C; - font-family: Inter; - font-size: 15px; - font-style: normal; - font-weight: 500; - line-height: normal; - - position: absolute; - - margin-top: 99px; - margin-left: 33px; - } - - .cnsLogo{ - width: 73px; - height: 40px; - flex-shrink: 0; - margin-top: 10px; - margin-left: 747px; - } - - .mo>.namecardBox2{ - width: 840px; - height: 130px; - flex-shrink: 0; - border-radius: 10px; - background: #FFF; - box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); - - position: absolute; - margin-left: 22px; - margin-top: 180px; - cursor: pointer; - display: inline-block; - } - - - .b1ndLogo{ - width: 70px; - height: 70px; - margin-top: 10px; - margin-left: 760px; - } - - .mo>.namecardBox3{ - width: 840px; - height: 130px; - flex-shrink: 0; - border-radius: 10px; - background: #FFF; - box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); - - position: absolute; - margin-left: 22px; - margin-top: 330px; - - display: inline-block; - } - - .mo>.namecardBox4{ - width: 840px; - height: 130px; - flex-shrink: 0; - border-radius: 10px; - background: #FFF; - box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); - - position: absolute; - margin-left: 22px; - margin-top: 480px; - - display: inline-block; - } - - .mo>.namecardBox5{ - width: 840px; - height: 130px; - flex-shrink: 0; - border-radius: 10px; - background: #FFF; - box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); - - position: absolute; - margin-left: 22px; - margin-top: 640px; - - display: inline-block; - } \ No newline at end of file diff --git a/SOPOLAST/src/constants/MajorLine/Major.style.ts b/SOPOLAST/src/constants/MajorLine/Major.style.ts new file mode 100644 index 0000000..1afe2db --- /dev/null +++ b/SOPOLAST/src/constants/MajorLine/Major.style.ts @@ -0,0 +1,68 @@ +import styled, { css } from "styled-components"; +interface HeaderLiProps { + active: boolean; +} + +export const StackLine = styled.div` + position: absolute; + width: 100%; + height: 100px; + bottom: 0px; + left: 200px; + display: inline-block; +`; + +export const GradeSelect = styled.select` + width: 80px; + height: 40px; + color: #000; + border: none; + font-size: 30px; + font-weight: 600; + font-family: Inter; + margin-top: 20px; + display: inline; +`; + +export const GradeGreen = styled.div` + color: green; + font-size: 30px; + position: relative; + display: inline; +`; + +export const MajorSelect = styled.div` + display: inline; + color: #a7a7a7; + font-family: Inter; + font-size: 20px; + font-style: normal; + font-weight: 600; + line-height: normal; + position: relative; +`; + +export const MajorButton = styled.button` + border: none; + background-color: none; + color: #A7A7A7; + padding: 13px; + display: inline; + font-family: Inter; + font-size: 20px; + font-style: normal; + font-weight: 600; + line-height: normal; + position: relative; + background: none; + cursor: pointer; + + &:hover { + color: #1a9a18; + } + ${(props) => + props.active && + css` + color: #1a9a18; + `} +`; diff --git a/SOPOLAST/src/constants/MajorLine/Major.tsx b/SOPOLAST/src/constants/MajorLine/Major.tsx new file mode 100644 index 0000000..d3f8e92 --- /dev/null +++ b/SOPOLAST/src/constants/MajorLine/Major.tsx @@ -0,0 +1,123 @@ +import React, { useState, useEffect } from "react"; +import { useNavigate } from "react-router-dom"; +import * as S from "src/constants/MajorLine/Major.style"; +import axios from "axios"; + +export default function Major() { + const [activeIndex, setActiveIndex] = useState(null); + const [grades, setGrades] = useState([]); + const [selectedMajorInfo, setSelectedMajorInfo] = useState(null); + const navigate = useNavigate(); + + useEffect(() => { + const fetchData = async () => { + try { + const response = await axios.get("히히api자리지롱"); + setGrades(response.data); + } catch (error) { + console.error("Error fetching data:", error); + } + }; + + fetchData(); + }, []); + + const handleClick = async (grade: string) => { + setActiveIndex(grade); + try { + const response = await axios.get(`히히api자리/${grade}`); + setSelectedMajorInfo(response.data); + } catch (error) { + console.error("Error fetching major info:", error); + } + }; + + return ( +
+
+ + + {grades.map((grade) => ( + + ))} + + + + | + + + {grades.map((grade) => ( + handleClick(grade.id)} + > + {grade.name} + + ))} + + + + handleClick("프론트엔드")} + > + 프론트엔드 + + + handleClick("백엔드")} + > + 백엔드 + + + handleClick("안드로이드")} + > + 안드로이드 + + + handleClick("Ios")} + > + iOS + + + handleClick("임베디드")} + > + 임베디드 + + + handleClick("AI")} + > + AI + + + handleClick("정보보안")} + > + 정보보안 + + + handleClick("디자인")} + > + 디자인 + + + +
+
+ ); +}