♻ :: MajorLine 컴포넌트 분리

SOPOLAST/package.json

@@ -52,7 +52,7 @@
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
     "@types/styled-components": "^5.1.34",
-    "axios": "^1.6.5",
+    "axios": "^1.6.7",
     "browser": "^0.2.6",
     "cli": "^1.0.1",
     "css-loader": "^6.9.0",

SOPOLAST/src/Components/Portfolio/portfolioMain.tsx

@@ -1,10 +1,9 @@
 import React 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/constants/Sidebar/Side/side";
 import "./protfolio.css";
 import Head from "../../constants/head/Head/head"
+import MajorLine from "../../constants/MajorLine/Major"
 
 import * as S from "../Portfolio/portfolioMain.style"
 
@@ -38,66 +37,7 @@ export default function Portfolio() {
             <S.serchIconLine/>
           </S.Search>
 
-          <S.StackLine>
-            <>
-              <S.GradeSelect className="gradeSelect">
-                <option value="8">8기 </option>
-                <option value="7">7기 </option>
-                <option value="6">6기 </option>
-              </S.GradeSelect>
-            </>
-
-            <S.GradeGreen> | </S.GradeGreen>
-            <S.MajorSelect>
-              <S.MajorButton
-                onClick={() => majorClick('프론트엔드')}
-              >
-                프론트엔드
-              </S.MajorButton>
-
-              <S.MajorButton
-                onClick={() => majorClick('백엔드')}
-              >
-                백엔드
-              </S.MajorButton>
-
-              <S.MajorButton
-                onClick={() => majorClick('안드로이드')}
-              >
-                안드로이드
-              </S.MajorButton>
-
-              <S.MajorButton
-              onClick={() => majorClick('iOS')}
-              >
-                iOS
-              </S.MajorButton>
-
-              <S.MajorButton
-                onClick={() => majorClick('임베디드')}
-              >
-                임베디드
-              </S.MajorButton>
-
-              <S.MajorButton
-              onClick={() => majorClick('AI')}
-              >
-                AI
-              </S.MajorButton>
-
-              <S.MajorButton
-                onClick={() => majorClick('정보보안')}
-              >
-                정보보안
-              </S.MajorButton>
-
-              <S.MajorButton
-                onClick={() => majorClick('디자인')}
-              >
-                디자인
-              </S.MajorButton>
-            </S.MajorSelect>
-          </S.StackLine>
+          <MajorLine/>
         </S.SearchBox>
 
         <Sidename />

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<HeaderLiProps>`
+  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;
+    `}
+`;

SOPOLAST/src/constants/MajorLine/Major.tsx

@@ -0,0 +1,103 @@
+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 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 = (index:string) => {
+    setActiveIndex(index);
+  };
+
+  return (
+    <div className="main">
+      <div className="content">
+        <S.StackLine>
+        <S.GradeSelect className="gradeSelect">
+            {grades.map((grade) => (
+              <option key={grade.id} value={grade.id}>
+                {grade.name}
+              </option>
+            ))}
+          </S.GradeSelect>
+
+          <S.GradeGreen> | </S.GradeGreen>
+
+          <S.MajorSelect>
+            <S.MajorButton
+              active={activeIndex === "프론트엔드"}
+              onClick={() => handleClick("프론트엔드")}
+            >
+              프론트엔드
+            </S.MajorButton>
+
+            <S.MajorButton
+              active={activeIndex === "백엔드"}
+              onClick={() => handleClick("백엔드")}
+            >
+              백엔드
+            </S.MajorButton>
+
+            <S.MajorButton
+              active={activeIndex === "안드로이드"}
+              onClick={() => handleClick("안드로이드")}
+            >
+              안드로이드
+            </S.MajorButton>
+
+            <S.MajorButton
+              active={activeIndex === "Ios"}
+              onClick={() => handleClick("Ios")}
+            >
+              iOS
+            </S.MajorButton>
+
+            <S.MajorButton
+              active={activeIndex === "임베디드"}
+              onClick={() => handleClick("임베디드")}
+            >
+              임베디드
+            </S.MajorButton>
+
+            <S.MajorButton
+              active={activeIndex === "AI"}
+              onClick={() => handleClick("AI")}
+            >
+              AI
+            </S.MajorButton>
+
+            <S.MajorButton
+              active={activeIndex === "정보보안"}
+              onClick={() => handleClick("정보보안")}
+            >
+              정보보안
+            </S.MajorButton>
+
+            <S.MajorButton
+              active={activeIndex === "디자인"}
+              onClick={() => handleClick("디자인")}
+            >
+              디자인
+            </S.MajorButton>
+          </S.MajorSelect>
+        </S.StackLine>
+      </div>
+    </div>
+  );
+}