GC-MapleWind · ark1st · Mar 2, 2026 · Mar 1, 2026 · Mar 1, 2026 · Mar 1, 2026
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
@@ -1,44 +1,33 @@
 ## 📋 작업 내용
-- **캐릭터 저장 카드 이미지 표시 개선**: `object-cover` 방식을 해제하고 원본 이미지 비율에 맞춰 카드의 세로 길이가 자동으로 늘어나 온전한 이미지가 렌더링되게 변경 (하단부 1/24 영역 클리핑)
-- **카드 여백 및 구분선 정리**: 캐릭터와 이름 사이의 가로 구분선과 배경 이미지 하단 어두운 그라데이션 박스 오버레이를 삭제해 깔끔한 UI 구성
-- **카드 너비 및 여백 최적화**: 모바일 뷰 대비 카드가 화면을 가리는 현상을 고쳐 카드 너비를 `max-w-[260px]`로 축소하고, 카드와 하단 공유/저장 버튼 사이의 간격을 대폭 좁혀 한눈에 들어오게 향상
-- **캐릭터 정보 위치 변경**: 강조되는 메인 타이틀(크고 굵은 텍스트)에는 닉네임 대신 캐릭터 본명(`character.name`)을 위치시키고 그 하단에 서버, 닉네임, 직업이 렌더링되도록 스왑
-- **카드 배경 톤앤매너 일치**: 딱딱한 베이지 단색에서 벗어나, 메인 화면의 메인 테마와 동일한 부드러운 코랄-오렌지 그라데이션 적용 (`#FAC486`, `#F2A372`)
-- **버튼 및 그룹핑 부모 레이아웃 조정**: Flexbox(`flex-col`) 컨테이너를 하나로 묶어 '저장하기' 버튼이 세로가 긴 디바이스에서 화면 밑바닥으로 도망가는 현상 제거 및 카드 중앙 정렬 고정
-- **로그인 시 이름 저장 기능 복구**: 체크박스(`saveName`) UI만 있던 것을 실제 LocalStorage와 연동해 이름 입력 상태를 영구 저장하고, 다음 번 팝업 노출 시 "이름 자동 복원 & 체크박스 유지 상태"로 스토리지 핸들링 픽스
-- **로그아웃 플로우 통일성 보완**: 사이드바(햄버거 메뉴) 및 톡 상세의 우측 상단 로그아웃 버튼 클릭 시, 로그인 창이 아닌 메인 루트(`/`)로 바로 라우팅되도록 정정
-- **톡 아이템 시인성 강화**: 톡 내의 유저 네임과 텍스트 본문 두께를 모두 `font-bold` 급으로 가장 진하게 볼드 처리
-- **상세 페이지 탑바(Header) 높이 정렬**: 다른 페이지 탑바와 달리 `detail` 템플릿만 크고 넓었던 패딩 여백 기준(`py-3` -> `py-2`)을 통일 적용
+- **운영팀 한마디 상세 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
-- "캐릭터 이미지 자르지 말고 원본 종횡비 유지해서 세로 늘려줘, 하단만 1/24 단위로 잘라"
-- "저장 카드를 전체적으로 4/5로 줄여줘, 모바일에서 저장 버튼이 안 보여"
-- "배경 베이지 단색 말고 메인 화면 그라데이션 배경으로 변경해"
-- "버튼이랑 카드 사이 갭 줄이고, 버튼이랑 카드랑 묶인 부모를 만들어놔서 해상도가 세로로 매우 길어져도 버튼이 가운데 그룹으로 따라오게 해"
-- "캐릭터 카드 안에 캐릭터 본명, 닉네임 참조하는 애들 서로 위치 바꿔서 강조해 줘"
-- "폰트 볼드 처리해 줘"
-- "로그인 모달창 이름 체크박스 눌러도 저장 안 되던 로직 수정, 체크 풀림 버그 픽스 및 새로고침 후에도 유지되게 해 줘"
-- "상세 페이지 헤더 탑바 사이즈를 메인 화면 꺼랑 맞춰 줘"
-- "로그아웃 하면 원래 있던 /login 플로우 버리고 바로 메인 /경로로 가게 해"
+- "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 변경 전/후 캡처 화면 혹은 컴포넌트 이미지를 첨부해주세요 -->
 
 ## 💬 특이사항
-- 카드가 DOM 자체에서 크기가 자동으로 반응형 조정되도록 `clientHeight`, `margin-bottom` 산술 로직이 도입되어 있습니다.
-- 이미지 파일 관련 Python Pillow 이미지 최적화를 시도하려 했으나 로컬(UV) 환경 문제로 생략되었습니다. `html-to-image` 옵션 배율(`pixelRatio: 3`)을 대폭 높여 화질 저하 문제를 해소했습니다.
+- 임시 디버깅 용도로 기재해 둔 하드코딩 값(김단바, 학번 등) 코드를 정리하고 모두 올바르게 초기화(`""`) 및 삭제하였습니다.
 
 ---
 

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" />
+	<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/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);
 
@@ -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"

diff --git a/dpbr_front/app/src/lib/components/CharacterCard.svelte b/dpbr_front/app/src/lib/components/CharacterCard.svelte
@@ -1,85 +1,85 @@
 <script lang="ts">
-	import type { Character } from "$lib/types";
-	import { handleImageError } from "$lib/utils/image";
+    import type { Character } from "$lib/types";
+    import { handleImageError } from "$lib/utils/image";
 
-	interface Props {
-		character: Character;
-	}
+    interface Props {
+        character: Character;
+    }
 
-	let { character }: Props = $props();
+    let { character }: Props = $props();
 
-	// 서버명 매핑 (world name to english logo filename)
-	const worldLogoMap: Record<string, string> = {
-		오로라: "aurora",
-		레드: "red",
-		이노시스: "enosis",
-		유니온: "union",
-		스카니아: "scania",
-		루나: "luna",
-		제니스: "zenith",
-		크로아: "croa",
-		베라: "bera",
-		엘리시움: "elysium",
-		아케인: "arcane",
-		노바: "nova",
-		// 일반/리부트 아닌 특수 구별용 맵핑 추가
-		리부트: "reboot",
-		리부트2: "reboot2",
-		버닝: "burning",
-		에오스: "eos",
-		헬리오스: "helios",
-		챌린저스: "challengers",
-	};
+    // 서버명 매핑 (world name to english logo filename)
+    const worldLogoMap: Record<string, string> = {
+        오로라: "aurora",
+        레드: "red",
+        이노시스: "enosis",
+        유니온: "union",
+        스카니아: "scania",
+        루나: "luna",
+        제니스: "zenith",
+        크로아: "croa",
+        베라: "bera",
+        엘리시움: "elysium",
+        아케인: "arcane",
+        노바: "nova",
+        // 일반/리부트 아닌 특수 구별용 맵핑 추가
+        리부트: "reboot",
+        리부트2: "reboot2",
+        버닝: "burning",
+        에오스: "eos",
+        헬리오스: "helios",
+        챌린저스: "challengers",
+    };
 
-	function getWorldLogoPath(serverName: string): string {
-		const englishName = worldLogoMap[serverName];
-		if (!englishName) return ""; // 매핑되지 않은 서버는 빈칸 유지 (fallback)
-		return `/images/worlds/${englishName}.png`;
-	}
+    function getWorldLogoPath(serverName: string): string {
+        const englishName = worldLogoMap[serverName];
+        if (!englishName) return ""; // 매핑되지 않은 서버는 빈칸 유지 (fallback)
+        return `/images/worlds/${englishName}.png`;
+    }
 
-	let logoPath = $derived(getWorldLogoPath(character.server));
-	let isWorldLogoLoadFailed = $state(false);
+    let logoPath = $derived(getWorldLogoPath(character.server));
+    let isWorldLogoLoadFailed = $state(false);
 </script>
 
 <a
-	href="/member/{character.id}"
-	class="flex flex-col bg-white rounded-lg px-3 py-2 hover:shadow-md transition-shadow"
+    href="/member/{character.id}"
+    class="flex flex-col bg-white rounded-lg px-3 py-2 hover:shadow-md transition-shadow"
 >
-	<!-- Badge area (World Logo) -->
-	<div class="h-4 flex items-center mb-1">
-		{#if logoPath && !isWorldLogoLoadFailed}
-			<img
-				src={logoPath}
-				alt={character.server}
-				class="h-full object-contain"
-				onerror={() => {
-					isWorldLogoLoadFailed = true;
-				}}
-			/>
-		{:else}
-			<span class="text-[10px] text-text-muted bg-bg-light px-1 rounded"
-				>{character.server}</span
-			>
-		{/if}
-	</div>
+    <!-- Badge area (World Logo) -->
+    <div class="h-4 flex items-center mb-1">
+        {#if logoPath && !isWorldLogoLoadFailed}
+            <img
+                src={logoPath}
+                alt={character.server}
+                class="h-full object-contain"
+                onerror={() => {
+                    isWorldLogoLoadFailed = true;
+                }}
+            />
+        {:else}
+            <span class="text-[10px] text-text-muted bg-bg-light px-1 rounded"
+                >{character.server}</span
+            >
+        {/if}
+    </div>
 
-	<!-- Avatar -->
-	<div class="flex justify-center items-center py-2">
-		<img
-			src={character.avatarUrl}
-			alt={character.name}
-			onerror={handleImageError}
-			class="w-full aspect-square object-contain"
-		/>
-	</div>
+    <!-- Avatar -->
+    <div class="flex justify-center items-center py-2">
+        <img
+            src={character.avatarUrl}
+            alt={character.name}
+            onerror={handleImageError}
+            class="w-full aspect-square object-contain"
+        />
+    </div>
 
-	<!-- Info -->
-	<div class="flex flex-col">
-		<span class="text-sm text-text-primary leading-tight"
-			>{character.name}</span
-		>
-		<span class="text-xs text-primary-dark leading-tight"
-			>{character.nickname}</span
-		>
-	</div>
+    <!-- Info -->
+    <div class="flex flex-col">
+        <span class="text-sm text-text-primary leading-tight"
+            >{character.name}</span
+        >
+        <span class="text-xs text-primary-dark leading-tight"
+            >{character.nickname}</span
+        >
+    </div>
 </a>