Crypto tracker #6 Code challenge

• 대망의 코드 챌린지 !
  • 목표
    • 1. 코인 디테일 페이지에서 메인페이지로 가는 버튼 만들기
    • 2. price 탭 구현하기

---

메인페이지로 이동하는 버튼 만들기

• 먼저 메인페이지로 가는 버튼(뒤로가기) 만들어 주려고 했는데...
• 기존 디자인이 너무 못ㅅ..못생..생...겨서 바꿔줬다 ㅋㅋ 니코쌤 죄송해영

기존 메인 페이지

기존 디테일 페이지

• 그래서 뭔가 더 건들이고 싶고 만들고싶은(?) 디자인으로 조금만 수정하자..해서 수정부터 해줬다 ㅎ

변경 후 메인 페이지

변경 후 디테일 페이지

• 뒤로가기버튼.. 🏛️ 이걸로했다 ㅎㅎ 그냥 집모양 아이콘보단 간지 ..? ㅎㅎ
• 바탕색은 뭔가 신뢰를 주는 것 같은 네이비로 선택했고
  포인트 컬러는 보라색에서 코인의 노란색으로 바꿨다.

- Coin.tsx

  return (
    <>
      <BackBtn>
        <Link to="/">🏛️</Link>
      </BackBtn>

• 그리고 코인 디테일 페이지 좌측 상단에 위치했으면 좋겠어서 position : absolute; 줬다

const BackBtn = styled.p`
  position: absolute;
  top: 30px;
  left: 30px;
  width: 40px;
  height: 40px;
  font-size: 25px;
  background-color: #e4e6ed;
  border-radius: 50%;
  a {
    position: absolute;
    top: 5px;
    left: 3px;
  }
`;

• 클릭하면 홈 화면으로 바로 이동하는 버튼 완료!
• 그럼 이제 PRICE 탭을 만들 차례

Price 탭 만들기

• 처음에 어떻게 데이터 값을 가져오지 고민하다가,
  생각해보니 .. 'Coin.tsx' 페이지에서 가져오면 안되나? 라는 생각이 들었다.
  새로 가져오는 것 보다 나을 것 같아서, 바로 props 으로 전달해줬다.

- Coin.tsx

            <Routes>
              <Route path="chart" element={<Chart coinId={coinId!} />} />
              <Route
                path="price"
                element={<Price tickersData={tickersData!} />}
              />
            </Routes>

• 이제 price에서 가져오기!

- Price.tsx

function Price({ tickersData }: { tickersData: PriceData }) {
	return ( ...

• Coin.tsx 에 있던 tickersData 의 interface 도 같이 가져왔다.
• 그리고 이제 컴포넌트를 만들어 넣기만 하면 끝.

function Price({ tickersData }: { tickersData: PriceData }) {
  return (
    <>
      <PriceInfoContainer>
        <div>Price Change Informaton</div>
      </PriceInfoContainer>
      <PirceInfoDetail>
        <PriceAgo>
          30 Minutes Ago:　
          <span>{tickersData.quotes.USD.percent_change_30m}%</span>
        </PriceAgo>
        <PriceAgo>
          1 Hours Ago:　<span>{tickersData.quotes.USD.percent_change_1h}%</span>
        </PriceAgo>
        <PriceAgo>
          6 Hours Ago:　
          <span>{tickersData.quotes.USD.percent_change_1h}%</span>
        </PriceAgo>

• 줄줄이 넣어주고.. css 까지 해주면..
  
• 짜잔!
• chart 가 그라데이션이 있는걸, price 에서도 동일하게 보여줄 수 있는게 없을까? 싶어서 부제목에 넣었다.

const PriceInfoContainer = styled.div`
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 50px;
  margin-top: 40px;
  background: #0be881;
  background: linear-gradient(to right, #0be881 28%, #0fbcf9 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
`;

• 참고로 그라데이션 넣는 방법은 구글링 하면 많이 나온다! 대부분 저 방식으로 이용하기에, 따라했다. ㅎㅎ
• 또, 이미지에서는 안보이지만 차트가 뜰때 하단에서 상단으로 통~한번 뛰면서 나타난다. 이 애니메이션이 귀여워보였다.
• 근데 price 탭은 그냥 퍼센트지만 똭. 주는게 싫어서 여기에도 하단 -> 상단으로 올라오는 애니메이션을 넣어줬다.

const PriceAgo = styled.div`
	...
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 5;
      transform: none;
    }
  }
  animation: fadeIn 0.5s ease-in-out;
  span {
    font-size: 17px;
  }

• 아 이거 동영상으로 못남기나 ;;
• 아무튼 코드 챌린지 끝!!
• 이제 마지막으로 recoil 을 사용한 다크모드, 라이트모드 구현만 남았다 :) ㅎㅎ