[봉재완] sprint 1+2

[BBong99]

요구사항

Sprint1

기본

• [o] React와 같은 UI 라이브러리를 사용하지 않고 진행합니다

• [o] PC사이즈만 고려해 주어진 디자인으로 구현합니다.

• [o] HTML, CSS 파일을 Netlify로 배포해 주세요.
  (https://sprint-mission2-bbong.netlify.app/)

• [o] 랜딩 페이지의 url path는 루트(‘/’)로 설정합니다.

• [o] title은 “판다마켓”로 설정합니다.

• [o] “판다마켓” 로고 클릭 시 루트 페이지(‘/’)로 이동합니다.

• [o] '로그인' 버튼 클릭 시 로그인 페이지(‘/login’)로 이동합니다 (빈 페이지)

• [o] “구경하러 가기”버튼 클릭 시(’/items’)로 이동합니다. (빈 페이지)

• [o] “Privacy Policy”, “FAQ”는 클릭 시 각각 Privacy 페이지(‘/privacy’), FAQ 페이지(‘/faq’)로 이동합니다.(모두 빈 페이지)

• [o] 페이스북, 트위터, 유튜브, 인스타그램 아이콘을 클릭 시 각각의 홈페이지로 새로운 창이 열리면서 이동합니다.

• [o] 아래로 스크롤해도 “판다 마켓” 로고와 “로그인” 버튼이 있는 상단 내비게이션 바(Global Navigation Bar)가 최상단에 고정되게 해 주세요.

• [o] 화면의 너비가 1920px 이상이면 하늘색 배경색은 너비를 꽉 채우도록 채워지고, 내부 요소들의 위치는 고정되고, 여백만 커지도록 합니다.

• [o] 화면의 너비가 1920px 보다 작아질 때, “판다마켓” 로고의 왼쪽 여백 200px, “로그인" 버튼의 오른쪽 여백 200px이 유지되고, 화면의 너비가 작아질수록 두 요소 간 거리가 가까워지도록 설정합니다.

• [o] 화면의 너비가 1920px 이상이면 내부에 있는 요소 간 동일한 간격을 유지하며 가운데 정렬해야 합니다.

• [o] 화면의 너비가 1920px 보다 작아질 때, 최하단에 있는 “codeit-2024”의 왼쪽 여백 200px과 SNS 아이콘들의 오른쪽 여백 200px을 유지하면서 가운데 있는 “Privacy Policy”, “FAQ” 요소와 각각 동일한 간격을 유지하며 가까워져야 합니다.

• [o] 클릭으로 기능이 동작해야 하는 경우, 사용자가 클릭할 수 있는 요소임을 알 수 있도록 CSS 속성 cursor: pointer로 설정합니다.

심화

• [x ] reset.css를 설정해 주세요.

• [o] 사용자의 브라우저 설정에 따라 기본 폰트 크기 설정이 변화함에 따라서 페이지의 요소 간 간격, 요소의 크기, font-size 등 모든 크기와 관련된 값이 크고 작아지도록 설정해 주세요.

Sprint2

기본

• [o] “판다마켓" 로고 클릭 시 루트 페이지(“/”)로 이동합니다.

• [o] 로그인 페이지, 회원가입 페이지 모두 로고 위 상단 여백이 동일합니다.

• [o] SNS 아이콘들은 클릭 시 각각 “https://www.google.com/”, “https://www.kakaocorp.com/page/” 으로 이동합니다.

• [o] input 요소에 focus in 일 때, 테두리 색상은 ##3692FF입니다.

• [o] input 요소에 focus out 일 때, 테두리는 없습니다.

• [o] “회원가입”버튼 클릭 시 “/signup” 페이지로 이동합니다.

• [o] “로그인”버튼 클릭 시 “/login” 페이지로 이동합니다

심화

• [x ] palette에 있는 color값들을 css 변수로 등록해서 사용합니다.

• [o] 구글 애널리틱스로 방문자 수 확인하기 할 수 있도록 설정합니다.

• [o] 비밀번호, 비밀번호 확인 input 요소 오른쪽에 비밀번호를 확인할 수 있는 눈 모양 아이콘을 추가합니다.

주요 변경사항

스크린샷

멘토에게

• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[dennis2311]

디렉토리 구조상으로 보았을 때는 로그인, 회원가입 페이지가 구현된 것으로 보이는데 실제 배포된 페이지에서는 확인이 불가능합니다. 이 부분 때문에 재확인을 부탁드렸었는데, 한번 더 확인해주시고 디스코드로 다시 알려주시면 감사하겠습니다.

이번 리뷰에서는 구현의 완성도보다는 형식적인 측면(생산성과 협업의 효율을 올려주는)에서 신경 써 주시면 좋을 내용에 대해 말씀드리겠습니다:

• 멘토링 떄도 말씀 드렸다시피, 네이밍 규칙은 어떤 것을 쓰든 상관 없지만 일관적으로 쓰는 것이 대단히 중요합니다. 파일 이름 역시 마찬가지입니다. 예를 들어 Component 2.png 라는 이름 대신 ic-google-logo.png로 변경하여 사용한다면 좀 더 해당 파일의 특성이 잘 드러납니다.
• 태그 전체에 영향을 미치는 스타일은 신중히 사용하셔야 하며, 스타일 지정 파일 역시 그 역할에 따라 쪼개두는 것이 작업하기 편합니다. Panda.css 파일 혼자서 많은 양의 스타일을 처리하고 있는데, 비대해진 스타일은 차후에 어느 부분에서 스타일이 어긋나는지 확인하는 데에 큰 영향을 미칩니다. 로그인, 회원가입 페이지에 적용되는 style.css 역시 login-style.css, signup-style.css 로 지정해두면 나중에 commit 로그만 보고도 단박에 어떤 작업을 했는지 파악할 수 있게 되는 이점이 생깁니다.
• .banner와 .banner-container 의 스타일 중 공통적으로 사용하는 부분을 동시에 지정해주셨는데, 저라면 프로젝트 사이즈가 커지거나 디자인이 확장되는 경우를 대비하여 centering-div 라는 className 을 만들어서 지정해줬을 것 같습니다. className은 역할을 기준으로 부여되는 것이기에, 각 역할마다 고유한 스타일을 갖게 해주는 것이 좋습니다. (피치 못하게 겹친다면 겹치는 부분에 새로운 역할을 부여) 지금은 작은 부분에서 공통된 스타일을 묶는 데 쓰인 것이기 때문에 큰 문제는 없습니다. 차후에 참고해주세요 :)
  • .popularBackground, .buywantedBackground 역시 .background 로 묶어준다면 더 직관적이고 확장성 있는 네이밍이 될 수 있겠죠?
• HTML 구조를 잡으실 때 태그가 열리면 들여쓰기(indent)를 해주세요. 사용하고 계신 IDE(코드 편집기)에 따라 해당 작업을 자동으로 해주는 편의 기능이 존재할 겁니다.
• 주석을 많이 활용해주세요. 본인의 코드도 시간이 지나면 디버깅할 때 많은 시간을 투자해야 합니다. html 구조 뿐 아니라, css 파일에서도 ~~부분의 스타일이라고 명시해두면 이해하기가 훨씬 쉬워집니다.