chore : 마이페이지 퍼블리싱

src/App.tsx

@@ -9,6 +9,8 @@ import MobileRegisterPage from "./pages/mobile/MobileRegisterPage";
 import ProtectedRoute from "./components/ProtectedRoute";
 import MobileProtectedRoute from "./components/MobileProtectedRoute";
 import HomePage from "./pages/HomePage";
+import TokenInfoPage from "./pages/TokenInfoPage";
+import MyPage from "./pages/MyPage";
 
 const App = () => {
   return (
@@ -39,6 +41,8 @@ const App = () => {
         <Route path="/app/login" element={<MobileLoginPage />} />
         <Route path="/app/register" element={<MobileRegisterPage />} />
         <Route path="/home" element={<HomePage />} />
+        <Route path="/tokens" element={<TokenInfoPage />} />
+        <Route path="/info" element={<MyPage />} />
 
 
       </Routes>

src/components/home/HomeLayout.tsx

@@ -3,11 +3,13 @@ import Sidebar from "./Sidebar";
 
 interface LayoutProps {
   children: ReactNode;
+  username: string;
+  email: string;
 }
 
-const Layout: React.FC<LayoutProps> = ({ children }) => (
+const Layout: React.FC<LayoutProps> = ({ children  , username , email} ) => (
   <div className="flex min-h-screen bg-gray-50">
-     <Sidebar name="이동현" email="m**@*******n.cc" />
+     <Sidebar name={username} email={email} />
     <main className="flex-1 p-4 md:p-6 max-w-5xl">{children}</main>
   </div>
 );

src/components/home/Sidebar.tsx

@@ -1,41 +1,54 @@
 import React from "react";
+import { useLocation } from "react-router-dom";
 import SidebarLink from "./SidebarLink";
 
 interface SidebarProps {
   name: string;
   email: string;
+  profileUrl?: string;
 }
 
-const Sidebar: React.FC<SidebarProps> = ({ name, email }) => (
-  <aside className="w-20 md:w-64 bg-white border-r border-gray-200 hidden md:block flex-shrink-0">
-    <div className="p-4">
-      <img
-        src="https://nanu.cc/NANU_Brand_Logo/NANU_ID_FULL_XS.svg"
-        alt="NAMU Logo"
-        style={{height:"25px"}}
-      />
-    </div>
+const Sidebar: React.FC<SidebarProps> = ({ name, email, profileUrl = "/default_profile.png" }) => {
+  const location = useLocation();
 
-    <div className="p-4 border-b border-gray-200">
-      <div className="flex items-center space-x-3">
-        <div className="w-10 h-10 rounded-full bg-gray-200"></div>
-        <div className="flex-1">
-          <p className="font-medium">{name}</p>
-          <p className="text-sm text-gray-500">{email}</p> 
-        </div>
+  return (
+    <aside className="w-20 md:w-64 bg-white border-r border-gray-200 hidden md:block flex-shrink-0">
+      <div className="p-4">
+        <img
+          src="https://nanu.cc/NANU_Brand_Logo/NANU_ID_FULL_XS.svg"
+          alt="NAMU Logo"
+          style={{ height: "25px" }}
+        />
       </div>
-      <div className="mt-2 px-2 py-1 text-xs bg-orange-100 text-orange-600 rounded inline-block">
-        MFA 활성화
+
+      <div className="p-4 border-b border-gray-200">
+        <div className="flex items-center space-x-3">
+          <div className="w-10 h-10 rounded-full overflow-hidden">
+            <img
+              src={profileUrl}
+              alt="Profile"
+              className="w-full h-full object-cover"
+            />
+          </div>
+
+          <div className="flex-1">
+            <p className="font-medium">{name}</p>
+            <p className="text-sm text-gray-500">{email}</p>
+          </div>
+        </div>
+        <div className="mt-2 px-2 py-1 text-xs bg-orange-100 text-orange-600 rounded inline-block">
+          MFA 활성화
+        </div>
       </div>
-    </div>
 
-    <nav className="flex-1 p-2">
-      <SidebarLink to="/home" icon="🏠" text="홈" active />
-      <SidebarLink to="/tokens" icon="🔑" text="토큰" />
-      <SidebarLink to="/auth" icon="🔒" text="보안" />
-      <SidebarLink to="/info" icon="ℹ️" text="마이페이지" />
-    </nav>
-  </aside>
-);
+      <nav className="flex-1 p-2">
+        <SidebarLink to="/home" icon="🏠" text="홈" active={location.pathname === "/home"} />
+        <SidebarLink to="/tokens" icon="🔑" text="토큰" active={location.pathname.startsWith("/tokens")} />
+        <SidebarLink to="/auth" icon="🔒" text="보안" active={location.pathname === "/auth"} />
+        <SidebarLink to="/info" icon="ℹ️" text="마이페이지" active={location.pathname === "/info"} />
+      </nav>
+    </aside>
+  );
+};
 
 export default Sidebar;

src/components/mypage/PasswordChangeDialog.tsx

@@ -0,0 +1,74 @@
+import React, { useState } from 'react';
+import { Lock } from 'lucide-react';
+
+const PasswordChangeDialog: React.FC = () => {
+  const [currentPassword, setCurrentPassword] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handlePasswordChange = () => {
+    // Validation and password change logic
+    console.log('Password change initiated');
+    setIsOpen(false); // Close modal after submission
+  };
+
+  return (
+    <div>
+      {/* Trigger button */}
+      <button
+        onClick={() => setIsOpen(true)}
+        className="flex items-center text-gray-700 hover:text-gray-900"
+      >
+        <Lock size={18} className="mr-2" />
+        비밀번호 변경
+      </button>
+
+      {/* Modal */}
+      {isOpen && (
+        <div className="fixed inset-0 bg-gray-500 bg-opacity-50 flex items-center justify-center">
+          <div className="bg-white p-6 rounded-lg w-96">
+            <h2 className="text-xl font-semibold mb-4">비밀번호 변경</h2>
+            <div className="space-y-4">
+              <input
+                type="password"
+                placeholder="현재 비밀번호"
+                value={currentPassword}
+                onChange={(e) => setCurrentPassword(e.target.value)}
+                className="w-full border rounded-lg p-2"
+              />
+              <input
+                type="password"
+                placeholder="새 비밀번호"
+                value={newPassword}
+                onChange={(e) => setNewPassword(e.target.value)}
+                className="w-full border rounded-lg p-2"
+              />
+              <input
+                type="password"
+                placeholder="새 비밀번호 확인"
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                className="w-full border rounded-lg p-2"
+              />
+              <button
+                onClick={handlePasswordChange}
+                className="w-full bg-blue-500 text-white py-2 rounded-lg"
+              >
+                비밀번호 변경
+              </button>
+              <button
+                onClick={() => setIsOpen(false)}
+                className="w-full mt-2 bg-gray-200 text-gray-700 py-2 rounded-lg"
+              >
+                취소
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PasswordChangeDialog;

src/components/mypage/PinChangeDialog.tsx

@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import { Shield } from 'lucide-react';
+
+const PinChangeDialog: React.FC = () => {
+  const [pin, setPin] = useState('');
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handlePinChange = () => {
+    // PIN change logic
+    console.log('PIN change initiated');
+    setIsOpen(false); // Close modal after submission
+  };
+
+  return (
+    <div>
+      {/* Trigger button */}
+      <button 
+        onClick={() => setIsOpen(true)} 
+        className="flex items-center text-gray-700 hover:text-gray-900"
+      >
+        <Shield size={18} className="mr-2" />
+        PIN 변경
+      </button>
+
+      {/* Modal */}
+      {isOpen && (
+        <div className="fixed inset-0 bg-gray-500 bg-opacity-50 flex items-center justify-center">
+          <div className="bg-white p-6 rounded-lg w-96">
+            <h2 className="text-xl font-semibold mb-4">PIN 변경</h2>
+            <div className="space-y-4">
+              <input 
+                type="text" 
+                placeholder="새 PIN" 
+                value={pin}
+                onChange={(e) => setPin(e.target.value)}
+                className="w-full border rounded-lg p-2"
+              />
+              <button 
+                onClick={handlePinChange}
+                className="w-full bg-blue-500 text-white py-2 rounded-lg"
+              >
+                PIN 변경
+              </button>
+              <button
+                onClick={() => setIsOpen(false)} 
+                className="w-full mt-2 bg-gray-200 text-gray-700 py-2 rounded-lg"
+              >
+                취소
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PinChangeDialog;

src/components/mypage/ProfileImageUpload.tsx

@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+import { Upload } from 'lucide-react';
+
+interface ProfileImageUploadProps {
+  profileImage: string;
+  userName: string;
+}
+const ProfileImageUpload: React.FC<ProfileImageUploadProps> = ({ profileImage, userName }) => {
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files) {
+      setSelectedFile(event.target.files[0]);
+    }
+  };
+
+  return (
+    <div className="flex items-center space-x-4">
+      {/* Avatar 부분을 간단한 img 태그로 대체 */}
+      <div className="w-24 h-24 rounded-full overflow-hidden">
+        <img src={profileImage} alt="Profile" className="w-full h-full object-cover" />
+      </div>
+      <div>
+        <input 
+          type="file" 
+          id="profile-upload" 
+          className="hidden" 
+          accept="image/*"
+          onChange={handleFileChange}
+        />
+        <label 
+          htmlFor="profile-upload" 
+          className="flex items-center bg-blue-50 text-blue-600 px-4 py-2 rounded-lg cursor-pointer hover:bg-blue-100"
+        >
+          <Upload size={18} className="mr-2" />
+          프로필 사진 변경
+        </label>
+      </div>
+    </div>
+  );
+};
+
+export default ProfileImageUpload;