Merge pull request #29 from JongMany/feat/refactor-architecture

[Feat] 모바일 대응...

.eslintrc.cjs

@@ -0,0 +1,12 @@
+module.exports = {
+  root: true,
+  env: {
+    es2020: true,
+  },
+  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+  parser: "@typescript-eslint/parser",
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  rules: {
+    // 공통 규칙을 여기에 추가하세요
+  },
+};

fe/src/entities/career/index.ts

@@ -0,0 +1 @@
+export { default } from "./ui/MyCareer";

fe/src/entities/projects/index.ts

@@ -1,2 +1,3 @@
 export { default } from "./ui/project/Project";
+export { default as ProjectContainer } from "./ui/project/ProjectContainer";
 export { default as FileDownloadButton } from "./ui/download-button/FileDownloadButton";

fe/src/entities/projects/ui/project/Project.tsx

@@ -26,6 +26,7 @@ export default function Project({
     >
       <div
         className={`flex ${
+          // isAlignReverse ? "flex-row-reverse" : "flex-row"
           isAlignReverse ? "flex-row-reverse" : "flex-row"
         } gap-x-4 w-[85vw]`}
       >

fe/src/entities/projects/ui/project/ProjectContainer.tsx

@@ -0,0 +1,130 @@
+import { useDeviceSize } from "@/shared/libs";
+import { PropsWithChildren, useRef } from "react";
+import { motion, useInView } from "framer-motion";
+import { Link } from "react-router-dom";
+type Props = {
+  isAlignReverse?: boolean;
+};
+export default function ProjectContainer({
+  isAlignReverse,
+  children,
+}: PropsWithChildren<Props>) {
+  const device = useDeviceSize();
+
+  const rowAlign = device === "desktop" ? "row" : "col";
+  const alignStyle = getAlignStyle(rowAlign, isAlignReverse);
+
+  const containerRef = useRef<HTMLElement>(null);
+  const isInView = useInView(containerRef, {});
+
+  return (
+    <motion.article
+      className="flex h-[70vh] items-center justify-center"
+      ref={containerRef}
+      style={{
+        transform: isInView ? "none" : "translateX(-200px)",
+        opacity: isInView ? 1 : 0,
+        transition: "all 0.5s cubic-bezier(0.17, 0.55, 0.55, 1) 1s",
+        // transitionDelay: "0.5s",
+      }}
+    >
+      <div className={`flex ${alignStyle} gap-x-4 w-[85vw]`}>{children}</div>
+    </motion.article>
+  );
+}
+
+function getAlignStyle(alignDirection: "row" | "col", alignReverse?: boolean) {
+  if (alignDirection === "col") {
+    return "flex-col";
+  }
+
+  if (alignReverse) {
+    return "flex-row-reverse";
+  }
+  return "flex-row";
+}
+
+const ImageContainer = ({
+  image,
+  alt = "project",
+}: {
+  image: string;
+  alt?: string;
+}) => {
+  const device = useDeviceSize();
+  const imageStyle = device === "desktop" ? "w-full" : "w-[80vw] h-[40vh]";
+  return (
+    <div className="basis-[50%] flex flex-col items-center justify-center">
+      <img className={`${imageStyle}`} src={image} alt={alt} />
+    </div>
+  );
+};
+
+type DescriptionProps = {
+  projectName: string;
+  projectDescription: string;
+  techSkills: string[];
+  animeDirection: "LToR" | "RToL";
+};
+const Description = ({
+  projectName,
+  projectDescription,
+  techSkills,
+  animeDirection,
+  children,
+}: PropsWithChildren<DescriptionProps>) => {
+  const device = useDeviceSize();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const isInView = useInView(containerRef, {});
+
+  const headTextFontStyle = device === "desktop" ? "text-xl" : "text-lg";
+  const detailTextFontStyle = device === "desktop" ? "text-sm" : "text-xs";
+
+  return (
+    <div
+      className="flex flex-col items-start justify-center basis-[50%] backdrop-blur-sm px-4 py-2"
+      ref={containerRef}
+    >
+      <h1 className="flex items-center justify-center w-full mb-4 text-2xl">
+        <span className="pr-4 mr-4 border-r-2 max-w-[40%]">프로젝트 명 </span>
+        <span className={`flex-1 text-2xl ${headTextFontStyle}`}>
+          {projectName}
+        </span>
+      </h1>
+      <p className="flex flex-col flex-1 mb-4">
+        <span className="text-xl font-semibold">프로젝트 소개</span>
+        <span className={`ml-4 ${detailTextFontStyle}`}>
+          {projectDescription}
+        </span>
+      </p>
+      <div className="mb-4">
+        <p className="mb-2 font-semibold">사용한 기술 스택</p>
+        <ul className={`flex flex-col ml-4 gap-y-1 ${detailTextFontStyle}`}>
+          {techSkills.map((skill, idx) => (
+            <li
+              key={skill}
+              style={{
+                transform: isInView
+                  ? "none"
+                  : `translateX(${
+                      animeDirection === "LToR" ? "-300px" : "300px"
+                    })`,
+                opacity: isInView ? 1 : 0,
+                transition: `all 0.5s cubic-bezier(0.17, 0.55, 0.55, 1) `,
+                transitionDelay: `${idx * 0.25 + 1.2}s`,
+              }}
+            >
+              {skill}
+            </li>
+          ))}
+        </ul>
+      </div>
+      <p>
+        <Link to="/project">더 자세히 보기</Link>
+        {children}
+      </p>
+    </div>
+  );
+};
+ProjectContainer.ImageContainer = ImageContainer;
+ProjectContainer.Description = Description;

fe/src/shared/libs/index.ts

@@ -1 +1,2 @@
 export * from "./typing/useTypingAnimation";
+export * from "./media-query/useDeviceSize";

fe/src/widgets/main/projectsShowcase/ui/ProjectsShowCase/ProjectsShowCase.tsx

@@ -4,10 +4,10 @@ import { useRef } from "react";
 import { FileDownloadButton } from "@/entities/projects/index";
 import Contact from "@/entities/contact/index";
 
-import MyProfile from "@/entities/profile/index";
+import MyCareer from "@/entities/career/index";
 import ContentContainer from "@/shared/ui/content-container/ContentContainer";
 import Introduction from "@/entities/introduction/index";
-import Project from "@/entities/projects/index";
+import { ProjectContainer as Project } from "@/entities/projects/index";
 
 // IMG Resources
 import studyLogProjectImg from "@/shared/assets/images/study-log.png";
@@ -51,9 +51,9 @@ function ProjectsShowCase() {
           <ContentContainer height="137.5vh">
             <Introduction />
           </ContentContainer>
-          {/* 프로필 */}
+          {/* 경력 */}
           <ContentContainer>
-            <MyProfile />
+            <MyCareer />
           </ContentContainer>
           {/* Ready To Work Project */}
           <ContentContainer>