[React] 클릭한 버튼 Active 효과주기(TypeScript, Antd, Scss)

클릭한 버튼에 Active한 효과주기

 

일단 ActiveType라는 파일을 만들어 타입을 지정해주었다.

 

* enum 이란? 

열거형이라고 불리며, 서로 연관된 상수들의 집합을 의미한다. 

문자열이나 숫자들을 나타내는 기본자료형의 값을 enum을 이용한다.

 

* enum의 장점?

1. 코드가 단순해지고 가독성이 좋다.

2. enum을 사용하기 때문에 구현의 의도가 열거임을 분명하게 알 수 있다.

3. enum을 사용하여 새로운 상수들의 타입을 정의하므로 정의한 타입 이외의 타입을 가진 데이터값을 체크한다.

 

 

ActiveType.ts

 

export enum ActiveType {
    CeoGreeting = "CeoGreeting",
    CompanyInfo = "CompanyInfo",
    Organization = "Organization"
}

 

 

IntroImg.tsx

 

Link 컴포넌트를 이용해서 새로고침하지 않고도 원하는 라우트 화면을 전환해준다.

거기에 className을 사용해서 Active 효과를 주면 된다.

첫번째 CEO인사말을 예를들어보면 type이 ActiveType.CeoGreeting이라면 active한 효과를 주고 만약 아니면 효과를 주지 않도록 설정해 놓았다.

active 효과를 주는건 scss에서 처리하는데~~~~~ (아래로!!)

 

interface Itype {
    type : ActiveType
}

export const IntroImg = ({type}:Itype) => {

    return (
        <section className="intro-img">
            <div className="intro__background">
                <div className="intro__sub">
                    <div className="intro__title">
                        <h2>회사소개</h2>
                    </div>
                </div>
                <div className="intro__inner">
                    <Row className="intro__navtab">
                        <Col span={8}>
                           <Link to="/views/ceoGreeting" 
                            className={ type === ActiveType.CeoGreeting ? 'active' : '' }>CEO 인사말
                           </Link>
                        </Col>
                        <Col span={8}>
                           <Link to="/views/companyInfo" 
                            className={ type === ActiveType.CompanyInfo ? 'active' : '' }>회사소개
                           </Link>
                        </Col>
                        <Col span={8}>
                           <Link to="/views/organization" 
                             className={ type === ActiveType.Organization ? 'active' : '' }>조직구조
                           </Link>
                        </Col>
                    </Row>
                </div>
            </div>
        </section>
    )
}

 

 

마우스 hover 했을때 background 색상은 gray-10(#f0f3ff) 으로 변경되도록 구현하였다.

 

 &:hover {
    color: $gray-10;
}

 

 

내가 클릭한 버튼만 Active 효과를 주기 위해서는 제일 중요한게 삼항연산자로 조건을 주고,

scss에서 색상의 효과를 주는것!!!!!!!!!!!! 간단하당^.^

 

 

 

 

< 전체 scss 코드 >

.intro-img {
        @include background("@Images/company-header@png");
        background-position: center;

        .intro__background {
            background-color: $shadow-home-card;
            height: 518px;

            .intro__sub {
                @include square(100%, 575px);
                position: relative;

                .intro__title {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    text-align: center;
                    width: 100%;

                    h2 {
                        @include font-style(40px, 700);
                        color: $gray-10;
                        padding-top: 170px;
                    }
                }
            }

            .intro__inner {
                text-align: center;
                width: 100%;
                max-width: 1170px;
                margin: 0 auto;
                position: relative;
                margin-top: -105px;

                .intro__navtab {
                    justify-content: center;

                    a {
                        @include font-style(22px, 600);
                        height: 90px;
                        display: block;
                        cursor: pointer;
                        color: $gray-80;
                        background-color: $gray-10;
                        border: 0.5px solid $border;
                        margin: 0 -1px;
                        padding-top: 30px;

                        &:hover {
                            background-image: linear-gradient(
                                75deg,
                                $blue-150 0%,
                                $blue-150 0%,
                                $blue-160 99%
                            );
                            color: $gray-10;
                        }

                        &.active {
                            background-image: linear-gradient(
                                75deg,
                                $blue-150 0%,
                                $blue-150 0%,
                                $blue-160 99%
                            );
                            color: $gray-10;
                        }
                    }
                }
            }
        }
    }