[임아정] 과제제출...

next.config.mjs

@@ -1,4 +1,14 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  reactStrictMode: true,
+  webpack: (config) => {
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ["@svgr/webpack"],
+    });
+
+    return config;
+  },
+};
 
 export default nextConfig;

package.json

@@ -9,18 +9,24 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@mui/material": "^5.15.19",
+    "next": "14.2.3",
+    "next-video": "^1.0.6",
     "react": "^18",
     "react-dom": "^18",
-    "next": "14.2.3"
+    "swiper": "^11.1.3"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@svgr/webpack": "^8.1.0",
     "@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/_components/Navbar.tsx

@@ -0,0 +1,47 @@
+import Image from "next/image";
+import Link from "next/link";
+import Button from "@/app/_components/Button";
+import logo from "@/../public/icon/elice_logo.png";
+import DownSVG from "@/../public/svg/down.svg";
+
+export default function Navbar() {
+  return (
+    <header className="w-full h-[64px] border-b-[1px] flex items-center justify-between px-12 fixed top-0 left-0 right-0 bg-white z-50">
+      <div className="flex flex-1 min-w-0">
+        <Link href="/ko" className="flex items-center shrink-0">
+          <Image src={logo} alt="logo" width={95} height={28} layout="fixed" />
+        </Link>
+        <div className="flex flex-1 justify-start ml-8">
+          <Button className="flex items-center font-semibold px-[11px] py-[8px] rounded-lg hover:bg-gray-100">
+            제품
+            <DownSVG className="ml-2" />
+          </Button>
+          <Button className="flex items-center font-semibold px-[11px] py-[8px] rounded-lg hover:bg-gray-100">
+            솔루션
+            <DownSVG className="ml-2" />
+          </Button>
+          <Button className="flex items-center font-semibold px-[11px] py-[8px] rounded-lg hover:bg-gray-100">
+            리소스
+            <DownSVG className="ml-2" />
+          </Button>
+          <Button className="flex items-center font-semibold px-[11px] py-[8px] rounded-lg hover:bg-gray-100">
+            엘리스 AI
+            <DownSVG className="ml-2" />
+          </Button>
+        </div>
+      </div>
+      <div className="flex space-x-4">
+        <Link href="/accounts/signin">
+          <Button className="bg-gray-100 text-sm px-4 py-[9px] font-medium rounded-lg hover:bg-gray-200">
+            로그인
+          </Button>
+        </Link>
+        <Link href="/ko/contact">
+          <Button className="bg-[#7354EA] text-sm text-white px-4 py-[9px] font-medium rounded-lg hover:bg-[#613DD6]">
+            상담 요청
+          </Button>
+        </Link>
+      </div>
+    </header>
+  );
+}

src/app/_components/SubTitle.tsx

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from "react";
+
+type TitleProps = HTMLAttributes<HTMLHeadingElement>;
+
+const SubTitle = ({ children, className }: TitleProps) => {
+  return <h1 className="text-[#4E5968] mb-6">{children}</h1>;
+};
+
+export default SubTitle;

src/app/_components/Title.tsx

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from "react";
+
+type TitleProps = HTMLAttributes<HTMLHeadingElement>;
+
+const Title = ({ children }: TitleProps) => {
+  return <h1 className="font-[750] text-4xl mb-2">{children}</h1>;
+};
+
+export default Title;

src/app/_components/button.tsx

@@ -0,0 +1,13 @@
+import { ButtonHTMLAttributes } from "react";
+
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
+
+const Button = ({ children, onClick, className }: ButtonProps) => {
+  return (
+    <button onClick={onClick} className={className}>
+      {children}
+    </button>
+  );
+};
+
+export default Button;

src/app/accounts/signin/_components/SigninBox.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+import Link from "next/link";
+import MailSVG from "@/../public/svg/mail.svg";
+import LockSVG from "@/../public/svg/lock.svg";
+import LoginBtn from "./molecules/LargeBtn";
+
+const SigninBox = () => {
+  return (
+    <div className="flex flex-col items-center justify-center h-full space-y-4">
+      <img
+        src="/icon/elice_logo.png"
+        alt="logo"
+        className="w-auto h-[46px] mb-10 mt-20"
+        style={{ maxWidth: "343px" }} // 이미지의 최대 너비 설정
+      />
+      <div className="relative w-[343px]">
+        {" "}
+        {/* 너비 고정 */}
+        <MailSVG className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 z-10" />
+        <input
+          type="email"
+          id="email"
+          placeholder="이메일"
+          className="w-full px-3 py-4 border border-gray-400 rounded-md placeholder:font-normal pl-10 bg-[#fafafa]"
+          style={{ fontSize: "13px" }}
+        />
+      </div>
+      <div className="relative w-[343px]">
+        {" "}
+        {/* 너비 고정 */}
+        <LockSVG className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 z-10" />
+        <input
+          type="password"
+          id="password"
+          placeholder="비밀번호"
+          className="w-full px-3 py-4 border border-gray-400 rounded-md placeholder:font-normal pl-10 bg-[#fafafa]"
+          style={{ fontSize: "13px" }}
+        />
+      </div>
+      <div className="text-sm text-left text-[#7354EA]  w-[343px]">
+        비밀번호를 잊어버리셨나요?
+      </div>
+      <div className="w-[343px]">
+        <LoginBtn bgColor="#7354ea" textColor="white">
+          로그인
+        </LoginBtn>
+        <LoginBtn
+          bgColor="#FAE100"
+          textColor="#343E4B"
+          logo="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAACZ0lEQVR4nO2Zr0/DQBTHq7BgUCS9SynjH0C02cIMAoFCoxCTOP4BFJoEi5nDbAkKsyDm5mYWTMUUomYsmYX3rsdg6/rr1uu7AS/5JkvWu/tc793ru3eW9W+/wOqOc+Qzdu0x1vZt9uzZbAAag2ZS+Hsg/sNn4FlsQwZ84jjbvs2vEMhn/B3gPlSEbUUf0Bf2qR3c5/zQY/weBp2qQidOBvvEvmGM0sEbrrsHb6tTNnTKynRwzFLgYXlb8GYmVcHPBWPi2Mrgx667C530KgePT6SHLIXgcfmg4Ygc/nsSo9wu1WAHDjQKyKHjCpAt222imE0Nm6RxqjtVGWlUhYyr4Tm/oIbLPQlgjbsORahUFbAuuJLIY6ihiq4CMM8n4JkZdbIUCPg6500DYJSE7BYmUNQgqoIE8A7dp08Nsob6sALszQAQNQE7rsCMHERdM0vH4aTSCXibGUIjSRfa7E0MydGtASBKEmEUEqNTahBViQ/ZWa22tZGhFE5pP3IhfkMOVFALyZw8iYXUUAUUxk5msJkvDQDL9/Ztfr76VBbVNckBU8VYO/FM3GT7O7A5XskhkxUgY+IE0GRZxbzKRKHaUFTYMmklhoWrc9gA9sQTNTwyZLpNmsl7AIqMNYyVT1RNutRDdf7O2oVdJo9pDrMhJpal3Qssm8iZyj69QQ4GLvqIH1HsXwv4l+Upv8j7rq6HZwwsz2OSGCWKQ6zzI2x0RcVbWq6S0iwj4QsTP++mmBddna5467yrZcOVaSLFiPkvn5QW5nQbuseyr2uLFjoMz54SfLrWzSGViZSC8ZfMOypTTXuM/sv2CUL0dS1gcTFwAAAAAElFTkSuQmCC"
+        >
+          카카오로 로그인
+        </LoginBtn>
+        <LoginBtn
+          bgColor="white"
+          textColor="#343E4B"
+          logo="https://cdn-front-door.elice.io/accounts/static/media/google.EOMUMwoHjh9KkTXD.svg"
+        >
+          구글로 로그인
+        </LoginBtn>
+        <div className="text-xs text-[#6E7987] mt-4 text-center">더보기</div>
+        <div className="text-sm text-[#6E7987] mt-20 text-center">
+          아직 계정이 없으신가요?
+          <span>
+            <Link
+              href="/accounts/signup"
+              className="text-[#7354EA] hover:underline"
+            >
+              회원가입
+            </Link>
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SigninBox;

src/app/accounts/signin/_components/molecules/InputBox.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+interface InputBoxProps {
+  icon: string;
+  type: string;
+  placeholder: string;
+}
+
+const InputBox = ({ icon, type, placeholder }: InputBoxProps) => {
+  return <div className="border-0.5"></div>;
+};
+
+export default InputBox;

src/app/accounts/signin/_components/molecules/LargeBtn.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+
+interface LoginBtnProps {
+  bgColor: string;
+  textColor: string;
+  logo?: string;
+  children: React.ReactNode;
+  disabled?: boolean;
+}
+
+const LoginBtn = ({
+  bgColor,
+  textColor,
+  logo,
+  children,
+  disabled,
+}: LoginBtnProps) => {
+  return (
+    <button
+      className="flex items-center justify-center w-full px-[20px] py-[11px] rounded-lg mb-2"
+      style={{ backgroundColor: bgColor, color: textColor }}
+      disabled={disabled}
+    >
+      <div className="flex justify-between items-center w-full">
+        {logo ? (
+          <img src={logo} alt="Logo" className="w-6 h-6 mr-2" />
+        ) : (
+          <div className="w-6 h-6 mr-2"></div>
+        )}
+        <div className="flex-1 text-center font-semibold text-sm">
+          {children}
+        </div>
+        <div className="w-6 h-6 mr-2"></div>
+      </div>
+    </button>
+  );
+};
+
+export default LoginBtn;

src/app/accounts/signin/layout.tsx

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+
+export default function layout({ children }: { children: ReactNode }) {
+  return (
+    <>
+      <div className="h-screen bg-[#f5f5f5]"> {children}</div>
+    </>
+  );
+}

src/app/accounts/signin/page.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import SigninBox from "./_components/SigninBox";
+
+function page() {
+  return (
+    <div>
+      <SigninBox />
+    </div>
+  );
+}
+
+export default page;

src/app/accounts/signup/_components/AgreeBox.tsx

@@ -0,0 +1,78 @@
+"use client";
+import React, { useState } from "react";
+import LargeBtn from "./../../signin/_components/molecules/LargeBtn";
+
+const AgreeBox = () => {
+  const [isTermsAgreed, setIsTermsAgreed] = useState(false);
+  const [isPrivacyAgreed, setIsPrivacyAgreed] = useState(false);
+
+  const handleTermsChange = (event: any) => {
+    setIsTermsAgreed(event.target.checked);
+  };
+
+  const handlePrivacyChange = (event: any) => {
+    setIsPrivacyAgreed(event.target.checked);
+  };
+
+  const isButtonDisabled = !isTermsAgreed || !isPrivacyAgreed;
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100 py-12">
+      <div className="font-bold text-xl mb-4">약관에 동의해 주세요</div>
+      <div className="bg-white p-4 w-[340px] rounded-md shadow mb-2">
+        <label className="flex items-center space-x-2 cursor-pointer">
+          <input
+            type="checkbox"
+            className="form-checkbox h-5 w-5 text-purple-600"
+          />
+          <span className="text-gray-700">모두 동의합니다.</span>
+        </label>
+      </div>
+      <div className="bg-white p-4 w-[340px] rounded-md shadow">
+        <label className="block mb-2 cursor-pointer">
+          <input
+            type="checkbox"
+            className="form-checkbox h-5 w-5 text-purple-600 mr-2"
+          />
+          만 14세 이상입니다.
+        </label>
+        <label className="block mb-2 cursor-pointer">
+          <input
+            type="checkbox"
+            className="form-checkbox h-5 w-5 text-purple-600 mr-2"
+            checked={isTermsAgreed}
+            onChange={handleTermsChange}
+          />
+          이용약관 동의
+        </label>
+        <label className="block mb-2 cursor-pointer">
+          <input
+            type="checkbox"
+            className="form-checkbox h-5 w-5 text-purple-600 mr-2"
+            checked={isPrivacyAgreed}
+            onChange={handlePrivacyChange}
+          />
+          개인정보 수집 및 이용에 관한 동의
+        </label>
+        <label className="block cursor-pointer">
+          <input
+            type="checkbox"
+            className="form-checkbox h-5 w-5 text-purple-600 mr-2"
+          />
+          광고 전송 및 권유에 관한 선택적 동의
+        </label>
+      </div>
+      <div className="w-[340px] mt-4">
+        <LargeBtn
+          bgColor={isButtonDisabled ? "#ccc" : "#7354ea"} // 조건에 따라 버튼 색상 변경
+          textColor="white"
+          disabled={isButtonDisabled}
+        >
+          동의하기
+        </LargeBtn>
+      </div>
+    </div>
+  );
+};
+
+export default AgreeBox;