[주영준] 과제 제출,,,,,

package.json

@@ -9,18 +9,22 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@types/react-slick": "^0.23.13",
+    "next": "14.2.3",
     "react": "^18",
     "react-dom": "^18",
-    "next": "14.2.3"
+    "react-icons": "^5.2.1",
+    "react-slick": "^0.30.2",
+    "slick-carousel": "^1.8.1"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.3",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
-    "eslint": "^8",
-    "eslint-config-next": "14.2.3"
+    "typescript": "^5"
   }
 }

src/app/_componant/Aa.tsx

@@ -0,0 +1,26 @@
+"use client";
+import samesung from "../../../public/samsung.webp";
+import posco from "../../../public/posco.webp";
+import lg from "../../../public/lg_ensol.webp";
+import nc from "../../../public/nc.webp";
+import Image from "next/image";
+
+export default function Aa() {
+  return (
+    <div className="mainSkill pb-16 relative overflow-hidden">
+      <div className="flex flex-row mb-10 absolute animate-aa">
+        <Image className="w-100 h-full mx-10" src={samesung} alt="h" />
+        <Image className="w-100 h-full mr-10" src={posco} alt="c" />
+        <Image className="w-100 h-full mr-10" src={lg} alt="j" />
+        <Image className="w-100 h-full mr-10" src={nc} alt="r" />
+
+        <Image className="w-100 h-full mx-10" src={samesung} alt="h" />
+        <Image className="w-100 h-full mr-10" src={posco} alt="c" />
+        <Image className="w-100 h-full mr-10" src={lg} alt="j" />
+        <Image className="w-100 h-full mr-10" src={nc} alt="r" />
+        <Image className="w-100 h-full mx-10" src={samesung} alt="h" />
+        <Image className="w-100 h-full mr-10" src={posco} alt="c" />
+      </div>
+    </div>
+  );
+}

src/app/_componant/AutoSlide.tsx

@@ -0,0 +1,26 @@
+"use client";
+import samesung from "../../../public/samsung.webp";
+import posco from "../../../public/posco.webp";
+import lg from "../../../public/lg_ensol.webp";
+import nc from "../../../public/nc.webp";
+import Image from "next/image";
+
+export default function AutoSlider() {
+  return (
+    <div className="mainSkill pb-16 relative overflow-hidden">
+      <div className="flex flex-row mb-10 absolute animate-slider">
+        <Image className="w-100 h-full mx-10" src={samesung} alt="h" />
+        <Image className="w-100 h-full mr-10" src={posco} alt="c" />
+        <Image className="w-100 h-full mr-10" src={lg} alt="j" />
+        <Image className="w-100 h-full mr-10" src={nc} alt="r" />
+
+        <Image className="w-100 h-full mx-10" src={samesung} alt="h" />
+        <Image className="w-100 h-full mr-10" src={posco} alt="c" />
+        <Image className="w-100 h-full mr-10" src={lg} alt="j" />
+        <Image className="w-100 h-full mr-10" src={nc} alt="r" />
+        <Image className="w-100 h-full mx-10" src={samesung} alt="h" />
+        <Image className="w-100 h-full mr-10" src={posco} alt="c" />
+      </div>
+    </div>
+  );
+}

src/app/_componant/Header.tsx

@@ -0,0 +1,37 @@
+import Image from "next/image";
+import elice_logo from "../../../public/elice_logo.png";
+import HeaderButton from "./HeaderButton";
+import Link from "next/link";
+export default function Header() {
+  return (
+    <div className="fixed w-full z-50 bg-white flex justify-between items-center h-16 px-6 outline-double outline-1 outline-gray-200 ">
+      <Image
+        src={elice_logo}
+        alt="logo"
+        width={95}
+        height={28}
+        className="mr-6"
+      />
+      <HeaderButton>제품</HeaderButton>
+      <HeaderButton>솔루션</HeaderButton>
+      <HeaderButton>리소스</HeaderButton>
+      <HeaderButton>엘리스 AI</HeaderButton>
+      <div className="ml-auto">
+        <Link href="/accounts/signin">
+          <button
+            type="button"
+            className="min-w-16 bg-login-button-color text-sm/[28px] font-semibold py-[6px] px-4 height-[38px] rounded-md mr-4 hover:bg-gray-200"
+          >
+            로그인
+          </button>
+        </Link>
+        <button
+          type="button"
+          className="min-w-16 text-white text-sm/[28px] font-semibold py-[6px] px-4 height-[38px] bg-elice-pubble rounded-md hover:bg-violet-600"
+        >
+          상담 요청
+        </button>
+      </div>
+    </div>
+  );
+}

src/app/_componant/HeaderButton.tsx

@@ -0,0 +1,25 @@
+"use client";
+import { useState } from "react";
+import { FaAngleUp } from "react-icons/fa";
+import { FaAngleDown } from "react-icons/fa6";
+
+export default function HeaderButton({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [click, setClick] = useState(false);
+  const clickbutton = () => {
+    setClick(!click);
+  };
+  return (
+    <button
+      type="button"
+      onClick={clickbutton}
+      className="flex gap-3 items-center min-w-16 py-2 px-[11px] text-[1rem]/[28px] font-bold text-button-header rounded-md hover:bg-gray-100"
+    >
+      {children}
+      {click ? <FaAngleUp /> : <FaAngleDown />}
+    </button>
+  );
+}

src/app/accounts/signin/_componant/Inputarea.tsx

@@ -0,0 +1,23 @@
+"use client";
+import { useState } from "react";
+import { MdLockOutline } from "react-icons/md";
+import { MdOutlineEmail } from "react-icons/md";
+
+export type inputElement = {
+  placeText: string;
+  typeText: string;
+};
+
+export default function Inputarea() {
+  const [isFocused, setIsFocused] = useState(false);
+  return (
+    <div className="flex items-center border border-gray-300 pl-[14px] pr-1 h-[52px] w-[343px] rounded-lg bg-white hover:border-black">
+      <MdOutlineEmail className="w-5 h-5 opacity-50" />
+      <input
+        type="text"
+        className="w-[309px] py-4 px-3 h-[48px] outline-none placeholder-small "
+        placeholder="이메일"
+      />
+    </div>
+  );
+}