Giter VIP home page Giter VIP logo

comments's Introduction

Commention

: 노션 포트폴리오를 작성할때 정성적인 부분도 효과적으로 포함시키고자 하는 욕구가 있다고 생각했습니다. 주변 사람들에게 "commention"을 요청하고 받아서 노션에 임베드 할 수 있도록 만든 서비스입니다

주소 : https://www.commention.co.kr

login : 카카오톡 로그인 기능

  • 보다 쉬운 접근과 카카오톡의 공유 같은 서비스를 사용하기 위해 카카오톡 로그인을 통해서 접근할 수 있도록 했습니다.

login

commention 요청 보내기

  • 카테고리에 따라 다른 형태의 소개글, openGraph를 담아 공유합니다.
  • 링크를 통해 공유할 수도 있고 카카오 공유로도 할 수 있습니다.

request

받은 commention 관리

  • 남들한테 받은 코멘션을 관리할 수 있는 기능입니다. 숨기기, 앞으로 배치 등이 가능합니다.

receive1

receive2

노션에 임베드

  • 자신의 노션 링크를 저장하면 자신이 받은 commention을 노션에 임베드할 수 있는 링크를 받을 수 있습니다.

embed

form

  • 다른 사람이 요청보냈을 때 받은 폼 작성지입니다.

form1

form2

form3

notion embed test

  • notion에 실제로 임베드한 모습입니다. 두가지 형태의 크기에서 가능합니다.

notion1

notion2

스토리북

링크 : https://64c63400a352d08484a00914-uduajotigp.chromatic.com/?path=/story/button-checkbutton--checked

그외 구현 사항

  • 환경변수 => kakao 키값은 노출되면 위험하므로 .env.local에 담아놓고 .gitignore한뒤에 vercel로 배포할때 환경변수 설정

  • react-slick을 이용하여 커스텀 캐러셀 구현 => 동적 배열이라 map으로 불러오는데 그러면 현재 페이지네이션의 위치를 알 수 없어 처음 데이터는 따로 가져와서 분기하여 해결

  • firebase => 초기 서비스 특성에 따른 nosql에 채택과 빠른 구축을 위한 서버리스 서비스인 firebase 사용

  • kakao => ux를 위해 kakao 로그인과 kakao 공유기능 사용

  • 주소에 email형식 => 주소에 email을 노출시 크롬에서 접근하지 못하도록 하여서 이메일 정보를 포함한 링크로 변환할때 인코딩하는 과정을 거침

  • getServersideProps를 통한 랜더링 최적화

  • getInitialProps를 통한 동적 meta data

comments's People

Contributors

mi-gongan avatar

Stargazers

 avatar

Watchers

 avatar

comments's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.