[3주차] velog 클론코딩 (JS)

[JaeHyun137]

✨ 구현 기능 명세

1. box 클릭 시 dropdown 생성되도록 구현
2. dropdown 중 하나의 리스트 클릭 시 box 안의 글자가 변경됨
3. card 클릭 시 modal창 띄우기
4. x 클릭 시 modal 내려감
5. modal 띄어진 동안 스크롤 안되도록
6. 새 글 작성 시 새 html 파일로 이동
7. 태그 인풋 창에서 입력하고 엔터 누르면 새 태그 생성
8. 추가된 태그 클릭하면 태그 삭제됨
9. 메뉴 클릭 시 글자색 변화

🎁 PR Point

1. 저번 과제때 포스팅의 이미지와 텍스트를 따로 구현해야하는걸 몰랐어서 그냥 하나의 이미지로 구현했던걸 수정했습니다
2. 구현과 직접 관련된 요소는 아니지만,, 저번 과제때 깃허브에 익숙하지 않아서 괜히 잘못건드렸다가 뭔가 문제가 생길까봐 커밋 단위를 나누지 못하고 마지막에 풀리퀘 할때 한번에 올렸었는데, 이번엔 기능 구현과 수정마다 단위를 나눠 커밋했습니다 ㅎㅎ

😭 어려웠던 점

1. 박스의 리스트 중 하나를 선택하면 선택한 리스트의 폰트컬러가 바뀌는 부분을 구현에 실패했습니다 ㅠ ㅅ ㅠ ,, 아직 css에 능숙하지 않아서 감이 잘 안오네요 ㅜㅜ 이리저리 시도해보았으나 폰트컬러 변경이 먹질 않아서,, 다음 세션 전까지 더 시도해보겠습니다
   --> 어찌저찌 시도하다보니 성공했습니다 !
2. 드롭박스를 클릭시에 실제 벨로그처럼 리스트가 포스팅 위로 생겼으면 했는데, 리스트가 생기면서 기존 포스팅들을 아래로 밀어버리더라구요 ㅎㅎ,, ㅜㅜ 역시 css상의 이슈인것 같은데,, 해결책을 잘 모르겠네요 ㅠㅠ
3. 포스팅들이 지금은 html 상에서 복붙되어서 구현되어져있는데, 이를 한번에 관리하고 싶으나 방안을 잘 모르겠습니다,, 아마 js를 활용해야 할 것 같은데 어떤부분을 공부하고 시도하면 될지 감이 잘 안오네요 ㅜㅜ

😎 구현 결과물

-.Clipchamp.mp4

[tiffanyhansy]

web 파트 한승연입니다! 저도 드롭박스 클릭 할 때 리스트가 기존 포스팅들을 밀어버려서 재현님이 어려웠다고 올리신 점에 공감이 되었습니다 ㅜㅜ