[3주차] 이 상 형 월 드 컵 #7
Conversation
…week1-assignment
|
오늘도 할할놀놀을 몸소 실천 중인 웹파트원 ! 화이팅 :) |
|
오늘도 할할놀놀을 몸소 실천 중인 웹파트원 ! 화이팅 :) |
|
오늘도 할할놀놀을 몸소 실천 중인 웹파트원 ! 화이팅 :) |
|
오늘도 할할놀놀을 몸소 실천 중인 웹파트원 ! 화이팅 :) |
| const GlobalStyle = createGlobalStyle` | ||
| * { | ||
| margin: 0, | ||
| padding: 0, | ||
| box-sizing: border-box; | ||
| } | ||
| `; |
There was a problem hiding this comment.
전역 스타일링 사용 베리 굳~!
reset css 사용해서 브라우저마다 적용되어 있는 기본 스타일도 초기화 시켜주면 스타일링할 때 더 편할 것 같습니다!
| @@ -0,0 +1,57 @@ | |||
| import styled from "styled-components"; | |||
|
|
|||
| export const FlexBox = styled.div` | |||
There was a problem hiding this comment.
저도 처음에는 style.js라는 파일을 만들어서 styled-components 들을 모아놨는데 styled-components의 장점이 스타일링을 바로 그 코드파일 에서 할 수 있는 점이라고 하더라고요. 중복되는 코드는 css로 빼고 세부적인 스타일링이나 한 두번 사용되는 스타일링은 styled-components를 사용해서 해당 파일에 적는다고 윤선이가 알려줬습니다. 어디까지나 개인 취향이긴 하지만 장점을 살려보는 것도 좋을 것 같습니다!
| const items = [ | ||
| { | ||
| name: "황민현", | ||
| src: require("../../Img/민현.jpeg") | ||
| }, | ||
| { | ||
| name: "안효섭", | ||
| src: require("../../Img/효섭.jpeg") | ||
| }, | ||
| { | ||
| name: "이주연", | ||
| src: require("../../Img/주연.jpeg") | ||
| }, | ||
| { | ||
| name: "정진영", | ||
| src: require("../../Img/진영.jpeg") | ||
| }, | ||
| ]; |
There was a problem hiding this comment.
여기에 적어줘도 문제는 없지만 파일을 따로 빼서 import를 하면 더 깔끔할 것 같습니다!
| useEffect(() => { | ||
| items.sort(() => Math.random() - 0.5); // item 값 랜덤하게 설정해주고자 함 | ||
| setHansomes(items); | ||
| setDisplays([items[0], items[1]]); | ||
| }, []); |
| <h1 className="title">이 상 형 월 드 컵</h1> | ||
| {displays.map(item => { // map을 사용할 때는 key 값을 반드시 설정해줘야함! | ||
| return ( | ||
| <div className="flex-1" key={item.name} onClick={clickHandler(item)}> | ||
| <img className="handsome-img" src={item.src} alt="handsome" /> | ||
|
|
||
| <div className="name">{item.name}</div> |
There was a problem hiding this comment.
제가 알기로 styled-components의 가장 큰 장점 중 하나가 기존의 className을 사용하지 않는 것이라고 알고 있어요! styled-components를 조금 더 활용해보는 것은 어떨까요?
| <h1 className="title">이 상 형 월 드 컵</h1> | ||
| {displays.map(item => { // map을 사용할 때는 key 값을 반드시 설정해줘야함! | ||
| return ( | ||
| <div className="flex-1" key={item.name} onClick={clickHandler(item)}> |
There was a problem hiding this comment.
onClick={ ()=>clickHandler(item) }
으로 작성하면 함수가 더 간단해질 수도 있슴다~
✨ 구현 기능 명세
a. 4명의 참가자가 있을 경우 (4강)
- A vs B (1)
준결승- C vs D (2)
준결승- (1) 승리자 vs (2) 승리자
결승b. 즉 각 경기의 승리자들끼리 토너먼트를 진행하면 됩니다.
a. 1:1 비율로 2개의 이미지를 보여주세요.
b. 참가자의 이름이 나타나야해요.
월드컵이 종료되는 조건을 판단하셔서 우승자를 보여주면 과제 끝!
🎁 PR Point
😭 어려웠던 점
의외로 왕관과 vs 보여주는 것이 어려웠다는 것,,
승리 판단을 할 때 따로 빼줘서 고려해야 하는 건지?! 이 부분은 좀 더 공부해봐야할 것 같아요!!
😎 구현 결과물