제출용 PR❌ 3주차 과제 gitignore에 node_module을 추가하지 않고 push한 것 => (커밋 내용 보려고 no delete)

[Rose-my]

🌱 기본 조건

• 기본조건1

✅ 선택 과정은 총 3단계입니다. ( 3개 → 3개 → 2개)

✅ 아이템은 총 18개 이상입니다. (3 x 3 x 2 = 18)

위는 “최소”기준이며 그 이상의 개수는 가능합니다.

• 기본조건2

✅ 전역상태관리 라이브러리, context 사용 금지 ❌

✅ Router 사용 금지 ❌

---

🧩 기본 과제

1. 추천 종류 선택
   • 취향대로 추천 / 랜덤 추천 중 선택합니다.
   • 선택시 다음화면으로 넘어갑니다.

[취향대로 추천]

2. 답변 선택

   • 호버시 스타일 변화가 있습니다.
   • 클릭시(선택시) 스타일 변화가 있습니다.

3. 이전으로, 다음으로(결과보기) 버튼

   • 아무것도 선택되지 않았을 시 버튼을 비활성화 시킵니다.

     → 눌러도 아무 동작 X

     → 비활성화일 때 스타일을 다르게 처리합니다.

   • 이전으로 버튼을 누르면 이전 단계로 이동합니다.

   • 다음으로 / 결과보기 버튼을 누르면 다음 단계로 이동합니다.

   • 버튼 호버시 스타일 변화가 있습니다.

4. 결과

   • 선택한 정보들에 맞는 결과를 보여줍니다.

[ 랜덤 추천 ]

5. 숫자 카운트 다운
   • 3 → 2 → 1 숫자 카운트 다운 후 결과를 보여줍니다.
   • 추천 결과는 반드시 랜덤으로 지정합니다.

[ 공통 ]

6. 결과 화면

   • 다시하기 버튼

     → 랜덤추천이면 랜덤 추천 start 화면으로, 취향대로 추천이면 취향대로 추천 start 화면으로 돌아갑니다.

     → 모든 선택 기록은 리셋됩니다.

---

🌠 심화 과제

1. theme + Globalstyle 적용

   • 전역으로 스타일을 사용할 수 있도록 적용해보세요

2. 애니메이션

   • 랜덤 추천 - 카운트다운에 효과를 넣어서 더 다채롭게 만들어주세요!

3. 헤더

   • 처음으로 버튼

     → 추천 종류 선택 화면일시 해당 버튼이 보이지 않습니다.

     → 처음 추천 종류 선택 화면으로 돌아갑니다.

     → 모든 선택 기록은 리셋됩니다.

[ 취향대로 추천 ]

4. 단계 노출

   • 3단계의 진행 단계를 보여줍니다.

5. 이전으로 버튼

   • 이전으로 돌아가도 선택했던 항목이 선택되어 있습니다.

• 6. useReducer , useMemo , useCallback 을 사용하여 로직 및 성능을 최적화합니다.

---

생각과제

• 리액트에 대하여

• 컴포넌트는 어떤 기준과 방법으로 분리하는 것이 좋을까?
• 좋은 상태 관리란 무엇일까?
• 렌더링을 효과적으로 관리하는 방법은 무엇이 있을까?
• Props Drilling이란 무엇이고 이를 어떻게 해결할 수 있는가?

---

🍎 PR

1. App.jsx
   • UseState

     • 각 페이지의 선택 결과 저장해서 마지막 페이지에 가져오기
     • key값으로 Component 핸들링

   • Component : 각 페이지 저장

     • ChoosePage
     • ChooseFavor
     • FavorDetails
     • DishDetails
     • SoupDetails
     • ShowFavor
     • ChooseRandom
     • ShowRandom

2. data
   • IMG_DATA

     • export default IMG_DATA
     • import IMAGE_DATA from "../data/imgData";

3. styles
   • GlobalStyles
   • themeProvider
4. countdown
   • UseEffect

     • 각 페이지의 선택 결과 저장해서 마지막 페이지에 가져오기

  const [time, setTime] = useState(3);
  const [image, setImage] = useState(null);
  const [imageName, setImageName] = useState("");

  useEffect(() => {
    if (time > 0) {
      setTimeout(() => setTime(time - 1), 1000);
    } else {
      const imageNum = Math.floor(Math.random() * IMAGE_DATA.length);
      setImage(IMAGE_DATA[imageNum].src);
      setImageName(IMAGE_DATA[imageNum].name);
    }
  }, [time]);

5. keyframes
   • 타이머 애니메이션 삽입

const TimerAnimation = keyframes`
  0% {
    transform: scale(10);
    opacity: 1;
    color: white;
  }

  100% {
    transform: scale(10);
    opacity: 1;
    color: #db6060; 
  }
`;

6. themeprovider
   • import styled, { ThemeProvider} from "styled-components";

     • 공통된 태그의 style은 theme에서 가져오기

const common ={
  Container:`
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    width: 100vw;
  `,
  ButtonContainer:`
    display: flex;
    justify-content: center;
    align-items: center;

    flex-wrap: wrap;

    gap: 1rem;
    padding: 0;
  `
}
const theme ={
  common,
};

export default theme;

const Container = styled.main`
  ${({ theme }) => theme.common.Container};
  background-color : ${({ theme }) => theme.colors.favYellow};
`;

🥺 소요 시간, 어려웠던 점

• 4일 하루에 4-5시간
• 개념부터 정리하느라 시작이 늦었지만 왕초보스터디하면서 스스로 블로그에 작성해보니까 어느정도 감이 생긴것 같아요
• 각 페이지 컴포넌트에서 props 불러오기/전달하기가 헷갈렸어요

{favorKey===4 &&<SoupDetailsPage ForthButtonKey={ForthButtonKey} YesSoup={YesSoup}} 

• App.jsx에서 SoupDetailsPage 컴포넌트에 ForthButtonKey와 YesSoup를 넘겨주고 ->

const SoupDetailsPage = ({ForthButtonKey, YesSoup}) => {

• SoupDetailPage.jsx는 const 안에서는 YesSoup()로 표시해서 함수를 실행할 수 있고 함수에서는(onClick)은 {ForthButtonKey}로 받아옵니다
• 둘 다 함수형으로 App.jsx에서 선언했어요

  const ForthButtonKey=()=>{
    setFavorKey(favorKey+1);
  }
  const [soup, setSoup]=useState(10);
  const YesSoup=()=>{
    setSoup(0);
  }

  const handleYesSoup =()=>{
    setSoup(0);
    YesSoup();
    setIsSoupSelected(true);
  }
<ForthButton disabled={!isSoupSelected} onClick={ForthButtonKey} isSoupSelected={isSoupSelected}>

🍏 구현 결과물

🌈 취향대로 추천과 다시하기로 선택을 다르게 할 시 보여주기

default.mov

🌈 랜덤 추천과 다시하기

default.mov

🌈 다음으로 버튼 disable -> 선택 시 able로

disable.mov

🌈 이전으로 다음으로 구현

default.mov