번개 모임 웹 어플리케이션 - pages 마크업, Input 컴포넌트 리팩토링

"jsx-a11y/click-events-have-key-events": 0,

src/pages/profile.js

import styled from "styled-components";

import { bungaeStatus } from "../@constants/constants";
import BungaeCard from "../components/BungaeCard";
import Button from "../components/UI/Button";

const UserInfoSection = styled.section`
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40px;

  > .imoji {
    height: 120px;
    width: 120px;
    border: 1px solid black;
    border-radius: 50%;
    font-size: 40px;
    margin-bottom: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  > .nickname {
    font-size: ${({ theme }) => theme.fontSize["3xl"]};
    font-weight: ${({ theme }) => theme.fontWeight.semiBold};
    margin-bottom: 16px;
  }
  > .email {
    font-size: ${({ theme }) => theme.fontSize.base};
    color: ${({ theme }) => theme.palette.gray4};
    margin-bottom: 24px;
  }
`;

const TabSection = styled.section`
  display: flex;
  margin-bottom: 24px;

  .profile-tab {
    padding: 0.5rem;
    font-weight: ${({ theme }) => theme.fontWeight.semiBold};
  }
  .active {
    height: 3px;
    border: 1.5px solid black;
    margin: 0rem 0.5rem;
  }
`;

const UserBungaeSection = styled.section`
  width: 100%;
  > ul {
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;

    @media only screen and (max-width: 1254px) {
      max-width: 895px;
    }
    @media only screen and (max-width: 949px) {
      max-width: 590px;
    }
    @media only screen and (max-width: 644px) {
      max-width: 285px;
    }
  }
`;

function ProfilePage() {
  return (
    <>
      <UserInfoSection>
        <div className="imoji">😶‍🌫️</div>
        <p className="nickname">닉네임입니다</p>
        <p className="email">test@test.com</p>
        <Button background="mainMauve">프로필 수정</Button>
      </UserInfoSection>
      <TabSection>
        <div>
          <div className="profile-tab">
            <div>내가 만든 번개</div>
          </div>
          <div className="active"></div>
        </div>
        <div>
          <div className="profile-tab">
            <div>내가 참여한 번개</div>
          </div>
          <div></div>
        </div>
      </TabSection>
      <UserBungaeSection>
        <ul>
          <BungaeCard
            status={bungaeStatus.recruiting}
            place="성수동 OO 클라이밍 센터"
            time="19:00"
            title="오늘 7시 성수역 클라이밍 하실 분 계신가요!!..."
            imoji="😶‍🌫️"
            nickname="닉네임입니다"
            numberOfParticipants={2}
            numberOfRecruits={4}
            duration="00:30:23"
          ></BungaeCard>
          <BungaeCard status={bungaeStatus.recruiting}></BungaeCard>
          <BungaeCard status={bungaeStatus.recruiting}></BungaeCard>
          <BungaeCard status={bungaeStatus.recruiting}></BungaeCard>
          <BungaeCard status={bungaeStatus.recruiting}></BungaeCard>
          <BungaeCard status={bungaeStatus.recruiting}></BungaeCard>
        </ul>
      </UserBungaeSection>
    </>
  );
}

export default ProfilePage;