[ 3주차 기본 / 생각과제 ] 🍚 점메추 🍚 #3
Conversation
| // 3초부터 카운트다운 하기 때문에 초기값 3 | ||
| const [time, setTime] = useState(3); | ||
|
|
||
| // eslint-disable-next-line react/prop-types |
There was a problem hiding this comment.
요 esLint 에러는 eslintrc.cjs에서 해결할 수 있습니다! (props drilling이 넘 많은데 하나하나 주석 달아주기엔 넘 빡세잖아효,,,ㅠ)
요거 참고!
| time > 0 && setTimeout(() => setTime(time - 1), 1000); | ||
| }); | ||
|
|
||
| /* 3,2,1 카운트다운 렌더링 |
| const { isStart, isStartHandler } = props; | ||
|
|
||
| useEffect(() => { | ||
| time > 0 && setTimeout(() => setTime(time - 1), 1000); |
|
|
||
| const RandomBtn = (props) => { | ||
| // eslint-disable-next-line react/prop-types | ||
| const { isStart, TypeSelect, RandomSelect, isStartHandler, randomHandler } = |
There was a problem hiding this comment.
도유니 데이식스 좋아하는구낰ㅋㅎㅋㅎ 나도,,,, ㅎㅎㅎㅎ 노래만 듣긴하지만!
There was a problem hiding this comment.
근데 혹시 이거를 public에 놓은 이유가 있을까요? assets에 들어가는게 조금 더 깔끔할 것 같아서!
There was a problem hiding this comment.
오호.. 사진이 어디에나 있어도 괜찮은가 했는데 그래도 assets에 있는게 더 낫구나
| const handleNext = () => { | ||
| setCurrentStep(currentStep + 1); | ||
| setIsStart(true); | ||
| console.log(currentStep + 1); |
| ))} | ||
| </SoloOrGroupBtnWrapper> | ||
|
|
||
| {/* <PrevNextBtnWrapper> |
There was a problem hiding this comment.
주석 지워주세요! 둘이 똑같은 거 같은디,,! 혹시 남겨둔 이유가 따로 있나용?
| const { isStart, isStartHandler, initStartHandler, initIsStart, setIsStart } = | ||
| props; | ||
| const [isPrevSelected, setIsPrevSelected] = useState(false); | ||
| console.log("TypeBtnStart - isStart ", isStart); |
| return ( | ||
| <div className="Header"> | ||
| <HeaderWrapper> | ||
| <HeaderText>🐻🦊🐰🐶 DAY6 노래 취향 월드컵🐶🐰🦊🐻</HeaderText> |
|
|
||
| ReactDOM.createRoot(document.getElementById("root")).render( | ||
| <React.StrictMode> | ||
| <Reset /> |
| const resetState = () => {}; | ||
| const backToFront = () => {}; |
There was a problem hiding this comment.
이 부분 선언만 해놓고 사용하지 않고 있는 것 같네용?!!
|
|
||
| const RandomResult = (props) => { | ||
| // eslint-disable-next-line react/prop-types | ||
| const { isStart, isStartHandler } = props; |
| const moodList = [...new Set(DATA.map((elm) => elm.mood))]; | ||
| const [selectedMood, setSelectedMood] = useState(""); | ||
|
|
||
| const [isMoodSelected, setIsMoodSelected] = useState(false); | ||
| const [isNextSelected, setIsNextSelected] = useState(false); | ||
|
|
||
| const [currentStep, setCurrentStep] = useState(1); // Assuming MoodSelect is the first step |
| const handleNextBtn = () => { | ||
| setIsNextSelected(!isNextSelected); | ||
| }; | ||
|
|
| {currentStep < 4 && ( | ||
| <PrevNextBtn |
There was a problem hiding this comment.
currentStep < 4 로 표현하는 이유가 무엇인가요?!
| <DegreeBtn | ||
| key={degree} | ||
| value={degree} | ||
| className={degree === selectedDegree ? "active" : ""} |
There was a problem hiding this comment.
마쟈 아니면 스타일드 컴포넌트의 props로도 가능할 듯!!
const DegreeBtn = styled.button`
...
background-color: ${({ selectedDegree }) => (degree === selectedDegree ? "#00897b" : "")}
color: ${({ selectedDegree }) => (degree === selectedDegree ? "#fff" : "")}
}
`;
대충 이런식......? https://styled-components.com/docs/basics 이거나 https://react.vlpt.us/styling/03-styled-components.html 요고 확인해봐!
| {/* 어느 버튼도 눌리지 않았을 때 : 취향대로 추천 버튼 보여지기 */} | ||
| {!TypeSelect && !RandomSelect ? ( | ||
| <Type onClick={typeHandler}>취향대로 추천</Type> | ||
| ) : null} |
There was a problem hiding this comment.
오옹 조건부 렌더링 빈 값넣을 때 맨날 <></>이걸로 했었는데 찾아보니 null을 많이 쓰는구낭!!
| <SectionWrapper> | ||
| <Question>오늘의 추천 노래는 바로!</Question> | ||
| <Img src={AlbumCover} alt="랜덤 노래 커버 이미지"></Img> | ||
| <Title>{SongTitle}</Title> | ||
| <RetryBtn onClick={isStartHandler}>다시하기</RetryBtn> | ||
| </SectionWrapper> |
There was a problem hiding this comment.
ByTypeResult 와 동일해서 컴포넌트 재사용도 해보면 좋을 것 같아 🤓
| const { isStart, isStartHandler } = props; | ||
|
|
||
| useEffect(() => { | ||
| time > 0 && setTimeout(() => setTime(time - 1), 1000); |
| degree: "상", | ||
| teamOrSolo: "팀", | ||
| img: "/img/Gravity.jpeg", | ||
| title: "한 페이지가 될 수 있게 - DAY6", |
There was a problem hiding this comment.
데이식스 노래 예뻤어랑 두개밖에 모르지만 이거 요새 꽂힘.. 넘나 좋은것 힣
| {/* 어느 버튼도 눌리지 않았을 때 : 랜덤으로 추천 버튼 보여지기 */} | ||
| {!RandomSelect && !TypeSelect ? ( | ||
| <Random onClick={randomHandler}>랜덤으로 추천</Random> | ||
| ) : null} | ||
| {/* Random 버튼이 눌렸을 때 : 랜덤으로 추천, 시작하기 버튼 있는 페이지로 이동 */} | ||
| {RandomSelect && !TypeSelect ? ( |
|
|
||
| const Random = styled.button` | ||
| padding: 8rem; | ||
| border: none; | ||
| border-radius: 1rem; |
There was a problem hiding this comment.
style을 넣을때는 import styled from "styled-components"; 하고
이런식으로 써주면 되는건가 ?!
|
|
||
| const handleBtnChange = (e) => { | ||
| setSelectedDegree(e.target.value); | ||
| setIsDegreeSelected(true); | ||
| }; |
✨ 구현 기능 명세
✨ 구현 기능 명세
🌱 기본 조건
🧩 기본 과제
[취향대로 추천]
아무것도 선택되지 않았을 시 버튼을 비활성화 시킵니다.
→ 눌러도 아무 동작 X
→ 비활성화일 때 스타일을 다르게 처리합니다.
이전으로버튼을 누르면 이전 단계로 이동합니다.다음으로/결과보기버튼을 누르면 다음 단계로 이동합니다.버튼 호버시 스타일 변화가 있습니다.
[ 랜덤 추천 ]
[ 공통 ]
다시하기버튼→ 랜덤추천이면
랜덤 추천 start화면으로, 취향대로 추천이면취향대로 추천 start화면으로 돌아갑니다.→ 모든 선택 기록은 리셋됩니다.
🌠 심화 과제
처음으로버튼→ 추천 종류 선택 화면일시 해당 버튼이 보이지 않습니다.
→ 처음 추천 종류 선택 화면으로 돌아갑니다.
→ 모든 선택 기록은 리셋됩니다.
[ 취향대로 추천 ]
useReducer,useMemo,useCallback을 사용하여 로직 및 성능을 최적화합니다.생각과제
💎 PR Point
DATA.js를 따로 밖에 빼서 데이터를 불러와 사용하도록 했습니다.styled-component를 처음 사용해보았습니다..! 그래서 그런가 중복되는 스타일은 대부분이지만 살짝씩 다르게 구현하기 위해 또 다른 컴포넌트를 만들어야 했던 점이 아쉬운거 같습니다..🥺 소요 시간, 어려웠던 점
2days....🌈 구현 결과물
https://six-puppy-7ec.notion.site/3-538a02bcd97c49b692392ac8841876b1?pvs=4