프로젝트 작업한거 기록https://recordoftheday.tistory.com/entry/URECA-%ED%95%99%EC%8A%B5-%EB%B8%94%EB%A1%9C%EA%B9%85%EC%9D%80-%EB%8D%B0%EC%9D%BC%EB%A6%AC-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%ED%9A%8C%EA%B3%A0%EB%A1%9C-%EB%8C%80%EC%B2%B4 [URECA] 학습 블로깅은 데일리 프로젝트 회고로 대체 (Day 68~Day 76)✍️ 5월 7일부터 20일까지는 프로젝트 진행 과정을 기록하기 위해 매일 프로젝트 회고를 작성할 예정이다.날짜블로그 주소날짜 카운트2025년 5월 7일https://recordoftheday.tistory.com/entry..

📌 오늘의 작업 핵심 요약토스트 바 UI 라이트 모드일때 바탕 색이 흰색으로 안보이는 오류 해결리드미 사진 gif 로 변경무소속 구주와 후보 사퇴로 인한 코드 변경 작업Toast 알림 라이트 모드 대응 문제 해결기병합하기 전에는 라이트 모드일때 토스트 알림이 검정색으로 잘 나타났다. 병합 한 후에는 라이트 모드에서 흰색으로 나타나는 오류 발생react-hot-toast 라이브러리를 사용해 토스트 알림을 띄우고 있었는데, 다크모드에서는 잘 작동하지만 라이트 모드에서는 배경이 흰색으로 나오거나 스타일이 적용되지 않는 문제가 발생했다.// Toaster 설정 (정상)// toast 호출 예시toast.success('후보자를 투표하세요!'); 문제 원인 toastOptions로 className: 'toas..

📌 오늘의 작업 핵심 요약👀 구현 배경 & 목적왜 지역 선택과 후보 선택이 필요했는지대선의 꽃은 바로 투표 아니겠는가?이번 프로젝트에 재미 요소를 더하기 위해 모의 투표 기능을 제안했고, 직접 만들어보았다. (그래서 이 기능은 내가 꼭 구현해보고 싶었다!) 해당 컴포넌트(디자인 포함)를 구성하면서는 선거법에 저촉되지 않도록 문구 하나하나 신중하게 작성했다. 또 너무 긴 문장은 디자인 측면에서 가독성이 떨어지기 때문에, 핵심만 명확하게 전달하는 데 집중했다. 특히 실제 선거와 무관하다는 안내를 시각적으로도 눈에 띄게 배치하며 사용자 오해가 없도록 구성했다. 이 기능을 맡고 싶었던 또 하나의 이유는, React의 상태 관리와 백엔드와의 연결 흐름을 직접 구현하며 더 깊이 배우고 싶었기 때문이다.UX 측면..

🎵 픽미 픽미 픽미업 🎵🔍 오늘 논의한 핵심 내용디자인 구체화어제는 큰 틀로 디자인을 짰다면 다시 세분화해서 디자인을 했다. 문구들 역시 변경했다. 이미지에 박스 투표함은 움직인다 ㅎㅎ 저걸 찾고 팀원들에게 물어봤을때 반응이 좋아 기부니가 좋았다. + 0512: 디자인 다시 변경해서 다시 올림, 세부 일정도 변경로고 디자인Pick Me Up의 로고 디자인 개발기를 쪼금 작성해보겠다.팀원의 아이디어로 디자인 시안들이 나왔다. 다른 팀원이 i를 새롭게 해보고 싶다고 했다. 💡“i를 투표 도장으로 표현하고, 그 아래에 기표 모양을 넣으면 어떨까?”라는 아이디어가 문득 스쳤다.그 아이디어를 바탕으로 도장 아래에 기표 모양을 추가해봤지만, 1% 부족한 느낌..그 뒤, 팀원이 도장과 기표 모양의 간격을 더 ..

🔍 오늘 논의한 핵심 내용페이지 구조 및 디자인 큰 틀 설계기존 벤처마킹 사이트를 참고하면서 “2025 조기 대선” 페이지의 전체 레이아웃을 먼저 설계전체적인 UI 흐름을 시각적으로 먼저 잡았다. 디테일하게 들어가는건 코드짜면서 할거같다. 사용자 흐름(User Flow) 작성사용자가 웹사이트에 진입해서 투표를 완료하기까지의 행동 흐름을 시각화WSB가 뭔지 아시나요? 이번 프로젝트를 통해서 WSB도 사용했다. WSB란? Writing structured Backend 구조화된 형태로 기획하고 설계해서 작성한 코드 혹은 프로젝트를 의미한다. 팀원과 함께 각 페이지별로 필요한 기능을 하나하나 고민하며, 이를 프론트엔드, 백엔드 구조에 맞춰 설계하고 구현해보는 과정을 경험했다 👍🏻아쉽지만 다음 기회에 ..

🔍 오늘 논의한 핵심 내용1. 프로젝트 개요서비스명: 픽미업 (Pick me up!)목적선거 공약 정리 21대 대통령 후보 모의 투표 및 지지율 확인핵심 가치: 정확하고 직관적인 정보 제공을 통해 유권자가 후보자에 대해 이해하고 투표에 참여할 수 있도록 지원2. 시장 분석타겟 사용자1) 20~30대 청년 유권자 (모바일 중심, 요약된 정보를 필요로 함)2) 정치 정보에 소외된 시민: 누구나 쉽게 접근할 수 있는 사용자 친화적인 인터페이스 제공 경쟁사 및 유사 서비스중앙선거관리위원회: 공식 투표소 정보 제공, 후보자 등록 정보 제공네이버/다음 포털: 뉴스 기반의 여론조사 결과 제공, 후보자 관련 기사 및 정보 제공여론조사 기관: 정기적인 여론조사 결과 발표, 다양한 조사 방식 및 결과 해석 제공뉴스 플랫..

[URECA] 독서 목표 설정 및 챌린지 달성 지원 웹사이트 구현을 통한 웹 아키텍처 이해 #8 — console.log("Hello, Bug!"); [URECA] 독서 목표 설정 및 챌린지 달성 지원 웹사이트 구현을 통한 웹 아키텍처 이해 #8프로젝트 발표일까지 남은 시간은 단 하루삭제버튼도 만들어야하고독서 진행바도 만들어야했다.하지만 시간이 부족해 로그인과 회원가입 기능을 완료한팀원이 도와줬다.팀원은 독서 진행바를recordoftheday.tistory.com

프로젝트 발표일까지 남은 시간은 단 하루삭제버튼도 만들어야하고독서 진행바도 만들어야했다.하지만 시간이 부족해 로그인과 회원가입 기능을 완료한팀원이 도와줬다.팀원은 독서 진행바를 만들고 나는 삭제 버튼을 만들었다.삭제 버튼을 클릭하면 DB에서도 삭제가 되게 구현했다.삭제 버튼을 누르면사용자가 책 카드 옆에 있는 휴지통 아이콘을 누르면 자바스크립트에서 해당 책의 book_id와 email을 가져와서 삭제 요청을 보낸다. axios.delete(`http://localhost:8080/api/books/delete`, { data: { email: book.email, book_id: book.book_id, }, headers: { Authorization: token }}) 백엔드의 경우c..

오늘 하루종일네모 상자처럼 관련 페이지 독서 진행바를 만드려고 노력했으나 실패.. progress 브랜치까지 다 생성되고 코드도 구현잘되고 자바 큰솔에도 오류도 없었으나..진행바가 나타나지 않았다..? css를 추가했는데도...? 나중에 시간 나면.. 다시 시도해보고 싶긴하다. 늦은 밤, 팀원에게 진행바 대신 삭제로 하자고 말했다.. 과연 오늘안에 구현을 다 할 수 있을지..일단 첫번째로 db에 연동되게 해야된다.. 여태 안하고 있었다.. challenge 브랜치를 생성했다.progress 브랜치를 만들때 book브랜치의 코드들과 충돌했던 슬픈 기억이 있어 조금스럽다. 하하 insert 를 통해 데이터를 추가한다.update를 통해 목표 진행 업데이트를 하고 select를 통해 현재 진행률을 확인 하려는..