포트폴리오 만들기 #4

해기·2023년 1월 19일
0

저번 글 마무리를 이상하게짓고 넘어오긴했지만 오늘도 작업한 내용을 기록해두겠음

상세페이지의 기능을 전부 끝내자 오늘은

오늘은 상세페이지를 진짜 끝내자

버그들도 다 고쳐줬으니 기능만 부여해주면 끝이다.

  • 가장 먼저 해줄건 수정버튼

전에 만든 방명록사이트에 비해 이번에는 글을 작성할 때도
이미지업로드 할 파일을 미리 볼 수 있게 만들어줬기에
글을 수정할 때도 그 상세페이지의 이미지가 들어가있어야한다.

이걸 구현하기위해 Create로 나누어준 글작성컴포넌트를 조금 수정해줬다.

가장 먼저 확인해볼 곳은 이미지가 들어있거나 없을 때 html을 어떻게 구성하는지를 보면

삼항연산자를 사용하여 preview가 비어있다면 아무것도 보여주지말고 무언가 들어있다면? 이미지와 이미지를 삭제할 버튼이 보이게끔 작성이되어있다.
이미지의 경로또한 preview가 비어있다면 editPreviewPhoto 라는걸 보여줄텐데 이건 굳이 필요없는것같더라. null이어도 될거같음.

preview가 비어있다면 null이니 수정하기를 눌렀을 때 preview로 이미지파일을 넘겨주면된다. 디테일페이지에서 수정버튼이벤트를 보면

edit페이지로 넘어감과 동시에 store에 정보를 몇개 보내주고있는데 input은 수정할 녀석의 제목과 내용물을 보내주고 사진으로는 원래 들어있던 사진을 넣어주어야한다.

그렇게 받아와서 글생성쪽을보면

store에서 이미지파일 받아오고 그 이미지파일을 preview에 넣어주니 잘 작동했다.

  • 정상적으로 작동하나 위의 기능을위해 코드가 좀 늘었다.

여러페이지의 코드가 조금 늘어났다. 왜냐면 글 작성할때와 수정할때 store에 있는 이미지는 비어있거나 들어있어야하기에
그걸 초기화해주거나 넣어주는 코드때문에 조금씩 늘어났다.
그래도 생각보다 깔끔하게 정리된거같아서 나쁘지않다.

이번엔 글 삭제를 만들자

글 삭제는 간단하다.
다른 기능들도 글삭제처럼 간단했으면 좋겠다.

이거하나 부여해주면 끝이다.
데이터베이스에서 컬렉션찾고 같은 id값찾아서 삭제시키면 끝이다.

마무리로 댓글 기능 구현끝내면 상세페이지 끝!'

댓글이 현재는 생성만되는데 이걸 삭제와 수정을 넣어주면 끝일듯하다.

이것도 뭐 상세페이지 수정 삭제와 다를게없어서 금방할 듯 한데

문제는 수정하기 눌렀을 때 input을 어떻게할지 고민이다.

화면에 방해되지않게끔 만들어줘야하는데 생각을 좀 해봐야겠다.

현재는 저러한 모습인데 너무 구리다. 위로 메뉴가 펼쳐지게끔
만들어줄까 했는데 댓글작성과 겹칠까봐 저렇게 해준것이었는데..

일단 디자인은 싹 고쳐줬다. 이게 전보다 나은듯하고 이미지크기도 너무 큰듯하여 줄여주었다.

수정기능은 유튜브답글기능처럼 수정버튼을 누를경우 아래 인풋창이 나오게끔 만들어주려한다.

  • 기능은 다 만들었으나 기록을 어떻게해야할지..ㅋㅋ

다 완성은했으나 어떻게 메모해둬야할지 모르겠다.

기능은 사실 뭐 수정 삭제가 다라서 여태만들었던것과 별 반 다를게없어서 메모할게없는거일수도있다.

기능은 보다시피 잘 작동한다. 디자인도 일단은 모바일사이즈에 먼저 디자인중이라 컴퓨터화면에서는 또 다시 짜줘야할거같다.

(근데 벌써 CSS가 개판이다. ㅋㅋ 다음엔 sass를 사용해보던 해야겠다. 정돈이안돼..)


일단 상세페이지는 이렇게 끝을내기로하자.

이번 포스팅에는 메모해놓았다라고 할만한게 전혀없네..

다음에는 좀 더 열심히 남겨보자.. 아니면 마지막에 잘 정리를해보자.

profile
프론트엔드 개발 공부중, 글쓰는데 재주가없음

0개의 댓글