diff --git a/src/components/Header.tsx b/src/components/Header.tsx index dc0f1b55..6a4e3134 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -165,6 +165,7 @@ const Alarm = styled.div` width: 48px; height: 48px; display: flex; + cursor: pointer; align-items: center; justify-content: center; `; diff --git a/src/components/HorizonBoxLayout.tsx b/src/components/HorizonBoxLayout.tsx index 3a960aad..be75b12d 100644 --- a/src/components/HorizonBoxLayout.tsx +++ b/src/components/HorizonBoxLayout.tsx @@ -68,7 +68,12 @@ const HorizonBoxLayout = ({ const tagRef = useRef(null); const containerRef = useRef(null); - const cutTags = tags.length >= 2 ? (isBookmark ? tags.slice(0, 1) : tags.slice(0, 2)) : tags; + const cutTags = + tags.length >= 2 + ? isBookmark + ? tags.slice(0, 1) + : tags.slice(0, 2) + : tags; const [tagsCount, setTagsCount] = useState(cutTags); console.log(tagsCount, "tagsCount"); @@ -78,20 +83,35 @@ const HorizonBoxLayout = ({ setTagsCount((prev) => (prev.length > 1 ? prev.slice(0, -1) : [])); } } - }, [tagRef.current, showTag, tagsCount.length, containerRef?.current?.getBoundingClientRect().width]); + }, [ + tagRef.current, + showTag, + tagsCount.length, + containerRef?.current?.getBoundingClientRect().width, + ]); return ( {/* */} - + {!userProfileType ? ( - +
+ {bookmarkPosition === "top" && bookmarkNeed && ( - + )}
@@ -145,8 +169,16 @@ const HorizonBoxLayout = ({ - +
+ {bookmarkPosition === "middle" && bookmarkNeed && ( - + )} ); @@ -210,11 +246,19 @@ interface BookmarkButtonProps { travelNumber: number; bookmarkPosition?: "top" | "middle"; } -const BookmarkButton = ({ bookmarked, travelNumber, bookmarkPosition }: BookmarkButtonProps) => { +const BookmarkButton = ({ + bookmarked, + travelNumber, + bookmarkPosition, +}: BookmarkButtonProps) => { const { accessToken, userId } = authStore(); const [showLoginModal, setShowLoginModal] = useState(false); const router = useRouter(); - const { postBookmarkMutation, deleteBookmarkMutation } = useUpdateBookmark(accessToken!, userId!, travelNumber); + const { postBookmarkMutation, deleteBookmarkMutation } = useUpdateBookmark( + accessToken!, + userId!, + travelNumber + ); const pathname = usePathname(); const bookmarkClickHandler = (e: React.MouseEvent) => { @@ -244,11 +288,18 @@ const BookmarkButton = ({ bookmarked, travelNumber, bookmarkPosition }: Bookmark modalButtonText="로그인" setModalOpen={setShowLoginModal} /> -
)} - {(isEdit ? editImages.filter((img) => img.status !== "d") : images.filter((img) => img.isSelected)).map( - (image) => ( - - onRemoveImage(image.imageNumber)}> - - - - ) - )} + {(isEdit + ? editImages.filter((img) => img.status !== "d") + : images.filter((img) => img.isSelected) + ).map((image) => ( + + onRemoveImage(image.imageNumber)}> + + + + ))} ); }; @@ -127,6 +133,7 @@ const RemoveButton = styled.button` display: block; position: absolute; top: -4px; + cursor: pointer; width: 16px; height: 16px; right: -4px; diff --git a/src/components/community/CategoryList.tsx b/src/components/community/CategoryList.tsx index 2fce2f94..7836804f 100644 --- a/src/components/community/CategoryList.tsx +++ b/src/components/community/CategoryList.tsx @@ -1,12 +1,12 @@ -'use client' -import styled from '@emotion/styled' -import React from 'react' -import SearchFilterTag from '../designSystem/tag/SearchFilterTag' +"use client"; +import styled from "@emotion/styled"; +import React from "react"; +import SearchFilterTag from "../designSystem/tag/SearchFilterTag"; interface CategoryListProps { - list: string[] - type: string - setType: (type: string) => void + list: string[]; + type: string; + setType: (type: string) => void; } const CategoryList = ({ list, type, setType }: CategoryListProps) => { @@ -14,6 +14,7 @@ const CategoryList = ({ list, type, setType }: CategoryListProps) => { {list.map((keyword, idx) => ( { /> ))} - ) -} + ); +}; const TagContainer = styled.div` display: flex; align-items: center; gap: 8px; justify-content: space-around; -` +`; -export default CategoryList +export default CategoryList; diff --git a/src/components/designSystem/Buttons/CloseButton.tsx b/src/components/designSystem/Buttons/CloseButton.tsx index 77075bb4..08da60b7 100644 --- a/src/components/designSystem/Buttons/CloseButton.tsx +++ b/src/components/designSystem/Buttons/CloseButton.tsx @@ -1,17 +1,18 @@ -'use client' -import { palette } from '@/styles/palette' -import styled from '@emotion/styled' -import React from 'react' +"use client"; +import { palette } from "@/styles/palette"; +import styled from "@emotion/styled"; +import React from "react"; interface CloseButtonProps { - setIsOpen: React.Dispatch> + setIsOpen: React.Dispatch>; } export default function CloseButton({ setIsOpen }: CloseButtonProps) { - return setIsOpen(false)}>닫기 + return setIsOpen(false)}>닫기; } const CloseBtn = styled.button` display: flex; + cursor: pointer; justify-content: center; align-items: center; @media (max-width: 390px) { @@ -34,4 +35,4 @@ const CloseBtn = styled.button` &:active { background-color: ${palette.비강조3}; } -` +`; diff --git a/src/components/designSystem/Buttons/EditAndDeleteButton.tsx b/src/components/designSystem/Buttons/EditAndDeleteButton.tsx index 4c64fad4..bb41d8c7 100644 --- a/src/components/designSystem/Buttons/EditAndDeleteButton.tsx +++ b/src/components/designSystem/Buttons/EditAndDeleteButton.tsx @@ -1,35 +1,31 @@ -'use client' -import { palette } from '@/styles/palette' -import styled from '@emotion/styled' -import React from 'react' +"use client"; +import { palette } from "@/styles/palette"; +import styled from "@emotion/styled"; +import React from "react"; interface EditAndDeleteButtonProps { - isOpen: boolean - isMyApplyTrip?: boolean // 여행 참가 취소 버튼에도 공용으로 쓰기 위함. - editClickHandler: (event: React.MouseEvent) => void - deleteClickHandler: (event: React.MouseEvent) => void - deleteText?: string + isOpen: boolean; + isMyApplyTrip?: boolean; // 여행 참가 취소 버튼에도 공용으로 쓰기 위함. + editClickHandler: (event: React.MouseEvent) => void; + deleteClickHandler: (event: React.MouseEvent) => void; + deleteText?: string; } export default function EditAndDeleteButton({ editClickHandler, deleteClickHandler, isMyApplyTrip = false, - deleteText = '삭제하기', - isOpen + deleteText = "삭제하기", + isOpen, }: EditAndDeleteButtonProps) { return ( - + {!isMyApplyTrip && 수정하기} - + {deleteText} - ) + ); } const BtnBox = styled.div<{ isMyApplyTrip: boolean; isOpen: boolean }>` @@ -39,15 +35,17 @@ const BtnBox = styled.div<{ isMyApplyTrip: boolean; isOpen: boolean }>` align-items: center; background-color: #f0f0f0; border-radius: 20px; - height: ${props => (props.isMyApplyTrip ? '52px' : '104px')}; + height: ${(props) => (props.isMyApplyTrip ? "52px" : "104px")}; - transform: ${props => (props.isOpen ? 'translateY(-5%)' : 'translateY(20%)')}; + transform: ${(props) => + props.isOpen ? "translateY(-5%)" : "translateY(20%)"}; transition: transform 0.5s ease; -` +`; const EditBtn = styled.button` height: 50%; + cursor: pointer; @media (max-width: 390px) { width: 100%; } @@ -73,9 +71,10 @@ const EditBtn = styled.button` background-color: ${palette.비강조3}; border-radius: 20px 20px 0px 0px; } -` +`; const DeleteBtn = styled.button<{ isMyApplyTrip: boolean }>` - height: ${props => (props.isMyApplyTrip ? '100%' : '50%')}; + height: ${(props) => (props.isMyApplyTrip ? "100%" : "50%")}; + cursor: pointer; @media (max-width: 390px) { width: 100%; } @@ -96,4 +95,4 @@ const DeleteBtn = styled.button<{ isMyApplyTrip: boolean }>` background-color: ${palette.비강조3}; border-radius: 0px 0px 20px 20px; } -` +`; diff --git a/src/components/designSystem/Buttons/FilterButton.tsx b/src/components/designSystem/Buttons/FilterButton.tsx index 795ef863..6a63e4f3 100644 --- a/src/components/designSystem/Buttons/FilterButton.tsx +++ b/src/components/designSystem/Buttons/FilterButton.tsx @@ -1,20 +1,20 @@ -'use client' -import ResetIcon from '@/components/icons/ResetIcon' -import { palette } from '@/styles/palette' -import styled from '@emotion/styled' +"use client"; +import ResetIcon from "@/components/icons/ResetIcon"; +import { palette } from "@/styles/palette"; +import styled from "@emotion/styled"; interface FilterButtonProps { - text: string + text: string; addStyle?: { - backgroundColor?: string - color?: string - boxShadow?: string - weight?: 'regular' | 'medium' | 'semiBold' | 'bold' - } - type?: 'button' | 'reset' | 'submit' | undefined - children?: React.ReactNode - disabled?: boolean - onClick?: (event: React.MouseEvent) => void - intializeOnClick?: (event: React.MouseEvent) => void + backgroundColor?: string; + color?: string; + boxShadow?: string; + weight?: "regular" | "medium" | "semiBold" | "bold"; + }; + type?: "button" | "reset" | "submit" | undefined; + children?: React.ReactNode; + disabled?: boolean; + onClick?: (event: React.MouseEvent) => void; + intializeOnClick?: (event: React.MouseEvent) => void; } // 사용 방식 { @@ -26,24 +26,29 @@ interface FilterButtonProps { // 다음, 로그인 등에 쓰이는 버튼. const FilterButton = ({ - text = '다음', - type = 'submit', + text = "다음", + type = "submit", addStyle = { - backgroundColor: 'rgba(62, 141, 0, 1)', - color: 'white', - boxShadow: '-2px 4px 5px 0px rgba(170, 170, 170, 0.14)', - weight: 'semiBold' + backgroundColor: "rgba(62, 141, 0, 1)", + color: "white", + boxShadow: "-2px 4px 5px 0px rgba(170, 170, 170, 0.14)", + weight: "semiBold", }, onClick = () => {}, intializeOnClick = () => {}, disabled = false, - children + children, }: FilterButtonProps) => { return ( + style={!disabled ? addStyle : {}} + > {text} {children} - ) -} + ); +}; const FilterButtonWrapper = styled.div` width: 100%; @@ -66,7 +72,7 @@ const FilterButtonWrapper = styled.div` display: flex; align-items: center; gap: 16px; -` +`; const ButtonContainer = styled.button<{ disabled: boolean }>` @media (max-width: 390px) { width: 100%; @@ -74,6 +80,7 @@ const ButtonContainer = styled.button<{ disabled: boolean }>` @media (min-width: 390px) { width: 342px; } + height: 48px; border-radius: 40px; cursor: pointer; @@ -82,9 +89,9 @@ const ButtonContainer = styled.button<{ disabled: boolean }>` padding: 10px 20px 10px 20px; display: flex; align-items: center; - background-color: ${props => props.disabled && 'rgba(220, 220, 220, 1)'}; - color: ${props => props.disabled && palette.비강조}; + background-color: ${(props) => props.disabled && "rgba(220, 220, 220, 1)"}; + color: ${(props) => props.disabled && palette.비강조}; border: none; -` +`; -export default FilterButton +export default FilterButton; diff --git a/src/components/designSystem/Buttons/ReportButton.tsx b/src/components/designSystem/Buttons/ReportButton.tsx index d9f08080..6ef9821a 100644 --- a/src/components/designSystem/Buttons/ReportButton.tsx +++ b/src/components/designSystem/Buttons/ReportButton.tsx @@ -31,13 +31,15 @@ const BtnBox = styled.div<{ isOpen: boolean }>` border-radius: 20px; height: 52px; - transform: ${(props) => (props.isOpen ? "translateY(-5%)" : "translateY(20%)")}; + transform: ${(props) => + props.isOpen ? "translateY(-5%)" : "translateY(20%)"}; transition: transform 0.5s ease; `; const ReportBtn = styled.button` height: 100%; + cursor: pointer; @media (max-width: 390px) { width: 100%; } diff --git a/src/components/designSystem/modal/CheckingModal.tsx b/src/components/designSystem/modal/CheckingModal.tsx index f26d496c..d64b043e 100644 --- a/src/components/designSystem/modal/CheckingModal.tsx +++ b/src/components/designSystem/modal/CheckingModal.tsx @@ -8,7 +8,9 @@ interface CheckingModalProps { modalMsg: string; modalTitle: string; modalButtonText: string; - setModalOpen: React.Dispatch> | ((bool: boolean) => void); + setModalOpen: + | React.Dispatch> + | ((bool: boolean) => void); setIsSelected?: React.Dispatch>; onClick?: () => void; } @@ -44,7 +46,11 @@ export default function CheckingModal({ return createPortal( - e.stopPropagation()} ref={modalRef} isModalOpen={isModalOpen}> + e.stopPropagation()} + ref={modalRef} + isModalOpen={isModalOpen} + > {modalTitle} {modalMsg} @@ -91,6 +97,7 @@ const CloseBtn = styled.button` text-align: center; color: ${palette.비강조2}; display: flex; + cursor: pointer; justify-content: center; align-items: center; width: 50%; @@ -102,6 +109,7 @@ const SelectBtn = styled.button` font-size: 16px; font-weight: 600; line-height: 16px; + cursor: pointer; text-align: center; color: ${palette.keycolor}; display: flex; @@ -151,7 +159,8 @@ const Modal = styled.div<{ isModalOpen: boolean }>` gap: 16px; border-radius: 20px; opacity: 0px; - transform: ${({ isModalOpen }) => (isModalOpen ? "translateY(0)" : "translateY(30%)")}; + transform: ${({ isModalOpen }) => + isModalOpen ? "translateY(0)" : "translateY(30%)"}; transition: transform 0.3s ease-in-out; `; const DarkWrapper = styled.div` diff --git a/src/components/designSystem/modal/EditAndDeleteModal.tsx b/src/components/designSystem/modal/EditAndDeleteModal.tsx index 4b305e05..05b33213 100644 --- a/src/components/designSystem/modal/EditAndDeleteModal.tsx +++ b/src/components/designSystem/modal/EditAndDeleteModal.tsx @@ -46,7 +46,11 @@ export default function EditAndDeleteModal({ if (!isListening) return null; return createPortal( - 390 ? 390 : window.innerWidth}> + 390 ? 390 : window.innerWidth} + > {!isMyApplyTrip ? ( > | ((bool: boolean) => void); + setModalOpen: + | React.Dispatch> + | ((bool: boolean) => void); } -export default function NoticeModal({ isModalOpen, modalMsg, modalTitle, setModalOpen }: ResultModalProps) { +export default function NoticeModal({ + isModalOpen, + modalMsg, + modalTitle, + setModalOpen, +}: ResultModalProps) { const modalRef = useRef(null); // 모달 참조 const [isListening, setIsListening] = useState(false); // 모달 창이 열리고, 이벤트 등록이 동기적으로 일어나도록 제한. useEffect(() => { const handleClickOutside = (event: MouseEvent) => { - if (isListening && modalRef.current && !modalRef.current.contains(event.target as Node)) { + if ( + isListening && + modalRef.current && + !modalRef.current.contains(event.target as Node) + ) { setModalOpen(false); // 외부 클릭 시 모달 닫기 } }; @@ -41,10 +52,23 @@ export default function NoticeModal({ isModalOpen, modalMsg, modalTitle, setModa
- + - + ` gap: 16px; border-radius: 20px; opacity: 0px; - transform: ${({ isModalOpen }) => (isModalOpen ? "translateY(0)" : "translateY(30%)")}; + transform: ${({ isModalOpen }) => + isModalOpen ? "translateY(0)" : "translateY(30%)"}; transition: transform 0.3s ease-in-out; `; const DarkWrapper = styled.div` diff --git a/src/components/designSystem/modal/ResultModal.tsx b/src/components/designSystem/modal/ResultModal.tsx index 062e46cf..03a65442 100644 --- a/src/components/designSystem/modal/ResultModal.tsx +++ b/src/components/designSystem/modal/ResultModal.tsx @@ -11,14 +11,23 @@ interface ResultModalProps { modalTitle: string; setModalOpen: React.Dispatch>; } -export default function ResultModal({ isModalOpen, modalMsg, modalTitle, setModalOpen }: ResultModalProps) { +export default function ResultModal({ + isModalOpen, + modalMsg, + modalTitle, + setModalOpen, +}: ResultModalProps) { const modalRef = useRef(null); // 모달 참조 const [isListening, setIsListening] = useState(false); // 모달 창이 열리고, 이벤트 등록이 동기적으로 일어나도록 제한. useEffect(() => { const handleClickOutside = (event: MouseEvent) => { - if (isListening && modalRef.current && !modalRef.current.contains(event.target as Node)) { + if ( + isListening && + modalRef.current && + !modalRef.current.contains(event.target as Node) + ) { setModalOpen(false); // 외부 클릭 시 모달 닫기 } }; @@ -87,6 +96,7 @@ const CloseBtn = styled.button` font-weight: 400; line-height: 16px; text-align: center; + cursor: pointer; color: ${palette.비강조2}; display: flex; justify-content: center; @@ -138,7 +148,8 @@ const Modal = styled.div<{ isModalOpen: boolean }>` gap: 16px; border-radius: 20px; opacity: 0px; - transform: ${({ isModalOpen }) => (isModalOpen ? "translateY(0)" : "translateY(30%)")}; + transform: ${({ isModalOpen }) => + isModalOpen ? "translateY(0)" : "translateY(30%)"}; transition: transform 0.3s ease-in-out; `; const DarkWrapper = styled.div` diff --git a/src/components/map/TravelLogMap.tsx b/src/components/map/TravelLogMap.tsx index 30326ce7..b205afc7 100644 --- a/src/components/map/TravelLogMap.tsx +++ b/src/components/map/TravelLogMap.tsx @@ -1,6 +1,6 @@ "use client"; import { APIProvider, Map, MapCameraChangedEvent, useMap } from "@vis.gl/react-google-maps"; -import React, { useEffect, useRef } from "react"; +import React, { useCallback, useEffect, useMemo, useRef } from "react"; import sigoonGeoJsonData from "../../../public/geojson/korea.json"; import countryGeoJsonData from "../../../public/geojson/country.json"; import { cityDistricts, getMapLocation } from "@/utils/travellog/travelLog"; @@ -16,26 +16,29 @@ const TravelLogMap = ({ }) => { const { center, zoom } = getMapLocation(target, type); + const mapStyle = useMemo(() => { + if (type === "국내") { + return { width: "100%", height: 418 }; + } + return target ? { width: "100%", height: 400 } : { width: "100%", height: 192 }; + }, [type, target]); + + const onCameraChanged = useCallback((ev: MapCameraChangedEvent) => { + console.log("camera changed:", ev.detail.center, ev.detail.zoom); + }, []); + return ( - console.log("camera changed:", ev.detail.center, ev.detail.zoom) - } + onCameraChanged={onCameraChanged} > @@ -46,35 +49,16 @@ const TravelLogMap = ({ const TravelLog = ({ type, highlightedRegions = [] }: { type: "세계" | "국내"; highlightedRegions?: string[] }) => { const map = useMap(); - useEffect(() => { - if (!map) return; - - const geoJsonLayer = new google.maps.Data({ map }); - - geoJsonLayer.addGeoJson(type === "국내" ? sigoonGeoJsonData : countryGeoJsonData); - - geoJsonLayer.setStyle({ - strokeColor: "#fff", - strokeWeight: 1, - strokeOpacity: 1, - fillOpacity: 0, // 투명한 채우기 - }); + const geoJsonData = useMemo(() => (type === "국내" ? sigoonGeoJsonData : countryGeoJsonData), [type]); - geoJsonLayer.addGeoJson(type === "국내" ? sigoonGeoJsonData : countryGeoJsonData); - // 고차 함수로 사용 - const createHighlighter = (highlightedRegions, cityDistricts) => (regionName) => - highlightedRegions.includes(regionName) || - highlightedRegions.some((region) => cityDistricts[region]?.includes(regionName)); + const isHighlighted = useMemo(() => createHighlighter(highlightedRegions, cityDistricts), [highlightedRegions]); - // 하이라이트 함수 만들기 - const isHighlighted = createHighlighter(highlightedRegions, cityDistricts); - - //스타일 적용 - geoJsonLayer.setStyle((feature) => { + const getFeatureStyle = useCallback( + (feature: google.maps.Data.Feature) => { const regionName = feature.getProperty("name_ko") || feature.getProperty("CTP_KOR_NM") || feature.getProperty("SIG_KOR_NM"); - const highlighted = isHighlighted(regionName); + const highlighted = isHighlighted(regionName as string); return { strokeColor: "#fff", @@ -83,12 +67,32 @@ const TravelLog = ({ type, highlightedRegions = [] }: { type: "세계" | "국내 fillColor: highlighted ? "#3366FF" : "#FFFFFF", fillOpacity: highlighted ? 1 : 0, }; - }); - }, [map]); + }, + [isHighlighted] + ); + + useEffect(() => { + if (!map) return; + + const geoJsonLayer = new google.maps.Data({ map }); + + geoJsonLayer.addGeoJson(geoJsonData); + + geoJsonLayer.setStyle(getFeatureStyle); + + return () => { + geoJsonLayer.setMap(null); + }; + }, [map, geoJsonData, getFeatureStyle]); return null; }; +const createHighlighter = + (highlightedRegions: string[], cityDistricts: Record) => (regionName: string) => + highlightedRegions.includes(regionName) || + highlightedRegions.some((region) => cityDistricts[region]?.includes(regionName)); + // 더미 함수 클릭이나 출처 표시 함수 // function createAttribution() { // const attributionLabel = document.createElement("div"); diff --git a/src/components/relationKeyword/RelationKeywordList.tsx b/src/components/relationKeyword/RelationKeywordList.tsx index 91dbecc9..475b8675 100644 --- a/src/components/relationKeyword/RelationKeywordList.tsx +++ b/src/components/relationKeyword/RelationKeywordList.tsx @@ -1,45 +1,43 @@ -'use client' -import useRelationKeyword from '@/hooks/search/useRelationKeyword' -import styled from '@emotion/styled' -import RelationKeyword from './RelationKeyword' +"use client"; +import useRelationKeyword from "@/hooks/search/useRelationKeyword"; +import styled from "@emotion/styled"; +import RelationKeyword from "./RelationKeyword"; interface RelationKeywordListProps { - keyword: string - onClick: (keyword: string) => void + keyword: string; + onClick: (keyword: string) => void; } const RelationKeywordList = ({ keyword, - onClick + onClick, }: RelationKeywordListProps) => { - const { data, isLoading, error } = useRelationKeyword(keyword) + const { data, isLoading, error } = useRelationKeyword(keyword); if (isLoading) { - return null + return null; } if (error) { - return null + return null; } - console.log(data, '관련 키워드.') + console.log(data, "관련 키워드."); return ( {data && data.suggestions.length > 0 && - data?.suggestions?.map(data => ( + data?.suggestions?.map((data) => ( ))} - ) -} + ); +}; -const Contianer = styled.div`` +const Contianer = styled.div``; -export default RelationKeywordList +export default RelationKeywordList; diff --git a/src/components/travellog/AreaDropdown.tsx b/src/components/travellog/AreaDropdown.tsx index 92b19dfd..158837cd 100644 --- a/src/components/travellog/AreaDropdown.tsx +++ b/src/components/travellog/AreaDropdown.tsx @@ -139,6 +139,7 @@ const ItemContainer = styled.div` align-items: center; justify-content: space-between; width: 100%; + cursor: pointer; padding: 18px 0; gap: 8px; `; diff --git a/src/components/travellog/AreaFilter.tsx b/src/components/travellog/AreaFilter.tsx index 08f80e04..09f1e73e 100644 --- a/src/components/travellog/AreaFilter.tsx +++ b/src/components/travellog/AreaFilter.tsx @@ -31,10 +31,15 @@ export default function AreaFilter() { {FILTER_LIST.map(({ title, value }, idx) => ( ))} diff --git a/src/components/triplist/TripInfiniteList.tsx b/src/components/triplist/TripInfiniteList.tsx index 5be9d53e..f4bfde09 100644 --- a/src/components/triplist/TripInfiniteList.tsx +++ b/src/components/triplist/TripInfiniteList.tsx @@ -32,7 +32,8 @@ const TripInfiniteList = () => { return value; })(); - const { data, isFetching, hasNextPage, fetchNextPage, isLoading } = useTripList(engSort); + const { data, isFetching, hasNextPage, fetchNextPage, isLoading } = + useTripList(engSort); useInfiniteScroll(() => { if (inView) { !isFetching && hasNextPage && fetchNextPage(); @@ -53,7 +54,10 @@ const TripInfiniteList = () => { {page.content.map((content, itemIndex) => ( -
clickTrip(content.travelNumber)}> +
clickTrip(content.travelNumber)} + > { total={content.maxPerson} location={content.location} daysAgo={daysAgo(content.createdAt)} - daysLeft={dayjs(content.registerDue, "YYYY-MM-DD").diff(dayjs().startOf("day"), "day")} + daysLeft={dayjs(content.registerDue, "YYYY-MM-DD").diff( + dayjs().startOf("day"), + "day" + )} recruits={content.nowPerson} />
@@ -85,7 +92,11 @@ const BookmarkButton = ({ bookmarked, travelNumber }: BookmarkButtonProps) => { const [showLoginModal, setShowLoginModal] = useState(false); const pathname = usePathname(); const router = useRouter(); - const { postBookmarkMutation, deleteBookmarkMutation } = useUpdateBookmark(accessToken!, userId!, travelNumber); + const { postBookmarkMutation, deleteBookmarkMutation } = useUpdateBookmark( + accessToken!, + userId!, + travelNumber + ); const bookmarkClickHandler = (e: React.MouseEvent) => { e.stopPropagation(); if (isGuestUser()) { @@ -117,7 +128,11 @@ const BookmarkButton = ({ bookmarked, travelNumber }: BookmarkButtonProps) => { {bookmarked ? ( ) : ( - + )} diff --git a/src/components/userProfile/UserProfileDetail.tsx b/src/components/userProfile/UserProfileDetail.tsx index 0fb52c29..3f302b6b 100644 --- a/src/components/userProfile/UserProfileDetail.tsx +++ b/src/components/userProfile/UserProfileDetail.tsx @@ -14,6 +14,7 @@ import { userProfileOverlayStore } from "@/store/client/userProfileOverlayStore" import useUserProfile from "@/hooks/userProfile/useUserProfile"; import ProfileRightVectorIcon from "../icons/ProfileRightVectorIcon"; import { authStore } from "@/store/client/authStore"; +import { usePathname } from "next/navigation"; interface UserProfileDetailProps { isMyPage?: boolean; @@ -22,7 +23,7 @@ export default function UserProfileDetail({ isMyPage = false }: UserProfileDetai const { setProfileShow, userProfileUserId } = userProfileOverlayStore(); const { userProfileInfo } = useUserProfile(); const navigateWithTransition = useViewTransition(); - + const pathname = usePathname(); if (!isMyPage && !userProfileInfo) return null; const profileData = isMyPage @@ -79,6 +80,8 @@ export default function UserProfileDetail({ isMyPage = false }: UserProfileDetai const cutTags = preferredTags.length > 2 ? preferredTags.slice(0, 2) : preferredTags; const moveToNextLink = (link: string) => { + localStorage.setItem("profilePath", pathname); + navigateWithTransition(link); setTimeout(() => { setProfileShow(false); @@ -143,7 +146,7 @@ export default function UserProfileDetail({ isMyPage = false }: UserProfileDetai 총 여행한 거리✨ - {formatNumberWithComma(travelDistance)}km + {formatNumberWithComma(Math.ceil(travelDistance))}km @@ -224,6 +227,7 @@ export const Name = styled.div` line-height: 16px; letter-spacing: -0.25px; text-align: center; + cursor: pointer; color: ${palette.기본}; `; diff --git a/src/hooks/useHeaderNavigation.tsx b/src/hooks/useHeaderNavigation.tsx index 7cad438f..67f28879 100644 --- a/src/hooks/useHeaderNavigation.tsx +++ b/src/hooks/useHeaderNavigation.tsx @@ -392,7 +392,14 @@ export const useHeaderNavigation = () => { // 상대방 프로필 화면의 여행 뱃지 화면 condition: () => checkRoute.exact(ROUTES.USER_PROFILE_BADGE), action: () => { - router.back(); + const profilePath = localStorage.getItem("profilePath"); + if (profilePath) { + router.push(profilePath); + } else { + router.back(); + } + localStorage.removeItem("profilePath"); + if (userProfileUserId !== userId) { // 마이페이지가 아닌 페이지에서 접속 했을시, 뒤로 가기 해도 프로필 overlay화면 setTimeout(() => setProfileShow(true), 100); diff --git a/src/page/CreateTrip/CalendarClient.tsx b/src/page/CreateTrip/CalendarClient.tsx index a54c411c..a2a754ce 100644 --- a/src/page/CreateTrip/CalendarClient.tsx +++ b/src/page/CreateTrip/CalendarClient.tsx @@ -49,7 +49,11 @@ const CalendarClient: React.FC = ({ holidaysArray }) => { return ( <> - + @@ -67,7 +71,9 @@ const CalendarClient: React.FC = ({ holidaysArray }) => { - {date ? formatDateRange(date.startDate, date.endDate) : "날짜를 선택하세요."} + {date + ? formatDateRange(date.startDate, date.endDate) + : "날짜를 선택하세요."}
@@ -150,7 +156,7 @@ const DuedateBtn = styled.button` padding: 12px 16px; gap: 0px; border-radius: 20px; - + cursor: pointer; opacity: 0px; `; diff --git a/src/page/CreateTrip/CreateTripDetail/CalendarWrapper.tsx b/src/page/CreateTrip/CreateTripDetail/CalendarWrapper.tsx index c725dd68..31d51b7e 100644 --- a/src/page/CreateTrip/CreateTripDetail/CalendarWrapper.tsx +++ b/src/page/CreateTrip/CreateTripDetail/CalendarWrapper.tsx @@ -15,13 +15,24 @@ const CalendarWrapper = ({ startDate: string; endDate: string; } | null; - addDate: ({ startDate, endDate }: { startDate: string; endDate: string }) => void; + addDate: ({ + startDate, + endDate, + }: { + startDate: string; + endDate: string; + }) => void; }) => { const [showModal, setShowModal] = useState(false); return ( <> - + setShowModal(true)}> @@ -29,7 +40,11 @@ const CalendarWrapper = ({ 여행 날짜 - {date ? formatDateRange(date?.startDate ?? "", date?.endDate ?? "") : "날짜를 선택하세요."} + + {date + ? formatDateRange(date?.startDate ?? "", date?.endDate ?? "") + : "날짜를 선택하세요."} + @@ -43,6 +58,7 @@ const Container = styled.div` padding: 11px 0; padding-left: 8px; display: flex; + cursor: pointer; align-items: center; justify-content: space-between; `; diff --git a/src/page/CreateTrip/CreateTripDetail/CreateScheduleItem.tsx b/src/page/CreateTrip/CreateTripDetail/CreateScheduleItem.tsx index 6578c5c6..90204037 100644 --- a/src/page/CreateTrip/CreateTripDetail/CreateScheduleItem.tsx +++ b/src/page/CreateTrip/CreateTripDetail/CreateScheduleItem.tsx @@ -6,7 +6,14 @@ import { tripPlanStore } from "@/store/client/tripPlanStore"; import { palette } from "@/styles/palette"; import styled from "@emotion/styled"; import { useRouter } from "next/navigation"; -import React, { DragEvent, ForwardedRef, forwardRef, useEffect, useRef, useState } from "react"; +import React, { + DragEvent, + ForwardedRef, + forwardRef, + useEffect, + useRef, + useState, +} from "react"; const CreateScheduleItem = ({ title, @@ -35,11 +42,20 @@ const CreateScheduleItem = ({ }[] ) => void; }) => { - const { scrollTop, addScrollTop, planIndex, addPlanIndex, isChange, addIsChange } = tripPlanStore(); + const { + scrollTop, + addScrollTop, + planIndex, + addPlanIndex, + isChange, + addIsChange, + } = tripPlanStore(); const [contentHeight, setContentHeight] = useState(0); const router = useRouter(); const contentRef = useRef(null); // 콘텐츠 참조 추가 - const plan = plans.find((plan) => plan.planOrder === (type === "create" ? idx : idx + 1)); + const plan = plans.find( + (plan) => plan.planOrder === (type === "create" ? idx : idx + 1) + ); const count = plan?.spots?.length ?? 0; useEffect(() => { if (contentRef.current) { @@ -51,7 +67,9 @@ const CreateScheduleItem = ({ if (scrollTop > 0 && isChange) { console.log("scrollTop", scrollTop); document.getElementById("container-scroll")?.scrollTo({ - top: scrollTop + (document.getElementById("top-scroll")?.clientHeight ?? 0), + top: + scrollTop + + (document.getElementById("top-scroll")?.clientHeight ?? 0), }); setTimeout(() => { addScrollTop(0); @@ -61,16 +79,28 @@ const CreateScheduleItem = ({ }, [scrollTop]); const clickPlans = () => { - console.log("plancheck", idx, document.getElementById("container-scroll")?.scrollTop); + console.log( + "plancheck", + idx, + document.getElementById("container-scroll")?.scrollTop + ); addScrollTop(document.getElementById("container-scroll")?.scrollTop ?? 0); addPlanIndex(idx); - router.push(`/search/place/${idx}?type=${type}${type === "edit" ? `&travelNumber=${travelNumber}` : ""}`); + router.push( + `/search/place/${idx}?type=${type}${type === "edit" ? `&travelNumber=${travelNumber}` : ""}` + ); }; return ( - + Day {idx + 1} @@ -79,8 +109,20 @@ const CreateScheduleItem = ({ {count > 0 && {count}} - - + + @@ -90,7 +132,13 @@ const CreateScheduleItem = ({ isChecked={isOpen} contentHeight={contentHeight} // 동적으로 계산된 높이 전달 > - {plan?.planOrder !== undefined && } + {plan?.planOrder !== undefined && ( + + )} @@ -172,6 +220,7 @@ const Button = styled.button` border-radius: 40px; width: 100%; height: 42px; + cursor: pointer; background-color: ${palette.비강조4}; color: ${palette.비강조}; font-size: 14px; @@ -186,10 +235,12 @@ const Content = styled.div<{ }>` height: ${(props) => (props.isChecked ? `${props.contentHeight}px` : "0")}; overflow: hidden; - border-bottom: ${(props) => (props.tabBorder ? "1px solid rgba(240, 240, 240, 1)" : "none")}; + border-bottom: ${(props) => + props.tabBorder ? "1px solid rgba(240, 240, 240, 1)" : "none"}; padding: ${(props) => (props.isChecked ? `16px 6px 16px 6px` : `0 0 0 0`)}; - transform: ${(props) => (props.isChecked ? "translateY(0)" : `translateY(${props.paddingTop})`)}; + transform: ${(props) => + props.isChecked ? "translateY(0)" : `translateY(${props.paddingTop})`}; transition: height 0.4s ease-in-out, padding 0.4s ease-in-out, diff --git a/src/page/CreateTrip/CreateTripDetail/InfoWrapper.tsx b/src/page/CreateTrip/CreateTripDetail/InfoWrapper.tsx index 8190f4b6..71bd9227 100644 --- a/src/page/CreateTrip/CreateTripDetail/InfoWrapper.tsx +++ b/src/page/CreateTrip/CreateTripDetail/InfoWrapper.tsx @@ -175,6 +175,7 @@ const GenderItem = styled.div<{ isSelected: boolean }>` display: flex; flex-direction: column; align-items: center; + cursor: pointer; gap: 4px; justify-content: center; background-color: ${(props) => @@ -198,6 +199,7 @@ const CountContainer = styled.div` const PlusButton = styled.button` width: 42px; height: 42px; + cursor: pointer; border-radius: 50%; position: relative; background-color: ${palette.비강조}; @@ -232,7 +234,7 @@ const MinusButton = styled.button` border-radius: 50%; position: relative; background-color: ${palette.비강조}; - + cursor: pointer; &::before { content: ""; width: 16px; @@ -302,6 +304,7 @@ const Count = styled.div` const Container = styled.div` padding: 11px 0; + cursor: pointer; padding-left: 8px; display: flex; align-items: center; diff --git a/src/page/CreateTrip/CreateTripDetail/RecruitingWrapper.tsx b/src/page/CreateTrip/CreateTripDetail/RecruitingWrapper.tsx index d1646b49..b0c56215 100644 --- a/src/page/CreateTrip/CreateTripDetail/RecruitingWrapper.tsx +++ b/src/page/CreateTrip/CreateTripDetail/RecruitingWrapper.tsx @@ -147,6 +147,7 @@ const PlusButton = styled.button` width: 42px; height: 42px; border-radius: 50%; + cursor: pointer; position: relative; background-color: ${palette.비강조}; &::after { @@ -180,7 +181,7 @@ const MinusButton = styled.button` border-radius: 50%; position: relative; background-color: ${palette.비강조}; - + cursor: pointer; &::before { content: ""; width: 16px; @@ -257,7 +258,7 @@ const RecruitingBtn = styled.button` align-items: center; justify-content: space-between; margin-top: 8px; - + cursor: pointer; height: 48px; padding: 12px 16px; gap: 0px; diff --git a/src/page/CreateTrip/CreateTripDetail/search/SearchItem.tsx b/src/page/CreateTrip/CreateTripDetail/search/SearchItem.tsx index 9939531a..07f13374 100644 --- a/src/page/CreateTrip/CreateTripDetail/search/SearchItem.tsx +++ b/src/page/CreateTrip/CreateTripDetail/search/SearchItem.tsx @@ -133,6 +133,7 @@ const Container = styled.div` height: 69px; width: 100%; gap: 4px; + cursor: pointer; border-bottom: 1px solid #e7e7e7; `; @@ -160,6 +161,7 @@ const AddButton = styled.button` background-color: ${palette.비강조5}; color: ${palette.기본}; line-height: 14px; + cursor: pointer; font-size: 12px; font-weight: 600; padding: 6px 10px; diff --git a/src/page/CreateTrip/CreateTripDetail/search/SearchPlace.tsx b/src/page/CreateTrip/CreateTripDetail/search/SearchPlace.tsx index a7b0702c..106fd32e 100644 --- a/src/page/CreateTrip/CreateTripDetail/search/SearchPlace.tsx +++ b/src/page/CreateTrip/CreateTripDetail/search/SearchPlace.tsx @@ -331,6 +331,7 @@ const HeaderTitle = styled.div` const IconContainer = styled.div` width: 48px; + cursor: pointer; height: 48px; display: flex; align-items: center; diff --git a/src/page/CreateTrip/CreateTripInfo.tsx b/src/page/CreateTrip/CreateTripInfo.tsx index ce262b34..7a71266f 100644 --- a/src/page/CreateTrip/CreateTripInfo.tsx +++ b/src/page/CreateTrip/CreateTripInfo.tsx @@ -15,9 +15,18 @@ import useViewTransition from "@/hooks/useViewTransition"; import { useRouter } from "next/navigation"; import { isGuestUser } from "@/utils/user"; export const selections = [ - { gender: "모두", icon: (isSelect: boolean) => }, - { gender: "남자만", icon: (isSelect: boolean) => }, - { gender: "여자만", icon: (isSelect: boolean) => }, + { + gender: "모두", + icon: (isSelect: boolean) => , + }, + { + gender: "남자만", + icon: (isSelect: boolean) => , + }, + { + gender: "여자만", + icon: (isSelect: boolean) => , + }, ]; const CreateTripInfo = () => { @@ -52,7 +61,10 @@ const CreateTripInfo = () => { 성별 선택 {selections.map((item) => ( - clickGender(item.gender)}> + clickGender(item.gender)} + > {item.icon(genderType === item.gender)} {item.gender} @@ -109,12 +121,15 @@ const GenderList = styled.div` const GenderItem = styled.div<{ isSelected: boolean }>` display: flex; + cursor: pointer; flex-direction: column; align-items: center; gap: 4px; justify-content: center; - background-color: ${(props) => (props.isSelected ? palette.keycolorBG : palette.검색창)}; - border: ${(props) => (props.isSelected ? `1px solid ${palette.keycolor}` : "0px")}; + background-color: ${(props) => + props.isSelected ? palette.keycolorBG : palette.검색창}; + border: ${(props) => + props.isSelected ? `1px solid ${palette.keycolor}` : "0px"}; border-radius: 20px; width: 90px; height: 84px; diff --git a/src/page/CreateTrip/component/TagList.tsx b/src/page/CreateTrip/component/TagList.tsx index 141bc804..9ab76346 100644 --- a/src/page/CreateTrip/component/TagList.tsx +++ b/src/page/CreateTrip/component/TagList.tsx @@ -23,15 +23,22 @@ const TagList = ({ taggedArray, clickTag }: TagListProps) => { key={tag} idx={idx} addStyle={{ - backgroundColor: isActive(idx) ? "rgba(227, 239, 217, 1)" : " rgba(240, 240, 240, 1)", - color: isActive(idx) ? `${palette.keycolor}` : "rgba(52, 52, 52, 1)", + backgroundColor: isActive(idx) + ? "rgba(227, 239, 217, 1)" + : " rgba(240, 240, 240, 1)", + color: isActive(idx) + ? `${palette.keycolor}` + : "rgba(52, 52, 52, 1)", - border: isActive(idx) ? `1px solid ${palette.keycolor}` : `1px solid ${palette.검색창}`, + border: isActive(idx) + ? `1px solid ${palette.keycolor}` + : `1px solid ${palette.검색창}`, borderRadius: "30px", padding: "10px 20px", fontWeight: isActive(idx) ? "600" : "400", lineHeight: "22px", }} + style={{ cursor: "pointer" }} text={tag} onClick={() => clickTag(idx)} /> diff --git a/src/page/Home/ContentTitleContainer.tsx b/src/page/Home/ContentTitleContainer.tsx index 1363197f..417a555a 100644 --- a/src/page/Home/ContentTitleContainer.tsx +++ b/src/page/Home/ContentTitleContainer.tsx @@ -7,7 +7,11 @@ interface TitleContainerProps { minWidth?: string; detailLink?: string; } -const TitleContainer = ({ text, minWidth = "auto", detailLink = "/" }: TitleContainerProps) => { +const TitleContainer = ({ + text, + minWidth = "auto", + detailLink = "/", +}: TitleContainerProps) => { const router = useRouter(); const clickHandler = () => router.push(`${detailLink}`); // 후에 보여줄 페이지 부분. return ( @@ -36,6 +40,7 @@ const More = styled.div` width: 48px; height: 48px; display: flex; + cursor: pointer; align-items: center; justify-content: center; `; diff --git a/src/page/Home/CreateTripButton.tsx b/src/page/Home/CreateTripButton.tsx index 0777c473..8f908c50 100644 --- a/src/page/Home/CreateTripButton.tsx +++ b/src/page/Home/CreateTripButton.tsx @@ -156,6 +156,7 @@ const CreateBtn = styled.button<{ right: string; isClicked: boolean }>` height: 48px; padding: 14px 24px; border-radius: 20px; + cursor: pointer; background-color: white; display: flex; justify-content: center; @@ -181,6 +182,7 @@ const IconContainer = styled.button<{ rotated: boolean; right: string }>` pointer-events: auto; right: 24px; bottom: 124px; + cursor: pointer; width: 70px; height: 70px; border-radius: 50%; diff --git a/src/page/Home/TripAvailable.tsx b/src/page/Home/TripAvailable.tsx index f143ebb7..6a082b48 100644 --- a/src/page/Home/TripAvailable.tsx +++ b/src/page/Home/TripAvailable.tsx @@ -43,7 +43,13 @@ const TripAvailable = () => { cutTrips?.map((post, idx) => { return ( - +
clickTrip(post.travelNumber)}> { userName={post.userName} tags={post.tags} daysAgo={daysAgo(post?.createdAt)} - daysLeft={dayjs(post.registerDue, "YYYY-MM-DD").diff(dayjs().startOf("day"), "day")} + daysLeft={dayjs(post.registerDue, "YYYY-MM-DD").diff( + dayjs().startOf("day"), + "day" + )} title={post.title} recruits={post.nowPerson} total={post.maxPerson} diff --git a/src/page/MyPage/EditMyTag.tsx b/src/page/MyPage/EditMyTag.tsx index cf8490eb..1e3a7bc8 100644 --- a/src/page/MyPage/EditMyTag.tsx +++ b/src/page/MyPage/EditMyTag.tsx @@ -38,7 +38,13 @@ const TAG_LIST = [ const AGE_LIST = ["10대", "20대", "30대", "40대", "50대 이상"]; export default function EditMyTag() { const [isChanged, setIsChanged] = useState(false); - const { agegroup, addPreferredTags, addAgegroup, preferredTags, addIsTagUpdated } = myPageStore(); + const { + agegroup, + addPreferredTags, + addAgegroup, + preferredTags, + addIsTagUpdated, + } = myPageStore(); console.log(agegroup, preferredTags, "나이, 태그"); const { updateMyPageMutation, isUpdatedSuccess } = useMyPage(); const [taggedArray, setTaggedArray] = useState(preferredTags); @@ -75,7 +81,9 @@ export default function EditMyTag() { return; } } - const newArray = taggedArray.includes(tag) ? taggedArray.filter((v) => v !== tag) : [...taggedArray, tag]; + const newArray = taggedArray.includes(tag) + ? taggedArray.filter((v) => v !== tag) + : [...taggedArray, tag]; if (JSON.stringify(newArray) !== JSON.stringify(taggedArray)) { setIsChanged(true); } @@ -103,19 +111,27 @@ export default function EditMyTag() { {AGE_LIST.map((ageValue, idx) => ( handleClickage(ageValue)} text={ageValue} key={ageValue} + style={{ cursor: "pointer" }} /> ))} @@ -133,8 +149,12 @@ export default function EditMyTag() { key={tag} idx={idx} addStyle={{ - backgroundColor: isActive(tag.split(" ")[1]) ? "rgba(227, 239, 217, 1)" : " rgba(240, 240, 240, 1)", - color: isActive(tag.split(" ")[1]) ? `${palette.keycolor}` : "rgba(52, 52, 52, 1)", + backgroundColor: isActive(tag.split(" ")[1]) + ? "rgba(227, 239, 217, 1)" + : " rgba(240, 240, 240, 1)", + color: isActive(tag.split(" ")[1]) + ? `${palette.keycolor}` + : "rgba(52, 52, 52, 1)", border: isActive(tag.split(" ")[1]) ? `1px solid ${palette.keycolor}` : `1px solid ${palette.검색창}`, @@ -144,6 +164,7 @@ export default function EditMyTag() { padding: "10px 20px", fontWeight: isActive(tag.split(" ")[1]) ? "600" : "400", }} + style={{ cursor: "pointer" }} text={tag} onClick={() => clickTag(tag.split(" ")[1])} /> @@ -159,8 +180,14 @@ export default function EditMyTag() { text="완료" onClick={completeClickHandler} addStyle={{ - backgroundColor: taggedArray.length > 0 ? "rgba(62, 141, 0, 1)" : "rgba(220, 220, 220, 1)", - color: taggedArray.length > 0 ? "rgba(240, 240, 240, 1)" : palette.비강조, + backgroundColor: + taggedArray.length > 0 + ? "rgba(62, 141, 0, 1)" + : "rgba(220, 220, 220, 1)", + color: + taggedArray.length > 0 + ? "rgba(240, 240, 240, 1)" + : palette.비강조, boxShadow: "rgba(170, 170, 170, 0.1)", }} /> diff --git a/src/page/Register/RegisterAge.tsx b/src/page/Register/RegisterAge.tsx index 4a856960..3a69a02c 100644 --- a/src/page/Register/RegisterAge.tsx +++ b/src/page/Register/RegisterAge.tsx @@ -15,7 +15,9 @@ type RegisterAgeContextType = { setGenderCheck: (value: boolean) => void; }; -export const RegisterAgeContext = createContext(undefined); +export const RegisterAgeContext = createContext< + RegisterAgeContextType | undefined +>(undefined); export const useRegisterAge = () => { const context = useContext(RegisterAgeContext); @@ -29,7 +31,16 @@ const AGE_LIST = ["10대", "20대", "30대", "40대", "50대 이상"]; const RegisterAge = ({ children }: { children: React.ReactNode }) => { const router = useRouter(); - const { agegroup, addAgegroup, email, name, resetForm, resetName, socialLogin, setSocialLogin } = userStore(); + const { + agegroup, + addAgegroup, + email, + name, + resetForm, + resetName, + socialLogin, + setSocialLogin, + } = userStore(); const [genderCheck, setGenderCheck] = useState(false); const isEmailRegister = socialLogin === null; const isSocialLoginKakao = socialLogin === "kakao"; @@ -40,7 +51,10 @@ const RegisterAge = ({ children }: { children: React.ReactNode }) => { if (location.pathname == "/registerAge") { console.log(1); router.push("/registerAge/registerGender"); - } else if (genderCheck && location.pathname == "/registerAge/registerGender") { + } else if ( + genderCheck && + location.pathname == "/registerAge/registerGender" + ) { document.documentElement.style.viewTransitionName = "forward"; navigateWithTransition("/registerTripStyle"); } @@ -79,14 +93,22 @@ const RegisterAge = ({ children }: { children: React.ReactNode }) => { {AGE_LIST.map((age, idx) => ( handleClickage(age)} text={age} diff --git a/src/page/Register/RegisterGender.tsx b/src/page/Register/RegisterGender.tsx index 9428e918..5f5b5afd 100644 --- a/src/page/Register/RegisterGender.tsx +++ b/src/page/Register/RegisterGender.tsx @@ -8,8 +8,18 @@ import { useRouter } from "next/navigation"; const RegisterGender = () => { const { setGenderCheck } = useRegisterAge(); - const { sex, addSex, name, email, agegroup, resetAge, resetName, resetForm, socialLogin, setSocialLogin } = - userStore(); + const { + sex, + addSex, + name, + email, + agegroup, + resetAge, + resetName, + resetForm, + socialLogin, + setSocialLogin, + } = userStore(); const [maleClicked, setMaleClicked] = useState(sex == "M" ? true : false); const [femaleClicked, setFemaleClicked] = useState(sex == "F" ? true : false); const router = useRouter(); @@ -78,18 +88,40 @@ const RegisterGender = () => { -

남자

+

+ 남자 +

-

+

여자

@@ -133,6 +165,7 @@ const MaleBox = styled.div` flex-direction: column; align-items: center; font-weight: 500; + cursor: pointer; p { margin-top: 8px; font-size: 18px; @@ -143,6 +176,7 @@ const FemaleBox = styled.div` flex-direction: column; align-items: center; font-weight: 500; + cursor: pointer; p { margin-top: 8px; font-size: 18px; diff --git a/src/page/Register/RegisterTripStyle.tsx b/src/page/Register/RegisterTripStyle.tsx index 01a1f360..f2393cca 100644 --- a/src/page/Register/RegisterTripStyle.tsx +++ b/src/page/Register/RegisterTripStyle.tsx @@ -39,7 +39,11 @@ const RegisterTripStyle = () => { const { registerEmail, registerEmailMutation: { isSuccess, isPending }, - registerSocialMutation: { isSuccess: isSocialSuccess, isError: isSocialError, isPaused: isSocialPending }, + registerSocialMutation: { + isSuccess: isSocialSuccess, + isError: isSocialError, + isPaused: isSocialPending, + }, registerSocial, } = useAuth(); @@ -114,7 +118,11 @@ const RegisterTripStyle = () => { resetGender(); router.push("/login"); } else { - if (isRegisterEmail && !isSuccess && (!email || !name || !agegroup || !sex)) { + if ( + isRegisterEmail && + !isSuccess && + (!email || !name || !agegroup || !sex) + ) { resetName(); sessionStorage.removeItem("sessionToken"); resetForm(); @@ -152,15 +160,20 @@ const RegisterTripStyle = () => { }, [isSocialError, isSocialSuccess]); // 버튼 활성화상태. - const [activeStates, setActiveStates] = useState(new Array(TAGCOUNT).fill(false)); + const [activeStates, setActiveStates] = useState( + new Array(TAGCOUNT).fill(false) + ); // 최종적으로 선택된 여행 스타일 담은 배열 - const tripStyleArray = categoryButtonTextArray.filter((_, idx) => activeStates[idx]).map((item) => item.value); + const tripStyleArray = categoryButtonTextArray + .filter((_, idx) => activeStates[idx]) + .map((item) => item.value); // 버튼 클릭 핸들러 const handleButtonClick: MouseEventHandler = (e) => { const newActiveStates = [...activeStates]; - newActiveStates[parseInt(e.currentTarget.id)] = !newActiveStates[parseInt(e.currentTarget.id)]; // 토글 + newActiveStates[parseInt(e.currentTarget.id)] = + !newActiveStates[parseInt(e.currentTarget.id)]; // 토글 const activeArray = newActiveStates.filter((v) => v === true); if (activeArray.length <= 5) { @@ -226,15 +239,22 @@ const RegisterTripStyle = () => { key={item.label} idx={idx} addStyle={{ - backgroundColor: isActive(idx) ? "rgba(227, 239, 217, 1)" : " rgba(240, 240, 240, 1)", - color: isActive(idx) ? `${palette.keycolor}` : "rgba(52, 52, 52, 1)", - border: isActive(idx) ? `1px solid ${palette.keycolor}` : `1px solid ${palette.검색창}`, + backgroundColor: isActive(idx) + ? "rgba(227, 239, 217, 1)" + : " rgba(240, 240, 240, 1)", + color: isActive(idx) + ? `${palette.keycolor}` + : "rgba(52, 52, 52, 1)", + border: isActive(idx) + ? `1px solid ${palette.keycolor}` + : `1px solid ${palette.검색창}`, borderRadius: "30px", fontSize: "16", lineHeight: "22px", padding: "10px 20px", fontWeight: isActive(idx) ? "600" : "400", }} + style={{ cursor: "pointer" }} text={item.label} onClick={handleButtonClick} /> @@ -248,8 +268,14 @@ const RegisterTripStyle = () => { text="다음" onClick={completeHandler} addStyle={{ - backgroundColor: tripStyleArray.length > 0 ? "rgba(62, 141, 0, 1)" : "rgba(220, 220, 220, 1)", - color: tripStyleArray.length > 0 ? "rgba(240, 240, 240, 1)" : palette.비강조, + backgroundColor: + tripStyleArray.length > 0 + ? "rgba(62, 141, 0, 1)" + : "rgba(220, 220, 220, 1)", + color: + tripStyleArray.length > 0 + ? "rgba(240, 240, 240, 1)" + : palette.비강조, boxShadow: "rgba(170, 170, 170, 0.1)", }} />