Feat(Create Notice Frame): 공지사항 페이지 뼈대 제작 #10
Conversation
배경화면 global 설정, 검색기능, 공지사항 목록 초안
키워드 입력시 실시간으로 해당하는 게시글이 뜨도록 변경+검색버튼 삭제, 공지사항 내용은 아직 구현 전. 페이지네이션 구현
업스트림 최신버전 fetch 완료, 중복된 컴포넌트 삭제, npm run prettier
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
안 쓰는 거라 삭제
There was a problem hiding this comment.
원격의 develop 브렌치와 동기화 부탁드립니다.
There was a problem hiding this comment.
다연님의 추가적인 리뷰가 필요할거 같습니다.
- 재연님께 수정 요청
- 머지 후 fix 브렌치로 수정
There was a problem hiding this comment.
배경의 경우에는 그라데이션이랑 문양이 많아서 svg 형식보다는 png가 좋을 것 같습니다!
상태변화가 날때마다 svg도 다시 로딩하는지 제 노트북에서는 엄청 느리게 돌아가게 되네요..
There was a problem hiding this comment.
앗 그렇군요 수정하겠습니다!
There was a problem hiding this comment.
이거랑 서치 svg의 경우에는 구글 metrial icon에서 제공하는걸 써서, 삭제하고 바꾸는게 좋을 것 같아요.
이건 제가 마지막에 수정해놓을테니 확인해주세요!
There was a problem hiding this comment.
네! 그런데 search 버튼은 삭제해도 될 것 같아서 아예 지워도 될 것 같아요!
| <div className={container}> | ||
| <div className={copyright}></div> | ||
| </div> |
There was a problem hiding this comment.
이건 Footar에 해당하는 컴포넌트여서 준환님이 만들어주시는거 나중에 가져다 쓰시면 됩니다.
지금은 삭제해두시면 됩니다!
| globalStyle("body", { | ||
| position: "relative", | ||
| margin: 0, | ||
| padding: 0, | ||
| backgroundImage: 'url("src/assets/background.svg")', // 배경 이미지 경로 | ||
| backgroundSize: "cover", // 배경 이미지를 화면 전체에 맞춤 | ||
| backgroundPosition: "center", // 이미지를 화면 중앙에 위치 | ||
| backgroundRepeat: "no-repeat", // 이미지를 반복하지 않도록 설정 | ||
| width: "100%", | ||
| height: "100vh", // 전체 화면 높이 적용 | ||
| overflow: "hidden", // 스크롤바가 나타나지 않도록 설정 | ||
| fontFamily: `'Pretendard', sans-serif`, | ||
| }); | ||
|
|
||
| globalStyle("::-webkit-scrollbar", { | ||
| width: "0px", | ||
| height: "0px", | ||
| }); |
There was a problem hiding this comment.
globalStyle은 한곳에서 관리하는게 좋을 것 같아요. 다른 페이지에도 영향을 미치기 때문에... 이곳 저곳에서 globalStyle을 남발하면 협업하기 힘들어집니다.
삭제 부탁드려요!
There was a problem hiding this comment.
@dandamdandam 한 곳에서 관리할 수 있도록 수정이 된 상태일까요??
There was a problem hiding this comment.
hotfix-resetcss에서 그렇게 수정했습니다. 그거 머지하면 적용이 될거에요!
|
| } | ||
|
|
||
| // 임시 데이터 예시 | ||
| const noticeData: NoticeItem[] = [ |
There was a problem hiding this comment.
id값은 string으로 들어갈 예정이고
order가 number로 들어갈 예정입니다
아직 구조가 확정난건 아니라 지금은 이대로 개발하셔도 됩니다
| content: <p>This 강원대 the content for notice 1.</p>, | ||
| detail: <p>여기는 마지막 내용입니다. Notice 1에 대한 정보가 더 있습니다.</p>, |
There was a problem hiding this comment.
string 값으로 HTML 태그가 들어갈 예정입니다
요 부분은 string으로 바꿔서 작성후 컴포넌트도 수정해주세요!
| globalStyle("body", { | ||
| position: "relative", | ||
| margin: 0, | ||
| padding: 0, | ||
| backgroundImage: 'url("src/assets/background.svg")', // 배경 이미지 경로 | ||
| backgroundSize: "cover", // 배경 이미지를 화면 전체에 맞춤 | ||
| backgroundPosition: "center", // 이미지를 화면 중앙에 위치 | ||
| backgroundRepeat: "no-repeat", // 이미지를 반복하지 않도록 설정 | ||
| width: "100%", | ||
| height: "100vh", // 전체 화면 높이 적용 | ||
| overflow: "hidden", // 스크롤바가 나타나지 않도록 설정 | ||
| fontFamily: `'Pretendard', sans-serif`, | ||
| }); | ||
|
|
||
| globalStyle("::-webkit-scrollbar", { | ||
| width: "0px", | ||
| height: "0px", | ||
| }); |
PR 설명
공지사항 페이지인 Notice 컴포넌트입니다.
아직 firebase를 통해 CRUD 기능을 구현해놓지는 않은 상태인 뼈대라고 생각하시면 됩니다.
기타사항
검색버튼을 삭제하고, 키워드만 입력해도 해당하는 게시글이 실시간으로 뜰 수 있게 제작하였습니다.