1. 프로젝트 간략 소개
- 프로젝트 : 플레이키보드 웹스토어 만들기 https://store.plkey.app/
- 내가 참여한 FE Github : https://github.com/Roxy100/play-keyboard-react-bitbyte
- 배포주소 : https://maketheworldwise.github.io/play-keyboard-react-bitbyte/
- 개발 인원 : FE 6명 (안승섭, 양미옥, 이고운, 임지영, 정예원, 천찬영)
이번 기업협업 프로젝트는 피그마 디자인을 참고해서 만드는 것이다!
- 내가 직접 사용한 기술스택 및 라이브러리 : JavaScript, React.js, styled-components, react-router-dom
2. 내가 맡은 부분
- 이모지 파트 ~ 구매 버튼까지 UI 및 기능구현
- [공통] 반응형 사이즈
반응형의 경우 Screen Sizes 사이트를 참고하여 최소 태블릿 가로 사이즈인 600을 기준으로 잡았습니다. 가로 사이즈가 600 미만인 경우 모두 모바일이라 판단하였고, 600 이상인 경우 태블릿이라 판단하여 전체적인 크기를 키울 수 있도록 작업했습니다.
- 기업으로부터 피그마 디자인을 참고하여 px값을 em단위로 바꾸어 작업
- 이모지이미지나, 텍스트나 숫자를 눌러도 스타일 변화가 일어나도록, 숫자 +1증가하도록 state를 이용한 기능구현
3. 느낀 점
'반응형'으로 페이지를 표현하면서...
- 처음으로 반응형 디자인 프로젝트를 하다보니, 기존에 px단위로 작업하던 css를 사이즈를 줄여가면서 em단위로 바꾸었을 때 css가 원하는 대로 나오지 않아 계속 버그를 고치려고 이것저것 건드려보는 작업시간에 쏟아부으면서... '내가 css 작업이 많이 부족하구나' 하는 생각이 들었다. 지금 만들어진 모습을 보면 고치고 싶은 부분도 있으나 다음에 이런 비슷한 작업을 할 경우 더 디테일하게 작업을 해봐야겠다는 생각이 들었다.
- 특히, 현업에 일하셨던 동기분이 이렇게 해야된다고 예시코드를 작성해주셔셔 참고가 많이 되었고, 감사하다고 말씀드리고 싶다. 그리고 초기세팅도 해주시고, 다른팀원분들의 작업을 수월하게끔 도와주셔셔 이 부분에 감사하다고 말씀드리고 싶다.
- 만약 다음엔, 반응형 프로젝트 기회를 해 볼 때마다, 손에 익숙해지는 연습을 해야겠다는 생각이 들었다.
'교육참여 > [저스트코드]' 카테고리의 다른 글
[회고록] 기업협업 프로젝트 3rd 개인과제 (221011 ~ 221019) (0) | 2022.10.23 |
---|---|
[회고록] 기업협업 프로젝트 2nd 과제 (221007 ~221009) (0) | 2022.10.23 |
[회고록] 팀 포르젝트 2차_'FLO'을 참고하여 개발한 프로젝트 (220919 ~ 220930) (0) | 2022.10.10 |
[회고록] 팀 프로젝트 1차_'미래식당' 을 참고하여 개발한 프로젝트 (220829 ~ 220908) (0) | 2022.09.17 |
[저스트코드 회고록] 팀 프로젝트 들어가기 전 (220707 ~ 220826) (1) | 2022.09.13 |