Chore: 누락된 새가족훈련 및 모바일최적화 진행

apps/client/src/components/discipleship/bannerSection.tsx

@@ -7,9 +7,15 @@ const SLIDES = [
     shortTitle: "새가족훈련",
     desc: ['"처음 오셨나요?', '함께 걸어갈 믿음의 첫걸음을 안내해드립니다."'],
     image: "/images/discipleship/welcome-banner.jpg",
-    url: "/discipleship",
+    url: "/discipleship/newFamilly",
     icon: (
-      <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="h-8 w-8"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
         <path
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -26,7 +32,13 @@ const SLIDES = [
     image: "/images/home/homeworship.png",
     url: "/discipleship/homeworship",
     icon: (
-      <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="h-8 w-8"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
         <path
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -43,7 +55,13 @@ const SLIDES = [
     image: "/images/discipleship/bibleBanner.jpg",
     url: "/discipleship/faith/qt",
     icon: (
-      <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="h-8 w-8"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
         <path
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -60,7 +78,13 @@ const SLIDES = [
     image: "/images/discipleship/discipleship.png",
     url: "/discipleship/training/newlyweds",
     icon: (
-      <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="h-8 w-8"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
         <path
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -93,7 +117,11 @@ const DiscipleshipBannerSection = () => {
                 current === i ? "opacity-100" : "opacity-0"
               }`}
             >
-              <img src={slide.image} alt={slide.title} className="h-full w-full object-cover brightness-50" />
+              <img
+                src={slide.image}
+                alt={slide.title}
+                className="h-full w-full object-cover brightness-50"
+              />
               <div className="absolute inset-0 flex flex-col justify-center gap-2 pl-5 sm:pl-8 md:gap-3 md:pl-12 lg:pl-16">
                 <p className="pb-2 text-xl font-bold text-white sm:pb-3 sm:text-2xl md:text-4xl lg:text-5xl">
                   {slide.title}
@@ -120,7 +148,9 @@ const DiscipleshipBannerSection = () => {
               key={i}
               onClick={() => setCurrent(i)}
               className={`h-2 rounded-full transition-all sm:h-2.5 md:h-3 ${
-                current === i ? "w-6 bg-white sm:w-8 md:w-10" : "w-2 bg-white/50 hover:bg-white/75 sm:w-2.5 md:w-3"
+                current === i
+                  ? "w-6 bg-white sm:w-8 md:w-10"
+                  : "w-2 bg-white/50 hover:bg-white/75 sm:w-2.5 md:w-3"
               }`}
             />
           ))}
@@ -142,7 +172,9 @@ const DiscipleshipBannerSection = () => {
               <div className="flex h-12 w-12 items-center justify-center rounded-full bg-gray-100 text-gray-700 transition-all group-hover:bg-[#001F54] group-hover:text-white sm:h-20 sm:w-20">
                 <div className="scale-75 sm:scale-100">{slide.icon}</div>
               </div>
-              <p className="text-center text-xs font-medium text-gray-900 sm:text-base">{slide.shortTitle}</p>
+              <p className="text-center text-xs font-medium text-gray-900 sm:text-base">
+                {slide.shortTitle}
+              </p>
             </button>
           ))}
         </div>

apps/client/src/components/discipleship/faith/panorama/introduce.tsx

@@ -1,43 +1,46 @@
 const DiscipleshipFaithPanoramaIntroduce = () => {
   return (
     <div className="mx-auto max-w-4xl px-4 sm:px-6 md:px-8">
-      <div className="flex flex-col gap-6 rounded-lg bg-white p-6 shadow-sm sm:p-8">
-        <h2 className="text-2xl font-bold text-[#001F54] sm:text-3xl">성경파노라마</h2>
+      <div className="flex flex-col gap-4 rounded-lg bg-white p-4 shadow-sm sm:gap-6 sm:p-6 md:p-8">
+        <h2 className="break-keep text-xl font-bold text-[#001F54] sm:text-2xl md:text-3xl">
+          성경파노라마
+        </h2>
 
-        <div className="flex flex-col gap-4 break-keep text-gray-700">
+        <div className="flex flex-col gap-3 break-keep text-sm text-gray-700 sm:text-base">
           <div>
-            <h3 className="mb-2 font-semibold text-gray-900">교육개요</h3>
+            <h3 className="mb-1.5 text-sm font-semibold text-gray-900 sm:mb-2 sm:text-base">교육개요</h3>
             <p className="leading-relaxed">
-              구약과 신약의 주요사건을 바탕으로 지리적 배경과 함께 연대순으로 살펴가며 성경을 한눈으로 조망합니다.
+              구약과 신약의 주요사건을 바탕으로 지리적 배경과 함께 연대순으로 살펴가며 성경을 한눈으로
+              조망합니다.
             </p>
           </div>
         </div>
 
-        <div className="mt-4 border-t border-gray-200 pt-6">
-          <div className="grid gap-3 text-sm sm:text-base">
-            <div className="flex flex-col gap-1 sm:flex-row">
-              <span className="w-24 font-semibold text-gray-900 sm:w-28">교육대상</span>
-              <div className="flex flex-col gap-1 text-gray-700">
+        <div className="border-t border-gray-200 pt-3 sm:pt-4 md:mt-2 md:pt-6">
+          <div className="grid gap-2 text-xs sm:gap-3 sm:text-sm md:text-base">
+            <div className="flex flex-col gap-1">
+              <span className="font-semibold text-gray-900">교육대상</span>
+              <div className="flex flex-col gap-0.5 break-keep text-gray-700 sm:gap-1">
                 <span>구약의 파노라마: 명문교회 성도</span>
                 <span>신약의 파노라마: 구약의 파노라마 수료자</span>
               </div>
             </div>
-            <div className="flex flex-col gap-1 sm:flex-row">
-              <span className="w-24 font-semibold text-gray-900 sm:w-28">교육기간</span>
-              <div className="flex flex-col gap-1 text-gray-700">
+            <div className="flex flex-col gap-1">
+              <span className="font-semibold text-gray-900">교육기간</span>
+              <div className="flex flex-col gap-0.5 break-keep text-gray-700 sm:gap-1">
                 <span>4주 과정</span>
-                <span className="text-sm text-gray-500">
+                <span className="text-xs text-gray-500 sm:text-sm">
                   *강의는 상황에 따라 개설되오니 교회소식을 참고해주시길 바랍니다.
                 </span>
               </div>
             </div>
-            <div className="flex flex-col gap-1 sm:flex-row">
-              <span className="w-24 font-semibold text-gray-900 sm:w-28">교육시간</span>
-              <span className="text-gray-700">평일 오전반, 평일 저녁반</span>
+            <div className="flex flex-col gap-1">
+              <span className="font-semibold text-gray-900">교육시간</span>
+              <span className="break-keep text-gray-700">평일 오전반, 평일 저녁반</span>
             </div>
-            <div className="flex flex-col gap-1 sm:flex-row">
-              <span className="w-24 font-semibold text-gray-900 sm:w-28">교육장소</span>
-              <span className="text-gray-700">독산동 비전채플</span>
+            <div className="flex flex-col gap-1">
+              <span className="font-semibold text-gray-900">교육장소</span>
+              <span className="break-keep text-gray-700">독산동 비전채플</span>
             </div>
           </div>
         </div>

apps/client/src/components/discipleship/faith/qt/introduce.tsx

@@ -1,10 +1,12 @@
 const DiscipleshipFaithQtIntroduce = () => {
   return (
     <div className="mx-auto max-w-4xl px-4 sm:px-6 md:px-8">
-      <div className="flex flex-col gap-6 rounded-lg bg-white p-6 shadow-sm sm:p-8">
-        <h2 className="text-2xl font-bold text-[#001F54] sm:text-3xl">큐티 세미나</h2>
+      <div className="flex flex-col gap-4 rounded-lg bg-white p-4 shadow-sm sm:gap-6 sm:p-6 md:p-8">
+        <h2 className="break-keep text-xl font-bold text-[#001F54] sm:text-2xl md:text-3xl">
+          큐티 세미나
+        </h2>
 
-        <div className="flex flex-col gap-4 break-keep text-gray-700">
+        <div className="flex flex-col gap-2 break-keep text-sm text-gray-700 sm:gap-3 sm:text-base">
           <p className="leading-relaxed">
             큐티 세미나는 '말씀을 통한 개인경건의 시간'으로 묵상을 통해서 주님과 교제하는 훈련입니다.
           </p>
@@ -15,28 +17,28 @@ const DiscipleshipFaithQtIntroduce = () => {
           </p>
 
           <p className="leading-relaxed">
-            성경의 줄애굽과 광야의 성막에서 지성소를 지나 가나안 땅으로 들어가는 성도의 삶을 나타냅니다. 또한 그리스도의
-            십자가와 부활의 영광 안에서 성령의 내주 하나됨을 추구합니다.
+            성경의 줄애굽과 광야의 성막에서 지성소를 지나 가나안 땅으로 들어가는 성도의 삶을 나타냅니다. 또한
+            그리스도의 십자가와 부활의 영광 안에서 성령의 내주 하나됨을 추구합니다.
           </p>
         </div>
 
-        <div className="mt-4 border-t border-gray-200 pt-6">
-          <div className="grid gap-3 text-sm sm:text-base">
+        <div className="border-t border-gray-200 pt-3 sm:pt-4 md:mt-2 md:pt-6">
+          <div className="grid gap-2 text-xs sm:gap-3 sm:text-sm md:text-base">
             <div className="flex">
-              <span className="w-24 font-semibold text-gray-900 sm:w-28">교육대상</span>
-              <span className="text-gray-700">명문교회 성도 누구나</span>
+              <span className="w-20 shrink-0 font-semibold text-gray-900 sm:w-24 md:w-28">교육대상</span>
+              <span className="break-keep text-gray-700">명문교회 성도 누구나</span>
             </div>
             <div className="flex">
-              <span className="w-24 font-semibold text-gray-900 sm:w-28">교육과정</span>
-              <span className="text-gray-700">4주 과정(이론강의+실전조별모임)</span>
+              <span className="w-20 shrink-0 font-semibold text-gray-900 sm:w-24 md:w-28">교육과정</span>
+              <span className="break-keep text-gray-700">4주 과정(이론강의+실전조별모임)</span>
             </div>
             <div className="flex">
-              <span className="w-24 font-semibold text-gray-900 sm:w-28">교육시간</span>
-              <span className="text-gray-700">목요일 오후7시 30분, 토요일 오후 1시 30분</span>
+              <span className="w-20 shrink-0 font-semibold text-gray-900 sm:w-24 md:w-28">교육시간</span>
+              <span className="break-keep text-gray-700">목요일 오후7시 30분, 토요일 오후 1시 30분</span>
             </div>
             <div className="flex">
-              <span className="w-24 font-semibold text-gray-900 sm:w-28">교육장소</span>
-              <span className="text-gray-700">독산동 비전채플 3층</span>
+              <span className="w-20 shrink-0 font-semibold text-gray-900 sm:w-24 md:w-28">교육장소</span>
+              <span className="break-keep text-gray-700">독산동 비전채플 3층</span>
             </div>
           </div>
         </div>

apps/client/src/components/discipleship/faith/readingBible/introduce.tsx

@@ -1,14 +1,15 @@
 const DiscipleshipFaithReadingBibleIntroduce = () => {
   return (
     <div className="mx-auto max-w-4xl px-4 sm:px-6 md:px-8">
-      <div className="flex flex-col gap-6 rounded-lg bg-white p-6 shadow-sm sm:p-8">
-        <h2 className="text-2xl font-bold text-[#001F54] sm:text-3xl">성경통독</h2>
+      <div className="flex flex-col gap-4 rounded-lg bg-white p-4 shadow-sm sm:gap-6 sm:p-6 md:p-8">
+        <h2 className="break-keep text-xl font-bold text-[#001F54] sm:text-2xl md:text-3xl">성경통독</h2>
 
-        <div className="flex flex-col gap-4 break-keep text-gray-700">
+        <div className="flex flex-col gap-2 break-keep text-sm text-gray-700 sm:gap-3 sm:text-base">
           <p className="leading-relaxed">하나님의 말씀은 우리의 삶을 비추는 등불입니다.</p>
 
           <p className="leading-relaxed">
-            명문교회 성경통독은 말씀을 꾸준히 읽고 묵상함으로써, 하나님과의 친밀한 교제를 풍요롭게 시작합니다.
+            명문교회 성경통독은 말씀을 꾸준히 읽고 묵상함으로써, 하나님과의 친밀한 교제를 풍요롭게
+            시작합니다.
           </p>
 
           <p className="leading-relaxed">

apps/client/src/components/discipleship/homeworship/floatingButton.tsx

@@ -5,12 +5,12 @@ const HomeworshipFloatingButton = ({ onClick }: IHomeworshipFloatingButtonProps)
   return (
     <button
       onClick={onClick}
-      className="fixed bottom-8 right-8 z-40 flex h-14 w-14 cursor-pointer items-center justify-center rounded-full bg-blue-950 text-white shadow-lg transition-all hover:scale-110 hover:bg-[#2d4a6f]"
+      className="fixed bottom-4 right-4 z-40 flex h-12 w-12 cursor-pointer items-center justify-center rounded-full bg-blue-950 text-white shadow-lg transition-all hover:scale-110 hover:bg-[#2d4a6f] sm:bottom-6 sm:right-6 sm:h-14 sm:w-14 md:bottom-8 md:right-8"
       aria-label="예배 인증하기"
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        className="h-6 w-6"
+        className="h-5 w-5 sm:h-6 sm:w-6"
         fill="none"
         viewBox="0 0 24 24"
         stroke="currentColor"

apps/client/src/components/discipleship/homeworship/header.tsx

@@ -4,24 +4,26 @@ interface IHomeworshipHeaderSectionProps {
 
 const HomeworshipHeaderSection = ({ onClick }: IHomeworshipHeaderSectionProps) => {
   return (
-    <div className="flex flex-col gap-6 px-5 sm:px-8 md:px-12 lg:px-16">
-      <div className="flex items-center justify-between">
-        <h2 className="text-2xl font-bold text-[#111111] sm:text-3xl md:text-4xl">맛있는 가정예배</h2>
+    <div className="flex flex-col gap-4 px-4 sm:gap-6 sm:px-6 md:px-12 lg:px-16">
+      <div className="flex items-center justify-between gap-2 sm:gap-4">
+        <h2 className="break-keep text-xl font-bold text-[#111111] sm:text-2xl md:text-3xl lg:text-4xl">
+          맛있는 가정예배
+        </h2>
         <button
           onClick={onClick}
-          className="rounded-full bg-[#1e3a5f] px-6 py-2.5 text-sm font-medium text-white transition-colors hover:bg-[#2d4a6f] sm:px-8 sm:py-3 sm:text-base"
+          className="shrink-0 rounded-full bg-[#1e3a5f] px-5 py-2 text-xs font-medium text-white transition-colors hover:bg-[#2d4a6f] sm:px-6 sm:py-2.5 sm:text-sm md:px-8 md:py-3 md:text-base"
         >
           예배 인증하기
         </button>
       </div>
 
-      <div className="flex flex-col gap-3">
-        <p className="text-base font-medium text-gray-700 sm:text-lg">예배의 갈등, 나눔의 기쁨을 함께해 주세요!</p>
-        <p className="break-keep text-sm leading-relaxed text-blue-950 sm:text-base">
-          가정예배 후, 그 은혜로운 순간을 사진과 함께 나누어 주세요.
-          <br />
-          맛있는 식탁, 단란한 예배의 모습, 은혜로운 간증 등 자유롭게 올려주시면 다른 성도들에게도 큰 은혜와 도전이
-          됩니다.
+      <div className="flex flex-col gap-2 sm:gap-3">
+        <p className="break-keep text-sm font-medium text-gray-700 sm:text-base md:text-lg">
+          예배의 갈등, 나눔의 기쁨을 함께해 주세요!
+        </p>
+        <p className="break-keep text-xs leading-relaxed text-blue-950 sm:text-sm md:text-base">
+          가정예배 후, 그 은혜로운 순간을 사진과 함께 나누어 주세요. 맛있는 식탁, 단란한 예배의 모습, 은혜로운
+          간증 등 자유롭게 올려주시면 다른 성도들에게도 큰 은혜와 도전이 됩니다.
         </p>
       </div>
     </div>

apps/client/src/components/discipleship/homeworship/list.tsx

@@ -11,7 +11,7 @@ const HomeworshipListSection = ({ data }: IHomeworshipListSectionProps) => {
   const { push } = useRouter();
 
   return (
-    <div className="flex flex-col gap-4 px-5 sm:px-8 md:px-12 lg:px-16">
+    <div className="flex flex-col gap-3 px-4 sm:gap-4 sm:px-6 md:px-12 lg:px-16">
       {data?.homeworships.map((worship: IHomeWorship) => {
         return (
           <HomeworshipListItem

apps/client/src/components/discipleship/homeworship/listItem.tsx

@@ -13,30 +13,30 @@ const HomeworshipListItem = ({ item, onClick }: IHomeworshipListItemProps) => {
   return (
     <div
       onClick={onClick}
-      className="flex flex-col gap-4 rounded-lg border border-gray-200 bg-white p-4 shadow-sm transition-shadow hover:shadow-md"
+      className="flex cursor-pointer flex-col gap-3 rounded-lg border border-gray-200 bg-white p-3 shadow-sm transition-shadow hover:shadow-md sm:gap-4 sm:p-4"
     >
       {/* 날짜 및 작성자 */}
-      <div className="flex items-center justify-between text-sm text-gray-500">
+      <div className="flex items-center justify-between text-xs text-gray-500 sm:text-sm">
         <span>{date}</span>
         <span className="text-blue-900">{item.userName}</span>
       </div>
 
       {/* 썸네일 및 제목 */}
-      <div className="flex gap-4">
+      <div className="flex gap-3 sm:gap-4">
         {imageUrl && (
-          <div className="h-20 w-20 flex-shrink-0 overflow-hidden rounded bg-gray-100 sm:h-24 sm:w-24">
+          <div className="h-16 w-16 flex-shrink-0 overflow-hidden rounded bg-gray-100 sm:h-20 sm:w-20 md:h-24 md:w-24">
             <img src={imageUrl} alt={item.title || "가정예배 이미지"} className="h-full w-full object-cover" />
           </div>
         )}
         <div className="flex flex-1 flex-col justify-center">
-          <h3 className="line-clamp-2 break-keep text-base font-medium text-gray-800 sm:text-lg">
+          <h3 className="line-clamp-2 break-keep text-sm font-medium text-gray-800 sm:text-base md:text-lg">
             {item.title || "예배 갤러리_맞있는 가정예배 인증해주셔서 감사합니다"}
           </h3>
         </div>
       </div>
 
       {/* 자세히 보기 버튼 */}
-      <button className="w-full rounded border border-gray-300 bg-white py-2.5 text-sm font-medium text-gray-700 transition-colors hover:bg-[#2d4a6f] hover:text-white">
+      <button className="w-full rounded border border-gray-300 bg-white py-2 text-xs font-medium text-gray-700 transition-colors hover:bg-[#2d4a6f] hover:text-white sm:py-2.5 sm:text-sm">
         자세히 보기
       </button>
     </div>