Merge pull request #225 from always97/fe-user-ui

[FE] feat#76#84#224 로그인/회원가입, 마이페이지 ui, 채팅 스크롤 개선

FE/src/App.tsx

@@ -4,6 +4,8 @@ import { GameSetupPage } from './pages/GameSetupPage';
 import { GamePage } from './pages/GamePage';
 import { QuizSetupPage } from './pages/QuizSetupPage';
 import { GameLobbyPage } from './pages/GameLobbyPage';
+import { LoginPage } from './pages/LoginPage';
+import { MyPage } from './pages/MyPage';
 
 function App() {
   return (
@@ -14,6 +16,8 @@ function App() {
         <Route path="/game/:gameId" element={<GamePage />} />
         <Route path="/game/lobby" element={<GameLobbyPage />} />
         <Route path="/quiz/setup" element={<QuizSetupPage />} />
+        <Route path="/login" element={<LoginPage />} />
+        <Route path="/mypage" element={<MyPage />} />
         <Route path="*" element={<div>not found</div>} />
       </Routes>
     </Router>

FE/src/components/Chat.tsx

@@ -18,28 +18,38 @@ const Chat = () => {
   const [isAtBottom, setIsAtBottom] = useState(true);
   const [newMessage, setNewMessage] = useState(false);
   const [prevMessageCount, setPrevMessageCount] = useState(messages.length);
-  const prevScrollTopRef = useRef(0);
 
   const scrollToBottom = () => {
     if (chatBottomRef.current) {
-      chatBottomRef.current.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-      setNewMessage(false);
+      setTimeout(() => {
+        chatBottomRef.current?.scrollIntoView({
+          behavior: 'instant',
+          block: 'end'
+        });
+        setNewMessage(false);
+      }, 0);
     }
   };
 
   const handleScroll = () => {
     const container = chatContainerRef.current;
-    if (container) {
-      // const isBottom = container.scrollHeight - container.scrollTop === container.clientHeight;
-      const isBottom = prevScrollTopRef.current < container.scrollTop && isAtBottom;
-      prevScrollTopRef.current = container.scrollTop;
-      setIsAtBottom(isBottom); // 맨 아래에 있으면 true, 아니면 false
-      if (isBottom) {
-        setNewMessage(false);
-      }
+    if (!container) return;
+
+    const isBottom =
+      Math.abs(container.scrollHeight - container.scrollTop - container.clientHeight) < 10;
+
+    if (isBottom) {
+      setIsAtBottom(true);
+    } else {
+      setIsAtBottom(false);
     }
   };
 
+  const handleScrollToBottomClick = () => {
+    scrollToBottom();
+    setIsAtBottom(true);
+  };
+
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setInputValue(e.target.value);
   };
@@ -78,8 +88,8 @@ const Chat = () => {
       setPrevMessageCount(messages.length);
     }
 
-    if (isAtBottom && chatBottomRef.current) {
-      scrollToBottom();
+    if (isAtBottom) {
+      requestAnimationFrame(() => scrollToBottom());
     }
   }, [messages, isAtBottom, prevMessageCount]);
 
@@ -127,7 +137,7 @@ const Chat = () => {
         <Button
           variant="contained"
           className="fixed bottom-24 left-1/2 transform -translate-x-1/2 bg-blue-500 text-white p-2 rounded"
-          onClick={scrollToBottom}
+          onClick={handleScrollToBottomClick}
           style={{ zIndex: 1000 }}
         >
           {`${messages[messages.length - 1].playerName}: ${

FE/src/pages/LoginPage.tsx

@@ -0,0 +1,121 @@
+import { HeaderBar } from '@/components/HeaderBar';
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+export const LoginPage = () => {
+  const [isSignUp, setIsSignUp] = useState(false);
+  const navigate = useNavigate();
+
+  const handleLogin = () => {
+    navigate('/mypage');
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-900 text-gray-300 flex flex-col">
+      <HeaderBar />
+
+      <div className="flex-grow flex items-center justify-center">
+        <div className="w-full max-w-md">
+          <div className="text-center mb-6">
+            <h6 className="text-lg font-bold">
+              <span
+                className={`px-4 ${!isSignUp ? 'text-yellow-400' : 'text-gray-400'} cursor-pointer`}
+                onClick={() => setIsSignUp(false)}
+              >
+                로그인
+              </span>
+              <span
+                className={`px-4 ${isSignUp ? 'text-yellow-400' : 'text-gray-400'} cursor-pointer`}
+                onClick={() => setIsSignUp(true)}
+              >
+                회원가입
+              </span>
+            </h6>
+            <div
+              className="relative w-16 h-4 mx-auto bg-yellow-400 rounded-full cursor-pointer"
+              onClick={() => setIsSignUp(!isSignUp)}
+            >
+              <div
+                className={`absolute w-9 h-9 bg-blue-800 rounded-full transition-transform duration-500 ${
+                  isSignUp ? 'translate-x-8' : ''
+                }`}
+              ></div>
+            </div>
+          </div>
+
+          <div
+            className="bg-gray-800 rounded-md p-8 transition-all duration-500"
+            style={{ minHeight: '400px' }}
+          >
+            {isSignUp ? <SignUpForm /> : <LoginForm handleLogin={handleLogin} />}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+type LoginFormProps = {
+  handleLogin: () => void;
+};
+
+const LoginForm: React.FC<LoginFormProps> = ({ handleLogin }) => (
+  <div>
+    <h4 className="mb-4 text-xl font-bold text-gray-100">로그인</h4>
+    <div className="mb-4">
+      <input
+        type="email"
+        placeholder="이메일"
+        className="w-full px-4 py-3 text-sm text-gray-300 bg-gray-700 rounded-md focus:ring-2 focus:ring-yellow-400 focus:outline-none"
+      />
+    </div>
+    <div className="mb-4">
+      <input
+        type="password"
+        placeholder="비밀번호"
+        className="w-full px-4 py-3 text-sm text-gray-300 bg-gray-700 rounded-md focus:ring-2 focus:ring-yellow-400 focus:outline-none"
+      />
+    </div>
+    <button
+      className="w-full px-4 py-3 mt-4 text-sm font-semibold text-blue-900 bg-yellow-400 rounded-md hover:bg-yellow-500"
+      onClick={handleLogin}
+    >
+      로그인
+    </button>
+    <p className="mt-4 text-sm">
+      <a href="#" className="text-yellow-400 hover:underline">
+        비밀번호를 잊으셨나요?
+      </a>
+    </p>
+  </div>
+);
+
+const SignUpForm = () => (
+  <div>
+    <h4 className="mb-4 text-xl font-bold text-gray-100">회원가입</h4>
+    <div className="mb-4">
+      <input
+        type="text"
+        placeholder="닉네임"
+        className="w-full px-4 py-3 text-sm text-gray-300 bg-gray-700 rounded-md focus:ring-2 focus:ring-yellow-400 focus:outline-none"
+      />
+    </div>
+    <div className="mb-4">
+      <input
+        type="email"
+        placeholder="이메일"
+        className="w-full px-4 py-3 text-sm text-gray-300 bg-gray-700 rounded-md focus:ring-2 focus:ring-yellow-400 focus:outline-none"
+      />
+    </div>
+    <div className="mb-4">
+      <input
+        type="password"
+        placeholder="비밀번호"
+        className="w-full px-4 py-3 text-sm text-gray-300 bg-gray-700 rounded-md focus:ring-2 focus:ring-yellow-400 focus:outline-none"
+      />
+    </div>
+    <button className="w-full px-4 py-3 mt-4 text-sm font-semibold text-blue-900 bg-yellow-400 rounded-md hover:bg-yellow-500">
+      회원가입
+    </button>
+  </div>
+);

FE/src/pages/MainPage.tsx

@@ -23,7 +23,9 @@ export const MainPage = () => {
           <Button variant="outlined" onClick={() => navigate('/quiz/setup')}>
             퀴즈 생성
           </Button>
-          <Button variant="outlined">로그인</Button>
+          <Button variant="outlined" onClick={() => navigate('/login')}>
+            로그인
+          </Button>
         </div>
       </div>
     </div>

FE/src/pages/MyPage.tsx

@@ -0,0 +1,104 @@
+import { HeaderBar } from '@/components/HeaderBar';
+import { useState } from 'react';
+
+type QuizListProps = {
+  title: string;
+  quizzes: string[];
+  activeTab: string;
+};
+
+export const MyPage: React.FC = () => {
+  const [activeTab, setActiveTab] = useState<'myQuizzes' | 'solvedQuizzes'>('myQuizzes');
+
+  const myQuizzes = ['퀴즈 1', '퀴즈 2', '퀴즈 3', '퀴즈 4']; // 예시 데이터
+  const solvedQuizzes = ['퀴즈 A', '퀴즈 B', '퀴즈 C', '퀴즈 D']; // 예시 데이터
+
+  return (
+    <div className="min-h-screen bg-gray-100 text-gray-800">
+      <HeaderBar />
+
+      <div className="flex flex-col items-center mt-8">
+        <div className="w-24 h-24 rounded-full bg-gray-300 overflow-hidden mb-4">
+          <img
+            src="https://via.placeholder.com/100" // 임시 프로필 이미지
+            alt="Profile"
+            className="w-full h-full object-cover"
+          />
+        </div>
+        <h2 className="text-lg font-bold">닉네임</h2>
+      </div>
+
+      <div className="mt-8 px-4">
+        <div className="flex justify-center space-x-4 border-b border-gray-300 pb-2">
+          <button
+            className={`px-4 py-2 font-medium ${
+              activeTab === 'myQuizzes'
+                ? 'text-blue-500 border-b-2 border-blue-500'
+                : 'text-gray-500'
+            }`}
+            onClick={() => setActiveTab('myQuizzes')}
+          >
+            내가 만든 퀴즈
+          </button>
+          <button
+            className={`px-4 py-2 font-medium ${
+              activeTab === 'solvedQuizzes'
+                ? 'text-blue-500 border-b-2 border-blue-500'
+                : 'text-gray-500'
+            }`}
+            onClick={() => setActiveTab('solvedQuizzes')}
+          >
+            내가 풀이한 퀴즈
+          </button>
+        </div>
+
+        {/* 리스트 */}
+        <div className="mt-4">
+          {activeTab === 'myQuizzes' ? (
+            <QuizList title="내가 만든 퀴즈" quizzes={myQuizzes} activeTab={activeTab} />
+          ) : (
+            <QuizList title="내가 풀이한 퀴즈" quizzes={solvedQuizzes} activeTab={activeTab} />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// 퀴즈 리스트 컴포넌트
+const QuizList: React.FC<QuizListProps> = ({ title, quizzes, activeTab }) => {
+  const handleEdit = (index: number) => {
+    console.log(index + '수정 클릭');
+  };
+  const handleDelete = (index: number) => {
+    console.log(index + '삭제 클릭');
+  };
+  return (
+    <div className="max-w-lg mx-auto p-4 bg-white shadow-md rounded-md overflow-y-auto max-h-90">
+      <h3 className="text-lg font-bold mb-4">{title}</h3>
+      <ul className="space-y-2">
+        {quizzes.map((quiz, index) => (
+          <li key={index} className="p-2 border-b flex justify-between items-center">
+            <span>{quiz}</span>
+            <div className="flex gap-2">
+              {activeTab === 'myQuizzes' && (
+                <button
+                  onClick={() => handleEdit(index)}
+                  className="px-2 py-1 bg-blue-500 text-white rounded hover:bg-blue-600"
+                >
+                  수정
+                </button>
+              )}
+              <button
+                onClick={() => handleDelete(index)}
+                className="px-2 py-1 bg-red-500 text-white rounded hover:bg-red-600"
+              >
+                삭제
+              </button>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};