Skip to content

[week6] 이록희 과제 제출#26

Open
rokhlee wants to merge 1 commit into
roki-week6from
roki-week6-hw
Open

[week6] 이록희 과제 제출#26
rokhlee wants to merge 1 commit into
roki-week6from
roki-week6-hw

Conversation

@rokhlee

@rokhlee rokhlee commented May 3, 2024

Copy link
Copy Markdown

💎 과제 구현 설명

과제를 위해 사용했던 함수, 수정한 파일 등 구현 내용에 대한 간단한 설명을 작성해 주세요.

  • VotePage, VoteHistoryPage를 구현하였습니다.
  • votepage에서는 메인페이지와 같은 방법으로 가져오되 첫번째 이미지 한장만 사용하도록 하였습니다.
  • onMouseOver, onMouseOut 을 이용해 좋아요 싫어요의 이미지를 변경했습니다.
  • 클릭하면 vote value를 준 이미지를 /votes에 Post 했습니다.
  • VoteHistoryPage는 삼항연산자를 사용해 테두리 색을 정했습니다.

🏁 PR 체크리스트

  • 코드가 오류 없이 정상적으로 실행되나요?
  • 커밋 메시지 컨벤션(템플릿 활용)을 준수했나요?
  • 과제 마감기한을 준수했나요?

🖼️ Screenshot / Video

스크린샷 2024-05-03 오후 3 44 50 스크린샷 2024-05-03 오후 3 45 18

🙌 Issue

과제 수행 중 어려웠던 부분이나 궁금했던 점을 자유롭게 작성해 주세요.

@isuh88 isuh88 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

잘 돌아가는거 확인해씀다 고생했어!! 👍

Comment thread src/routes/VotePage.jsx
Comment on lines -72 to +127
// ### thumbsUpImage Event ###
onMouseOver = {() => setThumbsUpImage(
require("../assets/images/thumbs-up-click.png")
)}
onMouseOut = {() => setThumbsUpImage(
require("../assets/images/thumbs-up-icon.png")
)}
onClick = {() => {
vote(1);
getImage();
}}
/>
<img
src={thumbsDownImage}
className="w-20 h-20 cursor-pointer"
// ### thumbsDownImage Event ###
onMouseOver = {() => setThumbsDownImage(
require("../assets/images/thumbs-down-click.png")
)}
onMouseOut = {() => setThumbsDownImage(
require("../assets/images/thumbs-down-icon.png")
)}
onClick = {() => {
vote(-1);
getImage();
}}

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

잘 하셨는데, 이 부분에서 조금 더 가독성을 높일 수 있는 방법을 알려드릴게요!

const VoteValue = {
UP: 1,
DOWN: -1,
};
을 위에 선언해주고, vote(1) 대신 vote(VoteValue.UP), vote(-1) 대신 vote(VoteValue.DOWN) 로 값을 입력해줄 수 있어요!

내가 짠 코드도 일주일만 지나면 이게 뭐였지 하는 경우가 많고, 타인과 협업을 할 때는 다른 사람의 코드를 읽을 때 숫자나 문자가 그대로 하드코딩 되어있으면 이해하는데 시간이 필요한 경우가 많아서 이렇게 원하는 값을 좀 더 직관적으로 랩핑해주면 훨씬 더 좋은 코드를 작성할 수 있습니다~!

@Jack-Chagarr Jack-Chagarr left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

수고하셨습니다~~~ 잘 구현하셨어요!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants