Linkedout Frontend

개인의 성장과 자기 이해를 돕는 에세이 작성 플랫폼 입니다.

📌 팀의 목표

우리 팀은 자신의 감정을 온전히 마주할 수 있게 하는 글쓰기 가이드 라인을 제시하고, 본인만의 에세이를 자유롭고 쉽게 쓸 수 있는 서비스를 제공을 달성하기 위해 이 프로젝트를 시작했습니다.

• 문제 해결: 사람들은 살아가면서 다양한 감정을 느끼지만, '타인'의 시선과 사회적 압박 속에서 자신의 감정을 솔직하게 표현하는 데 어려움을 겪습니다. 이러한 문제를 해결하기 위해, 사용자가 자신의 감정을 자유롭고 편안하게 표현할 수 있는 글쓰기 환경을 제공하고, 이를 통해 자기 자신과 깊이 소통할 수 있도록 돕는 서비스를 개발하고자 합니다.
  

• 기술 및 철학: 이 프로젝트는 Electron, Next.js, 및 React를 기반으로 설계되었습니다.
  Linkedout 데스크탑앱: Nextron, Zustand, Typescript, StyledComponent, jest Electron 기반의 Nextron 프레임워크를 활용해 개발되었으며, 안정성과 확장성을 위해 TypeScript를 사용하고 있습니다. 상태 관리에는 가벼우면서도 효율적인 Zustand를 채택하여 사용자 경험을 최적화했습니다.
  웹사이트 대신 데스크탑 애플리케이션을 선택한 이유는 다음과 같습니다:
  바쁜 일상 속에서 사용자가 웹사이트를 직접 찾아가기 어려운 경우가 많습니다. 데스크탑 애플리케이션은 사용자의 기기에 상주하며, 필요할 때 쉽게 접근할 수 있는 편리함을 제공합니다. 설치된 앱은 사용자에게 자연스럽게 존재를 상기시켜, 감정이 떠오를 때 즉각적으로 앱을 열어 글을 작성할 수 있도록 도울수 있도록 제작하고자 했습니다.
  

  홈페이지: 이 프로젝트의 홈페이지는 React와 Tailwind CSS를 사용하여 구현되었습니다.
  홈페이지 바로가기를 통해 Linkedout 데스크탑 앱을 다운로드할 수 있으며, Linkedout의 소개와 주요 정보를 사용자 친화적으로 제공하도록 설계되었습니다. 직관적인 UI와 깔끔한 디자인을 통해 사용자에게 필요한 정보를 쉽게 전달하고, 앱 다운로드와 관련된 접근성을 높이는 데 초점을 맞추었습니다.
  

  어드민: 이 프로젝트의 어드민 패널은 React 기반으로, MUI의 오픈소스 어드민 템플릿을 활용하여 구현되었습니다.
  어드민 패널은 고객 관리와 서비스 운영 관리를 효율적으로 수행할 수 있도록 설계되었으며, 사용자 친화적인 UI와 유연한 기능을 제공합니다. 이를 통해 관리자는 손쉽게 데이터를 확인하고, 서비스를 최적화하며, 사용자 경험을 지속적으로 개선할 수 있습니다. 어드민 바로가기

🚀 주요 기능

1. 글로키 기능

글쓰기가 부담스러운 분께 매일 하루에 한 번씩 글로키(크로기 + 글의 합성어)를 제공하여 보다 쉽게 글을 쓸 수 있도록 지원합니다.

• 크로기란?
  프랑스어로 "빠르게 그리다"는 뜻의 단어로, 주로 예술적인 연습이나 드로잉 기법에서 사용됩니다.

2. 나만의 글, 공개 에세이, 스토리 기능, 링크드 아웃 기능

• 나만의 글: 나만 볼 수 있는 개인적인 에세이를 작성할 수 있습니다.
• 공개 에세이: 자신의 감정을 타인과 공유하고 싶을 때 공개 에세이로 작성합니다.
• 링크드 아웃: 복잡한 감정을 글로 풀어내고, 더 이상 자신이 볼 수 없지만 타인과 감정을 공유하고 싶을 때 사용합니다.
• 스토리 기능: 자신의 글을 주제별로 묶어 스토리 형태로 작성하고, 두고두고 볼 수 있게 공유할 수 있습니다.

3. 타인의 에세이를 보고 싶을 땐 커뮤니티 페이지에서

에세이가 쓰기 부담스럽거나, 다른 사람의 에세이를 보고 싶을 때 커뮤니티 페이지에서 랜덤 글을 보거나, 다양한 에세이의 한 문장들을 모아놓은 한문장 모아 기능을 통해 위로를 받을 수 있습니다.
두고두고 보고 싶은 에세이는 북마크 기능으로 모아두고, 자신이 마음에 드는 유저를 구독하여 구독 탭에서 해당 유저의 에세이와 스토리를 확인할 수 있습니다.

4. 글쓰기 기능

• 태그 기능: 자신의 감정을 나타내는 태그를 추가하여 글을 작성할 수 있습니다.
• 위치 기록 기능: 현재 에세이를 쓰고 있는 장소를 기록할 수 있습니다.
• 고리 풀어내기 기능: 글을 쓰면서 풀어낸 감정을 고리로써 풀어낼 수 있는 기능을 제공합니다.

5. 프로필 페이지

• 최근 본 글 보기: 프로필 페이지에서 최근에 본 글을 다시 볼 수 있습니다.
• 감정 태그와 배지: 자신이 글로 풀어낸 감정 태그들을 모아 배지를 획득할 수 있습니다.
• 계정 관리: 자신의 계정을 관리하는 기능을 제공합니다.

6. 메뉴 설정

• 고객지원센터: 링크드 아웃 사용 중 불편했던 점을 제출할 수 있습니다.
• 알람 설정: 알람을 설정하고, 업데이트 기록 등을 확인할 수 있습니다.
• 주간 링크드 아웃 지수: 자신이 쓴 글의 개수를 일주일 간격으로 계산하여 그래프로 시각화할 수 있는 기능을 제공합니다.

🛠️ 기술 스택

• 프로그래밍 언어: TypeScript, JavaScript
• 프레임워크: React.js, Next.js, Node.js, NextronJs
• 데이터베이스: PostgreSQL

📖 설치 및 사용법

1. 데스크탑앱 프로젝트 클론

   git clone https://github.com/team-echoist/web-frontend
   cd desktop_app

2. 필수 패키지 설치

   npm install

3. 프로젝트 실행

   npm run dev
   # 또는
   yarn dev

   주의: 사용 시 환경 변수(.env) 설정이 필요합니다. .관리자에게 문의 해주세요. npm version: npm v20.X.X

📧 문의하기

프로젝트에 대한 문의는 [email protected] 또는 이슈로 남겨주세요.

📝 라이선스

이 프로젝트는 MIT 라이선스 하에 배포됩니다. 자세한 내용은 LICENSE 파일을 참조하세요.