feat: 사용자 전적 페이지 (사용자 지정 게임의 1 VS 1 모드 개요 페이지) css 구현 #61
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Galmuri11 Normal, Bold, Condensed 추가
|
미리보기 gif 파일에 이상한 타일무늬가 보이긴 하는데, 실제로는 무늬가 없습니다 |
|
a태그 사용하시는 부분에 새로고침 안되게 preventdefault() 이벤트리스너 달아주시면 좋을 것 같습니다. |
donghyun1998
requested changes
Jan 18, 2024
donghyun1998
approved these changes
Jan 18, 2024
Comment on lines
+2
to
+58
| * 마우스 hover 시 폰트 색상 변경 | ||
| * @param element hover 효과를 넣고 싶은 html 엘리먼트 | ||
| * @param originalColor 원래 색상 | ||
| * @param hoverColor hover 시 색상 | ||
| */ | ||
| export const hoverChangeColor = (element, originalColor, hoverColor) => { | ||
| element.addEventListener("mouseover", () => { | ||
| element.style.color = hoverColor; | ||
| }); | ||
| element.addEventListener("mouseout", () => { | ||
| element.style.color = originalColor; | ||
| }); | ||
| } | ||
|
|
||
| /** | ||
| * 마우스 hover 시 폰트 변경 | ||
| * @param element hover 효과를 넣고 싶은 html 엘리먼트 | ||
| * @param originalFont 원래 폰트 | ||
| * @param hoverFont hover 시 폰트 | ||
| */ | ||
| export const hoverChangeFont = (element, originalFont, hoverFont) => { | ||
| element.addEventListener("mouseover", () => { | ||
| element.style.fontFamily = hoverFont; | ||
| }); | ||
| element.addEventListener("mouseout", () => { | ||
| element.style.fontFamily = originalFont; | ||
| }); | ||
| } | ||
|
|
||
| /** | ||
| * 마우스 hover 시 border 변경 | ||
| * @param element hover 효과를 넣고 싶은 html 엘리먼트 | ||
| * @param originalBorder 원래 border | ||
| * @param hoverBorder hover 시 border | ||
| */ | ||
| export const hoverChangeBorder = (element, originalBorder, hoverBorder) => { | ||
| element.addEventListener("mouseover", () => { | ||
| element.style.border = hoverBorder; | ||
| }); | ||
| element.addEventListener("mouseout", () => { | ||
| element.style.border = originalBorder; | ||
| }); | ||
| } | ||
|
|
||
| /** | ||
| * 마우스 hover 시 cursor 변경 | ||
| * @param element hover 효과를 넣고 싶은 html 엘리먼트 | ||
| * @param cursor hover 시 cursor | ||
| */ | ||
| export const hoverChangeCursor = (element, cursor) => { | ||
| element.addEventListener("mouseover", () => { | ||
| element.style.cursor = cursor; | ||
| }); | ||
| element.addEventListener("mouseout", () => { | ||
| element.style.cursor = "default"; | ||
| }); | ||
| } |
There was a problem hiding this comment.
너무 좋은데요 재사용하기 좋을 것 같습니다
There was a problem hiding this comment.
@param {HTMLElement} element hover 효과를 넣고 싶은 html 엘리먼트
jsdoc 작성하실 때 이렇게 param과 변수명 사이에 { 자료형 } 넣어줄 수 있습니다!
Comment on lines
+184
to
+205
| hoverChangeColor(summary, "#ffffff", "#29ABE2"); | ||
| hoverChangeColor(custom, "#ffffff", "#29ABE2"); | ||
| hoverChangeColor(tournament, "#ffffff", "#29ABE2"); | ||
|
|
||
| // 폰트 변경 | ||
| hoverChangeFont(summary, "Galmuri11, serif", "Galmuri11-Bold, serif"); | ||
| hoverChangeFont(custom, "Galmuri11, serif", "Galmuri11-Bold, serif"); | ||
| hoverChangeFont(tournament, "Galmuri11, serif", "Galmuri11-Bold, serif"); | ||
|
|
||
| // 커서 변경 | ||
| hoverChangeCursor(summary, "pointer"); | ||
| hoverChangeCursor(custom, "pointer"); | ||
| hoverChangeCursor(tournament, "pointer"); | ||
| hoverChangeCursor(prev, "pointer"); | ||
| hoverChangeCursor(next, "pointer"); | ||
|
|
||
| // click 이벤트 | ||
| click(summary, function () {console.log("TODO => 개요 페이지로 이동")}); | ||
| click(custom, function () {console.log("TODO => 사용자 지정 모드 페이지로 이동")}); | ||
| click(tournament, function () {console.log("TODO => 토너먼트 모드 페이지로 이동")}); | ||
| click(prev, function () {console.log("TODO => 이전 페이지로 이동")}); | ||
| click(next, function () {console.log("TODO => 다음 페이지로 이동")}); |
There was a problem hiding this comment.
코드 길이가 엄청 줄어드네요 이벤트리스너 함수 추상화 하신 것 너무 마음에 듭니다!
|
jsdoc 쓸 때 params 타입 명시 |
bluedog129
approved these changes
Jan 18, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
공통
common에서 관리합니다.frontend/assets에서 관리합니다.assets/리소스를 추가했습니다.index.html에 mini reset css를 적용하여 브라우저의 css를 초기화했습니다.Header
/histories...를 제외한 곳에서는 모두 공통 헤더를 사용하게 했습니다./histories...에 해당하는 헤더는 전적 페이지 전용 헤더를 사용합니다.Body
사용자 전적 페이지 (사용자 지정 게임의 1 VS 1 모드 개요 페이지)
미리보기