projects 페이지 리팩토링

src/assets/css/app.scss

@@ -6,6 +6,7 @@
 @import "pages/home";
 @import "pages/awards";
 @import "pages/introduce";
+@import "pages/projects";
 
 @import "components/navBar";
 @import "components/footer";

src/assets/css/pages/projects.scss

@@ -0,0 +1,88 @@
+.projects-page {
+  .dash-title {
+    .title-font {
+      font-size: 6.25rem;
+    }
+  }
+
+  .project-component {
+    display: flex;
+    flex-direction: column;
+    .project-content {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 5rem;
+      img {
+        width: 62.5rem;
+      }
+
+      .project-desc {
+        //margin: 2.5rem 0 0 5rem;
+        width: 70rem;
+
+        .title {
+          font-family: "Noto Sans KR";
+          font-size: 3.75rem;
+          color: $colorBrown100;
+          //margin-top: 3.75rem;
+        }
+
+        .subtitle {
+          font-family: "Noto Sans KR";
+          color: $colorBrown100;
+          font-size: 2.5rem;
+          margin-top: 0.625rem;
+        }
+
+        .text {
+          font-family: "Noto Sans KR";
+          color: $colorBrown100;
+          font-size: 1.875rem;
+          margin-top: 0.625rem;
+        }
+
+        .sub-text {
+          font-family: "Noto Sans KR";
+          color: $colorBrown100;
+          font-size: 1.625rem;
+          margin-top: 0.625rem;
+        }
+      }
+    }
+    .project-btn-container {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      gap: 1rem;
+      margin: 5rem 8rem 0 0;
+    }
+  }
+}
+
+.video-modal {
+  position: fixed;
+  width: 100rem;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
+  z-index: 100;
+  .close-btn {
+    position: fixed;
+    z-index: 5;
+    right: 3rem;
+    top: 3rem;
+    cursor: pointer;
+    font-size: 3rem;
+    color: $colorBlack;
+    background-color: $colorWhite;
+    width: 3rem;
+    height: 3rem;
+    text-align: center;
+    border-radius: 1rem;
+  }
+  video {
+    width: 100rem;
+    border-radius: 2rem;
+  }
+}

src/components/ProjectComponent.tsx

@@ -0,0 +1,103 @@
+import React, { useState } from "react";
+import { NavLink } from "react-router-dom";
+import { STACK_NAME } from "src/types/enum";
+import github from "src/assets/icons/github.webp";
+import VideoModal from "src/components/VideoModal";
+import { useRecoilState } from "recoil";
+import { ModalState, recoilModalState } from "src/states/recoilModalState";
+
+const ProjectComponent = (props: any) => {
+  const [isVideoModalOpen, setIsVideoModalOpen] =
+    useRecoilState(recoilModalState);
+  const defaultRecoilModalState: ModalState = { ...isVideoModalOpen };
+
+  const changeVideoModalState = () => {
+    defaultRecoilModalState.value = !isVideoModalOpen.value;
+    defaultRecoilModalState.src = props.data.videoLink;
+    setIsVideoModalOpen(defaultRecoilModalState);
+  };
+  return (
+    <div className="project-component">
+      <div className="project-content">
+        <img alt="project-img" src={props.data.img}></img>
+        <div className="project-desc">
+          <div className="title">
+            <strong>{props.data.title}</strong>
+          </div>
+          <div className="subtitle">{props.data.subtitle}</div>
+          {props.data.user ? (
+            <div className="text">{props.data.user}</div>
+          ) : null}
+          <div className="text">
+            {props.data.strongStacks &&
+              props.data.strongStacks.map((el: STACK_NAME) => (
+                <strong>{el}, </strong>
+              ))}
+            {props.data.stacks &&
+              props.data.stacks.map((e: STACK_NAME) => {
+                return props.data.stacks[props.data.stacks.length - 1] === e ? (
+                  <>{e}</>
+                ) : (
+                  <>{e}, </>
+                );
+              })}
+          </div>
+          <br />
+          <div className="text">{props.data.desc[0]}</div>
+          <div className="text">{props.data.desc[1]}</div>
+          <br />
+          <div className="text">{props.data.desc[2]}</div>
+          <div className="sub-text">{props.data.desc[3]}</div>
+          <div className="sub-text">{props.data.desc[4]}</div>
+        </div>
+      </div>
+      <div className="project-btn-container">
+        {/* <div style={{display: 'flex', justifyContent: 'end', marginTop: '5px', marginRight: '50px'}}>
+                      <VideoButton onClick={onVideoModalOpen1} style={{display: 'flex', justifyContent: 'center', alignItems: 'center', cursor: 'pointer'}}>VIDEO 보기 → </VideoButton>
+                  </div> */}
+        {/*{isVideoModalOpen1 ? (*/}
+        {/*  <VideoModal*/}
+        {/*    setIsVideoModalOpen={setIsVideoModalOpen1}*/}
+        {/*    video={focuz_video}*/}
+        {/*    pageNumber={1}*/}
+        {/*  />*/}
+        {/*) : null}*/}
+        <div>
+          {props.data.isHaveWeb ? (
+            <NavLink className="project-btn" to={props.data.webLink}>
+              Web Page →
+            </NavLink>
+          ) : null}
+        </div>
+
+        {props.data.isHaveVideo ? (
+          <button className="project-btn" onClick={changeVideoModalState}>
+            VIDEO 보기 →{" "}
+          </button>
+        ) : null}
+
+        {/*{isVideoModalOpen.value ? (*/}
+        {/*  <VideoModal video={props.data.videoLink} />*/}
+        {/*) : null}*/}
+        {props.data.isHaveGithub ? (
+          <NavLink className="project-btn" to={props.data.githubLink}>
+            <img alt="github" src={github}></img>
+            GITHUB
+          </NavLink>
+        ) : null}
+      </div>
+      {/*<div style={{ display: "flex", justifyContent: "center" }}>*/}
+      {/*  <video*/}
+      {/*    width="600"*/}
+      {/*    controls={true}*/}
+      {/*    ref={videoRef}*/}
+      {/*    onCanPlay={() => setPlayBackRate()}*/}
+      {/*  >*/}
+      {/*    <source src={props.data.videoLink} type="video/mp4" />*/}
+      {/*  </video>*/}
+      {/*</div>*/}
+    </div>
+  );
+};
+
+export default ProjectComponent;

src/components/VideoModal.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { useRef } from "react";
+import { useRecoilState } from "recoil";
+import { ModalState, recoilModalState } from "src/states/recoilModalState";
+
+const VideoModal = ({ video }: any) => {
+  const [videoModalState, setVideoModalState] =
+    useRecoilState(recoilModalState);
+  const defaultRecoilModalState: ModalState = { ...videoModalState };
+
+  const closeModal = () => {
+    defaultRecoilModalState.value = !videoModalState;
+    defaultRecoilModalState.src = null;
+    setVideoModalState(defaultRecoilModalState);
+  };
+  // const videoRef = useRef();
+  const setPlayBackRate = () => {
+    document.getElementsByTagName("video")[0].playbackRate = 1.6;
+  };
+
+  return (
+    <div className="video-modal">
+      <div className="close-btn" onClick={closeModal}>
+        X
+      </div>
+      <video
+        id="video"
+        controls={true}
+        // ref={videoRef}
+        onCanPlay={() => setPlayBackRate()}
+      >
+        <source src={video} type="video/mp4" />
+      </video>
+    </div>
+  );
+};
+
+export default VideoModal;
+
+// const CloseButton = styled.button`
+//     position: fixed;
+//     z-index: 999999;
+//     right: 20px;
+//     top: 10px;
+//     cursor: pointer;
+//
+//     font-family: applesdgothic;
+//     font-size: 30px;
+//
+// `