[3주차 기본/심화/생각 과제] Would You Like Something to Drink? #3

SynthiaLee · 2023-11-10T14:22:48Z

✨ 구현 기능 명세

🌱 기본 조건

기본조건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

랜덤 선택 혹은 토너먼트를 useState로 빼서 설정해주었습니다! currentStage에 따라 Random 혹은 Tournament 컴포넌트를 반환하고 default 로는 랜덤과 토너먼트를 선택할 수 있는 페이지를 반환하도록 해주었습니다.

  const [currentStage, setCurrentStage] = useState("");
  const renderOption = () => {
    switch (currentStage) {
      case "random":
        return <Random />;
      case "tournament":
        return <Tournament setCurrentStage={setCurrentStage} />;
      default:
        return (
          <Home>
            <HomeTitle>How would you like to choose your drink?</HomeTitle>
            <ChoiceBox>
              <ChooseBox
                type="button"
                onClick={() => {
                  setCurrentStage("random");
                }}
              >
                Random!
              </ChooseBox>
              <ChooseBox
                type="button"
                onClick={() => {
                  setCurrentStage("tournament");
                }}
              >
                Tournament!
              </ChooseBox>
            </ChoiceBox>
          </Home>
        );
    }
  };

헤더의 reset버튼은 위의 currentStager값이 ''이 아닐때만 렌더링되도록 해주었습니다!

    if (currentStage !== "") {
      return (
        <ResetBtn
          type="button"
          onClick={() => {
            setCurrentStage("");
          }}
        >
          Start Over
        </ResetBtn>
      );
    }
  };

토너먼트 안에서의 단계 역시 useState로 관리해준 후 switch 문을 통해 각 단계에 맞게 해당 단계 컴포넌트를 return 해주었습니다.

const renderTournament = () => {
    switch (tournamentStage) {
      case 0:
        return (
          <>
            <HomeTitle>How would you like to choose your drink?</HomeTitle>
            <TournamentBox>Tournament!</TournamentBox>
            <StartBtn
              type="button"
              onClick={() => {
                setTournamentStage(1);
              }}
            >
              Start!
            </StartBtn>
          </>
        );
      case 1:
        return (
          <>
            <FirstStage
              tournamentStage={tournamentStage}
              setTournamentStage={setTournamentStage}
              firstChoice={firstChoice}
              setFirstChoice={setFirstChoice}
              setSecondChoice={setSecondChoice}
              setThirdChoice={setThirdChoice}
            />
            <Progress>{tournamentStage} / 3</Progress>
          </>
        );
      case 2:
        return (
          <>
            <SecondStage
              tournamentStage={tournamentStage}
              setTournamentStage={setTournamentStage}
              secondChoice={secondChoice}
              setSecondChoice={setSecondChoice}
            />
            <Progress>{tournamentStage} / 3</Progress>
          </>
        );
      case 3:
        return (
          <>
            <ThirdStage
              tournamentStage={tournamentStage}
              setTournamentStage={setTournamentStage}
              thirdChoice={thirdChoice}
              setThirdChoice={setThirdChoice}
              filterList={filterList}
            />
            <Progress>{tournamentStage} / 3</Progress>
          </>
        );
      case 4:
        return (
          <TournamentResult
            filterList={filterList}
            setTournamentStage={setTournamentStage}
            setFirstChoice={setFirstChoice}
            setSecondChoice={setSecondChoice}
            setThirdChoice={setThirdChoice}
          />
        );
    }
  };

토너먼트의 각 단계에서 선택된 값에 맞게 상수파일에서 filter하는 함수를 짜주었습니다

const filterList = () => {
    const firstFilteredList = DRINK_LIST.filter(
      (item) => item.category[0] === firstChoice
    );

    const secondFilteredList = firstFilteredList.filter(
      (item) => item.category[1] === secondChoice
    );

    const thirdFilteredList = secondFilteredList.filter(
      (item) => item.category[2] === thirdChoice
    );

    const finalResult = thirdFilteredList[0];

    return finalResult;
  };

랜덤 선택의 카운트 다운은 animation 을 활용했습니다!

const TimeBox = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;

  width: calc(100vh - 20rem);
  height: calc(100vh - 20rem);

  ${({ theme }) => theme.fonts.subtitle};

  animation: 1s anim-lineUp ease-out infinite;

  @keyframes anim-lineUp {
    0% {
      opacity: 0;
      transform: translateY(80%);
    }
    20% {
      opacity: 0;
    }
    50% {
      opacity: 1;
      transform: translateY(0%);
    }
    100% {
      opacity: 1;
      transform: translateY(0%);
    }
  }
`;

보다 수월하게 css를 적용하기 위해 Styled-Components로 코드를 짜봤습니다!
Globalstyle로 css 초기 설정을 해준 뒤 theme으로 테마 색상 및 테마 폰트를 적용시켜주었습니다!

const colors = {
  navy: "#22668d",
  blue: "#8ecddd",
  orange: "#ffcc70",
  cream: "#fffadd",
  black: "#000000",
  white: "#ffffff",
  disabled_button: "#b1ad9a",
};

🥺 소요 시간, 어려웠던 점

8h
전반적인 구조를 생각하는게 제일 중요하고 시간을 많이 쏟은 부분인 것 같습니다!
어려운 점은 아니고 오랜만에 리액트 쓰니 신났어요 ٩(๑❛ᴗ❛๑)۶

🌈 구현 결과물

https://puzzled-attack-df1.notion.site/3-08749f949d3a405990ca8e88eb34479a?pvs=4

aazkgh

OB의 코드는 넘넘 귀하다,,!!!! props 넘기는 게 너무 어색하기도 하고 React는 초면이라 다른 사람 코드를 보면서 많이 배워가는 것 같아욤❤❤❤ 시연 언니랑 금잔디해서 넘 행복해~~~~~~~~!~!!~~!!

그래도 PR 제목은 바꿔주세요,,,><

aazkgh · 2023-11-12T18:44:43Z

week3/World-Cup/README.md

,,,나 이거 지웠는데 이 파일은 남겨두는 게 좋나,,,,,?

지워두 될듯,, 나두 지워야징😅

aazkgh · 2023-11-12T18:45:35Z

week3/World-Cup/src/App.css

😮비,,,비었어요 선생님,,,!!

aazkgh · 2023-11-12T18:46:27Z

week3/World-Cup/src/assets/data.js

@@ -0,0 +1,113 @@
+import americano from "./images/americano.jpg";


직접 경로를 붙여넣지 않고 상수명 붙여서 불러오는 이유가 있으까??? (단순 궁금증입니다.)

aazkgh · 2023-11-12T18:46:58Z

week3/World-Cup/style/theme.js

+  disabled_button: "#b1ad9a",
+};
+
+const fonts = {


언니 거 이 부분 보고 나도 폰트 적용해봤어 ㅎㅎㅎㅎㅎㅎㅎㅎ

aazkgh · 2023-11-13T08:30:11Z

week3/World-Cup/src/App.jsx

+  background-color: ${({ theme }) => theme.colors.orange};
+  color: ${({ theme }) => theme.colors.navy};
+
+  user-select: none;


와 저 이 속성 처음 봤어요 ㅎㅎ 새로운 거 알아갑니다~~~~~~~~~

aazkgh · 2023-11-13T08:38:18Z

week3/World-Cup/components/Tournament.jsx

+  ${({ theme }) => theme.fonts.body_bold};
+`;
+
+const StartBtn = styled.button`


TournamentResult.jsx에 있는 BackBtn과 위에 있는 Button까지 요렇게 3개의 스타일드 컴포넌트까지 기본적인 구성이 똑같은데 상속 활용해서 스타일드 컴포넌트를 만들면 더 깔끔한 코드가 되지 않을까용??

aazkgh · 2023-11-13T08:54:43Z

week3/World-Cup/components/Tournament.jsx

+  const filterList = () => {
+    const firstFilteredList = DRINK_LIST.filter(
+      (item) => item.category[0] === firstChoice
+    );
+
+    const secondFilteredList = firstFilteredList.filter(
+      (item) => item.category[1] === secondChoice
+    );
+
+    const thirdFilteredList = secondFilteredList.filter(
+      (item) => item.category[2] === thirdChoice
+    );
+
+    const finalResult = thirdFilteredList[0];
+
+    return finalResult;
+  };


Suggested change

const filterList = () => {

const firstFilteredList = DRINK_LIST.filter(

(item) => item.category[0] === firstChoice

);

const secondFilteredList = firstFilteredList.filter(

(item) => item.category[1] === secondChoice

);

const thirdFilteredList = secondFilteredList.filter(

(item) => item.category[2] === thirdChoice

);

const finalResult = thirdFilteredList[0];

return finalResult;

};

const filterList = () => {

let filteredList = DRINK_LIST;

const choices = [firstChoice, secondChoice, thirdChoice];

choices.forEach((choice, i) => {

filteredList = filteredList.filter((item) => item.category[i] === choice);

});

return filteredList;

};

지금 상수 list에 있는 값 중에서 결과값과 일치하는 조건을 가진 값들을 빼오는 과정인 것 같은데
똑같은 비교 과정을 반복해서 써주는 것보다 forEach를 사용해서 이렇게 작성해주면 더 간결해 보이지 않을까요?ㅎㅎ,,

aazkgh · 2023-11-13T09:22:06Z

week3/World-Cup/components/FirstStage.jsx

+        </Choice>
+      </ChoiceBox>
+      <ButtonBox>
+        <Button


이 ButtonBox 컴포넌트 내부의 자식들을 포함한 내용이 First, Second, Third Stage 모두 똑같이 작동 및 구성되는 것 같은데 아예 이걸 컴포넌트로 빼는 게 어떨까요?? 매 컴포넌트에서 재사용되는 부분이니까 충분히 컴포넌트로 빼도? 가능할 것 같다는 생각-!

22!!!!! 가형이 의견에 동의합니당!!! 나두 재사용하도록 고칠 거 옴총 많은데 😮‍💨

aazkgh · 2023-11-13T09:27:25Z

week3/World-Cup/components/FirstStage.jsx

+  return (
+    <FirstStageContainer>
+      <StageTitle>Choose your preference</StageTitle>
+      <ChoiceBox>


이 ChoiceBox 내부도,,,!! ChoiceBox 컴포넌트 내부에서 mapping 돌려주면 더 이쁠 거 같긴 하다🤭

뜽희가 재훈 오빠 코드에 달아준 리뷰를 참고했습니다 ㅎㅎㅎㅎ

aazkgh · 2023-11-13T09:40:50Z

week3/World-Cup/components/Tournament.jsx

+  const [firstChoice, setFirstChoice] = useState("");
+  const [secondChoice, setSecondChoice] = useState("");
+  const [thirdChoice, setThirdChoice] = useState("");


이 3가지 state들을 꼭 별도로 관리해줘야 할까요??? 아무래도 셋 다 선택된 선택지 값을 저장하는 거다 보니까,,굳이 다른 state로 쪼개서 별도로 관래해줄 필요가 없을 것 같아서요! 특히, FirstStage.jsx 보면 previous 누를 때 3 state가 별도로 설정되는데 조금 더 심플하게 갈 수 있을 것 같아요!!

일단 제가 생각한 방법은 이 state들을 하나의 배열로 만들어서 하나의 state로 관리하는 방법을 생각해봤습니다!! 더 좋은 방법 있다면 저한테도 알려주세요❤

나두 가형이랑 동일한 생각!! 한 번에 관리해주는 게 좋을 것 같다는 생각이 들어!! 실제로 나도 그렇게 구현했구 :)
더 좋은 방법이 있으려나...?

jungwoo3490

확실히 React 오니까 사람마다 컴포넌트 분리하는 기준도 다르고 설계 방법도 달라서 코리하는 재미도 있고 많이 배우는 것 같아!!! 심화과제까지 하느라 넘넘 고생했어 체고다!!!!! 👍🏻👍🏻👍🏻

jungwoo3490 · 2023-11-14T15:20:18Z

week3/World-Cup/components/FirstStage.jsx

+        </Choice>
+      </ChoiceBox>
+      <ButtonBox>
+        <Button


22!!!!! 가형이 의견에 동의합니당!!! 나두 재사용하도록 고칠 거 옴총 많은데 😮‍💨

jungwoo3490 · 2023-11-14T15:23:33Z

week3/World-Cup/components/FirstStage.jsx

+
+export default FirstStage;
+
+const FirstStageContainer = styled.section`


시맨틱하게 div 말고 section 디테일 좋다 👍🏻👍🏻👍🏻

jungwoo3490 · 2023-11-14T15:24:58Z

week3/World-Cup/components/FirstStage.jsx

+  background-color: ${({ theme }) => theme.colors.blue};
+  color: ${({ theme }) => theme.colors.white};


theme 적용한곤가?? GlobalStyle밖에 사용 안 해봤는데 나도 적용해봐야겠다!!!

jungwoo3490 · 2023-11-14T15:28:03Z

week3/World-Cup/components/FirstStage.jsx

+  }
+
+  &:disabled {
+    background-color: ${({ theme }) => theme.colors.disabled_button};


theme 진짜 좋은 것 같아... 가독성도 좋고 엄청 편리해보여!!!!!

jungwoo3490 · 2023-11-14T15:33:09Z

week3/World-Cup/components/FirstStage.jsx

+  &:disabled {
+    background-color: ${({ theme }) => theme.colors.disabled_button};
+    color: ${({ theme }) => theme.colors.navy};
+    cursor: not-allowed;


처음 보는 속성값이다!!! 찾아보니까 금지 표시 커서가 뜬다구 하네 신기신기!!

jungwoo3490 · 2023-11-14T16:26:33Z

week3/World-Cup/components/ThirdStage.jsx

+
+import React from "react";
+
+const ThirdStage = (ThirdStageProps) => {


각 Stage 컴포넌트 구조가 동일하고 선택 옵션만 다른 것 같은데 이러면 Stage 컴포넌트를 하나로 묶어 빼고 Prop으로 각 레벨 옵션 데이터 넘겨줘서 map으로 뿌리는 게 재사용성이 더 좋을 것 같다는 생각이 들어!!

jungwoo3490 · 2023-11-14T16:35:33Z

week3/World-Cup/components/Tournament.jsx

+  const [firstChoice, setFirstChoice] = useState("");
+  const [secondChoice, setSecondChoice] = useState("");
+  const [thirdChoice, setThirdChoice] = useState("");


나두 가형이랑 동일한 생각!! 한 번에 관리해주는 게 좋을 것 같다는 생각이 들어!! 실제로 나도 그렇게 구현했구 :)
더 좋은 방법이 있으려나...?

jungwoo3490 · 2023-11-14T17:18:50Z

week3/World-Cup/src/App.jsx

+const SET_STAGE = "SET_STAGE";
+const RESET_STAGE = "RESET_STAGE";


요 부분은 상수명으로 가져다 쓸 거면 데이터를 정수값으로 줘도 괜찮지 않을까...? 확실하진 않지만.....

상수명으로 가져다 써서 어떠한 비교를 한다고 생각하면 의미없는 정수로 줬을 때 의도치 않게 로직이 잘못 적용될 수 있기 때문에, 유일할 수 있도록 이렇게 쓰는게 맞다고 생각해요! 정수값으로 주려면 아무래도 객체 같은걸로 묶으면 또 가능할 수도 있겠다

jungwoo3490 · 2023-11-14T17:19:35Z

week3/World-Cup/src/App.jsx

+  flex-direction: column;
+  align-items: center;
+
+  width: calc(100vw - 20rem);


나도 시연누나 코드보고 배워서 요거 애용하는 중~~~~~

jungwoo3490 · 2023-11-14T17:23:22Z

week3/World-Cup/src/App.jsx

+const RESET_STAGE = "RESET_STAGE";
+
+function App() {
+  const [state, dispatch] = useReducer(reducer, initialState);


심화과제 👍🏻👍🏻👍🏻

seobbang · 2023-11-29T09:22:43Z

week3/World-Cup/src/App.jsx

+const SET_STAGE = "SET_STAGE";
+const RESET_STAGE = "RESET_STAGE";


상수명으로 가져다 써서 어떠한 비교를 한다고 생각하면 의미없는 정수로 줬을 때 의도치 않게 로직이 잘못 적용될 수 있기 때문에, 유일할 수 있도록 이렇게 쓰는게 맞다고 생각해요! 정수값으로 주려면 아무래도 객체 같은걸로 묶으면 또 가능할 수도 있겠다

seobbang · 2023-11-29T09:24:12Z

week3/World-Cup/src/App.jsx

+  const renderResetBtn = () => {
+    if (state.currentStage !== "") {
+      return (
+        <ResetBtn
+          type="button"
+          onClick={() => {
+            dispatch({ type: RESET_STAGE });
+          }}
+        >
+          Start Over
+        </ResetBtn>
+      );
+    }
+  };
+
+  return (
+    <>
+      <Header>Would You Like Something to Drink?</Header>
+      <Main>
+        {renderOption()}
+        {renderResetBtn()}


Suggested change

const renderResetBtn = () => {

if (state.currentStage !== "") {

return (

<ResetBtn

type="button"

onClick={() => {

dispatch({ type: RESET_STAGE });

}}

>

Start Over

</ResetBtn>

);

}

};

return (

<>

<Header>Would You Like Something to Drink?</Header>

<Main>

{renderOption()}

{renderResetBtn()}

return (

<>

<Header>Would You Like Something to Drink?</Header>

<Main>

{renderOption()}

{state.currentStage && <ResetBtn

type="button"

onClick={() => {

dispatch({ type: RESET_STAGE });

}}

>

Start Over

</ResetBtn>}

요롷게는 어떤가요?-?

SynthiaLee added 13 commits November 7, 2023 17:08

feat: 홈 단계 세팅 및 글로벌 스타일과 테마 생성

08f39cf

feat: 토너먼트 각 단계 생성

40d190c

feat: 데이터 상수파일 저장

2edd1fe

feat: 상수파일에 이미지 파일 임포트

89aa558

feat: 램덤 선택 구현 완

7f07e92

feat: 랜덤 결과 후 돌아가기 버튼 구현

bf0795e

feat: 기본 과제 구현 완료

9a629c7

feat: 심화과제 5번 구현 완료

d4b0d5e

feat: 토너먼트 첫단계 이전버튼 클릭시 선택값 초기화

1bcd12a

feat: 3주차 생각과제

250900a

feat: 카운트다운 애니메이션 구현

d20f93a

feat: 토너먼트 단계 표시

85e43b1

chore: 주석 삭제

69f39dd

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

SynthiaLee requested review from jungwoo3490 and aazkgh November 10, 2023 14:22

SynthiaLee self-assigned this Nov 10, 2023

SynthiaLee added 3 commits November 10, 2023 23:39

feat: useReducer 활용 심화과제 완료

598cc78

feat: 토너먼트 thirdStage 버튼 선택시 css 수정

6c7717a

chore: 토너먼트 타이틀 수정

7375548

aazkgh reviewed Nov 13, 2023

View reviewed changes

SynthiaLee changed the title ~~Week3~~ [3주차 기본/심화/생각 과제] Would You Like Something to Drink? Nov 13, 2023

jungwoo3490 reviewed Nov 14, 2023

View reviewed changes

seobbang reviewed Nov 29, 2023

View reviewed changes

Merge remote-tracking branch 'origin' into week3

cfd25b0

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[3주차 기본/심화/생각 과제] Would You Like Something to Drink? #3

[3주차 기본/심화/생각 과제] Would You Like Something to Drink? #3

SynthiaLee commented Nov 10, 2023 •

edited

Loading

aazkgh left a comment

aazkgh Nov 12, 2023

SynthiaLee Nov 13, 2023

aazkgh Nov 12, 2023

SynthiaLee Nov 13, 2023

aazkgh Nov 12, 2023

aazkgh Nov 12, 2023

aazkgh Nov 13, 2023

aazkgh Nov 13, 2023

aazkgh Nov 13, 2023

aazkgh Nov 13, 2023

jungwoo3490 Nov 14, 2023

aazkgh Nov 13, 2023

aazkgh Nov 13, 2023

jungwoo3490 Nov 14, 2023

jungwoo3490 left a comment

jungwoo3490 Nov 14, 2023

jungwoo3490 Nov 14, 2023

jungwoo3490 Nov 14, 2023

jungwoo3490 Nov 14, 2023

jungwoo3490 Nov 14, 2023

jungwoo3490 Nov 14, 2023

jungwoo3490 Nov 14, 2023

jungwoo3490 Nov 14, 2023

seobbang Nov 29, 2023

jungwoo3490 Nov 14, 2023

jungwoo3490 Nov 14, 2023

seobbang Nov 29, 2023

seobbang Nov 29, 2023

		@@ -0,0 +1,113 @@
		import americano from "./images/americano.jpg";


		export default FirstStage;

		const FirstStageContainer = styled.section`

		background-color: ${({ theme }) => theme.colors.blue};
		color: ${({ theme }) => theme.colors.white};


		import React from "react";

		const ThirdStage = (ThirdStageProps) => {

		const SET_STAGE = "SET_STAGE";
		const RESET_STAGE = "RESET_STAGE";

[3주차 기본/심화/생각 과제] Would You Like Something to Drink? #3

Are you sure you want to change the base?

[3주차 기본/심화/생각 과제] Would You Like Something to Drink? #3

Conversation

SynthiaLee commented Nov 10, 2023 • edited Loading

✨ 구현 기능 명세

🌱 기본 조건

🧩 기본 과제

🌠 심화 과제

생각과제

💎 PR Point

🥺 소요 시간, 어려웠던 점

🌈 구현 결과물

aazkgh 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

Choose a reason for hiding this comment

jungwoo3490 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

SynthiaLee commented Nov 10, 2023 •

edited

Loading