✨ feat: 공고리스트 구현 #123
✨ feat: 공고리스트 구현 #123
Conversation
ghost
linked an issue
Moon-ju-young
left a comment
Moon-ju-young
left a comment
There was a problem hiding this comment.
PR 올라온 것들 확인하고 제때 최신 반영해주시면 서로 편할 것 같습니다~ 그리고 마크다운에서 코드 블럭은 백틱(`) 한 개가 아니라 3개로(```) 씁니다!
| <Routes> | ||
| {/* 공통 페이지 */} | ||
| <Route path="/" element={<NoticeList />} /> | ||
| <Route path="/search" element={<SearchPage />} /> |
There was a problem hiding this comment.
❓ 이미 페이지 구성은 정리된지라 구성을 변경하실 거라면 논의 후에 진행하셨으면 좋았을 것 같습니다~ 그리고 SearchPage 없이 구현이 가능할 것 같은데 어렵나요?
src/pages/notice/NoticeList.tsx
Outdated
| search?: string; | ||
| }; | ||
|
|
||
| // ===================== 상수 ===================== |
There was a problem hiding this comment.
| // ===================== 상수 ===================== | |
| // 상수 |
💬 그냥 간단하게 주석을 적어주셔도 될 것 같습니다~
src/pages/notice/NoticeList.tsx
Outdated
| type NoticeListProps = { | ||
| search?: string; | ||
| }; |
There was a problem hiding this comment.
💬 prop이 간단할 경우 굳이 type을 분리하지 않아도 될 것 같습니다~
src/pages/notice/NoticeList.tsx
Outdated
| const [currentPage, setCurrentPage] = useState<number>(1); // 현재 페이지(페이지네이션) | ||
| const [filterOpen, setFilterOpen] = useState<boolean>(false); // 필터 모달 오픈 | ||
| const [loading, setLoading] = useState(false); // 로딩 에러처리 |
There was a problem hiding this comment.
💬 어디 부분은 generic을 사용하고 어느 부분은 사용하고 있지 않네요~ 기본형 들은 generic을 빼고 자동으로 추론되게 해도 괜찮을 것 같습니다~
src/pages/notice/NoticeList.tsx
Outdated
| <main> | ||
| {/* 맞춤 공고 */} | ||
| {!search && ( | ||
| <article className="bg-red-10 px-32 py-60"> |
There was a problem hiding this comment.
❗ mobile 일 때는 padding 값이 다릅니다~
src/pages/notice/NoticeList.tsx
Outdated
| <span className="text-h1 font-bold text-primary"> | ||
| {search} | ||
| </span> | ||
| <span className="text-h1 font-bold">에 대한 공고 목록</span> |
There was a problem hiding this comment.
| <span className="text-h1 font-bold text-primary"> | |
| {search} | |
| </span> | |
| <span className="text-h1 font-bold">에 대한 공고 목록</span> | |
| <span className="text-primary"> | |
| {search} | |
| </span> | |
| 에 대한 공고 목록 |
💬 이런식으로도 작성 가능할 것 같습니다~ 기본적으로 font 설정들은 상속이 되기 때문에 상위 태그에서 지정해주면 하위에서는 설정하지 않을 수도 있습니다
src/pages/notice/NoticeList.tsx
Outdated
| {appliedFilterCount > 0 && ( | ||
| <span className="ml-2">({appliedFilterCount})</span> | ||
| )} |
There was a problem hiding this comment.
| {appliedFilterCount > 0 && ( | |
| <span className="ml-2">({appliedFilterCount})</span> | |
| )} | |
| {appliedFilterCount > 0 && ( | |
| ' ' + appliedFilterCount | |
| )} |
💬 이런 식으로도 가능하지 않을까요?
Yun-Jinwoo
left a comment
Yun-Jinwoo
left a comment
There was a problem hiding this comment.
고생하셨습니다~
주영님 피드백들을 모두 반영하면 좋겠지만, 동작에 이상이 없다면 우선 이대로 merge해서 테스트 시작하고 추후에 fix하는게 나을 것 같습니다. 시간이 없어서..!
|
➕ 빌드 오류가 발생하네요~ vscode에서 npm run build 입력하셔서 나오는 오류에 대해 수정 부탁드립니다~ |
|
빌드 오류는 최신 사항 반영이 안되어서 그런 것 같습니다! |
minimo-9
requested review from
Moon-ju-young,
Yun-Jinwoo and
minimo-9
and removed request for
Yun-Jinwoo
Moon-ju-young
left a comment
Moon-ju-young
left a comment
There was a problem hiding this comment.
수고하셨습니다~ 앞선 코멘트에 대해서도 답변해주시면 감사하겠습니다! 그리고 최대한 pr/branch를 나눠서 작업해주시는 게 좋을 것 같습니다~ 건드리는 파일이 많네요
There was a problem hiding this comment.
❓ filter 내에서 시간을 바꿨다가 돌려놓는 이유가 뭘까요?
There was a problem hiding this comment.
필터를 기준으로 바뀌어야하는지 몰랐습니다 ㅠ
src/pages/notice/NoticeList.tsx
Outdated
| useEffect(() => { | ||
| if (!recommendedNotices.length || !scrollRef.current) return; | ||
|
|
||
| const container = scrollRef.current; | ||
|
|
||
| const interval = setInterval(() => { | ||
| const card = container.querySelector('[data-card]'); // 첫 번째 카드 | ||
| if (!card) return; | ||
|
|
||
| const cardWidth = card.getBoundingClientRect().width; // getBoundingClientRect 브라우저에 실제 카드 너비를 가져옴 | ||
| const style = window.getComputedStyle(container); // getComputedStyle 적용된 css 찾기 | ||
| const gap = parseInt(style.columnGap || style.gap || '0', 10); | ||
|
|
||
| const scrollAmount = container.scrollLeft + cardWidth + gap; // 카드 1개 너비 + 간격만큼 이동 거리 계산 | ||
| const maxScrollLeft = container.scrollWidth - container.clientWidth; // 최대 거리 계산 / scrollWidth 총 길이 / clientWidth 보이는 너비 | ||
|
|
||
| if (scrollAmount >= maxScrollLeft - 1) { | ||
| container.scrollTo({ left: 0, behavior: 'smooth' }); // 처음으로 이동 | ||
| } else { | ||
| container.scrollTo({ left: scrollAmount, behavior: 'smooth' }); // 현 위치에서 이동 | ||
| } | ||
| }, 4000); | ||
| return () => clearInterval(interval); | ||
| }, [recommendedNotices]); |
There was a problem hiding this comment.
❓ 어떤 기능을 하는 부분일까요? 혹시 아래와 같이 알아서 맞춤 공고가 이동하는 부분일까요?
-.Clipchamp.mp4
There was a problem hiding this comment.
필요한 기능은 아닌 것 같습니다 사용자가 스크롤 하는데도 이동하여 오히려 불편하다는 느낌이 드네요~
3 participants
📌 변경 사항 개요
공고리스트 구현
📝 상세 내용
🔗 관련 이슈
🖼️ 스크린샷(선택사항)
nav.tsx에 state,props추가(검색 기능 구현)
const [searchValue, setSearchValue] = useState('');<input type="text" placeholder="가게 이름으로 찾아보세요" value={searchValue} onChange={(e) => setSearchValue(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter' && searchValue.trim()) { navigate(/search?query=${encodeURIComponent(searchValue.trim())}, ); } }} className="h-36 w-full rounded-[10px] bg-gray-10 pt-10 pb-10 pl-40 placeholder:text-body2 placeholder:text-gray-40 md:h-40 md:w-344 lg:w-450" />noticeApi.ts에 함수 추가
export const getNotices = async (params: { offset?: number; limit?: number; address?: string; keyword?: string; startsAtGte?: string; hourlyPayGte?: number; sort?: 'time' | 'pay' | 'hour' | 'shop'; }) => { const query = new URLSearchParams( Object.entries(params) .filter(([, v]) => v !== undefined && v !== '') .map(([k, v]) => [k, String(v)]), ); const response = await api.get<GetNoticesResponse>(/notices?${query}); return response.data; };💡 참고 사항