Opize 개발 일지 Day 24-25

phw3071·2022년 3월 2일
0

Opize 개발일지

목록 보기
19/20
post-thumbnail

영상

영상은 Opize-components가 완성되면 한 번에 올리겠습니다 :)

개발 내용


저번 개발일지에 이어서 Opize-Components를 개발하고 있습니다. 어찌어찌 하다보니깐 위에 사진만큼 만들었고, 이제 Admin 페이지에 쓰이는 블록이랑, 온보딩에 사용될 컴포넌트만 추가로 개발하면 완성입니다. 이번에는 제대로 만들고 싶은 욕구가 있어서, 타입스크립트도 적용하고, 옵션도 최대한 다양하게 넣는 식으로 범용적이게 사용할 수 있도록 만들고 있습니다.

기존 버튼 설정새로운 버튼 설정

위의 사진을 보면 알 수 있겠지만, Color 같이 주관적인(?) 설정은 normal, success, error, teal 4가지로 나누어서 용도에 맞게 사용할 수 있도록 했고, 형태도 텍스트만, 아웃라인만, 채우기 로 나누어서 용도와 강조성에 맞게 사용할 수 있도록 했습니다. disabled 를 추가해서 끌 수도 있어요. (disabledtrue 라면 onClick 가 실행되지 않습니다.)

여러모로 범용성 있고, 일관적이게 작동할 수 있도록 변경을 했습니다.

기존 텍스트 필드 설정새로운 텍스트 필드 설정

텍스트 필드도 마찬가지로, 대대적으로 손을 봤습니다. 먼저 outlinedunderlined로 2가지 형태로 사용할 수 있도록 했고, 기존에 inputformInput 으로 분리됬던 텍스트 필드를 하나로 합쳤습니다.


그리고 Toss의 입력 디자인에서 아이디어를 얻은 SplitTextField를 추가했습니다. 사실 이거는 opize-components를 위해서 만든 건 아니고, 학교에서 사용할려고 만든 원터치 자가진단에서 사용할려고 만든 컴포넌트를 가져왔습니다. 이게 폰트마다 조금 달라서 지금은 안 맞는데, Noto Sans KR 폰트를 적용하면 제대로 맞춰집니다. 만들고 보니 괜찮아서 가져오긴 했는데, 어디에 쓰일지는 모르겠네요...


Header는 전체적인 디자인 수정보다는 기존에 난잡했던 props를 정리했습니다. 각 요소별로 서브 컴포넌트로 나누는 등 최대한 깔끔하게 개발했어요. 새로 추가된 건 CTA 버튼과 모바일 지원이 있습니다.


모바일에서는 Header가 다음처럼 보이게 됩니다. 아직 CTA 버튼은 작업을 안해서 표시가 안되는데, 이건 나중에 고민을 해봐야 될 것 같습니다.

개발 이야기

타입스크립트 어려워요...

이번 프로젝트부터 타입스크립트를 본격적으로 도입하기 시작했습니다만... 은근 어렵네요 ㅠㅠ. 간단한 타입 같은 경우에는 쉽긴 하지만, 제너릭을 이용해야 되는 경우는 너무 어렵습니다. 그래도 책 읽으면서 최대한 공부하고 있습니다.

개학

아하하... 개학했네요...결국은 개학을 해버렸습니다. 어떻게 되는 건지를 모르겠어요. 그냥 저녁에 틈틈히 개발할려고 합니다. ㅎㅎ

profile
새로운 상상을 하고, 상상을 현실로 만드는 학생 개발자

1개의 댓글

comment-user-thumbnail
2022년 3월 8일

잘 하고 계십니다.
본인이 하시는 일에 자부심을 가지세요.
현업에서 한 팀이 하는 일을 혼자 하시는 겁니다.
그것도 고등학생이.
지금 배우시는 것이 나중에 큰 도움이 될 것입니다.
그것을 믿어 의심치 마시고 걱정하지 마시고
지금 그대로 잘 나아가시길 바랍니다.

좋은 코드인지는 생각하지 마십시오.
실제 창업이란 훨씬 더 어렵습니다.
수익모델, 라이센스, 백업 서버 추가 등등으로 고려할 점이 수 없이 많습니다.
하지만 괜찮습니다. 아직 밝습니다. 시간은 현스님에게 있습니다.
잘 하고 계십니다.
추후 현업에서 봤으면 좋겠네요 번아웃이 온다면 팀을 꾸려서 때로 이끌며 이끌어지는 것도 방법입니다.
개발자의 가장 큰 문제는 소통입니다.
그 점을 키우세요 지금이 가장 좋은 기회입니다.

답글 달기