[3주차 기본/심화 과제] 🍚 점메추 🍚 #4
Conversation
1. 각 항목 너비 전체 차지하도록 구현 2. start 버튼 생성되도록 구현
1. 취향대로 추천 UI 구현 2. 처음처럼 버튼 로직 구현
| return ( | ||
| <S.HeaderStyle> | ||
| <h1>🍛 오늘의 점메추 🍛</h1> | ||
| {selectOption !== '' && ( |
There was a problem hiding this comment.
| {selectOption !== '' && ( | |
| {selectOption && ( |
이렇게만 해도 되겠다! 빈 문자열은 falsy값, 빈 문자열이 아니면 truthy 값이라서 가능합니당
| @@ -0,0 +1,28 @@ | |||
| import styled from 'styled-components'; | |||
|
|
|||
| const HeaderStyle = styled.header` | |||
| {(selectOption === '' || selectOption === 'personal') && ( | ||
| <S.ArticleStyle | ||
| onClick={() => { | ||
| selectOptionHandler('personal'); |
There was a problem hiding this comment.
사소한거지만 'personal'이런 특정 string은 상수화해서 가져다쓰는게 매직 넘버를 쓰지 않는 좋은 코드 습관!!
| {(selectOption === '' || selectOption === 'random') && ( | ||
| <S.ArticleStyle | ||
| onClick={() => { | ||
| selectOptionHandler('random'); | ||
| }} | ||
| > | ||
| <a href="#">랜덤 추천</a> | ||
| </S.ArticleStyle> | ||
| )} | ||
| </S.MainSectionStyle> |
There was a problem hiding this comment.
여기 실제 태그로 보면 article 에 onClick을 주고 안에서 a 태그로 상단 이동이 되는 구조 같은데, 이렇게 구현한 이유가 있을까?!
나는 랜덤추천과 취향대로 추천이 각각 버튼이다 보니
| {(selectOption === '' || selectOption === 'random') && ( | |
| <S.ArticleStyle | |
| onClick={() => { | |
| selectOptionHandler('random'); | |
| }} | |
| > | |
| <a href="#">랜덤 추천</a> | |
| </S.ArticleStyle> | |
| )} | |
| </S.MainSectionStyle> | |
| {(selectOption === '' || selectOption === 'random') && ( | |
| <button | |
| onClick={() => { | |
| selectOptionHandler('random'); | |
| }} | |
| >랜덤 추천 | |
| </button> | |
| )} |
이렇게 button태그를 쓰는게 더 자연스럽다고 생각했는데 !
| const imgUrl = new URL( | ||
| `../../../assets/${menuState.firstChoice}-${menuState.secondChoice}-${menuState.thirdChoice}.jpg`, | ||
| import.meta.url | ||
| ).href; |
| return ( | ||
| <> | ||
| <S.SubTitleStyle>오늘은 어떤 종류가 먹고 싶어?</S.SubTitleStyle> | ||
| <S.CountParagraph>1 / 3</S.CountParagraph> |
| case 'done': { | ||
| return { ...state, nthChoice: action.value }; | ||
| } | ||
| case 'first': { | ||
| return { ...state, firstChoice: action.value }; | ||
| } | ||
| case 'second': { | ||
| return { ...state, secondChoice: action.value }; | ||
| } | ||
| case 'third': { | ||
| return { ...state, thirdChoice: action.value }; | ||
| } |
There was a problem hiding this comment.
얘도 case 뒤에 string들이 상수 객체 같은걸로 관리되면 좋겠다! dispatch 함수 쓸 때도 가져가서 쓸 수 있게 ?!
| <S.CountParagraph>1 / 3</S.CountParagraph> | ||
| <S.MainSectionStyle> | ||
| <S.ArticleStyle | ||
| $isClicked={firstChoice === 1 ? true : false} |
There was a problem hiding this comment.
| $isClicked={firstChoice === 1 ? true : false} | |
| $isClicked={firstChoice === 1} |
이렇게만 줘도 되겠네용 !
There was a problem hiding this comment.
선택되지 않았을 때 0, 선택된 항목 순서에 따라서 1 ,2, 3 이렇게 숫자값을 준 것 같은데, 그 숫자가 각 항목을 뜻한다는걸 좀 보고 난 뒤에야 알았거든! 그래서 의미가 나타나지 않는 이런 숫자를 쓰기보다는 의미가 담긴 값(예를 들면 string)을 사용하면 좋을 것 같아! 그럼에도 나는 숫자값으로 관리를 하고 싶다면
export const SELECT_OPTION = {
none: 0,
first : 1,
second : 2,
third : 3,
}
이런식으로 만들어놓고 가져다 쓰는 것도 괜찮겠당. 뭔가 상수 얘기를 많이 하게 되는군 크크
| {count !== 0 && <AnimationText>{count}</AnimationText>} | ||
| {count === 0 && ( | ||
| <ResultArticle imgUrl={imgUrl} num={randomNum} startPickHandler={startPickHandler} /> | ||
| )} |
There was a problem hiding this comment.
| {count !== 0 && <AnimationText>{count}</AnimationText>} | |
| {count === 0 && ( | |
| <ResultArticle imgUrl={imgUrl} num={randomNum} startPickHandler={startPickHandler} /> | |
| )} | |
| { count ? <AnimationText>{count}</AnimationText> | |
| : ( | |
| <ResultArticle imgUrl={imgUrl} num={randomNum} startPickHandler={startPickHandler} />)} | |
| )} |
✨ 구현 기능 명세
🌱 기본 조건
🧩 기본 과제
[취향대로 추천]
답변 선택
이전으로, 다음으로(결과보기) 버튼
아무것도 선택되지 않았을 시 버튼을 비활성화 시킵니다.
→ 눌러도 아무 동작 X
→ 비활성화일 때 스타일을 다르게 처리합니다.
이전으로버튼을 누르면 이전 단계로 이동합니다.다음으로/결과보기버튼을 누르면 다음 단계로 이동합니다.버튼 호버시 스타일 변화가 있습니다.
결과
[ 랜덤 추천 ]
[ 공통 ]
다시하기버튼→ 랜덤추천이면
랜덤 추천 start화면으로, 취향대로 추천이면취향대로 추천 start화면으로 돌아갑니다.→ 모든 선택 기록은 리셋됩니다.
🌠 심화 과제
theme + Globalstyle 적용
애니메이션
헤더
처음으로버튼→ 추천 종류 선택 화면일시 해당 버튼이 보이지 않습니다.
→ 처음 추천 종류 선택 화면으로 돌아갑니다.
→ 모든 선택 기록은 리셋됩니다.
[ 취향대로 추천 ]
단계 노출
이전으로 버튼
useReducer,useMemo,useCallback을 사용하여 로직 및 성능을 최적화합니다.💎 PR Point
funnel 구조 사용
🥺 소요 시간, 어려웠던 점
12h제가 원하는 대로 분명 코드를 짰는데 정말 이상하게도 동작을 안 하는 오류가 발생했습니다.
그로 인해 결국 과제를 다 하지 못한 채 미국으로 가게 되었는데요
다시 돌와와서 해보니 잘 되었습니다.
정말 이상하네요;
🌈 구현 결과물
2023-12-14.5.29.45.mov