feat: 2024년 1학기 신입모집 데이터 변경

.env

@@ -0,0 +1 @@
+NEXT_PUBLIC_IMAGE_BASE_URL="https://image.econovation.kr"

app/recruit/page.tsx

@@ -32,12 +32,12 @@ const RecruitPage = () => {
 
   return (
     <>
-      <div className="px-24 max-w-[1920px] m-auto">
+      <div className="m-auto max-w-[1920px] px-24">
         {!RECRUIT.IS_ON && (
           <section>
             <Waiting
               inputValue={emailInputValue}
-              inputOnChange={(e) => setEmailInputValue(e.target.value)}
+              onInputChange={(e) => setEmailInputValue(e.target.value)}
               scrollToRecruit={scrollToRecruit}
             />
           </section>

docs/Portfolio.md

@@ -4,6 +4,8 @@
 파일 구조에 따라서 화면의 구성이 달라집니다.  
 예를 들어 PORTFOLIO에서 다음과 같은 형태로 하나가 더 추가되면 화면에서도 같이 추가 됩니다.
 
+portfolio ko 안에 있는 파일이 각 분기별 파일입니다.
+
 ## 파일 구조는 다음과 같습니다.
 
 1. portfolio.ko.ts

next.config.js

@@ -2,6 +2,9 @@
 
 const nextConfig = {
   reactStrictMode: true,
+  compiler: {
+    removeConsole: true,
+  },
   async rewrites() {
     return [
       {

package.json

@@ -25,10 +25,10 @@
     "swiper": "^10.0.4",
     "tailwind-merge": "^2.0.0",
     "tailwindcss": "^3.3.2",
+    "@react-spring/web": "^9.7.3",
     "typescript": "5.1.6"
   },
   "devDependencies": {
-    "@react-spring/web": "^9.7.3",
     "@types/lodash": "^4.14.195",
     "@types/node": "20.4.1",
     "@types/react": "^18.0.37",

src/components/common/Footer.tsx

@@ -3,8 +3,8 @@
 import { FOOTER } from "@/src/constants/common.ko";
 import { LinkTo } from "./LinkTo";
 import Link from "next/link";
-import Image from "next/image";
 import { Icon } from "./Icon";
+import { Image } from "./Image";
 
 const FooterDesktop = () => {
   return (

src/components/common/Image.tsx

@@ -0,0 +1,24 @@
+import type { ImgHTMLAttributes } from "react";
+
+interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
+  src: string;
+  alt: string;
+}
+
+const baseUrl = process.env.NEXT_PUBLIC_IMAGE_BASE_URL || "";
+
+export const Image = ({ alt, src, ...props }: ImageProps) => {
+  src += `${baseUrl}/`;
+
+  return (
+    <img
+      {...props}
+      decoding="async"
+      loading="lazy"
+      src={`${src}/origin/png`}
+      srcSet={`${src}/480/avif 480w, ${src}/768/avif 768w, ${src}/1280/avif 1280w, ${src}/1600/avif 1600w, ${src}/1920/avif 1920w, ${src}/origin/avif 2560w, ${src}/480/webp 480w, ${src}/768/webp 768w, ${src}/1280/webp 1280w, ${src}/1600/webp 1600w, ${src}/1920/webp 1920w, ${src}/origin/webp 2560w, ${src}/480/jpeg 480w, ${src}/768/jpeg 768w, ${src}/1280/jpeg 1280w, ${src}/1600/jpeg 1600w, ${src}/1920/jpeg 1920w, ${src}/origin/jpeg 2560w, ${src}/480/png 480w, ${src}/768/png 768w, ${src}/1280/png 1280w, ${src}/1600/png 1600w, ${src}/1920/png 1920w, ${src}/origin/png 2560w`}
+      sizes="(max-width: 480px) 480px, (max-width: 768px) 768px, (max-width: 1280px) 1280px, (max-width: 1600px) 1600px, (max-width: 1920px) 1920px, 2560px"
+      alt={alt}
+    />
+  );
+};

src/components/common/InputTextHover.tsx

@@ -1,9 +1,9 @@
-import { FC, useEffect, useId, useState } from "react";
+import { ChangeEvent, FC, useEffect, useId, useState } from "react";
 
 interface InputHoverProps {
   label?: string;
   value: string;
-  onChange: () => void;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
   placeholder?: string;
   className?: string;
 }

src/components/recruit/Waiting.tsx

@@ -5,13 +5,13 @@ import { ChangeEvent, FormEvent } from "react";
 interface WaitingProps {
   scrollToRecruit: () => void;
   inputValue: string;
-  inputOnChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  onInputChange: (e: ChangeEvent<HTMLInputElement>) => void;
 }
 
 export const Waiting = ({
   scrollToRecruit,
   inputValue,
-  inputOnChange,
+  onInputChange,
 }: WaitingProps) => {
   const onSubmit = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -22,7 +22,7 @@ export const Waiting = ({
       .then((res) => {
         if (res.status === 200) {
           alert(RECRUIT.WAITING.ALERT_SUCCESS);
-          inputOnChange({
+          onInputChange({
             target: { value: "" },
           } as ChangeEvent<HTMLInputElement>);
         }
@@ -47,7 +47,7 @@ export const Waiting = ({
       </div>
       <form className="my-40 text-2xl" onSubmit={onSubmit}>
         <InputTextHover
-          onChange={() => inputOnChange}
+          onChange={onInputChange}
           value={inputValue}
           placeholder="[email protected]"
           label={RECRUIT.WAITING.EMAIL_INPUT}

src/constants/common.ko.ts

@@ -74,14 +74,9 @@ const SERVICES = {
   },
   OTHER: [
     {
-      TITLE: "econo beep",
-      TITLE_KO: "기자재 대여 및 관리 시스템",
-      LINK: "ECONO_BEEP",
-    },
-    {
-      TITLE: "t-econo",
-      TITLE_KO: "에코노베이션 테크 블로그",
-      LINK: "T_ECONO",
+      TITLE: "EEOS",
+      TITLE_KO: "에코노베이션 행사 관리 시스템",
+      LINK: "EEOS",
     },
   ],
 };

src/constants/portfolio/ko/2019-2.ts

@@ -0,0 +1,144 @@
+export const winter2020 = [
+  {
+    TITLE: "piano tutoring",
+    SUBTITLE: "",
+    TEAM_NAME: "youngDev",
+    PEOPLE: "최진영, 김서영",
+    IDEA: "집에서도 피아노를 배울 수 있도록 하는 피아노 튜터링 사이트입니다. 짧은 영상 여러개로 이루어진 강의들부터, WebRTC를 이용한 실시간 화상 강의를 통해 어디서나 '진짜' 레슨을 받을 수 있도록 하는 튜터링 서비스 사이트",
+    SKILLS: "",
+    BG_IMAGE: require("/public/dev/2020_winter_dev/portfolio/youngDev.png")
+      .default,
+    YEAR: "2019-2",
+    LINKS: null,
+    INTRODUCTION: [
+      {
+        TYPE: "video",
+        LINK: "https://youtube.com/embed/mv3yg4uWHG4",
+      },
+    ],
+  },
+  {
+    TITLE: "스마트 도어락",
+    SUBTITLE: "",
+    TEAM_NAME: "KAB",
+    PEOPLE: "최진영, 김서영",
+    IDEA: '사용자의 완벽한 외출을 도와주는 IoT 제품인 "스마트 도어락". KETI의 Mobius 서버를 기반으로 도어락의 기본적인 기능부터 센서 제어, 일회용 출입관리 시스템까지 제공하는 플랫폼',
+    SKILLS: "",
+    BG_IMAGE: require("/public/dev/2020_winter_dev/portfolio/KAB.jpg").default,
+    YEAR: "2019-2",
+    LINKS: null,
+    INTRODUCTION: [
+      {
+        TYPE: "video",
+        LINK: "https://youtube.com/embed/5jpdnnSS784",
+      },
+    ],
+  },
+  {
+    TITLE: "EXIT",
+    SUBTITLE: "",
+    TEAM_NAME: "BMW",
+    PEOPLE: "",
+    IDEA: "위광고와 진짜정보가 혼재된 정보의 바다에서 신뢰할 수 있는 정보를 제공하는 위치기반 sns. 여러분이 보고 느낀 것을 그 자리에서 사진과 함께 올려주세요. 글이 작성된 위치의 분포로 '정체성'을 가진 구심점과 구역이 생성됩니다. 우리는 그 곳에 가보지 않아도 그 공간의 최근 경향을 알 수 있습니다. 여러분과 공간을 이어주는 플랫폼, EXIT 입니다.",
+    SKILLS: "",
+    BG_IMAGE: require("/public/dev/2020_winter_dev/portfolio/EXIT.jpg").default,
+    YEAR: "2019-2",
+    LINKS: null,
+    INTRODUCTION: [
+      {
+        TYPE: "video",
+        LINK: "https://youtube.com/embed/9z8f1yeggZk",
+      },
+    ],
+  },
+  {
+    TITLE: "전맛탱",
+    SUBTITLE: "",
+    TEAM_NAME: "JMT",
+    PEOPLE: "",
+    IDEA: "전대생이 작성한 키워드 기반의 리뷰로 축적된 데이터를 가지고 식당을 추천해 주는 안드로이드 기반 어플입니다. 상황별, 위치별로 자신에게 맞는 경우를 선택하여 전맛탱으로 든든한 밥 한 끼 어떠세요?",
+    SKILLS: "",
+    BG_IMAGE: require("/public/dev/2020_winter_dev/portfolio/JMT.jpg").default,
+    YEAR: "2019-2",
+    LINKS: null,
+    INTRODUCTION: [
+      {
+        TYPE: "video",
+        LINK: "https://youtube.com/embed/_nCGZ4bFnHA",
+      },
+    ],
+  },
+  {
+    TITLE: "tooner",
+    SUBTITLE: "",
+    TEAM_NAME: "project_review",
+    PEOPLE: "",
+    IDEA: "독자의, 독자를 위한, 독자에 의한 리뷰 중심 웹툰 커뮤니티입니다. tooner에서 웹툰 리뷰를 공유하고 자유롭게 웹툰 이야기를 할 수 있습니다. 여러분이 좋아하는 웹툰으로 tooner를 채워주세요.",
+    SKILLS: "",
+    BG_IMAGE: require("/public/dev/2020_winter_dev/portfolio/tooner.jpg")
+      .default,
+    YEAR: "2019-2",
+    LINKS: null,
+    INTRODUCTION: [
+      {
+        TYPE: "video",
+        LINK: "https://youtube.com/embed/N5zcX1fvJmE",
+      },
+    ],
+  },
+  {
+    TITLE: "CrawlTheBuilding2",
+    SUBTITLE: "",
+    TEAM_NAME: "EYoon",
+    PEOPLE: "",
+    IDEA: "해저부터 우주까지 이어진 빌딩에서 펼쳐지는 전략생존게임입니다. 원하는 스킬을 강화하여 높이 올라가세요. 올라갈수록 다양한 몬스터가 기다리고 있습니다.",
+    SKILLS: "",
+    BG_IMAGE:
+      require("/public/dev/2020_winter_dev/portfolio/CrawlTheBuilding2.jpg")
+        .default,
+    YEAR: "2019-2",
+    LINKS: null,
+    INTRODUCTION: [
+      {
+        TYPE: "video",
+        LINK: "https://youtube.com/embed/_O6X71OowSU",
+      },
+    ],
+  },
+  {
+    TITLE: "Mandaphlan",
+    SUBTITLE: "",
+    TEAM_NAME: "Although",
+    PEOPLE: "김양하, 김정인, 신재욱",
+    IDEA: "만다라트 계획표를 기반으로 하는 웹커뮤니티입니다. 만다라트(Mandalart)는 Manda(본질의) + la(달성, 성취) + art(기술)의 합성어로 본질을 깨닫는 기술, 목적을 달성하는 기술을 뜻합니다. 같은 목표를 가지고 있는 동료들과 함께 방향을 점검하고, 계획을 지켜나가세요!",
+    SKILLS: "",
+    BG_IMAGE: require("/public/dev/2020_winter_dev/portfolio/Mandaphlan.jpg")
+      .default,
+    YEAR: "2019-2",
+    LINKS: null,
+    INTRODUCTION: [
+      {
+        TYPE: "video",
+        LINK: "https://youtube.com/embed/4xn0JziN_-g",
+      },
+    ],
+  },
+  {
+    TITLE: "Snap Point",
+    SUBTITLE: "",
+    TEAM_NAME: "Jitterbug",
+    PEOPLE: "오중균, 김창영",
+    IDEA: "Snap 으로 PowerPoint를 제어한다는 단순한 아이디어에서 출발한 머신러닝 프로젝트입니다. Snap 소리를 내면 스페이스바를 단축키로 사용하는 모든 프로그램에서 제어가 가능합니다.",
+    SKILLS: "",
+    BG_IMAGE: require("/public/dev/2020_winter_dev/portfolio/SnapPoint.jpg")
+      .default,
+    YEAR: "2019-2",
+    LINKS: null,
+    INTRODUCTION: [
+      {
+        TYPE: "video",
+        LINK: "https://youtube.com/embed/7zFZIevBKXk",
+      },
+    ],
+  },
+];