Design: 각종 페이지 Design 수정

src/components/about/section2.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { Grid } from "@mui/material";
 import styled from "@emotion/styled";
 
@@ -59,16 +59,23 @@ interface Section2Props {
 
 export const Section2: React.FC<Section2Props> = ({ children }) => {
   const [scrollY, setScrollY] = useState(0);
+  const targetRef = useRef<HTMLElement | null>(null);
 
   const handleScroll = () => {
     const scrollPosition = window.pageYOffset;
     setScrollY(scrollPosition);
+
+    if (window.scrollY > 0 && targetRef.current) {
+      targetRef.current.style.position = "fixed";
+    }
   };
 
   useEffect(() => {
-    window.addEventListener("scroll", handleScroll);
-
+    const timer = setInterval(() => {
+      window.addEventListener("scroll", handleScroll);
+    }, 100);
     return () => {
+      clearInterval(timer);
       window.removeEventListener("scroll", handleScroll);
     };
   }, []);

src/components/about/section4.tsx

@@ -76,53 +76,69 @@ export const Section4: React.FC<Section4Props> = ({ children }) => {
         {"는 AWS 계정 연동을 위해 IAM을 사용합니다."}
       </Text>
       <SectionInner>
-        <img src={Description1} alt="" height={"500px"} width={"1000px"}></img>
-        <Text>{"상단의 계정 아이디를 클릭하여 [계정]을 클릭"}</Text>
+        <Text>
+          <span className="highlight">{"1. "}</span>
+          {"상단의 계정 아이디를 클릭하여 [계정]을 클릭"}
+        </Text>
         <Text>
           {
             "그 후 아래 결제 정보에 대한 IAM 사용자 및 역할 액세스 에서 편집 클릭 → 엑세스 활성화 "
           }
         </Text>
+        <img src={Description1} alt="" height={"500px"} width={"1000px"}></img>
       </SectionInner>
       <SectionInner>
-        <img src={Description2} alt="" height={"500px"} width={"1000px"}></img>
-        <Text>{"상단의 검색창에서 IAM 검색"}</Text>
+        <Text>
+          <span className="highlight">{"2. "}</span>
+          {"상단의 검색창에서 IAM 검색"}
+        </Text>
+        <img src={Description2} alt="" width={"1000px"}></img>
       </SectionInner>
       <SectionInner>
-        <img src={Description3} alt="" height={"500px"} width={"1000px"}></img>
-        <img src={Description4} alt="" height={"500px"} width={"1000px"}></img>
-        <Text>{"[사용자] - [사용자 생성]"}</Text>
+        <Text>
+          <span className="highlight">{"3. "}</span>
+          {"[사용자] - [사용자 생성]"}
+        </Text>
+        <img src={Description3} alt="" width={"1000px"}></img>
+        <img src={Description4} alt="" width={"1000px"}></img>
       </SectionInner>
       <SectionInner>
+        <Text>
+          <span className="highlight">{"4. "}</span>
+          {"그룹 생성 클릭"}
+        </Text>
         <img
           src={Description5}
           alt=""
-          height={"600px"}
           width={"1000px"}
           style={{ marginBottom: "20px" }}
         ></img>
-        <img src={Description6} alt="" height={"600px"} width={"1000px"}></img>
-        <Text>{"그룹 생성 클릭"}</Text>
+        <img src={Description6} alt="" width={"1000px"}></img>
       </SectionInner>
       <SectionInner>
+        <Text>
+          <span className="highlight">{"5. "}</span>
+          {"AdministratorAccess 선택"}
+        </Text>
         <img
           src={Description7}
           alt=""
-          height={"600px"}
           width={"1000px"}
           style={{ marginBottom: "20px" }}
         ></img>
-        <img src={Description8} alt="" height={"600px"} width={"1000px"}></img>
-        <Text>{"AdministratorAccess 선택"}</Text>
+        <img src={Description8} alt="" width={"1000px"}></img>
       </SectionInner>
       <SectionInner>
-        <img src={Description9} alt="" height={"600px"} width={"1000px"}></img>
-        <Text>{"사용자생성 클릭"}</Text>
+        <Text>
+          <span className="highlight">{"6. "}</span>
+          {"사용자생성 클릭"}
+        </Text>
         <Text>
           {
-            ".csv 파일을 열게 되면 IAM 사용자 명, 콘솔 로그인 url, 비밀번호를 모두 확인 할 수 있다. "
+            ".csv 파일을 열게 되면 IAM 사용자 명, 콘솔 로그인 url, 비밀번호를 모두 확인할 수 있다. "
           }
         </Text>
+        <img src={Description9} alt="" width={"1000px"}></img>
       </SectionInner>
     </SectionContainer>
   );

src/pages/MainPage/NightSky.tsx

@@ -13,7 +13,7 @@ function NightSky() {
     let height = container.clientHeight;
 
     const scene = new THREE.Scene();
-    scene.background = new THREE.Color(0x333333); // 배경색을 검은색으로 설정
+    scene.background = new THREE.Color(0x333333);
     const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
     camera.position.z = 5;
 
@@ -26,7 +26,7 @@ function NightSky() {
       size: 0.005,
     }); // 조정된 크기
 
-    const starsPositions = new Float32Array(1000 * 3); // x, y, z positions for each star
+    const starsPositions = new Float32Array(1000 * 3); 
 
     for (let i = 0; i < 2000; i++) {
       const i3 = i * 3;

src/pages/Nav/Nav.tsx

@@ -23,7 +23,7 @@ const Nav = () => {
     navigate("/");
   };
   const GotoMain = () => {
-    navigate("/"); // Navigate to another route
+    navigate("/");
   };
 
   const GotoDeployList = () => {

src/pages/Wait/WaitPage.tsx

@@ -31,7 +31,7 @@ const Wait = () => {
   const [isFinish, SetFinish] = useState("");
   const [parsedInfo, SetParsedInfo] = useState<UserInfo | null>(null);
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [cookies, setCookie] = useCookies(["token"]); // cookies와 setCookie 추가
+  const [cookies, setCookie] = useCookies(["token"]);
 
   useEffect(() => {
     const info = localStorage.getItem("userInfo");

src/pages/register/register.tsx

@@ -17,10 +17,21 @@ import VisibilityOff from "@mui/icons-material/VisibilityOff";
 import InputAdornment from "@mui/material/InputAdornment";
 import IconButton from "@mui/material/IconButton";
 
-const theme = createTheme();
-
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: "#151515", // 원하는 주요 색상으로 수정
+    },
+    background: {
+      default: "#151515",
+    },
+  },
+  typography: {
+    fontFamily: "Inter",
+  },
+});
 const ContainerWrapper = styled.div`
-  max-width: 1280px;
+  max-width: 1440px;
   min-height: 750px;
   width: 100vw;
   height: 100vh;