Linktree

LinkTree를 직접 만들게 된 배경

링크를 모아서 보여 줄 수 있는 서비스는 Linktree(https://linktr.ee) 가 가장 유명하다. 국산 서비스로 리틀리(https://litt.ly) 를 알게 되어, 이를 사용하려고 했었다. 결제하지 않으면, 무조건 링크 하단에 리틀리 광고가 붙게 된다는 점과 커스터마이징하고 싶으나 불가능한 부분들도 존재해서, 직접 구현하는 게 낫다고 판단했다.

처음에는 Next.js와 TyepeScript, TailwindCSS로 구현하고, Vecel을 통해 배포했었다. 하지만, 하나의 페이지만 필요하고 SSR도 요구되지 않느 상황이라 Next.js를 사용하기 보단, Vite로 구현하는 것이 맞다고 생각해서 Vite로 마이그레이션을 진행했고, 배포는 GitHub Pages를 사용했다.

LinkTree 구현 과정

• 아래 3단계로 간단하게 구현할 수 있었다.

1. Vite 프로젝트 생성

2. 페이지에 들어갈 컴포넌트들 구현

3. 전체 프로젝트 완성

LinkTree 구현 결과

구현한 App.tsx의 코드는 아래와 같다.

import UserInfo from '@components/UserInfo';
import SocialLinkList from '@components/SocialLinkList';
import LinkList from '@components/LinkList';
 
function App() {
  return (
    <div className="bg-bkg flex min-h-screen flex-col p-2 text-white">
      <div className="container m-1 mx-auto flex max-w-xs flex-grow flex-col items-center gap-4 rounded-lg px-4 py-2">
        <UserInfo />
        <SocialLinkList />
        <hr className="w-full bg-white" />
        <LinkList />
      </div>
    </div>
  );
}
 
export default App;

사용자 정보를 제공해주는 UserInfo 와, SNS 아이콘 모음인 SocialLinkList, 각 링크 버튼 모음인 LinkList 세 개의 컴포넌트로 나눠 구현했다.

각 컴포넌트의 구성은 아래와 같다.

1. UserInfo.tsx

• 사용자의 기본 정보를 보여주기 위한 UserInfo 부분이다.

  import ProfileImage from '@components/ProfileImage';
   
  function UserInfo() {
    return (
      <div className="flex flex-col items-center">
        <ProfileImage />
        <h2 className="text-lg font-bold">문지웅(@woongsnote)</h2>
        <p className="text-sm">Front-End Developer</p>
      </div>
    );
  }
  export default UserInfo;

2. SocialLinkList

• SNS 링크들을 Map 함수를 이용해서 icon으로 나타냈다.

  import { MyLinks } from './Links';
   
  function SocialLinkList() {
    return (
      <div className="flex flex-wrap gap-2">
        {MyLinks.map((item, index) => (
          <a href={item.url} key={index} className="text-2xl">
            {item.icon}
          </a>
        ))}
      </div>
    );
  }
   
  export default SocialLinkList;

3. LinkList

   import LinkItem from './LinkItem';
   import { MyLinks } from './Links';
    
   function LinkList() {
     return (
       <div className="flex w-full flex-col gap-4">
         {MyLinks.map((item, index) => (
           <LinkItem key={index} title={item.title} url={item.url} />
         ))}
       </div>
     );
   }
    
   export default LinkList;

구현 결과

구현한 결과물은 여기에서 확인할 수 있다.

프로젝트의 전체 소스 코드가 궁금하다면, 여기에서 확인할 수 있다.