재충전

오늘 한일 데스크탑/태블릿/모바일 사이즈 별 반응형 웹 구현 . 아직못한것 그림일기장 메인페이지(로그인페이지)에서 소샬 로그인 버튼이 제대로 나오지 않는 것과 클릭했을때 모달창의 위치가 잘못된 점. 그리고 햄버거 메뉴바를 추가해주어야 하는데, 이를 추가함에 따라 많은 수정사항이 발생될 것으로 예상된다. 그림판을 적용해야한다. 깍두기칸 구현해야한다... 깨달은것 미디어쿼리를 이용하여 구현했는데, 생각했던 것보다 구현이 어렵지 않았다. styled component 에 아래와 같이 미디어 쿼리문(?) 을 사용하면 된다. 화면 사이즈별로 한땀한땀 구현해주어야 하는 것 같다. const InputBox = styled.label` /* border: 1px solid blue; */ width: 100%; fo..

소셜 로그인 모달창을 구현했다. 리액트 모달 라이브러리를 사용하여 구현했는데, 처음에 모달 작동 방식이 살짝 이해가 가지 않아 시간이 걸렸다. 뿐만 아니라, 타입스크립트를 적용해야 했기에 구글링에 정성을 기울였다. 관련 코드는 다음과 같다. signin 컴포넌트 hooks 를 이용하여 모달창 상태를 저장했고, socialSignin 컴포넌트에 modalIsOpen(: boolean) 상태와 상태변경 함수인 setIsOpen 를 props 로 전달하여 상태가 true 일 때에 모달창을 열리게 했다. 만약 뒤로가기 버튼을 누르면 setIsOpen 함수를 호출하여 상태를 false 로 바꾸어 주어 모달창이 닫히게 했다. import { findByLabelText } from "@testing-library/..

오늘한일 주요 페이지 및 컴포넌트 개발 완료. 모달 2개 끝낸 후 그림판, 깍두기칸, 아마도 오어쓰까지 기능 구현을 시작하면 될 것 같다. 깃지옥... 충돌충돌... 저렇게 튀는게 무엇인가 했더니... 기존 작업 했던(작업완료) feature 에 덧씌워서 작업을 하게 되면 발생하는 현상이라는 걸 깨달았다. 앞으론 어떤 작업을 할 때엔 dev => 새작업 브랜치 => 커밋, 푸시 완료. 다시 dev 로 돌아가서 새작업 브랜치.... 로 진행해야겠다. 그런데, 저렇게 튀는게 잘못된건가?... 잘 모르겠다. 깃을 어떻게 관리해야 잘하는 것인지 더 공부해야겠다. 좋은 경험이라 생각하자.

오늘 작업한 내용 아래와 같다. 아직 로직 구현이 없고 CSS 디자인만 하는중이다. 디자인도 시간이 꽤 걸린다. 아쉬운점: 토이 문제를 제대로 풀고 싶은데, 프로젝트 일정을 지키느라 엄두가 나지 않는다... 매일 정신차리자 말하지만, 지키기가 쉽지 않다. 아무래도 주말에 복습을 해야겠다...!!!!!!!!!!

메인 페이지의 Nav Compnent 와 Manual page 를 개발했다. Nav Component 를 구현할 때는 props 를 사용해야 했는데, 관련 모듈을 설치하지 않아 오랜 시간 헤맸다. 가정통신문 같은 경우엔 박스 사이의 공백이 생겨서 메꾸느라 시간을 보냈다. 의아한 점이 있는데, 페이지를 축소하면 오른쪽 로그인 페이지는 크기가 변하지 않는데, 왼쪽 가통 페이지의 경우 크기가 축소되는 것을 확인했다. 물론 flex box 를 적용했기 때문인것 같은데... 로그인 페이지도 마찬가지라는게 함정... 차후 미디어 쿼리를 적용해야 하는데 관련하여 의견을 더 나누어 봐야겠다. . CSS 작업에 이렇게 시간이 많이 걸릴줄은 몰랐다; 꾸준히 작업해야겠다.