Tailwindcss

&& 연산자로 조건문 적용하기

          className={`text-sm font-semibold border py-1 px-2 rounded-[4px] ${
            ing === "모집중" && "text-[#1d4ed8] border-[#1d4ed8]"
          } ${ing === "사전알림신청" && "text-[#059669] border-[#059669]"} ${
            ing === "모집마감" && "text-[#3f3f46] border-[#3f3f46]"
          }`}

• 조건문 쓰듯이, && 연산자를 사용해 각기 다른 문자열에 따른 색상 변경을 해줄 수 있음

TIP

상태를 변화시킬 때, true false로 state을 set하면 되지만,
2개 이상 넘어가면 숫자를 사용하거나 해야한다.

버튼 클릭 시 버튼 활성화 표시하기

• useState로 클릭했을 때의 상태를 저장한다
• isClick 변수에 setIsClick 함수로 true 또는 false 값을 저장해준다
• && 연산자를 사용해 isClick이 true인 경우, 색상, 테두리, 텍스트 색상을 모두 바뀌도록 설정한다

배열에 저장하고 제거하기

const onClickToggle = () => {
   if (isClick) {
     setIsClick(false);

     const temp = classCardComp.filter((v) => {
       return v !== comp;
     });

     setClassCardComp(temp);
   } else {
     setIsClick(true);
     setClassCardComp([...classCardComp, comp]);
   }
 };

animate.css 활용해서 애니메이션 적용하기

https://animate.style/

• tailwindcss로 적용해주면 된다
• 수정이 필요한 부분은 제공되는 옵션으로 넣어주면 된다
• 내가 필요한 default 옵션이 없다면, css 파일에 커스터마이징해서 쓰면 된다

gradient 추가하기

https://tailwindcss.com/docs/gradient-color-stops

• top, bottom, left, right 뿐만 아니라 tl, tr, bl, br도 가능하다

---

JavaScript

TIP

{kdtCardData.map((v, i) => ( <KdtCard key={i} /> )

• 소괄호를 사용할 경우, return 키워드를 생략할 수 있음