• 문의하기 페이지 구현

핵심가치

• 인터랙션 적용
• 호버시 글자배열 10자 (단어 단위 줄바꿈)
• 모바일 버전 이미지 크기 레이아웃
• 모바일 버전 중앙 정렬

활동 레코드

• 글자 크기 확대 (활동 멤버, 프로젝트, 스터디)
• 인터랙션 적용
• 프로젝트 개수가 0개 일 때 워딩 수정

스터디 페이지

• 일자 yyyy/mm/dd
• 파트 두 줄 레이아웃
• 타이틀 부분 자간 130% (수정됨)
• 컴포넌트 간격 일부 수정

활동 멤버

• 활동 멤버 카드 여백 수정
• 파트별 탭 호버 상태 변화

etc

• 푸터 디자인

현재는 서버 도메인이 서버 요청을 보내는 클라이언트 파일에 매직넘버로 박혀있지만,

현재 local에서 돌아가는지 실섭에서 돌아가는지에 따라 상수값으로 제공되는 것이 여러 군데에서 사용하기에 편리할 것이다.

그 부분에 대한 작업을 진행한다.

• Zustand
• document.body.style.overflow 관리
• scroll to top 버튼 관리

ISSUE 개요

프로젝트 디테일 뷰 PC뷰 작업

TODO

• 프로젝트 디테일 뷰 PC뷰

• API 호출 레이어 설계 SeojinSeojin
• 이미지 배너 joohaem
• 핵심가치
• 모집 파트 & 커리큘럼
• 활동 레코드
• 활동 멤버들

• Next를 13버전으로 업그레이드 합니다.
• Babel -> swc 변경을 진행합니다. (https://nextjs.org/docs/advanced-features/compiler#unsupported-features)
  • swc는 Rust로 작성된 번들러이기 때문에, 높은 메모리 안정성과 성능을 보장하여 빠른 빌드 시간을 제공한다.
    번들 크기를 줄이는 데에 최적화 되어있고, ES9까지의 모든 기능 및 TS와 같은 다른 언어 확장도 지원한다.
    하지만, 커뮤니티의 규모가 상대적으로 작고 미지원하는 기능이 몇 가지 있다. 이에 따른 대응은 그 때 그 때 추가하도록 합니다.
  • Rust가 매우 성능이 뛰어난 이유 중 하나는 Rust만의 가비지 컬렉션을 다루는 방법인, 더 이상 사용되지 않는 데이터 객체에 의한 메모리 사용을 해소하는 메모리 관리 접근법에 있다. Rust는 컴파일 단계에서 어떤 리소스가 더 이상 필요하지 않은지 결정하여 계속해서 실행할 필요가 없고, 따라서 프로세싱 시간은 줄어들고 성능은 향상된다.

backlog #93

탭 이동 시에, 데이터가 온전하지 않는 경우가 있습니다.

개요

인수인계 내용 및 회의 내용 기반 프로젝트 초기 세팅 문서화

Todo

• [ ]

Comments

Reference

• Design 컨텐츠가 카드 범위를 넘어가는 현상이 우려되는데, QA 기간 전후로 디자이너와 상의하고자 합니다
• Design 대체 이미지 상의
• 로딩 스피너
• About 탭에서 lazy loading

요약

• 우선순위 상, 중 수정사항부터 반영

Todo

• 기존 폴더 구조에 맞지 않은 컴포넌트 리팩터링
• image asset 정리
• components/common 디렉토리 컴포넌트 정리

(2기에서 하면 좋을) 개발 과제

• 페이지 개발 : Recruit, 404 페이지 (유효하지 않은 경로)
• Toast와 같은 에러 발생 시 보여줄 UI

https://www.notion.so/parangjy/d15e0d729b4b45d7801b42ecb6aa307e?pvs=4
https://www.figma.com/file/2yipyTVfqE62973t6t26yl/%5BSOPT-Official-2th%5D-SPRINT-UI?type=design&node-id=524-3149&t=48aAPrwG9K4bxtK8-0

API 호출 코드의 타이핑 레이어를 추가합니다.

리스폰스에 담기는 타입을 컴포넌트에서 사용하는 타입으로 변경해주는 레이어를 추가하여 베이스 코드를 짜 둡니다.

목 데이터를 슬기롭게 사용할 수 있는 환경을 만듭니다.

메인 헤더에 활동 후기 탭을 추가합니다

1안) 랜딩페이지에 주요 후기 추가, 더 많은 후기는 후기탭으로 이동하는 ‘더보기 버튼’으로 연결해 더 가시적으로 노출하기
2안) 깔끔하게 후기 탭만 추가하기
-->
일단 2안으로 빠르게 가볼까요?
상단 활동후기 탭 추가
활동후기 링크 연결 https://sopt-official-review.oopy.io/

ISSUE 개요

• pnpm dev 커맨드 입력 시 아래와 같은 메세지와 함께 UI를 볼 수 없습니다.

TODO

• 해당 stack overflow 글 참고해서 해결

ETC

시간될 때 참고해서 해결해보면 좋을 것 같아요.

클릭했을 때 변화가 생기는 엘리먼트의 경우, 마우스 커서 스타일을 pointer로 하면 커서가 default이거나 text인 경우보다 클릭 가능하다는 걸 인지하기가 더 수월합니다.
개발 공수도 적어서 코드에 적응하는 온보딩 과제로 적합할 것 같습니다.

사용되지 않는 에셋을 제거합니다.

빌드될 때 import되지 않은 에셋은 (public 폴더에 있지 않으면) 함께 빌드되지 않지만,
개발자가 개발할 때에 헷갈리기 때문에 삭제하는 것이 좋아 보입니다.

활동 후기 컨텐츠를 메인 페이지에 추가합니다.

Figma

To Do List

• ...

🔗 Slack

요약

모바일 기기 선택 시 가로 스크롤 되는 이슈

해결 방법

아래 링크 참고해서 해결함
https://www.thewordcracker.com/miscellaneous/%EB%AA%A8%EB%B0%94%EC%9D%BC-%EA%B8%B0%EA%B8%B0%EC%97%90%EC%84%9C-%EC%88%98%ED%8F%89-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EC%97%86%EC%95%A0%EA%B8%B0/

1. 네트워크 탭을 이용하여 페이지 로딩 시간 확인하기
   Chrome 개발자 도구의 네트워크 탭을 사용하여 페이지가 얼마나 느리게 로딩되는지 확인할 수 있습니다. 이를 통해 페이지 로딩 속도를 높이기 위해 어떤 부분을 최적화해야 하는지 확인할 수 있습니다.

   1. 총 로딩 시간: 가장 상단에 총 로딩 시간이 표시됩니다. 이는 페이지가 완전히 로딩되는 데 걸린 시간을 의미합니다.

   2. 각 리소스 로딩 시간: 각 리소스(HTML, CSS, JavaScript, 이미지 등)이 로딩되는 데 걸린 시간이 표시됩니다. 각 리소스를 클릭하면 해당 리소스에 대한 자세한 정보를 확인할 수 있습니다.

   3. 브라우저가 리소스를 다운로드하는데 걸린 시간: 리소스를 다운로드하는 데 걸린 시간이 표시됩니다. 이는 다운로드 속도와 관련이 있습니다.

   4. 리소스 크기: 각 리소스의 크기가 표시됩니다. 이를 통해 어떤 리소스가 가장 많은 대역폭을 차지하는지 확인할 수 있습니다.

   예를 들어, 개발자 도구의 네트워크 탭에서 특정 이미지가 로딩되는 데 5초가 걸리고, 해당 이미지의 크기가 2MB라는 것을 확인했다고 가정해보겠습니다. 이 경우 해당 이미지를 최적화하거나 CDN을 사용하여 로딩 시간을 줄일 수 있습니다.

2. 자원 크기 확인하기
   네트워크 탭에서 자원의 크기를 확인하여 어떤 자원이 많은 대역폭을 차지하고 있는지 확인할 수 있습니다. 자원의 크기를 줄이는 방법으로는 이미지 최적화, CSS와 JavaScript 파일의 압축, Gzip 압축 등이 있습니다.

3. 캐싱 설정 확인하기
   웹 페이지의 자원을 캐싱하여 다시 다운로드하지 않아도 되도록 설정하는 것이 페이지 로딩 속도를 높이는 한 가지 방법입니다. 개발자 도구의 네트워크 탭에서 캐싱이 제대로 적용되고 있는지 확인할 수 있습니다.

4. 렌더링 성능 확인하기
   렌더링 성능을 높이는 방법으로는 DOM 조작을 최소화하고, CSS와 JavaScript를 최적화하는 등이 있습니다. 개발자 도구의 성능 탭에서 렌더링 성능을 확인할 수 있습니다.

5. 반응성 확인하기
   반응성은 웹 페이지의 사용자 경험에 중요한 역할을 합니다. 개발자 도구의 Lighthouse를 사용하여 반응성을 검사할 수 있습니다. 이를 통해 페이지의 응답성을 높이기 위한 방법을 찾을 수 있습니다.

요약

• 기존 서버 문제인듯함.
• sopt.org 홈페이지에서도 무한 로딩 및 Network Error 발생

마음이 삐뚤어진 헤더를 바로 잡아줍니다.

• 폰트 및 아이콘 사이즈 수정
• 헤더 길이 및 디자인 수정

Sprint 2 이후에 진행합니다

🔗 Slack

ISSUE 개요

assets 정리가 필요해보임. 컨벤션 통일도 필요하고, 중복 파일이 많은 상황임.

#76 ~ #77 에서 나온 리팩토링 사항을 작업합니다.

menuList

나 : Html 엘리먼트의 id 값이 되는 스트링에 “/”를 포함해도 괜찮을까? 포함하면 안되는 스트링엔 어떤 것들이 있는지 알려줘!

챗지피티 : HTML 엘리먼트의 ID 값에는 슬래시 (/)를 포함할 수 있습니다. 하지만, 슬래시는 URL 경로에서 사용되는 예약 문자이기 때문에 ID 값에 사용하는 것은 권장되지 않습니다. 만약 슬래시를 사용하려면 URL 인코딩을 사용하여 코드 상에서 %2F로 표현해야 합니다.

HTML ID 값으로 사용하지 말아야 할 문자는 다음과 같습니다.

공백(space)
대문자
특수문자(!, @, #, $, %, ^, &, *, (, ), -, _, +, =, {, }, [, ], |, , ;, :, ', ", <, >, ,, ., ?, /)
HTML 예약어
HTML ID 값은 대소문자를 구분하지 않으므로, 대문자와 소문자를 혼용하는 것은 가능하지만, 코드의 가독성을 위해 소문자를 사용하는 것이 일반적입니다. 또한, ID 값은 문서 내에서 고유해야 하므로, 중복되는 값을 사용하면 안됩니다.

아이디 값에 /를 포함하는 것
아이디 값을 통해서 어떤 엘리먼트가 눌렸는지 확인하는 것
이 두 가지 모두 엄청 정석은 아닌 것 같아서 next js의 link를 써보면 어떨까 싶습니다!!(저도 안 써 봄)
물론 지금 당장 할 것은 아니구요.!
https://nextjs.org/docs/api-reference/next/link

handleIsSelected

이것 기존 로직과 같은 것이지만 ..
나중에 정정 당당하게 파싱해서 확인하는 로직으로 개선하면 좋을듯!!!
프로젝트 라우터만 이렇게 따로 처리하는 것은 .. 정정 당당하지 않다 ..

✅ Feature Request check list

• 프로젝트 디테일 뷰 UI 구현

추가할 기능 개요

• 프로젝트 디테일 뷰 UI 구현

TODO

• 프로젝트 디테일 뷰 UI 구현

요약

• 프로젝트 불필요 의존성 모듈 정리
• ESLint, Prettier 세팅

TODO

• [ ]

Reference

ISSUE 개요

toggle이 열려도 열리는 기준 윗쪽 UI는 변경이 없어야 할 것 같아요.

리스트업

• Makers
• 기술 스택
• 개발 아티클 아카이빙 (https://github.com/boostcampwm-2021/web09-Duxcord)
• Hitmap (https://github.com/sopt-makers/sopt-playground-frontend)

ISSUE 개요

기존 eslint plugin 관련해서 오류가 있어서 제거한 상황. import 문이 많아짐에 따라 정렬의 필요성이 있어 보임.

• 헤더 스타일 수정
• 링크 스타일 및 간격 수정
• 빈 공간을 터치하면 헤더 메뉴가 닫히도록

• next.config.js에 image domain 추가
• 상세페이지 getLinkNameAndSrcWithType 매핑 key 수정

요약

다음 개발할 사람들을 위한 문서 준비를 지금부터 천천히 하면 좋을 것 같아요.
일단은 위키에 작성할 내용들을 항목화해서 작성했는데, 서영이도 같이 추가해 주면 좋을 듯. 링크는 밑에 댓글에 첨부할게

[BABEL] Note: The code generator has deoptimised the styling of undefined as it exceeds the max of 500KB.

리뷰페이지의 번들링 사이즈를 감축시킵니다.

요약

• API 변경사항 반영 및 break point 변경에 따른 UI 수정

해결 방법

요약

• 프로젝트 디테일 뷰 모바일 헤더 반영 및 css 수정
• 디테일뷰 UI 깨짐 해결하기
  

해결 방법

• 디테일뷰 UI 깨짐 해결하기 : Layout 컴포넌트 추가 후 생긴 이슈 -> 기존 디테일뷰 style에서 최상위 Wrapper였던 S.Root에 height:100vh 제거하여 해결

ISSUE 개요

• 배포된 sopt.org 및 개발 서버에서 logo를 받아오지 못함.
• 배포된 sopt.org 및 개발 서버에서 특정 글꼴을 import 해오지 못함.

Comments

• 현재 logo는 api 호출로 받아오고 있는데 이에 대한 합의가 필요함. 왜 로고를 서버에서 받아오는지?

• 상세페이지 serviceType 웹, 앱 틀린 부분 수정