[프론트엔드] 이게 왜 돼

[blcklamb]

문제상황

(추가 예정)

          <ButtonContainer>
            {isAlphabetLearningPage ? (
              <>
                <Button
                  isHandVideo={isHandVideo}
                  onClick={() => {
                    setIsHandVideo(!isHandVideo);
                  }}
                  data-tip=""
                  data-for="gameNoCam-hand"
                >
                  손모양
                  <ReactTooltip id="gameNoCam-hand">
                    <video autoPlay width="200" muted loop>
                      <source src={koreanVideoSrc[0]} type="video/mp4" />
                    </video>
                    <p style={{ textAlign: "right" }}>출처: 국립국어원</p>
                  </ReactTooltip>
                </Button>
                <Button
                  isHandVideo={!isHandVideo}
                  onClick={() => {
                    setIsHandVideo(!isHandVideo);
                  }}
                  data-tip=""
                  data-for="gameNoCam-mouth"
                >
                  입모양
                  <ReactTooltip id="gameNoCam-mouth">
                    <video autoPlay width="200" muted loop>
                      <source src={koreanVideoSrc[1]} type="video/mp4" />
                    </video>
                    <p style={{ textAlign: "right" }}>출처: 국립국어원</p>
                  </ReactTooltip>
                </Button>
              </>
            ) : (
              <>
                <Button
                  isHandVideo={isHandVideo}
                  onClick={() => {
                    setIsHandVideo(!isHandVideo);
                  }}
                  data-tip=""
                  data-for="gameNoCam-video"
                >
                  손모양
                  <ReactTooltip id="gameNoCam-video">
                    <video preload="auto" autoPlay width="200" muted loop>
                      <source src={koreanVideoSrc[2]} type="video/mp4" />
                    </video>
                    <p style={{ textAlign: "right" }}>출처: 국립국어원</p>
                  </ReactTooltip>
                </Button>
                <Button
                  isHandVideo={!isHandVideo}
                  onClick={() => {
                    setIsHandVideo(!isHandVideo);
                  }}
                  data-tip=""
                  data-for="gameNoCam-meaning"
                >
                  그림
                  <ReactTooltip id="gameNoCam-meaning">
                    <video preload="auto" autoPlay width="200" muted loop>
                      <source src={koreanVideoSrc[3]} type="video/mp4" />
                    </video>
                    <p style={{ textAlign: "right" }}>출처: 국립국어원</p>
                  </ReactTooltip>
                </Button>
              </>
            )}
          </ButtonContainer>

위에 거는 안되고

아래 거는 됨

왜지?(감자)

          <ButtonContainer>
            {isAlphabetLearningPage && (
              <>
                <Button
                  isHandVideo={isHandVideo}
                  onClick={() => {
                    setIsHandVideo(!isHandVideo);
                  }}
                  data-tip=""
                  data-for="gameNoCam-hand"
                >
                  손모양
                  <ReactTooltip id="gameNoCam-hand">
                    <video autoPlay width="200" muted loop>
                      <source src={koreanVideoSrc[0]} type="video/mp4" />
                    </video>
                    <p style={{ textAlign: "right" }}>출처: 국립국어원</p>
                  </ReactTooltip>
                </Button>
                <Button
                  isHandVideo={!isHandVideo}
                  onClick={() => {
                    setIsHandVideo(!isHandVideo);
                  }}
                  data-tip=""
                  data-for="gameNoCam-mouth"
                >
                  입모양
                  <ReactTooltip id="gameNoCam-mouth">
                    <video autoPlay width="200" muted loop>
                      <source src={koreanVideoSrc[1]} type="video/mp4" />
                    </video>
                    <p style={{ textAlign: "right" }}>출처: 국립국어원</p>
                  </ReactTooltip>
                </Button>
              </>
            )}
            {!isAlphabetLearningPage && (
              <>
                <Button
                  isHandVideo={isHandVideo}
                  onClick={() => {
                    setIsHandVideo(!isHandVideo);
                  }}
                  data-tip=""
                  data-for="gameNoCam-video"
                >
                  손모양
                  <ReactTooltip id="gameNoCam-video">
                    <video preload="auto" autoPlay width="200" muted loop>
                      <source src={koreanVideoSrc[2]} type="video/mp4" />
                    </video>
                    <p style={{ textAlign: "right" }}>출처: 국립국어원</p>
                  </ReactTooltip>
                </Button>
                <Button
                  isHandVideo={!isHandVideo}
                  onClick={() => {
                    setIsHandVideo(!isHandVideo);
                  }}
                  data-tip=""
                  data-for="gameNoCam-meaning"
                >
                  그림
                  <ReactTooltip id="gameNoCam-meaning">
                    <video preload="auto" autoPlay width="200" muted loop>
                      <source src={koreanVideoSrc[3]} type="video/mp4" />
                    </video>
                    <p style={{ textAlign: "right" }}>출처: 국립국어원</p>
                  </ReactTooltip>
                </Button>
              </>
            )}
          </ButtonContainer>