Main Page Functionality: This section includes the core layout and functionalities of the main page, consisting of sections for creating travel plans, showcasing travel tips, and highlighting popular destinations.
- Introduction: Displays a welcoming message and an invitation to start planning a trip.
- Search Functionality: Users can search for locations to plan their trips.
- Carousel Functionality: Displays travel tips with an image and description in a carousel format.
- Navigation: Users can navigate through tips using previous and next buttons.
- Destination Cards: Displays a grid of popular travel destinations with images and location names.
- Navigation: Clicking on a destination navigates the user to the planning page for that location.
Community Functionality: This section handles the core functionalities of the community page, including fetching posts, liking/unliking posts, adding comments, and creating new posts.
- Initial Fetch: When the component mounts, it fetches posts from the API using the fetchPosts function.
- Post Enhancement: Each post is enhanced with comments and like count using fetchCommentsByPostId.
- Sorting: Posts are sorted by creation date in descending order.
- Infinite Scroll: Uses Intersection Observer API to load more posts as the user scrolls down.
- Search Function: Filters posts based on the search term entered by the user.
- Post Modal: Opens a modal to show post details and comments when a post is clicked.
- Create Post Modal: Opens a modal to create a new post.
- Comment Function: Adds a comment to the selected post and updates the comment count.
- Like Function: Toggles the like status of a post and triggers a heart animation.
- Unlike Function: Toggles the unlike status of a post and triggers a blue heart animation.
- Create Post Function: Handles the creation of a new post, including uploading an image and updating the post with the image URL if provided.
Login Successful Processing: After OAuth authentication, the user information is saved and redirected. If the user successfully logs in through Google OAuth, the user information is imported using the issued access token and the refresh token, which is then stored in the cookie. Then, the user is redirected to the main page.
- Runs when the component is mounted using the useEffect hook.
- Retrieves the access token and refresh token from the cookies.
- If the token exists, makes an API call to get user information.
- If the API call is successful, the returned user information is stored in the cookies.
- For example, you can store userEmail in cookies so that other components can utilize this information.
- After storing user information, redirects the user to the main page (
/). - If the API call fails or the token does not exist, redirects the user to the login page to prompt re-login.
- While importing user information, displays a "Loading..." message to inform the user that processing is underway.
