Develop

.claude/settings.local.json

@@ -0,0 +1,9 @@
+{
+  "permissions": {
+    "allow": [
+      "Read(/D:\\project\\kkijuk\\frontend\\src\\pages/**)"
+    ],
+    "deny": [],
+    "ask": []
+  }
+}

package.json

@@ -15,6 +15,7 @@
 		"axios": "^1.7.7",
 		"browserify-zlib": "^0.2.0",
 		"date-fns": "^4.1.0",
+		"driver.js": "^1.3.6",
 		"html2canvas": "^1.4.1",
 		"https-browserify": "^1.0.0",
 		"jspdf": "^2.5.2",
@@ -25,7 +26,7 @@
 		"react-apexcharts": "^1.4.1",
 		"react-calendar": "^5.0.0",
 		"react-datetime-picker": "^6.0.1",
-		"react-day-picker": "^9.8.1",
+		"react-day-picker": "^9.9.0",
 		"react-dom": "^18.3.1",
 		"react-ga4": "^2.1.0",
 		"react-hook-form": "^7.52.2",

src/App.js

@@ -1,7 +1,9 @@
+import "driver.js/dist/driver.css"; 
 import React from 'react';
 import styled from 'styled-components';
 import AppRoutes from '@routes/AppRoutes';
 import { BrowserRouter } from 'react-router-dom';
+import { CoachmarkGlobalStyle } from '@/coachmark/coachmarkGlobalStyle';
 
 const AppContainer = styled.div`
 	display: flex;
@@ -12,6 +14,7 @@ const AppContainer = styled.div`
 export default function App() {
 	return (
 		<AppContainer>
+			<CoachmarkGlobalStyle />
 			<AppRoutes />
 		</AppContainer>
 	);

src/Axios.js

@@ -103,8 +103,16 @@ export const setupApiInterceptors = (navigate) => {
 			}
 			// 404 → numerror 페이지로 이동
 			else if (error.response?.status === 404) {
-				navigate('/numerror'); // or use ROUTES.NUM_ERROR
-			}
+  const url = error.config?.url || '';
+
+  // 대시보드 API는 404여도 리다이렉트하지 않음
+  if (url.includes('/career/detail/dashboard')) {
+    return Promise.reject(error); // 호출한 쪽에서 try/catch로 처리
+  }
+
+  navigate('/numerror');
+}
+
 
 			// 그 외 에러는 모두 /error 페이지로 이동
 			else if (error.response?.status >= 400) {

src/api/Home/getRecentCareerDetails.js

@@ -1,6 +1,14 @@
 import api from '@/Axios';
 
 export const getRecentCareerDetails = async () => {
-  const response = await api.get('/career/detail/dashboard');
-  return response.data.data;
+  try {
+    const response = await api.get('/career/detail/dashboard');
+    return response.data?.data ?? [];
+  } catch (error) {
+    if (error.response && error.response.status === 404) {
+
+      return [];
+    }
+    throw error; 
+  }
 };

src/api/MycareerSearch/getMostUsedTags.js

@@ -0,0 +1,25 @@
+import api from "@/Axios";
+
+// [사용량 높은 순으로 태그 제공]
+const getMostUsedTags = async () => {
+	try {
+		const response = await api.get(`/career/find/taglist/count`);
+		console.log('Sucess-getMostUsedTags: ', response);
+		return response.data.data; // 태그 배열 반환
+	} catch (error) {
+		console.error('Error-getMostUsedTags: ', error);
+		if (error.response) {
+			//서버 응답이 있는 경우
+			console.error('Server responded with status code: ', error.response.status);
+			console.error('Server responded with:', error.response.data);
+		} else if (error.request) {
+			//요청이 보내졌지만 응답을 받지 못한 경우
+			console.error('No response received: ', error.request);
+		} else {
+			//요청 설정 중에 오류가 발생한 경우
+			console.error('Error setting up request: ', error.message);
+		}
+	}
+};
+
+export default getMostUsedTags;

src/coachmark/coachmarkGlobalStyle.js

@@ -0,0 +1,101 @@
+// src/coachmarks/CoachmarkGlobalStyle.js
+import { createGlobalStyle } from "styled-components";
+import { Color } from "@/constants/color";
+
+export const CoachmarkGlobalStyle = createGlobalStyle`
+  /* 팝오버 박스 */
+  .driver-popover.coachmark-popover {
+    display: flex;
+    flex-direction: column;
+    background: ${Color.white};
+    color: ${Color.gray01};
+    border-radius: 10px;
+    padding: 20px 24px;
+    box-shadow: 0 8px 24px rgba(0,0,0,0.16);
+  }
+
+  /* 화살표 */
+  .driver-popover.coachmark-popover .driver-popover-arrow {
+    background: ${Color.gray02};
+    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
+  }
+
+  /* 제목 / 설명 */
+  .driver-popover.coachmark-popover .driver-popover-title {
+    font-size: 18px;
+    font-family: 'Semibold';
+    color: ${Color.gray01};
+    margin: 0 0 8px 0;
+  }
+  .driver-popover.coachmark-popover .driver-popover-description {
+    font-size: 14px;
+    font-family: 'Regular';
+    color: ${Color.gray01};
+    line-height: 1.5;
+    margin: 0 0 12px 0;
+  }
+
+  /* 하단 버튼 영역 */
+  .driver-popover.coachmark-popover .driver-popover-footer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+    .driver-popover.coachmark-popover .driver-popover-progress-text {
+        display: none;
+    }
+    .driver-popover.coachmark-popover .driver-popover-navigation-btns {
+        display: flex;
+        justify-content: center;
+        gap: 12px;
+    }
+
+  .driver-popover.coachmark-popover .driver-popover-prev-btn, 
+  .driver-popover.coachmark-popover .driver-popover-next-btn {
+    width: 100px;
+    height: 30px;
+    border-radius: 10px;
+    padding: 8px 18px;
+    font-size: 14px;
+    font-family: 'Medium';
+    cursor: pointer;
+    border: 1px solid ${Color.gray02};
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 9px;
+    text-shadow: none;
+    text-align: center;
+  }
+
+  /* prev 전용 */
+  .driver-popover.coachmark-popover .driver-popover-prev-btn {
+    background: ${Color.gray03};
+    color: ${Color.white};
+    border: none;
+  }
+
+  /* next 전용 */
+  .driver-popover.coachmark-popover .driver-popover-next-btn {
+    background: ${Color.white};
+    color: ${Color.black};
+    border: 1px solid ${Color.gray03};
+  }
+
+  /* 아이콘 + 텍스트 정렬 */
+.driver-popover.coachmark-popover .with-icon {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    line-height: 1;
+    }
+
+  /* 필요 시: driver 활성화/오버레이/하이라이트 스타일 */
+  /* body.driver-active { } */
+  /* .driver-overlay { background: rgba(0,0,0,.6) !important; } */
+  /* .driver-active-element { outline: 2px solid ${Color.main01}; } */
+
+  /* onPopoverRender에서 붙일 때 사용 가능한 유틸 */
+  .hidden { display: none !important; }
+`;

src/coachmark/config.js

@@ -0,0 +1,36 @@
+import "driver.js/dist/driver.css";
+
+export const COACHMARK_POPOVER_CLASS = "coachmark-popover";
+
+const LEFT_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="5" height="8" viewBox="0 0 5 8" fill="#FFFFFF">
+  <path d="M3.99935 7.33301L0.666016 3.99967L3.99935 0.666342" stroke="white" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>`;
+
+const RIGHT_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="#000000">
+  <path d="M6.66667 4.66699L10 8.00033L6.66667 11.3337" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>`;
+
+const defaultCoachmarkConfig = {
+    showProgress: false,
+    overlayOpacity: 0.5,
+    nextBtnText: "다음",
+    prevBtnText: "이전",
+    doneBtnText: "완료",
+    popoverClass: COACHMARK_POPOVER_CLASS,
+
+    onPopoverRender(popover) {
+        // prev
+        if(popover.previousBtn) {
+            popover.previousBtn.innerHTML = 
+            `${LEFT_SVG} <span class="coachmark-btn-label">이전</span>`;
+            popover.previousBtn.classList.add('with-icon', 'is-prev');
+        } 
+        if(popover.nextBtn) {
+            popover.nextBtn.innerHTML = 
+            `<span class="coachmark-btn-label">다음</span> ${RIGHT_SVG}`;
+            popover.nextBtn.classList.add('with-icon', 'is-next');
+        }
+    }
+};
+
+export default defaultCoachmarkConfig;

src/coachmark/homeCoachhmark.js

@@ -0,0 +1,57 @@
+import { driver } from "driver.js";
+import defaultCoachmarkConfig, { COACHMARK_POPOVER_CLASS} from "./config";
+import coachmarkGIF from '@/assets/coachmarkGIF.gif';
+
+const $ = (sel) => () => document.querySelector(sel);
+
+const homeCoachmark = (refs) => {
+    const d = driver({
+        ...defaultCoachmarkConfig,
+        steps: [
+            {
+                element: $('[data-coach="add-activity"]'),
+                popover : {
+                    title: "지금 바로 활동을 추가해보세요!",
+                    description: "이전에 했었거나, 지금 하고 있는 활동에 대한 정보를 손쉽게 기록해요.",
+                    position: "bottom",
+                    showButtons: ['next']
+                }
+            },
+            {
+                element: $('[data-coach="career-timeline"]'),
+                popover: {
+                    title: "타임라인으로 한눈에!",
+                    description: "추가한 활동들은 타임라인 형태로 깔끔하게 볼 수 있어요.",
+                }
+            }, 
+            {
+                element: $('[data-coach="add-career-detail"]'),
+                popover: {
+                    title: "활동기록 꾸준히 적기!",
+                    description: "각 활동에서 무엇을 했고, 어떤 것을 느꼈는지 자세히 기록해보세요.",
+                }
+            },
+            {
+                element: $('[data-coach="noti-at-home"]'),
+                popover: {
+                    title: "공고 마감일 놓치지 않기!",
+                    description: "등록한 공고의 마감일을 알려줘요. 아직 등록한 공고가 없다면 추가해보세요."
+                }
+            }, 
+            {
+                element: null,
+                popover: {
+                    description: `
+                        <img src="${coachmarkGIF}" alt="coachmark guide" style="width:100%; border-radius: 10px; margin-bottom: 12px;" />
+                        막막하기만 했던 취준은 이제 안녕~ 이제부터 끼적과 함께 내 경험&커리어를 차곡차곡 쌓아가요!
+                    `,
+                    showButtons: ['done']
+                }
+            }
+        ]
+    })
+
+    return d;
+}
+
+export default homeCoachmark;