221130_TIL | styled-component - props 써보기

오늘한 일

• [항해 99] 실전프로젝트 마이페이지 css 구현 완료(+ 모달창 WF에 맞춰 수정 완료)
• [study] prototype 공부 + 정리

내일 할 일

• 리액트 쿼리 3강까지 듣기(5트.. 환장하겠네.. 시간이 너무 안난다)
• [항해 99] 실전 프로젝트 리액트 쿼리로 코드 변경하기(적어도 detail page 만이라도)

오늘의 배운 점

1. 전부터 하려고 생각만 했던 styled-component에서 props 사용하여 css 주는 걸 시도해봤다.
   코드 자체를 component로 이름을 주기보단 큰 부분들만 component 형태로 주고 나머지는 className으로 줬는데 props로 주려면 해당 부분이 component 형태로 들어가야 원하는 대로 올바르게 나왔다.
   

        <div className="modal-mypage-box">
             <Button
                  className="modal-mypage-btn"
                  onClick={onSubmitInfo}
                  borderColor
             >
                  등록하기
             </Button>
             <Button
                  className="modal-mypage-btn"
                  onClick={() => setModal(false)}
             >
                  취소하기
        </Button>
   
        //styled-component
        const Button = styled.button`
        border: ${(props) =>
             props.borderColor
                  ? "2px solid var(--color-button)"
                  : "2px solid #777"};
        color: ${(props) => (props.borderColor ? "var(--color-button);" : "#777")};
   `;
   

   
   

2. focus로 선택한 뱃지가 계속 뜨도록 유지시켜주고 싶은데 아직 구글링 중.. styled-component로 간단하게 하는 방법이 있는지 찾아봤는데 단발성이라 조금 더 찾아봐야할듯. :focus{여기에 내용!} 형식으로 일단은 작성해놓고 이후에 수정 예정!

---

전체적으로 모든 팀이나 우리 팀원들도 마무리하고 리팩토링 중인 것 같은데..
어제 저녁에 와이어프레임을 받아서 작업하다보니 내 진도가 많이 느리다. 미리 공부를 많이 해놨으면 덜 힘들었을텐데 이런저런 핑계로 미루다보니 결과적으로 이제서야 급하게 작업 중.. 마음이 좀 급해지기는 하는데 스케줄 잘 계산해서 작업하면 괜찮을 것 같다. 나 혼자 한다고 되는 일이 아니라 디자이너분한테 전달받아서 진행해야하는 내용들이 많아서..
그래도 최근엔 추가 공부까지는 못하더라도 작업하려고 계획했던 부분들은 그래도 생각처럼 진행되고 있기 때문에 내일은 꼭 리액트 쿼리로 코드 바꿔보는 게 목표!
코드도 전체적으로 깔끔(?)하게 변경해둔 상태라 이전의 상태였으면 포기하고 툴킷으로 냅뒀겠지만, 정리된 김에 공부하면서 꼭 변경해보고 싶다.
할 수 있다고~~~