Giter Site home page Giter Site logo

react-challengers / codefolio Goto Github PK

View Code? Open in Web Editor NEW
1.0 1.0 2.0 4.97 MB

부트캠프 수강생들이 작업한 프로젝트를 체계적으로 정리하여 채용과 연계할 수 있는 포트폴리오 공유 서비스

Home Page: https://code-folio.vercel.app/

TypeScript 99.57% JavaScript 0.12% CSS 0.31%
lodash nextjs react react-query recoil supabase typescript styled-components

codefolio's Introduction

Codefolio

LiveDemo

프로젝트 노션

실행방법

$ git clone https://github.com/react-challengers/Codefolio.git
$ yarn
$ yarn dev

http://localhost:3000 접속

env.local
NEXT_PUBLIC_SUPABASE_URL=SUPABASE_URL
NEXT_PUBLIC_SUPABASE_ANON_KEY=SUPABASE_KEY

목차

  1. Contributer
  2. 프로젝트 소개
  3. Screen Shot
  4. Tech Stack
  5. ERD
  6. Directory

Contributor

프로젝트 소개

부트캠프 수강생들이 작업한 프로젝트를 체계적으로 정리하여 채용과 연계할 수 있 는 포트폴리오 공유 서비스

Screen Shot

Main

스크린샷 2023-03-08 오후 2 19 01

Detail

스크린샷 2023-03-08 오후 2 25 54

Post

스크린샷 2023-03-08 오후 2 24 37

MyPage

스크린샷 2023-03-08 오후 2 26 28

Profile

스크린샷 2023-03-08 오후 2 28 02

Tech Stack

  • 프레임워크로 Next.js를 사용합니다.

  • Next와 잘 어울리는 배포 시스템인 Vercel을 이용합니다.

  • 빠른 백엔드 구축을 위해 BaaS 서비스인 Supabase를 사용합니다.

  • 로컬 상태관리를 위해 recoil을 사용합니다.

  • 서버 상태관리를 위해 react-query를 사용합니다.

  • CSS in JS를 사용하기 위해 styled-components를 사용합니다.

  • Text Editor는 toast/ui의 Editor를 사용합니다.

  • 유틸리티를 편리하게 사용하기 위해 lodash를 사용합니다.

  • Tech Stack 결정 과정 라이브러리 선정

Entity-Relationship Diagram

직접 보기

image

Directory

├── Components
│   ├── Common
│   ├── CreatePost
│   ├── Detail
│   ├── Layouts
│   ├── Main
│   └── MyPage
├── README.md
├── hooks
│   ├── common
│   └── query
├── lib
│   ├── recoil
│   └── supabase.ts
├── next-env.d.ts
├── next.config.js
├── package.json
├── pages
│   ├── 404.tsx
│   ├── 500.tsx
│   ├── _app.tsx
│   ├── _document.tsx
│   ├── auth
│   │   ├── login.tsx
│   │   └── signup.tsx
│   ├── create-post.tsx
│   ├── detail
│   │   └── [id].tsx
│   ├── edit-post
│   │   └── [id].tsx
│   ├── index.tsx
│   ├── on-boarding.tsx
│   ├── profile
│   │   └── [[...userId]].tsx
│   └── search.tsx
├── public
│   ├── icons
│   ├── images
│   └── logos
├── styles
├── supabase
├── tsconfig.json
├── types
├── types.d.ts
└── utils
    ├── APIs
    │   ├── socialLogin
    │   └── supabase
    ├── amplitude
    ├── card
    ├── commons
    ├── constant
    ├── detail
    └── notification

codefolio's People

Contributors

arch-spatula avatar hyoloui avatar jeremy-kr avatar nno3onn avatar yunjunhojj avatar

Stargazers

avatar

Watchers

avatar

Forkers

yunjunhojj nno3onn

codefolio's Issues

배포 버전 폰트 적용

배포시 폰트가 적용되지 않는 문제를 해결합니다.

AS-IS

// global.css
@import url('https://fonts.googleapis.com/css2?family=Libre+Barcode+128+Text&family=Londrina+Outline&family=Londrina+Shadow&family=Londrina+Sketch&family=Londrina+Solid:wght@100;300;400;900&display=swap');

기존 global.css에서 폰트를 임포트 하고 있었습니다.

TO-BE

// _document.tsx
  render() {
    return (
      <Html>
        <Head>
          <link
            href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap"
            rel="stylesheet"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }

해당 폰트를 _document.tsx의 Head컴포넌트에서 import하도록 변경하였습니다.

캐러셀 라이브러리 선정

캐러셀 라이브러리를 선정하기 위한 이슈입니다.

대표적인 캐러셀 라이브러리들의 npm trend

image

  • 위 트랜드를 바탕으로 선택지를 줄이기 위해 상위 2개의 라이브러리를 비교하고자 합니다.
  • 단순 지표 비교표

라이브러리 목록

1. swiper

image

공식웹사이트
사용 레퍼런스 블로그

  • 대표적인 캐러셀 라이브러리. 대부분의 상황에서 적용이 가능합니다.
  • React를 공식적인 내장 기능으로 지원합니다.
  • 다양한 설정을 할 수 있는 만큼 복잡합니다.

2. slick-carousel

image

공식웹사이트
사용 레퍼런스 블로그

  • 제이쿼리 의존성이 강한 바닐라JS용 라이브러리입니다.
  • React와 함께 사용하려면 react-slick를 사용할 수 있습니다. react-slick
  • 다양한 설정을 하기는 어렵지만 단순합니다.

결론

  • 여러 방면에서 보았을 때, 다양한 설정을 지원하는 swiper를 도입하는게 초기 셋업 비용은 들지만 현명해 보입니다.
  • 만일 단순하게 디테일 페이지에서만 캐러셀을 사용하고, 크게 커스터마이징이 들어가지 않는다면 react-slick의 도입을 고려해 볼 만한 것 같습니다.
  • 위 사항들에 대해서 확인 해 주시고, 댓글로 의견 부탁드립니다.

@yunjunhojj @nno3onn @arch-spatula @hyoloui

MyPage

Feb-13-2023 21-31-18

components

  • banner
  • tabs
  • profile container.
  • switch button
  • edit 페이지 position tag

feature

  • [ ]

modal의 url을 통한 관리를 위한 jotai 도입 건

본 이슈는 modal의 관리를 위해 jotai를 도입하는 것을 고려하는 이슈입니다.

배경

behance등 여타 글로벌 플랫폼에서 모달의 히스토리를 url로 관리하는것을 참고하였고, 데모는 아래와 같습니다.

Feb-15-2023 10-01-03

위와 같은 방식을 서치하다 보니 아티클을 발견하게 되었고, jotai에서 제공해주는 util을 활용하면 쉽게 적용이 가능해 질 것 같다는 판단이 들어 이슈를 생성하게 되었습니다.

적용 시기 논의

  • 현재 진행하고있는 1.0.0 배포 사이클에서는 적용하는게 부담스러울 것 같다는 판단이 들고, 1.1.0 업데이트 시점에 recoil -> jotai로 리팩토링 하는 쪽이 좋아 보인다는 의견입니다.
  • 만일, 이 안건이 적용된다면 1.0.0 배포 이후 유져 피드백 수집기간 및 1.1.0 설계 시점에 리팩토링이 진행되게 될 것 같습니다.

발생하는 비용

  • 현재 글로벌로 관리하고 있는 state가 방대하지 않으므로 큰 비용이 발생하진 않으리라 예상됩니다.
  • 다만, recoil에서 jotai로 넘어가며 팀원들의 학습이 필요한 상황이라 학습에 대한 비용이 발생하게 될것으로 예상됩니다.

결론

  • 1.0.0 배포가 끝난 이후 이 이슈를 통해 논의를 진행하고 적용 방향을 논의하는것이 바람직하다는 의견입니다.

Delete 'cr' Error

image
내일 작업을 위해 윈도우에 셋업중 발생한 오류입니다.

서치하니 윈도우에서는 End Line Sequnce가 CRLF이므로 발생하는 에러로 예상됩니다.

이러한 문제로 eslint 구문 추가하여 PR 올리겠습니다.

참고자료https://noogoonaa.tistory.com/62

RelatedProject Component

관련 프로젝트 컴포넌트를 제작합니다.

  • 캐러셀 라이브러리 선정
  • 캐러셀 라이브러리 설치
  • 컴포넌트 제작

추후 진행해야 하는 사항

  • 관련 카테고리를 이용 해 서버에서 관련 프로젝트를 get합니다.

FieldDropDown

image

  • hover 동작에 state 업데이트
  • switch case문으로 하위 분야 보이기
  • reducer로 리팩토링
    • 리듀서 함수작성
    • state에 따라 랜더링
  • [ ]

Error Page

  • 404 클라이언트 에러 페이지
  • 500 서버 에러 페이지

vercel 배포 Failed 문제

이슈 설명

vercel에서 yarn run build 시 Type error: Cannot find module './Tag' or its corresponding type declarations.라는 오류가 발생하며 빌드가 안되는 문제가 발생합니다.

AS-IS

image

image

사용하지 않는 컴포넌트가 최신화 되지않아 발생하는 문제입니다.

Components/Common/ProjectInfoDropDown.tsx

TO-BE

Delete Components/Common/ProjectInfoDropDown.tsx

how fixed it?

사용하지 않는 컴포넌트를 삭제해 해결합니다.

Auth

  • inputs
  • Auth 로그인 버튼
  • supabase auth 연결
  • 어드민 계정 생성

2주차

현재 상황 :

  • 깃헙, 구글 소셜 로그인 + 기본 이메일 로그인 기능은 추가됐습니다.
  • 카카오 및 네이버 소셜 로그인이 추가로 필요합니다.
  • 로그인 이후 처리가 필요합니다 (ex 페이지 이동)
  • 로그인 실패 처리가 필요합니다.
  • 유효성 검사도 필요하긴 합니다...

Header 제어

https://www.youtube.com/watch?v=vWWd5ezQTic

import Footer from "@/components/Footer";
import Head from "next/head";

export default function About() {
  return (
    <>
      <Head>
        <title>About ㅇㅇ</title>
        <meta name="description" content="Free tutorials" />
      </Head>
      <div>About</div>
    </>
  );
}

About.getLayout = function PageLayout(page) {
  return (
    <>
      {page}
      <Footer />
    </>
  );
};

Common Components 개발

Components

  • Card
  • Tag형식들
  • Buttons (게시물 저장/게시, 프로필 수정시 수정하기/저장/취소)
  • 프로필 이미지
  • 드롭다운
  • 소셜 로그인 버튼
  • 토글버튼

ESLint / require-default-props 문제

ESLint 중 react/require-default-props와 관련된 문제입니다.

해당 Lint Github README.md 입니다. Github

  • 해당 Lint는 Components Props의 Type을 지정 해 주기 위한 라이브러리임.
  • 현재 프로젝트에서 TypeScript를 적용하고 있기 때문에, 해당 라이브러리가 필요 없다는 의견.

아래에 코멘트로 의견 부탁 드립니다.

@yunjunhojj @nno3onn @arch-spatula @hyolou

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.