My page structure

src/App.tsx

@@ -1,6 +1,7 @@
 import { Route, BrowserRouter as Router, Routes } from 'react-router-dom';
 import Home from './components/Home';
 import Login from './components/Login';
+import MyPage from './components/MyPage';
 import Signup from './components/Signup';
 import Topbar from './components/Topbar';
 import { AuthProvider } from './contexts/AuthContext';
@@ -16,6 +17,7 @@ const App = () => (
             <Route path="/" element={<Home />} />
             <Route path="/login" element={<Login />} />
             <Route path="/signup" element={<Signup />} />
+            <Route path="/mypage" element={<MyPage />} />
           </Routes>
         </main>
       </PostProvider>

src/Bookmark.module.css

@@ -0,0 +1,56 @@
+.container {
+  display: flex;
+  gap: 1rem;
+  flex-direction: column;
+}
+
+.card {
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  padding: 1.5rem;
+  background-color: #fff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-shrink: 0;
+  height: 100px;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+}
+
+.companyName {
+  font-size: 1.1rem;
+  font-weight: bold;
+  margin: 0;
+}
+
+.positionTitle {
+  font-size: 1.25rem;
+  margin: 0 0 1.5rem 0;
+}
+
+.footer {
+  text-align: right;
+  margin-top: -1rem;
+}
+
+.details {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+.deadline {
+  color: red;
+  font-weight: bold;
+}
+
+.recruiting {
+  color: royalblue;
+  font-weight: bold;
+}

src/InternCard.module.css

@@ -80,7 +80,7 @@
 .dDay {
   font-size: 14px;
   font-weight: 500;
-  color: #e53e3e;
+  color: #888;
 }
 
 .deadline {

src/MyPage.module.css

@@ -0,0 +1,100 @@
+.container {
+  width: 768px;
+  margin: 0rem auto auto;
+  padding: 2rem;
+  border-radius: 8px;
+}
+
+.title {
+  font-size: 2rem;
+  font-weight: bold;
+  margin-bottom: 2rem;
+}
+
+.menu {
+  display: flex;
+  gap: 1rem;
+}
+
+.menu button {
+  background: none;
+  border: none;
+  padding: 1rem;
+  cursor: pointer;
+  font-size: 1rem;
+  color: #888;
+  border-bottom: 2px solid transparent;
+}
+
+.menu button:hover {
+  background-color: #f0f0f0;
+}
+
+.menu button.active {
+  color: #333;
+  font-weight: bold;
+  border-bottom: 2px solid #ccc;
+}
+
+.content {
+  padding: 1rem 0;
+}
+
+.menuHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #e0e0e0;
+  margin-bottom: 2rem;
+}
+
+.createProfileButton {
+  background-color: #f0f0f0;
+  color: #333;
+  border: none;
+  border-radius: 8px;
+  padding: 0.75rem 1rem;
+  font-size: 0.9rem;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.createProfileButton:hover {
+  background-color: #e0e0e0;
+}
+
+.profilePromptContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 4rem 0;
+}
+
+.promptTitle {
+  font-size: 1.5rem;
+  font-weight: bold;
+  margin: 0 0 1rem 0;
+}
+
+.promptSubtitle {
+  font-size: 1rem;
+  color: #555;
+  margin: 0 0 2rem 0;
+}
+
+.promptButton {
+  background-color: #333;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  padding: 1rem 1.5rem;
+  font-size: 1.1rem;
+  font-weight: bold;
+  cursor: pointer;
+  min-width: 300px;
+}
+
+.promptButton:hover {
+  background-color: #000000;
+}

src/components/Bookmark.tsx

@@ -0,0 +1,80 @@
+import { useEffect } from 'react';
+import { FaBookmark } from 'react-icons/fa6';
+import styles from '../Bookmark.module.css';
+import { usePosts } from '../contexts/PostContext';
+import type { Post } from '../types/types';
+
+const Bookmark = () => {
+  const { bookmarkedPosts, getBookmark, isLoading } = usePosts();
+
+  useEffect(() => {
+    getBookmark();
+  }, [getBookmark]);
+
+  const calculateDday = (post: Post) => {
+    const dateString = post.employmentEndDate;
+    if (!dateString) return '상시채용';
+
+    const endDate = new Date(dateString);
+    const today = new Date();
+    const utcEndDate = Date.UTC(
+      endDate.getFullYear(),
+      endDate.getMonth(),
+      endDate.getDate()
+    );
+    const utcToday = Date.UTC(
+      today.getFullYear(),
+      today.getMonth(),
+      today.getDate()
+    );
+    const diffTime = utcEndDate - utcToday;
+    const diffDays = diffTime / (1000 * 60 * 60 * 24);
+
+    if (diffDays < 0) return '마감';
+    if (diffDays === 0) return 'D-day';
+    return `D-${diffDays}`;
+  };
+
+  if (isLoading) {
+    return <p>로딩 중...</p>;
+  }
+
+  if (!bookmarkedPosts || bookmarkedPosts.length === 0) {
+    return <p>관심공고가 없습니다.</p>;
+  }
+
+  return (
+    <div className={styles.container}>
+      {bookmarkedPosts.map((post) => {
+        const dDay = calculateDday(post);
+        return (
+          <div key={post.id} className={styles.card}>
+            <div className={styles.header}>
+              <FaBookmark color="gray" />
+              <h4 className={styles.companyName}>{post.companyName}</h4>
+            </div>
+
+            <div className={styles.details}>
+              <h3 className={styles.positionTitle}>
+                {post.positionTitle.length > 30
+                  ? `${post.positionTitle.substring(0, 30)}...`
+                  : post.positionTitle}
+              </h3>
+              <div className={styles.footer}>
+                <span
+                  className={
+                    dDay === '마감' ? styles.deadline : styles.recruiting
+                  }
+                >
+                  {dDay}
+                </span>
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default Bookmark;

src/components/InternCard.tsx

@@ -50,6 +50,7 @@ const InternCard = ({ post, onLoginRequired }: InternCardProps) => {
     const diffTime = utcEndDate - utcToday;
     const diffDays = diffTime / (1000 * 60 * 60 * 24);
 
+    if (post.employmentEndDate === null) return '상시채용';
     if (diffDays < 0) return '마감';
     if (diffDays === 0) return 'D-day';
     return `D-${diffDays}`;

src/components/MyPage.tsx

@@ -0,0 +1,58 @@
+import { useState } from 'react';
+import styles from '../MyPage.module.css';
+import Bookmark from './Bookmark';
+
+const MyPage = () => {
+  const [activeTab, setActiveTab] = useState('bookmarks');
+
+  return (
+    <div className={styles.container}>
+      <h1 className={styles.title}>마이페이지</h1>
+      <div className={styles.menuHeader}>
+        <div className={styles.menu}>
+          <button
+            type="button"
+            className={activeTab === 'bookmarks' ? styles.active : ''}
+            onClick={() => setActiveTab('bookmarks')}
+          >
+            관심공고
+          </button>
+          <button
+            type="button"
+            className={activeTab === 'myinfo' ? styles.active : ''}
+            onClick={() => setActiveTab('myinfo')}
+          >
+            내 정보
+          </button>
+        </div>
+        {activeTab === 'myinfo' && (
+          <button type="button" className={styles.createProfileButton}>
+            내 프로필 생성
+          </button>
+        )}
+      </div>
+      <div className={styles.content}>
+        {activeTab === 'bookmarks' ? (
+          // 북마크 랜더링
+          <Bookmark />
+        ) : (
+          // 'myinfo' 페이지
+          // api로 프로필이 있는지 확인해야 함
+          <div className={styles.profilePromptContainer}>
+            <h2 className={styles.promptTitle}>
+              아직 프로필이 등록되지 않았어요!
+            </h2>
+            <p className={styles.promptSubtitle}>
+              기업에 소개할 나의 정보를 작성해서 나를 소개해보세요.
+            </p>
+            <button type="button" className={styles.promptButton}>
+              지금 바로 프로필 작성하기
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default MyPage;

src/components/Topbar.tsx

@@ -22,7 +22,7 @@ const Topbar = () => {
       <div className="topbar-auth">
         {user ? (
           <>
-            <span>{user.name}님</span>
+            <Link to={'/mypage'}>마이페이지</Link>
             <button onClick={handleLogout} className="btn">
               로그아웃
             </button>