GithubHelp home page GithubHelp logo

studyroom's Introduction

logo

프론트엔드 스터디를 위한 웹 사이트 개발

스크린샷 2024-05-02 00 33 44 스크린샷 2024-05-02 02 04 29

💫 커밋 컨벤션

[🎉init]: 첫번째 커밋
[✨feat]: 기능 추가, 수정
[🍱assets]: assets 파일 추가 및 수정
[🗼markup]: 마크업 추가, 수정
[💄style]: 스타일 추가, 수정
[🔰type]: TS와 관련된 작업 (생성, 수정, 삭제 등)
[🔀merge]: 브랜치 병합, PR ex) develop(jisu) <- develop(public)
[📝docs]: 마크다운 파일을 생성하거나 수정했을 때, 문서화
[🐛bug]: 버그 수정/리포트
[🔨refactor]: 리팩토링, 구조 변경
[🔥remove]: 파일 삭제
[🧹chore]: 화면 및 로직의 변화가 없는 작업(기능상 변화 X ex. 파일 구조나 위치 변경, 주석 변경, 파일 이름 수정) 
[⚙setting]: Eslint, dependency, config 파일 등의 수정 사항
[📦package]: 패키지 추가
[👀a11y]: 웹접근성 관련된 작업

🚀 프론트엔드 스터디 사이트 기획서

📌 프로젝트 개요

  • 목적 : 4명 규모의 스터디 그룹을 위한 학습 관리 및 협업 플랫폼 제공
  • 타겟 사용자 : 프론트엔드 개발 스터디 그룹
  • 기대 효과 : 스터디 그룹의 학습 효율성 향상 및 구성원 간 소통과 협업 강화

🌟 주요 기능 및 요구사항

1. 로그인 및 출석 관리

  • 로그인 시 출석 체크 및 출석률 자동 계산
  • 개인별 출석 현황 조회 및 관리

2. GitHub 레포지토리 연동 및 커밋 기반 랭킹

  • 특정 GitHub 레포지토리와 연동하여 커밋 내역 가져오기
  • 일일 알고리즘 문제 풀이 여부를 커밋으로 판단하여 랭킹 산정

3. 학습 진도 관리 및 공유

  • 개인별 학습 진도 등록 및 공유
  • 목표 설정 및 달성률 추적 기능

4. 개인별 학습 기록 및 포트폴리오

  • 개인별 학습 기록, 프로젝트, 작성한 코드 등을 포트폴리오로 정리 및 공유
  • 개인 프로필 페이지를 통해 학습 성과 및 활동 내역 공유

5. 스터디 자료 및 문서 협업

  • 스터디 자료, 회의록, 문서 등의 공동 작성 및 관리
  • 실시간 동시 편집 및 버전 관리 기능

6. 코드 리뷰 및 피드백

  • 작성한 코드 공유 및 리뷰 요청 기능
  • 코드에 대한 피드백 및 댓글 기능

7. 스터디 회고 및 피드백

  • 정기적인 스터디 회고를 위한 설문 및 피드백 기능
  • 익명 피드백 기능을 통한 솔직한 의견 공유

8. 학습 리소스 및 링크 공유

  • 유용한 학습 자료, 튜토리얼, 아티클 등의 링크 공유 및 분류
  • 스터디 구성원들과의 학습 리소스 큐레이션 및 아카이빙

9. 알림 및 리마인더 기능

  • 스터디 일정, 할 일, 제출 기한 등에 대한 알림 및 리마인더
  • 디스코드와의 알림 연동 기능

10. 룰렛


🎨 디자인 및 UI/UX

  • 심플하고 직관적인 사용자 인터페이스
  • 반응형 디자인을 통한 다양한 기기 지원
  • 사용자 경험 향상을 위한 인터랙션 디자인 적용

🛠️ 기술 스택 및 아키텍처

  • 프론트엔드: React, Next.js, TypeScript, tailwind
  • 백엔드: SuperBase
  • 배포 및 호스팅: Vercel

📅 개발 로드맵 및 일정 (미정)

  1. 기획 및 요구사항 정의 (1주)
  2. 디자인 및 UI/UX 설계 (1주)
  3. 프론트엔드 개발 (4주)
    • 로그인 및 출석 관리
    • GitHub 연동 및 랭킹 시스템
    • 학습 진도 및 포트폴리오
    • 스터디 자료 및 문서 협업
    • 코드 리뷰 및 피드백
    • 알림 및 리마인더
  4. 백엔드 개발 (3주)
    • API 설계 및 구현
    • 데이터베이스 모델링 및 연동
    • 인증 및 보안 처리
  5. 통합 및 테스트 (1주)
  6. 배포 및 런칭 (1주)

🔒 추가 고려사항

  • 사용자 데이터 보안 및 개인정보 보호
  • 확장성 및 성능 최적화
  • 사용자 피드백 수집 및 개선사항 반영
  • 지속적인 유지보수 및 업데이트

사용해보고 싶은 기술

  • GITHUB 연동 로그인 ✔️
  • react-hook-form
  • 로그인 된 깃헙 커밋 가져오기

studyroom's People

Contributors

kimzeze avatar

Watchers

 avatar

studyroom's Issues

[✨feat] 특정 라우터에서 컴포넌트를 안보이게 수정하기

기능 설명

  • 로그인 페이지에서는 RootLayout에 설정한 Header 컴포넌트가 보이지 않도록 수정하였습니다.

상세 설명

app/layout.tsx

image

header.tsx

image

  • Header.tsx파일에서 usePathname()훅을 사용하여 (조건부로)/signIn경로일 때는 빈값을 리턴하여 해결하였습니다.

추가 코멘트

  • 처음에는 app/layout.tsx에서 건드리거나 signIn/layout.tsx파일을 만들어서 해결하려고 했으나 서버 컴포넌트에서는 바로 라우터 경로를 가져오는 것에 어려움이 있었습니다.
  • 결국에는 레이아웃파일을 건드리는 것보다 특정 컴포넌트에서 조건부로 return하는 것이 더 간편하여 위와 같이 개발하였습니다.
  • Header.tsx를 클라이언트 컴포넌트에서 서버컴포넌트로 변경하게 된다면 추후 수정해야할 것 같습니다.

이슈 트래커

Ref: <깃이슈>
Resolved: <깃이슈>

[🐛bug][✔️Fixed] Next/Image를 사용할 때 이미지 경로 오류가 발생할 경우 (로컬)

버그 설명

스크린샷 2024-05-01 23 48 15 스크린샷 2024-05-01 23 48 01
  • NextJS에서 Next/Image를 사용하여 이미지를 불러올 경우 이미지 주소가 변경되어 정상적으로 렌더링되지 않는 이슈
  • 이미지 주소가 localhost:3000/public/logo.svg로 변경되어 로컬에 있는 이미지가 불러와지지 않았습니다.

해결 방법

image image
  • 상단에 이미지를 import하여 사용하여 간단한 방법으로 해결할 수 있었습니다.

이슈트래커

Ref: <깃이슈>
Resolved: <깃이슈>

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.