feat: 메인페이지 구현

* feat: 메인 화면 레이아웃 구현

* fix: 텍스트 미세 조정

* feat: 애니메이션 및 배경 추가

* docs: 필요 없는 주석 제거

* refactor: 메인 컴포넌트화

* feat: 활동 기록 불러오기 기능 구현

* fix: 모바일에서 카드 레이아웃 깨지는 현상 수정

* design: 배경 투명도 조절

* feat: 로드 애니메이션 추가

* design: 폰트 미적용 부분 수정

Author: dohy-eon

public/coreback.svg

@@ -0,0 +1,75 @@
+import React from 'react'
+
+interface CoreValueCardProps {
+  index: string
+  title: string
+  mobileSubtitle: string
+  mobileBody: React.ReactNode
+  hoverSubtitle: string
+  hoverBody: React.ReactNode
+  imageSrc: string
+  mobileImageClass: string
+  defaultImageClass: string
+  hoverImageClass: string
+  defaultBgClass?: string
+  hoverBgClass?: string
+  mobileSubtitleClass?: string
+  hoverSubtitleClass?: string
+  titleDefaultClass?: string
+  titleHoverClass?: string
+}
+
+const CoreValueCard: React.FC<CoreValueCardProps> = ({
+  index,
+  title,
+  mobileSubtitle,
+  mobileBody,
+  hoverSubtitle,
+  hoverBody,
+  imageSrc,
+  mobileImageClass,
+  defaultImageClass,
+  hoverImageClass,
+  defaultBgClass = 'md:w-[352px] lg:w-[400px] h-[560px] md:left-0 lg:left-0 top-[63px]',
+  hoverBgClass = 'md:w-[352px] lg:w-[400px] h-[560px] md:left-0 lg:left-0 top-[54px]',
+  mobileSubtitleClass = 'text-base',
+  hoverSubtitleClass = 'text-3xl',
+  titleDefaultClass = 'text-5xl',
+  titleHoverClass = 'text-5xl',
+}) => {
+  return (
+    <div className="mx-auto">
+      <div className="md:hidden w-[340px] sm:w-[360px] rounded-2xl bg-zinc-800 p-6 relative overflow-hidden min-h-[200px]">
+        <div className="flex items-start justify-between gap-4">
+          <div>
+            <div className="text-white text-3xl font-bold font-mono">{index}</div>
+            <div className="mt-3 text-white text-2xl font-semibold">{title}</div>
+            <div className={`mt-2 text-white/80 ${mobileSubtitleClass}`}>{mobileSubtitle}</div>
+          </div>
+          <img src={imageSrc} alt={title} className={mobileImageClass} />
+        </div>
+        <div className="mt-4 text-white text-sm">{mobileBody}</div>
+      </div>
+
+      <div className="hidden md:block group md:w-[352px] lg:w-[400px] h-[685px] relative overflow-hidden">
+        <div className="absolute inset-0 transition-opacity duration-300 ease-out group-hover:opacity-0">
+          <div className={`${defaultBgClass} absolute bg-zinc-800 rounded-2xl`} />
+          <div className={`left-12 top-[543px] absolute text-center text-white font-normal ${titleDefaultClass}`}>{title}</div>
+          <div className="left-12 top-[105px] absolute text-center text-white text-3xl font-bold font-mono">{index}</div>
+          <img src={imageSrc} alt={`${title} illustration`} className={defaultImageClass} />
+        </div>
+
+        <div className="absolute inset-0 opacity-0 transition-opacity duration-300 ease-out group-hover:opacity-100">
+          <div className={`${hoverBgClass} absolute bg-neutral-100 rounded-2xl`} />
+          <div className={`left-12 top-[343px] absolute text-center text-zinc-900 font-semibold ${titleHoverClass}`}>{title}</div>
+          <div className={`left-12 top-[415px] absolute text-center text-black font-normal ${hoverSubtitleClass}`}>{hoverSubtitle}</div>
+          <div className="left-12 top-[98px] absolute text-center text-zinc-900 text-3xl font-bold font-mono">{index}</div>
+          <div className="left-12 top-[505px] absolute text-black text-2xl font-normal">{hoverBody}</div>
+          <img src={imageSrc} alt={`${title} illustration`} className={hoverImageClass} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default CoreValueCard

public/dare.svg

@@ -16,7 +16,7 @@ const ParticlesBackground: React.FC = () => {
       }}
       animate={{ opacity: [0.9, 1, 0.9] }}
       transition={{ duration: 4, repeat: Infinity, ease: 'easeInOut' }}
-      className='absolute w-full h-[700px]'
+      className='absolute inset-0 w-full h-full'
     >
       <SparklesCore
         background='transparent'

public/dasomMain.png

@@ -0,0 +1,54 @@
+import React, { useEffect, useRef, useState } from 'react'
+
+interface RevealProps {
+  children: React.ReactNode
+  /** delay in ms before revealing once intersected */
+  delayMs?: number
+  /** additional classes applied to the wrapper */
+  className?: string
+  /** threshold for IntersectionObserver */
+  threshold?: number
+}
+
+const Reveal: React.FC<RevealProps> = ({ children, delayMs = 0, className = '', threshold = 0.15 }) => {
+  const ref = useRef<HTMLDivElement | null>(null)
+  const [visible, setVisible] = useState(false)
+
+  useEffect(() => {
+    const node = ref.current
+    if (!node) return
+
+    const observer = new IntersectionObserver(
+      entries => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            if (delayMs > 0) {
+              setTimeout(() => setVisible(true), delayMs)
+            } else {
+              setVisible(true)
+            }
+            observer.unobserve(entry.target)
+          }
+        })
+      },
+      { threshold }
+    )
+
+    observer.observe(node)
+    return () => observer.disconnect()
+  }, [delayMs, threshold])
+
+  return (
+    <div
+      ref={ref}
+      className={
+        `${className} transition-all duration-700 ease-out ` +
+        (visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-2')
+      }
+    >
+      {children}
+    </div>
+  )
+}
+
+export default Reveal

public/share.svg

@@ -0,0 +1,80 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { Link } from 'react-router-dom'
+import { NewsItem } from '../../pages/news/Newstype'
+import { NewsService } from '../../pages/news/NewsService'
+import { convertToBase64Url } from '../../utils/imageUtils'
+import Reveal from '../UI/Reveal'
+
+const ActivitiesSection: React.FC = () => {
+  const [news, setNews] = useState<NewsItem[]>([])
+  const fetched = useRef(false)
+
+  useEffect(() => {
+    if (fetched.current) return
+    const load = async () => {
+      try {
+        const list = await NewsService.getNewsList()
+        setNews(list)
+      } catch (e) {
+        console.error('최근 소식 불러오기 실패:', e)
+      }
+    }
+    load()
+    fetched.current = true
+  }, [])
+
+  const latestThree = useMemo(() => {
+    const top3 = news.slice(0, 3)
+    return top3.map(n => ({
+      ...n,
+      imageUrl: convertToBase64Url(n.image),
+    }))
+  }, [news])
+
+  return (
+    <section className="max-w-screen-xl mx-auto px-4 py-16 md:py-24">
+      <Reveal>
+      <div className="text-center">
+        <p className="text-xl md:text-2xl">Activities</p>
+        <h2 className="mt-1 text-3xl md:text-4xl font-pretendardBold">활동 기록</h2>
+        <p className="mt-4 text-base md:text-xl text-white/80 font-pretendardRegular">
+          튜터링, 스터디뿐만 아니라 팀 프로젝트, 솜커톤과 같은 대내 행사를 진행하고 있습니다.
+          <br className="hidden md:block" />
+          이뿐만 아니라 외부 세미나 참여, EXPO 출품, MT, 할로윈 파티 등 다양한 행사 또한 진행하고 있습니다.
+        </p>
+      </div>
+
+      <div className="mt-10 grid grid-cols-1 md:grid-cols-3 gap-6">
+        {latestThree.map(item => (
+          <Link
+            key={item.id}
+            to={`/news/${item.id}`}
+            className="rounded-3xl bg-neutral-100 text-zinc-900 overflow-hidden border border-zinc-900/10 hover:shadow-md transition-shadow"
+          >
+            {item.imageUrl ? (
+              <img src={item.imageUrl} alt={item.title} className="w-full h-36 object-cover" />
+            ) : (
+              <div className="w-full h-36 bg-zinc-200 flex items-center justify-center text-zinc-500 text-sm">이미지 없음</div>
+            )}
+            <div className="p-5">
+              <h3 className="text-xl font-pretendardBold line-clamp-2">{item.title}</h3>
+              <p className="mt-3 text-xs text-zinc-500">{new Date(item.createdAt).toLocaleDateString()}</p>
+            </div>
+          </Link>
+        ))}
+        {latestThree.length === 0 && (
+          <div className="col-span-full text-center text-white/70">최근 소식을 불러오는 중입니다...</div>
+        )}
+      </div>
+
+      <div className="mt-10 flex justify-center">
+        <Link to="/news" className="px-6 py-3 rounded-[30px] bg-mainColor shadow-[2px_6px_11px_0px_rgba(0,0,0,0.25)] font-pretendardSemiBold">
+          더 알아보기
+        </Link>
+      </div>
+      </Reveal>
+    </section>
+  )
+}
+
+export default ActivitiesSection