Portfolio

3주차 활동

프로젝트 구조 개선 사항 요약

사용자 리뷰 (사전 배포)

멘토님 리뷰 (커피챗)

3주차 리팩토링 진행

📝프로젝트 구조 개선 사항 회의

컴포넌트 파일 구조

컴포넌트 파일 내에서 공통 컴포넌트와 페이지별 컴포넌트를 분리하여 각각 지정

컴포넌트 구조: index, styled, props 등의 파일로 분리

컴포넌트 외에 ts 파일을 카멜 케이스로 변경

props 타입 지정 방법 일관성 유지

slices 디렉토리 구조 통일

constants, index, thunk 등의 폴더 구조를 slices 내에서 통일하여 일관성 유지

PasswordInput 분리

Input 내에 있는 PasswordInput을 분리하거나 로그인 페이지로 이동 고려

assets 내 ts 파일 타입 인터페이스로 분리

assets 내의 ts 파일을 타입 인터페이스로 분리하여 관리

폴더명 일관성

페이지, 컴포넌트 등의 폴더명을 일관성 있게 통일하여 구조 확보

안쓰는 훅 삭제 예정

useAxios, useDebounce, useHover 등의 훅 중 안쓰는 추후에 삭제 예정

모든 파일 절대 경로로 변경

모든 파일의 import 경로를 절대 경로로 변경

useSelected 파일 통합 고려

useSelected 훅을 하나의 파일에 정의하는 것을 고려

styled 코드 정리

styled로 내려주는 프롭스에는 $를 붙여주기

리렌더링 최적화

미 사용 영역도 리렌더링 되지 않도록 최적화

웹 접근성 검사

웹 접근성을 검사하는 사이트를 활용하여 적절한 조치 추가 (추후 확인)

데이터 검증 및 유효성 검증 추가

입력된 데이터의 유효성을 검증하고 필요한 경우 사용자에게 메시지를 표시하여 데이터의 정확성을 보장

🚀사용자 리뷰 (사전 배포)

메인

스켈레톤 UI: 페이지 로딩 중 스켈레톤 UI 적용 고려

투표 참여 문구 디테일화: 더 디테일한 내용 표시 고려

알림 처리 개선: 읽음 처리와 삭제 방향에 대한 확인 필요

유저페이지

정렬 칸수 통일화: 게시글 정렬과 관련된 내용을 말한 것으로 기억, 스크롤 구현 여부 확인

팔로우 요청 오류: 관련 오류 해결 필요

팔로우 리스트 처리 개선: 너무 많은 팔로우 리스트 처리에 대한 해결 방안 필요

팔로우, 팔로워 툴팁: 툴팁으로 팔로우, 팔로워 목록 조회가능하면 적용

잔디밭 툴팁 추가: 초록색에 호버하면 잔디밭 데이터 툴팁으로 표시

한줄소개, 닉네임 길이 제한: 한줄 소개와 닉네임에 대한 길이 제한 검토

비밀번호 변경 API 활용: 비밀번호 변경 API 사용 여부 확인

도움말 모달창 추가: 도움말 모달창이 하나 있으면 좋을 것으로 의견이 있음

☕멘토님 리뷰(커피챗)

UI/UX 개선사항

Favicon 및 메타 태그 추가

알림 초기 값이 1로 표시되다가 사라지는 현상 수정

잔디 날짜 위치 값 조절

팔로우/언팔로우 버튼 스타일 및 가시성 조정

투표 완료 시 선택되는 항목 방지

투표 결과에서 사용자의 선택 확인 가능하도록

아바타 비율 깨짐 현상 수정

게시글/댓글 작성 시간 표시 형식 변경

댓글 등록 후 입력값 초기화

버튼 호버 시 디자인 변경

알림창 로고 클릭 시 닫힘 처리

검색 바에서 엔터 키 외에도 검색 가능하도록 추가

투표 총합이 101% 일 때 대응

로그인, 회원가입 페이지에서 홈 이동 링크 추가

About 페이지 또는 Index에 홈페이지 정보 추가

웹 폰트 최적화 및 로드 지연 설정

리렌더링 최적화

웹 접근성 검사

코드 구조 및 기능 개선

컴포넌트 추상화

데이터 검증 및 유효성 검증 추가

추상화 작업

🖥️3주차 리팩토링

지호:

아바타 비율, Favicon 및 Meta 등록, 버전 지원 변경

유저페이지 Pagination 및 Input 디자인 변경

닉네임, 한줄소개 길이제한

Index 페이지 스와이프 소개 및 캐러셀 추가

현진:

게시글 등록/삭제 기능, Edit 페이지 데이터 로딩

Notification, Avatar click away, 알림창 닫힘 처리

툴팁 컴포넌트 제작(잔디밭, User 조회)

PostEditPage UI 수정

수혁:

알림 초기 값, 잔디 날짜 위치 조절, Search 바 검색

잔디 날짜 위치 값 조절

팔로우/언팔로우 스타일 및 가시성 변경

댓글 등록 시 Input 값 초기화 및 삭제 리렌더링

로딩 컴포넌트, 메인페이지 게시글 제한, 유저페이지 정렬

Notification UI 및 데이터 수정

석현: (개인적으로 추가 필요)

Admin 페이지 제작, Skeleton UI 공동작업

로딩컴포넌트 제작

호민:

TypeScript 리팩토링 및 오류 확인

투표 총합 101%, 게시글 시간 조절

디테일 페이지 이미지 적용 및 클릭 라우팅

투표 결과 확인 및 완료 시 선택 방지, 비밀번호 변경 로직 추가

회원가입 시 닉네임 입력, 이미지 업로드, 비밀번호 변경 페이지 구현

Detail페이지 라우팅 변경

미분류:

비밀번호 암호화 및 입력값 실시간 검증

팔로우 요청, 좋아요 디바운싱 처리

데이터 검증 - API Response 에러 처리 및 비동기 데이터 처리

Input 공백 처리 방안 - 입력 데이터 처리

3주차