-
이메일 인증
-
+
이메일 인증
+
본인 인증 메일을 귀하의
{' ' + email}
diff --git a/src/renderer/src/pages/SignUp/components/ResendEmailHeroSection.tsx b/src/renderer/src/pages/SignUp/components/ResendEmailHeroSection.tsx
index 6c52b1c..9b3ab51 100644
--- a/src/renderer/src/pages/SignUp/components/ResendEmailHeroSection.tsx
+++ b/src/renderer/src/pages/SignUp/components/ResendEmailHeroSection.tsx
@@ -1,8 +1,10 @@
export default function ResendEmailHerosection() {
return (
-
인증 링크를 메일로 전송했습니다
-
+
+ 인증 링크를 메일로 전송했습니다
+
+
이메일로 전송 받은 인증 링크를 확인해주세요.
링크는 발송 시점으로부터 24시간 동안 유효합니다.
diff --git a/src/renderer/src/pages/SignUp/components/SignUpform.tsx b/src/renderer/src/pages/SignUp/components/SignUpform.tsx
index 2393d06..20b979e 100644
--- a/src/renderer/src/pages/SignUp/components/SignUpform.tsx
+++ b/src/renderer/src/pages/SignUp/components/SignUpform.tsx
@@ -94,7 +94,7 @@ const SignUpForm = () => {
htmlFor="email"
className="text-body-lg-semibold hbp:text-headline-2xl-semibold text-grey-600"
>
- 이메일 *
+ 이메일 *
{
})}
className={`hbp:text-body-xl-regular aspect-[338/60] flex-1 ${
errors.email
- ? '!border-red-500'
+ ? '!border-error'
: duplicateSuccess === true
- ? '!border-green-500'
+ ? '!border-success'
: duplicateSuccess === false
- ? '!border-red-500'
+ ? '!border-error'
: ''
}`}
/>
@@ -130,10 +130,10 @@ const SignUpForm = () => {
{(errors.email || duplicateMessage) && (
{errors.email || duplicateSuccess === false ? (
@@ -154,7 +154,7 @@ const SignUpForm = () => {
htmlFor="password"
className="text-body-lg-semibold hbp:text-headline-2xl-semibold text-grey-600"
>
- 비밀번호
*
+ 비밀번호
*
영문, 숫자, 특수문자를 조합하여 8-16글자로 입력해주세요.
@@ -162,6 +162,7 @@ const SignUpForm = () => {
{/* 비밀번호 재입력 섹션 */}
@@ -174,8 +175,8 @@ const SignUpForm = () => {
? '' // 아무 입력 없으면 기본
: formValues.password === formValues.confirmPassword &&
!errors.password
- ? '!border-green-500' // 입력 있음 + 비밀번호 조건 통과 + 일치시 초록색
- : '!border-red-500' // 그 외는 모두 빨간색
+ ? '!border-success' // 입력 있음 + 비밀번호 조건 통과 + 일치시 초록색
+ : '!border-error' // 그 외는 모두 빨간색
}
/>
@@ -188,14 +189,14 @@ const SignUpForm = () => {
formValues.password !== formValues.confirmPassword ||
!!errors.password;
- const colorClass = isError ? 'text-red-500' : 'text-green-500';
+ const colorClass = isError ? 'text-error' : 'text-success';
const Icon = isError ? FailIcon : SuccessIcon;
const message = isError
? errors.password?.message || '비밀번호가 일치하지 않습니다.'
: '비밀번호가 일치합니다.';
return (
-
+
@@ -210,7 +211,7 @@ const SignUpForm = () => {
htmlFor="name"
className="text-body-lg-semibold hbp:text-headline-2xl-semibold text-grey-600"
>
- 이름
*
+ 이름
*
최대 10글자 이내로 작성해주세요.
@@ -220,13 +221,13 @@ const SignUpForm = () => {
type="text"
placeholder="이름을 입력해주세요."
{...register('name')}
- className={`hbp:text-body-xl-regular ${errors.name ? '!border-red-500' : formValues.name ? '!border-green-500' : ''}`}
+ className={`hbp:text-body-xl-regular ${errors.name ? '!border-error' : formValues.name ? '!border-success' : ''}`}
/>
{(formValues.name || !!errors.name) && (
{errors.name ?
:
}
diff --git a/src/renderer/src/pages/Widget/WidgetPage.tsx b/src/renderer/src/pages/Widget/WidgetPage.tsx
new file mode 100644
index 0000000..fcfd664
--- /dev/null
+++ b/src/renderer/src/pages/Widget/WidgetPage.tsx
@@ -0,0 +1,92 @@
+/* 위젯 창에 표시될 페이지 - 반응형 */
+
+import { useEffect, useState } from 'react';
+import { WidgetTitleBar } from '../../components/WidgetTitleBar/WidgetTitleBar';
+import { usePostureStore } from '../../store/usePostureStore';
+import { MediumWidgetContent } from './components/MediumWidgetContent';
+import { MiniWidgetContent } from './components/MiniWidgetContent';
+import { usePostureSyncWithLocalStorage } from './hooks/usePostureSyncWithLocalStorage';
+import { useThemeSync } from './hooks/useThemeSync';
+
+type WidgetSize = 'mini' | 'medium';
+type PostureState = 'turtle' | 'giraffe';
+
+/* 레이아웃 전환 기준점 */
+const BREAKPOINT = {
+ height: 62,
+} as const;
+
+export function WidgetPage() {
+ const [widgetSize, setWidgetSize] = useState
('medium');
+ const currentPostureClass = usePostureStore((state) => state.postureClass);
+
+ /* usePostureStore에서 실시간 자세 상태 가져오기 */
+
+ /* 실시간 자세 상태 동기화 */
+ usePostureSyncWithLocalStorage();
+
+ /* 위젯 라이트/다크 모드 */
+ useThemeSync();
+
+ /* 위젯 페이지 로드 시 로그 */
+ useEffect(() => {
+ console.log('위젯 페이지가 로드되었습니다');
+
+ if (window.electronAPI?.writeLog) {
+ const logData = JSON.stringify({
+ event: 'widget_page_loaded',
+ timestamp: new Date().toISOString(),
+ });
+ window.electronAPI.writeLog(logData).catch((error: unknown) => {
+ console.error('위젯 페이지 로드 로그 저장 실패:', error);
+ });
+ }
+ }, []);
+
+ /* 위젯 resize 이벤트 */
+ useEffect(() => {
+ /* resize 디바운스 타이머 ID 저장용 변수 */
+ let resizeTimeout: number;
+
+ /* 창 크기 변경 감지 핸들러 */
+ const handleResize = () => {
+ const isMedium = innerHeight > BREAKPOINT.height;
+ /* breakpoint를 넘으면 medium, 아니면 mini */
+ setWidgetSize(isMedium ? 'medium' : 'mini');
+ };
+
+ /* 디바운스 래퍼 함수 */
+ const handleResizeDebounced = () => {
+ clearTimeout(resizeTimeout);
+ resizeTimeout = window.setTimeout(() => {
+ handleResize();
+ }, 10);
+ };
+
+ handleResize();
+ window.addEventListener('resize', handleResizeDebounced);
+
+ return () => {
+ window.removeEventListener('resize', handleResizeDebounced);
+ clearTimeout(resizeTimeout);
+ };
+ }, []);
+
+ const isMini = widgetSize === 'mini';
+
+ return (
+
+
+ {/* 커스텀 타이틀바 */}
+
+
+ {/* 위젯 내용 - 창 크기에 따라 자동 전환 */}
+ {isMini ? (
+
+ ) : (
+
+ )}
+
+
+ {/* 캐릭터 영역 */}
+
+ {isGiraffe ? (
+
+ ) : (
+
+ )}
+
+
+ {/* 상세 정보 영역 */}
+
+ {/* 진행 바 */}
+
+
+ {/* 메시지 */}
+
+
{mainTitle}
+
{subTitle}
+
+
+
+ {/* 캐릭터 이미지 영역 - 작게 */}
+
+
+ {isGiraffe ? (
+
+ ) : (
+
+ )}
+
+