코드리뷰 #41
Open
코드리뷰 #41
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
devpang20
reviewed
Dec 3, 2024
| const MainLogin: React.FC<MainLoginProps> = ({closeModal}) => { | ||
| return ( | ||
| <div | ||
| style={{ |
There was a problem hiding this comment.
- 현재 테일윈드를 사용하신다면 인라인 스타일 정의 방식은 지양해 주세요.
- 아래와 같이 수정
<div className="w-full h-screen flex justify-center items-center bg-[#2F2F2F]">| <button | ||
| className='flex items-center gap-1 justify-center' | ||
| onClick={toggleExpand} | ||
| aria-expanded={isExpanded} |
|
|
||
| const Profile: React.FC = () => { | ||
| const [nickname, setNickname] = useState(''); | ||
| const [error, setError] = useState(false); |
There was a problem hiding this comment.
에러 처리 개선 1
const [error, setError] = useState<string | null>(null);
Comment on lines
+10
to
+11
| setNickname(value); | ||
| setError(value === '중복된닉네임'); // 예제: '중복된닉네임' 입력 시 에러 발생 |
There was a problem hiding this comment.
- 에러처리 개선 2
try {
// 유효성 검사 로직
setError(null);
} catch (err) {
setError(err.message);
}| /> | ||
| {error && ( | ||
| <p style={{ color: 'red', fontSize: '12px', marginTop: '5px' }}> | ||
| 중복된 닉네임입니다. |
| </div> | ||
| </Link> | ||
| </div> | ||
| </div> |
| <PostItem key={post.id} post={post} /> | ||
| ))} | ||
| </div> | ||
| </div> |
| <h1>홧팅</h1> | ||
| <Container> | ||
| <Navigation /> | ||
| <Routes> |
There was a problem hiding this comment.
라우트 객체 정의 후 RouterProvider 컴포넌트를 이용하는 방식을 추천합니다.
참고
https://noah-dev.tistory.com/38
Comment on lines
+5
to
+17
| interface PostItemProps { | ||
| post: { | ||
| id: number; | ||
| title: string; | ||
| content: string; | ||
| imageUrl: string; | ||
| nickname: string; | ||
| likes: number; | ||
| views: number; | ||
| createdAt: string; | ||
| commentCount: number; | ||
| }; | ||
| } |
There was a problem hiding this comment.
해당 컴포넌트 구조 개선
- types 디렉토리 혹은 파일에 타입 스키마 모아두기
- 예시
export interface Post {
id: number;
title: string;
content: string;
imageUrl: string;
nickname: string;
likes: number;
views: number;
createdAt: string;
commentCount: number;
}
- 아래와 같이 수정
import { Post } from '@/types/post';
interface PostItemProps {
post: Post;
}- Post 타입을 다른 컴포넌트에서도 재사용할 수 있습니다. 향후 기능 확장 상황에서 유지보수가 용이해집니다.
There was a problem hiding this comment.
넵 현재 수정 되었습니다 감사합니다
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
#️⃣연관된 이슈
☑️ PR 유형
📝 작업 내용
폴더 구조
assets
공통으로 사용하는 jpg, png, svg 파일을 추가했습니다.
components
components 폴더는 페이지 간 공통으로 사용되는 컴포넌트들을 모아두는 폴더로 현재 로그인, 프로필, 드롭다운, 지역 드롭다운, BestCardItem이 있습니다.
LoginPage
: 로그인을 하지 않고 접근을 했을 경우 뜨는 페이지 (조금 더 둘러보고 싶어요->로그인 하러가기 수정해야 함)
MainLogin
: 로그인 버튼을 누르면 소셜로그인으로 네이버, 구글로 로그인할 수 있는 버튼입니다
좀 더 둘러보기 버튼을 누르면 메인페이지로 나와집니다
Profile
: 로그인을 하면 프로필 사진,닉네임을 정하고 수정할 수 있습니다
BestCardItem
: 메인 페이지 내 BestCardList 컴포넌트의 하위 컴포넌트입니다.
temporaryData의 임시 데이터를 props로 받아 데이터를 표시하도록 구현했습니다.
지역 드롭다운 (RegionDropdown)
: 통합 페이지의 1번 카테고리를 '지역'으로 선택할 경우 표시되는 세부 지역 선택 드롭다운입니다. (4번 통합페이지 참고)
hooks
React Custom Hooks를 작성하는 폴더입니다.
layout
layout 폴더에서는 프로젝트의 전체 레이아웃 구조를 담당합니다.
pages
pages 폴더는 각 페이지별로 폴더가 나누어져 있습니다. 현재 페이지는 메인, 베스트, 마이, 통합, 네비게이터, 사진, 일정 관리, 채팅으로 총 8개의 폴더가 존재하고, 포스트 상세 및 포스트 생성 페이지가 추가될 예정입니다.
검색창 및 검색 모달, RegionCardList 컴포넌트, BestCardList 컴포넌트로 구성되어 있습니다.
검색창 및 모달
: 검색창 클릭 시 모달이 표시되고, 검색창과 모달을 제외한 다른 곳을 클릭 시 모달이 사라지도록 구현했습니다.
모달 내 최근 검색어는 로컬스토리지에
storedSearches를 key로 하는 배열 형태로 저장되고, 최대 5개까지 저장됩니다 (이미 5개가 있는 시점에서 다른 값을 검색할 경우, 빨리 저장된 순부터 삭제 및 새로운 값 추가)모달 내 추천 여행지, 인기 검색어는 해당 값들을 받아오게 되면 추후 수정 예정입니다
BestCardList
정렬 : 가장 많은 좋아요를 받은 글 TOP 3만 보이도록 설정했습니다.
더보기 버튼 : 클릭 시 베스트 페이지로 이동됩니다.
RegionCardItem
: 메인 페이지 내 RegionCardItem 컴포넌트의 하위 컴포넌트입니다.
좌우 스크롤 버튼 : 현재 해당 임시 데이터 10개를 생성했고, 4개의 카드가 기본으로 표시되며 좌우 버튼을 누르면 표시된 카드를 제외한 다음 카드가 최대 4개씩 보이도록 설정했습니다.
RegionCardList
지역 카드 : 예시로 '제주' 카드 클릭 시 통합 페이지의 1번 드롭다운에서 '지역', 2번 드롭다운에서 '제주'가 선택된 채 페이지가 이동되도록 구현 예정입니다.
더보기 버튼 : 아직 해당 페이지가 구현되지 않아 작동하지 않으며, 추후 구현 예정입니다.
베스트 페이지이므로 해당 포스트의 좋아요가 많은 순서로 정렬되도록 구현했습니다.
현재 베스트 아이템의 배경은 외부의 랜덤이미지를 갖고 오는 형태인데, 추후 해당 포스트의 썸네일로 대체 예정입니다.
상단 고정된 공지 포스트와 카테고리 선택이 가능한 2개의 드롭다운, 그리고 PostItem 컴포넌트로 구성되어 있습니다.
PostItem
: 선택한 카테고리를 기반으로 한 포스트 리스트를 보여주는 컴포넌트로, 공통 컴포넌트로 사용합니다.
카테고리별 정렬 드롭다운 적용
: 카테고리 별로 정렬이 가능하도록 드롭다운을 생성했습니다.
포스트 아이템 내 제목 왼쪽에 표시되는 카테고리 색상은 카테고리에 따라 각각 다른 색상으로 추후 변경 예정입니다
카테고리 드롭다운은 총 2개로, 첫번째는 기본 카테고리 선택 드롭다운이며 두번째는 지역 카테고리 선택 드롭다운입니다.
1번 드롭다운의 기본 선택 값은 '전체'이며, '자유', '지역', '리뷰' 선택이 가능합니다.
1번 드롭다운에서 '지역'을 선택한 경우에만 2번 드롭다운이 표시됩니다.
2번 드롭다운의 기본 선택 값은 '지역 전체'이며, 현재 '서울', '부산', '제주', '강릉' 선택이 가능합니다. 추후 지명을 더 추가할 예정입니다.
공지 포스트 아이템 고정
: 최상단에는 '공지' 카테고리를 가진 포스트가 고정됩니다.
추후 1번 드롭다운에서 '지역'을 선택하고, 2번 드롭다운에서 지명 선택 시 공지 포스트 대신 해당 지역에 대한 정보 캡션 표시 예정입니다.
store
전역 상태 관리 로직을 관리하는 폴더로, zustand를 이용해서 로그인 전역 상태관리를 관리할 예정입니다.
temporaryData
임시 데이터를 넣어둔 폴더입니다.
utils
공통으로 사용되는 유틸리티 함수들을 관리하는 폴더입니다.
typings
공통으로 사용하는 타입을 정리해두었습니다.
✅ 피드백 반영사항
💬 리뷰 요구사항