Fix: User 페이지 스타일 변경

[aquaman122]

💡 작업 내용

• User 페이지 스타일 변경

💡 자세한 설명

🛠️ 유저 페이지 목록

const UserOrder = () => {
  const navigate = useNavigate();

  return (
    <div className="pb-10">
      {/* 참여한 정식 경매 내역 */}
      <div>
        <h2 className="text-xl font-bold mb-4">참여한 정식 경매 내역</h2>
        <div className="flex justify-between space-x-3">
          {/* 진행중인 경매 */}
          <div
            className="flex flex-col items-center p-4 border border-gray2 rounded-lg w-1/3 cursor-pointer"
            onClick={() =>
              navigate('/order/history', {
                state: { sortType: 'AuctionHistory' },
              })
            }
          >
            <img
              src={OnGoingIcon}
              alt="진행중인 경매"
              className="mb-2 w-8 h-8"
            />
            <span className="text-sm font-semibold">진행중인 경매</span>
            <span className="text-orange-500 mt-1 text-lg">1 건</span>
          </div>

          {/* 성공한 경매 */}
          <div
            className="flex flex-col items-center p-4 border border-gray2 rounded-lg w-1/3 cursor-pointer"
            onClick={() =>
              navigate('/order/history', { state: { sortType: 'AuctionsWon' } })
            }
          >
            <img src={SuccessIcon} alt="성공한 경매" className="mb-2 w-8 h-8" />
            <span className="text-sm font-semibold">성공한 경매</span>
            <span className="text-orange-500 mt-1 text-lg">1 건</span>
          </div>

          {/* 실패한 경매 */}
          <div
            className="flex flex-col items-center p-4 border border-gray2 rounded-lg w-1/3 cursor-pointer"
            onClick={() =>
              navigate('/order/history', {
                state: { sortType: 'AuctionsLost' },
              })
            }
          >
            <img src={FailedIcon} alt="실패한 경매" className="mb-2 w-8 h-8" />
            <span className="text-sm font-semibold">실패한 경매</span>
            <span className="text-orange-500 mt-1 text-lg">1 건</span>
          </div>
        </div>
      </div>

      {/* 내가 등록한 경매 내역 */}
      <div className="mt-8">
        <h2 className="text-xl font-bold mb-4">내가 등록한 경매 내역</h2>
        <div className="flex justify-between space-x-3">
          {/* 정식 경매 */}
          <div
            className="flex flex-col items-center p-4 border border-gray2 rounded-lg w-1/2 cursor-pointer"
            onClick={() =>
              navigate('user/registered/list', { state: { sortType: true } })
            }
          >
            <img src={AuctionIcon} alt="정식 경매" className="mb-2 w-8 h-8" />
            <span className="text-sm font-semibold">정식 경매</span>
            <span className="text-orange-500 mt-1 text-lg">1 건</span>
          </div>

          {/* 사전 경매 */}
          <div
            className="flex flex-col items-center p-4 border border-gray2 rounded-lg w-1/2 cursor-pointer"
            onClick={() =>
              navigate('user/registered/list', { state: { sortType: false } })
            }
          >
            <img
              src={PreAuctionIcon}
              alt="사전 경매"
              className="mb-2 w-8 h-8"
            />
            <span className="text-sm font-semibold">사전 경매</span>
            <span className="text-orange-500 mt-1 text-lg">1 건</span>
          </div>
        </div>
      </div>
    </div>
  );
};

export default UserOrder;

🚩 후속 작업 (선택)

• api 연결

✅ 셀프 체크리스트

• PR 제목을 형식에 맞게 작성했나요?
• 브랜치 전략에 맞는 브랜치에 PR을 올리고 있나요? (master/main이 아닙니다.)
• 이슈는 close 했나요?
• Reviewers, Labels, Projects를 등록했나요?
• 작업 도중 문서 수정이 필요한 경우 잘 수정했나요?
• 테스트는 잘 통과했나요?
• 불필요한 코드는 제거했나요?

[CLOUDoort]

고생하셨습니다!

[CLOUDoort]

텍스트 크기는 text-xl 대신 tailwind.config에 있는 text-heading 으로 통일하면 좋을 것 같습니다!

[aquaman122]

넵!

[CLOUDoort]

flex를 사용할 때는 space보다 gap 사용하는게 좋다고 합니다!

[CLOUDoort]

경로와 sortType을 인자로 받는 함수를 따로 작성하는 것도 좋아보입니다!

[aquaman122]

좋은 것 같습니다!

[CLOUDoort]

중복되는 경매 내역 UI는 컴포넌트로 따로 만들면 좋아보입니다!

[CLOUDoort]

이 설정은 commit안하는게 좋은 것 같습니다!

[aquaman122]

엇 네넵!