desing/#106과 feat/#98 merge

A-Interview · Aug 3, 2023 · 3d02d86 · 3d02d86
2 parents 9a214ab + 95724ac
commit 3d02d86
Show file tree

Hide file tree

Showing 9 changed files with 274 additions and 12 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -16,9 +16,9 @@
     "sourceType": "module",
     "project": [
       // local에서 개발 시
-      "frontend/tsconfig.json"
+      //"frontend/tsconfig.json"
       // docker-compose 사용 시
-      //"./tsconfig.json"
+      "./tsconfig.json"
     ]
   },
   "plugins": ["react", "@typescript-eslint"],

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
     "@types/react-dropzone": "^5.1.0",
     "animate.css": "^4.1.1",
     "axios": "^1.4.0",
-    "framer-motion": "^10.12.22",
+    "framer-motion": "^10.15.0",
     "history": "^5.3.0",
     "http-proxy-middleware": "^2.0.6",
     "install": "^0.13.0",
@@ -23,6 +23,7 @@
     "npm": "^9.8.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-intersection-observer": "^9.5.2",
     "react-lottie-player": "^1.5.4",
     "react-router-dom": "^6.14.2",
     "react-scripts": "5.0.1",

diff --git a/src/assets/img/MainPageImage3.svg b/src/assets/img/MainPageImage3.svg
diff --git a/src/assets/img/MainPageInterview.png b/src/assets/img/MainPageInterview.png
diff --git a/src/assets/img/MainPageLogo.png b/src/assets/img/MainPageLogo.png
diff --git a/src/assets/img/MainPageStar.png b/src/assets/img/MainPageStar.png
diff --git a/src/pages/InterviewProgressPage.tsx b/src/pages/InterviewProgressPage.tsx
@@ -274,8 +274,8 @@ const InterviewProgressPage = (): JSX.Element => {
   const [loadingCheck, setLoadingCheck] = useState(false);
   // 소켓 연결 함수, 메세지 처리 기능
   const connectWebSocket = (): void => {
-    const ws = new WebSocket(`ws://localhost:8000/ws/interview/`);
-    // const ws = new WebSocket(`wss://ainterview.site/ws/interview/`);
+    // const ws = new WebSocket(`ws://localhost:8000/ws/interview/`);
+    const ws = new WebSocket(`wss://ainterview.site/ws/interview/`);
 
     ws.onopen = () => {
       // 초기 세팅

diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx
@@ -6,6 +6,10 @@ import LoadingPage from "../components/Loading";
 import { styled } from "styled-components";
 import MainImage1 from "../assets/img/MainPageImage1.png";
 import MainImage2 from "../assets/img/MainPageImage2.png";
+import MainImage3 from "../assets/img/MainPageImage3.svg";
+import MainPageLogo from "../assets/img/MainPageLogo.png";
+import MainPageInterview from "../assets/img/MainPageInterview.png";
+import MainPageStar from "../assets/img/MainPageStar.png";
 import { Link } from "react-router-dom";
 
 const MainPageBackGround = styled.div`
@@ -98,13 +102,72 @@ const variants: Variants = {
   },
 };
 
+const variants2: Variants = {
+  hidden: {
+    opacity: 0.5,
+    y: 15,
+  },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      delay: 0.2,
+      duration: 1,
+      repeat: Infinity,
+      repeatType: "reverse",
+    },
+  },
+};
+
+const variants3: Variants = {
+  hidden: {
+    opacity: 0.2,
+  },
+  visible: {
+    opacity: 1,
+    transition: {
+      delay: 0.2,
+      duration: 1,
+      repeat: Infinity,
+      repeatType: "reverse",
+    },
+  },
+};
+
 const MainPageBackGround2 = styled.img`
   position: absolute;
   bottom: 0px;
   width: 100vw;
   height: 25.8125rem;
 `;
 
+const MainPageImage3 = styled(motion.img)`
+  width: 100%;
+  height: 100%;
+`;
+
+const MainLogo = styled(motion.img)`
+  width: 37rem;
+  display: block;
+  margin: auto;
+`;
+
+const MainInterview = styled(motion.img)`
+  width: 85%;
+  height: 85%;
+  display: block;
+  margin: auto;
+`;
+
+const MainStar = styled(motion.img)`
+  width: 100%;
+  height: 100%;
+  display: block;
+  margin: auto;
+  margin-top: 32rem;
+  z-index: -1;
+`;
+
 const MainPage = (): JSX.Element => {
   const [isLoaded, setIsLoaded] = useState(false);
 
@@ -178,6 +241,119 @@ const MainPage = (): JSX.Element => {
         <MainPageBackGround2 src={MainImage2} />
         <LoadingPage></LoadingPage>
       </MainPageBackGround>
+      <MainPageBackGround>
+        <div>
+          <motion.div
+            style={{
+              marginTop: "10rem",
+              lineHeight: "50px",
+              textAlign: "center",
+              width: "100%",
+              fontSize: "2.5rem",
+              fontWeight: "700",
+              color: "#21d696cc",
+            }}
+            initial={{ opacity: 0, y: 100 }}
+            animate={isLoaded ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.8 }}
+          >
+            chat-GPT를 이용한
+          </motion.div>
+          <motion.div
+            style={{
+              lineHeight: "50px",
+              marginBottom: "40px",
+              textAlign: "center",
+              width: "100%",
+              fontSize: "1.3rem",
+              fontWeight: "600",
+              color: "white",
+            }}
+            initial={{ opacity: 0, y: 50 }}
+            animate={isLoaded ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.8, delay: 0.3 }}
+          >
+            스마트한 면접 서비스
+          </motion.div>
+          <div
+            style={{
+              padding: "0 5rem",
+            }}
+          >
+            <MainPageImage3
+              src={MainImage3}
+              initial="hidden"
+              animate="visible"
+              variants={variants2}
+            ></MainPageImage3>
+          </div>
+        </div>
+      </MainPageBackGround>
+      <MainPageBackGround>
+        <div>
+          <motion.div
+            style={{
+              marginTop: "32rem",
+              marginBottom: "2rem",
+              lineHeight: "50px",
+              textAlign: "center",
+              width: "100%",
+              fontSize: "2.5rem",
+              fontWeight: "700",
+              color: "white",
+            }}
+            initial={{ opacity: 0, y: 100 }}
+            animate={isLoaded ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.8 }}
+          >
+            AI 면접 질문
+          </motion.div>
+          <MainInterview
+            src={MainPageInterview}
+            initial="hidden"
+            animate="visible"
+            variants={variants2}
+          ></MainInterview>
+        </div>
+      </MainPageBackGround>
+      <MainPageBackGround>
+        <div>
+          <MainStar
+            src={MainPageStar}
+            initial="hidden"
+            animate="visible"
+            variants={variants3}
+          ></MainStar>
+        </div>
+      </MainPageBackGround>
+      <MainPageBackGround>
+        <div
+          style={{
+            width: "100%",
+            height: "15rem",
+            marginTop: "36rem",
+            paddingTop: "2rem",
+            backgroundColor: "rgba(22, 20, 52, 0.71)",
+          }}
+        >
+          <div
+            style={{
+              lineHeight: "50px",
+              textAlign: "center",
+              width: "100%",
+              fontSize: "1.6rem",
+              fontWeight: "600",
+              color: "white",
+              zIndex: "-1",
+              marginTop: "1.5rem",
+              marginBottom: "-1rem",
+            }}
+          >
+            최고의 ai 면접 서비스
+          </div>
+          <MainLogo src={MainPageLogo}></MainLogo>
+        </div>
+      </MainPageBackGround>
     </div>
   );
 };