From 2815df93ac0b025001d49b3e02251c981993d7ac Mon Sep 17 00:00:00 2001 From: choyeon Date: Tue, 19 Dec 2023 14:24:35 +0900 Subject: [PATCH 01/17] =?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/17] =?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/17] 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/17] 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/17] 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/17] 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/17] =?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/17] =?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/17] =?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/17] =?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/17] =?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/17] =?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() { 나의 취향 프로필을 꾸며볼까요? -
- 온보딩 이미지 -
+ Date: Sat, 30 Dec 2023 18:08:12 +0900 Subject: [PATCH 13/17] =?UTF-8?q?fix:=20=EC=95=A0=EB=8B=88=EB=A9=94?= =?UTF-8?q?=EC=9D=B4=EC=85=98=20=EC=A0=81=EC=9A=A9=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../WeeklyQuestion/DailyQuestionBox.tsx | 2 + src/components/WeeklyQuestion/QuestionImg.tsx | 117 +++++++++++++++++- src/constants/todayList.ts | 13 ++ src/pages/onboarding/details/HalfSuccess.tsx | 2 +- src/pages/weekly/WeeklyMainQuestion.tsx | 9 +- src/utils/subCategoryTitle.ts | 2 +- 6 files changed, 138 insertions(+), 7 deletions(-) diff --git a/src/components/WeeklyQuestion/DailyQuestionBox.tsx b/src/components/WeeklyQuestion/DailyQuestionBox.tsx index b6ed608c..b1701464 100644 --- a/src/components/WeeklyQuestion/DailyQuestionBox.tsx +++ b/src/components/WeeklyQuestion/DailyQuestionBox.tsx @@ -70,6 +70,8 @@ const DailyQuestionBox = () => { export default DailyQuestionBox const QuestionBoxContainer = styled.div` + flex-shrink: 0; + height: 140px; @keyframes fadeIn1 { from { opacity: 0; diff --git a/src/components/WeeklyQuestion/QuestionImg.tsx b/src/components/WeeklyQuestion/QuestionImg.tsx index dd493d36..a17554d3 100644 --- a/src/components/WeeklyQuestion/QuestionImg.tsx +++ b/src/components/WeeklyQuestion/QuestionImg.tsx @@ -3,6 +3,12 @@ import { DailyQuestionCategoryType, } from '@utils/apis/weekly/questionType' import styled from '@emotion/styled' +import { useRecoilState } from 'recoil' +import { dateState } from '@libs/store/date' +import { useEffect, useState } from 'react' +import { weeklyList } from '@constants/todayList' +import { TodayKeyType } from '@models/components/atoms/DayWeek' + const QuestionImg = ({ category, isToggled = true, @@ -10,21 +16,126 @@ const QuestionImg = ({ category: DailyQuestionCategoryType isToggled?: boolean }) => { + const [date, setDate] = useRecoilState(dateState) + const [day, setDay] = useState('') + + const images = [ + '/images/questionBox/mon.png', + '/images/questionBox/tue.png', + '/images/questionBox/wed.png', + '/images/questionBox/thur.png', + '/images/questionBox/fri.png', + '/images/questionBox/sat.png', + '/images/questionBox/sun.png', + ] + + useEffect(() => { + getDayWeek(date.selectedDate) + }, [date.dateString]) + + const getDayWeek = (day: number) => { + if (date.selectedDate === date.today) { + setDay('오늘') + return + } + switch (day) { + case 0: + setDay('월요일') + break + case 1: + setDay('화요일') + break + case 2: + setDay('수요일') + break + case 3: + setDay('목요일') + break + case 4: + setDay('금요일') + break + case 5: + setDay('토요일') + break + case 6: + setDay('일요일') + break + } + } return ( - +
+ {images.map((image, index) => ( + todayImg + ))} + + +
) } export default QuestionImg const ImgContainer = styled.div<{ isToggled: boolean }>` - display: ${({ isToggled }) => (isToggled ? 'flex' : 'none')}; + display: flex; + flex-shrink: 0; justify-content: center; width: 100%; - height: 242px; + height: 230px; + .image-slider { + position: relative; + display: flex; + justify-content: center; + transition: transform 0.5s ease-in-out; + width: 100%; + height: 100%; + } img { height: 100%; + position: absolute; } + .prevImg, + .nextImg { + position: absolute; + top: 0; + opacity: 0.5; + transition: + opacity 0.5s ease-in-out, + transform 0.5s ease-in-out; + } + .todayImg { + top: 40%; + } + .hidden { + display: none; + } + .prevImg { + left: 10%; + opacity: 5%; + transform: translate(-97px, 0); + } + .nextImg { + right: 10%; + opacity: 5%; + transform: translate(97px, 0); + } + cursor: pointer; ` diff --git a/src/constants/todayList.ts b/src/constants/todayList.ts index e60f7bae..aebb1377 100644 --- a/src/constants/todayList.ts +++ b/src/constants/todayList.ts @@ -1,3 +1,16 @@ import { TodayKeyType } from '@models/components/atoms/DayWeek' export const todayList: TodayKeyType[] = [0, 1, 2, 3, 4, 5, 6] + +type WeeklyBoxType = { [key in TodayKeyType]: string } + +export const weeklyList: WeeklyBoxType = { + '-1': '', + 0: '/images/questionBox/mon.png', + 1: '/images/questionBox/tue.png', + 2: '/images/questionBox/wed.png', + 3: '/images/questionBox/thur.png', + 4: '/images/questionBox/fri.png', + 5: '/images/questionBox/sat.png', + 6: '/images/questionBox/sun.png', +} diff --git a/src/pages/onboarding/details/HalfSuccess.tsx b/src/pages/onboarding/details/HalfSuccess.tsx index baa16e3e..dc299a40 100644 --- a/src/pages/onboarding/details/HalfSuccess.tsx +++ b/src/pages/onboarding/details/HalfSuccess.tsx @@ -22,7 +22,7 @@ export function HalfSuccess() { 나의 취향 프로필을 꾸며볼까요? - + { const [date, setDate] = useRecoilState(dateState) @@ -64,6 +65,7 @@ export default WeeklyMainQuestion const WeekContainer = styled.div` width: 100%; display: flex; + overflow-x: hidden; flex-direction: column; height: calc(100vh - 80px); background-color: #2e2159; @@ -87,11 +89,14 @@ const WeekContainer = styled.div` ` const BackgroundImg = styled.div` width: 100%; - height: 100%; + height: 100vh; background-image: url('/weekly_background.png'); background-size: cover; position: absolute; - top: 0; + ${media.mobile} { + top: -80px; + } + top: -20px; ` const WeekWrapper = styled.div` width: 100%; diff --git a/src/utils/subCategoryTitle.ts b/src/utils/subCategoryTitle.ts index 6a2ae339..b269aef8 100644 --- a/src/utils/subCategoryTitle.ts +++ b/src/utils/subCategoryTitle.ts @@ -30,7 +30,7 @@ export const subCategoryTitle: Record< }, COOKING: { title: '요리', - img: '/images/cooking.png', + img: '/images/cup.png', }, EXERCISE: { title: '운동', From 2e1f574c5190860deee4e4f2946fc7c54e82cca8 Mon Sep 17 00:00:00 2001 From: Eugene Kim Date: Sat, 30 Dec 2023 21:16:49 +0900 Subject: [PATCH 14/17] =?UTF-8?q?fix:=20=EB=A9=94=EC=9D=B8=ED=99=94?= =?UTF-8?q?=EB=A9=B4=20=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4=EC=85=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/WeeklyQuestion/QuestionImg.tsx | 119 +++++++----------- src/pages/weekly/WeeklyMainQuestion.tsx | 2 +- 2 files changed, 48 insertions(+), 73 deletions(-) diff --git a/src/components/WeeklyQuestion/QuestionImg.tsx b/src/components/WeeklyQuestion/QuestionImg.tsx index a17554d3..78302ab2 100644 --- a/src/components/WeeklyQuestion/QuestionImg.tsx +++ b/src/components/WeeklyQuestion/QuestionImg.tsx @@ -1,23 +1,15 @@ -import { - DailyQuestionCategory, - DailyQuestionCategoryType, -} from '@utils/apis/weekly/questionType' import styled from '@emotion/styled' import { useRecoilState } from 'recoil' import { dateState } from '@libs/store/date' -import { useEffect, useState } from 'react' -import { weeklyList } from '@constants/todayList' -import { TodayKeyType } from '@models/components/atoms/DayWeek' const QuestionImg = ({ - category, + className, isToggled = true, }: { - category: DailyQuestionCategoryType + className: string isToggled?: boolean }) => { const [date, setDate] = useRecoilState(dateState) - const [day, setDay] = useState('') const images = [ '/images/questionBox/mon.png', @@ -29,64 +21,48 @@ const QuestionImg = ({ '/images/questionBox/sun.png', ] - useEffect(() => { - getDayWeek(date.selectedDate) - }, [date.dateString]) - - const getDayWeek = (day: number) => { - if (date.selectedDate === date.today) { - setDay('오늘') - return - } - switch (day) { - case 0: - setDay('월요일') - break - case 1: - setDay('화요일') - break - case 2: - setDay('수요일') - break - case 3: - setDay('목요일') - break - case 4: - setDay('금요일') - break - case 5: - setDay('토요일') - break - case 6: - setDay('일요일') - break - } + const getTransform = (index: number) => { + const diff = index - date.selectedDate + const translateX = diff * 97 // 가로 이동 거리 + const translateY = diff * (diff > 0 ? -68 : 68) // 세로 이동 거리 + console.log(translateX) + return `translate(${translateX}px, ${translateY}px)` } + return (
{images.map((image, index) => ( todayImg ))} - -
) @@ -99,11 +75,11 @@ const ImgContainer = styled.div<{ isToggled: boolean }>` justify-content: center; width: 100%; height: 230px; + .image-slider { position: relative; display: flex; justify-content: center; - transition: transform 0.5s ease-in-out; width: 100%; height: 100%; } @@ -111,15 +87,6 @@ const ImgContainer = styled.div<{ isToggled: boolean }>` height: 100%; position: absolute; } - .prevImg, - .nextImg { - position: absolute; - top: 0; - opacity: 0.5; - transition: - opacity 0.5s ease-in-out, - transform 0.5s ease-in-out; - } .todayImg { top: 40%; } @@ -127,14 +94,22 @@ const ImgContainer = styled.div<{ isToggled: boolean }>` display: none; } .prevImg { - left: 10%; + top: 40%; + left: 15%; opacity: 5%; - transform: translate(-97px, 0); } .nextImg { - right: 10%; + top: 40%; + right: 15%; opacity: 5%; - transform: translate(97px, 0); + } + .prevReadyImg { + left: -10%; + opacity: 0; + } + .nextReadyImg { + right: -10%; + opacity: 0; } cursor: pointer; diff --git a/src/pages/weekly/WeeklyMainQuestion.tsx b/src/pages/weekly/WeeklyMainQuestion.tsx index 2e29a7eb..dd2015a7 100644 --- a/src/pages/weekly/WeeklyMainQuestion.tsx +++ b/src/pages/weekly/WeeklyMainQuestion.tsx @@ -54,7 +54,7 @@ const WeeklyMainQuestion = () => { className="QuestionImg" onClick={handleAnswerQuestion} > - +
From 735eda1be6f8d431fab72dfff2698f0df4fbbbfc Mon Sep 17 00:00:00 2001 From: Eugene Kim Date: Sat, 30 Dec 2023 22:27:15 +0900 Subject: [PATCH 15/17] =?UTF-8?q?refac:=20=EB=B2=84=ED=8A=BC=20=EC=95=A0?= =?UTF-8?q?=EB=8B=88=EB=A9=94=EC=9D=B4=EC=85=98=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/atoms/RoundButton/index.tsx | 19 +---------------- src/components/funnel/MultiAnswerStep.tsx | 21 +++++++++++++------ src/components/funnel/OneAnswerStep.tsx | 21 +++++++++++++------ src/components/funnel/SearchAnswerStep.tsx | 20 ++++++++++++------ src/pages/weekly/AnswerDailyQuestion.tsx | 24 ++++++++++++++-------- 5 files changed, 61 insertions(+), 44 deletions(-) diff --git a/src/components/atoms/RoundButton/index.tsx b/src/components/atoms/RoundButton/index.tsx index ca0d4deb..3b4632b8 100644 --- a/src/components/atoms/RoundButton/index.tsx +++ b/src/components/atoms/RoundButton/index.tsx @@ -1,4 +1,3 @@ -import { useState } from 'react' import styled from '@emotion/styled' import { theme } from '@styles/theme' @@ -38,19 +37,6 @@ export const RoundButton = ({ onClick, ...props }: PropsType) => { - const [isClicked, setIsClicked] = useState(false) - - const handleClickButton = () => { - onClick?.() - setIsClicked(true) - - const id = setTimeout(() => { - setIsClicked(false) - }, 1000) // 1초 후 isClicked를 false로 설정하여 원래 크기로 돌아가도록 합니다. - - return () => clearTimeout(id) - } - const renderRoundButton = () => { if (variant === 'xlargeRound') { return ( @@ -99,8 +85,7 @@ export const RoundButton = ({ width={width} variant={variant} fullWidth={fullWidth} - isClicked={isClicked} - onClick={handleClickButton} + onClick={onClick} {...props} > {isLoading ? : renderRoundButton()} @@ -135,8 +120,6 @@ const StyledButton = styled.button<{ border-radius: ${({ variant }) => `${ROUND_BUTTON_SHAPE_TYPE[variant].radius}px`}; color: ${({ variant }) => `${ROUND_TEXT_COLOR_TYPE.default[variant]}`}; - transform: ${({ variant, isClicked }) => - variant === 'mediumRound' ? (isClicked ? 'scale(1.2)' : 'scale(1)') : ''}; &:hover { background-color: ${({ variant }) => diff --git a/src/components/funnel/MultiAnswerStep.tsx b/src/components/funnel/MultiAnswerStep.tsx index 0dfba7b0..732fd6f8 100644 --- a/src/components/funnel/MultiAnswerStep.tsx +++ b/src/components/funnel/MultiAnswerStep.tsx @@ -14,6 +14,7 @@ import { answerState } from '@libs/store/question' import useStepNumberIcon from '@libs/hooks/useStepNumberIcon' import useSnackBar from '@libs/hooks/useSnackBar' import TextWithLineBreak from '@components/atoms/TextWithLineBreak' +import { motion } from 'framer-motion' interface MultiAnswerStepProps { isLastAnswer?: boolean @@ -40,6 +41,7 @@ const MultiAnswerStep = ({ } = useQuery(['question', category, number], () => FavorApi.GET_FAVOR_QUESTION({ category, number }), ) + const spring = { type: 'spring', stiffness: 300, damping: 15 } const { setSnackBar } = useSnackBar() const [setStepNumberIcon] = useStepNumberIcon() const [step, setStepAnswer] = useRecoilState(answerState) @@ -157,14 +159,21 @@ const MultiAnswerStep = ({ })} )} - - {isLastAnswer ? '완료' : '다음'} - + + {isLastAnswer ? '완료' : '다음'} + + ) } diff --git a/src/components/funnel/OneAnswerStep.tsx b/src/components/funnel/OneAnswerStep.tsx index de02a863..95b52ff2 100644 --- a/src/components/funnel/OneAnswerStep.tsx +++ b/src/components/funnel/OneAnswerStep.tsx @@ -13,6 +13,7 @@ import { Spacing } from '@components/atoms/Spacing' import { favorQuestionData } from '@libs/store/dummy' import SquareButton from '@components/atoms/SquareButton' import TextWithLineBreak from '@components/atoms/TextWithLineBreak' +import { motion } from 'framer-motion' interface OneAnswerStepProps { isLastAnswer?: boolean @@ -37,6 +38,7 @@ const OneAnswerStep = ({ } = useQuery(['question', category, number], () => FavorApi.GET_FAVOR_QUESTION({ category, number }), ) + const spring = { type: 'spring', stiffness: 300, damping: 15 } const [answer, setAnswer] = useState('') const [step, setStepAnswer] = useRecoilState(answerState) const [disabled, setDisabled] = useState(true) @@ -113,14 +115,21 @@ const OneAnswerStep = ({ })} )} - - {isLastAnswer ? '완료' : '다음'} - + + {isLastAnswer ? '완료' : '다음'} + + ) } diff --git a/src/components/funnel/SearchAnswerStep.tsx b/src/components/funnel/SearchAnswerStep.tsx index da9965d3..335df2b1 100644 --- a/src/components/funnel/SearchAnswerStep.tsx +++ b/src/components/funnel/SearchAnswerStep.tsx @@ -15,6 +15,7 @@ import { useRecoilState } from 'recoil' import { answerState } from '@libs/store/question' import { theme } from '@styles/theme' import TextWithLineBreak from '@components/atoms/TextWithLineBreak' +import { motion } from 'framer-motion' interface SearchAnswerStepProps { category: TasteType @@ -225,14 +226,21 @@ const SearchAnswerStep = ({ )} - - {isLastAnswer ? '완료' : '다음'} - + + {isLastAnswer ? '완료' : '다음'} + + ) } diff --git a/src/pages/weekly/AnswerDailyQuestion.tsx b/src/pages/weekly/AnswerDailyQuestion.tsx index 90d4b506..d8261f97 100644 --- a/src/pages/weekly/AnswerDailyQuestion.tsx +++ b/src/pages/weekly/AnswerDailyQuestion.tsx @@ -8,7 +8,7 @@ import { useRecoilState } from 'recoil' import { questionState } from '@libs/store/question' import { WeeklyApi } from '@utils/apis/weekly/WeeklyApi' import { useNavigate } from 'react-router-dom' -import QuestionImg from '@components/WeeklyQuestion/QuestionImg' +import { motion } from 'framer-motion' import { LongInput } from '@components/atoms/Input/LongInput' import VideoBox from '@components/WeeklyQuestion/VideoBox' @@ -94,14 +94,22 @@ const AnswerDailyQuestion = () => { {!toggled && ( - - 답변 완료 - + + 답변 완료 + + )} From 9d6b11acf7b38baba42905c6d672f06d65e067a0 Mon Sep 17 00:00:00 2001 From: Eugene Kim Date: Sat, 30 Dec 2023 23:16:54 +0900 Subject: [PATCH 16/17] =?UTF-8?q?fix=20:=20base=20url=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 6c64349d..87fcce90 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - + Date: Sat, 30 Dec 2023 23:18:58 +0900 Subject: [PATCH 17/17] =?UTF-8?q?fix:=20=EB=B9=8C=EB=93=9C=EC=97=90?= =?UTF-8?q?=EB=9F=AC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/WeeklyQuestion/QuestionImg.tsx | 3 +++ src/pages/weekly/CheckAllAnswers.tsx | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/WeeklyQuestion/QuestionImg.tsx b/src/components/WeeklyQuestion/QuestionImg.tsx index 78302ab2..8bcc9f77 100644 --- a/src/components/WeeklyQuestion/QuestionImg.tsx +++ b/src/components/WeeklyQuestion/QuestionImg.tsx @@ -1,13 +1,16 @@ import styled from '@emotion/styled' import { useRecoilState } from 'recoil' import { dateState } from '@libs/store/date' +import { DailyQuestionCategoryType } from '@utils/apis/weekly/questionType' const QuestionImg = ({ className, + category, isToggled = true, }: { className: string isToggled?: boolean + category?: DailyQuestionCategoryType }) => { const [date, setDate] = useRecoilState(dateState) diff --git a/src/pages/weekly/CheckAllAnswers.tsx b/src/pages/weekly/CheckAllAnswers.tsx index 1f9d71c5..15d283dd 100644 --- a/src/pages/weekly/CheckAllAnswers.tsx +++ b/src/pages/weekly/CheckAllAnswers.tsx @@ -54,7 +54,7 @@ const CheckAllAnswers = () => { textAlign: 'center', }} > - +