[7.5주차/기본과제] 왕초보스터디 점메추 과제 #6
Conversation
| {step === 0 && <Step0 setStep={() => setStep(1)} />} | ||
| {step === 1 && ( | ||
| <Step1 |
There was a problem hiding this comment.
Step0 Step1 이라는 컴포넌트 네이밍이 의미가 정확하지 않아 다른 팀원들이 협업하거나 유지보수할 때 불편함이 있을 것 같습니다. 아래와 같은 네이밍을 고민해보면 좋을 것 같아요!
SelectRecommendMode
SelectCountry
| # React + Vite | ||
|
|
||
| This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. |
There was a problem hiding this comment.
요런 내용과 관련없는 리드미는 지워도 될 것 같아요!
| @@ -0,0 +1,13 @@ | |||
| <!doctype html> | |||
| <html lang="en"> | |||
| <meta charset="UTF-8" /> | ||
| <link rel="icon" type="image/svg+xml" href="/vite.svg" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Vite + React</title> |
There was a problem hiding this comment.
요런 타이틀도! SEO를 생각하며 하나하나 신경써보자!
| {step === 2 && ( | ||
| <Step2 | ||
| setCategory={setCategory} | ||
| setStep={() => setStep(3)} | ||
| goBack={() => setStep(1)} | ||
| /> | ||
| )} | ||
| {step === 3 && ( | ||
| <Step3 | ||
| setSoup={setSoup} | ||
| setStep={() => setStep(4)} | ||
| goBack={() => setStep(2)} | ||
| /> | ||
| )} | ||
| {step === 4 && ( |
There was a problem hiding this comment.
매직넘버라고 아시나요? 지금처럼 step1 step2 네이밍은 현재 어떤 스텝을 하는지 모를 수 있어요! 그래서
const STEP = {
SELECT_MODE: 0,
PREFERENCE: 1,
COUNTRY: 2,
CATEGORY: 3,
SOUP: 4,
};
{step === STEP.SELECT_MODE && <Step0 setStep={() => setStep(1)} />}
위 와 같이 0,1,2 같은 의미없는 숫자를 해당 컴포넌트 기능을 유추할 수 있게 사용해보는 것도 좋을 것 같아요
| /> | ||
| )} | ||
| {step === 5 && <Random5 setStep={() => setStep(6)} />} | ||
| {step === 6 && <CountDown setStep={() => setStep(7)} />} |
There was a problem hiding this comment.
{step === 6 && <CountDown setStep={() => setStep(step=>step+1)} />}
위와같이 사용하는 것이 "다음 단계로 넘어간다." 라는 의미에 더 적합할 것 같습니다! 그리고 한단계를 넘어가는 함수를 props로넘겨줄것이라면 nextStep이라고 짓는것도 좋아보여요! CountDown 컴포넌트 내부에선 setStep이 어떤 역할을 하는지 모르겠더라구요!
| <br /> | ||
| <br /> |
There was a problem hiding this comment.
br태그보다는 OptionBox에
display :flex;
gap:2rem;
이런식으로 주는 것이 더 상세한 간격을 줄 수 있지 않을까 생각해요!
아니라면 Option1 에 margin-bottom값을 넣거나!
| const Ment = styled.div` | ||
| margin: 4rem; | ||
| text-align: center; | ||
| width: 40rem; | ||
| height: 14rem; | ||
| border-radius: 8%; | ||
| background-color: #f6f5f2; | ||
| font-size: 2rem; | ||
| `; | ||
|
|
There was a problem hiding this comment.
Ment 는 div보단 h2,h3 나 p태그 span태그 를 사용하는게 더좋을 것 같아요! div는 영역을 잡기위한 태그니까!
| const getSoup = (e) => { | ||
| setSoup(e); | ||
| console.log(e); | ||
| }; |
There was a problem hiding this comment.
e는 보통 event를 지칭할 때 많이 사용하는 예약어 느낌이 강해서 해당 props에 의미를 포함할 수 있는 이름을 지으면 좋겠군요!
예를 들면 isSoup
그래서 isSoup가 true이면 soup인거고 false이면 non soup인거고!
| const [time, setTime] = useState(3); | ||
| useEffect(() => { | ||
| if (time === 0) { | ||
| setStep(); |
There was a problem hiding this comment.
setStep이라는 함수가 어떤 기능을 하는지 잘 모르겠어요!
setStep의 이름을 변경한다면 더 가독성있는 코드가 될 것 같아요!
✨ 구현 기능 명세
추천 종류 선택
[ 취향대로 추천 ]**
답변 선택
1. 호버시 스타일 변화가 있습니다. ✅
2. 클릭시(선택시) 스타일 변화가 있습니다. ✅
이전으로, 다음으로(결과보기) 버튼
아무것도 선택되지 않았을 시 버튼을 비활성화 시킵니다.
→ 눌러도 아무 동작 X
→ 비활성화일 때 스타일을 다르게 처리합니다.
이전으로버튼을 누르면 이전 단계로 이동합니다. ✅다음으로/결과보기버튼을 누르면 다음 단계로 이동합니다. ✅버튼 호버시 스타일 변화가 있습니다. ✅
결과
[ 랜덤 추천 ]
숫자 카운트 다운
결과 화면
다시하기버튼→ 랜덤추천이면
랜덤 추천 start화면으로, 취향대로 추천이면취향대로 추천 start화면으로 돌아갑니다.→ 모든 선택 기록은 리셋됩니다. ✅
📌 내가 새로 알게 된 부분
1️⃣ prop 내보내기, 받기
2️⃣ 라우터 없이 페이지 변경하기(사실 컴포넌트 변경)
💎 구현과정에서의 고민과정(어려웠던 부분) 공유!
1️⃣ useState를 이용해 단계별로 맞는 컴포넌트를 보여주는 조건부 렌더링으로 구현하였으나, 카운트 다운 이후 상태를 놓쳐서(?) 마지막 되돌아가기 버튼을 구현 못하겠습니다.. 혹시 이 것에 대해 알려주실 수 있으실까요..?
🥺 소요 시간
🌈 구현 결과물
1.mp4
구현 못한 부분 완성하여 재촬영한 동영상입니다.
_.mp4