From 2815df93ac0b025001d49b3e02251c981993d7ac Mon Sep 17 00:00:00 2001 From: choyeon Date: Tue, 19 Dec 2023 14:24:35 +0900 Subject: [PATCH 01/12] =?UTF-8?q?refac:=20=EC=98=A8=EB=B3=B4=EB=94=A9,=20?= =?UTF-8?q?=EC=84=A0=EB=AC=BC=ED=95=98=EA=B8=B0,=20=EC=84=A4=EC=A0=95=20re?= =?UTF-8?q?fac?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/Vector.tsx | 3 +- src/components/atoms/BottomSheet/index.tsx | 39 ++++++++++-- .../atoms/Input/ShortInput/index.tsx | 9 +-- src/components/friends/PresentRecommend.tsx | 33 +++++++--- .../friends/bottomsheet/PriceFilter.tsx | 11 +--- .../friends/bottomsheet/SortItem.tsx | 8 +-- src/libs/store/onboard.ts | 29 +++++++-- src/libs/store/present.ts | 5 ++ src/pages/onboarding/details/Agreement.tsx | 6 +- src/pages/onboarding/details/SignUp.tsx | 61 ++++++++++--------- .../details/selectInfo/SelectFavor.tsx | 10 +-- src/pages/onboarding/details/signup/Birth.tsx | 5 +- .../onboarding/details/signup/Gender.tsx | 6 +- src/pages/onboarding/details/signup/Name.tsx | 12 ++-- .../onboarding/details/signup/StartMent.tsx | 10 +-- .../onboarding/details/signup/UserId.tsx | 57 ++++++++--------- src/pages/onboarding/index.tsx | 33 +++++++--- src/pages/settingPage/Account.tsx | 2 +- src/pages/settingPage/WriteForCustomer.tsx | 6 +- src/pages/weekly/WeeklyMainQuestion.tsx | 7 ++- src/styles/theme/typo.ts | 6 ++ src/utils/apis/auth/AuthApi.ts | 2 +- src/utils/apis/setting.ts | 28 +++++++-- 23 files changed, 243 insertions(+), 145 deletions(-) diff --git a/src/assets/icons/Vector.tsx b/src/assets/icons/Vector.tsx index 4fb63eaf..3bad884d 100644 --- a/src/assets/icons/Vector.tsx +++ b/src/assets/icons/Vector.tsx @@ -7,7 +7,8 @@ interface VectorProps { } export function Vector({ linkUrl, visible }: VectorProps) { - const linkToUrl = () => { + const linkToUrl = (e: React.MouseEvent) => { + e.preventDefault() //이벤트 버블링 방지 window.open(`https://tify-thisis4u.notion.site/${linkUrl}`) } diff --git a/src/components/atoms/BottomSheet/index.tsx b/src/components/atoms/BottomSheet/index.tsx index 031cbc03..1efc6453 100644 --- a/src/components/atoms/BottomSheet/index.tsx +++ b/src/components/atoms/BottomSheet/index.tsx @@ -4,20 +4,30 @@ import Dimmer from '@components/layouts/Dimmer' import { useOutsideClick } from '@libs/hooks/useOutsideClick' import { theme } from '@styles/theme' import { motion } from 'framer-motion' +import { useRecoilState } from 'recoil' +import { isFilterTypeState } from '@libs/store/present' const BottomSheet = ({ delaytime, children, isexpanded, + isFilter, + filterType, }: { delaytime?: number + isFilter: boolean children?: ReactNode isexpanded: boolean + filterType: string }) => { const [expanded, setExpanded] = useState(isexpanded) + const [filter, setFilter] = useRecoilState(isFilterTypeState) const [outsideRef, handleClickEditProfileDimmer] = useOutsideClick(() => setExpanded(false), ) + const [filterRef, handleClickFilterDimmer] = useOutsideClick(() => + setFilter(''), + ) useEffect(() => { if (delaytime) { setTimeout(() => { @@ -30,14 +40,27 @@ const BottomSheet = ({ setExpanded(isexpanded) }, [isexpanded]) + useEffect(() => { + setFilter(filter) + }, [filter]) + return ( <> {expanded ? ( - + isFilter ? ( + + ) : ( + + ) ) : ( '' )} ` display: flex; - position: absolute; + position: ${({ isFilter }) => (isFilter ? 'fixed' : 'absolute')}; bottom: 0px; + left: 0px; flex-direction: column; align-items: center; - background-color: ${theme.palette.background}; + background-color: ${({ isFilter }) => + isFilter ? `${theme.palette.gray_900}` : `${theme.palette.background}`}; width: 100%; - height: 330px; + height: ${({ isFilter, filterType }) => + isFilter ? (filterType === 'filter' ? '272px' : '392px') : '330px'}; z-index: 1000; border-radius: 24px 24px 0px 0px; padding: 16px; diff --git a/src/components/atoms/Input/ShortInput/index.tsx b/src/components/atoms/Input/ShortInput/index.tsx index 5d610d9c..41c2e8ab 100644 --- a/src/components/atoms/Input/ShortInput/index.tsx +++ b/src/components/atoms/Input/ShortInput/index.tsx @@ -11,6 +11,7 @@ import { FlexBox } from '@components/layouts/FlexBox' import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil' import { isBtnColorState, + OnboardingBtnType, onboardingPageState, onboardingState, OnboardingType, @@ -66,7 +67,7 @@ export const ShortInput = ({ const [_, setFocus] = useState(false) const [info, setInfo] = useRecoilState(onboardingState) const infoPage = useRecoilValue(onboardingPageState) - const setBtnColor = useSetRecoilState(isBtnColorState) + const [btnColor, setBtnColor] = useRecoilState(isBtnColorState) const setProfileStateData = useSetRecoilState(profileState) useEffect(() => { @@ -99,9 +100,9 @@ export const ShortInput = ({ setInfo({ ...info, [content]: inputText }) } - const cancelClick = (content: string) => { + const cancelClick = (content: keyof OnboardingBtnType) => { setInfo({ ...info, [content]: '' }) - setBtnColor(false) + setBtnColor({ ...btnColor, [content]: false }) } const focusInput = () => { @@ -149,7 +150,7 @@ export const ShortInput = ({ /> { - cancelClick(content) + cancelClick(content as keyof OnboardingBtnType) }} /> diff --git a/src/components/friends/PresentRecommend.tsx b/src/components/friends/PresentRecommend.tsx index 7e85d0e4..ff4baed1 100644 --- a/src/components/friends/PresentRecommend.tsx +++ b/src/components/friends/PresentRecommend.tsx @@ -8,8 +8,8 @@ import Dimmer from '@components/layouts/Dimmer' import { useOutsideClick } from '@libs/hooks/useOutsideClick' import { GiftFilter } from '@components/atoms/GiftFilter' import SortItem from './bottomsheet/SortItem' -import { useRecoilValue } from 'recoil' -import { FilterState, PriceState } from '@libs/store/present' +import { useRecoilState, useRecoilValue } from 'recoil' +import { FilterState, isFilterTypeState, PriceState } from '@libs/store/present' import PriceFilter from './bottomsheet/PriceFilter' import { PriceFilterIcon } from '@assets/icons/PriceFilterIcon' import { theme } from '@styles/theme' @@ -21,6 +21,7 @@ import bagNull from '@assets/image/bagNull.svg' import accessoryNull from '@assets/image/accessoryNull.svg' import cookingNull from '@assets/image/cookingNull.svg' import exerciseNull from '@assets/image/exerciseNull.svg' +import BottomSheet from '@components/atoms/BottomSheet' type DataType = { productId: number @@ -49,7 +50,7 @@ function PresentRecommend() { const [selectedTags, setSelectedTags] = useState([]) const [dataLoaded, setDataLoaded] = useState(false) const [products, setProducts] = useState([]) - const [isSortOpen, setIsSortOpen] = useState('') + const [isSortOpen, setIsSortOpen] = useRecoilState(isFilterTypeState) const selectedFilter = useRecoilValue(FilterState) const selectedPrice = useRecoilValue(PriceState) @@ -113,6 +114,18 @@ function PresentRecommend() { }) }, [selectedTags, selectedFilter.filter, selectedPrice.price]) + const handleFilterClick = () => { + setIsSortOpen('filter') + } + + const handlePriceClick = () => { + setIsSortOpen('price') + } + + const handleBottomSheetClick = () => { + setIsSortOpen('') + } + return ( <> @@ -124,7 +137,7 @@ function PresentRecommend() { - setIsSortOpen('filter')}> + - setIsSortOpen('price')}> + {isSortOpen === 'filter' && ( <> - - + + + )} {isSortOpen === 'price' && ( - <> - + - + )} ) diff --git a/src/components/friends/bottomsheet/PriceFilter.tsx b/src/components/friends/bottomsheet/PriceFilter.tsx index 077b5d39..444a652a 100644 --- a/src/components/friends/bottomsheet/PriceFilter.tsx +++ b/src/components/friends/bottomsheet/PriceFilter.tsx @@ -108,26 +108,19 @@ export default PriceFilter const Container = styled.div` width: 100vw; max-width: 480px; - background-color: ${theme.palette.gray_900}; - border-top-left-radius: 24px; - border-top-right-radius: 24px; - padding-bottom: 32px; ` const BottomSticker = styled.div` position: fixed; - /* width: 100%; */ text-align: center; - bottom: 0; display: flex; align-items: center; justify-content: space-between; - z-index: 999; ` const Wrap = styled.div` height: 48px; - border-bottom: 1px solid ${theme.palette.gray_800}; - margin-top: 36px; + margin-top: 16px; padding-top: 8px; + border-bottom: 1px solid ${theme.palette.gray_800}; ` const Sort = styled.div<{ isselected: boolean }>` height: 52px; diff --git a/src/components/friends/bottomsheet/SortItem.tsx b/src/components/friends/bottomsheet/SortItem.tsx index bebbc398..e4bc07ac 100644 --- a/src/components/friends/bottomsheet/SortItem.tsx +++ b/src/components/friends/bottomsheet/SortItem.tsx @@ -77,16 +77,10 @@ export default SortItem const Container = styled.div` width: 100vw; max-width: 480px; - background-color: ${theme.palette.gray_900}; - border-top-left-radius: 24px; - border-top-right-radius: 24px; - padding-bottom: 32px; ` const BottomSticker = styled.div` position: fixed; - /* width: 100%; */ text-align: center; - bottom: 0; display: flex; align-items: center; justify-content: space-between; @@ -95,7 +89,7 @@ const BottomSticker = styled.div` const Wrap = styled.div` height: 48px; border-bottom: 1px solid ${theme.palette.gray_800}; - margin-top: 36px; + margin-top: 16px; padding-top: 8px; ` const Sort = styled.div<{ isselected: boolean }>` diff --git a/src/libs/store/onboard.ts b/src/libs/store/onboard.ts index 53fc709b..84564617 100644 --- a/src/libs/store/onboard.ts +++ b/src/libs/store/onboard.ts @@ -34,8 +34,8 @@ export const onboardingState = atom({ export interface OnboardingPageType { agreement: boolean info: { - name: boolean - userId: boolean + username: boolean + id: boolean birth: boolean gender: boolean } @@ -47,8 +47,8 @@ export interface OnboardingPageType { const initialPageState: OnboardingPageType = { agreement: false, info: { - name: false, - userId: false, + username: false, + id: false, birth: false, gender: false, }, @@ -62,9 +62,28 @@ export const onboardingPageState = atom({ default: initialPageState, }) +export const pageTempState = atom({ + key: 'pageTempState', + default: '', +}) + +export interface OnboardingBtnType { + username: boolean + id: boolean + birth: boolean + gender: boolean +} + +const initialBtnState: OnboardingBtnType = { + username: false, + id: false, + birth: false, + gender: false, +} + export const isBtnColorState = atom({ key: 'isBtnColorState', - default: false, + default: initialBtnState, }) export const isSearchInputState = atom({ diff --git a/src/libs/store/present.ts b/src/libs/store/present.ts index ef9c54b8..5f1215c2 100644 --- a/src/libs/store/present.ts +++ b/src/libs/store/present.ts @@ -29,3 +29,8 @@ export const PriceState = atom({ key: 'priceState', default: initialPriceState, }) + +export const isFilterTypeState = atom({ + key: 'isFilterTypeState', + default: '', +}) diff --git a/src/pages/onboarding/details/Agreement.tsx b/src/pages/onboarding/details/Agreement.tsx index 3795604a..c024cc00 100644 --- a/src/pages/onboarding/details/Agreement.tsx +++ b/src/pages/onboarding/details/Agreement.tsx @@ -9,11 +9,13 @@ import { onboardingPageState } from '../../../libs/store/onboard' import { FlexBox } from './../../../components/layouts/FlexBox' import { RoundButton } from './../../../components/atoms/RoundButton/index' import { theme } from '@styles/theme' +import { useNavigate } from 'react-router-dom' export function Agreement() { const [checkList, setCheckList] = useState([]) const [goNext, setGoNext] = useRecoilState(onboardingPageState) const [btnColor, setBtnColor] = useState(false) + const navigate = useNavigate() const checkAll = (e: ChangeEvent) => { e.target.checked @@ -53,7 +55,7 @@ export function Agreement() { @@ -103,7 +105,7 @@ export function Agreement() { onChange={check} checked={checkList.includes('community') ? true : false} /> - + ('name') - const [btnColor, setBtnColor] = useState(false) - const navigate = useNavigate() + const [page, setPage] = useRecoilState(pageTempState) + const [btnColor, setBtnColor] = useRecoilState(isBtnColorState) + useEffect(() => { - if (infoPage.info.name) { - setPage('userId') + if (infoPage.info.username && !infoPage.info.id) { + setPage('id') } - if (infoPage.info.userId) { + if (infoPage.info.id && !infoPage.info.birth) { setPage('birth') } - if (infoPage.info.birth) { + if (infoPage.info.birth && !infoPage.info.gender) { setPage('gender') } if (infoPage.info.gender) { @@ -38,8 +39,8 @@ export function SignUp() { } }, [infoPage.info]) - const gotoReg = (content: string) => { - if (btnColor === true) { + const gotoReg = (content: keyof OnboardingBtnType) => { + if (btnColor[content]) { setInfoPage({ ...infoPage, info: { @@ -50,9 +51,10 @@ export function SignUp() { } else { setInfoPage({ ...infoPage }) } + console.log(content) } - const gotoBack = (content: string) => { + const gotoBack = (content: keyof OnboardingBtnType) => { if (content == 'gender') { setInfoPage({ ...infoPage, @@ -62,7 +64,6 @@ export function SignUp() { }, }) setPage('gender') - setBtnColor(true) } else if (content == 'birth') { setInfoPage({ ...infoPage, @@ -70,36 +71,39 @@ export function SignUp() { ...infoPage.info, birth: false, gender: false, + id: true, + username: true, }, + agreement: true, }) setPage('birth') - setBtnColor(true) - } else if (content == 'userId') { + } else if (content == 'id') { setInfoPage({ ...infoPage, info: { ...infoPage.info, birth: false, gender: false, - userId: false, + id: false, + username: true, }, + agreement: true, }) - setBtnColor(true) - setPage('userId') - } else if (content == 'name') { + setPage('id') + } else if (content == 'username') { setInfoPage({ ...infoPage, info: { ...infoPage.info, birth: false, gender: false, - userId: false, - name: false, + id: false, + username: false, }, + agreement: true, }) + setPage('username') } - setBtnColor(true) - setPage('name') } return ( @@ -110,14 +114,14 @@ export function SignUp() { - gotoBack('birth')}> + gotoBack('birth')}> { - gotoBack('userId') + gotoBack('id') }} > @@ -125,7 +129,7 @@ export function SignUp() {
{ - gotoBack('name') + gotoBack('username') }} > @@ -137,10 +141,9 @@ export function SignUp() { width={312} children="다음" onClick={() => { - gotoReg(page) - setBtnColor(() => false) + gotoReg(page as keyof OnboardingBtnType) }} - disabled={!btnColor} + disabled={!btnColor[page as keyof OnboardingBtnType]} /> diff --git a/src/pages/onboarding/details/selectInfo/SelectFavor.tsx b/src/pages/onboarding/details/selectInfo/SelectFavor.tsx index d9f0f452..2164d341 100644 --- a/src/pages/onboarding/details/selectInfo/SelectFavor.tsx +++ b/src/pages/onboarding/details/selectInfo/SelectFavor.tsx @@ -4,22 +4,18 @@ import { Text } from '@components/atoms/Text' import { FlexBox } from '@components/layouts/FlexBox' import styled from '@emotion/styled' import { useRecoilState } from 'recoil' -import { - isBtnColorState, - onboardingState, - IsOnboard, -} from '@libs/store/onboard' +import { onboardingState, IsOnboard } from '@libs/store/onboard' import { BeautyFavor } from '@components/onboarding/BeautyFavor' import { FashionFavor } from '@components/onboarding/FashionFavor' import { HobbyFavor } from '@components/onboarding/HobbyFavor' -import { useEffect } from 'react' +import { useEffect, useState } from 'react' import { OnboardingApi } from '@utils/apis/onboarding/OnboardingApi' import { authState } from '@libs/store/auth' import { favorPriority } from '@libs/store/priority' import { useNavigate } from 'react-router-dom' export function SelectFavor() { - const [btnColor, setBtnColor] = useRecoilState(isBtnColorState) + const [btnColor, setBtnColor] = useState(false) const [info, setInfo] = useRecoilState(onboardingState) const [auth, setAuth] = useRecoilState(authState) const [isOnboard, setIsOnboardFavor] = useRecoilState(IsOnboard) diff --git a/src/pages/onboarding/details/signup/Birth.tsx b/src/pages/onboarding/details/signup/Birth.tsx index 6a5d4100..c08e8fcb 100644 --- a/src/pages/onboarding/details/signup/Birth.tsx +++ b/src/pages/onboarding/details/signup/Birth.tsx @@ -23,7 +23,7 @@ export function Birth({ value ? new Date(getFormattedDate(value)) : new Date('2000-01-01'), ) const [info, setInfo] = useRecoilState(onboardingState) - const [btnColor, setBtnColor] = useState(false) + const [btnColor, setBtnColor] = useRecoilState(isBtnColorState) const setProfileStateData = useSetRecoilState(profileState) const handleDateChange = (date: Date | null) => { setProfileStateData((prevState) => ({ ...prevState, isEdit: true })) @@ -40,13 +40,12 @@ export function Birth({ birth: formattedDate, }) } - - setBtnColor(true) } useEffect(() => { if (info.birth) { setSelectedDate(new Date(info.birth)) + setBtnColor({ ...btnColor, birth: true }) } }, [value, info.birth]) diff --git a/src/pages/onboarding/details/signup/Gender.tsx b/src/pages/onboarding/details/signup/Gender.tsx index d0831bad..ae1366d9 100644 --- a/src/pages/onboarding/details/signup/Gender.tsx +++ b/src/pages/onboarding/details/signup/Gender.tsx @@ -8,7 +8,7 @@ import { useRecoilState } from 'recoil' export function Gender() { const [info, setInfo] = useRecoilState(onboardingState) const [isGender, setIsGender] = useState('') - const [btnColor, setBtnColor] = useState(false) + const [btnColor, setBtnColor] = useRecoilState(isBtnColorState) const setGender = (gender: string) => { setInfo({ @@ -25,7 +25,7 @@ export function Gender() { { setGender('female') - setBtnColor(() => true) + setBtnColor({ ...btnColor, gender: true }) }} gender={isGender} > @@ -34,7 +34,7 @@ export function Gender() { { setGender('male') - setBtnColor(() => true) + setBtnColor({ ...btnColor, gender: true }) }} gender={isGender} > diff --git a/src/pages/onboarding/details/signup/Name.tsx b/src/pages/onboarding/details/signup/Name.tsx index abc97d5b..b7e94f98 100644 --- a/src/pages/onboarding/details/signup/Name.tsx +++ b/src/pages/onboarding/details/signup/Name.tsx @@ -5,7 +5,7 @@ import { onboardingPageState, onboardingState, } from '@libs/store/onboard' -import { useRecoilValue, useSetRecoilState } from 'recoil' +import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil' import styled from '@emotion/styled' type NameProps = { @@ -16,7 +16,7 @@ type NameProps = { export function Name({ isEdit = false, value }: NameProps) { const [error, setError] = useState(false) const [errorMsg, setErrorMsg] = useState('') - const [btnColor, setBtnColor] = useState(false) + const [btnColor, setBtnColor] = useRecoilState(isBtnColorState) const infoPage = useRecoilValue(onboardingPageState) const isName = useRecoilValue(onboardingState) @@ -35,12 +35,12 @@ export function Name({ isEdit = false, value }: NameProps) { if ( e.target.value.length > 0 && - e.target.value.length < 10 && + e.target.value.length <= 10 && regex.test(e.target.value) ) { - setBtnColor(true) + setBtnColor({ ...btnColor, username: true }) } else { - setBtnColor(false) + setBtnColor({ ...btnColor, username: false }) } } @@ -57,7 +57,7 @@ export function Name({ isEdit = false, value }: NameProps) { } error={error} warning={errorMsg} - onChange={handleName} + onInput={handleName} content="username" /> diff --git a/src/pages/onboarding/details/signup/StartMent.tsx b/src/pages/onboarding/details/signup/StartMent.tsx index 54699b60..9b67446a 100644 --- a/src/pages/onboarding/details/signup/StartMent.tsx +++ b/src/pages/onboarding/details/signup/StartMent.tsx @@ -16,13 +16,13 @@ export function StartMent() { - {infoPage.info.name ? ( - infoPage.info.userId ? ( + {infoPage.info.username ? ( + infoPage.info.id ? ( infoPage.info.birth ? ( ) : ( @@ -37,8 +37,8 @@ export function StartMent() { { const [error, setError] = useState(false) const [errorMsg, setErrorMsg] = useState('') - const [btnColor, setBtnColor] = useState(false) + const [btnColor, setBtnColor] = useRecoilState(isBtnColorState) const auth = useRecoilValue(authState) const [inputValue, setInputValue] = useState('') - const isUserId = useRecoilValue(onboardingState) - const infoPage = useRecoilValue(onboardingPageState) - const inputRef = useRef(null) - - const regex = /^[a-zA-Z0-9.-_-\n\r]+$/ //정규식 + const regex = /^[a-zA-Z0-9_.-]+$/ const handleName = (e: ChangeEvent) => { - setInputValue(e.target.value) + const newInputValue = e.target.value + + setInputValue(newInputValue) - if (!regex.test(e.target.value) && e.target.value.length > 0) { + if (!regex.test(newInputValue) && newInputValue.length > 0) { setError(true) setErrorMsg( '알파벳 (a-z, A-Z), 숫자, 밑줄 (-, _) 및 마침표만 사용해 주세요.', ) - } else if (regex.test(e.target.value) && e.target.value.length >= 15) { + } else if (regex.test(newInputValue) && newInputValue.length >= 15) { setError(true) setErrorMsg('15자 이내로 부탁해요!') } else { @@ -45,33 +42,32 @@ export const UserId = ({ isEdit = false, value }: UserIdPropsType) => { } if ( - e.target.value.length > 0 && - e.target.value.length < 15 && - regex.test(e.target.value) + newInputValue.length > 0 && + newInputValue.length < 15 && + regex.test(newInputValue) ) { - setBtnColor(true) + setBtnColor({ ...btnColor, id: true }) } else { - setBtnColor(false) + setBtnColor({ ...btnColor, id: false }) } - } - const { data: isIdAvailable } = useQuery( - //중복확인 - ['userIdCheck', inputValue], - () => OnboardingApi.GET_USERID_CHECK(inputValue), - ) + // 중복 확인 + checkIdAvailability(newInputValue) + } - const handleBlur = () => { - if (inputValue !== '') { - if (auth.userProfile.userId === inputValue) { + const checkIdAvailability = (newInputValue: string) => { + if (newInputValue !== '') { + if (auth.userProfile.userId === newInputValue) { return } - if (isIdAvailable === false) { - setErrorMsg('다른 사용자가 사용하고 있어요.') - setError(true) - setBtnColor(false) - } + OnboardingApi.GET_USERID_CHECK(newInputValue).then((isAvailable) => { + if (isAvailable === false) { + setErrorMsg('다른 사용자가 사용하고 있어요.') + setError(true) + setBtnColor({ ...btnColor, id: false }) + } + }) } } @@ -86,8 +82,7 @@ export const UserId = ({ isEdit = false, value }: UserIdPropsType) => { placeholder={isEdit ? '아이디를 입력해주세요' : 'ID를 입력해주세요'} error={error} warning={errorMsg} - onChange={handleName} - onInput={handleBlur} + onInput={handleName} content="id" /> diff --git a/src/pages/onboarding/index.tsx b/src/pages/onboarding/index.tsx index 935ee24e..3ef81f8e 100644 --- a/src/pages/onboarding/index.tsx +++ b/src/pages/onboarding/index.tsx @@ -1,39 +1,52 @@ import { Route, Routes, useNavigate } from 'react-router-dom' import AppBarTemplate from '@components/layouts/AppBarTemplate' import { useRecoilState, useSetRecoilState } from 'recoil' -import { isBtnColorState, onboardingPageState } from '@libs/store/onboard' +import { + isBtnColorState, + onboardingPageState, + pageTempState, +} from '@libs/store/onboard' import Onboarding from './Onboarding' +import { SignUp } from './details/SignUp' +import { useEffect } from 'react' const OnboardingRouter = () => { const navigate = useNavigate() const [page, setPage] = useRecoilState(onboardingPageState) - const setBtnColor = useSetRecoilState(isBtnColorState) + const [btnColor, setBtnColor] = useRecoilState(isBtnColorState) + const [pageTemp, setPageTemp] = useRecoilState(pageTempState) const appLabel = page.agreement ? '' : '약관동의' - + console.log(btnColor) + console.log(page) const backHandler = () => { if (!page.agreement) { navigate(-1) - } else if (page.agreement && !page.info.name) { + } else if (page.agreement && !page.info.username) { setPage({ ...page, agreement: false, }) - } else if (page.info.name && !page.info.userId) { + } else if (page.info.username && !page.info.id) { setPage({ ...page, info: { ...page.info, - name: false, + username: false, }, }) - } else if (page.info.userId && !page.info.birth) { + setPageTemp('username') + setBtnColor({ ...btnColor, username: true }) + } else if (page.info.id && !page.info.birth) { setPage({ ...page, info: { ...page.info, - userId: false, + id: false, + birth: false, }, }) + setPageTemp('id') + setBtnColor({ ...btnColor, id: true }) } else if (page.info.birth && !page.info.gender) { setPage({ ...page, @@ -42,6 +55,8 @@ const OnboardingRouter = () => { birth: false, }, }) + setPageTemp('birth') + setBtnColor({ ...btnColor, birth: true }) } else if (page.interestStart && !page.onboardStatus) { setPage({ ...page, @@ -51,6 +66,8 @@ const OnboardingRouter = () => { gender: false, }, }) + setPageTemp('gender') + setBtnColor({ ...btnColor, gender: true }) } else if (page.onboardStatus && !page.favor) { setPage({ ...page, diff --git a/src/pages/settingPage/Account.tsx b/src/pages/settingPage/Account.tsx index 4e2b7747..ed0a4e67 100644 --- a/src/pages/settingPage/Account.tsx +++ b/src/pages/settingPage/Account.tsx @@ -15,7 +15,7 @@ const Account = () => { const [outsideRef, handleClickDimmer] = useOutsideClick(() => setIsMenuOpen(false), ) - + console.log(auth.userProfile) return ( <> diff --git a/src/pages/settingPage/WriteForCustomer.tsx b/src/pages/settingPage/WriteForCustomer.tsx index b0477c2c..2e760e69 100644 --- a/src/pages/settingPage/WriteForCustomer.tsx +++ b/src/pages/settingPage/WriteForCustomer.tsx @@ -9,6 +9,7 @@ import { Text } from '@components/atoms/Text' import { FileIcon } from '@assets/icons/FileIcon' import { RoundButton } from '@components/atoms/RoundButton' import { CustomerCenterApi } from '@utils/apis/setting' +import { useNavigate } from 'react-router-dom' interface Options { title: boolean @@ -28,6 +29,7 @@ const WriteForCustomer = () => { const [currentValue, setCurrentValue] = useState(Options[0].name) const [currentOption, setCurrentOption] = useState(Options[0].value) + const navigate = useNavigate() const [titleValue, setTitleValue] = useState('') const [contentValue, setContentValue] = useState('') const [emailValue, setEmailValue] = useState('') @@ -200,10 +202,12 @@ const WriteForCustomer = () => { titleValue, contentValue, emailValue, + filename, ) .then((response) => { if (response.status === 200) { - console.log('Post successful:', response.data) + console.log('Post successful:', response) + navigate(-1) } else { console.error('Post failed with status:', response.status) } diff --git a/src/pages/weekly/WeeklyMainQuestion.tsx b/src/pages/weekly/WeeklyMainQuestion.tsx index d97ee4c2..9859eb96 100644 --- a/src/pages/weekly/WeeklyMainQuestion.tsx +++ b/src/pages/weekly/WeeklyMainQuestion.tsx @@ -27,7 +27,12 @@ const WeeklyMainQuestion = () => { return ( {localStorage.getItem('isOnboardingFavor') === 'true' ? ( - + ) : ( diff --git a/src/styles/theme/typo.ts b/src/styles/theme/typo.ts index f72456f4..5eb03f57 100644 --- a/src/styles/theme/typo.ts +++ b/src/styles/theme/typo.ts @@ -8,6 +8,12 @@ export const typo = { line-height: 32px; font-weight: 500; `, + SCD_Headline_20B: css` + font-family: 'S-CoreDream-3'; + font-size: ${calcRem(20)}; + line-height: 30px; + font-weight: 700; + `, SCD_Headline_20: css` font-family: 'S-CoreDream-3'; font-size: ${calcRem(20)}; diff --git a/src/utils/apis/auth/AuthApi.ts b/src/utils/apis/auth/AuthApi.ts index 4ee5ec25..8eff94ee 100644 --- a/src/utils/apis/auth/AuthApi.ts +++ b/src/utils/apis/auth/AuthApi.ts @@ -31,7 +31,7 @@ export const AuthApi = { KAKAO_VALID: async (idToken: string) => { const response = await axiosApi.get( - `/auth/oauth/register/valid?idToken=${idToken}`, + `/auth/oauth/register/valid/kakao?idToken=${idToken}`, ) return response.data.data }, diff --git a/src/utils/apis/setting.ts b/src/utils/apis/setting.ts index f59b1893..9f73c3b1 100644 --- a/src/utils/apis/setting.ts +++ b/src/utils/apis/setting.ts @@ -8,18 +8,34 @@ export const SettingApi = { } export const CustomerCenterApi = { + // POST_OPINION: async ( + // opinionType: string, + // title: string, + // content: string, + // email: string, + // file?: string, + // ) => { + // let url = `/users/opinion/new?opinionType=${opinionType}&title=${title}&content=${content}&email=${email}` + // if (file) { + // url += `&file=${file}` + // } + // const response = await axiosApi.post(url) + // return response + // }, POST_OPINION: async ( opinionType: string, title: string, content: string, email: string, - file?: string, + file: string, ) => { - let url = `/users/opinion/new?opinionType=${opinionType}&title=${title}&content=${content}&email=${email}` - if (file) { - url += `&file=${file}` - } - const response = await axiosApi.post(url) + const response = await axiosApi.post(`/users/opinion/new`, { + opinionType: opinionType, + title: title, + content: content, + email: email, + file: file, + }) return response }, } From 7bc57c06bc68999ed136c7728aa1624e018db286 Mon Sep 17 00:00:00 2001 From: choyeon Date: Tue, 19 Dec 2023 15:43:01 +0900 Subject: [PATCH 02/12] =?UTF-8?q?refac:=20=EC=84=A0=EB=AC=BC=ED=95=98?= =?UTF-8?q?=EA=B8=B0=20=EB=B0=94=ED=85=80=EC=8B=9C=ED=8A=B8=20=EC=97=B0?= =?UTF-8?q?=EA=B2=B0=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 9 +- .../atoms/BottomSheet/BottomTemp.tsx | 108 ----------- src/components/atoms/BottomSheet/index.tsx | 15 +- src/components/friends/PresentRecommend.tsx | 53 +++--- .../friends/bottomsheet/PriceFilter.tsx | 179 +++++++++--------- .../friends/bottomsheet/SortItem.tsx | 114 +++++------ .../details/selectInfo/SelectFavor.tsx | 1 + 7 files changed, 197 insertions(+), 282 deletions(-) delete mode 100644 src/components/atoms/BottomSheet/BottomTemp.tsx diff --git a/index.html b/index.html index e9656f8c..f9f75a29 100644 --- a/index.html +++ b/index.html @@ -1,10 +1,13 @@ - + - - + + Vite + React + TS diff --git a/src/components/atoms/BottomSheet/BottomTemp.tsx b/src/components/atoms/BottomSheet/BottomTemp.tsx deleted file mode 100644 index 98de47cd..00000000 --- a/src/components/atoms/BottomSheet/BottomTemp.tsx +++ /dev/null @@ -1,108 +0,0 @@ -import styled from '@emotion/styled' -import { useState, useEffect, ReactNode } from 'react' -import Dimmer from '@components/layouts/Dimmer' -import { useOutsideClick } from '@libs/hooks/useOutsideClick' -import { theme } from '@styles/theme' -import { motion } from 'framer-motion' -import { useRecoilState } from 'recoil' -import { isFilterTypeState } from '@libs/store/present' - -const BottomSheetTemp = ({ - delaytime, - children, - isexpanded, - isFilter, - filterType, -}: { - delaytime?: number - isFilter: boolean - children?: ReactNode - isexpanded: boolean - filterType: string -}) => { - const [expanded, setExpanded] = useState(isexpanded) - const [filter, setFilter] = useRecoilState(isFilterTypeState) - const [outsideRef, handleClickEditProfileDimmer] = useOutsideClick(() => - setExpanded(false), - ) - const [filterRef, handleClickFilterDimmer] = useOutsideClick(() => - setFilter(''), - ) - useEffect(() => { - if (delaytime) { - setTimeout(() => { - setExpanded(false) - }, delaytime) - } - }, []) - - useEffect(() => { - setExpanded(isexpanded) - }, [isexpanded]) - - useEffect(() => { - setFilter(filter) - }, [filter]) - - return ( - <> - {expanded ? ( - isFilter ? ( - - ) : ( - - ) - ) : ( - '' - )} - -
- {children} - - - ) -} - -export default BottomSheetTemp - -const BottomSheetContainer = styled(motion.div)<{ - isFilter: boolean - filterType: string -}>` - display: flex; - position: ${({ isFilter }) => (isFilter ? 'fixed' : 'absolute')}; - bottom: 0px; - left: 0px; - flex-direction: column; - align-items: center; - background-color: ${({ isFilter }) => - isFilter ? `${theme.palette.gray_900}` : `${theme.palette.background}`}; - width: 100%; - height: ${({ isFilter, filterType }) => - isFilter ? (filterType === 'filter' ? '272px' : '392px') : '330px'}; - z-index: 1000; - border-radius: 24px 24px 0px 0px; - padding: 16px; -` diff --git a/src/components/atoms/BottomSheet/index.tsx b/src/components/atoms/BottomSheet/index.tsx index bc0a3e68..9fd72eab 100644 --- a/src/components/atoms/BottomSheet/index.tsx +++ b/src/components/atoms/BottomSheet/index.tsx @@ -2,17 +2,17 @@ import styled from '@emotion/styled' import { ReactNode, RefObject } from 'react' import { theme } from '@styles/theme' import { motion } from 'framer-motion' -import { useRecoilState } from 'recoil' -import { isFilterTypeState } from '@libs/store/present' const BottomSheet = ({ children, isexpanded, bottomSheetRef, + filterType, }: { children?: ReactNode isexpanded: boolean bottomSheetRef: RefObject + filterType?: string }) => { return ( <> @@ -31,6 +31,7 @@ const BottomSheet = ({ > ` display: flex; position: absolute; bottom: 0px; - left: 0px; flex-direction: column; align-items: center; + background-color: ${theme.palette.gray_900}; width: 100%; - height: '330px'; + height: ${({ filterType }) => + filterType ? (filterType === 'filter' ? '272px' : '392px') : '330px'}; z-index: 1000; border-radius: 24px 24px 0px 0px; padding: 16px; overflow: scroll; - background-color: ${theme.palette.background}; ` diff --git a/src/components/friends/PresentRecommend.tsx b/src/components/friends/PresentRecommend.tsx index ff4baed1..575ef297 100644 --- a/src/components/friends/PresentRecommend.tsx +++ b/src/components/friends/PresentRecommend.tsx @@ -1,10 +1,9 @@ -import { useEffect, useState } from 'react' +import { useEffect, useRef, useState } from 'react' import { SelectedProps, SelectedTag } from '@utils/apis/user/UserType' import styled from '@emotion/styled' import { ItemFilter } from '@assets/icons/ItemFilter' import { Text } from '@components/atoms/Text' import { FriendsApi } from '@utils/apis/friends/FriendsApi' -import Dimmer from '@components/layouts/Dimmer' import { useOutsideClick } from '@libs/hooks/useOutsideClick' import { GiftFilter } from '@components/atoms/GiftFilter' import SortItem from './bottomsheet/SortItem' @@ -19,9 +18,11 @@ import clothesNull from '@assets/image/clothesNull.svg' import fashionNull from '@assets/image/fashionNull.svg' import bagNull from '@assets/image/bagNull.svg' import accessoryNull from '@assets/image/accessoryNull.svg' +import digitalNull from '@assets/image/digitalNull.svg' import cookingNull from '@assets/image/cookingNull.svg' import exerciseNull from '@assets/image/exerciseNull.svg' import BottomSheet from '@components/atoms/BottomSheet' +import useBottomSheet from '@libs/hooks/useBottomSheet' type DataType = { productId: number @@ -40,7 +41,7 @@ function PresentRecommend() { { id: 2, active: false, name: '프레그런스', value: 'FRAGRANCE' }, { id: 3, active: false, name: '의류', value: 'CLOTHES' }, { id: 4, active: false, name: '패션소품', value: 'FASHION_PRODUCT' }, - // { id: 5, active: false, name: '디지털 소품', value: 'DIGITAL_PRODUCT' }, + { id: 5, active: false, name: '디지털 소품', value: 'DIGITAL_PRODUCT' }, { id: 6, active: false, name: '가방', value: 'BAG' }, { id: 7, active: false, name: '액세사리', value: 'ACCESSORY' }, { id: 8, active: false, name: '요리', value: 'COOKING' }, @@ -50,6 +51,7 @@ function PresentRecommend() { const [selectedTags, setSelectedTags] = useState([]) const [dataLoaded, setDataLoaded] = useState(false) const [products, setProducts] = useState([]) + const outsideRef = useRef() const [isSortOpen, setIsSortOpen] = useRecoilState(isFilterTypeState) const selectedFilter = useRecoilValue(FilterState) const selectedPrice = useRecoilValue(PriceState) @@ -64,10 +66,6 @@ function PresentRecommend() { .map((category) => `${category.value}`) .join(',') - const [outsideRef, handleClickDimmer] = useOutsideClick(() => - setIsSortOpen(''), - ) - const gotoSite = (siteUrl: string) => { window.open(`${siteUrl}`) } @@ -84,6 +82,8 @@ function PresentRecommend() { return fragranceNull case 'CLOTHES': return clothesNull + case 'DIGITAL_PRODUCT': + return digitalNull case 'FASHION_PRODUCT': return fashionNull case 'BAG': @@ -116,16 +116,22 @@ function PresentRecommend() { const handleFilterClick = () => { setIsSortOpen('filter') + openBottomSheet() } const handlePriceClick = () => { setIsSortOpen('price') + openBottomSheet() } - const handleBottomSheetClick = () => { - setIsSortOpen('') - } - + const { + bottomSheetRef, + isBottomSheetOpen, + openBottomSheet, + closeBottomSheet, + } = useBottomSheet({ + initialState: false, + }) return ( <> @@ -199,18 +205,17 @@ function PresentRecommend() { )} - {isSortOpen === 'filter' && ( - <> - - - - - )} - {isSortOpen === 'price' && ( - - + <> + + {isSortOpen === 'filter' && } + {isSortOpen === 'price' && } - )} + + ) } @@ -287,3 +292,7 @@ const ItemImg = styled.div<{ imageUrl: string }>` border-radius: 8px; margin-bottom: 8px; ` +const BottomSpacing = styled.div` + width: 100%; + height: 56px; +` diff --git a/src/components/friends/bottomsheet/PriceFilter.tsx b/src/components/friends/bottomsheet/PriceFilter.tsx index 444a652a..87d0a1f9 100644 --- a/src/components/friends/bottomsheet/PriceFilter.tsx +++ b/src/components/friends/bottomsheet/PriceFilter.tsx @@ -1,9 +1,9 @@ import { PurpleCheck } from '@assets/icons/PurpleCheck' +import BottomSheetBar from '@components/atoms/BottomSheet/BottomSheetBar' import { Text } from '@components/atoms/Text' import styled from '@emotion/styled' import { PriceState, priceType } from '@libs/store/present' import { theme } from '@styles/theme' -import { useState } from 'react' import { useRecoilState } from 'recoil' function PriceFilter() { @@ -13,93 +13,96 @@ function PriceFilter() { } return ( - - - - - - - handleSortClick({ - price: '가격', - priceValue: 'DEFAULT', - }) - } - isselected={selected.price === '가격'} - > - 전체 - {selected.price === '가격' && ( - <> - - - )} - - - handleSortClick({ - price: '1만원 미만', - priceValue: 'LESS_THAN_10000', - }) - } - isselected={selected.price === '1만원 미만'} - > - 1만원 미만 - {selected.price === '1만원 미만' && ( - <> - - - )} - - - handleSortClick({ - price: '1-2만원대', - priceValue: 'MORE_THAN_10000_LESS_THAN_30000', - }) - } - isselected={selected.price === '1-2만원대'} - > - 1-2만원대 - {selected.price === '1-2만원대' && ( - <> - - - )} - - - handleSortClick({ - price: '3-4만원대', - priceValue: 'MORE_THAN_30000_LESS_THAN_50000', - }) - } - isselected={selected.price === '3-4만원대'} - > - 3-4만원대 - {selected.price === '3-4만원대' && ( - <> - - - )} - - - handleSortClick({ - price: '5만원 이상', - priceValue: 'MORE_THAN_50000', - }) - } - isselected={selected.price === '5만원 이상'} - > - 5만원 이상 - {selected.price === '5만원 이상' && ( - <> - - - )} - - - + <> + + + + + + + + handleSortClick({ + price: '가격', + priceValue: 'DEFAULT', + }) + } + isselected={selected.price === '가격'} + > + 전체 + {selected.price === '가격' && ( + <> + + + )} + + + handleSortClick({ + price: '1만원 미만', + priceValue: 'LESS_THAN_10000', + }) + } + isselected={selected.price === '1만원 미만'} + > + 1만원 미만 + {selected.price === '1만원 미만' && ( + <> + + + )} + + + handleSortClick({ + price: '1-2만원대', + priceValue: 'MORE_THAN_10000_LESS_THAN_30000', + }) + } + isselected={selected.price === '1-2만원대'} + > + 1-2만원대 + {selected.price === '1-2만원대' && ( + <> + + + )} + + + handleSortClick({ + price: '3-4만원대', + priceValue: 'MORE_THAN_30000_LESS_THAN_50000', + }) + } + isselected={selected.price === '3-4만원대'} + > + 3-4만원대 + {selected.price === '3-4만원대' && ( + <> + + + )} + + + handleSortClick({ + price: '5만원 이상', + priceValue: 'MORE_THAN_50000', + }) + } + isselected={selected.price === '5만원 이상'} + > + 5만원 이상 + {selected.price === '5만원 이상' && ( + <> + + + )} + + + + ) } diff --git a/src/components/friends/bottomsheet/SortItem.tsx b/src/components/friends/bottomsheet/SortItem.tsx index e4bc07ac..c5e49dee 100644 --- a/src/components/friends/bottomsheet/SortItem.tsx +++ b/src/components/friends/bottomsheet/SortItem.tsx @@ -1,4 +1,5 @@ import { PurpleCheck } from '@assets/icons/PurpleCheck' +import BottomSheetBar from '@components/atoms/BottomSheet/BottomSheetBar' import { Text } from '@components/atoms/Text' import { FlexBox } from '@components/layouts/FlexBox' import styled from '@emotion/styled' @@ -14,61 +15,64 @@ function SortItem() { } return ( - - - - - - - handleSortClick({ - filter: '추천순', - filterValue: 'DEFAULT', - }) - } - isselected={selected.filter === '추천순'} - > - 추천순 - {selected.filter === '추천순' && ( - <> - - - )} - - - handleSortClick({ - filter: '가격낮은순', - filterValue: 'PRICE_ASC', - }) - } - isselected={selected.filter === '가격낮은순'} - > - 가격낮은순 - {selected.filter === '가격낮은순' && ( - <> - - - )} - - - handleSortClick({ - filter: '가격높은순', - filterValue: 'PRICE_DESC', - }) - } - isselected={selected.filter === '가격높은순'} - > - 가격높은순 - {selected.filter === '가격높은순' && ( - <> - - - )} - - - + <> + + + + + + + + handleSortClick({ + filter: '추천순', + filterValue: 'DEFAULT', + }) + } + isselected={selected.filter === '추천순'} + > + 추천순 + {selected.filter === '추천순' && ( + <> + + + )} + + + handleSortClick({ + filter: '가격낮은순', + filterValue: 'PRICE_ASC', + }) + } + isselected={selected.filter === '가격낮은순'} + > + 가격낮은순 + {selected.filter === '가격낮은순' && ( + <> + + + )} + + + handleSortClick({ + filter: '가격높은순', + filterValue: 'PRICE_DESC', + }) + } + isselected={selected.filter === '가격높은순'} + > + 가격높은순 + {selected.filter === '가격높은순' && ( + <> + + + )} + + + + ) } diff --git a/src/pages/onboarding/details/selectInfo/SelectFavor.tsx b/src/pages/onboarding/details/selectInfo/SelectFavor.tsx index 38192416..4efcc11e 100644 --- a/src/pages/onboarding/details/selectInfo/SelectFavor.tsx +++ b/src/pages/onboarding/details/selectInfo/SelectFavor.tsx @@ -26,6 +26,7 @@ export function SelectFavor() { setBtnColor(false) } }) + console.log(info) const updateMyFavor = (favorType: string) => { if (info.favor.includes(favorType)) { From 0232091f5e2c87e5135db5cd0b1c2b62bd12a7fa Mon Sep 17 00:00:00 2001 From: choyeon Date: Tue, 19 Dec 2023 15:43:38 +0900 Subject: [PATCH 03/12] conflict --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index f9f75a29..00fecd09 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - + Date: Tue, 19 Dec 2023 17:54:50 +0900 Subject: [PATCH 04/12] conflict --- index.html | 1 - 1 file changed, 1 deletion(-) diff --git a/index.html b/index.html index 00fecd09..6900c950 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,6 @@ - Date: Tue, 19 Dec 2023 17:56:08 +0900 Subject: [PATCH 05/12] conflict --- index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/index.html b/index.html index 6900c950..00fecd09 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ + Date: Thu, 21 Dec 2023 14:27:22 +0900 Subject: [PATCH 06/12] conflict --- index.html | 1 - 1 file changed, 1 deletion(-) diff --git a/index.html b/index.html index 00fecd09..6900c950 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,6 @@ - Date: Sun, 24 Dec 2023 14:53:18 +0900 Subject: [PATCH 07/12] =?UTF-8?q?refac:=20=EC=84=A0=EB=AC=BC=ED=95=98?= =?UTF-8?q?=EA=B8=B0=20api=20=EC=9E=AC=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 2 +- src/components/atoms/GiftFilter/index.tsx | 21 +++++++++++++++++++-- src/components/friends/PresentRecommend.tsx | 15 ++++++++++++--- src/utils/apis/friends/FriendsApi.tsx | 2 +- 4 files changed, 33 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 00fecd09..14ad99d1 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - + { selectedProps: SelectedProps @@ -36,7 +38,7 @@ export const GiftFilter = ({ }, [] as SelectedTag[]) setSelectedTags(updatedTags.length ? updatedTags : selectedTags) - }, []) + }, [selected]) const handleClick = (id: number) => { const updatedBtn = selected.map((item) => { @@ -47,15 +49,30 @@ export const GiftFilter = ({ return item }) setSelected(updatedBtn) + + // 선택된 카테고리가 없으면 모든 카테고리를 선택한 상태로 업데이트 + const updatedTags = updatedBtn + .filter((item) => item.active) + .reduce((acc, item) => { + if (!acc.some((tag) => tag.value === item.value)) { + acc.push({ name: item.name, value: item.value }) + } + return acc + }, [] as SelectedTag[]) + + setSelectedTags(updatedTags.length ? updatedTags : selectedProps) } const handleCancel = () => { //전체 취소 버튼 - const updatedBtn = selected.map((item) => ({ + const updatedBtn = selectedProps.map((item) => ({ ...item, active: false, })) setSelected(updatedBtn) + + // 모든 카테고리를 선택한 상태로 설정 + setSelectedTags(selectedProps.map(({ name, value }) => ({ name, value }))) } const sortedSelected = selected.slice().sort((a, b) => { diff --git a/src/components/friends/PresentRecommend.tsx b/src/components/friends/PresentRecommend.tsx index d995a7b6..2ae36209 100644 --- a/src/components/friends/PresentRecommend.tsx +++ b/src/components/friends/PresentRecommend.tsx @@ -31,13 +31,17 @@ import { CategoryNameType } from '@components/atoms/Category' type DataType = { productId: number - brand: string name: string + brand: string + characteristic: string price: number productOption: string imageUrl: string siteUrl: string + largeCategory: string smallCategory: string + detailCategory: string + categoryName: string } const selectedPropsData: SelectedProps = [ @@ -105,15 +109,20 @@ function PresentRecommend() { return makeupNull } } + console.log(selectedProps) + console.log('tags:', selectedTags) useEffect(() => { FriendsApi.GET_PRESENT_RECOMMEND( - selectedTags.length > 0 ? selectedCategoriesString : allCategoriesString, + selectedTags.length > 0 && + friendStateData.presentRecommendFilterValue !== '' + ? selectedCategoriesString + : allCategoriesString, selectedFilter.filterValue, selectedPrice.priceValue, ).then((response) => { if (response.statusCode === 200) { - setProducts(response.data) + setProducts(response.data.content) setDataLoaded(true) } else { setDataLoaded(false) diff --git a/src/utils/apis/friends/FriendsApi.tsx b/src/utils/apis/friends/FriendsApi.tsx index 9d320491..41e48321 100644 --- a/src/utils/apis/friends/FriendsApi.tsx +++ b/src/utils/apis/friends/FriendsApi.tsx @@ -59,7 +59,7 @@ export const FriendsApi = { priceFilter: string, ) => { const response = await axiosApi.get( - `/products/products/small-category?smallCategoryList=${smallCategory}&priceOrder=${priceOrder}&priceFilter=${priceFilter}`, + `/products/products/small-category?smallCategoryList=${smallCategory}&priceOrder=${priceOrder}&priceFilter=${priceFilter}&page=0&size=10`, ) return response.data }, From 4b20d74eda273b457baab675d6066c85cb27fbcf Mon Sep 17 00:00:00 2001 From: choyeon Date: Sun, 24 Dec 2023 15:05:19 +0900 Subject: [PATCH 08/12] =?UTF-8?q?refac:=20=ED=94=84=EB=A0=8C=EC=A6=88?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=9E=AC=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/friends/PresentRecommend.tsx | 33 ++++++++++++++------- 1 file changed, 22 insertions(+), 11 deletions(-) diff --git a/src/components/friends/PresentRecommend.tsx b/src/components/friends/PresentRecommend.tsx index 2ae36209..bd0a1840 100644 --- a/src/components/friends/PresentRecommend.tsx +++ b/src/components/friends/PresentRecommend.tsx @@ -136,18 +136,29 @@ function PresentRecommend() { selectedProp.value === friendStateData.presentRecommendFilterValue, ) - setSelectedProps((prevSelectedProps) => - prevSelectedProps.map((prop) => - prop.value === selectedOption?.value ? { ...prop, active: true } : prop, - ), - ) + if (selectedOption) { + setSelectedProps((prevSelectedProps) => + prevSelectedProps.map((prop) => + prop.value === selectedOption.value + ? { ...prop, active: true } + : prop, + ), + ) + + setSelectedTags([ + { + name: selectedOption.name as SubCategoryName, + value: selectedOption.value as CategoryNameType, + }, + ]) + } else { + // 만약 selectedOption이 없다면, 즉 선택된 카테고리가 없다면 + setSelectedProps((prevSelectedProps) => + prevSelectedProps.map((prop) => ({ ...prop, active: false })), + ) - setSelectedTags([ - { - name: selectedOption?.name as SubCategoryName, - value: selectedOption?.value as CategoryNameType, - }, - ]) + setSelectedTags([]) + } }, [friendStateData.presentRecommendFilterValue]) const handleFilterClick = () => { From c7949d1851ae54610777542cd948b50dc1b9a1f0 Mon Sep 17 00:00:00 2001 From: choyeon Date: Sun, 24 Dec 2023 15:19:10 +0900 Subject: [PATCH 09/12] =?UTF-8?q?refac:=20=EB=A0=8C=EB=8D=94=EB=A7=81=20?= =?UTF-8?q?=EB=B0=A9=EC=A7=80=20=EB=B0=8F=20=EC=98=A4=EB=A5=98=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/friends/PresentRecommend.tsx | 42 +++++++++++++-------- 1 file changed, 26 insertions(+), 16 deletions(-) diff --git a/src/components/friends/PresentRecommend.tsx b/src/components/friends/PresentRecommend.tsx index bd0a1840..4b92dcb2 100644 --- a/src/components/friends/PresentRecommend.tsx +++ b/src/components/friends/PresentRecommend.tsx @@ -66,6 +66,7 @@ function PresentRecommend() { const selectedFilter = useRecoilValue(FilterState) const selectedPrice = useRecoilValue(PriceState) const friendStateData = useRecoilValue(friendState) + const [initialRender, setInitialRender] = useState(true) const selectedCategories = selectedTags.map((tag) => tag.value) const selectedCategoriesString = selectedCategories @@ -113,22 +114,31 @@ function PresentRecommend() { console.log('tags:', selectedTags) useEffect(() => { - FriendsApi.GET_PRESENT_RECOMMEND( - selectedTags.length > 0 && - friendStateData.presentRecommendFilterValue !== '' - ? selectedCategoriesString - : allCategoriesString, - selectedFilter.filterValue, - selectedPrice.priceValue, - ).then((response) => { - if (response.statusCode === 200) { - setProducts(response.data.content) - setDataLoaded(true) - } else { - setDataLoaded(false) - } - }) - }, [selectedTags, selectedFilter.filter, selectedPrice.price]) + if (!initialRender) { + //처음 렌더링 시 전체 카테고리 호출 방지 + FriendsApi.GET_PRESENT_RECOMMEND( + selectedTags.length > 0 + ? selectedCategoriesString + : allCategoriesString, + selectedFilter.filterValue, + selectedPrice.priceValue, + ).then((response) => { + if (response.statusCode === 200) { + setProducts(response.data.content) + setDataLoaded(true) + } else { + setDataLoaded(false) + } + }) + } else { + setInitialRender(false) + } + }, [ + selectedTags, + selectedFilter.filter, + selectedPrice.price, + friendStateData.presentRecommendFilterValue, + ]) useEffect(() => { const selectedOption = selectedProps.find( From a13556aa6cbaba844cb49196ab3c441b33a57907 Mon Sep 17 00:00:00 2001 From: choyeon Date: Wed, 27 Dec 2023 17:53:48 +0900 Subject: [PATCH 10/12] =?UTF-8?q?feat:=20=EC=84=A0=EB=AC=BC=ED=95=98?= =?UTF-8?q?=EA=B8=B0=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=AC=B4=ED=95=9C?= =?UTF-8?q?=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/atoms/GiftFilter/index.tsx | 4 +- .../atoms/Input/SearchInput/index.tsx | 2 +- src/components/friends/PresentItem.tsx | 90 +++++++++++ src/components/friends/PresentRecommend.tsx | 150 +++--------------- src/libs/hooks/useInfiniteQueries.tsx | 32 ++-- src/utils/apis/friends/FriendsApi.tsx | 16 +- 6 files changed, 150 insertions(+), 144 deletions(-) create mode 100644 src/components/friends/PresentItem.tsx diff --git a/src/components/atoms/GiftFilter/index.tsx b/src/components/atoms/GiftFilter/index.tsx index 438196c4..d71eae57 100644 --- a/src/components/atoms/GiftFilter/index.tsx +++ b/src/components/atoms/GiftFilter/index.tsx @@ -22,6 +22,7 @@ export const GiftFilter = ({ ...props }: Props) => { const [selected, setSelected] = useState(selectedProps) + const [friendsData, setFriendsData] = useRecoilState(friendState) useEffect(() => { setSelected(selectedProps) @@ -49,6 +50,7 @@ export const GiftFilter = ({ return item }) setSelected(updatedBtn) + setFriendsData({ ...friendsData, presentRecommendFilterValue: '' }) // 선택된 카테고리가 없으면 모든 카테고리를 선택한 상태로 업데이트 const updatedTags = updatedBtn @@ -70,7 +72,7 @@ export const GiftFilter = ({ active: false, })) setSelected(updatedBtn) - + setFriendsData({ ...friendsData, presentRecommendFilterValue: '' }) // 모든 카테고리를 선택한 상태로 설정 setSelectedTags(selectedProps.map(({ name, value }) => ({ name, value }))) } diff --git a/src/components/atoms/Input/SearchInput/index.tsx b/src/components/atoms/Input/SearchInput/index.tsx index 03bdf048..9b1cbb5c 100644 --- a/src/components/atoms/Input/SearchInput/index.tsx +++ b/src/components/atoms/Input/SearchInput/index.tsx @@ -33,7 +33,7 @@ export const SearchInput = forwardRef( inputRef, ) { const [focus, setFocus] = useState(false) - const [btnColor, setBtnColor] = useRecoilState(isBtnColorState) + const [btnColor, setBtnColor] = useState(false) const [content, setContent] = useState('') const [searchText, setSearchText] = useRecoilState(isSearchInputState) const [selectedIndex, setSelectedIndex] = useRecoilState(isSearchActiveBtn) diff --git a/src/components/friends/PresentItem.tsx b/src/components/friends/PresentItem.tsx new file mode 100644 index 00000000..83fefdf2 --- /dev/null +++ b/src/components/friends/PresentItem.tsx @@ -0,0 +1,90 @@ +import { DataType } from './PresentRecommend' +import styled from '@emotion/styled' +import { Text } from '@components/atoms/Text' +import makeupNull from '@assets/image/makeupNull.svg' +import fragranceNull from '@assets/image/fragranceNull.svg' +import clothesNull from '@assets/image/clothesNull.svg' +import fashionNull from '@assets/image/fashionNull.svg' +import bagNull from '@assets/image/bagNull.svg' +import accessoryNull from '@assets/image/accessoryNull.svg' +import digitalNull from '@assets/image/digitalNull.svg' +import cookingNull from '@assets/image/cookingNull.svg' +import exerciseNull from '@assets/image/exerciseNull.svg' +import { theme } from '@styles/theme' + +const PresentItem = (data: DataType) => { + const gotoSite = (siteUrl: string) => { + window.open(`${siteUrl}`) + } + + const formatPrice = (price: number) => { + return price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + } + + const defaultImage = (smallCategory: string) => { + switch (smallCategory) { + case 'MAKEUP': + return makeupNull + case 'FRAGRANCE': + return fragranceNull + case 'CLOTHES': + return clothesNull + case 'DIGITAL_PRODUCT': + return digitalNull + case 'FASHION_PRODUCT': + return fashionNull + case 'BAG': + return bagNull + case 'ACCESSORY': + return accessoryNull + case 'COOKING': + return cookingNull + case 'EXERCISE': + return exerciseNull + default: + return makeupNull + } + } + + return ( + <> + gotoSite(data.siteUrl)}> + + +
+ +
+ + + + ) +} + +export default PresentItem + +const ItemDiv = styled.div` + width: 100%; + display: flex; + flex-direction: column; +` + +const ItemImg = styled.div<{ imageUrl: string }>` + width: 100%; + padding-bottom: 100%; + background-image: ${({ imageUrl }) => `url(${imageUrl})`}; + background-size: cover; + border-radius: 8px; + margin-bottom: 8px; +` diff --git a/src/components/friends/PresentRecommend.tsx b/src/components/friends/PresentRecommend.tsx index 4b92dcb2..f360bab7 100644 --- a/src/components/friends/PresentRecommend.tsx +++ b/src/components/friends/PresentRecommend.tsx @@ -28,8 +28,10 @@ import BottomSheet from '@components/atoms/BottomSheet' import useBottomSheet from '@libs/hooks/useBottomSheet' import { friendState } from '@libs/store/friend' import { CategoryNameType } from '@components/atoms/Category' +import { useInfiniteQueries } from '@libs/hooks' +import PresentItem from './PresentItem' -type DataType = { +export type DataType = { productId: number name: string brand: string @@ -60,13 +62,10 @@ function PresentRecommend() { const [selectedProps, setSelectedProps] = useState(selectedPropsData) const [selectedTags, setSelectedTags] = useState([]) - const [dataLoaded, setDataLoaded] = useState(false) - const [products, setProducts] = useState([]) const [isSortOpen, setIsSortOpen] = useRecoilState(isFilterTypeState) const selectedFilter = useRecoilValue(FilterState) const selectedPrice = useRecoilValue(PriceState) const friendStateData = useRecoilValue(friendState) - const [initialRender, setInitialRender] = useState(true) const selectedCategories = selectedTags.map((tag) => tag.value) const selectedCategoriesString = selectedCategories @@ -78,67 +77,28 @@ function PresentRecommend() { .map((category) => `${category.value}`) .join(',') - const gotoSite = (siteUrl: string) => { - window.open(`${siteUrl}`) - } - - const formatPrice = (price: number) => { - return price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') - } - - const defaultImage = (smallCategory: string) => { - switch (smallCategory) { - case 'MAKEUP': - return makeupNull - case 'FRAGRANCE': - return fragranceNull - case 'CLOTHES': - return clothesNull - case 'DIGITAL_PRODUCT': - return digitalNull - case 'FASHION_PRODUCT': - return fashionNull - case 'BAG': - return bagNull - case 'ACCESSORY': - return accessoryNull - case 'COOKING': - return cookingNull - case 'EXERCISE': - return exerciseNull - default: - return makeupNull - } - } console.log(selectedProps) console.log('tags:', selectedTags) - useEffect(() => { - if (!initialRender) { - //처음 렌더링 시 전체 카테고리 호출 방지 - FriendsApi.GET_PRESENT_RECOMMEND( - selectedTags.length > 0 - ? selectedCategoriesString - : allCategoriesString, - selectedFilter.filterValue, - selectedPrice.priceValue, - ).then((response) => { - if (response.statusCode === 200) { - setProducts(response.data.content) - setDataLoaded(true) - } else { - setDataLoaded(false) - } - }) - } else { - setInitialRender(false) - } - }, [ - selectedTags, - selectedFilter.filter, - selectedPrice.price, - friendStateData.presentRecommendFilterValue, - ]) + const { infiniteListElement, isEmpty } = useInfiniteQueries( + [ + 'GET_PRESENT_RECOMMEND', + selectedTags, + selectedFilter.filter, + selectedPrice.price, + friendStateData.presentRecommendFilterValue, + ], + () => + FriendsApi.GET_PRESENT_RECOMMEND({ + smallCategory: + selectedTags.length > 0 + ? selectedCategoriesString + : allCategoriesString, + priceOrder: selectedFilter.filterValue, + priceFilter: selectedPrice.priceValue, + }), + PresentItem, + ) useEffect(() => { const selectedOption = selectedProps.find( @@ -222,47 +182,7 @@ function PresentRecommend() { - - {dataLoaded && ( - - {products.map((product: DataType, index: number) => ( - gotoSite(product.siteUrl)}> - - -
- -
- - - ))} - - )} - + {!isEmpty && infiniteListElement} <> `${widthProps}px`}; height: 100%; ` -const SortItemWrap = styled.div` - display: grid; - grid-template-columns: 1fr 1fr; - width: 100%; - row-gap: 52px; - column-gap: 12px; - justify-items: center; -` -const ItemDiv = styled.div` - width: 100%; - display: flex; - flex-direction: column; -` - -const ItemImg = styled.div<{ imageUrl: string }>` - width: 100%; - padding-bottom: 100%; - background-image: ${({ imageUrl }) => `url(${imageUrl})`}; - background-size: cover; - border-radius: 8px; - margin-bottom: 8px; -` const BottomSpacing = styled.div` width: 100%; height: 56px; diff --git a/src/libs/hooks/useInfiniteQueries.tsx b/src/libs/hooks/useInfiniteQueries.tsx index 079bc125..0cf04371 100644 --- a/src/libs/hooks/useInfiniteQueries.tsx +++ b/src/libs/hooks/useInfiniteQueries.tsx @@ -24,7 +24,7 @@ export const useInfiniteQueries = ( InfiniteResponse, unknown >(queryKey, apiFunction, { - getNextPageParam: (lastPage) => lastPage.page + 1, + getNextPageParam: (lastPage) => lastPage.data.page + 1, ...options, }) @@ -32,12 +32,12 @@ export const useInfiniteQueries = ( if (!data) return const lastPageIdx = data.pages.length - 1 - const hasNext = data.pages[lastPageIdx].hasNext + const hasNext = data.pages[lastPageIdx].data.hasNext if (hasNext && inView) fetchNextPage() }, [inView]) - - const listElement = data?.pages.map(({ content }) => - content.map((item, idx) => ( + console.log(data) + const listElement = data?.pages.map(({ data }) => + data.content.map((item: any, idx: any) => ( )), ) @@ -49,7 +49,7 @@ export const useInfiniteQueries = ( /> ) - const isEmpty = data?.pages[0].content.length === 1 + const isEmpty = data?.pages[0].data.content.length === 1 return { infiniteListElement: ( @@ -63,6 +63,10 @@ export const useInfiniteQueries = ( } const ListElementContainer = styled.div` + display: grid; + grid-template-columns: 1fr 1fr; + row-gap: 52px; + column-gap: 12px; @keyframes fadeIn { from { opacity: 0; @@ -109,14 +113,20 @@ const ListElementContainer = styled.div` ` export interface InfiniteResponse { - content: T[] - page: number - size: number - hasNext: boolean + data: { + content: T[] + page: number + size: number + hasNext: boolean + } + statusCode: number + success: boolean } export interface InfiniteRequest { - questionId: number + smallCategory: string + priceOrder: string + priceFilter: string pageParam?: number size?: number sort?: 'asc' | 'desc' diff --git a/src/utils/apis/friends/FriendsApi.tsx b/src/utils/apis/friends/FriendsApi.tsx index 41e48321..eb10d1a6 100644 --- a/src/utils/apis/friends/FriendsApi.tsx +++ b/src/utils/apis/friends/FriendsApi.tsx @@ -1,3 +1,5 @@ +import { DataType } from '@components/friends/PresentRecommend' +import { InfiniteRequest, InfiniteResponse } from '@libs/hooks' import { axiosApi } from '../axios' import { FriendRequestType, @@ -53,13 +55,15 @@ export const FriendsApi = { return response.data.data }, - GET_PRESENT_RECOMMEND: async ( - smallCategory: string, - priceOrder: string, - priceFilter: string, - ) => { + GET_PRESENT_RECOMMEND: async ({ + smallCategory, + priceOrder, + priceFilter, + pageParam = 0, + size = 9, + }: InfiniteRequest): Promise> => { const response = await axiosApi.get( - `/products/products/small-category?smallCategoryList=${smallCategory}&priceOrder=${priceOrder}&priceFilter=${priceFilter}&page=0&size=10`, + `/products/products/small-category?smallCategoryList=${smallCategory}&priceOrder=${priceOrder}&priceFilter=${priceFilter}&page=${pageParam}&size=${size}`, ) return response.data }, From e5f59dca24d5930a34707f8f33d0991ec5de9dee Mon Sep 17 00:00:00 2001 From: choyeon Date: Wed, 27 Dec 2023 18:20:01 +0900 Subject: [PATCH 11/12] =?UTF-8?q?refac:=20=EC=BD=94=EB=93=9C=20=EC=9E=90?= =?UTF-8?q?=EC=9E=98=ED=95=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/friends/PresentRecommend.tsx | 12 ------------ src/libs/hooks/useInfiniteQueries.tsx | 9 +++++---- src/pages/onboarding/details/Agreement.tsx | 1 - src/pages/onboarding/details/SignUp.tsx | 6 ++---- .../onboarding/details/selectInfo/DetailInfo.tsx | 1 - .../onboarding/details/selectInfo/SelectFavor.tsx | 4 ++-- src/pages/onboarding/details/signup/Birth.tsx | 2 -- src/pages/onboarding/details/signup/Gender.tsx | 1 - src/pages/onboarding/details/signup/StartMent.tsx | 1 - src/pages/onboarding/details/signup/UserId.tsx | 8 ++------ src/pages/onboarding/index.tsx | 7 ++----- src/pages/profile/PastTodayDetail.tsx | 2 -- src/pages/profile/index.tsx | 1 - src/pages/settingPage/Account.tsx | 10 +--------- src/pages/settingPage/CustomerCenter.tsx | 5 +---- src/pages/settingPage/Setting.tsx | 2 -- src/pages/settingPage/VersionInfo.tsx | 2 -- src/pages/settingPage/WriteForCustomer.tsx | 5 ++--- 18 files changed, 17 insertions(+), 62 deletions(-) diff --git a/src/components/friends/PresentRecommend.tsx b/src/components/friends/PresentRecommend.tsx index f360bab7..8f72c2dc 100644 --- a/src/components/friends/PresentRecommend.tsx +++ b/src/components/friends/PresentRecommend.tsx @@ -15,15 +15,6 @@ import { FilterState, isFilterTypeState, PriceState } from '@libs/store/present' import PriceFilter from './bottomsheet/PriceFilter' import { PriceFilterIcon } from '@assets/icons/PriceFilterIcon' import { theme } from '@styles/theme' -import makeupNull from '@assets/image/makeupNull.svg' -import fragranceNull from '@assets/image/fragranceNull.svg' -import clothesNull from '@assets/image/clothesNull.svg' -import fashionNull from '@assets/image/fashionNull.svg' -import bagNull from '@assets/image/bagNull.svg' -import accessoryNull from '@assets/image/accessoryNull.svg' -import digitalNull from '@assets/image/digitalNull.svg' -import cookingNull from '@assets/image/cookingNull.svg' -import exerciseNull from '@assets/image/exerciseNull.svg' import BottomSheet from '@components/atoms/BottomSheet' import useBottomSheet from '@libs/hooks/useBottomSheet' import { friendState } from '@libs/store/friend' @@ -77,9 +68,6 @@ function PresentRecommend() { .map((category) => `${category.value}`) .join(',') - console.log(selectedProps) - console.log('tags:', selectedTags) - const { infiniteListElement, isEmpty } = useInfiniteQueries( [ 'GET_PRESENT_RECOMMEND', diff --git a/src/libs/hooks/useInfiniteQueries.tsx b/src/libs/hooks/useInfiniteQueries.tsx index 0cf04371..b6d21698 100644 --- a/src/libs/hooks/useInfiniteQueries.tsx +++ b/src/libs/hooks/useInfiniteQueries.tsx @@ -20,6 +20,7 @@ export const useInfiniteQueries = ( >, ) => { const [ref, inView] = useInView() + const { data, fetchNextPage } = useInfiniteQuery< InfiniteResponse, unknown @@ -35,7 +36,7 @@ export const useInfiniteQueries = ( const hasNext = data.pages[lastPageIdx].data.hasNext if (hasNext && inView) fetchNextPage() }, [inView]) - console.log(data) + const listElement = data?.pages.map(({ data }) => data.content.map((item: any, idx: any) => ( @@ -83,7 +84,7 @@ const ListElementContainer = styled.div` transform: translateY(0px); } } - &:nth-child(1) { + &:nth-of-type(1) { opacity: 0; animation-fill-mode: forwards; animation-name: movetoY, fadeIn; @@ -92,7 +93,7 @@ const ListElementContainer = styled.div` cubic-bezier(0.61, 1, 0.88, 1); animation-delay: 0.8s; } - &:nth-child(2) { + &:nth-of-type(2) { opacity: 0; animation-fill-mode: forwards; animation-name: movetoY, fadeIn; @@ -101,7 +102,7 @@ const ListElementContainer = styled.div` cubic-bezier(0.61, 1, 0.88, 1); animation-delay: 1.2s; } - &:nth-child(3) { + &:nth-of-type(3) { opacity: 0; animation-fill-mode: forwards; animation-name: movetoY, fadeIn; diff --git a/src/pages/onboarding/details/Agreement.tsx b/src/pages/onboarding/details/Agreement.tsx index c438126c..cf5af32c 100644 --- a/src/pages/onboarding/details/Agreement.tsx +++ b/src/pages/onboarding/details/Agreement.tsx @@ -13,7 +13,6 @@ export function Agreement() { const [checkList, setCheckList] = useState([]) const [goNext, setGoNext] = useRecoilState(onboardingPageState) const [btnColor, setBtnColor] = useState(false) - const navigate = useNavigate() const checkAll = (e: ChangeEvent) => { e.target.checked diff --git a/src/pages/onboarding/details/SignUp.tsx b/src/pages/onboarding/details/SignUp.tsx index d7ad383a..5e9e7a83 100644 --- a/src/pages/onboarding/details/SignUp.tsx +++ b/src/pages/onboarding/details/SignUp.tsx @@ -1,11 +1,10 @@ import styled from '@emotion/styled' -import { useEffect, useState } from 'react' -import { useRecoilState, useRecoilValue } from 'recoil' +import { useEffect } from 'react' +import { useRecoilState } from 'recoil' import { isBtnColorState, OnboardingBtnType, onboardingPageState, - onboardingState, pageTempState, } from '@libs/store/onboard' import { StartMent } from './signup/StartMent' @@ -51,7 +50,6 @@ export function SignUp() { } else { setInfoPage({ ...infoPage }) } - console.log(content) } const gotoBack = (content: keyof OnboardingBtnType) => { diff --git a/src/pages/onboarding/details/selectInfo/DetailInfo.tsx b/src/pages/onboarding/details/selectInfo/DetailInfo.tsx index 668948dd..74a3d250 100644 --- a/src/pages/onboarding/details/selectInfo/DetailInfo.tsx +++ b/src/pages/onboarding/details/selectInfo/DetailInfo.tsx @@ -1,5 +1,4 @@ import styled from '@emotion/styled' -import { FlexBox } from '@components/layouts/FlexBox' import { Text } from '@components/atoms/Text' import { SearchInput } from '@components/atoms/Input/SearchInput' import { RoundButton } from '@components/atoms/RoundButton' diff --git a/src/pages/onboarding/details/selectInfo/SelectFavor.tsx b/src/pages/onboarding/details/selectInfo/SelectFavor.tsx index 07177875..5f07d388 100644 --- a/src/pages/onboarding/details/selectInfo/SelectFavor.tsx +++ b/src/pages/onboarding/details/selectInfo/SelectFavor.tsx @@ -4,7 +4,7 @@ import { Text } from '@components/atoms/Text' import { FlexBox } from '@components/layouts/FlexBox' import styled from '@emotion/styled' import { useRecoilState } from 'recoil' -import { onboardingState, IsOnboard } from '@libs/store/onboard' +import { onboardingState } from '@libs/store/onboard' import { BeautyFavor } from '@components/onboarding/BeautyFavor' import { FashionFavor } from '@components/onboarding/FashionFavor' import { HobbyFavor } from '@components/onboarding/HobbyFavor' @@ -47,7 +47,7 @@ export function SelectFavor() { const gotoReg = () => { if (btnColor) { const { favor, ...rest } = info - console.log(favor.map((data) => parseFavorBox(data))) + OnboardingApi.PUT_ONBOARD_STATUS({ userId: auth.userProfile.id, data: { diff --git a/src/pages/onboarding/details/signup/Birth.tsx b/src/pages/onboarding/details/signup/Birth.tsx index c08e8fcb..fe4a077f 100644 --- a/src/pages/onboarding/details/signup/Birth.tsx +++ b/src/pages/onboarding/details/signup/Birth.tsx @@ -6,10 +6,8 @@ import { theme } from '@styles/theme' import { isBtnColorState, onboardingState } from '@libs/store/onboard' import { useRecoilState, useSetRecoilState } from 'recoil' import { ko } from 'date-fns/locale' -import { FlexBox } from '@components/layouts/FlexBox' import useGetDate from '@libs/hooks/useGetDate' import { profileState } from '@libs/store/profile' -import { useNavigate } from 'react-router-dom' export function Birth({ value, diff --git a/src/pages/onboarding/details/signup/Gender.tsx b/src/pages/onboarding/details/signup/Gender.tsx index ae1366d9..773220d2 100644 --- a/src/pages/onboarding/details/signup/Gender.tsx +++ b/src/pages/onboarding/details/signup/Gender.tsx @@ -1,4 +1,3 @@ -import { FlexBox } from '@components/layouts/FlexBox' import styled from '@emotion/styled' import { isBtnColorState, onboardingState } from '@libs/store/onboard' import { theme } from '@styles/theme' diff --git a/src/pages/onboarding/details/signup/StartMent.tsx b/src/pages/onboarding/details/signup/StartMent.tsx index 9b67446a..15ae99d6 100644 --- a/src/pages/onboarding/details/signup/StartMent.tsx +++ b/src/pages/onboarding/details/signup/StartMent.tsx @@ -2,7 +2,6 @@ import styled from '@emotion/styled' import { useRecoilValue } from 'recoil' import { onboardingPageState } from '@libs/store/onboard' import { Text } from '@components/atoms/Text' -import { FlexBox } from '../../../../components/layouts/FlexBox' import { Step1 } from '@assets/icons/SignupStep/1' import { Step2 } from '../../../../assets/icons/SignupStep/2' import { Step3 } from '@assets/icons/SignupStep/3' diff --git a/src/pages/onboarding/details/signup/UserId.tsx b/src/pages/onboarding/details/signup/UserId.tsx index c110d426..cc051d19 100644 --- a/src/pages/onboarding/details/signup/UserId.tsx +++ b/src/pages/onboarding/details/signup/UserId.tsx @@ -1,13 +1,9 @@ import { ShortInput } from '@components/atoms/Input/ShortInput' import styled from '@emotion/styled' import { authState } from '@libs/store/auth' -import { - isBtnColorState, - onboardingPageState, - onboardingState, -} from '@libs/store/onboard' +import { isBtnColorState } from '@libs/store/onboard' import { OnboardingApi } from '@utils/apis/onboarding/OnboardingApi' -import { ChangeEvent, useEffect, useRef, useState } from 'react' +import { ChangeEvent, useState } from 'react' import { useRecoilState, useRecoilValue } from 'recoil' type UserIdPropsType = { diff --git a/src/pages/onboarding/index.tsx b/src/pages/onboarding/index.tsx index 3ef81f8e..49fad10c 100644 --- a/src/pages/onboarding/index.tsx +++ b/src/pages/onboarding/index.tsx @@ -1,14 +1,12 @@ import { Route, Routes, useNavigate } from 'react-router-dom' import AppBarTemplate from '@components/layouts/AppBarTemplate' -import { useRecoilState, useSetRecoilState } from 'recoil' +import { useRecoilState } from 'recoil' import { isBtnColorState, onboardingPageState, pageTempState, } from '@libs/store/onboard' import Onboarding from './Onboarding' -import { SignUp } from './details/SignUp' -import { useEffect } from 'react' const OnboardingRouter = () => { const navigate = useNavigate() @@ -16,8 +14,7 @@ const OnboardingRouter = () => { const [btnColor, setBtnColor] = useRecoilState(isBtnColorState) const [pageTemp, setPageTemp] = useRecoilState(pageTempState) const appLabel = page.agreement ? '' : '약관동의' - console.log(btnColor) - console.log(page) + const backHandler = () => { if (!page.agreement) { navigate(-1) diff --git a/src/pages/profile/PastTodayDetail.tsx b/src/pages/profile/PastTodayDetail.tsx index e5e2153e..e7e06f69 100644 --- a/src/pages/profile/PastTodayDetail.tsx +++ b/src/pages/profile/PastTodayDetail.tsx @@ -14,8 +14,6 @@ const PastTodayDetail = () => { const profileStateData = useRecoilValue(profileState) const location = useParams() - console.log(location.id) - const { data: pastTodayAnswer = [] } = useQuery( ['pastTodayAnswer', location.id, profileStateData.pastTodayCategory], () => diff --git a/src/pages/profile/index.tsx b/src/pages/profile/index.tsx index 239b4f13..28841e12 100644 --- a/src/pages/profile/index.tsx +++ b/src/pages/profile/index.tsx @@ -43,7 +43,6 @@ const ProfileRouter = () => { const userId = parseInt(location.pathname.slice(9)) const handleBack = () => { - console.log(step) if (step.favorAnswerDtos.length > 0) { const tempList = [...step.favorAnswerDtos] const newFavorAnswerDtos = tempList.slice(0, tempList.length - 1) diff --git a/src/pages/settingPage/Account.tsx b/src/pages/settingPage/Account.tsx index ed0a4e67..7fcf8d13 100644 --- a/src/pages/settingPage/Account.tsx +++ b/src/pages/settingPage/Account.tsx @@ -1,21 +1,13 @@ -import { Delete } from '@assets/icons/Delete' import { Text } from '@components/atoms/Text' -import Dimmer from '@components/layouts/Dimmer' import styled from '@emotion/styled' -import { useOutsideClick } from '@libs/hooks/useOutsideClick' import { authState } from '@libs/store/auth' import { theme } from '@styles/theme' -import { useRef, useState } from 'react' import { useRecoilValue } from 'recoil' import DeleteAccountBtn from './DeleteAccountBtn' const Account = () => { const auth = useRecoilValue(authState) - const [isMenuOpen, setIsMenuOpen] = useState(false) - const [outsideRef, handleClickDimmer] = useOutsideClick(() => - setIsMenuOpen(false), - ) - console.log(auth.userProfile) + return ( <> diff --git a/src/pages/settingPage/CustomerCenter.tsx b/src/pages/settingPage/CustomerCenter.tsx index b6f42eda..a8440fc0 100644 --- a/src/pages/settingPage/CustomerCenter.tsx +++ b/src/pages/settingPage/CustomerCenter.tsx @@ -2,15 +2,12 @@ import { SendMsgIcon } from '@assets/icons/SendMsgIcon' import { SmallDownChev } from '@assets/icons/SmallDownChev' import { UpChevron } from '@assets/icons/UpChevron' import { Text } from '@components/atoms/Text' -import { FlexBox } from '@components/layouts/FlexBox' import styled from '@emotion/styled' import { theme } from '@styles/theme' -import { useCallback, useRef, useState } from 'react' +import { useState } from 'react' import { useNavigate } from 'react-router-dom' const CustomerCenter = () => { - const initialButtonStates = Array(11).fill({ istoggle: false }) - const [buttonStates, setButtonStates] = useState(initialButtonStates) const [openIndex, setOpenIndex] = useState(-1) const updateState = (index: number) => { diff --git a/src/pages/settingPage/Setting.tsx b/src/pages/settingPage/Setting.tsx index 397fd10d..993a3bd1 100644 --- a/src/pages/settingPage/Setting.tsx +++ b/src/pages/settingPage/Setting.tsx @@ -6,11 +6,9 @@ import RightChevron from '@assets/icons/RightChevron' import { SecurityIcon } from '@assets/icons/SecurityIcon' import { Text } from '@components/atoms/Text' import styled from '@emotion/styled' -import { useState } from 'react' import LogOutBtn from './LogOutBtn' const Setting = () => { - const [isLogOutOpen, setIsLogOutOpen] = useState(false) const linkToUrl = (linkUrl: string) => { window.location.href = `setting/${linkUrl}` } diff --git a/src/pages/settingPage/VersionInfo.tsx b/src/pages/settingPage/VersionInfo.tsx index dcc27c9a..62edd110 100644 --- a/src/pages/settingPage/VersionInfo.tsx +++ b/src/pages/settingPage/VersionInfo.tsx @@ -1,7 +1,5 @@ -import { TIfyLogoOnly } from '@assets/icons/TifyLogoOnly' import { TIfyLogoSymbol } from '@assets/icons/TifyLogoSymbol' import { Text } from '@components/atoms/Text' -import SettingAppBar from '@components/settingPage/SettingAppBar' import styled from '@emotion/styled' import { theme } from '@styles/theme' diff --git a/src/pages/settingPage/WriteForCustomer.tsx b/src/pages/settingPage/WriteForCustomer.tsx index 2e760e69..60811ab1 100644 --- a/src/pages/settingPage/WriteForCustomer.tsx +++ b/src/pages/settingPage/WriteForCustomer.tsx @@ -1,4 +1,4 @@ -import React, { useState, useRef, useEffect, ChangeEvent } from 'react' +import { useState, useRef, useEffect, ChangeEvent } from 'react' import styled from '@emotion/styled' import { theme } from '@styles/theme' import { SmallDownChev } from '@assets/icons/SmallDownChev' @@ -206,10 +206,9 @@ const WriteForCustomer = () => { ) .then((response) => { if (response.status === 200) { - console.log('Post successful:', response) navigate(-1) } else { - console.error('Post failed with status:', response.status) + console.error('전송 실패:', response.status) } }) .catch((error) => { From e1f62af2d957d24d2cd2e77153aeb3492f52b465 Mon Sep 17 00:00:00 2001 From: choyeon Date: Fri, 29 Dec 2023 20:06:35 +0900 Subject: [PATCH 12/12] =?UTF-8?q?refac:=20=EC=98=A8=EB=B3=B4=EB=94=A9=20ha?= =?UTF-8?q?lfsuccess=20=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4=EC=85=98=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/onboarding/details/HalfSuccess.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/onboarding/details/HalfSuccess.tsx b/src/pages/onboarding/details/HalfSuccess.tsx index 3c20fe7a..baa16e3e 100644 --- a/src/pages/onboarding/details/HalfSuccess.tsx +++ b/src/pages/onboarding/details/HalfSuccess.tsx @@ -5,6 +5,8 @@ import styled from '@emotion/styled' import { RoundButton } from '@components/atoms/RoundButton' import { onboardingPageState, onboardingState } from '@libs/store/onboard' import onBoardingImg from '@assets/image/onBoardingImg.png' +import VideoBox from '@components/WeeklyQuestion/VideoBox' +import { question } from '@utils/question' export function HalfSuccess() { const [info, setInfo] = useRecoilState(onboardingState) const [goNext, setGoNext] = useRecoilState(onboardingPageState) @@ -20,9 +22,7 @@ export function HalfSuccess() { 나의 취향 프로필을 꾸며볼까요? -
- 온보딩 이미지 -
+