어제 MVP 발표가 끝나고 이제 반응형 작업을 시작했다.
우리 팀은 처음에 데스크탑 버전을 먼저 구현했는데 아무래도 큰 화면에서 작은 화면으로 반응형을 구현하려니 어려운 것 같다
다음부터는 반응형 웹을 구현 할 계획이 있으면 모바일 버전을 먼저 구현하고 작은 화면에서 큰 화면으로 구현하는 방법도 고려해봐야겠다

카테고리 슬라이드

데스크탑 크기에서는 카테고리가 모두 고정되어 한번에 보이고 있었다

<div className="my-[50px] mx-auto ">
	<ul className="flex flex-row justify-between items-center mt-[50px] max-w-7xl mx-auto">
		{CodeCategories.map((lang) => (
			<li
              className="mx-[20px] flex-col justify-center items-center hover:cursor-pointer"
              key={lang.id}
              onClick={() => handleLanguageFilter(lang.name)}
            >
              <Image className="w-[80px] h-[80px] rounded-full mb-[10px] mx-auto" src={lang.image} width={80} height={80} alt={lang.name}/>
              	<p className={`text-center ${selectedLanguages.includes(lang.name) ? 'text-blue-500' : 'text-black-500'}`}>
                	{lang.name}
				</p>
			</li>
		))}
	</ul>
</div>

모바일 크기에서는 카테고리가 몇 개만 보이고 슬라이드 형식으로 스크롤하여 추가로 더 볼 수 있도록 구현했다

<div className="mt-[30px] mx-auto overflow-hidden">
	<ul className="flex flex-row justify-start items-center max-w-7xl mx-auto lg:justify-between lg:flex-wrap lg:overflow-visible overflow-x-auto scrollbar-hide">
		{CodeCategories.map((lang) => (
			<li
              className="mx-[20px] flex-col justify-center items-center hover:cursor-pointer flex-shrink-0 w-[80px] sm:w-[100px] md:w-[120px] lg:w-auto"
              key={lang.id}
              onClick={() => handleLanguageFilter(lang.name)}
            >
              <Image
                className="xl:w-[80px] xl:h-[80px] w-[40px] h-[40px] rounded-full mb-[10px] mx-auto"
                src={lang.image}
                width={80}
                height={80}
                alt={lang.name}
              />
				<p className={`text-center ${selectedLanguages.includes(lang.name) ? 'text-blue-500' : 'text-black-500'}`}>
                	{lang.name}
				</p>
			</li>
		))}
	</ul>
</div>