[Fix] 공통 컴포넌트, 레이아웃 수정

src/components/common/Badge.tsx

@@ -13,7 +13,6 @@ interface BadgeProps {
   className?: string; // 추가적인 여백(ml-2) 등을 줄 때 사용
 }
 
-// 💡 5가지 디자인 시안 컬러 매핑
 const badgeVariants = {
   primary: 'bg-brand-lightBlue text-white', // 파란 바탕 + 흰 글씨 (제안, 강의꿀팁)
   secondary: 'bg-gray-100 text-gray-700', // 회색 바탕 + 진회색 글씨 (데이터베이스)
@@ -22,6 +21,12 @@ const badgeVariants = {
   lightYellow: 'bg-yellow-main text-[#CA8A04] border border-[#FEF08A]', // 연노랑 바탕 + 노랑 글씨 (교양필수)
   outlineBlue: 'bg-white border border-brand-lightBlue text-brand-lightBlue', // 흰 바탕 + 파란 테두리 + 파란 글씨 (요청받은 게시글)
   outlineGray: 'bg-white border border-gray-300 text-gray-600', // 흰 바탕 + 회색 테두리
+  lightRed: 'bg-red-100 text-red-100 border text-gray-600',
+  grayOutline: 'bg-gray-200 text-zinc-900 text-xs border border-slate-400 ', // 교양필수
+  blueSolid:
+    'bg-brand-lightBlue text-white text-xs font-light border border-slate-500 font-normal', // 졸업요건
+  lightBlueOutline:
+    'bg-blue-100 text-zinc-900 border text-xs border-brand-lightBlue ', //전공필수
 };
 
 export const Badge = ({

src/components/common/CourseCard.tsx

@@ -1,4 +1,3 @@
-// src/components/common/CourseCard.tsx
 import React from 'react';
 
 interface CourseCardProps {
@@ -9,7 +8,7 @@ interface CourseCardProps {
   leftNode?: React.ReactNode;
   rightNode?: React.ReactNode;
   className?: string;
-  onClick?: () => void; // 💡 1. 여기에 onClick 타입을 추가합니다.
+  onClick?: () => void;
 }
 
 export const CourseCard = ({
@@ -20,10 +19,9 @@ export const CourseCard = ({
   leftNode,
   rightNode,
   className = '',
-  onClick, // 💡 2. props로 onClick을 받습니다.
+  onClick,
 }: CourseCardProps) => {
   return (
-    // 💡 3. 최상위 div에 onClick을 달아주고, 클릭 가능할 땐 마우스 커서를 포인터로 바꿔줍니다.
     <div
       onClick={onClick}
       className={`flex items-start p-4 bg-white rounded-xl border border-gray-200 ${
@@ -37,9 +35,9 @@ export const CourseCard = ({
       <div className="flex flex-col flex-1 gap-1.5">
         <h4 className="font-bold text-gray-900 text-[15px]">{title}</h4>
 
-        {/* 교수, 시간 정보가 있을 때만 렌더링 */}
+        {/* 교수, 시간 정보가 있을 때만 렌더링 (팀원 요청 스타일 반영됨) */}
         {(professor || time) && (
-          <div className="text-xs text-gray-500 leading-tight">
+          <div className="text-neutral-500 text-sm font-light font-['Pretendard'] leading-5 whitespace-nowrap">
             {professor && <p>교수 : {professor}</p>}
             {time && <p>시간 : {time}</p>}
           </div>

src/components/common/Dropdown.tsx

@@ -30,7 +30,7 @@ export const Dropdown = ({
       <button
         type="button"
         onClick={() => setIsOpen(!isOpen)}
-        className="w-full flex items-center justify-between px-4 py-3 bg-white border border-gray-300 rounded-xl text-sm text-gray-900 focus:outline-none focus:border-brand-blue transition-colors"
+        className="w-full flex items-center justify-between px-4 py-3 bg-white border border-gray-300 rounded-xl text-sm text-gray-900 focus:outline-none focus:border-brand-lightBlue transition-colors"
       >
         <span>{selectedOption ? selectedOption.label : placeholder}</span>
         <Icon

src/components/common/FAB.tsx

@@ -20,7 +20,7 @@ export const FAB = ({
     <button
       onClick={onClick}
       className={`
-        absolute bottom-28 right-4 z-40 
+        absolute bottom-28 right-8 z-40 
         flex items-center justify-center gap-1.5
         bg-brand-lightBlue text-white font-bold
 

src/components/common/Input.tsx

@@ -2,6 +2,7 @@ import React, { forwardRef } from 'react';
 import cautionIcon from '@/assets/icons/caution.svg';
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string | React.ReactNode; // 💡 새로 추가된 라벨 타입
   leftNode?: React.ReactNode; // 왼쪽 아이콘 (이메일, 자물쇠 등)
   rightNode?: React.ReactNode; // 오른쪽 아이콘 (눈 모양, 전송 버튼 등)
   isError?: boolean; // 에러 여부 (빨간 테두리)
@@ -13,6 +14,7 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
 export const Input = forwardRef<HTMLInputElement, InputProps>(
   (
     {
+      label, // 💡 추가된 부분
       leftNode,
       rightNode,
       isError = false,
@@ -25,6 +27,13 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
   ) => {
     return (
       <div className="w-full flex flex-col gap-1">
+        {/* 💡 새로 추가된 라벨 영역 */}
+        {label && (
+          <label className="text-sm font-medium text-gray-900 mb-1">
+            {label}
+          </label>
+        )}
+
         {/* 입력창 + 아이콘을 감싸는 컨테이너 */}
         <div className="relative flex items-center w-full">
           {/* 1. 왼쪽 아이콘 영역 */}

src/components/layout/BottomNav.tsx

@@ -5,8 +5,6 @@ export default function BottomNav() {
   const location = useLocation();
   const navigate = useNavigate();
 
-  // 💡 메뉴 데이터 배열 (주소와 아이콘 매핑)
-  // 아이콘은 시안과 가장 유사한 ph(Phosphor) 및 mdi 계열로 임시 세팅했습니다.
   const navItems = [
     { id: 'home', label: '홈', path: '/', icon: 'ph:house-fill' },
     {
@@ -19,7 +17,7 @@ export default function BottomNav() {
       id: 'chat',
       label: '교환채팅방',
       path: '/chat',
-      icon: 'ph:chat-circle-dots-fill',
+      icon: 'ph:chat-circle-dots',
     },
     { id: 'lounge', label: '라운지', path: '/lounge', icon: 'mdi:snowflake' },
     { id: 'my', label: '마이페이지', path: '/my', icon: 'ph:user' },
@@ -41,15 +39,17 @@ export default function BottomNav() {
             onClick={() => navigate(item.path)}
             className="flex flex-col items-center justify-center gap-1 w-16"
           >
-            {/* 아이콘 영역 (활성화 시 파란색 동그라미 배경 + 흰색 아이콘) */}
             <div
-              className={`flex items-center justify-center w-10 h-10 rounded-full transition-colors duration-200 ${
+              className={`relative shrink-0 w-10 h-10 rounded-full transition-colors duration-200 ${
                 isActive
-                  ? 'bg-brand-lightBlue text-white' // 활성화: 파란 원 배경, 흰색 아이콘 (아까 쓰신 색상 변수명)
-                  : 'bg-transparent text-gray-400' // 비활성화: 투명 배경, 회색 아이콘
+                  ? 'bg-brand-lightBlue text-white'
+                  : 'bg-transparent text-gray-400'
               }`}
             >
-              <Icon icon={item.icon} className="text-[24px]" />
+              <Icon
+                icon={item.icon}
+                className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-6 h-6 block"
+              />
             </div>
 
             {/* 텍스트 영역 (활성화 시 파란색 글씨) */}

src/components/layout/Header.tsx

@@ -4,12 +4,21 @@ interface HeaderProps {
   leftNode?: React.ReactNode;
   title?: string | React.ReactNode;
   rightNode?: React.ReactNode;
+  height?: number;
 }
 
-export default function Header({ leftNode, title, rightNode }: HeaderProps) {
+export default function Header({
+  leftNode,
+  title,
+  rightNode,
+  height = 80,
+}: HeaderProps) {
   return (
-    // 💡 높이를 56px(모바일 표준)로 고정하고, z-index를 높여 스크롤 시 위로 올라오게 합니다.
-    <header className="relative flex justify-between items-center w-full h-[60px] px-4 bg-[#FBFBFB] border-b border-gray-200 z-50">
+    // :bulb: 높이를 60px(모바일 표준)로 기본 고정하되, height prop으로 오버라이드 가능. z-index를 높여 스크롤 시 위로 올라오게 합니다.
+    <header
+      style={{ height: `${height}px` }}
+      className="relative flex justify-between items-center w-full px-4 bg-[#FBFBFB] border-b border-gray-200 z-50"
+    >
       {/* 1. 왼쪽 영역 (뒤로가기 버튼 or 메인 로고) */}
       <div className="flex items-center z-10">{leftNode}</div>
 

src/components/layout/RootLayout.tsx

@@ -3,11 +3,9 @@ import { Outlet } from 'react-router-dom';
 export default function RootLayout() {
   return (
     <div className="h-[100dvh] bg-gray-200 flex justify-center font-sans text-gray-900">
-
-      <div className="w-full max-w-[402px] h-full bg-gray-50 shadow-xl relative flex flex-col overflow-hidden">
+      <div className="w-full max-w-[402px] h-full bg-[#FBFBFB] shadow-xl relative flex flex-col overflow-hidden">
         <Outlet />
       </div>
-
     </div>
   );
-}
+}

src/index.css

@@ -81,71 +81,71 @@
 
 /* ── Paperlogy (포인트 제목 폰트) ── */
 @font-face {
-  font-family: 'Paperozi';
+  font-family: 'Paperlogy';
   src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-1Thin.woff2')
     format('woff2');
   font-weight: 100;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'Paperozi';
+  font-family: 'Paperlogy';
   src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-2ExtraLight.woff2')
     format('woff2');
   font-weight: 200;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'Paperozi';
+  font-family: 'Paperlogy';
   src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-3Light.woff2')
     format('woff2');
   font-weight: 300;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'Paperozi';
+  font-family: 'Paperlogy';
   src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2')
     format('woff2');
   font-weight: 400;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'Paperozi';
+  font-family: 'Paperlogy';
   src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2')
     format('woff2');
   font-weight: 500;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'Paperozi';
+  font-family: 'Paperlogy';
   src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2')
     format('woff2');
   font-weight: 600;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'Paperozi';
+  font-family: 'Paperlogy';
   src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2')
     format('woff2');
   font-weight: 700;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'Paperozi';
+  font-family: 'Paperlogy';
   src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2')
     format('woff2');
   font-weight: 800;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'Paperozi';
+  font-family: 'Paperlogy';
   src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-9Black.woff2')
     format('woff2');
   font-weight: 900;