[새싹/코딩온] 풀스택 웹 개발자 취업 부트캠프 10주차: 프로젝트 회고 (3)

🌊고민 풀장🌊

1️⃣ index.ejs의 레이아웃 구조는 유지하되 디자인은 mypage.ejs랑 좀 더 통일성 있게 바꿨다.

수정 전의 이미지를 못찾겠다.

포인트 디자인(버튼)은 유지하되 input area랑 바탕색을 다시 정렬했다. 

고민 듣기 버튼을 누르면 display= "none", display= "block"을 사용해서 페이지 이동 없이 타인의 고민이 랜덤으로 들어온다.

document.addEventListener("DOMContentLoaded", function () {
  const refreshButton = document.querySelector(".refresh-button");
  const contentArea = document.querySelector(".content-area");
  const newWorry = document.querySelector(".new-worry");
  const inputTitle = document.querySelector(".input-title");
  const inputContent = document.querySelector(".input-content");
  const submitButton = document.querySelector(".submit-button");

  refreshButton.addEventListener("click", function () {
    // 기존 입력 필드 숨기기
    inputTitle.style.display = "none";
    inputContent.style.display = "none";
    submitButton.style.display = "none";

    // 새 고민 섹션 표시
    newWorry.style.display = "block";

    // 서버에서 새로운 고민을 가져오는 로직
    const mockData = {
      title: "새로운 고민 제목",
      content: "새로운 고민의 내용입니다.",
    };

    const worryTitle = document.querySelector(".worry-title");
    const worryContent = document.querySelector(".worry-content");

    worryTitle.textContent = mockData.title;
    worryContent.textContent = mockData.content;

    // placeholder 속성 제거
    worryTitle.removeAttribute("placeholder");
    worryContent.removeAttribute("placeholder");
  });
});

(최종적으로 쓰인 코드는 다른 팀원분이 다시 정리 및 취합하셨다.)

2️⃣ 내가 보낸 고민, 내가 답장한 고민의 세부페이지 레이아웃을 정리하고 온도 위치도 mypage.ejs와 같게 했다.

3️⃣ 내가 보낸 고민에 답장이 달리면 별점을 줄 수 있는 버튼도 넣었다. 별점을 주고 나면 2️⃣의 사진처럼 버튼이 다시 보이지 않게 했다.

  submitBtn.onclick = async function () {
    try {
      if (currentRating > 0) {
        const data = {
          Id: Id,
          tempScore: currentRating,
        };

        const res = await axios({
          method: "patch",
          url: "/updateTemp",
          data: data,
        });
        const { result, message } = res.data;
        alert(message);

        modal.style.display = "none";
        currentRating = 0;
        resetStars();
        document.location.reload();
      } else {
        alert("별점을 선택해주세요.");
      }
    } catch (error) {}
  };

별점을 주고 나면 답장을 보낸 상대방의 온도에 반영이 된다.

 

최종 발표를 앞두고 주말 사이 감기에 걸려 말을 하기가 어려워서 다른 조원이 대신 발표를 해주었다. 꼭 조장이여서가 아니고 서비스를 나름 잘 이해하고 있었던지라 발표는 내가 하고 싶었는데 몸 상태에 속상했다. 혼자 발표를 어떻게 할지, 어디를 강조하고 어떻게 PPT를 풀어나갈지 다 생각해 놨었는데 정말 아쉬웠다🥲 (건강 관리도 중요하다는 것을 덤으로 얻었다.)
어찌저찌 인생 첫번째 프로젝트를 마무리한 것에 의미를 둬야겠다. 사람을 대하는 법도, 다른 사람들과 같이 코드를 짜 합치는 것도 이번 기회로 정말 많이 배웠다.