[ 3주차 기본/심화/생각 과제 ] 🍚 점메추 🍚 #3

hae2ni · 2023-11-08T14:44:08Z

✨ 구현 기능 명세

🌱 기본 조건

기본조건1

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

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

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

기본조건2

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

✅ Router 사용 금지 ❌

🧩 기본 과제

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

[취향대로 추천]

답변 선택
- 호버시 스타일 변화가 있습니다.
- 클릭시(선택시) 스타일 변화가 있습니다.
이전으로, 다음으로(결과보기) 버튼
- 아무것도 선택되지 않았을 시 버튼을 비활성화 시킵니다.
  
  → 눌러도 아무 동작 X
  
  → 비활성화일 때 스타일을 다르게 처리합니다.
- 이전으로 버튼을 누르면 이전 단계로 이동합니다.
- 다음으로 / 결과보기 버튼을 누르면 다음 단계로 이동합니다.
- 버튼 호버시 스타일 변화가 있습니다.
결과
- 선택한 정보들에 맞는 결과를 보여줍니다.

[ 랜덤 추천 ]

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

[ 공통 ]

결과 화면
- 다시하기 버튼
  
  → 랜덤추천이면 랜덤 추천 start 화면으로, 취향대로 추천이면 취향대로 추천 start 화면으로 돌아갑니다.
  
  → 모든 선택 기록은 리셋됩니다.

🌠 심화 과제

theme + Globalstyle 적용
- 전역으로 스타일을 사용할 수 있도록 적용해보세요
애니메이션
- 랜덤 추천 - 카운트다운에 효과를 넣어서 더 다채롭게 만들어주세요!
헤더
- 처음으로 버튼
  
  → 추천 종류 선택 화면일시 해당 버튼이 보이지 않습니다.
  
  → 처음 추천 종류 선택 화면으로 돌아갑니다.
  
  → 모든 선택 기록은 리셋됩니다.

[ 취향대로 추천 ]

단계 노출
- 3단계의 진행 단계를 보여줍니다.
이전으로 버튼
- 이전으로 돌아가도 선택했던 항목이 선택되어 있습니다.

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

생각과제

리액트에 대하여

컴포넌트는 어떤 기준과 방법으로 분리하는 것이 좋을까?

좋은 상태 관리란 무엇일까?

렌더링을 효과적으로 관리하는 방법은 무엇이 있을까?

Props Drilling이란 무엇이고 이를 어떻게 해결할 수 있는가?- 생각 과제

💎 PR Point

기본 과제

1.a,b

  {!isStart ? <MainHeader>원하는 추천 방식을 골라줘!</MainHeader> : null}
      <St.BtnWrapper>
        <ByTypeBtn
          isByType={isByType}
          setIsByType={setIsByType}
          isByRandom={isByRandom}
          isStart={isStart}
          handleStart={handleStart}
          setIsFirstStep={setIsFirstStep}
        />
        <ByRandomBtn
          isByRandom={isByRandom}
          setIsByRandom={setIsByRandom}
          isByType={isByType}
          isStart={isStart}
          handleStart={handleStart}
          setIsFirstStep={setIsFirstStep}
        />
      </St.BtnWrapper>

=> 두 개의 컴포넌트를 나열했고, 각자 props를 내려 주었습니다.
=> ByTypeBtn 컴포넌트의 경우,

  {!isByRandom && !isByType && (
        <Button onClick={handleClick}>취향대로 추천</Button>
      )}
      {!isByRandom && isByType && (
        <StartByType isStart={isStart} handleStart={handleStart} />
      )}
      {isByRandom && <></>}

와 같게 Random을 선택하면 렌더링되지 않도록 설정하였습니다 (반대도 마찬가지 입니다!)
StartByType은 취향대로 추천을 눌렀을 경우 나타나는 좀 커다란 컴포넌트입니다.

[ 취향대로 추천 ]
2. a,b

const Button = styled(St.ThreeButtonStyle)`
  background-color: ${({ theme, active }) =>
    active ? theme.colors.sub2 : theme.colors.background};

  &:hover {
    background-color: ${({ theme }) => theme.colors.sub2};
    ${({ theme }) => theme.fonts.title02};
  }
`;

=> styled-component 이용 (active가 클릭시 스타일 변화입니다)

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

  background-color: ${({ theme, disabled }) =>
    disabled ? theme.colors.grey : theme.colors.sub1};

=> 스타일을 다르게 처리했고, disabled로 비활성화 시켰습니다.

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

 const handleClickNextStep = useCallback(() => {
    if (isSelected) {
      dispatch({ type: "NEXT_STEP" });

      if (step === 1) {
        setFirstState(isSelected);
      } else if (step === 2) {
        setSecondState(isSelected);
      }

      setIsSelected(null);
    }
  }, [isSelected, dispatch, step, setFirstState, setSecondState]);


const handleClickPrevStart = useCallback(() => {
    dispatch({ type: "PREV_STEP" });
    setIsSelected(step === 1 ? firstState : secondState);
    if (step === 1) {
      handleStart();
    }
  }, [dispatch, step, firstState, secondState, setIsSelected, handleStart]);

=> 이전으로 누르면 이전 단계로 동작하는 부분을 useCallback 과 useReducer를 사용하여 구현하였습니다.

3.d 코드 생략 (3.a와 비슷하게 구현)

5.a 결과

  function makeResult(array) {
    return array.filter((ele) => {
      return (
        ele.category === category &&
        ele.type === type &&
        ele.isHuman === isHuman
      );
    });
  }

=> 결과를 걸러주는(?) 함수를 만들었습니다

a,b 숫자 카운트 다운 + 랜덤 결과

  useEffect(() => {
    const timer = setInterval(() => {
      if (countDown > 0) {
        setCountDown(countDown - 1);
      } else {
        clearInterval(timer);
        setShowResult(true);
      }
    }, 1000);

    return () => {
      clearInterval(timer);
    };
  }, [countDown]);

=> useEffect를 이용해 카운트 다운 설정

  function makeRandomPic(array) {
    let randomIdx = Math.floor(Math.random() * array.length);
    let randomPic = array[randomIdx];
    return randomPic;
  }

=> 랜덤 결과 도출 함수

심화과제

1.a 코드 생략 (theme.js와 GlobalStyle.js )에서 확인하실 수 있습니다용
2.a countDownAnimation.js에서 확인가능
3. a

    <Header
        isFirstStep={isFirstStep}
        setIsFirstStep={setIsFirstStep}
        handleGotoFirstPage={handleGotoFirstPage}
      />

=> 헤더에 가장 처음인지 아닌지를 알 수 있도록 하였고,

   {!isFirstStep && (
        <GotoFirst onClick={handleGotoFirstStep}>처음으로</GotoFirst>
      )}

=> 처음이 아니면 처음으로 버튼이 보이도록 하였습니다.

4.a 코드 생략(step 부분을 props로 넘겨줘서 구현)
5.a 이전으로 버튼 (3.c 부분에 같이 나와 있습니다! 그 전 부분을 각 단계에서 저장하고, 이전 버튼을 누르면 그 부분을 불러와서 구현)
7.a (마찬가지로 3.c 부분에 나와있습니다)

🥺 소요 시간, 어려웠던 점

5h
이모티콘 고르는데 1시간 가까이 쓴 게,,,
나머지는 다 괜찮았던 것 같습니다! 너무너무 재밌었어요!!

🌈 구현 결과물

[ 취향 추천 + 다시 하기 - 기본(1-a,b/ 2-a,b/ 3-c,d/4-a/6-a) ]
https://github.com/DO-SOPT-WEB/HyeinKwon/assets/100409061/302d311e-8e01-4b3e-aea9-23844afa33d9

[ 취향 추천 + 처음으로 + 심화(5.a, 3-a) ]
https://github.com/DO-SOPT-WEB/HyeinKwon/assets/100409061/d7cb76ba-82c3-435e-a235-a021bf5d4ae3

[ 랜덤 추천 + 처음으로 ]
https://github.com/DO-SOPT-WEB/HyeinKwon/assets/100409061/a5da5b79-d469-4d12-8a7f-0e5a11a9a37d

[ 랜덤 추천 + 다시 하기 - 기본(1-a,b/ 5.a,b/ 6.a) , 심화(2.a) ]
https://github.com/DO-SOPT-WEB/HyeinKwon/assets/100409061/39707450-f918-4609-9109-07b3e3d0ae4c

… week2

doyn511

여기 완전 내가 배울거 백만개... 많이 배워가! 완전 고생해따!!!!!!

doyn511 · 2023-11-13T07:42:23Z

week3/assign/src/components/common/MoveToBtn.jsx

+      {step === 4 ? (
+        <Button onClick={handleClickReStart}>다시하기</Button>
+      ) : (
+        <>
+          <Button onClick={handlePrevStep}>이전으로</Button>
+          <Button disabled={!isSelected} onClick={handleNextStep}>
+            {step === 3 ? "결과보기" : "다음으로"}


step을 따로 나눠서 지정해준게 너무.. 좋은거 같다!!!!
나는 그냥 줄줄이 props를 전달해서 중간에 props 값들이 꼬여버리는 일이 생겼거든........ㅜ

props drilling 넘 시러ㅠㅠㅠ 헷갈ㄹㅕㅠㅠ

doyn511 · 2023-11-13T07:44:54Z

week3/assign/src/components/common/MoveToBtn.jsx

나는 버튼을 각 이동하는 페이지마다 두었는데 자주 사용되는 컴포넌트는 확실히 이렇게 빼는게 좋은거 같당...

doyn511 · 2023-11-13T07:48:59Z

week3/assign/src/style/commonStyle.jsx

+const gap5rem = css`
+  gap: 5rem;
+`;
+
+const gap3rem = css`
+  gap: 3rem;
+`;
+
+const FlexColumnCenter = styled.div`
+  ${centerFelx}
+  flex-direction: column;
+`;
+
+const FlexRowCenter = styled.div`
+  ${centerFelx}
+  flex-direction: row;
+`;


자주 쓰는 스타일이라 이렇게 따로 빼준거야 ..?
이 속성들이 쓰이는 컴포넌트들에 직접 쓰는 것보다 더 이점이 있는걸까..?!

계속 반복되는 부분을 피하기도 하고, 조금씩 변화하는 부분을 채울 수도 있으니까?
근데 저거 시작하기 전에 했어야 했는데 다 끝나고 하나씩 옮긴 거라 뭐,,, 여기선 그다지 실효성은 없는 것 같긴 하다ㅠ

스타일은 정말 베이직하게 틀이 공통되는게 아니라면 오히려 불필요한 리소스를 들이는 것보다 그냥 직접 쓰는게 더 좋을 것 같아서 잘 고려해보면 좋을 것 같아용!

doyn511 · 2023-11-13T07:54:36Z

week3/assign/src/components/common/MainHeader.jsx

혹시 이 MainHeader.jsx 파일이 어떤 역할을 하는지 알려줄 수 있나아..?
위에 보니까 Header.jsx는 또 따로 있어가지구..

아 MainHeader가 그 질문 바뀌는 부분ㅇㅣ야! Header가 그냥 처음으로 이거 버튼 나오는 부분이구!!

doyn511 · 2023-11-13T07:56:43Z

week3/assign/src/components/Header.jsx

+  function handleGotoFirstStep() {
+    handleGotoFirstPage();
+  }


props로 handleGotoFirstPage 를 받아왔는데 바로 사용이 불가능한거야?! 그래서 다시 함수를 만들어준건가??

아니! 바로 사용 가능해!!!
저렇게 둔 이유는 막 크게는 없고 혹시 인자 넘길 일 있을까봐 그렇게 한 건데, 막상 다 끝나니깐 없네,,,? 바꿔도 되겠다!

doyn511 · 2023-11-13T08:03:53Z

week3/assign/src/components/ByRandom/ByRandomBtn.jsx

+import styled from "styled-components";
+import ByRandomStart from "./ByRandomStart";
+
+import { St } from "../../style/commonStyle";


TwoButtonStyle 가 아닌St 요렇게 불러오는 이유가 뭐야?
나는 필요한 스타일 컴포넌트가 있으면 그냥 그 이름 그대로를 import 해왔는대 밑에 코드를 보다 보니까 St. TwoButtonStyle 요렇게 쓰는거 같아서..!

하나의 객체 안에 선언을 해주었는데, import 구문에 여러개 스타일 컴포넌트들이 불려오는 게 너무 번잡하다고 느껴서,,?

doyn511 · 2023-11-13T08:32:57Z

week3/assign/src/components/ByRandom/ByRandomBtn.jsx

+  function handleClick() {
+    setIsByRandom((prev) => !prev);
+    setIsFirstStep(false);
+  }


setIsByRandom이 앞에서 선언만 되고 어떤 기능을 하지 않는지 정의되지 않았을 경우에, 다른 컴포넌트에서 props로 받아와 정의해서 사용할 수 있으니까 그런거겠지 ...? 나는 안되는 줄 알고 일단 사용되지 않더라도 일단 정의하고 props로 넘겨줬었거든..ㅜㅜ

doyn511 · 2023-11-13T13:16:35Z

week3/assign/src/components/ByRandom/ByRandomBtn.jsx

+          handleStart={handleStart}
+        />
+      )}
+      {isByType && null}


혹시 이 코드는 왜 넣었는지 알려줄 수 있을까....? 어떤 역할인지 궁금해🥺

doyn511 · 2023-11-13T13:56:53Z

week3/assign/src/components/ByType/ChooseByType.jsx

+      {step == 1 && (
+        <CategoryChoose
+          step={step}
+          category={category}
+          setCategory={setCategory}
+          isSelected={isSelected}
+          setIsSelected={setIsSelected}
+        />
+      )}
+      {step == 2 && (
+        <TypeChoose
+          step={step}
+          type={type}
+          setType={setType}
+          isSelected={isSelected}
+          setIsSelected={setIsSelected}
+        />
+      )}
+      {step === 3 && (
+        <HumanChoose
+          step={step}
+          isHuman={isHuman}
+          setIsHuman={setIsHuman}
+          isSelected={isSelected}
+          setIsSelected={setIsSelected}
+        />
+      )}
+      {step === 4 && (
+        <ResultByType category={category} type={type} isHuman={isHuman} />


step을 따로 주니까 요렇게 한 컴포넌트에서 props를 넘겨주는걸 볼 수 있네... 나도 리팩토링 할 때 이렇게 해야겠다!

doyn511 · 2023-11-13T15:48:21Z

week3/assign/src/components/ByType/HumanChoose.jsx

+        {isHumanArray.map((ele) => {
+          return (
+            <Button
+              key={ele}
+              onClick={() => handleButtonClick(ele)}
+              active={isSelected === ele}>
+              {ele}
+            </Button>
+          );
+        })}


map 함수 써서 Button 요렇게 많이 만들 수 있구나.. 코드 완전 간결해보여!

binllionaire

파일 하나하나 간결해서 너무 보기 좋았고 새로운 코드들 많이 배워갈 수 있어서 좋았어용 칭찬 밖에 없는 리뷰라 어뜩하지,,,, 🥹 고생했어 🖤

binllionaire · 2023-11-14T05:18:48Z

week3/assign/src/components/ByRandom/ByRandomBtn.jsx

+export default function ByRandomBtn(props) {
+  const {
+    isByType,
+    setIsByRandom,
+    isByRandom,
+    handleStart,
+    isStart,
+    setIsFirstStep,
+  } = props;


props 구조분해할당 나도 써먹어봐야겠어 🤠

binllionaire · 2023-11-14T05:22:20Z

week3/assign/src/components/ByRandom/ByRandomStart.jsx

+const StartBtn = styled.button`
+  ${St.centerFelx}
+


centerFelx 요고 먼지 알려 줄 수 있나요?!

binllionaire · 2023-11-14T05:41:47Z

week3/assign/src/components/ByType/CategoryChoose.jsx

+  return (
+    <St.WrapperForThree>
+      <MainHeader>카테고리를 골라봐!</MainHeader>


왕 이렇게 St로 한번에 import받고 할 수 있었네,, 쨩쨩!!!

binllionaire · 2023-11-14T05:44:56Z

week3/assign/src/components/ByType/ResultByType.jsx

+          <ImgWrapper key={pic.name} src={pic.pic} alt={pic.alt} />
+          <ImgName>{pic.name}</ImgName>


대체 텍스트 꼼꼼하당 최고 😎

binllionaire · 2023-11-14T05:46:29Z

week3/assign/src/components/ByRandom/RandomPage.jsx

+    <Wrapper>
+      <MainHeader>오늘의 이모티콘은!!</MainHeader>
+      <RandomResult />
+      <ReStartBtn onClick={handleClickReStart}>다시하기</ReStartBtn>
+    </Wrapper>


컴포넌트 분리 진짜 머싯다 !! 여기도 그렇구 다 파일 하나하나 너무 간결하고 보기 조아 🥺

binllionaire · 2023-11-14T05:47:45Z

week3/assign/src/style/GlobalStyle.js

+    /* 미디어쿼리 적용 예정 */
+    /* font-size: 62.5%; */
+
+    /* @media (min-width: 1200px){ 
+      font-size: 62.5%;
+    } */
+    @media (min-width: 1000px){ 
+      font-size: 70%
+    }
+    @media (min-width: 931px) and (max-width:999px){ 
+      font-size: 62.5%;
+    }
+    //Surface Pro 7
+    @media (min-width: 901px) and (max-width:930px){ 
+      font-size:62.5%;
+    }
+    //
+    @media (min-width: 831px) and (max-width:900px){ 
+      font-size: 160%;
+    }
+    //iPad Air
+    @media (min-width: 790px) and (max-width:830px){ 
+      font-size: 150%;
+    }
+    //iPad Mini
+    @media (min-width: 750px) and (max-width:789px){ 
+      font-size: 145%;
+    }
+    @media (min-width: 600px) and (max-width:749px){ 


여기 반응형 맛집이네요

binllionaire · 2023-11-14T05:50:20Z

week3/assign/src/style/theme.js

+function FONT({ weight, size, lineHeight, letterSpacing }) {
+  return `
+      font-family: "Pretendard";
+      font-weight : ${weight};
+      font-size : ${size}rem;
+      line-height : ${lineHeight}rem;
+      letter-spacing : ${letterSpacing}rem;
+      `;
+}
+
+const fonts = {
+  neon: FONT({ weight: 900, size: 5.0, lineHeight: 2.6, letterSpacing: 0 }),
+
+  title01: FONT({ weight: 700, size: 2.0, lineHeight: 2.6, letterSpacing: 0 }),
+  title02: FONT({ weight: 500, size: 1.6, lineHeight: 2.0, letterSpacing: 0 }),
+
+  body01: FONT({ weight: 700, size: 1.4, lineHeight: 1.6, letterSpacing: 0 }),
+  body02: FONT({ weight: 500, size: 1.2, lineHeight: 1.6, letterSpacing: 0 }),
+  body03: FONT({ weight: 400, size: 1.2, lineHeight: 1.6, letterSpacing: 0 }),
+  body04: FONT({ weight: 500, size: 1.1, lineHeight: 1.4, letterSpacing: 0 }),
+  body05: FONT({ weight: 400, size: 1.1, lineHeight: 1.4, letterSpacing: 0 }),
+};
+


우와 이렇게 해서 여기 이렇게 해서 ${({ theme }) => theme.fonts.body02}; 요롷게 쓸 수 있었구나 대박 진짜 많이 배워가요

Jun-min2 · 2023-11-15T16:44:36Z

week3/assign/src/components/Header.jsx

+
+export default function Header(props) {
+  const { isFirstStep, handleGotoFirstPage } = props;
+


처음부터 export를 쓰고 컴포넌트를 만들 수 있구나! 신기하당

Jun-min2 · 2023-11-15T17:06:04Z

week3/assign/src/components/Header.jsx

+    <HeaderWrapper>
+      <HeaderTitle>이모티콘 추천해줄게</HeaderTitle>
+      {!isFirstStep && (
+        <GotoFirst onClick={handleGotoFirstStep}>처음으로</GotoFirst>
+      )}
+    </HeaderWrapper>
+  );


컴포넌트를 태그처럼 쓸 수도 있는거구나..

Jun-min2 · 2023-11-15T17:16:18Z

week3/assign/src/components/Header.jsx

+  background-color: ${({ theme }) => theme.colors.main};
+`;
+
+const HeaderTitle = styled.h1`
+  ${({ theme }) => theme.fonts.title01};
+`;
+
+const GotoFirst = styled.button`
+  ${St.centerFelx}


style을 theme로 넣는건 무슨 차이가 있는걸까효,,?

Jun-min2 · 2023-11-15T17:45:36Z

week3/assign/src/components/MainWrapper.jsx

+    <Wrapper>
+      {!isStart ? <MainHeader>원하는 추천 방식을 골라줘!</MainHeader> : null}


!isStart가 false일때 null 값이면 빈페이지가 되는걸까요?

Suggested change

<Wrapper>

{!isStart ? <MainHeader>원하는 추천 방식을 골라줘!</MainHeader> : null}

<Wrapper>

{!isStart && <MainHeader>원하는 추천 방식을 골라줘!</MainHeader>}

요로코롬 하면 되겠당

Jun-min2 · 2023-11-15T17:47:37Z

week3/assign/src/style/GlobalStyle.js

+    @media (min-width: 471px) and (max-width:580px){ 
+      font-size: 93%;
+    }
+    //
+    @media (min-width: 451px) and (max-width:470px){ 
+      font-size: 16px;
+    }


오아 1주차 심화과제에 있던 반응형을 이렇게 만드는거였구나

Jun-min2 · 2023-11-15T17:50:32Z

늦어서 미안이슈..

seobbang · 2023-11-29T08:43:23Z

week3/assign/src/App.jsx

+    <Wrapper>
+      <Header
+        isFirstStep={isFirstStep}
+        setIsFirstStep={setIsFirstStep}


요 친구는 Header에서 받아오지 않는 것 같아용!

seobbang · 2023-11-29T08:46:10Z

week3/assign/src/style/commonStyle.jsx

+const gap5rem = css`
+  gap: 5rem;
+`;
+
+const gap3rem = css`
+  gap: 3rem;
+`;
+
+const FlexColumnCenter = styled.div`
+  ${centerFelx}
+  flex-direction: column;
+`;
+
+const FlexRowCenter = styled.div`
+  ${centerFelx}
+  flex-direction: row;
+`;


스타일은 정말 베이직하게 틀이 공통되는게 아니라면 오히려 불필요한 리소스를 들이는 것보다 그냥 직접 쓰는게 더 좋을 것 같아서 잘 고려해보면 좋을 것 같아용!

seobbang · 2023-11-29T08:46:56Z

week3/assign/src/components/Header.jsx

+      {!isFirstStep && (
+        <GotoFirst onClick={handleGotoFirstStep}>처음으로</GotoFirst>
+      )}


아 깔꼼하당

seobbang · 2023-11-29T08:48:43Z

week3/assign/src/components/MainWrapper.jsx

+    <Wrapper>
+      {!isStart ? <MainHeader>원하는 추천 방식을 골라줘!</MainHeader> : null}


Suggested change

<Wrapper>

{!isStart ? <MainHeader>원하는 추천 방식을 골라줘!</MainHeader> : null}

<Wrapper>

{!isStart && <MainHeader>원하는 추천 방식을 골라줘!</MainHeader>}

요로코롬 하면 되겠당

seobbang · 2023-11-29T08:52:09Z

week3/assign/src/components/MainWrapper.jsx

+        <ByTypeBtn
+          isByType={isByType}
+          setIsByType={setIsByType}
+          isByRandom={isByRandom}
+          isStart={isStart}
+          handleStart={handleStart}
+          setIsFirstStep={setIsFirstStep}
+        />
+        <ByRandomBtn
+          isByRandom={isByRandom}
+          setIsByRandom={setIsByRandom}
+          isByType={isByType}
+          isStart={isStart}
+          handleStart={handleStart}
+          setIsFirstStep={setIsFirstStep}
+        />


각 컴포넌트까지 살펴보았을 때, 두 버튼 컴포넌트가 각각 존재하는 것에 비해 로직이 분리되지 않고 있는 것 같아! 그래서 각 컴포넌트를 하나씩 만들지 말고, 하나의 컴포넌트로 만들어서 그 안에서 분기처리를 해주는 것이 더 적합하지 않을까 하는 생각입니당 :)

hae2ni added 30 commits October 17, 2023 22:51

🎨 실습

dce3223

Merge branch 'week1' of https://github.com/DO-SOPT-WEB/HyeinKwon into…

df5d69e

… week2

🍱 data.js 추가

c1c28cc

🎨 index.js 추가

5f4973f

✨ 1.a 이미지 호버시 어둡게 처리되며 제목 사진 나타남 구현

fe862b1

💄 title, summary 꾸미기

7a89d46

✨ 스크롤에 따라 투명도 다르게

c90b73f

⚡️ 코드 깔끔하게 정리

84b6da4

🍱 상수 데이터 추가

5d223ce

🎨 index.js 연결

22646ca

📝 주석 수정

971f235

🔥 불필요 코드 삭제

778df50

🔥 불필요 코드 삭제

b91b555

✨ 과제 2 1, 2 번 마무리

e3b8eab

🎨 chckbox checked 표시 지우기

df26c1e

🎨 3,4번 기본

19e6012

💄 hidden 요소 추가

d7ce397

🎨 modal 일단 html에 박아놓기

73dacb3

💄 modal 꾸미기

7e8630c

🎨 modal radio 버튼으로 변경 id 추가

8f3e1b1

✨ 5번 a,b,c,e 구현

e66a1c8

💄 css 추가

03c93b8

✨ 모달 금액 TOTAL 반영

448be92

✨ 5.d 완료

8239ecd

🎨 코드 줄 바꿈

71f8e55

🍱 Data 추가

32dbb97

💄 제목 설명 가운데 정렬

bcdee23

🎨 1번과제 심화 1번

86673a6

✨ preview 버튼 추가

e6342ec

🥅 심화 1번 자잘한 에러 제거

65a1171

hae2ni added 7 commits November 8, 2023 22:55

💄 공통되는 style 정리

67bba6b

💄 파비콘 설정

ea0381d

💄 카운트다운 할 때 글자 크기 크게 수정

494c8a9

💄 스타일 수정

06736e3

💄 공통된 스타일 묶기

f26dab8

💄 disabled일 때 스타일 다르게

a6aa09f

🚑 다시 돌아왔을 때 저장 안되는 오류 수정

5438ce3

hae2ni requested review from binllionaire, seobbang, doyn511 and Jun-min2 November 9, 2023 05:41

hae2ni added 3주차 기본과제 심화과제 생각과제 labels Nov 9, 2023

hae2ni self-assigned this Nov 9, 2023

hae2ni added 5 commits November 9, 2023 14:48

📝 생각 과제

a274e91

📝 week 생각과제

47d48d0

🚚 DATA.js 폴더 이동

7855cb2

🚚 DATA.js 폴더구조 변경

d31263a

💄 styleComponent 변경

0485b64

doyn511 reviewed Nov 13, 2023

View reviewed changes

binllionaire reviewed Nov 14, 2023

View reviewed changes

Jun-min2 reviewed Nov 15, 2023

View reviewed changes

seobbang reviewed Nov 29, 2023

View reviewed changes

		<ImgWrapper key={pic.name} src={pic.pic} alt={pic.alt} />
		<ImgName>{pic.name}</ImgName>


		export default function Header(props) {
		const { isFirstStep, handleGotoFirstPage } = props;

		<Wrapper>
		{!isStart ? <MainHeader>원하는 추천 방식을 골라줘!</MainHeader> : null}

[ 3주차 기본/심화/생각 과제 ] 🍚 점메추 🍚 #3

Are you sure you want to change the base?

[ 3주차 기본/심화/생각 과제 ] 🍚 점메추 🍚 #3

Conversation

hae2ni commented Nov 8, 2023 • edited by binllionaire Loading

✨ 구현 기능 명세

🌱 기본 조건

🧩 기본 과제

🌠 심화 과제

생각과제

💎 PR Point

기본 과제

심화과제

🥺 소요 시간, 어려웠던 점

🌈 구현 결과물

doyn511 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

doyn511 Nov 13, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

binllionaire left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Jun-min2 commented Nov 15, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hae2ni commented Nov 8, 2023 •

edited by binllionaire

Loading

doyn511 Nov 13, 2023 •

edited

Loading