[3주차 기본]🍚오늘의 점메추🍚

[rachel5640]

✨ 구현 기능 명세

🌱 기본 조건

• 기본조건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 을 사용하여 로직 및 성능을 최적화합니다.

---

💎 PR Point

📁 assets

const Data = [
  {
    name: "그 해 우리는",
    category: ["romance", "domestic", "drama"],
    img: rdd,
  },
  {
    name: "고요의 바다",
    category: ["sf", "domestic", "drama"],
    img: sdd,
  },
  {
    name: "그녀의 이름은 난노",
    category: ["thriller", "asia", "drama"],
    img: tad,
  },
  {
    name: "스마트폰을 떨어뜨렸을 뿐인데",
    category: ["thriller", "domestic", "movie"],
    img: tdm,
  },
  {
    name: "삼체",
    category: ["sf", "asia", "drama"],
    img: sad,
  },
  {
    name: "메간",
    category: ["thriller", "oversea", "movie"],
    img: tom,
  },
  {
    name: "너의 췌장을 먹고 싶어",
    category: ["romance", "asia", "movie"],
    img: ram,
  },
  {
    name: "데스노트",
    category: ["thriller", "asia", "movie"],
    img: tam,
  },
  {
    name: "에밀리, 파리에 가다",
    category: ["romance", "oversea", "drama"],
    img: rod,
  },
  {
    name: "에브리씽 에브리웨어 올앳원스",
    category: ["sf", "asia", "movie"],
    img: sam,
  },
  {
    name: "아름다웠던 우리에게",
    category: ["romance", "asia", "drama"],
    img: rad,
  },
  {
    name: "스윗트홈",
    category: ["thriller", "domestic", "drama"],
    img: tdd,
  },
  {
    name: "승리호",
    category: ["sf", "domestic", "movie"],
    img: sdm,
  },
  {
    name: "기묘한 이야기",
    category: ["thriller", "oversea", "drama"],
    img: tod,
  },
  {
    name: "노트북",
    category: ["romance", "oversea", "movie"],
    img: rom,
  },
  {
    name: "블랙미러",
    category: ["sf", "oversea", "drama"],
    img: sod,
  },
  {
    name: "20세기 소녀",
    category: ["romance", "domestic", "movie"],
    img: rdm,
  },
  {
    name: "어메이징 스파이더맨",
    category: ["sf", "oversea", "movie"],
    img: som,
  },
];

export default Data;

name, category, img 형태로 객체를 만들었습니다

📁 components

반복적으로 사용되는 컴포넌트들과 전체 구조를 구성하는 컴포넌트들로 이루어져있습니다.

📁 MainSectionWrapper

  const Main = () => {
    switch (currentStep) {
      case "random":
        return <Random></Random>;
      case "prefer":
        return <Prefer></Prefer>;
      default:
        return (
          <Section>
            <Title>원하는 추천방식</Title>
            <BtnSection>
              <ChooseButton
                onClick={() => {
                  setCurrentStep("prefer");
                }}
              >
                <p>취향대로</p>
              </ChooseButton>
              <ChooseButton
                onClick={() => {
                  setCurrentStep("random");
                }}
              >
                <p>랜덤으로</p>
              </ChooseButton>
            </BtnSection>
          </Section>
        );
    }
  };
  return (
    <>
      <Header resetStep={resetStep}></Header>
      <MainStyle>{Main()}</MainStyle>
    </>
  );
};

📁 Prefer

-prefer.jsx

  const filterList = () => {
    const firstFilterList = Data.filter(
      (item) => item.category[0] === firstChoice
    );
    const secondFilterList = firstFilterList.filter(
      (item) => item.category[1] === secondChoice
    );
    const thirdFilterList = secondFilterList.filter(
      (item) => item.category[2] === thirdChoice
    );

    const finalFilterList = thirdFilterList[0];
    return finalFilterList;
  };

filter문을 통해서 선택된 선택지만을 다시 필터링할 수 있게 하였습니다.

  const putResult = () => {
    switch (preferStage) {

      case 1:
        return (
          <First
            setPreferStage={setPreferStage}
            firstChoice={firstChoice}
            setFirstChoice={setFirstChoice}
            setSecondChoice={setSecondChoice}
            setThirdChoice={setThirdChoice}
          />
        );


      default:
        return (
          <Section>
            <Title>추천방식</Title>
            <BtnSection>
              <TypeSelect>
                <p>취향대로 추천해줄께</p>
              </TypeSelect>
            </BtnSection>
            <BtnWapper>
              <MoveBtn
                onClick={() => {
                  setPreferStage(1);
                }}
              >
                <p1>시작하기</p1>
              </MoveBtn>
            </BtnWapper>
          </Section>
        );
    }
  };
  return <>{putResult()}</>;
};

switch case문으로 단계를 처리했어요!

📁 steps

각각의 단계에 해당 하는 페이지들로 구성되어있습니다.

• First.jsx
• Second.jsx
• Third.jsx
• result.jsx

📁Random

랜덤 추첨 선택시 나타나는 컴포넌트입니다.

• 📁countdown.jsx

const CountDown = ({ setRandom }) => {
  const [time, setTime] = useState(3);

  useEffect(() => {
    time > 0 && setTimeout(() => setTime(time - 1), 1000);
  }, [time]);

  return (
    <Section>
      {time ? (
        <CountDownNumber>{time}</CountDownNumber>
      ) : (
        <RandomResult setRandom={setRandom} />
      )}
    </Section>
  );
};


export default CountDown;

카운트다운 되는 부분으로 useEffect 사용해서 구현했습니다.

• 📁randomresult.jsx

const RandomResult = ({ setRandom }) => {
  const drawRandom = () => {
    return Data[Math.floor(Math.random() * Data.length)];
  };

  const randomResult = drawRandom();

  return (
    <Section>
      <Title>결과</Title>
      <ImgSection>
        <img src={randomResult.img} alt={randomResult.name} />
      </ImgSection>
      <ResultName>{randomResult.name}</ResultName>
      <BtnWapper>
        <MoveBtn
          onClick={() => {
            setRandom(false);
          }}
        >
          <p>처음으로</p>
        </MoveBtn>
      </BtnWapper>
    </Section>
  );
};


export default RandomResult;

-random.jsx

📁 App.jsx

const App = () => {
  return (
    <>
      <GlobalStyles />
      <section>
        <MainSectionWrapper></MainSectionWrapper>
      </section>
    </>
  );
};

export default App;

전역스타일을 적용합니다.

🥺 소요 시간, 어려웠던 점

• 셀수없음
• react가 처음이라 어떤 방식으로 props를 구성하고, 선택지 필터링을 해야하는지 고민을 진짜 많이 한것 같아요...
  오류 나는 부분들에서는 OB분들의 도움을 받아 해결했습니다😭

🌈 구현 결과물

🎬배포링크❤️

https://github.com/DO-SOPT-WEB/MinseoKang/assets/111034927/6c4c3095-1c60-4256-b39d-14b8e1bf2256
-> 추천선택, 처음으로 이동시 모든 선택 초기화, 이전으로 이동시 선택되어있음
https://github.com/DO-SOPT-WEB/MinseoKang/assets/111034927/1a25589e-0f69-4eb5-bc27-981a05a9c59c
-> 랜덤선택

[lydiacho]

수고 너무너무 많았어요!!!
아사비의 딸(?)이라서 그런지 역시 리액트 처음이라고 하는데 조건부렌더링 하는 실력이 심상치 않은데요?!?!?!? 🫢
사실 개발동아리의 세미나는 시간이 한정적이기 때문에 모~~~든 내용을 다루는 건 불가능하잖아요!! 그렇기에 주요한 내용으로는 다뤄지지는 않았지만, 관습적으로 지켜야할 규칙 같은 것들은 처음 배울 땐 모르는게 당연한데요!
그런 지식을 시간이 지남에 따라 자연스럽게 습득시켜주는 방법이 바로 같은 과제를 한 다른 친구들의 코드를 보면서 의문을 품고, 물어보고, 새로 알아가고, 배워가는 과정이라고 생각해요!!!!

결론은, 지금 세미나에서 배운 내용 적용은 너무너무 잘하고 있고, 조금 더 욕심을 내서 개발을 해보고 싶다면! 다른 웨비들 코드 이리저리 구경 다니면서 생소한건 리뷰 달아서 질문하거나 찾아보는 등 조금씩 추가로 공부하는 방법이 큰 도움이 될거라는 꿀팁을 남기고 갑니당!!! (저도 요즘 그러고 있는데 너무 유익해요 👍 )

너무너무 수고 많았어요 ❤️❤️❤️

P.S. PR보고 살짝 슬펏던거. 민서를 도와준 다른 OB들이 누군진 몰라도.. 👀 나한테도 질문..해주라.. 나한테도 의지.. 해주라..

[lydiacho]

1주차 세미나 기억하기!! 이친구 ko로 바꿔주는거 잊지맙시당 !

[lydiacho]

보통 이렇게 불필요한 파일들은 처음 React 프로젝트를 생성하고, 구현 시작 전 초기세팅 시 싹 지워주고 시작하면 좋아요!!
나중에 왜 이 파일 있는데 안썼냐! 하는 경고나 에러가 뜰 수도 있고, 파일명이나 모듈명이 겹치면 골치아파질 수 있기 때문에!

🐵 숭이의 불필요한 파일 삭제

이거 제가 이번 4차 과제 시작하면서 초기세팅할 때 불필요한 파일들 삭제하고 기록한 커밋인데
이러한 파일들을 삭제하면 되구나 하고 참고용으로 봐주면 좋을 것 같아용!!!

[lydiacho]

겉에 묶어주고 있는 section은 스타일을 적용하지도 않기 때문에 불필요한 친구겠죠?? 지워주고 바로 MainSectionWrapper 컴포넌트를 GlobalStyles 아래에 위치시켜주면 좋을 것 같아요!

그리고, 이번 과제 코드리뷰하면서 웨비들의 코드에서 많이 발견된 내용인데,
<MainSectionWrapper></MainSectionWrapper>
이렇게 내부 내용물이 비어있는 태그는 열린태그, 닫힌태그를 모두 사용하지 않고 <MainSectionWrapper/>이렇게 self closing 태그로 표현할 수 있습니다!!
react eslint의 규칙에도 포함되어있는 내용인데용!!
훨씬 더 나은 가독성, 직관성을 위해 셀프 클로징 태그 형식을 사용하는 것을 습관화해봅시당 🐝

[lydiacho]

우리가 JSX 문법을 사용하기 때문에 element를 반환해주는건 맞는데, 우리는 그렇게 함으로써 함수형 컴포넌트를 생성해준거잖아용!? 따라서 일반적인 함수 호출 방식이 아닌, <컴포넌트 />를 사용해주면 됩니다!!
족,

Suggested change

	<MainStyle>{Main()}</MainStyle>
	<Main />

📚 JSX 공식문서
📚 Components 공식 문서

[lydiacho]

오타 발견!! BtnWapper로 작성되어있는데, 찾아보니까 원본 컴포넌트에서도 파일명은 BtnWrapper, 컴포넌트명은 BtnWapper로 되어있네요!! 그런데 random.jsx파일에서는 또 BtnWrapper라고 컴포넌트를 불러오고 있어요!!! 그래서 아마 두 군데 중 한 곳은 컴포넌트가 제대로 적용되고 있지 않을 것으로 보입니다🤔🤔🤔
이런 사소한 오타는 개발자를 정말 지끈지끈하게 만드는! 오류가 나는데, 대체 어디가 문제인지 찾지 못하게 만드는 골칫거리가 되기 쉽기 때문에 꼭고꼭 유의하기로 해요!!
오탈자 알려주거나 고쳐주는 vscode extension도 있으니까 찾아보고 설치해서 사용하는 것도 추천합니당 👍

[lydiacho]

이 태그 구조가 대부분의 컴포넌트에서 동일/유사하게 사용되고 있는 것 같아요!!
민서가 이번 과제에서 컴포넌트 분리 및 재사용성을 위해 반복 사용되는 단위 컴포넌트들을 아주 잘 분리해줬는데요!
조금만 더 모듈화를 해주는 방법은, 이러한 단위 컴포넌트들이 조합되는 구조가 동일하니까 하나하나 분리해주기보다 반복되는 구조 자체를 하나의 컴포넌트로 묶어서 반복사용해주면, 더욱 추상화 수준과 재사용성이 높아지겠죠?!

예를 들자면

<Section>
  <Title>...</Title>
  <BtnSection>...</BtnSection>
	<BtnWrapper>...</BtnWrapper>
</Section>

이렇게 생긴 Layout 컴포넌트를 생성하고, 반복되는 태그 내부에 달라지는 내용물들은 props 로 넘겨주는거죠!!
처음부터 그렇게 모듈화하는거 쉽지 않기 때문에 이번 과제에서 한것처럼 한단계씩 반복 사용되는걸 컴포넌트 분리 해가면서 감 잡으면 좋을 것 같아용 💚

[lydiacho]

제가 제안한 방법으로 모듈화 해준다면 현재 파일에서 무려 12줄을 차지하고 있는 import문들도 확! 간소화시킬 수 있겠죠?!

[lydiacho]

react로 넘어오면서 시맨틱 요소 까먹기 쉬운데 img 태그에 alt 챙겨준거 너무너무너무 대견하다 !!!

[lydiacho]

이 방법도 완전 좋고! 아래에서 randomResult.~ 로 각 프로퍼티에 접근하고 잇는걸 그냥 프로퍼티명으로 바로 접근할 수 있는 구조분해할당 방식이 있다는 점도 기억하고있기!!!!

Suggested change

	const randomResult = drawRandom();
	const {img, name} = drawRandom();

[lydiacho]

지금 민서가 First, Second, Third라는 세개의 컴포넌트로 UI구조는 동일하지만 내용만 달라지는 세 단계를 각기 다른 컴포넌트로 생성해주고 있는데요! 위 코멘트에서 말했던 것처럼 이렇게 구조가 반복되는 경우 꼭 공통 컴포넌트로 모듈화한 뒤, 각 단계마다 달라지는 내용물들은 배열 데이터 등으로 관리하면서 데이터를 컴포넌트에 바인딩(적재적소에 값 넣어주기)하는 방식으로 구현하는 연습을 해보면 아주아주 성장할 수 잇을거예용 😎

[lydiacho]

다른 컴포넌트는 다 잘해주었는데 요 Random 디렉토리 아래에 있는 세 컴포넌트 친구들! 이름 대문자로 시작하도록 바꿔줍시당!
컴포넌트 네이밍은 예상치못한 오류를 피하기 위해 꼭 대문자로 시작해줍시당!

📚 공식 문서

[se0jinYoon]

숭잔디가 도움되는 말을 많이 남겨두어서 추가적인 부분들만 남겨두었어요 !!
첫 리액트인데 야무지게 컴포넌트 분리해서 switch-case로 렌더링 처리해주고, prop도 잘 분기해서 내려주는 부분 아주아주 잘했다고 생각하면서 코드 리뷰 했습니다 ! 🥹
살짝씩 디벨롭 시킬 수 있는 부분들이나 추후에 많이 사용하게 될 부분들 관련해서 리뷰 남겨두었으니 도움이 되었으면 좋겠어요오 🍀
과제 하느라 수고했어요 💗💗💗

[se0jinYoon]

민서 코드에서는 first, second, third 로 단계별 컴포넌트를 만들어두어서 <Nav>1/3</Nav> 이 값이 동적으로 바뀔 필요는 없겠지만!

여기서 preferStage setter함수 말고도 preferStage state값 자체도 prop으로 받아오면
<Nav>1/3</Nav> 이 부분을 하드코딩된 값이 아니어도 <Nav>{preferStage}/3</Nav> 으로 바꿀 수 있겠죠 ?

[se0jinYoon]

지금 First.jsx 파일을 참고해보면 내부에서 받아온 Prop을 사용할 때

const First = ({ setPreferStage, setFirstChoice, firstChoice }) 

만 사용하고 있으니 이 두 가지는 안 넘겨줘도 되겠죠 ?!

[se0jinYoon]

이 파일은 jsx구문을 사용하지 않으니 확장자를 data.js로 바꿔줍시당 !

[se0jinYoon]

이 부분들이 first랑 second 컴포넌트에서 반복되서 사용되고 있는 것 같은데 !
이렇게 같은 컴포넌트와 동일한 로직을 가지고 반복해서 렌더링 해야하는 경우에는 map메소드를 사용하면 아주 편리하게 구현해볼 수 있답니다 !

예를 들어

const Second = ({ setPreferStage, setSecondChoice, secondChoice }) => {

  const CHOICE_DATA = ["domestic", "oversea", "asia"];
  const CHOICE_BTN_TEXT = ["국내", "해외", "아시아"];

  return (
    ...

    <BtnSection>
        {CHOICE_DATA.map((item, idx) => {
          <ChooseButton 
            key = {idx}
            onClick = {() => {setSecondChoice(item)}}
            $isselected = {secondChoice === item}
            className = {secondChoice === item ? "selected" : ""}
          > 
            <p>{CHOICE_BTN_TEXT[idx]}</p>
          </ChooseButton>
        })}
    </BtnSection>
    
   ...

와 같이 구현해볼 수 있겠죠 ! 이렇게 하면 중복된 코드를 줄여서 사용할 수 있어요 !
관련 아티클 첨부하고 갑니다 ! ㅎㅎ
반복된 컴포넌트 map으로 관리하기!