1. Sub 메뉴바 구현 어디서든 원하는 페이지로 이동할 수 있도록 네비게이션 메뉴바를 만들었다. CSS 를 활용하여 구현. 버튼에 마우스를 올렸을때, 컨텐츠 박스의 display 를 none 에서 block 으로 바꾸어 나타나게 했다. :hover {.dropdown-content {display: block;}} import React, { ReactElement } from "react"; import styled, { keyframes } from "styled-components"; export default function SubNav(): ReactElement { const Main = styled.span` /* border: 3px solid red; */ position: relati..

재충전

오늘 한일 데스크탑/태블릿/모바일 사이즈 별 반응형 웹 구현 . 아직못한것 그림일기장 메인페이지(로그인페이지)에서 소샬 로그인 버튼이 제대로 나오지 않는 것과 클릭했을때 모달창의 위치가 잘못된 점. 그리고 햄버거 메뉴바를 추가해주어야 하는데, 이를 추가함에 따라 많은 수정사항이 발생될 것으로 예상된다. 그림판을 적용해야한다. 깍두기칸 구현해야한다... 깨달은것 미디어쿼리를 이용하여 구현했는데, 생각했던 것보다 구현이 어렵지 않았다. 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 디자인만 하는중이다. 디자인도 시간이 꽤 걸린다. 아쉬운점: 토이 문제를 제대로 풀고 싶은데, 프로젝트 일정을 지키느라 엄두가 나지 않는다... 매일 정신차리자 말하지만, 지키기가 쉽지 않다. 아무래도 주말에 복습을 해야겠다...!!!!!!!!!!