💼 Business Card Maker

Intro

React 를 이용하여 작업한 명함 제작 웹 어플리케이션입니다.
Firebase 의 Authentication 서비스를 이용하여 소셜로그인 기능을 구현하였고,
이 과정에서 얻어온 user uid 값으로 Realtime database 에 명함을 실시간으로 CRUD 할 수 있게끔 구현 하였습니다.
그리고 Cloudinary 를 이용하여 사용자가 이미지를 서버에 업로드 할 수 있게 하여 언제 어디서든 해당 이미지를 불러올 수 있습니다.
또한 외부라이브러리(dom-to-image, fileSaver) 를 사용하여 작성한 카드를 png 파일로 저장할 수 있는 기능을 구현하였습니다.

Live Demo : Business Card Maker

작업기간 (2022.06.09 ~ 2022.06.13)

Skills

• React
  • React Functional Component
• React Router
• PostCSS
• Firebase
  • Authentication
  • Realtime Database
• Cloudinary
• Deploy: Netlify

Preview

Login

Maker

Save & Search

Responsive Web

Solution

✅ Database

syncCard() 함수는 데이터베이스의 해당 ref(경로) 에 리스너를 등록하여 변경사항이 있다면 등록된 콜백 함수를 호출합니다. 그리고 추후에 리스너를 제거해주는 off() 함수를 리턴해줍니다. 이는 maker 컴포넌트의 useEffect() 안에서 콜백함수형태로 리턴을 해주어 언마운트가 되면 off() 함수가 실행됩니다.

// card_database.js
import { firebaseDatabase } from './firebase';

class CardDatabase {
  //..생략

  syncCard(userId, onUpdate) {
    const ref = firebaseDatabase.ref(`${userId}/cards`);

    ref.on('value', (snapshot) => {
      const value = snapshot.val();
      value && onUpdate(value);
    });
    return () => ref.off();
  }
}

export default CardDatabase;

// maker.js
useEffect(() => {
  if (!userId) {
    return;
  }
  const stopSync = cardDatabase.syncCard(userId, (value) => {
    setCards(value);
  });

  return () => stopSync();
}, [userId, cardDatabase]);

✅ Image uploader(Cloudinary)

file 을 인자로 받아와 서버에 업로드 후 해당 이미지 url 을 리턴해줍니다.

class UploadImage {
  async upload(file) {
    const data = new FormData();
    data.append('file', file);
    data.append('upload_preset', 'docs_upload_example_us_preset');

    const result = await fetch(
      'https://api.cloudinary.com/v1_1/demo/image/upload',
      {
        method: 'POST',
        body: data,
      }
    );

    return result.json();
  }
}

export default UploadImage;

✅ Save image(dom-to-image, fileSaver)

toBlob() 함수를 통해 이벤트가 일어날 타겟을(card) 선택하고 saveAs() 함수로 해당 타겟을 png 파일로 저장시켜 줍니다.

import React, { memo, useRef } from 'react';
import styles from './card.module.css';
import domToImage from 'dom-to-image';
import { saveAs } from 'file-saver';

const Card = memo(({ card }) => {
  const cardRef = useRef();

  const onSaveFile = () => {
    const card = cardRef.current;
    // dom-to-image
    const filter = (card) => {
      return card.tagName !== 'BUTTON';
    };
    domToImage.toBlob(card, { filter: filter }).then((blob) => {
      // fileSaver
      saveAs(blob, `💼 ${name} card.png`);
    });
  };

  return (
    <li className={styles.list}>
      <div ref={cardRef}>
        <article className={`${styles.card} ${getTheme(theme)}`}>
          <button className={styles.save} onClick={onSaveFile} title="save">
            <img src="./images/save.png" alt="save" />
          </button>
          //... 생략
        </article>
      </div>
    </li>
  );
});

export default Card;

✅ Search

search componenet 의 input value를 setSearch() 에 저장하고, search 에 데이터가 들어오면 card 의 name 과 비교하여 해당하는 card 를 리턴해주고 데이터가 없으면 card 전체를 리턴합니다.

import React, { useState } from 'react';
import Card from '../card/card';
import Search from '../search/search';
import styles from './preview.module.css';

const Preview = ({ cards }) => {
  const [search, setSearch] = useState('');
  
  const onChange = (e) => {
    setSearch(e.target.value);
  };

  return (
    <section className={styles.preview}>
      <div className={styles.search}>
        <Search onChange={onChange} />
      </div>

      <ul>
        {!search &&
          Object.keys(cards).map((key) => <Card key={key} card={cards[key]} />)}

        {search &&
          Object.keys(cards)
            .filter((key) => cards[key].name.toLowerCase().includes(search))
            .map((key) => <Card key={key} card={cards[key]} />)}
      </ul>
    </section>
  );
};

export default Preview;