🧩 도와조약
📁 github
📒 webpack.yml
📁 common
📒 GoogleSearch.js
이 코드는 Google 검색 기능을 React 컴포넌트로 구현한 것입니다. 이 컴포넌트는 Google의 사용자 정의 검색 엔진(Custom Search Engine, CSE)을 사용하여 검색 기능을 제공합니다.
useEffect 훅을 사용하여 컴포넌트가 마운트될 때 Google CSE 스크립트를 동적으로 로드합니다. 이 스크립트는 URL에서 가져옵니다.
스크립트가 로드되면, setInterval 함수를 사용하여 일정 간격으로 Google 검색 입력 필드(input.gsc-input)를 찾습니다. 이 입력 필드가 찾아지면, 이벤트 리스너를 추가하여 사용자의 입력을 처리합니다.
입력 필드에 텍스트를 입력하면, changeInput 함수를 호출하여 상태를 업데이트하고, onInput 함수를 호출하여 추가 작업을 수행합니다.
사용자가 Enter 키를 누르면, changeInput 함수를 호출하여 상태를 업데이트하고, 일정 시간 후에 setAnimate 함수를 호출하여 애니메이션을 시작하고, nextStep 함수를 호출하여 다음 단계로 이동합니다.
마지막으로, 검색 결과를 클릭하면, changeInput 함수를 호출하여 상태를 업데이트합니다.
이 컴포넌트는 Google 검색 상자와 검색 결과를 렌더링하는 두 개의 div 요소를 반환합니다. 이들 요소는 Google CSE 스크립트에 의해 검색 상자와 검색 결과로 변환됩니다. 이렇게 함으로써, 이 컴포넌트는 Google의 강력한 검색 기능을 React 애플리케이션에 쉽게 통합할 수 있게 해줍니다.
📒 Header.js
웹사이트의 헤더를 구현한 것입니다. 이 헤더는 로그인/로그아웃 버튼, 회원가입 링크, 그리고 서비스의 주요 섹션으로 이동하는 링크를 포함하고 있습니다.
isLoggedIn 상태를 확인하여 사용자가 로그인했는지 여부에 따라 다른 메뉴 항목을 보여줍니다. 로그인한 사용자에게는 환영 메시지와 로그아웃 버튼을 보여주며, 로그아웃한 사용자에게는 로그인과 회원가입 링크를 보여줍니다.
handleLoginClick 함수는 로그인 버튼을 클릭했을 때 호출되며, 로그인 모달을 보여줍니다. handleLogout 함수는 로그아웃 버튼을 클릭했을 때 호출되며, 사용자를 로그아웃시킵니다.
useEffect 훅을 사용하여 isLoggedIn 상태가 변경될 때마다 사용자 정보를 가져와서 환영 메시지를 업데이트합니다.
마지막으로, 이 컴포넌트는 헤더와 메뉴 항목을 렌더링합니다. 각 메뉴 항목은 StyledLink 컴포넌트를 사용하여 구현되어 있으며, 이 컴포넌트는 react-router-dom의 Link 컴포넌트를 스타일링한 것입니다. 이렇게 함으로써, 사용자는 새로운 페이지로 이동하면서 애플리케이션의 상태를 유지할 수 있습니다.
📁 survey
📒 Step1.js
=>‘시작하기’ 버튼을 클릭하면 handleStartClick 함수가 호출되며, 이 함수 내에서 사용자가 로그인했는지 확인하고, 로그인하지 않았다면 로그인 페이지로 이동하도록 설정되어 있습니다. 로그인한 사용자의 경우, 애니메이션을 시작하고(setAnimate('down')), 애니메이션 완료 후에 다음 단계로 이동합니다(nextSteps()). 이 모든 동작은 setTimeout 함수를 통해 1000ms 후에 실행됩니다. 이렇게 하면 사용자에게 부드러운 전환 효과를 제공할 수 있습니다.
📒 Step2.js
📒 Step3.js
📒 Step4.js
📒 Survey.js
React와 Redux를 사용하여 설계된 설문조사 컴포넌트입니다. 설문조사는 4단계로 구성되어 있으며, 각 단계는 별도의 컴포넌트(Step1, Step2, Step3, Step4)로 구현되어 있습니다.
useState를 사용하여 form 상태를 관리하고 있으며, 이는 사용자의 질병(disease)과 알레르기(allergy) 정보를 저장합니다. useDispatch와 useSelector를 통해 Redux store에 접근하고, 설문조사의 현재 단계(step)를 관리합니다.
nextSteps, prevSteps, resetSteps 함수를 통해 설문조사의 단계를 제어하며, changeInput 함수를 통해 form 상태를 업데이트합니다.
마지막으로, submitForm 함수는 Axios.post를 사용하여 서버에 설문조사 결과를 전송하고, 응답을 콘솔에 출력합니다. 이 함수는 Step3 컴포넌트에서 호출됩니다.
각 단계 컴포넌트는 현재 단계(step)에 따라 조건부로 렌더링되며, 필요한 props를 전달받아 사용합니다. 이렇게 구성함으로써 설문조사의 각 단계를 독립적으로 관리하고, 전체 설문조사의 흐름을 효과적으로 제어할 수 있습니다.
📁 user
📒 Login.js
handleSubmit 함수는 사용자가 로그인 폼을 제출할 때 호출되며, 이 함수는 Axios.post를 사용하여 서버에 로그인 요청을 보냅니다. 요청이 성공하면 서버로부터 받은 accessToken과 refreshToken을 로컬 스토리지와 쿠키에 저장하고, 사용자를 홈페이지로 리다이렉트합니다. 만약 요청이 실패하면, 사용자에게 로그인 실패 메시지를 알립니다.
로그인 폼은 이메일과 비밀번호 입력 필드를 포함하며, 각 필드의 값은 상태 변수(email, password)에 연결되어 있습니다. 이 상태 변수들은 useState 훅을 사용하여 관리됩니다. 사용자가 입력 필드의 값을 변경하면, 해당 상태 변수의 값도 업데이트됩니다.
마지막으로, 이 페이지는 사용자가 아직 회원이 아닌 경우 회원가입 페이지로 이동할 수 있는 링크를 제공합니다. 이 링크는 StyledLink 컴포넌트를 사용하여 구현되어 있습니다. 이 컴포넌트는 react-router-dom의 Link 컴포넌트를 스타일링한 것입니다. 이렇게 함으로써, 사용자는 새로운 페이지로 이동하면서 애플리케이션의 상태를 유지할 수 있습니다.
📒 LoginModal.js
로그인 폼은 이메일과 비밀번호 입력 필드를 포함하며, 각 필드의 값은 상태 변수(email, password)에 연결되어 있습니다. 이 상태 변수들은 useState 훅을 사용하여 관리됩니다. 사용자가 입력 필드의 값을 변경하면, 해당 상태 변수의 값도 업데이트됩니다.
마지막으로, 이 모달은 사용자가 아직 회원이 아닌 경우 회원가입 페이지로 이동할 수 있는 링크를 제공합니다. 이 링크는 StyledLink 컴포넌트를 사용하여 구현되어 있습니다. 이 컴포넌트는 react-router-dom의 Link 컴포넌트를 스타일링한 것입니다. 이렇게 함으로써, 사용자는 새로운 페이지로 이동하면서 애플리케이션의 상태를 유지할 수 있습니다. 이 모달은 onClose prop을 통해 닫힐 수 있습니다.
📒 OAuthLogin.js
이 코드는 OAuth를 통한 로그인을 처리하는 React 컴포넌트입니다. 이 컴포넌트는 URL의 쿼리 파라미터에서 access_token과 refresh_token을 추출하고, 이들을 각각 로컬 스토리지와 쿠키에 저장합니다.
useEffect 훅을 사용하여 컴포넌트가 마운트될 때 로그인 처리를 수행합니다. access_token과 refresh_token이 모두 존재하면, 이들을 저장하고 onLogin 콜백을 호출한 후, Redux의 login 액션을 디스패치합니다. 마지막으로, 사용자를 홈페이지로 리다이렉트합니다.
📒 Signup.js
회원가입 페이지를 구현한 것입니다. 이 페이지는 사용자가 사용자명, 이메일, 비밀번호를 입력하여 회원가입할 수 있으며, 구글, 카카오, 네이버 계정으로도 회원가입할 수 있습니다.
handlePasswordChange 함수는 사용자가 비밀번호 입력 필드의 값을 변경할 때 호출되며, 이 함수는 입력된 비밀번호의 길이와 구성을 검사하여 적절한 경고 메시지를 설정합니다.
handleSignup 함수는 사용자가 회원가입 폼을 제출할 때 호출되며, 이 함수는 Axios.post를 사용하여 서버에 회원가입 요청을 보냅니다. 요청이 성공하면 사용자에게 회원가입 성공 메시지를 알리고 로그인 페이지로 리다이렉트합니다. 만약 요청이 실패하면, 사용자에게 회원가입 실패 메시지를 알립니다.
회원가입 폼은 사용자명, 이메일, 비밀번호 입력 필드를 포함하며, 각 필드의 값은 상태 변수(DisplayNameInputValue, emailInputValue, passwordInputValue)에 연결되어 있습니다. 이 상태 변수들은 useState 훅을 사용하여 관리됩니다. 사용자가 입력 필드의 값을 변경하면, 해당 상태 변수의 값도 업데이트됩니다. 이렇게 함으로써, 사용자의 입력을 실시간으로 반영할 수 있습니다.
마지막으로, 이 페이지는 사용자가 이미 회원인 경우 로그인 페이지로 이동할 수 있는 링크를 제공합니다. 이 링크는 StyledLink 컴포넌트를 사용하여 구현되어 있습니다. 이 컴포넌트는 react-router-dom의 Link 컴포넌트를 스타일링한 것입니다. 이렇게 함으로써, 사용자는 새로운 페이지로 이동하면서 애플리케이션의 상태를 유지할 수 있습니다.
📁 redux
📒 authSlice.js
이 코드는 Redux Toolkit의 createSlice 함수를 사용하여 인증 상태를 관리하는 Redux 슬라이스를 생성합니다. 이 슬라이스는 isLoggedIn이라는 상태를 가지며, 이 상태는 사용자가 로그인했는지 여부를 나타냅니다. 초기 상태는 로컬 스토리지의 accessToken 값의 존재 여부에 따라 결정됩니다.
이 슬라이스는 두 개의 리듀서를 정의하고 있습니다: login과 logout. login 리듀서는 isLoggedIn 상태를 true로 설정하며, logout 리듀서는 isLoggedIn 상태를 false로 설정합니다.
마지막으로, 이 슬라이스의 액션 생성자(login, logout)와 리듀서를 내보냅니다. 이들은 다른 부분에서 이 슬라이스의 상태를 업데이트하거나 상태를 읽는 데 사용될 수 있습니다. 이렇게 함으로써, 이 슬라이스는 애플리케이션의 인증 상태를 중앙에서 관리하고, 이 상태를 필요한 컴포넌트에서 쉽게 접근하고 업데이트할 수 있게 해줍니다. 이는 상태 관리의 복잡성을 줄이고 코드의 재사용성을 높이는 데 도움이 됩니다.
📒 store.js
이 코드는 Redux Toolkit의 configureStore 함수를 사용하여 Redux 스토어를 생성합니다. 이 스토어는 여러 개의 리듀서를 포함하고 있습니다: boardSlice, CommunitySlice, authReducer, SearchSlice, surveyReducer, mypageReducer.
각 리듀서는 애플리케이션의 특정 부분의 상태를 관리합니다. 예를 들어, authReducer는 인증 상태를, surveyReducer는 설문조사 상태를 관리합니다. 이들 리듀서는 각각의 슬라이스에서 정의되어 있으며, 스토어에서는 이들을 하나로 합쳐서 사용합니다.
마지막으로, 이 스토어를 기본으로 내보냅니다(export default store). 이렇게 함으로써, 이 스토어는 애플리케이션의 다른 부분에서 상태를 읽고 업데이트하는 데 사용될 수 있습니다. 이는 상태 관리의 복잡성을 줄이고 코드의 재사용성을 높이는 데 도움이 됩니다. 이 스토어는 애플리케이션의 상태를 중앙에서 관리하고, 이 상태를 필요한 컴포넌트에서 쉽게 접근하고 업데이트할 수 있게 해줍니다.
📒 surveySlice.js
Redux Toolkit의 createSlice 함수를 사용하여 설문조사의 단계를 관리하는 Redux 슬라이스를 생성합니다. 이 슬라이스는 step이라는 상태를 가지며, 이 상태는 현재 설문조사의 단계를 나타냅니다. 초기 상태는 1로 설정되어 있습니다.
이 슬라이스는 setStep이라는 리듀서를 정의하고 있습니다. setStep 리듀서는 step 상태를 액션의 페이로드로 설정합니다.
마지막으로, 이 슬라이스의 액션 생성자(setStep)와 리듀서를 내보냅니다. 이들은 다른 부분에서 이 슬라이스의 상태를 업데이트하거나 상태를 읽는 데 사용될 수 있습니다. 이렇게 함으로써, 이 슬라이스는 애플리케이션의 설문조사 단계 상태를 중앙에서 관리하고, 이 상태를 필요한 컴포넌트에서 쉽게 접근하고 업데이트할 수 있게 해줍니다. 이는 상태 관리의 복잡성을 줄이고 코드의 재사용성을 높이는 데 도움이 됩니다. 이 슬라이스는 애플리케이션의 상태를 중앙에서 관리하고, 이 상태를 필요한 컴포넌트에서 쉽게 접근하고 업데이트할 수 있게 해줍니다.
📁 style
📒 LoginStyle.js
📒 SignupStyle.js
📒 SurveyStyle.js
📁 utils
📒 UserInfo.js
이 코드는 로컬 스토리지에서 accessToken을 가져와서 해당 토큰의 페이로드를 반환하는 함수입니다.
함수는 다음과 같이 동작합니다:
localStorage.getItem('accessToken')을 사용하여 로컬 스토리지에서 accessToken을 가져옵니다.
만약 accessToken이 존재하지 않으면, 함수는 null을 반환합니다.
accessToken이 존재하면, 토큰을 .으로 분할하여 페이로드 부분을 가져옵니다.
페이로드는 Base64Url로 인코딩되어 있으므로, 이를 일반 Base64 형식으로 변환합니다.
atob 함수를 사용하여 Base64를 디코딩하고, JSON.parse를 사용하여 JSON 문자열을 JavaScript 객체로 변환합니다.
마지막으로, 변환된 페이로드 객체를 반환합니다.
이 함수는 JWT(JSON Web Token)의 페이로드를 추출하는 데 사용될 수 있습니다. JWT의 페이로드는 일반적으로 사용자 정보나 권한 등을 포함하고 있습니다. 이렇게 함으로써, 클라이언트 측에서 토큰을 해석하고 필요한 정보를 추출할 수 있습니다. 이는 서버에 추가 요청을 보내지 않고도 토큰의 정보를 사용할 수 있게 해줍니다.
🧩 펫칭
📁 Care
📒 Board.tsx
=> 돌봄리스트 페이지 메인에서 DB에 있는 데이터를 url쿼리로 조회. response.data.data로 저장
📒 Card.tsx
=> 카드 컴포넌트를 정의합니다. 각 카드는 제목, 위치 태그, 애완 동물 크기, 별명, 프로필 이미지 URL, 이미지 URL들, 그리고 게시물 ID를 속성으로 가집니다. 사용자가 카드를 클릭하면, 해당 게시물의 세부 정보 페이지로 이동합니다. 또한, 각 카드는 Carousel 컴포넌트를 사용하여 이미지 슬라이드 쇼를 표시합니다.
📒 Carousel.tsx
=> slick-carousel 사용, 화살표에 기능 props로 전달
📒 ckeditor.js
📒 ImageUploader.tsx
=> map을 사용, 여러개의 파일 업로드 가능케 함 이미지를 업로드하고 미리보기를 제공하는 컴포넌트를 정의합니다. 사용자가 이미지를 선택하면, 이 이미지들이 상위 컴포넌트로 전달됩니다. 또한 선택된 이미지들의 미리보기가 화면에 표시됩니다.
📒 Postcode.tsx
=> 주소를 검색하고 선택할 수 있는 컴포넌트를 정의합니다. 사용자가 주소를 선택하면, 이 정보가 상위 컴포넌트로 전달됩니다. 주소 검색은 DaumPostcodeEmbed를 사용하여 수행됩니다.
📒 ReactCalendar.tsx
=> hassanmojab 라이브러리 사용, customInput으로 디자인 통일시킴 React를 사용하여 날짜 범위를 선택할 수 있는 달력 컴포넌트를 정의합니다. 사용자가 날짜 범위를 선택하면, 이 정보가 상위 컴포넌트로 전달됩니다.
📁 Hook
📒 useDateSelect.ts
=> 이 파일은 React Hook을 사용하여 날짜 선택 기능을 구현한 코드입니다. 'useDateSelect'라는 커스텀 훅은 시작 날짜와 종료 날짜를 상태로 관리하며, 두 날짜 사이를 선택하면 해당 날짜 데이터를 상태에 저장하는 기능을 제공합니다.
📁 Page
📒 CareList.tsx
=> 사용자가 위치, 날짜를 선택하고, 해당 정보에 따른 데이터를 서버로부터 불러와 화면에 카드 형태로 보여주는 것입니다. useStore의 setIsEdit을 사용, 글작성누르면 setIsEdit false로 만들고 carelistpost로 보냄
InfiniteScroll 구현
📒 CareListDetail.tsx
=> 게시물 상세 정보를 보여주며, 해당 게시물의 작성자인 경우 수정 및 삭제 기능을 제공
useParams를 통해 postId를 가져와 해당 게시물의 정보를 API 요청으로 받아와서 출력, 수정 버튼 클릭 시 useStore의 setIsEdit을 true로 변경하고, 정보를 setPostToEdit에 저장 후 carelistpost로 이동
📒 CareListPost.tsx
=> 게시물 작성 및 수정에 관련된 로직을 담고 있습니다. 사용자의 위치, 게시물 정보, 날짜 선택, 이미지 업로드 등의 상태를 관리하며, 펫시터인지 집사인지를 선택하는 기능도 제공합니다. 게시물을 작성하거나 수정할 때, 입력된 정보를 바탕으로 서버에 요청을 보내고, 요청이 성공하면 게시글 목록 페이지로 이동합니다.
📁 store
📒 editPost.ts
"zustand"를 사용해 생성된 이 파일은 게시물 수정 상태를 관리합니다. "postToEdit"는 편집할 게시물 정보를, "isEdit"는 편집 상태를 나타내며, 각각의 상태는 "setPostToEdit", "setIsEdit" 함수를 통해 업데이트됩니다.
📁 Util
📒 navigateToCareListDetail.ts
React의 라우팅 라이브러리인 'react-router-dom'의 'useNavigate' 훅을 사용해 특정 게시물의 상세 페이지로 이동하는 함수를 정의한 것입니다. 함수를 호출할 때 전달받은 postId를 사용하여 해당 게시물의 상세 정보를 보여주는 경로로 이동합니다.
📒 types.ts
TypeScript로 작성된 타입 정의 파일입니다. 'CardProps'라는 타입은 각각의 카드에 필요한 정보를 정의하고 있습니다. 또한 'UserPostType' 인터페이스는 사용자의 게시물 정보와 페이지 관련 정보를 담은 객체의 구조를 정의하고 있습니다.
