- {renderSections()}
+ {/* 탭 네비게이션 - 고정 높이 */}
+
+
+
+
+
+
+
+
- )}
+
- {/* 푸터 */}
-
-
- 즐거운 픽셀 아트 여행을 시작해보세요! 🎨
-
+ {/* 콘텐츠 영역 - 스크롤 가능 */}
+
+
+
+ {getCurrentCarouselItems().map((item, index) => (
+ {renderCarouselItem(item)}
+ ))}
+
+
+
+ {/* 푸터 영역 제거 */}
);
-}
+}
\ No newline at end of file
diff --git a/src/components/modal/LoginModalContent.tsx b/src/components/modal/LoginModalContent.tsx
index 9854f7f..3c9dbf3 100644
--- a/src/components/modal/LoginModalContent.tsx
+++ b/src/components/modal/LoginModalContent.tsx
@@ -8,20 +8,19 @@ type LoginModalContentProps = {
};
export default function LoginModalContent({ onClose }: LoginModalContentProps) {
- // 로그인 폼 자체의 상태를 스스로 관리합니다.
- const [username, setUsername] = useState('');
- const [password, setPassword] = useState('');
- const [randomName, setRandomname] = useState(generateRandomNickname());
+ const [nickname, setNickname] = useState(generateRandomNickname());
+ const isLoginDisabled = nickname.trim().length === 0;
const handleLogin = () => {
- guestLogin(randomName);
+ if (isLoginDisabled) return;
+ guestLogin(nickname.trim());
onClose?.();
};
const handleOAuthLogin = (provider: 'google' | 'naver' | 'kakao') => {
sessionStorage.setItem(
'redirectPath',
- window.location.pathname + window.location.search
+ window.location.pathname + window.location.search,
);
authService.redirectToProvider(provider);
};
@@ -37,10 +36,11 @@ export default function LoginModalContent({ onClose }: LoginModalContentProps) {
setUsername(e.target.value)}
+ placeholder='닉네임을 입력하세요 (8자 이하)'
+ className='bg-gray-900 p-2 text-center text-white placeholder-gray-500 focus:outline-none'
+ value={nickname}
+ onChange={(e) => setNickname(e.target.value.replace(/\s/g, ''))}
+ maxLength={8}
/>
@@ -49,7 +49,10 @@ export default function LoginModalContent({ onClose }: LoginModalContentProps) {
diff --git a/src/components/modal/Modal.tsx b/src/components/modal/Modal.tsx
index cf4d411..5aabd0e 100644
--- a/src/components/modal/Modal.tsx
+++ b/src/components/modal/Modal.tsx
@@ -5,9 +5,10 @@ type ModalProps = {
isOpen: boolean;
onClose: () => void;
children: React.ReactNode;
+ fullWidth?: boolean;
};
-export default function Modal({ isOpen, onClose, children }: ModalProps) {
+export default function Modal({ isOpen, onClose, children, fullWidth = false }: ModalProps) {
if (!isOpen) return null;
return ReactDOM.createPortal(
@@ -16,7 +17,7 @@ export default function Modal({ isOpen, onClose, children }: ModalProps) {
onClick={onClose}
>
e.stopPropagation()}
style={{
transitionProperty: 'height, min-height, max-height, transform',
diff --git a/src/components/modal/MyPageModalContent.tsx b/src/components/modal/MyPageModalContent.tsx
index f9f1a21..12ed69f 100644
--- a/src/components/modal/MyPageModalContent.tsx
+++ b/src/components/modal/MyPageModalContent.tsx
@@ -4,14 +4,16 @@ import React, { useEffect, useState } from 'react';
import { useAuthStore } from '../../store/authStrore';
import { authService } from '../../services/authService';
import { useModalStore } from '../../store/modalStore';
+import { useNavigate } from 'react-router-dom';
import {
myPageService,
type UserInfoResponse,
} from '../../services/myPageService';
export default function MyPageModalContent() {
- const { isLoggedIn, clearAuth } = useAuthStore();
+ const { isLoggedIn, clearAuth, user } = useAuthStore();
const { closeMyPageModal, openLoginModal } = useModalStore();
+ const navigate = useNavigate();
const [userInfo, setUserInfo] = useState
(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
@@ -117,14 +119,14 @@ export default function MyPageModalContent() {
)}
{canvas.canvasId !== 1 ? (
- 시도 : {canvas.try_count} / 점유 : {
- canvas.own_count !== null ?
- canvas.own_count :
-
+ 시도 : {canvas.try_count} / 점유 :{' '}
+ {canvas.own_count !== null ? (
+ canvas.own_count
+ ) : (
+
집계중
-
- }
+ )}
) : (
@@ -144,7 +146,18 @@ export default function MyPageModalContent() {
{/* Footer */}
-
+
+ {(user?.role === 'admin' || user?.role === 'ADMIN') && (
+
+ )}