Y_FE_Toy1_Team10 패캠 수강생을 위한 위키 FASTWIKI
#12
Conversation
Remove comment
과제 제출 확인 배포
| </head> | ||
| <body> | ||
| <noscript>You need to enable JavaScript to run this app.</noscript> | ||
| <div id="root"></div> |
There was a problem hiding this comment.
나중에 React에서 Index.html에서 해야할 일들, 정리해야할 코드들을 한번 검색해보세요!
보통 google analytics 같은 분석 insight를 사용해야 할 때 index.html에서 해야할 일 들이 있을 수도 있습니다!
|
|
||
| const App = () => { | ||
| return ( | ||
| <DarkMode> |
There was a problem hiding this comment.
DarkMode 컴포넌트는 스타일드 컴포넌트에서 다크모드를 구현한 컴포넌트가 맞지만 global 스타일을 지정한 부분도 있기 때문에 컴포넌트 이름명을 다른 것으로 했으면 어떨까 싶습니다.
| handleClick, | ||
| activeCategory, | ||
| }) => { | ||
| const [displaySidebar, setDisplaySidebar] = useState(false); |
|
|
||
| <SidebarList> | ||
| <li key={"출석"} className={"sidebar__menu"}> | ||
| <Link to="출석" onClick={() => handleItemClick("출석")}> |
There was a problem hiding this comment.
Link에 ["출석", "행정", "학습시간 등급"] 이게 반복되고 있습니다.
모바일일 경우, 데스크톱일 경우 나눌때 링크를 한번만 작성해볼 수 있는 방법을 생각해보면 좋을것 같아요! 반복되는 코드를 줄일 수 있을것 같아요.
| /> | ||
| </a> | ||
| <a | ||
| href="https://docs.google.com/spreadsheets/d/1Ffg--2TCzecwLMODoBHrTAk7zWufPLrJoyLVCwE4ea4/edit#gid=1823006152" |
| ); | ||
| } | ||
|
|
||
| const userCredential = await createUserWithEmailAndPassword( |
There was a problem hiding this comment.
비밀번호가 일정한 기준을 충족하는지에 대한 검증 로직이 추가 되면 좋을 것 같습니다.
예를 들어 비밀번호 길이, 비밀번호 조합 등의 로직 등이 있을 것 같습니다.
| showCancelButton: true, | ||
| confirmButtonText: "확인", | ||
| cancelButtonText: "취소", | ||
| }).then((res) => { |
There was a problem hiding this comment.
async await 이므로 여기도 then 대신 await로 변경할 수 있을 것 같습니다.
| }; | ||
|
|
||
| // 데이터 수정하기 | ||
| const editGallery = async (id: string | undefined) => { |
There was a problem hiding this comment.
async/ await 는 try catch 문으로 에러 핸들링을 권장합니다.
| }, []); | ||
|
|
||
| // 사이드바 쿼리구현 | ||
| const handleClick = async (category: string) => { |
There was a problem hiding this comment.
async를 사용한다면 try catch로 에러 핸들링을 권장합니다.
| }); | ||
|
|
||
| //firebase에 문서 update | ||
| const upDateUser = async (value: ValueState) => { |
There was a problem hiding this comment.
async await 일 때는 try catch 문으로 에러 핸들링을 권장합니다.
FAST WIKI : 패캠 수강생을 위한 위키
📚프로젝트 소개
제작기간 : 2023.09.08 ~ 2023.09.22
제작인원 : 5명
편의 기능 제공(QR, 줌 링크, 노션 링크 ..)행정 처리 정보(출석정정, 휴가 ..)를 수정 가능한위키 형태로 제공갤러리 기능 제공랭킹 시스템과등급제로 수강생끼리의 학습을 촉진👩💻팀원소개
학습시간 기록,모달 컴포넌트 디자인 시안갤러리 CRUD,에디터,카테고리 필터링,페이지네이션메인페이지,캐러샐,최근게시물,랭킹페이지,다크모드wiki page,댓글 CRUD,사이드바,wiki 반응형,마크다운 에디터배포,레이아웃 및 초기설정,헤더,회원가입/로그인,유저정보,등급 판별따스한 멘토링 및 코드리뷰❤️🎁기술 스택
👤유저플로우
🖼️라우터 구조
✨세부 기능 설명
1️⃣ 메인 페이지 - 장호진
2023-09-22.23.03.46.mov
2️⃣ wiki 페이지 - 정효주
3️⃣댓글 기능 - 정효주
4️⃣ 갤러리 - 이예인
5️⃣ 랭크 - 장호진
2023-09-22.23.13.05.mov
6️⃣ 헤더, 사이드바 반응형 - 최우혁
7️⃣ 회원가입 / 로그인 - 최우혁
8️⃣ 학습시간 기록 - 심정아
학습시간의 측정을 위해서 공부 시작과 종료를 측정하고 누적 공부시간을 Firebase firestore에 저장
기록중배지 표시9️⃣ 유저정보 - 최우혁
사진 저장버튼으로 바뀝니다🔟 등급 판별 - 최우혁
1️⃣1️⃣ 다크모드 - 장호진
모든 요소를 전역적으로 관리하는 다크모드
2023-09-22.23.15.30.mov
1️⃣2️⃣ 반응형 디자인 - 공통
Untitled.1.mp4
기술문서 보러가기