모바일 반응형 구현

https://github.com/SNULION-12th/likesaju-frontend-seminar/tree/gyeongseo

GitHub - SNULION-12th/likesaju-frontend-seminar: 2학기 프론트엔드 세미나 12기 공개용 레포

 

멋사주 사이트에 모바일 반응형을 추가한 코드이다.

 

기능은 크게 4가지,

 

메인 페이지의 ShareSection, FAQSection, 그리고 Header 컴포넌트, 좌측 텍스트 섹션에 tailwind media query와 애니메이션 적용하기이다. 

 

---

1. ShareSection

className에서 mobile:~~이 모두 모바일 반응형을 구현하기 위한 코드다. 

  return (
    <SectionLayout
      outerLayerClassName={'mobile:h-fit'}
      innerLayerClassName={'mobile:h-fit mobile:py-20'}
    >
      <div className="w-full h-full flex flex-col gap-[80px]">
        <div className="w-full flex mobile:flex-col justify-between items-center mobile:gap-4">
          <div className="space-y-6 mobile:space-y-2">
            <h3 className="text-left mobile:text-center text-4xl mobile:text-2xl nanum-extra-bold text-neutral-800 dark:text-white">
              AI가 알려주는 사주
            </h3>
            <p className="text-xl mobile:text-sm font-semibold text-neutral-800 dark:text-white">
              오늘의 사주 운세를 확인해보세요.
            </p>
          </div>
          <a href="/saju">
            <Button
              className="w-[250px] h-[50px] mobile:w-[180px] mobile:h-[40px] mobile:text-sm"
              isRounded={true}
            >
              내 사주 보러가기
            </Button>
          </a>
        </div>
        <div className="space-y-10 mobile:space-y-4 mobile:mx-auto">
          <p className="text-xl mobile:text-base text-neutral-800 font-semibold dark:text-white">
            어떤 내용을 확인할 수 있나요?
          </p>
          <div className="grid grid-cols-2 mobile:grid-cols-1 gap-[30px] mobile:w-fit">
            {sajuCardInfo.map((card) => (
              <SajuCard
                key={card.title}

2. FAQSection

 

 

• gap-6 → md:gap-10 (간격)
• max-w-[90%] → md:max-w-[450px] (카드 크기)
• text-sm → md:text-base (텍스트 크기)

같은 변화를 통해 FAQSection의 반응형 웹을 구현했다. 

 

3. Component

 

• 모바일 뷰: sm:text-sm, sm:gap-4 등 작은 화면에서 텍스트 크기와 간격을 줄이는 처리
• 데스크탑 뷰: md:px-[68px], md:text-lg 등 넉넉한 간격과 텍스트 크기 적용

 

 

4. 텍스트 애니메이션

텍스트 애니메이션은 h1 태그에 animate-slide-in 클래스가 적용된 부분이다. tailwind.config.js에서 다음과 같이 'slide-in' 애니메이션을 직접 커스텀했다. 

 

animation: {
        fadeIn: 'fadeIn 0.5s ease-in-out',
        'slide-in': 'slide-in 1s ease-out',
      },
      
keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        'slide-in': {
          '0%': { transform: 'translateX(-100%)', opacity: '0' },
          '100%': { transform: 'translateX(0)', opacity: '1' },
        },
      },