[알림장] 작성 / 조회

알림장은 별거 아닌거 같지만, 초보자 입장에서 꽤나 공수가 많이 들어갔다😓

일단 처음에 식사나 배변 횟수 또는 상태 컬럼을 어떻게 나누고 표현할지, 라디오버튼 또는 체크박스를 어떻게 표현할지 많이 고민하고 헤매었다.

개인적으로 이 부분은 사용자가 쉽고 빠르게 작성하며 한 눈에 확인할 수 있는 페이지이길 바랐으며, 댕린이집 웹사이트의 기능들 중에 어쩌면 가장 주요 기능이기도 하다.

먼저 테이블 설계부터 기록해보자.

⭐ Note

id: 고유 식별자 (자동 증가)
note_date: 알림장의 날짜
meal: 식사 정보 (JSON 형태로 아침식사, 점심식사, 저녁식사, 간식 여부를 저장)
poop_frequency: 배변 횟수 (0회, 1회, 2회, 3회 중 하나의 값을 저장)
poop_condition: 배변 상태 (건강, 보통, 나쁨, 설사 중 하나의 값을 저장)
mood: 컨디션 (좋음, 보통, 피곤, 나쁨 중 하나의 값을 저장)
daily: 오늘 하루의 기록 (텍스트 형태로 저장)

[ 클라이언트 ]

CreateNote.js

상태변수

기본적으로 필요한 상태변수들을 작성해준다.

훈련사가 특정 강아지를 선택해 해당 강아지의 알림장을 기록할 것이기 때문에 강아지 목록을 저장할 상태 변수

그리고 새로운 알림장 데이터를 저장할 상태변수를 작성해준다.

 const [cookies] = useCookies(['accessToken']); 
 const [puppies, setPuppies] = useState([]); // 강아지 목록을 저장할 상태 변수
 const [newNote, setNewNote] = useState({ // 새로운 알림장 데이터를 저장할 상태 변수
    noteDate: '', // 날짜
    meal: '', // 식사량
    poopFrequency: '', // 배변 횟수
    poopCondition: '', // 배변 상태
    mood: '', // 컨디션
    daily: '', // 오늘 하루
    puppyId: '' // 강아지 ID
  });

useEffect

강아지 전체 목록 불러오기

컴포넌트가 마운트될 때 실행되는 useEffect 훅이다.

강아지 목록을 가져오는 GET 요청을 보내고

성공시, 강아지 목록을 상태 변수에 저장한다.

  // 강아지 전체 목록 불러오기
  useEffect(() => {
    axios.get('http://localhost:8082/api/v1/auth/y/puppies', {
      headers: {
        'Authorization': `Bearer ${cookies.accessToken}`
      }
    })
      .then(response => {
        setPuppies(response.data);
      })
      .catch(error => {
        console.error('강아지 목록 불러오기 오류!', error);
      });
  }, [cookies.accessToken]);

입력 필드가 변경될 때 호출되는 함수

  const handleInputChange = (event) => {
    const { name, value } = event.target; // 이벤트 타겟에서 name과 value를 추출
    setNewNote(prevState => ({ // 새로운 알림장 상태를 업데이트
      ...prevState, // 이전 상태를 복사하고
      [name]: value // 변경된 필드만 업데이트
    }));
  };

알림장 저장하는 함수

 const handleSubmit = (event) => { 
    event.preventDefault(); .
    axios.post('http://localhost:8082/api/v1/auth/y/saveNote', newNote, { 
      headers: {
        'Authorization': `Bearer ${cookies.accessToken}`
      }
    })
      .then((response) => {
        setNewNote({ // 성공 후, 알림장 상태를 초기화
          noteDate: '',
          meal: '',
          poopFrequency: '',
          poopCondition: '',
          mood: '',
          daily: '',
          puppyId: ''
        });
        console.log(response.data);
        alert("알림장 등록 완료!"); 
        navigate('/noteList'); // 알림장 목록 페이지로 이동
      })
      .catch(error => {
        console.error('Error: ', error); 
      });
  };

JSX

  return (
    <>
      <div>
        <Nav2 />  
      </div>  
      <h3>📝알림장</h3> 

      <form className="noteForm" onSubmit={handleSubmit}>
        <div className="section">
          <fieldset>
            <legend>🐶 강아지 선택</legend>
            <select name="puppyId" value={newNote.puppyId} onChange={handleInputChange} required> {/* 강아지 선택 드롭다운 메뉴 */}
              <option value="">강아지를 선택하세요</option>
              {puppies.map(puppy => ( // 강아지 목록을 순회하며 옵션을 렌더링
                <option key={puppy.id} value={puppy.id}>{puppy.puppy_name}</option> 
              ))}
            </select>
          </fieldset>
          <br />

          <fieldset>
            <legend>📅 날짜</legend>
            <input 
              type="date" 
              name="noteDate" 
              value={newNote.noteDate} 
              onChange={handleInputChange} 
              required 
            /> {/* 날짜 입력 필드*/}
          </fieldset>
          <br />

          <fieldset>
            <legend>🦴 식사</legend> 
            <label><input type="radio" name="meal" value="많이 먹음" onChange={handleInputChange} /> 많이 먹음 &nbsp;</label> 
            <label><input type="radio" name="meal" value="적당하게 먹음" onChange={handleInputChange} /> 적당하게 먹음 &nbsp;</label> 
            <label><input type="radio" name="meal" value="조금 먹음" onChange={handleInputChange} /> 조금 먹음 &nbsp;</label> 
            <label><input type="radio" name="meal" value="안먹음" onChange={handleInputChange} /> 안먹음 &nbsp;</label> 
          </fieldset>
          <br />

          <fieldset>
            <legend>💩 배변</legend>
            <label><input type="radio" name="poopFrequency" value="0회" onChange={handleInputChange} /> 0회 &nbsp;</label>
            <label><input type="radio" name="poopFrequency" value="1회" onChange={handleInputChange} /> 1회 &nbsp;</label>
            <label><input type="radio" name="poopFrequency" value="2회" onChange={handleInputChange} /> 2회 &nbsp;</label>
            <label><input type="radio" name="poopFrequency" value="3회" onChange={handleInputChange} /> 3회 &nbsp;</label> 
            <br />
            <label><input type="radio" name="poopCondition" value="건강" onChange={handleInputChange} /> 건강 &nbsp;</label>
            <label><input type="radio" name="poopCondition" value="보통" onChange={handleInputChange} /> 보통 &nbsp;</label>
            <label><input type="radio" name="poopCondition" value="나쁨" onChange={handleInputChange} /> 나쁨 &nbsp;</label>
            <label><input type="radio" name="poopCondition" value="설사" onChange={handleInputChange} /> 설사 &nbsp;</label> 
          </fieldset>
          <br />

          <fieldset>
            <legend>🐕 컨디션</legend>
            <label><input type="radio" name="mood" value="좋음" onChange={handleInputChange} /> 좋음 &nbsp;</label> 
            <label><input type="radio" name="mood" value="보통" onChange={handleInputChange} /> 보통 &nbsp;</label> 
            <label><input type="radio" name="mood" value="피곤" onChange={handleInputChange} /> 피곤 &nbsp;</label> 
            <label><input type="radio" name="mood" value="나쁨" onChange={handleInputChange} /> 나쁨 &nbsp;</label> 
            <br />
          </fieldset>
          <br />

          <fieldset>
            <legend>💜 오늘 하루는</legend>
            <textarea id="daily" name="daily" value={newNote.daily} onChange={handleInputChange}></textarea> 
          </fieldset>
        </div>
        <button type="submit">작성하기</button> 
      </form>
    </>
  );
};

NoteList.js

로그인 검증: 컴포넌트가 마운트될 때 accessToken을 확인하여 로그인 여부를 검증하고, 로그인되지 않았으면 로그인 페이지로 이동
알림장 목록 가져오기: 로그인된 경우 알림장 목록을 서버에서 가져와 상태 변수에 저장. 알림장은 최신 순으로 정렬됨
페이지네이션: 현재 페이지에 표시할 알림장을 계산하고, 페이지 번호를 클릭할 때 현재 페이지를 업데이트
알림장 상세보기: 알림장을 클릭하면 해당 알림장의 상세보기 페이지로 이동
알림장 등록: 알림장 등록 버튼을 클릭하면 알림장 등록 페이지로 이동

로그인 검증 및 알림장 목록 가져오기

useEffect(() => {
  // 토큰으로 로그인 검증
  if (!cookies.accessToken) {
    alert('로그인 해주세요!'); 
    navigate('/login'); // 로그인 페이지로 이동
    return; 
  }

  // 로그인 O
  axios.get('/api/v1/auth/y/note') // 알림장 목록을 가져오는 GET 요청을 보냄
    .then(response => {
      const sortedNotes = response.data.sort((a, b) => b.id - a.id); // 알림장을 ID 역순으로 정렬
      setNotes(sortedNotes); // 정렬된 알림장을 상태 변수에 저장
    })
    .catch(error => {
      console.error('Error: ', error); 
    });
}, [cookies.accessToken, axios, navigate]); // 의존성 배열에 cookies.accessToken, axios, navigate를 포함

페이지네이션

const indexOfLastNote = currentPage * notesPerPage; // 현재 페이지의 마지막 알림장의 인덱스를 계산
const indexOfFirstNote = indexOfLastNote - notesPerPage; // 현재 페이지의 첫 번째 알림장의 인덱스를 계산
const currentNotes = notes.slice(indexOfFirstNote, indexOfLastNote); // 현재 페이지에 해당하는 알림장을 잘라냄

const paginate = (pageNumber) => setCurrentPage(pageNumber); // 페이지 번호를 설정하는 함수

알림장 상세보기 페이지로 이동

알림장의 ID를 받아 해당 알림장의 상세보기 페이지로 리디렉션

let handleClick = (id) => {
  navigate(`/noteView/${id}`); // 알림장 상세보기 페이지로 이동
};

알림장 등록 페이지로 이동

let handleCreateNote = () => {
  navigate('/createNote'); // 알림장 등록 페이지로 이동
};

NoteView.js

알림장 상세보기 화면

useParams() 를 사용해 URL 파라미터에서 특정 노트 ID를 가져온다.

import { useParams } from 'react-router-dom';

const { id } = useParams(); // URL 파라미터에서 노트 ID를 가져오기

상태변수

  const [cookies] = useCookies(['accessToken']);
  const [note, setNote] = useState(null); // 노트 상세 정보를 저장할 상태 변수

노트 데이터 가져오기

  useEffect(() => {
    axios.get(`http://localhost:8082/api/v1/auth/y/noteDetail/${id}`, {
      headers: {
        'Authorization': `Bearer ${cookies.accessToken}`
      }
    })
      .then(response => {
        setNote(response.data); // 응답 데이터를 note 상태에 저장
      })
      .catch(error => {
        console.error('There was an error fetching the note!', error); 
      });
  }, [id, cookies.accessToken]);

JSX

  return (
    <>
      <div>
        <Nav2 />
      </div>  
      <h3>📋 알림장 상세보기</h3>

      <div className="noteForm">
        <div className="section">
          <fieldset>
            <legend>🐶 강아지</legend>
            <div>{note.puppyName}</div>
          </fieldset>
          <br />

          <fieldset>
            <legend>📅 날짜</legend>
            <div>{note.noteDate}</div>
          </fieldset>
          <br />

          <fieldset>
            <legend>🦴 식사</legend>
            <label><input type="radio" readOnly checked={note.meal === "많이 먹음"} /> 많이 먹음 &nbsp;</label> 
            <label><input type="radio" readOnly checked={note.meal === "적당하게 먹음"} /> 적당하게 먹음 &nbsp;</label> 
            <label><input type="radio" readOnly checked={note.meal === "조금 먹음"} /> 조금 먹음 &nbsp;</label> 
            <label><input type="radio" readOnly checked={note.meal === "안먹음"} /> 안먹음 &nbsp;</label> 
          </fieldset>
          <br />

          <fieldset>
            <legend>💩 배변</legend>
            <label><input type="radio" readOnly checked={note.poopFrequency === "0회"} /> 0회 &nbsp;</label>
            <label><input type="radio" readOnly checked={note.poopFrequency === "1회"} /> 1회 &nbsp;</label>
            <label><input type="radio" readOnly checked={note.poopFrequency === "2회"} /> 2회 &nbsp;</label>
            <label><input type="radio" readOnly checked={note.poopFrequency === "3회"} /> 3회 &nbsp;</label>
            <br />
            <label><input type="radio" readOnly checked={note.poopCondition === "건강"} /> 건강 &nbsp;</label>
            <label><input type="radio" readOnly checked={note.poopCondition === "보통"} /> 보통 &nbsp;</label>
            <label><input type="radio" readOnly checked={note.poopCondition === "나쁨"} /> 나쁨 &nbsp;</label>
            <label><input type="radio" readOnly checked={note.poopCondition === "설사"} /> 설사 &nbsp;</label>
          </fieldset>
          <br />

          <fieldset>
            <legend>🐕 컨디션</legend>
            <label><input type="radio" readOnly checked={note.mood === "좋음"} /> 좋음 &nbsp;</label> 
            <label><input type="radio" readOnly checked={note.mood === "보통"} /> 보통 &nbsp;</label> 
            <label><input type="radio" readOnly checked={note.mood === "피곤"} /> 피곤 &nbsp;</label> 
            <label><input type="radio" readOnly checked={note.mood === "나쁨"} /> 나쁨 &nbsp;</label> 
            <br />
          </fieldset>
          <br />

          <fieldset>
            <legend>💜 오늘 하루는</legend>
            <div>{note.daily}</div>
          </fieldset>
        </div>
      </div>
    </>
  );
};

[ 서버 ]

사용자가 특정 게시물에 댓글을 작성하고, 이를 POST 요청으로 보냅니다.
요청은 "/saveComment/{board_id}" 경로로 전달되며, 경로 변수 {board_id}는 해당 게시물의 ID를 나타냅니다.
요청 본문에는 댓글 데이터가 JSON 형식으로 포함됩니다.
컨트롤러 메서드는 경로 변수와 요청 본문을 각각 boardId와 commentDTO로 추출합니다.
commentService.saveComment(boardId, commentDTO)를 호출하여 댓글을 저장합니다.
저장된 댓글 정보가 CommentDTO 형태로 클라이언트에게 응답으로 반환됩니다.

NoteRepository.java

주어진 강아지 목록에 해당하는 모든 알림장을 조회하기 위한 findAllByPuppyIn 이다.

@Repository
public interface NoteRepository extends JpaRepository<NoteEntity, Long> {
    List<NoteEntity> findAllByPuppyIn(List<PuppyEntity> puppies);
}

NoteController.java

알림장 작성 기능

요청 데이터: 알림장 정보 (NoteDTO 형태)

@PostMapping("/saveNote")
public ResDTO saveNote(@RequestBody NoteDTO noteDTO) {
    return noteService.saveNote(noteDTO);
}

알림장 목록 조회 기능

응답 데이터: 알림장 목록 (List<NoteDTO> 형태)

@GetMapping("/note")
public List<NoteDTO> note() {
    return noteService.note();
}

알림장 상세 조회 기능

요청 URL: /noteDetail/{id}

요청 데이터: 알림장 ID
응답 데이터: 알림장 상세 정보 (NoteDTO 형태)

@GetMapping("/noteDetail/{id}")
public NoteDTO noteDetail(@PathVariable(name = "id") Long id) {
    return noteService.noteDetail(id);
}

NoteService.java

알림장 작성 기능

NoteDTO를 NoteEntity로 변환하고 저장한다.

선택한 강아지의 알림장에 등록하기 위해 PuppyEntity를 찾아서 알림장에 설정하고

따로 선택한 날짜가 없으면 현재 날짜를 기본값으로 설정하되, 있다면 해당 날짜로 설정해준다.

public ResDTO saveNote(NoteDTO noteDTO) {
    // NoteDTO를 NoteEntity로 변환
    NoteEntity note = noteMapper.noteToEntity(noteDTO);

    // PuppyEntity를 찾아서 설정
    PuppyEntity puppy = puppyRepository.findById(noteDTO.getPuppyId()).orElseThrow(() -> new RuntimeException("Puppy not found"));
    note.setPuppy(puppy);
    note.setPuppyId(noteDTO.getPuppyId());

    // note_date 값 설정
    if (noteDTO.getNoteDate() != null) {
        note.setNoteDate(noteDTO.getNoteDate());
    } else {
        note.setNoteDate(new Date()); // 기본값 설정
    }

    // 알림장 저장 후 성공 메시지 반환
    return ResDTO.builder()
            .code("200")
            .message("노트 작성 성공")
            .data(noteRepository.save(note))
            .build();
}

알림장 목록 조회 기능

현재 사용자 ID를 가져와 사용자와 연관된 강아지 목록을 조회하여 사용자의 반려견에 대한 알림장 정보만 보이게 해줬다!

그리고 사용자의 반려견에게 해당하는 모든 알림장을 조회하고,

조회된 알림장을 NoteDTO로 변환하여 반환해준다.

public List<NoteDTO> note() {
    // 현재 사용자 ID를 가져옴
    String currentUserId = SecurityUtil.getCurrentUserId();
    UserEntity user = userRepository.findByUserId(currentUserId);
    List<PuppyEntity> puppies = puppyRepository.findByUserId(user.getId());

    if (puppies.isEmpty()) {
        return List.of();  // 강아지가 없으면 빈 리스트 반환
    }

    // 해당 강아지들에 대한 알림장을 모두 가져옴
    List<NoteEntity> note = noteRepository.findAllByPuppyIn(puppies);

    // NoteEntity를 NoteDTO로 변환하여 반환
    return note.stream()
            .map(noteMapper::noteToDTO)
            .collect(Collectors.toList());
}

알림장 상세 조회 기능

주어진 ID로 알림장을 조회하고, 조회된 알림장을 NoteDTO로 변환하여 반환해준다.

public NoteDTO noteDetail(Long id) {
    NoteEntity note = noteRepository.findById(id)
            .orElseThrow(() -> new RuntimeException("Note not found"));
    return noteMapper.noteToDTO(note);
}

이렇게 기능들은 구현이 완료됐고, UI 부분이 또 굉장히 빡셌다..

그 부분은 따로 기록은 하지않고 추후 결과 화면만 캡쳐해서 첨부하도록 하겠다!

저작자표시 비영리 변경금지

'Project 댕린이집' 카테고리의 다른 글

[Refactoring] Redis를 사용해 Refresh Token 관리해보자 (0)	2024.07.25
[소셜로그인] 카카오 로그인 (0)	2024.07.03
[게시판] 댓글 (0)	2024.06.29
[게시판] 좋아요 (0)	2024.06.28
[게시판] 조회수 (0)	2024.06.27

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

[알림장] 작성 / 조회

[ 클라이언트 ]

[ 서버 ]

'Project 댕린이집' 카테고리의 다른 글

[ 클라이언트 ]

[ 서버 ]

'Project 댕린이집' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

[ 클라이언트 ]

[ 서버 ]

'Project 댕린이집' 카테고리의 다른 글

[ 클라이언트 ]

[ 서버 ]

'Project 댕린이집' 카테고리의 다른 글

개인정보

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역