GC-MapleWind · ark1st · Mar 2, 2026 · Feb 28, 2026 · Feb 28, 2026 · Feb 28, 2026
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
@@ -1,40 +1,33 @@
 ## 📋 작업 내용
-- **자체 SVG 아이콘 렌더링 적용**: `Lucide` 라이브러리를 부분 제거하고, 자체 에셋(`static/images/icons/`)을 이용해 헤더, 톡 페이지, 로그인 모달 내 아이콘을 커스텀 SVG `<img>` 태그로 전면 교체
-- **결산 내용 및 운영팀 한마디 상세 페이지 레이아웃 보완**: 라벨 텍스트(획득 일자, 직책, 상세 내용)에 고정 너비(`w-[72px]`), 좌측 정렬, 줄바꿈 방지(`whitespace-nowrap`), 축소 방지(`shrink-0`)를 적용하여 텍스트 길이에 따른 UI 찌그러짐 완벽 방지
-- **메생결산 톡 네비게이션(Top Bar) 개선**: 좌측 뒤로 가기 요소와 우측 로그아웃 버튼 존재 여부와 무관하게 "메생결산 톡" 타이틀이 화면 정중앙에 위치하도록 `absolute text-center` 제어 및 배경 분리 
-- **단풍바람 로그인 팝업 및 Input Box 접근성/UI 강화**:
-  - 이름/학번 `InputBox` 포커스 시 브라우저 기본 이중 아웃라인 버그(`focus:outline-none focus:ring-0`) 제거 및 내부 배경색 유지, 테두리만 전환되도록 픽스
-  - 모달 팝업 상단 "단풍바람" 텍스트 타이틀을 `logo-text-white.svg` 이미지로 교체하고 그림자 효과 제거 요소 간격(Gap, Margin) 미세 조정
-  - 이름 저장 커스텀 체크박스(`<label>` 확장) 적용을 통한 클릭 접근성(상호작용) 토글 이슈 해결 및 `check-enable/disable.svg` 상태 동기화
-- **카카오 로그인 기능 임시 제외**: 이번 프로젝트 스코프에서 제외됨에 따라 모달 및 메인 로그인 페이지 내 Kauth 연동 로직과 관련 UI 버튼 전체 주석 처리
+- **운영팀 한마디 상세 UI 동기화**: `team-message` 상세 페이지 레이아웃을 기존 결산 상세(`msg`) 페이지와 완벽히 통일 (흰색 컨테이너 배경 분리, 하단부 각 섹션별 가로 구분선 추가, 패딩 및 여백 수치 일치)
+- **사이드바 푸터 디자인 개편**: 기존 "메생결산 기록" 타이틀 텍스트를 제거하고, 하단에 별 모양 아이콘(`Simbol Logo`)과 전체 기록 기간 텍스트만 병렬 배치하여 심플하게 개선
+- **로그인 팝업 UI 개선**: 이름 입력 폼 내 불필요한 맞춤법 검사(빨간 줄) 및 웹 브라우저 자동완성을 방지하기 위해 단풍바람 `InputBox` 컴포넌트에 `spellcheck="false"`, `autocomplete="off"` 일괄 적용
+- **운영팀 전용 라벨링 필터링**: `member` 캐릭터 상세 페이지에서 캐릭터가 '운영팀'일 경우 기존의 "레벨/서버/직업" 자리가 아닌 **"13기 / 가천대학교 / 운영팀"**으로 강제 표시되도록 분기 처리 개선
+- **메생결산 톡 디자인 개선**: 톡 하단의 전송 버튼 화살표 아이콘을 흰색 투명 버전(`Send, Color=White copy.svg`) 레이아웃으로 교체하여 배경 톤오버 방지 및 시인성 확보
+- **메인 캐릭터 카드 비율 완벽 복구**: 이전 병합 및 구조 변경 과정에서 훼손됐던 원래 캐릭터 서탠딩 이미지 CSS 비율 속성(`h-40 w-3/4 aspect-[5/6] object-cover`)들을 원래 커밋대로 되돌리고, 가장자리가 선명하게 렌더링되도록 `image-rendering: pixelated`만 함께 적용
 
 ## 🎯 관련 이슈
-Closes #(이슈번호를 입력해주세요)
+- 없음
 
 ## 🤖 사용한 Prompt
-- "요청하신 디렉터리에 있던 13개의 SVG 아이콘들을 기존 Lucide 아이콘 대신 각 UI 컴포넌트에 알맞게 교체 배치해라."
-- "msg/[id] 페이지 상세 내용 라벨이 우측 긴 텍스트에 의해 찌그러지지 않도록 flex-shrink-0를 적용하고, w-[72px] 고정 너비 및 텍스트 좌측 정렬, 줄바꿈 방지를 걸어라."
-- "로그인 모달 내 학번 Input Box의 X 버튼을 숨기고, 요소 간 간격을 4px, 8px 등으로 UI 통일성을 지켜 조정하라."
-- "탑바의 '메생결산 톡' 제목이 수평 정중앙에 오도록 absolute 맵핑하고, 우측에 로그인 상태일 때만 렌더링되는 '로그아웃' 버튼을 추가하라."
-- "Input Box 포커스 시 기존 주황색 배경은 유지하되 1px 테두리 두께만 흰색으로 즉각 변화하게 만들고, 이중 링(ring) 아웃라인 발생 버그를 없애라."
-- "이름 저장 체크박스의 아이콘/클릭 영역 접근성을 높이도록 label 래핑 구조를 개선하여 텍스트나 아이콘 부분을 눌러도 상태가 정상 변경되도록 수정하라."
-- "기획 상 이번 구현에서 제외된 카카오 로그인 관련 버튼 UI와 스크립트 함수 로직들을 프론트엔드 코드에서 주석 처리해라."
+- "team-message/[id] 페이지의 UI를 기준이 되는 msg/[id] 페이지의 디자인 요소와 완벽하게 통일하도록 수정해라. 컨테이너 흰배경 나누기, hr 구분선 여백 등"
+- "메인 화면 캐릭터 이미지들의 크기가 작아지고 배치가 어긋나는 문제가 발생했다. 원본 코드 구조 레이아웃으로 완벽히 통일시키고 픽셀화 유지해"
+- "운영팀 한마디를 필터링 해서 '레벨/서버/직업' 자리에 '13기/가천대학교/운영팀'으로 표시되게 해줘."
+- "사이드바 하단 '메생결산 기록' 텍스트 제거하고 심볼 로고 svg랑 날짜 기간 배치해 줘"
+- "로그인 팝업의 이름 입력 칸에 텍스트 입력하면 빨간 줄 쳐지는 거 없앨 수 있어? autocomplete 꺼 줘"
+- "메생결산 톡의 전송 버튼 아이콘 컬러 화이트 사본 스니펫으로 변경해 줘 (`send-icon-white.svg`)"
 
 ## ✅ 체크리스트
-- [x] 로컬에서 테스트 완료
-- [x] 타입 에러 없음 (`npm run check`)
-- [x] Linter 통과
-- [x] 모바일 반응형 확인
-- [ ] 코드 리뷰 요청 완료
+- [x] 로컬에서 개발환경 작동 테스트 완료 (npm run dev)
+- [x] 타입 및 충돌 에러 없음 (`npm run check`, FastAPI 백엔드 린터 통과)
+- [x] UI/UX 렌더링 확인 (Pixelated, Overflow 등)
+- [ ] 코드 리뷰 요청 및 dev 브랜치 병합
 
 ## 📸 스크린샷 (선택)
-<!-- UI 변경 전/후 혹은 구현 완료된 톡 페이지/레이아웃 스크린샷을 첨부해주세요 -->
-
-
+<!-- UI 변경 전/후 캡처 화면 혹은 컴포넌트 이미지를 첨부해주세요 -->
 
 ## 💬 특이사항
-- 카카오 로그인 관련 로직(`handleKakaoLogin`) 및 프론트 버튼 UI는 파일 내부에 주석 형태로 보존해 두었습니다. (필요 시 추후 주석만 해제해 재활용 가능)
-- 모바일 뷰포트에서 `InputBox` 및 버튼 컴포넌트 터치 시 모바일 브라우저의 기본 음영(Highlight)이 겹치지 않게 조치하였습니다.
+- 임시 디버깅 용도로 기재해 둔 하드코딩 값(김단바, 학번 등) 코드를 정리하고 모두 올바르게 초기화(`""`) 및 삭제하였습니다.
 
 ---
 

diff --git a/dpbr_front/app/check_output.txt b/dpbr_front/app/check_output.txt
diff --git a/dpbr_front/app/src/app.html b/dpbr_front/app/src/app.html
@@ -1,16 +1,33 @@
 <!doctype html>
 <html lang="ko">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
-		<link rel="stylesheet" as="style" crossorigin
-			href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css" />
-		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
-		<title>단풍바람</title>
-		%sveltekit.head%
-	</head>
-	<body data-sveltekit-preload-data="hover">
-		<div style="display: contents">%sveltekit.body%</div>
-	</body>
-</html>
+
+<head>
+	<meta charset="utf-8" />
+	<link rel="icon" href="%sveltekit.assets%/images/icons/MSGS_Favicon.ico" />
+	<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
+	<link rel="stylesheet" as="style" crossorigin
+		href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css" />
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
-	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
-	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<title>단풍바람</title>
+
+	<!-- SEO & Metadata -->
+	<meta name="description" content="단풍바람 13기 메생결산 - 당신의 메이플 여정을 기록하세요." />
+	<meta property="og:type" content="website" />
+	<meta property="og:title" content="단풍바람" />
+	<meta property="og:description" content="단풍바람 13기 메생결산 - 당신의 메이플 여정을 기록하세요." />
+	<meta property="og:image" content="%sveltekit.assets%/images/thumbnail.png" />
+	<meta property="og:url" content="https://gc-maplewind.github.io/MSGS_13_F/" />
+
+	<meta name="twitter:card" content="summary_large_image" />
+	<meta name="twitter:title" content="단풍바람" />
+	<meta name="twitter:description" content="단풍바람 13기 메생결산 - 당신의 메이플 여정을 기록하세요." />
+	<meta name="twitter:image" content="%sveltekit.assets%/images/thumbnail.png" />
+
+	%sveltekit.head%
+</head>
+
+<body data-sveltekit-preload-data="hover">
+	<div style="display: contents">%sveltekit.body%</div>
+</body>
+
+</html>
diff --git a/dpbr_front/app/src/lib/api.ts b/dpbr_front/app/src/lib/api.ts
@@ -101,6 +101,20 @@ interface SettlementResponse {
 	acquired_at: string;
 }
 
+interface CharactersPaginationResponse {
+	items: CharacterResponse[];
+	total: number;
+	page: number;
+	limit: number;
+}
+
+interface SettlementsPaginationResponse {
+	items: SettlementResponse[];
+	total: number;
+	page: number;
+	limit: number;
+}
+
 interface CommentResponse {
 	id: number;
 	user_id: number | null;
@@ -185,7 +199,27 @@ async function apiCall<T>(endpoint: string, options?: RequestInit): Promise<T> {
 export async function getCharacters(): Promise<Character[]> {
 	const data = await apiCall<CharacterResponse[]>('/characters');
 
-	return data.map((char) => ({
+	return data.map(mapCharacterResponse);
+}
+
+export async function getCharactersPaginated(
+	page: number = 1,
+	limit: number = 10
+): Promise<{ items: Character[]; total: number; page: number; limit: number }> {
+	const data = await apiCall<CharactersPaginationResponse>(
+		`/characters/pagination?page=${page}&limit=${limit}`
+	);
+
+	return {
+		items: data.items.map(mapCharacterResponse),
+		total: data.total,
+		page: data.page,
+		limit: data.limit
+	};
+}
+
+function mapCharacterResponse(char: CharacterResponse): Character {
+	return {
 		id: char.id.toString(),
 		name: char.name,
 		nickname: char.detail_txt || char.name,
@@ -194,7 +228,18 @@ export async function getCharacters(): Promise<Character[]> {
 		job: char.job,
 		club: '단풍바람',
 		server: char.server
-	}));
+	};
+}
+
+function mapSettlementResponse(settlement: SettlementResponse): SettlementItem {
+	return {
+		id: settlement.id.toString(),
+		characterId: settlement.character_id.toString(),
+		title: settlement.title,
+		description: settlement.description || '',
+		imageUrl: settlement.img_url ? `${getApiBaseUrl()}${settlement.img_url}` : '/default-avatar.png',
+		acquiredAt: settlement.acquired_at
+	};
 }
 
 /**
@@ -228,14 +273,24 @@ export async function getSettlementsByCharacterId(characterId: string): Promise<
 		`/characters/${characterId}/settlements`
 	);
 
-	return data.map((settlement) => ({
-		id: settlement.id.toString(),
-		characterId: settlement.character_id.toString(),
-		title: settlement.title,
-		description: settlement.description || '',
-		imageUrl: settlement.img_url ? `${getApiBaseUrl()}${settlement.img_url}` : '/default-avatar.png',
-		acquiredAt: settlement.acquired_at
-	}));
+	return data.map(mapSettlementResponse);
+}
+
+export async function getSettlementsByCharacterIdPaginated(
+	characterId: string,
+	page: number = 1,
+	limit: number = 10
+): Promise<{ items: SettlementItem[]; total: number; page: number; limit: number }> {
+	const data = await apiCall<SettlementsPaginationResponse>(
+		`/characters/${characterId}/settlements/pagination?page=${page}&limit=${limit}`
+	);
+
+	return {
+		items: data.items.map(mapSettlementResponse),
+		total: data.total,
+		page: data.page,
+		limit: data.limit
+	};
 }
 
 /**

diff --git a/dpbr_front/app/src/lib/components/BottomSheetLogin.svelte b/dpbr_front/app/src/lib/components/BottomSheetLogin.svelte
@@ -23,6 +23,9 @@
     let studentIdInputRef: HTMLDivElement | undefined = $state();
     let dialogEl: HTMLDivElement | undefined = $state();
 
+    // 에러 메시지 상태
+    let errorMessage = $state("");
+
     // 애니메이션을 위한 상태
     let isVisible = $state(false);
 
@@ -32,24 +35,24 @@
             isVisible = true;
         }, 10);
 
-		const savedName = getSavedName();
-		if (savedName) {
-			name = savedName.slice(0, 3);
-			saveName = true;
-		}
+        const savedName = getSavedName();
+        if (savedName) {
+            name = savedName.slice(0, 3);
+            saveName = true;
+        }
 
-		dialogEl?.focus();
-		const handleEscape = (e: KeyboardEvent) => {
-			if (e.key === "Escape") {
-				handleClose();
-			}
-		};
+        dialogEl?.focus();
+        const handleEscape = (e: KeyboardEvent) => {
+            if (e.key === "Escape") {
+                handleClose();
+            }
+        };
 
-		window.addEventListener("keydown", handleEscape);
-		return () => {
-			window.removeEventListener("keydown", handleEscape);
-		};
-	});
+        window.addEventListener("keydown", handleEscape);
+        return () => {
+            window.removeEventListener("keydown", handleEscape);
+        };
+    });
 
     function handleClose(e?: Event) {
         e?.stopPropagation();
@@ -106,7 +109,10 @@
     */
 
     function showToastMessage(message?: string) {
-        toast.show(message || "이름 또는 학번을 확인해 주세요.");
+        errorMessage = message || "이름 또는 학번을 확인해 주세요.";
+        setTimeout(() => {
+            errorMessage = "";
+        }, 3000);
     }
 
     // Focus/Blur 핸들러들
@@ -158,7 +164,7 @@
     tabindex="-1"
 >
     <div
-        class="w-full h-[72%] bg-gradient-to-b from-[#FCDDA5] to-[#F1A470] rounded-t-3xl pt-4 pb-8 px-6 flex flex-col items-center shadow-lg transition-transform duration-300 {isVisible
+        class="w-full shrink-0 h-[72vh] bg-gradient-to-b from-[#FCDDA5] to-[#F1A470] rounded-t-3xl pt-4 pb-8 px-6 flex flex-col items-center shadow-lg transition-transform duration-300 {isVisible
             ? 'translate-y-0'
             : 'translate-y-full'}"
         onclick={(e) => e.stopPropagation()}
@@ -167,7 +173,7 @@
         <div class="w-full flex justify-end">
             <button onclick={handleClose} class="text-white p-2">
                 <img
-                    src="/images/icons/name=Close, Color=White.svg"
+                    src="/images/icons/close-icon-white.svg"
                     alt="닫기"
                     class="w-6 h-6"
                     draggable="false"
@@ -226,14 +232,27 @@
                 </div>
 
                 <!-- 로그인 버튼 -->
-                <Button
-                    label="메생결산 톡 입장"
-                    variant="primary"
-                    buttonState={isLoading ? "disabled" : "default"}
-                    onClick={handleLogin}
-                    type="button"
-                    class="bg-white !text-[#F87C56] hover:bg-white/90 font-medium py-[14px] rounded-lg"
-                />
+                <div class="relative w-full">
+                    {#if errorMessage}
+                        <div
+                            class="absolute bottom-[calc(100%+8px)] left-0 w-full flex justify-center z-[60] pointer-events-none"
+                        >
+                            <span
+                                class="bg-black/60 text-white text-[15px] px-5 py-2.5 rounded-3xl shadow-md font-medium whitespace-nowrap pointer-events-auto"
+                            >
+                                {errorMessage}
+                            </span>
+                        </div>
+                    {/if}
+                    <Button
+                        label="메생결산 톡 입장"
+                        variant="primary"
+                        buttonState={isLoading ? "disabled" : "default"}
+                        onClick={handleLogin}
+                        type="button"
+                        class="bg-white !text-[#F87C56] hover:bg-white/90 font-medium py-[14px] rounded-lg w-full"
+                    />
+                </div>
 
                 <!-- 이름 저장 체크박스 -->
                 <label class="flex items-center gap-2 cursor-pointer mt-2 mb-2">
@@ -248,14 +267,14 @@
                     >
                         {#if saveName}
                             <img
-                                src="/images/icons/name=check-enable, Color=White.svg"
+                                src="/images/icons/check-enable-icon.svg"
                                 alt="저장 활성화"
                                 class="w-full h-full"
                                 draggable="false"
                             />
                         {:else}
                             <img
-                                src="/images/icons/name=check-disable, Color=White.svg"
+                                src="/images/icons/check-disable-icon.svg"
                                 alt="저장 비활성화"
                                 class="w-full h-full"
                                 draggable="false"