#92 [fix] 메인 하단 UI 수정

* fix: 메인 하단 UI 수정

* refactor: ServiceExplainSection 내 컴퍼넌트 분리

Author: sooh329

src/assets/images/ClickingLike.png

@@ -0,0 +1,37 @@
+import React from 'react'
+
+interface FeatureCardProps {
+  emoji: string
+  title: string
+  description: string
+  isExpanded: boolean
+  onClick: () => void
+}
+
+const FeatureCard: React.FC<FeatureCardProps> = ({
+  emoji,
+  title,
+  description,
+  isExpanded,
+  onClick
+}) => {
+  return (
+    <div 
+      className={`w-full group relative bg-gradient-to-b from-white to-lightBeige rounded-3xl p-6 text-center overflow-hidden transition-all duration-500 shadow-lg flex-1 self-start cursor-pointer ${isExpanded ? 'pb-20 shadow-xl' : ''}`}
+      style={{ boxShadow: '0 10px 25px rgba(226, 95, 71, 0.3)' }}
+      onClick={onClick}
+    >
+      <div className="text-4xl mb-4">{emoji}</div>
+      <h3 className="text-lg sm:text-xl md:text-2xl text-mainColor font-mainFont mb-4">
+        {title}
+      </h3>
+      <div className={`absolute bottom-0 left-0 right-0 bg-mainColor bg-opacity-90 text-white p-4 transition-transform duration-500 ${isExpanded ? 'translate-y-0' : 'translate-y-full'}`}>
+        <p className="text-sm font-gothicFont leading-relaxed">
+          {description}
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export default FeatureCard

src/assets/images/CommentWriting.png

@@ -0,0 +1,30 @@
+import React from 'react'
+
+interface PointCardProps {
+  title: string
+  imageUrl: string
+  description: string
+}
+
+const PointCard: React.FC<PointCardProps> = ({
+  title,
+  imageUrl,
+  description
+}) => {
+  return (
+    <div className="flex flex-col items-start hover:scale-105 duration-300 flex-1">
+      <div className="flex flex-col items-start">
+        <h4 className="text-md font-mainFont text-white text-center mb-2 bg-mainColor rounded-full py-1.5 px-4 inline-block">
+          {title}
+        </h4>
+      </div>
+      <div 
+        className="rounded-2xl w-full md:h-50 h-32 text-white shadow-md bg-cover bg-center bg-no-repeat"
+        style={{ backgroundImage: `url(${imageUrl})` }}
+      />
+      <p className="text-sm text-mainGray font-gothicFont mt-2">{description}</p>
+    </div>
+  )
+}
+
+export default PointCard

src/assets/images/NightSkyDrawing.png

@@ -1,49 +1,79 @@
-import React from 'react'
-
-import ServiceExplainCard from './ServiceExplainCard'
+import React, { useState } from 'react'
+import NightSkyDrawing from '@/assets/images/NightSkyDrawing.png'
+import CommentWriting from '@/assets/images/CommentWriting.png'
+import ClickLike from '@/assets/images/ClickingLike.png'
+import FeatureCard from './FeatureCard'
+import PointCard from './PointCard'
 
 const ServiceExplainSection: React.FC = () => {
+  const [expandedCard, setExpandedCard] = useState<string | null>(null)
   return (
-    <section className="relative w-full max-w-[1920px] mx-auto px-4 md:px-8 lg:px-12">
-      {/* 제목 */}
-      <h2 className="text-xl sm:text-2xl md:text-3xl text-center text-mainColor font-mainFont mt-20 mb-20 relative z-10">
-        달토끼엔 이런 기능들이 있어요
-      </h2>
-
-      {/* 별 배경 이미지 */}
-      <div className="absolute inset-0 w-full h-80% mt-40 z-index-0">
-        <img
-          src="/images/MoonRabbitStars.png"
-          alt="달토끼 별 배경"
-          className="w-full h-full object-cover"
-          loading="lazy"
-        />
+    <section className="relative w-full max-w-[1920px] mx-auto px-4 md:px-8 lg:px-12 py-20 md:my-16">
+      {/* 달토끼 게시판 역할 */}
+      <div className="mb-8">
+        <h2 className="text-2xl md:text-4xl text-right text-mainColor font-mainFont leading-tight">
+          달토끼와 같이 고민을 나눠요
+        </h2>
+        <p className="text-base sm:text-lg md:text-xl text-lightWalnut font-mainFont mt-2 text-right">
+          마음이 답답한데 어디에도 털어놓지 못하고 있다면, 달토끼에게 털어놓아보세요.
+        </p>
       </div>
 
-      {/* 카드 */}
-      <div className="relative">
-        <ServiceExplainCard
+      <div className="flex flex-col md:flex-row gap-8 md:mb-40 mb-20 items-start">
+        <FeatureCard
+          emoji="🌙"
           title="밤하늘"
-          subtitle={`밤하늘은 자유롭게 고민을 나누는 곳이에요.\n여러 고민들을 보고 얘기를 나눌 수 있어요.`}
-          backgroundImage="/shooting-star-2024127-1920-1.png"
+          description="자유롭게 고민을 나누는 곳이에요. 여러 고민들을 보고 얘기를 나눌 수 있어요."
+          isExpanded={expandedCard === 'night-sky'}
+          onClick={() => setExpandedCard(expandedCard === 'night-sky' ? null : 'night-sky')}
         />
-      </div>
-
-      <div className="relative mt-20">
-        <ServiceExplainCard
+        <FeatureCard
+          emoji="⭐"
           title="별자리"
-          subtitle={`별자리는 마음에 닿는 플리를 추천해주는 공간이에요.\n지금 당신에게 어울리는 작은 위로를 찾아보세요.`}
-          backgroundImage="/shooting-star-2024127-1920-1.png"
+          description="마음에 닿는 플리를 추천해주는 공간이에요. 지금 당신에게 어울리는 작은 위로를 찾아보세요."
+          isExpanded={expandedCard === 'constellation'}
+          onClick={() => setExpandedCard(expandedCard === 'constellation' ? null : 'constellation')}
         />
-      </div>
-
-      <div className="relative mt-20 mb-20">
-        <ServiceExplainCard
+        <FeatureCard
+          emoji="💭"
           title="오늘의 질문"
-          subtitle={`오늘의 질문은 매일매일 바뀌는 질문에 답을 하며 스스로에게 말을 걸어보는 시간이에요.\n내 마음을 천천히 들여다보는 작은 계기를 놓치지 마세요.`}
-          backgroundImage="/shooting-star-2024127-1920-1.png"
+          description="매일매일 바뀌는 질문에 답을 하며 스스로에게 말을 걸어보는 시간이에요."
+          isExpanded={expandedCard === 'daily-question'}
+          onClick={() => setExpandedCard(expandedCard === 'daily-question' ? null : 'daily-question')}
         />
       </div>
+
+      {/* 신뢰도 */}
+      <div className="w-full">
+        <div>
+          <div className="text-left mb-8">
+            <h3 className="text-2xl md:text-4xl text-mainColor font-mainFont mb-2">
+              신뢰도를 쌓아 포인트를 얻어요
+            </h3>
+            <p className="text-base sm:text-lg text-lightWalnut font-mainFont">
+              여러 활동을 통해 포인트를 얻고 내 프로필을 꾸며보세요!
+            </p>
+          </div>
+
+           <div className="flex flex-col md:flex-row gap-8 w-full">
+             <PointCard
+               title="밤하늘 그리기"
+               imageUrl={NightSkyDrawing}
+               description="모두와 고민을 공유하기만 해도 포인트를 얻을 수 있어요"
+             />
+             <PointCard
+               title="댓글 달기"
+               imageUrl={CommentWriting}
+               description="다른 사람의 고민에 공감과 위로의 답변을 달아요"
+             />
+             <PointCard
+               title="좋아요 받기"
+               imageUrl={ClickLike}
+               description="내 댓글에 좋아요가 달리면 포인트가 올라요"
+             />
+           </div>
+        </div>
+      </div>
     </section>
   )
 }

src/common/components/FeatureCard.tsx

@@ -3,13 +3,13 @@ import React from 'react'
 const ServiceIntro: React.FC = () => {
   return (
     <section className="w-full max-w-[1920px] mx-auto px-4 md:px-8 lg:px-12">
-      <h2 className="text-xl sm:text-2xl md:text-3xl text-center text-mainColor font-mainFont mt-20 mb-6">
+      <h2 className="text-2xl md:text-4xl text-center text-mainColor font-mainFont mt-12 md:mt-30 mb-6">
         달토끼 서비스 소개
       </h2>
 
       <div
         className="
-          relative w-full mt-20
+          relative w-full mt-8 md:mt-16
           max-h-[720px]
           rounded-[20px] border-[3px] sm:border-[4px] md:border-[5px]
           border-solid border-mainColor
@@ -25,7 +25,7 @@ const ServiceIntro: React.FC = () => {
         "
       >
         {/* 텍스트 */}
-        <p className="font-gothicFont ml-10 leading-relaxed tracking-tight text-mainBlack text-sm sm:text-base md:text-lg lg:text-xl xl:text-3xl lg:text-left max-w-[720px] lg:max-w-[50%] lg:order-1">
+        <p className="font-gothicFont ml-0 xl:ml-10 leading-relaxed tracking-tight text-mainBlack text-sm sm:text-base md:text-lg lg:text-xl xl:text-3xl lg:text-left max-w-[720px] lg:max-w-[50%] lg:order-1">
           <span className="block text-mainColor">
             달토끼는 서로의 마음을 조용히 안아주는 고민 상담 커뮤니티예요.
           </span>