18. 포트폴리오 사이트 만들기 : React-Site : 연락처 영역

Tutorial/portfolio

포트폴리오 사이트 만들기 - React

by @webs 2023. 08. 01.

08

포트폴리오 사이트 만들기 : 연락처 영역

난이도 중간

소스 다운로드

완성 화면 완성 코드 영상 보기

소개

안녕하세요! 웹스토리보이입니다. 이번에는 연락처 영역을 작업하겠습니다. 어려운 것이 없으니 바로 시작해보겠습니다.

인덱스

VITE SITE

• 1. 셋팅하기
  • 1_1. vite 설치하기
  • 1_2. vite 폴더 정리하기
  • 1_3. gsap/lenis 설치하기
  • 1_4. git 연동하기
• 2. 레이아웃
  • 2.1 레이아웃 구조 만들기
  • 2.2 메인 레이아웃 구조 만들기
  • 2.3 CSS 셋팅하기
  • 2.4 JavaScript 셋팅하기
• 3. 헤더 영역
  • 3.1 헤더 구조 잡기
  • 3.2 헤더 디자인 설정
  • 3.3 반응형 작업하기
  • 3.4 메뉴 자바스크립트 설정
• 4. 인트로 영역
  • 4.1 인트로 구조 잡기
  • 4.2 인트로 디자인 설정
  • 4.3 반응형 작업하기
• 5. 스킬 영역
  • 5.1 스킬 구조 잡기
  • 5.2 스킬 디자인 설정
  • 5.3 반응형 작업하기
• 6. 사이트 영역
  • 6.1 사이트 구조 잡기
  • 6.2 사이트 디자인 설정
  • 6.3 반응형 작업하기
• 7. 포트폴리오 영역
  • 7.1 사이트 구조 잡기
  • 7.2 사이트 디자인 설정
  • 7.3 반응형 작업하기
  • 7.4 스크립트 작업하기
• 8. 연락처 영역
  • 8.1 연락처 구조 잡기
  • 8.2 연락처 디자인 설정
  • 8.3 반응형 작업하기
• 9. 푸터 영역
  • 9.1 푸터 구조 잡기
  • 9.2 푸터 디자인 설정
  • 9.3 반응형 작업하기
• 10. 마무리
  • 10.1 스무스 효과주기
  • 10.2 링크 연결하기
  • 10.3 netlify에 배포하기

REACT SITE

• 1. 셋팅하기
  • 1_1. React 설치하기
  • 1_2. React 폴더 정리하기
  • 1_3. 라이브러리 설치하기
  • 1_4. git 연동하기
• 2. 라우팅 및 컴퍼넌트
  • 2_1. 라우팅 설정하기
  • 2_2. 컴퍼넌트 설정하기
  • 2_3. SCSS 설정하기
• 3. 헤더 영역
  • 3_1. 헤더 구조잡기
  • 3_2. 헤더 디자인 설정
  • 3_3. 헤더 데이터 작업
  • 3_4. 헤더 토글 메뉴 작업하기
• 4. 인트로 영역
  • 4_1. 인트로 구조잡기
  • 4_2. 인트로 디자인 설정
  • 4_3. 인트로 데이터 작업
• 5. 스킬 영역
  • 5_1. 스킬 구조잡기
  • 5_2. 스킬 디자인 설정
  • 5_3. 스킬 데이터 작업
• 6. 사이트 영역
  • 6_1. 사이트 구조잡기
  • 6_2. 사이트 디자인 설정
  • 6_3. 사이트 데이터 작업
• 7. 포트폴리오 영역
  • 7_1. 포트폴리오 구조잡기
  • 7_2. 포트폴리오 디자인 설정
  • 7_3. 포트폴리오 데이터 작업
• 8. 연락처 영역
  • 8_1. 연락처 구조잡기
  • 8_2. 연락처 디자인 설정
  • 8_3. 연락처 데이터 작업

8. 연락처 영역

8.1 연락처 구조잡기

기존 소스를 리액트 소스로 변경해보겠습니다.

import React from "react";

const Contact = () => {
    return (
        <section id="contact">
            <div className="contact__inner">
                <h2 className="contact__title">Contact</h2>
                <div className="contact__lines" aria-hidden="true">
                    <span className="line"></span>
                    <span className="line"></span>
                    <span className="line"></span>
                    <span className="line"></span>
                    <span className="line"></span>
                    <span className="line"></span>
                    <span className="line"></span>
                </div>
                <div className="contact__text">
                    <div className="text">
                        <div>
                            <a href="https://open.kakao.com/o/gM7YLzwf" target="_blank" rel="noreferrer">KAKAO : Webstroyboy</a>
                        </div>
                        <div>
                            <a href="mailto:webstoryboy@naver.com" target="_blank" rel="noreferrer">mail : WEBSTORYBOY@NAVER.COM</a>
                        </div>
                    </div>
                </div>
                <div className="contact__lines bottom" aria-hidden="true">
                    <span className="line"></span>
                    <span className="line"></span>
                    <span className="line"></span>
                    <span className="line"></span>
                    <span className="line"></span>
                    <span className="line"></span>
                    <span className="line"></span>
                </div>
            </div>
        </section>
    );
};

export default Contact;

8.2 연락처 디자인 설정

CSS로 SCSS로 변형하여 작업하였습니다.

#contact {
    height: 100vh;
}
.contact__inner {
    width: 100%;
    height: 100%;
    padding: 16px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    flex-direction: column;

    @media (max-width: 800px){ 
        justify-content: center;
    }

    .contact__title {
        font-size: 10vw;
        text-transform: uppercase;
        line-height: 1;
        font-weight: 800;
        white-space: nowrap;
        text-indent: -0.5vw;
        letter-spacing: -0.3vw;

        @media (max-width: 800px){ 
            display: none;
        }
    }
    .contact__text {
        width: 100%;
        height: 40vh;
        background-color: var(--black);
        color: var(--white);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: relative;

        .text {
            font-size: 3vw;
            line-height: 1;
            font-weight: 900;
            text-transform: uppercase;
            text-decoration: underline;
            text-align: center;
            position: relative;
            z-index: 100;
            transition: all 0.3s;
            cursor: all-scroll;

            @media (max-width: 800px){ 
                font-size: 24px;
                padding: 0 16px;
                word-break: break-all;
            }
        }
    }
    .contact__lines {
        width: 100%;

        .line {
            display: block;
            width: 100%;
            height: 1px;
            background-color: var(--black);
            margin-bottom: 0.5vw;

            &:nth-child(1){
                height: 25px;
            }
            &:nth-child(2){
                height: 17px;
            }
            &:nth-child(3){
                height: 13px;
            }
            &:nth-child(4){
                height: 9px;
            }
            &:nth-child(5){
                height: 5px;
            }
            &:nth-child(6){
                height: 2px;
            }
            &:nth-child(7){
                height: 1px;
            }
        }

        &.top {
            .line {
                margin-top: 0.5vw;
                margin-bottom: 0;
                display: none;

                @media (max-width: 800px){ 
                    display: block;
                }

                &:nth-child(1){
                    height: 1px;
                }
                &:nth-child(2){
                    height: 2px;
                }
                &:nth-child(3){
                    height: 5px;
                }
                &:nth-child(4){
                    height: 9px;
                }
                &:nth-child(5){
                    height: 13px;
                }
                &:nth-child(6){
                    height: 17px;
                }
                &:nth-child(7){
                    height: 25px;
                }
            }
        }
    }
}

8.3 연락처 데이터 작업

핵심 데이터는 따로 작업하였습니다.

const contactText = [
    {
        link: "https://open.kakao.com/o/gM7YLzwf",
        title: "KAKAO : webstupids",
    },
    {
        link: "mailto:webstoryboy@naver.com",
        title: "mail : webstoryboy@naver.com",
    },
];

해당 부분만 변경해주었습니다.

<div className="contact__text">
    <div className="text">
        {contactText.map((contact, key) => (
            <div key={key}>
                <a
                    href={contact.link}
                    rel="noopener noreferrer"
                    target="_blank"
                >
                    {contact.title}
                </a>
            </div>
        ))}
    </div>
</div>

3. 마무리

이제 깃헙에 올리겠습니다.

git add .
git commit -m "🧐 연락처 완료"
git push -u origin main

연락처 컴퍼넌트를 작업하였습니다. 크게 어려운 부분은 없었습니다. 잘 따라하셨죠? 그럼 다음 섹션으로 고고! 🥲

---

완성 화면 소스 보기 영상 보기

예제 목록

• 1. 포트폴리오 사이트 만들기 : Vite-Site : 셋팅하기
• 2. 포트폴리오 사이트 만들기 : Vite-Site : 레이아웃 설정
• 3. 포트폴리오 사이트 만들기 : Vite-Site : 헤더 영역
• 4. 포트폴리오 사이트 만들기 : Vite-Site : 인트로 영역
• 5. 포트폴리오 사이트 만들기 : Vite-Site : 스킬 영역
• 6. 포트폴리오 사이트 만들기 : Vite-Site : 사이트 영역
• 7. 포트폴리오 사이트 만들기 : Vite-Site : 포트폴리오 영역
• 8. 포트폴리오 사이트 만들기 : Vite-Site : 연락처 영역
• 9. 포트폴리오 사이트 만들기 : Vite-Site : 푸터 영역
• 10. 포트폴리오 사이트 만들기 : Vite-Site : 마무리
• 11. 포트폴리오 사이트 만들기 : React-Site : 셋팅하기
• 12. 포트폴리오 사이트 만들기 : React-Site : 컨퍼넌트 설정
• 13. 포트폴리오 사이트 만들기 : React-Site : 헤더 영역
• 14. 포트폴리오 사이트 만들기 : React-Site : 인트로 영역
• 15. 포트폴리오 사이트 만들기 : React-Site : 스킬 영역
• 16. 포트폴리오 사이트 만들기 : React-Site : 사이트 영역
• 17. 포트폴리오 사이트 만들기 : React-Site : 포트폴리오 영역
• 18. 포트폴리오 사이트 만들기 : React-Site : 연락처 영역
• 19. 포트폴리오 사이트 만들기 : React-Site : 푸터 영역
• 20. 포트폴리오 사이트 만들기 : React-Site : 마무리

• 21. 포트폴리오 사이트 만들기 : Vue-Site : 셋팅하기
• 22. 포트폴리오 사이트 만들기 : Vue-Site : 컨퍼넌트 설정
• 23. 포트폴리오 사이트 만들기 : Vue-Site : 헤더 영역
• 24. 포트폴리오 사이트 만들기 : Vue-Site : 인트로 영역
• 25. 포트폴리오 사이트 만들기 : Vue-Site : 스킬 영역
• 26. 포트폴리오 사이트 만들기 : Vue-Site : 사이트 영역
• 27. 포트폴리오 사이트 만들기 : Vue-Site : 포트폴리오 영역
• 28. 포트폴리오 사이트 만들기 : Vue-Site : 연락처 영역
• 29. 포트폴리오 사이트 만들기 : Vue-Site : 푸터 영역
• 30. 포트폴리오 사이트 만들기 : Vue-Site : 마무리
• 31. 포트폴리오 사이트 만들기 : Next-Site : 셋팅하기
• 32. 포트폴리오 사이트 만들기 : Next-Site : 컨퍼넌트 설정
• 33. 포트폴리오 사이트 만들기 : Next-Site : 헤더 영역
• 34. 포트폴리오 사이트 만들기 : Next-Site : 인트로 영역
• 35. 포트폴리오 사이트 만들기 : Next-Site : 스킬 영역
• 36. 포트폴리오 사이트 만들기 : Next-Site : 사이트 영역
• 37. 포트폴리오 사이트 만들기 : Next-Site : 포트폴리오 영역
• 38. 포트폴리오 사이트 만들기 : Next-Site : 연락처 영역
• 39. 포트폴리오 사이트 만들기 : Next-Site : 푸터 영역
• 40. 포트폴리오 사이트 만들기 : Next-Site : 마무리