[김나린] sprint1&2#35
Hidden character warning
Conversation
…rint-mission-fe into basic-김나린-sprint2
narin116
added
매운맛🔥
greatelv
left a comment
greatelv
left a comment
There was a problem hiding this comment.
전반적인 CSS 구조 개선 코멘트
과제 구현하시느라 고생 많으셨습니다. 전반적으로 코드의 가독성이 좋고 css 변수 등을 활용하여 스타일을 체계적으로 작성해주셨습니다.
코드 품질과 반응형 레이아웃 개선을 위해 몇 가지 참고하실 만한 권장 사항을 라인별로 정리해 두었으니, 내용을 확인해보시기 바랍니다.
| 따라서 전체 선택자인 *을 사용해야 한다!!!!!!!!!*/ | ||
| * { | ||
| box-sizing: border-box; | ||
| font-family: "Pretendard", Arial, sans-serif; |
There was a problem hiding this comment.
전역 선택자(*)에 폰트 패밀리(font-family)를 지정하면 렌더링 성능이 불필요하게 저하될 수 있으며, 우선순위 문제나 상속이 정상적으로 적용되지 않는 경우가 발생할 수 있습니다. 가급적 body 태그에 폰트 속성을 지정하여 자연스럽게 상속되도록 구현하시는 것을 권장합니다.
| .text-align-right { | ||
| text-align: right; | ||
| } | ||
|
|
There was a problem hiding this comment.
컨테이너에 고정된 width 값을 직접 명시하면 뷰포트 크기가 이보다 작아질 때 모바일 환경 등에서 가로 스크롤이 발생하거나 레이아웃이 화면 밖으로 넘치게 됩니다. 반응형 웹 환경을 고려하여 width: 100%; max-width: 63.125rem; 형태로 설정해 유연하게 동작하도록 개선하시는 것을 권장합니다.
greatelv
left a comment
greatelv
left a comment
There was a problem hiding this comment.
추가적인 코드 작성 디테일 점검 코멘트
전체적인 구현도는 뛰어나나, 예상치 못한 동작과 레이아웃 문제를 유발할 수 있는 몇 가지 사소한 오타 및 존재하지 않는 CSS 속성 값 사용 패턴이 발견되어 추가 피드백을 남깁니다.
사소한 오타 하나가 브라우저 호환성, 레이아웃 붕괴 및 웹 보안에 영향을 미칠 수 있으니 앞으로도 꼼꼼히 점검하는 습관을 들이시길 권장합니다. 수고 많으셨습니다!
| padding: 16px 23px; | ||
| flex-direction: column; | ||
| align-items: flex-center; | ||
| gap: 10px; |
There was a problem hiding this comment.
align-items 속성에는 flex-center라는 값이 존재하지 않습니다. 수직, 수평 정렬을 의도하셨다면 center가 올바른 사용법입니다. 이 상태로 배포될 경우 브라우저가 해당 줄을 완전히 무시하여 의도한 레이아웃이 무너질 수 있으니 수정하시길 권장합니다.
| class="kakaotalk" | ||
| href="https://www.kakaocorp.com/page/" | ||
| targer="_blank" | ||
| rel="noopener noreferrer" |
There was a problem hiding this comment.
새 창으로 띄우기 위한 target 속성에 오타(targer)가 입력되어 있습니다. 이 경우 사용자가 클릭 시 브라우저가 해당 속성을 인지하지 못해 새 창이 아닌 현재 창에서 이동해 버리므로, 의도한 동작이 이루어지지 않습니다. 꼼꼼한 확인을 권장합니다.
| class="kakaotalk" | ||
| href="https://www.kakaocorp.com/page/" | ||
| targer="_blank" | ||
| rel="noopener noreferrer" |
There was a problem hiding this comment.
해당 줄 역시 target 속성에 동일한 오타(targer)가 포함되어 있습니다. 코드를 복사 및 붙여넣는 과정에서 오타가 다른 파일로까지 전이되지 않도록 주의하시기 바랍니다.
| href="https://www.x.com" | ||
| target="_blank" | ||
| rel="nooopener noreferrer" | ||
| > |
There was a problem hiding this comment.
rel 속성값에 오타(nooopener)가 있습니다. target="_blank" 이용 시 잠재적 피싱 및 퍼포먼스 이슈를 방지하기 위해 noopener noreferrer를 명시하는 것이 중요하므로, 정확한 스펠링(noopener)을 기입하시기 바랍니다.
greatelv
left a comment
greatelv
left a comment
There was a problem hiding this comment.
심층 리뷰 점검 코멘트
이전 리뷰에 이어, PR의 전체 변경점(Diff)을 보다 면밀하게 딥다이브하여 추가로 발견된 구조적 결함 및 일관성 저해 형상에 대해 리뷰를 남깁니다.
작은 차이처럼 보일 수 있지만, 이러한 일관성 문제가 누적되면 추후 유지보수와 디버깅 시 치명적인 비용으로 돌아올 수 있으니 반영해 주시기 바랍니다.
| href="https://cdn.jsdelivr.net/npm/reset-css@4.0.1/reset.min.css" | ||
| /> | ||
| <link rel="stylesheet" href="style.css" /> | ||
| <!-- Google tag (gtag.js) --> |
There was a problem hiding this comment.
index.html에서는 CDN을 통해 reset.css를 불러오고 있으나, login.html과 signup.html에서는 로컬 환경의 reset.css 파일을 불러오고 있습니다. 동일한 프로젝트 내에서 리셋 CSS 참조 방식이 다를 경우, 버전 파편화로 인해 페이지마다 브라우저 렌더링이 미묘하게 어긋나는 심각한 레이아웃 붕괴를 초래할 수 있습니다. 팀 내 컨벤션 또는 로컬 파일 참조 등 하나로 일관되게 통일하시길 권장합니다.
| </a> | ||
| <a href="login.html" class="login-button"> <div>로그인</div></a> | ||
| </div> | ||
| </nav> |
There was a problem hiding this comment.
이미지 접근성을 높이기 위해 제공된 alt 속성에 오타(imge)가 포함되어 있습니다. 스크린 리더기 등 브라우저 접근성 도구가 읽어들일 때 혼선을 줄 수 있으니 정확한 스펠링(image)으로 수정해 주시길 권장합니다.
greatelv
left a comment
greatelv
left a comment
There was a problem hiding this comment.
마지막 추가 점검 및 클린 코드 코멘트
지침에 맞춰 한 번 더 코드의 모든 파일을 교차 검증한 결과, 프로젝트의 완성도를 높이고 잠재적인 빌드 에러를 방지할 수 있는 몇 가지 중요한 개선점들을 발견했습니다.
프론트엔드 환경에서 흔히 겪을 수 있는 이슈들이니 참고하셔서 더 완벽한 결과물을 만들어보시길 바랍니다!
| align-items: center; | ||
| gap: 10px; | ||
|
|
||
| border: none; |
There was a problem hiding this comment.
border: none;을 선언하여 테두리를 완전히 제거한 상태에서 바로 아래 border-color: var(--primary-color-100);를 선언하셨습니다. 테두리가 없는 상태에서는 색상 지정이 무의미해지며 브라우저 엔진이 이를 무시하게 됩니다. 혼란을 방지하기 위해 불필요한 속성은 제거하시는 것이 좋습니다.
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>판다마켓</title> | ||
| <link rel="icon" href="images/판다 얼굴.png" /> | ||
| <!--reset css (외부 링크로 가져와서 리셋하기) 이건 꼭 style.css 전에 와야 함!!!--> |
There was a problem hiding this comment.
이미지 경로에 "images/판다 얼굴.png"처럼 한글과 공백이 포함되어 있습니다. 로컬 환경에서는 잘 보일 수 있으나, 실제 배포 시 URL 인코딩(%ED%8C%90%EB%8BA4...) 문제로 이미지가 깨지거나 빌드 도구가 경로를 찾지 못하는 오류가 자주 발생합니다. 에셋 파일명은 항상 소문자 영문, 숫자, 하이픈(-) 등의 조합으로 작성하는 것을 강력히 권장합니다.
| @@ -0,0 +1,189 @@ | |||
| * { | |||
There was a problem hiding this comment.
이 파일(style-px.css)은 HTML 문서 내에서 링크되지 않은 미사용(Dead) 코드로 보입니다. 불필요한 코드가 레포지토리에 쌓이면 추후 유지보수 시 혼선을 초래할 수 있으므로, 최종 PR 전에는 작업용 임시 파일이나 스크랩을 모두 삭제 및 정리해 주시기 바랍니다.
2 participants
요구사항
기본
[x] README.md 파일을 작성해 주세요.
[x] 본인 브랜치(ex)part1-홍길동)에 스프린트 미션을 업로드해 주세요.
[x] 적절한 커밋 메시지를 남겨 주세요.
[x] 1-Sprint-Mission 레포지토리를 fork 합니다.
[x] GitHub에 PR(Pull Request)을 생성해 upstream의 본인 브랜치(ex)part1-홍길동)에 미션을 제출합니다.
[x] PR 코멘트에 아래 내용들을 포함해 주세요.
[x] Git 활용 과정에서 유닉스 커맨드를 활용해 주세요.
[x] HTML, CSS 파일을 Netlify로 배포합니다. (참고: https://www.codeit.kr/learn/5309)
로그인 페이지, 회원가입 페이지 공통
[x] "판다마켓" 로고 클릭 시 루트 페이지("/")로 이동합니다.
[x] SNS 아이콘들은 클릭 시 각각 "https://www.google.com/", "https://www.kakaocorp.com/page/" 으로 이동합니다.
[x] input 요소에 focus in 일 때, 테두리 색상은 ##3692FF입니다.
[x] input 요소에 focus out 일 때, 테두리는 없습니다.
로그인 페이지
[x] "회원가입"버튼 클릭 시 "/signup" 페이지로 이동합니다.
회원가입 페이지
[x] "로그인"버튼 클릭 시 "/login" 페이지로 이동합니다
심화
공통
[x] palette에 있는 color값들을 css 변수로 등록해서 사용합니다.
[x] 구글 애널리틱스로 방문자 수 확인하기 할 수 있도록 설정합니다.
로그인 페이지, 회원가입 페이지 공통
[ ] 비밀번호, 비밀번호 확인 input 요소 오른쪽에 비밀번호를 확인할 수 있는 눈 모양 아이콘을 추가합니다.
주요 변경사항
스크린샷
멘토에게