Summary

PR 생성 시마다 자동으로 실행되는 Netlify의 각종 체크 과정이 실패하고 있어, 이를 해결하려고 합니다.
#155 이슈 해결 후 진행할 예정입니다.

Tasks

• 기존 Netlify 계정 연동 삭제
• [email protected] Netlify 계정으로 CI 재설정

Describe the bug

1. 사진을 여러 장 게시했을 때 화살표가 반대로 표시됨 Resolved by #185
2. 사파리에서는 화살표가 아예 보이지 않음

Screenshots

1.크롬

2.사파리

Implement MyPage

그룹 신청 거절 로직 필요

• zabo-server-nodejs 와 함께 구현해야함
• adminPage group 거정 버튼 구현 필요

서치 도중 loading icon 추가하기

• 서치 결과를 서버에서 가져오는 동안 loading icon을 넣어주면 됌
• loading Icon은 디자이너에게 문의

Summary

이슈와 PR 개설 시 사용할 수 있는 마크다운 템플릿을 추가합니다.

Tasks

• 템플릿 추가
• 리뷰 받기

리스트업 해주세요 @Choiyounseo

• 멤버 삭제버튼 디자인 수정 필요
• 현재 'x'는 창을 닫는 다는 느낌이 강해서 실수하기 쉬움

• 변경될 디자인 디자이너와 논의 필요

Describe the bug

아래 cd pipeline에서 docker pull 명령이 실패했을 때 다음 커맨드들이 계속 실행되어 기존 컨테이너가 종료되는 문제가 발생합니다.
script_stop: true 옵션을 넣어 docker pull 명령이 실패했을 때 다음 커맨드들이 실행되지 않게 합니다.

      - name: executing remote ssh commands using password
        uses: appleboy/[email protected]
        with:
          host: ${{ secrets.HOST }}
          port: ${{ secrets.PORT }}
          username: ${{ secrets.USERNAME }}
          password: ${{ secrets.PASSWORD }}
          proxy_host: ${{ secrets.PROXY_HOST }}
          proxy_port: ${{ secrets.PROXY_PORT }}
          proxy_username: ${{ secrets.PROXY_USERNAME }}
          proxy_password: ${{ secrets.PROXY_PASSWORD }}
          script: |
            docker pull ghcr.io/sparcs-kaist/zabo-front:dev
            docker rm -f zabo-front
            docker run --restart always -d -p 15081:80 --name zabo-front ghcr.io/sparcs-kaist/zabo-front:dev

To Reproduce

Steps to reproduce the behavior:

1. docker pull에서 오류 발생 (github container registry용 token 만료 등으로)
2. 아래 명령이 계속 실행되어 zabo-front 컨테이너가 삭제됨

Screenshots

없음.

fix css

Interactive page transition between zabos with Zabo Graph component.

팝업 알림, 에러처리 로직 구현

• 디자인은 figma 참조

Describe the bug

카카오톡 인앱 브라우저에서는 navigator.clipboard.writeText 함수를 통한 클립보드 복사를 지원하지 않습니다 ( https://velog.io/@skawnkk/%EC%9D%B8%EC%95%B1%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%B3%B5%EC%82%AC%ED%95%98%EA%B8%B0copy-%EC%9D%B4%EC%8A%88-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0-clipboardData ).
react-copy-to-clipboard 패키지로 기존 클립보드 복사 함수를 대체합니다.

To Reproduce

Steps to reproduce the behavior:

1. 안드로이드 카카오톡 인앱 브라우저로 자보 게시글 접속(예시: https://zabo.sparcs.org/s/17dfca ).
2. 공유 아이콘 클릭 시 "복사에 실패하였습니다" alert가 표시됨

Screenshots

없음.

제목 그대로

검색 대상

• 자보 제목
• 자보 내용
• 그룹 이름
• 그룹 설명 (?)
• 카테고리

Summary

release/x.x.x 브랜치가 main 브랜치에 머지될 때마다 자동으로 release tag와 release를 생성하는 github action을 추가했는데, 해당 action이 GITHUB_TOKEN을 사용하기 때문에 이 action으로 새로운 action을 시작할 수 없었습니다.
실수로 연이어 잘못된 action이 돌아가지 않게 하기 위해 의도된 사항이라고 합니다.
참조: https://docs.github.com/en/actions/security-guides/automatic-token-authentication#using-the-github_token-in-a-workflow

Tasks

• release 자동 생성 action 제거

Let's implement Dark mode

Requisites

• Design
• Styled Theming

####Zabo Calendar
각 Zabo들 일정 정리해서 보여주는 캘린더

1. 고려할 사항

• 일정이 아예 없는 홍보포스터는 어떻게 처리할 것인가
• 구글 캘린더처럼 각 zabo category별로 filter기능 추가해서 원하는 자보 일정들만 보여주도록 할 수 있었으면 좋겠음
• 내가 저장한 자보, 좋아요누른 관심 그룹의 자보 일정 보여주기

• 각 Zabo 일정 정리해서 보여주는 캘린더
• Calander page로 갈 링크 로직

디자이너와 문의 필요

지원버튼 sparcs 공홈 링크로 수정하기

• 403 Page 추가하기
• 403 이미지 figma에 있음

이미지 업로드시, 대표이미지 사이즈에 맞게 이미지를 잘라서 업로드.

Summary

Release를 생성하면 production 서버에 자동으로 배포되게 설정합니다.
참조: https://medium.com/prnd/github%EC%97%90%EC%84%9C-release-tag-%EC%9E%90%EB%8F%99%EC%9C%BC%EB%A1%9C-%EB%A7%8C%EB%93%A4%EC%96%B4-%EC%A3%BC%EA%B8%B0-1%EB%B6%84%EB%A7%8C%EC%97%90-%EC%84%A4%EC%A0%95-5c09a383fb08

Tasks

• Release 생성 시 이미지를 빌드하는 github action 만들기
• 이미지 빌드 완료 시 프로덕션 서버에 배포하는 github action 만들기

Mobile 업로드 시 Preview에서 보는 것과 다른 방향으로 (orientation)으로 업로드 되는 경우가 있음.

1. Orientation을 디텍트하고
2. 방향이 잘못된 경우 수정할 수 있도록 해야할 것 같음.

메인페이지의 마감보드 d-day 계산식 고치기

• 현재 1 tick마다 -1을 하도록 구현되어있어 실제 시간과 정확히 일치하지 않음
• -1일까지 나타나지 않도록 버그 수정하기

Summary

Zabo 추가 / 수정 페이지에서 게시물 업로더가 Zabo Board 게시 여부를 선택할 수 있는 체크박스를 추가합니다.

Tasks

• Task 1 : 적절한 위치에 설명문과 체크박스 배치하기
• Task 2 : 체크박스에 체크하면 zabo board에 게시물 게시하기

Upload 페이지 진입시 필요한 정보들 API로 업데이트

Describe the bug

/auth/check 엔드포인트에 대한 요청이 실패하는 경우, 로그인 버튼이 사라집니다.

To Reproduce

1. local storage의 token 값을 임의의 값으로 수정하여 /auth/check 엔드포인트에서 400번대 http response가 발생하도록 한다.
2. 로그인 버튼이 사라지는걸 바라본다. 👀

Screenshots

Describe the bug

release version에서 기존처럼 v를 생략합니다.

To Reproduce

없음.

Screenshots

없음.

Describe the bug

가끔씩 이미 웹브라우저에서 자보가 열린 상태에서 공유 url( 예시: https://zabo.sparcs.org/s/86f104 )을 열면, 백엔드로 보내져야 할 "/s/86f104" path에 대한 요청이 react-router 단에서 처리되어 404 오류가 표시됩니다.
쉽게 재현이 안 돼서 당장 작업은 힘들 것 같습니다.
지금 당장은 두 가지 해결 방법이 가능할 것 같습니다. 더 많은 아이디어들도 감사히 받습니다.

1. react-router에서 "/s" 경로에 대해서 라우팅하지 않도록 설정합니다. 잠깐 찾아봤는데 코드가 깔끔한 해결책은 아닌 것 같습니다. ( 참조: https://stackoverflow.com/questions/38062265/prevent-react-router-from-routing-a-server-api-path?rq=4 )
2. 현재 백엔드에서 html head에 og-image 속성을 추가해주고 있는 것을 프론트엔드를 서빙할 때 추가해주는 것으로 이전합니다. 이 경우 기존의 짧은 공유 zabo id ("86f104")는 사용할 수 없습니다.

To Reproduce

Steps to reproduce the behavior:

1. 웹브라우저에서 자보를 열어둠
2. 해당 상태에서 https://zabo.sparcs.org/s/86f104 를 새 탭에서 열기
3. 404 오류가 표시됨

Screenshots

If applicable, add screenshots to help explain your problem.

@sparcs-kaist/react-grid-layout으로 UploadImages 기능 분리

Summary

GitHub Actions, Issue Template에서 오타를 제거합니다.

Tasks

• 오타 제거

• 최신순, 마감 임박순, 인기순 sorting 기능 구현
• 현재는 무조건 최신 업로드 순으로 나열되어 결과가 나타남

여러 이미지를 한 번에 보여줄 수 있는 UI 개발

ex) slider

• 모바일 버전 디자인이 현재 figma 디자인과 다름
• 알맞게 css 변경하기

나눔스퀘어 웹폰트가 한글 완성형 2,350자밖에 포함하지 않아서, 제목이나 본문 입력 혹은 확인 시 특정 글자가 나타나지 않는 현상이 있습니다.

본문 에디터의 경우 Quill을 적용하면서 Noto Sans KR 웹폰트를 임시로 사용하고 있습니다(로드 시 flickering이 발생하지만, font-display: swap 옵션을 통해 해결하였습니다). 다만 제목 부분의 경우 여전히 나눔스퀘어를 사용하고 있어 추후 문제가 발생할 수 있을 것 같습니다.

그런데 자보 제목에 저런 글자를 쓰실 분들이 있긴 할까요?

Remove image를 reducer 내부로 이동하면서 문제 발생
reducer는 state change를 계산하기 위해서 여러 번 호출될 수 있다는 것을 고려해서 작성해야 해결될 것으로 보임

관련 이슈 여기 정리

Search engine optimization using next js SSR

AuthRouthe의 불필요한 리다이렉트 줄이기

Summary

현재 도커 이미지가 multi-stage build 방식으로 빌드되고 있는데, 정적 파일을 서빙하는 이미지를 빌드하는 두 번째 stage에서만 github action의 캐시가 사용되고 있는 것으로 보입니다.

• 로그 파일: https://github.com/sparcs-kaist/zabo-front-reactjs/actions/runs/6209484646/job/16856745737

해결법

Docker에서 제공하는 GitHub Actions은 기본적으로 최종 이미지를 빌드하는 레이어만 캐시한다고 합니다.

• https://gist.github.com/UrsaDK/f90c9632997a70cfe2a6df2797731ac8
  어떤 방법으로든 홈 디렉토리에 저장된 Docker 빌드 레이어 전체를 GitHub Actions 캐시로 저장하고 불러오면 문제를 해결할 수 있습니다.

Tasks

• 첫 번째 build stage에서도 캐시 적용

마감임박 자보가 없을 경우 D-day componet 제거하기

Summary

자동 배포 파이프라인에서 새 이미지를 pull받아 컨테이너를 재시작하면 기존 이미지가 삭제되지 않고 남아있습니다.
프로덕션 서버에서는 docker image prune -f를 쓰면 되는데, 공용으로 사용하는 개발 서버에서는 저 커맨드 대신 다른 방법을 찾아봐야할 것 같습니다.

Tasks

• 프로덕션 서버에서 Docker image 주기적으로 prune
• 개발 서버에서 Docker image 주기적으로 prune

Summary

TypeScript를 사용하여 기존의 prop-types를 대체하고 타입 안전성을 확보합니다.

Tasks

• global state 타이핑
• 각종 prop-types 오류 고치기

사전 등록자 관련 이슈 정리

• 유저 디비가 없는 상태에서 그룹에 추가해야함. (가입하면 바로 그룹에 속해있게)
• 상단 노출 (점수?)

Summary

develop 브랜치에 새 커밋이 생성될 때마다 Github container registry를 통해 이미지를 빌드하고, 이를 dev 서버에 자동 배포합니다.

Tasks

• 자동 배포 파이프라인 만들기

학번으로 유저를 검색하는 상황을 방지하기 위하여 이름과 학번이 모두 일치해야 검색 가능하도록 하는 방향으로 생각 중. 하지만 개인정보 사용 문제가 생길 수 있어 아직 개발하지 않음.
현재 서비스에서 부여하는 고유 유저네임으로 추가 가능

현재

• 업로드페이지
• 그룹신청 페이지
• 개인프로필 변경 페이지
• 그룹프로필 변경 페이지
  의 하단 버튼의 위치가 이상합니다.

버튼 위치가 column 기준 중앙에 위치하도록 수정이 필요합니다

Summary

It closes #152
이 PR에서 보이는 것과 같은 PR 템플릿을 추가합니다.

Images or Screenshots

없음.

Further Work

• GitHub 사용법 문서화

• Footer component 추가
• Footer Popup 추가
• mobile Footer Popup
• 만든사람들 Page
• license Popup

encodeURIComponent 필요할까?
필요하면 넣자