- {!focused &&
- !value &&
- (disabled && type === "PASSWORD" ? (
-
- ) : (
-
- ))}
+ {!focused && !value && (
+
+ )}
{rightContent}
diff --git a/jobdri/components/common/input/InputSingleLine.tsx b/jobdri/components/common/input/InputSingleLine.tsx
index 7965a44..8628c4e 100644
--- a/jobdri/components/common/input/InputSingleLine.tsx
+++ b/jobdri/components/common/input/InputSingleLine.tsx
@@ -1,26 +1,50 @@
"use client";
-import { useState } from "react";
+import type { FocusEvent, InputHTMLAttributes } from "react";
+import { forwardRef, useState } from "react";
import clsx from "clsx";
import { getWrapperClass, getFieldClass } from "./inputStyles";
-interface InputSingleLineProps {
+interface InputSingleLineProps
+ extends Omit<
+ InputHTMLAttributes
,
+ "value" | "onChange" | "disabled" | "className"
+ > {
placeholder?: string;
value?: string;
onChange?: (value: string) => void;
disabled?: boolean;
+ hasError?: boolean;
error?: string;
className?: string;
+ wrapperClassName?: string;
+ inputClassName?: string;
+ focusedBorder?: string;
+ paddingClass?: string;
+ radiusClass?: string;
}
-export function InputSingleLine({
+export const InputSingleLine = forwardRef(
+ function InputSingleLine(
+ {
placeholder,
value: externalValue,
onChange,
- disabled = false,
- error,
- className,
-}: InputSingleLineProps) {
+ disabled = false,
+ hasError = false,
+ error,
+ className,
+ wrapperClassName,
+ inputClassName,
+ focusedBorder = "border-line-neutral-strong",
+ paddingClass,
+ radiusClass,
+ onFocus,
+ onBlur,
+ ...inputProps
+ },
+ ref,
+) {
const [internalValue, setInternalValue] = useState("");
const [focused, setFocused] = useState(false);
@@ -31,28 +55,46 @@ export function InputSingleLine({
onChange?.(e.target.value);
};
+ const handleFocus = (event: FocusEvent) => {
+ setFocused(true);
+ onFocus?.(event);
+ };
+
+ const handleBlur = (event: FocusEvent) => {
+ setFocused(false);
+ onBlur?.(event);
+ };
+
return (
setFocused(true)}
- onBlur={() => setFocused(false)}
+ onFocus={handleFocus}
+ onBlur={handleBlur}
disabled={disabled}
+ {...inputProps}
/>
{error &&
{error}}
);
-}
+},
+);
diff --git a/jobdri/components/common/input/inputStyles.ts b/jobdri/components/common/input/inputStyles.ts
index 445a8f9..99f686a 100644
--- a/jobdri/components/common/input/inputStyles.ts
+++ b/jobdri/components/common/input/inputStyles.ts
@@ -6,9 +6,10 @@ export function getWrapperClass(
isError: boolean,
focusedBorder = "border-line-primary-default",
paddingClass = "px-4 py-3",
+ radiusClass = "rounded-lg",
) {
return clsx(
- `border rounded-lg ${paddingClass} transition-colors`,
+ `border ${radiusClass} ${paddingClass} transition-colors`,
disabled
? "bg-transparent border-line-neutral-default"
: isError
diff --git a/jobdri/components/icons/Icon.tsx b/jobdri/components/icons/Icon.tsx
new file mode 100644
index 0000000..a12e86e
--- /dev/null
+++ b/jobdri/components/icons/Icon.tsx
@@ -0,0 +1,2 @@
+export { default } from "@/components/common/icons/Icon";
+export type { IconType } from "@/components/common/icons/Icon";
diff --git a/jobdri/components/input/InputMain.tsx b/jobdri/components/input/InputMain.tsx
new file mode 100644
index 0000000..1b87bd0
--- /dev/null
+++ b/jobdri/components/input/InputMain.tsx
@@ -0,0 +1 @@
+export { InputMain } from "@/components/common/input/InputMain";
diff --git a/jobdri/components/input/index.ts b/jobdri/components/input/index.ts
new file mode 100644
index 0000000..bd4a5a8
--- /dev/null
+++ b/jobdri/components/input/index.ts
@@ -0,0 +1 @@
+export * from "@/components/common/input";
diff --git a/jobdri/components/input/inputStyles.ts b/jobdri/components/input/inputStyles.ts
new file mode 100644
index 0000000..1f64660
--- /dev/null
+++ b/jobdri/components/input/inputStyles.ts
@@ -0,0 +1 @@
+export * from "@/components/common/input/inputStyles";
diff --git a/jobdri/components/login/EmailLoginScreen.tsx b/jobdri/components/login/EmailLoginScreen.tsx
new file mode 100644
index 0000000..aa22af3
--- /dev/null
+++ b/jobdri/components/login/EmailLoginScreen.tsx
@@ -0,0 +1,679 @@
+"use client";
+
+import type {
+ ClipboardEvent,
+ Dispatch,
+ FormEvent,
+ KeyboardEvent,
+ MutableRefObject,
+ SetStateAction,
+} from "react";
+import { useEffect, useRef, useState } from "react";
+import clsx from "clsx";
+import {
+ Button,
+ IconOnlyButton,
+ TextOnlyButton,
+} from "@/components/common/buttons";
+import { InputMain, InputSingleLine } from "@/components/common/input";
+import { Tooltip } from "@/components/common/tooltip";
+
+const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const passwordPattern = /^(?=.*[A-Za-z])(?=.*\d).{8,20}$/;
+const passwordValidationMessage =
+ "영문, 숫자 조합 8자 이상인지 확인해주세요";
+const passwordMaxLengthMessage = "비밀번호는 최대 20자까지만 가능합니다";
+const passwordMismatchMessage = "비밀번호가 일치하지 않습니다";
+const verificationCodeLength = 6;
+const initialVerificationCode = Array(verificationCodeLength).fill("");
+const verificationErrorMessage = "인증번호를 다시 확인해주세요.";
+const mockVerificationSuccessCode = "123456";
+
+export default function EmailLoginScreen() {
+ const [authMode, setAuthMode] = useState<
+ "login" | "signup" | "verify" | "success"
+ >("login");
+ const [showCreditTooltip, setShowCreditTooltip] = useState(true);
+ const [email, setEmail] = useState("");
+ const [password, setPassword] = useState("");
+ const [passwordConfirm, setPasswordConfirm] = useState("");
+ const [verificationCode, setVerificationCode] = useState(
+ initialVerificationCode,
+ );
+ const [hasVerificationError, setHasVerificationError] = useState(false);
+ const [loginError, setLoginError] = useState(false);
+ const verificationInputRefs = useRef>([]);
+
+ const isLoginReady = email.length > 0 && password.length > 0;
+ const hasSignupEmailValidationError =
+ authMode === "signup" && email.length > 0 && !emailPattern.test(email);
+ const hasPasswordMaxLengthError = password.length > 20;
+ const hasPasswordValidationError =
+ password.length > 0 &&
+ !hasPasswordMaxLengthError &&
+ !passwordPattern.test(password);
+ const passwordError = hasPasswordMaxLengthError
+ ? passwordMaxLengthMessage
+ : hasPasswordValidationError
+ ? passwordValidationMessage
+ : undefined;
+ const hasPasswordMismatchError =
+ passwordConfirm.length > 0 && passwordConfirm !== password;
+ const isSignupReady =
+ emailPattern.test(email) &&
+ passwordPattern.test(password) &&
+ passwordConfirm === password;
+ const isVerificationReady =
+ !hasVerificationError && verificationCode.every(Boolean);
+ const displayedVerificationEmail = email || "example@gmail.com";
+
+ useEffect(() => {
+ if (!showCreditTooltip) {
+ return;
+ }
+
+ const timerId = window.setTimeout(() => {
+ setShowCreditTooltip(false);
+ }, 5000);
+
+ return () => {
+ window.clearTimeout(timerId);
+ };
+ }, [showCreditTooltip]);
+
+ const hideCreditTooltip = () => {
+ setShowCreditTooltip(false);
+ };
+
+ const handleInputChange = (
+ value: string,
+ setter: Dispatch>,
+ ) => {
+ setter(value);
+ setLoginError(false);
+ hideCreditTooltip();
+ };
+
+ const handlePasswordChange = (value: string) => {
+ handleInputChange(value, setPassword);
+
+ if (value.length === 0) {
+ setPasswordConfirm("");
+ }
+ };
+
+ const handlePasswordConfirmChange = (value: string) => {
+ handleInputChange(value, setPasswordConfirm);
+ };
+
+ const focusVerificationInput = (index: number) => {
+ verificationInputRefs.current[index]?.focus();
+ };
+
+ useEffect(() => {
+ if (authMode !== "verify" || hasVerificationError) {
+ return;
+ }
+
+ window.requestAnimationFrame(() => {
+ focusVerificationInput(0);
+ });
+ }, [authMode, hasVerificationError]);
+
+ const resetVerificationToInitial = () => {
+ setVerificationCode([...initialVerificationCode]);
+ setHasVerificationError(false);
+ window.requestAnimationFrame(() => {
+ focusVerificationInput(0);
+ });
+ };
+
+ const fillVerificationCode = (startIndex: number, value: string) => {
+ const digits = value.replace(/\D/g, "");
+
+ if (!digits) {
+ setVerificationCode((prevCode) =>
+ prevCode.map((digit, index) => (index === startIndex ? "" : digit)),
+ );
+ return;
+ }
+
+ const nextCode = [...verificationCode];
+ const slicedDigits = digits.slice(0, verificationCodeLength - startIndex);
+
+ slicedDigits.split("").forEach((digit, offset) => {
+ nextCode[startIndex + offset] = digit;
+ });
+
+ setVerificationCode(nextCode);
+
+ const nextIndex = Math.min(
+ startIndex + slicedDigits.length,
+ verificationCodeLength - 1,
+ );
+ window.requestAnimationFrame(() => {
+ focusVerificationInput(nextIndex);
+ });
+ };
+
+ const handleVerificationCodeChange = (index: number, value: string) => {
+ if (hasVerificationError) {
+ resetVerificationToInitial();
+ return;
+ }
+
+ fillVerificationCode(index, value);
+ };
+
+ const handleVerificationCodeFocus = () => {
+ if (hasVerificationError) {
+ resetVerificationToInitial();
+ }
+ };
+
+ const handleVerificationCodeKeyDown = (
+ index: number,
+ event: KeyboardEvent,
+ ) => {
+ if (event.key === "Backspace" && !verificationCode[index] && index > 0) {
+ focusVerificationInput(index - 1);
+ return;
+ }
+
+ if (event.key === "ArrowLeft" && index > 0) {
+ event.preventDefault();
+ focusVerificationInput(index - 1);
+ return;
+ }
+
+ if (event.key === "ArrowRight" && index < verificationCodeLength - 1) {
+ event.preventDefault();
+ focusVerificationInput(index + 1);
+ }
+ };
+
+ const handleVerificationCodePaste = (
+ index: number,
+ event: ClipboardEvent,
+ ) => {
+ event.preventDefault();
+ fillVerificationCode(index, event.clipboardData.getData("text"));
+ };
+
+ const handleLoginSubmit = (event: FormEvent) => {
+ event.preventDefault();
+
+ if (
+ !isLoginReady ||
+ !emailPattern.test(email) ||
+ !passwordPattern.test(password)
+ ) {
+ setLoginError(true);
+ return;
+ }
+
+ setLoginError(true);
+ };
+
+ const handleSignupSubmit = (event: FormEvent) => {
+ event.preventDefault();
+
+ if (!isSignupReady || !emailPattern.test(email)) {
+ return;
+ }
+
+ setVerificationCode([...initialVerificationCode]);
+ setHasVerificationError(false);
+ setAuthMode("verify");
+ };
+
+ const handleVerificationSubmit = (event: FormEvent) => {
+ event.preventDefault();
+
+ if (!isVerificationReady) {
+ return;
+ }
+
+ if (verificationCode.join("") === mockVerificationSuccessCode) {
+ setAuthMode("success");
+ setVerificationCode([...initialVerificationCode]);
+ setHasVerificationError(false);
+ return;
+ }
+
+ setVerificationCode([...initialVerificationCode]);
+ setHasVerificationError(true);
+ if (document.activeElement instanceof HTMLElement) {
+ document.activeElement.blur();
+ }
+ };
+
+ const handleModeChange = (mode: "login" | "signup") => {
+ setAuthMode(mode);
+ setLoginError(false);
+ setEmail("");
+ setPassword("");
+ setPasswordConfirm("");
+ setVerificationCode([...initialVerificationCode]);
+ setHasVerificationError(false);
+ hideCreditTooltip();
+ };
+
+ const handleVerificationSuccessConfirm = () => {
+ handleModeChange("login");
+ };
+
+ const handleBackToSignup = () => {
+ setAuthMode("signup");
+ setVerificationCode([...initialVerificationCode]);
+ setHasVerificationError(false);
+ hideCreditTooltip();
+ };
+
+ const handleResendVerificationCode = () => {
+ resetVerificationToInitial();
+ };
+
+ return (
+
+
+
+ );
+}
+
+interface EmailVerificationContentProps {
+ email: string;
+ verificationCode: string[];
+ verificationInputRefs: MutableRefObject>;
+ hasVerificationError: boolean;
+ isVerificationReady: boolean;
+ onBack: () => void;
+ onCodeChange: (index: number, value: string) => void;
+ onCodeFocus: () => void;
+ onCodeKeyDown: (
+ index: number,
+ event: KeyboardEvent,
+ ) => void;
+ onCodePaste: (
+ index: number,
+ event: ClipboardEvent,
+ ) => void;
+ onResend: () => void;
+}
+
+function EmailVerificationContent({
+ email,
+ verificationCode,
+ verificationInputRefs,
+ hasVerificationError,
+ isVerificationReady,
+ onBack,
+ onCodeChange,
+ onCodeFocus,
+ onCodeKeyDown,
+ onCodePaste,
+ onResend,
+}: EmailVerificationContentProps) {
+ return (
+ <>
+
+
+
+
+
+
+
+ JobDri
+
+
+
+
+ 이메일 인증하기
+
+
+
+ {email}
+
+
+ (으)로 전송한 6자리 코드를 입력해주세요
+
+
+
+
+
+
+
+ {verificationCode.map((digit, index) => (
+ {
+ verificationInputRefs.current[index] = input;
+ }}
+ value={digit}
+ onChange={(value) => onCodeChange(index, value)}
+ onFocus={onCodeFocus}
+ onKeyDown={(event) => onCodeKeyDown(index, event)}
+ onPaste={(event) => onCodePaste(index, event)}
+ inputMode="numeric"
+ autoComplete={index === 0 ? "one-time-code" : "off"}
+ maxLength={1}
+ aria-label={`인증번호 ${index + 1}번째 자리`}
+ className="!w-[47px] gap-0"
+ wrapperClassName="h-[63px] w-[47px]"
+ inputClassName="h-full text-center !text-[24px] !leading-[130%] !font-medium !tracking-[-0.02em] !text-text-neutral-description [font-feature-settings:'liga'_off,'clig'_off]"
+ paddingClass="p-0"
+ radiusClass="rounded-card-s"
+ focusedBorder="border-line-primary-default"
+ hasError={hasVerificationError}
+ />
+ ))}
+
+
+ {hasVerificationError && (
+
+ {verificationErrorMessage}
+
+ )}
+
+
+
+
+ 인증코드가 오지 않았나요?
+
+
+
+
+
+
+
+
+
+ 또는
+
+
+
+ );
+}
diff --git a/jobdri/components/login/index.ts b/jobdri/components/login/index.ts
new file mode 100644
index 0000000..08c0d85
--- /dev/null
+++ b/jobdri/components/login/index.ts
@@ -0,0 +1 @@
+export { default as EmailLoginScreen } from "./EmailLoginScreen";
diff --git a/jobdri/package.json b/jobdri/package.json
index e0aace4..454afd1 100644
--- a/jobdri/package.json
+++ b/jobdri/package.json
@@ -2,6 +2,7 @@
"name": "jobdri",
"version": "0.1.0",
"private": true,
+ "packageManager": "pnpm@10.25.0",
"scripts": {
"dev": "next dev",
"build": "next build",
diff --git a/jobdri/pnpm-workspace.yaml b/jobdri/pnpm-workspace.yaml
index dd1b4fd..6c00226 100644
--- a/jobdri/pnpm-workspace.yaml
+++ b/jobdri/pnpm-workspace.yaml
@@ -1,3 +1,7 @@
allowBuilds:
sharp: true
unrs-resolver: true
+
+onlyBuiltDependencies:
+ - sharp
+ - unrs-resolver
diff --git a/jobdri/styles/grid.css b/jobdri/styles/grid.css
index ccdc3e3..c1d5143 100644
--- a/jobdri/styles/grid.css
+++ b/jobdri/styles/grid.css
@@ -8,8 +8,7 @@
--width-default: 1116px;
/* 2. WEB_LNB (사이드바 있을 때) */
- /* (69px * 12) + (12px * 11) = 960px */
- --width-lnb: 960px;
+ --width-lnb: 1060px;
/* 모바일 */
--mobile-margin: 16px;
@@ -35,6 +34,13 @@
max-width: var(--width-lnb);
}
+/* LNB가 있는 페이지의 메인 콘텐츠 여백 */
+.main-content-frame {
+ width: 100%;
+ min-width: 0;
+ padding: 44px 40px;
+}
+
/* 모바일 대응 */
@media (max-width: 767px) {
.grid-base {