Keep

• 본격적으로 개발을 시작하면서 집중력을 굉장히 높였다.
• 개발이 진행되면서 스스로 실력이 늘고 있다는 것이 느껴졌다. 앞으로도 어떻게 구조를 짜거나 개발을 해야 좀 더 효율적으로 구현할 수 있을지 계속 고민해나가야겠다.

Problem

• 리엑트에 대한 전문적인 지식이 있는 것이 아니라, 지금 개발하는 방식이 맞는지 확신이 들지 않는다.
• 화면 구조를 생각없이 짜서, 환경이 달라지면 생각했던대로 화면이 나오지 않는다.
• ‘리팩토링 하면 되지’라는 생각으로 코드를 조금 더럽게 짠 것 같다.
• 게임 튜토리얼 정보와 사진 등을 서버로 옮겨서 불러와야하나 고민 중

Try

• 주말 동안 리엑트 강의 마저 듣고 시간 되면 타입스크립트도 배워서 코드 리팩토링을 굉장히 많이 해야 할 것 같다.
• 앞으로 새로 추가되는 페이지들은 화면 구조를 미리 짜서 개발하여 환경이 달라져도 화면 비율이 잘 나오도록 해야겠다.
• 나중에 다시 리팩토링 하는 것도 중요하지만 처음부터 깔끔하게 구조 잡고 구현해야겠다.

이번 주에 한 것들

구조

• TutorialStartComponent : 컨트롤러 역할. url에 따라 게임별 컴포넌트를 호출해준다.

  <MainContent>
      {
          (params.title === '스플렌더') ?
              <Splendor players={players} setBackgroundImage={setBackgroundImage}/>
          :
              null
      }
  </MainContent>
  

• 게임명.js : 각 게임별 튜토리얼 플로우에 맞게 템플릿 컴포넌트를 호출하며 정보 전달

  ex) 스플렌더

  /* 튜토리얼 플로우 관련 */
  const flow = [
      [ // 0: 튜토리얼 시작 페이지
          'TutorialStartComponent', // 템플릿
          '/tutorial/splendor/title.png', // 타이틀 이미지
          '스플렌더', // 타이틀
          '인원수별 세팅 방법이 달라집니다.\n인원수를 다시 한번 확인해 주세요.', // 추가 메시지
          'START', 1 // 버튼, 이동 페이지 flow 번호
      ],
      [ // 1: 게임 세팅 페이지
          'GameSettingComponent', // 템플릿
          setting, // 세팅 플로우 전달
          2 // 다음 페이지 flow 번호
      ],
      [ // 2: 튜토리얼 시작 페이지
          'TitleComponent', // 템플릿
          '모든 준비가 완료되었습니다!\n이제부터 게임을 시작해봅시다.', // 타이틀 내용
          1, // 이전 페이지 flow 번호
          3 // 다음 페이지 flow 번호
      ],
      [ // 3: 액션 수행
          'TitleAndContentAndFourButtonComponent', // 템플릿
          '가장 어린 플레이어부터 시작합니다!', // title
          '다음 4가지 액션 중\n하나를 선택하여 수행할 수 있습니다.', // content
          [ // 버튼 내용
              [4, '각기 다른 색깔의 보석 토큰 3개 가져가기'],
              [5, '같은 색깔의 보석 2개 가져가기'],
              [6, '개발 카드 찜하기'],
              [7, '개발 카드 1장 구매하기']
          ],
          2 // 이전 페이지 flow 번호
      ],
  ];
  

  <SplenderContainer>
      {
          (flow[page] && flow[page][0] === 'TutorialStartComponent') ?
              <TutorialStartComponent
                  title_image={flow[page][1]}
                  title={flow[page][2]}
                  message={flow[page][3]}
                  button1={flow[page][4]}
                  movePage1={flow[page][5]}
                  setPage={setPage}
              />
          :
          (flow[page] && flow[page][0] === 'GameSettingComponent') ?
              <GameSettingComponent
                  settingList={flow[page][1][settingIndex]}
                  infoList={settingInfo}
                  startStep={settingStartPage}
                  setSettingStartPage={setSettingStartPage}
                  setPage={setPage}
                  nextPage={flow[page][2]}
              />
          :
  ...
  </SplenderContainer>
  

• 화면 구성별 템플릿.js : 게임명.js에서 플로우에 맞게 호출하면, 전달해준 정보에 맞게 화면에 렌더링

  function GameSettingComponent({settingList, infoList, startStep, setSettingStartPage, setPage, nextPage}) {
      
      const [step, setStep] = useState(startStep);
  
      /* 단계 이동 메소드 */
      function moveBack () {
          if(step !== 0) setStep(step - 1);
          console.log(infoList);
      };
      function moveForward () {
          if(step === settingList.length - 1) {
              setSettingStartPage(step);
              setPage(nextPage);
          }
          else {
              setStep(step + 1);
          }
      };
  
      /* 스킵 */
      function skip() {
          setSettingStartPage(step);
          setPage(nextPage);
      };
  
      return (
          <GameSettingContainer>
              {/* 뒤로 가기 버튼 */}
              <BackButtonBox>
                  {
                      step !== 0 &&
                      <IconButton
                          sx={{...MoveButtonStyle}}
                          onClick={() => moveBack()}
                      >
                          <KeyboardArrowLeft sx={{...MoveButtonIconStyle}}/>
                      </IconButton>
                  }
              </BackButtonBox>
              {/* 세팅 정보 */}
              <GameSettingContent>
                  <Title>
                      <TitleWrapper><TitleText>게임 시작 전 세팅</TitleText></TitleWrapper>
                      {infoList !== null && <InfoComponent info={infoList}/>}
                  </Title>
                  <StepImage src={process.env.PUBLIC_URL + settingList[step][0]}></StepImage>
                  <StepTextBox><StepText>{settingList[step][1]}</StepText></StepTextBox>
                  {
                      step !== settingList.length - 1
                      &&
                      <SkipButtonBox><SkipButton onClick={() => skip()}>Skip</SkipButton></SkipButtonBox>
                  }
              </GameSettingContent>
              {/* 앞으로 가기 버튼 */}
              <ForwardButtonBox>
                  <IconButton
                      sx={{...MoveButtonStyle}}
                      onClick={() => moveForward()}
                  >
                      <KeyboardArrowRight sx={{...MoveButtonIconStyle}}/>
                  </IconButton>
              </ForwardButtonBox>
          </GameSettingContainer>
      )
  }
  

구현 화면

• TutorialStartComponent