[TIL] 24/01/14 [최종] tailwind 반복 스타일링

오늘도 화이팅!

 

1. Tailwind  반복되는 style -> @apply

계속 반복되는 tailwind 작업을 어떻게 해야할까 검색해보았다..

//(as-is)

<ul className="flex gap-[8px] items-center">
  <li className="border-[1.5px] border-slate-800 px-[20px] py-[5px] rounded-full ">
  오프라인
  </li>
  <li className="border-[1.5px] border-slate-400 px-[20px] py-[5px] rounded-full ">
  온라인
  </li>
</ul>

 

globals.css를 만들어 두었긴 했는데 여기에 적용하는게 맞을지는 의문이지만..

css 파일이 이것밖에 없어서.. 이쪽에 @apply를 이용하여
반복되는 스타일 클래스를 하나 지정해주었다~ 곂치는 부분만!
오버라이딩이.. globals.css가 나중에 실행되어서 덮어써짐, 연산자를 써줘야할것같긴한데 급한대로 패스해버림 ; ;

// (To-be, globals.css) 

.category {
  @apply border-[1.5px] px-[20px] py-[5px] rounded-full;
}

//(To-be)

<ul className="flex gap-[8px] items-center">
  <li className="category border-slate-800">오프라인</li>
  <li className="category border-slate-400">
  온라인
  </li>
</ul>

2. 커스텀 훅 / 리액트 훅폼..

커스텀 https://react.vlpt.us/basic/21-custom-hook.html

리액트훅폼 https://tech.osci.kr/introduce-react-hook-form/

 

커스텀 https://www.daleseo.com/react-forms-with-hooks/

리액트훅폼 https://www.daleseo.com/react-hook-form/

 

리액트 공식홈 - customhook
(재밌는 예제가있는데... 나중에 유저리스트에서 온라인/오프라인에 쓸일이 있을것같은데..)

https://ko.legacy.reactjs.org/docs/hooks-custom.html

3. zustand

https://blacklobster.tistory.com/3

---

프로젝트 진행 상황

✓ 북마크 기능 (갓은비) 

✓ 페이지네이션 ,css, 모집중공고만 보기 (갓은비)

✓ 회원가입시 users table 트리거로 생성, 메인페이지 css(슬라이더 구현) (미뇽) 

✓ 글쓰기 페이지, 카테고리 선택 부분에 날짜,인원선택 추가 + db 저장(쥐)

✓ 수정페이지 css (효짱)

✓ css , 상세페이지 project 불러오기 (쟝)

회고

ㅠ.ㅠ 일정 관리 어렵. 목표는 목표일뿐.. ㅎㅎ

---

내 진행 상황 

오늘 한일

1. 폼 몇개 만들고 db 저장하는 거.. 끝.. 왜케 많이 못했지..

2. 리액트 훅폼, 아직도 모르겠다 ? ?.. 공부하고 하지말고 하면서 공부해보자.

 

오늘 나머지 공부 (21시~ 달려!)

1. 리액트 훅폼 적용 해보기... (못했다 언제해)

 

TODO

1. 카테고리선택부분 :

- 포지션/ 스택 선택

- select option css 적용 (어케하는겨..ㅠ.ㅠ)
(옛날 선택과제 참고) : 이때 했어야했는데...-_-
https://teamsparta.notion.site/React-Lv-3-98089379b6d94dd4a9c21e07b6b29f37

const SelectOption = styled(Select.Option)`
  font-size: 12px;
  display: flex;
  align-items: center;
  padding-left: 12px;
  height: 40px;

  :hover {
    background-color: #eee;
  }

  :first-child {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }

  :last-child {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
  }
`;

 

- 선택된 버튼 빨갛게 표시 (ㅠ.ㅠ)

 

2. 폼 부분 :

- 리액트 훅폼... 하지말던가.. 하나하나 하던가 무식하게..
https://tech.osci.kr/introduce-react-hook-form/

react-hook-form 을 활용해 효과적으로 폼 관리하기 - 오픈소스컨설팅 테크블로그 %

- 

3. 수정페이지 :

- 프로젝트 불러오기 , (리액트 훅폼일 경우 reset (내용물) 을 onsuccess에 구현.

https://tech.osci.kr/introduce-react-hook-form/

- Editor setContent??  로 내용 가져오기.. 

 

 

4.