Merge pull request #112 from KAU-2024-Sanhak/pr-merge

Pr merge

src/main/frontend/src/app/card/CardEditor.tsx

@@ -17,55 +17,280 @@ type CardEditorProps = {
 const allCategorySkills: AllKindOfSkills[] = [
   { category:"frontend",
     skills: [
-    { id: 1, name: 'HTML' }, 
-    { id: 2, name: 'CSS' },
-    { id: 3, name: 'JavaScript' },
-    { id: 4, name: 'TypeScript' },
+      { id: 1, name: 'HTML' },
+      { id: 2, name: 'CSS' },
+      { id: 3, name: 'JavaScript' },
+      { id: 4, name: 'TypeScript' },
+      { id: 5, name: 'Tailwind' },
+      { id: 6, name: 'Bootstrap' },
+      { id: 7, name: 'React' },
+      { id: 8, name: 'Angular' },
+      { id: 9, name: 'Vue.js' },
+      { id: 10, name: 'SASS' },
+      { id: 11, name: 'React Hooks' },
+      { id: 12, name: 'Redux' },
+      { id: 13, name: 'Recoil' },
+      { id: 14, name: 'RxJS' },
+      { id: 15, name: 'VueX' },
+      { id: 16, name: 'Pinia' },
+      { id: 17, name: 'Vite' },
+      { id: 18,name:'PostCSS'},
+      { id: 19,name:'Axios'},
+      { id: 20,name:'Web Socket'},
+      { id: 21,name:'ESLint'},
+      { id: 22,name:'Webpack'},
+      { id: 23,name:'GraphQL'},
+      { id: 24,name:'Cypress'},
+      { id: 25,name:'Jest'},
+      { id: 26,name:'MobX'},
+      { id: 27,name:'Vercel'},
+      { id: 28,name:'AWS S3'},
+      { id: 29,name:'Netlify'},
   ]},
   { category:"backend",
     skills: [
-    { id: 5, name: 'Tailwind' },
-    { id: 6, name: 'Bootstrap' },
-    { id: 7, name: 'React' },
-    { id: 8, name: 'Angular' },
-    { id: 9, name: 'Vue.js' },
+      { id: 18,name:'PostCSS'},
+      { id: 19,name:'Axios'},
+      { id: 20,name:'Web Socket'},
+      { id: 21,name:'ESLint'},
+      { id: 22,name:'Webpack'},
+      { id: 23,name:'GraphQL'},
+      { id: 24,name:'Cypress'},
+      { id: 25,name:'Jest'},
+      { id: 26,name:'MobX'},
+      { id: 27,name:'Vercel'},
+      { id: 28,name:'AWS S3'},
+      { id: 29,name:'Netlify}'},
+      { id : 30, name :'Python'},
+      { id : 31, name :'Java'},
+      { id : 32, name :'Kotlin'},
+      { id : 33, name :'JavaScript'},
+      { id : 34, name :'TypeScript'},
+      { id : 35, name :'Ruby'},
+      { id : 36, name :'PHP'},
+      { id : 37, name :'C#'},
+      { id : 38, name :'Flask'},
+      { id : 39, name :'Spring'},
+      { id : 40, name :'Express.js'},
+      { id : 41, name :'Next.js'},
+      { id : 42, name :'Fresh'},
+      { id : 43, name :'Ruby on rail'},
+      { id : 44, name :'Laravel'},
+      { id : 45, name :'Symfony'},
+      { id : 46, name :'ASP.NET'},
+      { id : 47, name :'Django'},
+      { id : 48, name :'Fast API'},
+      { id : 49, name :'Spring Boot'},
+      { id : 50, name :'Nest.js'},
+      { id : 51, name :'Nuxt.js'},
+      { id : 52, name :'Electron'},
+      { id : 53, name :'Pytest'},
+      { id : 54, name :'JUnit5'},
+      { id : 55, name :'Jest'},
+      { id : 56, name :'RSpec'},
+      { id : 57, name :'PHPUnit'},
+      { id : 58, name :'NUnit'},
+      { id : 59, name :'SQLAlchemy'},
+      { id : 60, name :'Pypika'},
+      { id : 61, name :'Hibernate'},
+      { id : 62, name :'My batis'},
+      { id : 63, name :'Sequelize.js'},
+      { id : 64, name :'Prisma'},
+      { id : 65, name :'Knex.js'},
+      { id : 66, name :'ROM.rb'},
+      { id : 67, name :'Doctrine'},
+      { id : 68, name :'EF Core'},
+      { id : 69, name :'Dapper'},
+      { id : 70, name :'H2 Database'},
+      { id : 71, name :'MySQL'},
+      { id : 72, name :'PostgreSQL'},
+      { id : 73, name :'SQLite'},
+      { id : 74, name :'MariaDB'},
+      { id : 75, name :'MongoDB'},
+      { id : 76, name :'Cassandra'},
+      { id : 77, name :'Redis'},
+      { id : 78, name :'Firebase'},
+      { id : 79, name :'Hadoop'},
+      { id : 80, name :'Couchbase'},
+      { id : 81, name :'AWS'},
+      { id : 82, name :'GCP'},
+      { id : 83, name :'Azure'},
+      { id : 84, name :'Apache'},
+      { id : 85, name :'Nginx'},
+      { id : 86, name :'Tomcat'},
+      { id : 87, name :'Websphere'},
+      { id : 88, name :'uWSGI'},
+      { id : 89, name :'Gunicon'},
+      { id : 90, name :'Jenkins'},
+      { id : 91, name :'Git Lab'},
+      { id : 92, name :'Git Action'},
+      { id : 93, name :'ArgoCD'},
+      { id : 94, name :'Docker'},
+      { id : 95, name :'Kubernetis'},
+      { id : 96, name :'AWS ELB'},
+      { id : 97, name :'HAProxy'},
+      { id : 98, name :'Elastic Stack'},
+      { id : 99, name :'Grafana'},
+      { id : 100, name :'Open SSL'},
+      { id : 101, name :'OAuth'},
+      { id : 102, name :'JWT'},
+      { id : 103, name :'Kafka'},
+      { id : 104, name :'Cloudflare'},
+      { id : 105, name :'Zipkin'},
   ]},
   { category:"data",
     skills: [
-    { id: 10, name: 'SASS' },
-    { id: 11, name: 'React Hooks' }, 
-    { id: 12, name: 'Redux' }, 
-    { id: 13, name: 'Recoil' },
-    { id: 14, name: 'RxJS' },
-    { id: 15, name: 'VueX' }, 
-    { id: 16, name: 'Pinia' },
-    { id: 17, name: 'Vite' },
+      {id:106, name:'Python'},
+      {id:107, name:'Bash'},
+      {id:108, name:'Pandas'},
+      {id:109, name:'Matplotlib'},
+      {id:110, name:'Seaborn'},
+      {id:111, name:'Jupyter'},
+      {id:112, name:'Tableau'},
+      {id:113, name:'Power Bi'},
+      {id:114, name:'R'},
+      {id:115, name:'ggplot2'},
+      {id:116, name:'Tidyverse'},
+      {id:117, name:'Rayserve'},
+      {id:118, name:'MLflow'},
+      {id:119, name:'Flask'},
+      {id:120, name:'Fast API'},
+      {id:121, name:'Scipy'},
+      {id:122, name:'Tensorflow'},
+      {id:123, name:'Pytorch'},
+      {id:124, name:'Stats models'},
+      {id:125, name:'scikit learn'},
+      {id:126, name:'sharp'},
+      {id:127, name:'keras'},
+      {id:128, name:'Huggingface'},
+      {id:129, name:'ONNX'},
+      {id:130, name:'Hadoop'},
+      {id:131, name:'Spark'},
+      {id:132, name:'Kafka'},
+      {id:133, name:'Flink'},
+      {id:134, name:'Docker'},
+      {id:135, name:'Kubernetes'},
+      {id:136, name:'AWS'},
+      {id:137, name:'GCP'},
+      {id:138, name:'Azure'},
+      {id:139, name:'terraform'},
   ]},
   { category:"security",
     skills: [
-    { id: 22, name: 'Webpack' },
-    { id: 23, name: 'GraphQL' },
+      {id:156,name:'Python'},
+      {id:157,name:'C'},
+      {id:158,name:'Web'},
+      {id:159,name:'Binary'},
+      {id:160,name:'Assembly'},
+      {id:161,name:'TCP IP'},
+      {id:162,name:'BASH'},
+      {id:163,name:'MicroSoft'},
+      {id:164,name:'Cryptography'},
+      {id:165,name:'NAT'},
+      {id:166,name:'Cookie'},
+      {id:167,name:'XSS'},
+      {id:168,name:'INJECTION'},
+      {id:169,name:'AWS'},
+      {id:170,name:'Blockchain'},
+      {id:171,name:'FIREWALL'},
+      {id:172,name:'Linux'},
+      {id:173,name:'IPS'},
+      {id:174,name:'IDS'},
+      {id:175,name:'VPN'},
+      {id:176,name:'Linuxlib'},
+      {id:177,name:'HTTP'},
   ]},
   { category:"application",
     skills: [
-    { id: 24, name: 'Cypress' }, 
-    { id: 25, name: 'Jest' },
-    { id: 26, name: 'MobX' },
-    { id: 27, name: 'Android Studio' },
-      { id: 28, name: 'Kotlin' },
-      { id: 29, name: 'Python' },
-      { id: 30, name: 'Flask' },
-      { id: 31, name: 'AWS' },
-      { id: 32, name: 'Ubuntu' },
+      {id:178,name:'HTML'},
+      {id:179,name:'CSS'},
+      {id:180,name:'JavaScript'},
+      {id:181,name:'TypeScript'},
+      {id:182,name:'WebView'},
+      {id:183,name:'Dart'},
+      {id:184,name:'Swift'},
+      {id:185,name:'Objective-C'},
+      {id:186,name:'SASS'},
+      {id:187,name:'TailWind'},
+      {id:188,name:'Bootstrap'},
+      {id:189,name:'React'},
+      {id:190,name:'Angular'},
+      {id:191,name:'Vue.js'},
+      {id:192,name:'Cordova'},
+      {id:193,name:'Ionic'},
+      {id:194,name:'NativeScript'},
+      {id:195,name:'React Native'},
+      {id:196,name:'Flutter'},
+      {id:197,name:'Redux'},
+      {id:198,name:'Vuex'},
+      {id:199,name:'RxJS'},
+      {id:200,name:'Streams'},
+      {id:201,name:'Prisma'},
+      {id:202,name:'MySQL'},
+      {id:203,name:'PostgreSQL'},
+      {id:204,name:'MongoDB'},
+      {id:205,name:'Firebase'},
+      {id:206,name:'Axios'},
+      {id:207,name:'WebSocket'},
+      {id:208,name:'GraphQL'},
+      {id:209,name:'Appium'},
+      {id:210,name:'Cypress'},
+      {id:211,name:'Jest'},
+      {id:212,name:'PWA'},
+      {id:213,name:'Expo'},
+      {id:214,name:'SwiftUI'},
+      {id:215,name:'UIKit'},
+      {id:216,name:'CoreData'},
+      {id:217,name:'Realm'},
+      {id:218,name:'Alamofire'},
+      {id:219,name:'SwiftTesting'},
+      {id:220,name:'Java'},
+      {id:221,name:'Kotlin'},
+      {id:222,name:'JetpackCompose'},
+      {id:223,name:'AndroidStudio'},
+      {id:224,name:'SQLite'},
+      {id:225,name:'Room'},
+      {id:226,name:'OkHttp'},
+      {id:227,name:'Retrofit'},
+      {id:228,name:'Espresso'},
     ]},
 ];
 
 // TODO: API 연결
 const allTools: Tool[] = [
-  { id: 1, name: "github" },
-  { id: 2, name: "figma" },
+  { id: 1, name: "GitHub" },
+  { id: 2, name: "Figma" },
+  { id: 3, name: "Visual Studio Code" },
+  { id: 4, name: "Jira" },
+  { id: 5, name: "Slack" },
+  { id: 6, name: "Trello" },
+  { id: 7, name: "Postman" },
+  { id: 8, name: "Docker" },
+  { id: 9, name: "Kubernetes" },
+  { id: 10, name: "Notion" },
+  { id: 11, name: "Zoom" },
+  { id: 12, name: "GitLab" },
+  { id: 13, name: "Bitbucket" },
+  { id: 14, name: "Jenkins" },
+  { id: 15, name: "CircleCI" },
+  { id: 16, name: "IntelliJ IDEA" },
+  { id: 17, name: "Eclipse" },
+  { id: 18, name: "PyCharm" },
+  { id: 19, name: "WebStorm" },
+  { id: 20, name: "Android Studio" },
+  { id: 21, name: "Xcode" },
+  { id: 22, name: "Swagger" },
+  { id: 23, name: "Firebase" },
+  { id: 24, name: "Heroku" },
+  { id: 25, name: "AWS CLI" },
+  { id: 26, name: "Azure DevOps" },
+  { id: 27, name: "Google Cloud Console" },
+  { id: 28, name: "MySQL Workbench" },
+  { id: 29, name: "PgAdmin" },
+  { id: 30, name: "Robo 3T" },
 ];
 
+
 const categories = ['frontend', 'backend', 'data', 'security', 'application'];
 export default function CardEditor({
   onCreate,

src/main/frontend/src/app/main/BodySectionComponents.tsx

@@ -0,0 +1,65 @@
+"use client";
+import '../../app/globals.css';
+import React, { useState, useEffect } from "react";
+
+export default function BodySectionComponents() {
+    const [currentPage, setCurrentPage] = useState(2); // 현재 페이지 상태
+    const pages = 4; // 페이지 개수
+
+    useEffect(() => {
+        const handleScroll = (event: WheelEvent) => {
+            if (event.deltaY > 0 && currentPage < pages - 1) {
+                // 스크롤 다운
+                setCurrentPage((prev) => prev + 1);
+            } else if (event.deltaY < 0 && currentPage > 0) {
+                // 스크롤 업
+                setCurrentPage((prev) => prev - 1);
+            }
+        };
+
+        window.addEventListener("wheel", handleScroll, {passive: false});
+
+        return () => {
+            window.removeEventListener("wheel", handleScroll);
+        };
+    }, [currentPage]);
+
+    useEffect(() => {
+        window.scrollTo({
+            top: currentPage * window.innerHeight,
+            behavior: "smooth",
+        });
+    }, [currentPage]);
+
+    return (
+        <>
+            <div
+                id="second_background_color"
+                className="h-screen w-full px-10 justify-center items-center"
+                style={{position: "relative", scrollSnapAlign: "start"}}>
+
+                <div id="sub_txt_title" className="py-3">
+                    <p className="font-gmarketsansBold text-xl text-category-backend py-4">직무별 로드맵</p>
+                    <p className="font-gmarketsansMedium text-3xl">뭘 해야할지 모르겠다면,</p>
+                    <p className="font-gmarketsansMedium text-3xl">로드맵 따라서 그냥 시작해보기</p>
+
+                    </div>
+                    <div className="flex">
+                        <img src="/asset/png/mainpage/ipad_roadmap_mockup.png" className="w-1/2 justify-center"/>
+                        <p className="font-gmarketsansMedium text-2xl pb-2">pathFinder에서 개발자의 역량을 확인해보세요.</p>
+                        <p className="font-gmarketsansMedium text-2xl pb-2">프론트, 백, 보안, 앱, 데이터까지</p>
+                        <p className="font-gmarketsansMedium text-2xl pb-2">각 분야에서 뭘 하면 되는지 한눈에 볼 수 있어요</p>
+
+                    </div>
+                <div className="flex">
+                    <p className="font-gmarketsansMedium text-2xl pb-2">내가 했던 프로젝트를 입력해보세요.</p>
+                    <p className="font-gmarketsansMedium text-2xl pb-2">막막한 포트폴리오 작성,</p>
+                    <p className="font-gmarketsansMedium text-2xl pb-2">AI가 함께 합니다.</p>
+                    <img src="/asset/png/mainpage/ipad_generatecard_mockup.png" className="w-2/3"/>
+
+                </div>
+            </div>
+
+        </>
+    );
+}