diff --git a/README.md b/README.md deleted file mode 100644 index 3d48a2ef..00000000 --- a/README.md +++ /dev/null @@ -1 +0,0 @@ -MAKE-A-WISH CLIENT diff --git a/api/auth.ts b/api/auth.ts deleted file mode 100644 index 99107af8..00000000 --- a/api/auth.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { API_VERSION_01, PATH_AUTH } from './path'; -import { client } from './common/axios'; - -export const postAuthKakao = async (code: string) => { - const data = await client.post( - `${API_VERSION_01}${PATH_AUTH.KAKAO}?redirectUri=${process.env.NEXT_PUBLIC_KAKAO_REDIRECT_URI}`, - {}, - { - headers: { - 'Content-Type': 'application/json', - code: `${code}`, - }, - }, - ); - - return data.data.data; -}; diff --git a/api/cakes.ts b/api/cakes.ts deleted file mode 100644 index 0aef6936..00000000 --- a/api/cakes.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { getAccessToken } from '@/utils/common/token'; -import { client } from './common/axios'; -import { API_VERSION_01, PATH_CAKES } from './path'; - -const ACCESS_TOKEN = getAccessToken(); - -/** - * 해당 소원에 대한 케이크 조회 - */ -export const getCakesInfo = async ( - wishId: string | string[] | undefined, - cakeId: string | string[] | undefined, -) => { - const data = await client.get(`${API_VERSION_01}${PATH_CAKES.GET_CAKES_INFO(wishId, cakeId)}`, { - headers: { - 'Content-Type': 'application/json', - Authorization: `Bearer ${ACCESS_TOKEN}`, - }, - }); - - return data.data.data; -}; - -/** - * 해당 소원에 대한 모든 케이크 리스트 결과 조회 - */ -export const getCakesResult = async (wishId: string | string[] | undefined) => { - const data = await client.get(`${API_VERSION_01}${PATH_CAKES.GET_CAKES_RESULT(wishId)}`, { - headers: { - 'Content-Type': 'application/json', - Authorization: `Bearer ${ACCESS_TOKEN}`, - }, - }); - return data.data.data; -}; diff --git a/api/common/axios.ts b/api/common/axios.ts deleted file mode 100644 index 594e4019..00000000 --- a/api/common/axios.ts +++ /dev/null @@ -1,44 +0,0 @@ -import axios from 'axios'; - -//서버통신 함수 -export const client = axios.create({ - baseURL: process.env.NEXT_PUBLIC_BASE_URL, -}); - -client.interceptors.request.use(function (config: any) { - const token = localStorage.getItem('accessToken'); - - if (!token) { - config.headers['accessToken'] = null; - return config; - } - - if (config.headers && token) { - config.headers['Authorization'] = `Bearer ${token}`; - return config; - } - return config; -}); - -client.interceptors.response.use( - function (response) { - return response; - }, - async function (error) { - if (error.response) { - if (error.response.data.message === '유효하지 않은 토큰입니다.') { - // alert('로그인 상태를 확인해주세요!'); - // window.location.replace('/'); - } else if (error.response.data.message === '유효하지 않은 소원 링크입니다.') { - // alert(error.response.data.message); - // window.location.replace('/'); - } else if ( - error.response?.data?.message === '이미 진행 중인 소원 링크가 있습니다.' || - error.response?.data?.message === '주간이 끝난 소원 링크입니다.' - ) { - // alert(error.response?.data?.message); - // window.location.replace('/main'); - } - } - }, -); diff --git a/api/file.ts b/api/file.ts deleted file mode 100644 index f326622a..00000000 --- a/api/file.ts +++ /dev/null @@ -1,25 +0,0 @@ -import axios from 'axios'; -import { client } from './common/axios'; -import { API_VERSION_01 } from './path'; -import { getAccessToken } from '@/utils/common/token'; - -export const uploadPresignedURL = async (signedURL: string, file: File | Blob | null) => { - const data = await axios.put(signedURL, file, { - headers: { - 'Content-Type': file?.type, - }, - }); - - return data; -}; - -export const getPresignedURL = async (fileName: string | undefined) => { - const data = await client.get(`${API_VERSION_01}/file?fileName=${fileName}`, { - headers: { - 'Content-Type': 'application/json', - Authorization: `Bearer ${getAccessToken()}`, - }, - }); - - return data; -}; diff --git a/api/path.ts b/api/path.ts deleted file mode 100644 index 6d63b9d2..00000000 --- a/api/path.ts +++ /dev/null @@ -1,41 +0,0 @@ -export const API_VERSION_01 = '/api/v1'; - -const PATH = { - auth: '/auth', - user: '/user', - wishes: '/wishes', - public: '/public', - cakes: '/cakes', -}; - -export const PATH_AUTH = { - TOKEN: `${PATH.auth}/token`, - KAKAO: `${PATH.auth}/kakao/callback`, -}; - -export const PATH_USER = { - DEFAULT: PATH.user, - ACCOUNT: `${PATH.user}/account`, - ACCOUNT_VERIFY: `${PATH.user}/verify-account`, - ABUSE: `${PATH.user}/abuse`, -}; - -export const PATH_WISHES = { - DEFAULT: PATH.wishes, - PROGRESS: `${PATH.wishes}/progress`, - GET_SINGLE_WISH_INFO: (wishId: string | string[] | undefined) => `${PATH.wishes}/${wishId}`, - PRESENT_LINK_INFO: `${PATH.wishes}/present/info`, - MAIN: `${PATH.wishes}/main`, -}; - -export const PATH_PUBLIC = { - CAKES: `${PATH.public}/cakes`, - GET_WISHES_INFO: (wishId: string | string[] | undefined) => - `${PATH.public}${PATH.wishes}/${wishId}`, -}; - -export const PATH_CAKES = { - GET_CAKES_RESULT: (wishId: string | string[] | undefined) => `${PATH.cakes}/${wishId}`, - GET_CAKES_INFO: (wishId: string | string[] | undefined, cakeId: string | string[] | undefined) => - `${PATH.cakes}/${wishId}/${cakeId}`, -}; diff --git a/api/public.ts b/api/public.ts deleted file mode 100644 index 75382648..00000000 --- a/api/public.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { PostPublicCakesResponseType, PublicWishesDataResponseType } from '@/types/api/response'; -import { client } from './common/axios'; -import { API_VERSION_01, PATH_PUBLIC } from './path'; -import { PostPublicCakesRequestType } from '@/types/api/request'; -import { getAccessToken } from '@/utils/common/token'; - -const ACCESS_TOKEN = getAccessToken(); - -export const getPublicWishes = async (wishId: string | string[] | undefined) => { - const data = await client.get( - `${API_VERSION_01}${PATH_PUBLIC.GET_WISHES_INFO(wishId)}`, - ); - - return data.data.data; -}; - -export const postPublicCakes = async (parameter: PostPublicCakesRequestType) => { - const data = await client.post( - `${API_VERSION_01}${PATH_PUBLIC.CAKES}`, - parameter, - { - headers: { - 'Content-Type': 'application/json', - Authorization: `Bearer ${ACCESS_TOKEN}`, - }, - }, - ); - - return data.data.data; -}; diff --git a/api/user.ts b/api/user.ts deleted file mode 100644 index 44284bac..00000000 --- a/api/user.ts +++ /dev/null @@ -1,55 +0,0 @@ -import { getAccessToken } from '@/utils/common/token'; -import { client } from './common/axios'; -import { API_VERSION_01, PATH_USER } from './path'; -import { UseFormReturn } from 'react-hook-form'; - -import { UserAccountDataResponseType } from '@/types/api/response'; -import { WishesDataInputType } from '@/types/wishesType'; - -const ACCESS_TOKEN = getAccessToken(); - -export const patchUserAccount = async ( - methods: UseFormReturn, -) => { - const data = await client.put( - `${API_VERSION_01}${PATH_USER.ACCOUNT}`, - { - accountInfo: { - name: methods.getValues('name'), - bank: methods.getValues('bank'), - account: methods.getValues('account'), - }, - }, - { - headers: { - 'Content-Type': 'application/json', - Authorization: `Bearer ${ACCESS_TOKEN}`, - }, - }, - ); - return data; -}; - -export const getUserAccount = async () => { - const data = await client.get( - `${API_VERSION_01}${PATH_USER.ACCOUNT}`, - { - headers: { - 'Content-Type': 'application/json', - Authorization: `Bearer ${ACCESS_TOKEN}`, - }, - }, - ); - return data?.data.data; -}; - -export const deleteUserInfo = async () => { - const data = await client.delete(`${API_VERSION_01}${PATH_USER.DEFAULT}`, { - headers: { - 'Content-Type': 'application/json', - Authorization: `Bearer ${ACCESS_TOKEN}`, - }, - }); - - return data; -}; diff --git a/api/wishes.ts b/api/wishes.ts deleted file mode 100644 index ed14732d..00000000 --- a/api/wishes.ts +++ /dev/null @@ -1,176 +0,0 @@ -import { MainProgressDataResponseType, WishesProgressDataResponseType } from '@/types/api/response'; -import { client } from './common/axios'; -import { getAccessToken } from '@/utils/common/token'; -import { API_VERSION_01, PATH_WISHES } from './path'; - -import { UseFormReturn } from 'react-hook-form'; -import { SiteDataType } from '@/types/siteDataType'; -import { WishesDataInputType } from '@/types/wishesType'; - -const ACCESS_TOKEN = getAccessToken(); - -/** - * 진행중인 소원 조회 - */ -export const getMainProgressData = async () => { - const data = await client.get( - `${API_VERSION_01}${PATH_WISHES.MAIN}`, - { - headers: { - 'Content-Type': 'application/json', - Authorization: `Bearer ${ACCESS_TOKEN}`, - }, - }, - ); - - return data.data.data; -}; - -/** - * 모든 소원리스트 조회 - */ -export const getWishes = async () => { - const data = await client.get(`${API_VERSION_01}${PATH_WISHES.DEFAULT}`, { - headers: { - 'Content-Type': 'application/json', - Authorization: `Bearer ${ACCESS_TOKEN}`, - }, - }); - - return data.data.data.wishes; -}; - -/** - * 소원링크 생성 - */ -export const postWishes = async (methods: UseFormReturn) => { - const data = await client.post( - `${API_VERSION_01}${PATH_WISHES.DEFAULT}`, - { - imageUrl: methods.getValues('imageUrl'), - price: methods.getValues('price'), - title: methods.getValues('title'), - hint: methods.getValues('hint'), - initial: methods.getValues('initial'), - phone: methods.getValues('phone'), - startDate: methods.getValues('startDate'), - endDate: methods.getValues('endDate'), - }, - { - headers: { - 'Content-Type': 'application/json', - Authorization: `Bearer ${ACCESS_TOKEN}`, - }, - }, - ); - return data; -}; - -/** - * 소원링크 삭제 - */ -export const deleteWishes = async (wishesData: number[]) => { - const data = await client.delete(`${API_VERSION_01}${PATH_WISHES.DEFAULT}`, { - headers: { - 'Content-Type': 'application/json', - Authorization: `Bearer ${ACCESS_TOKEN}`, - }, - data: { - wishes: wishesData, - }, - }); - - return data; -}; - -/** - * 29cm에서 파싱한 데이터 - */ -export const getPresentLinkInfo = async (link: string, siteData: SiteDataType | undefined) => { - const imageTag = - siteData && - (await client.get( - `${API_VERSION_01}${PATH_WISHES.PRESENT_LINK_INFO}?url=${link}&tag=${siteData.IMAGE_TAG}`, - { - headers: { - 'Content-Type': 'application/json', - Authorization: `Bearer ${ACCESS_TOKEN}`, - }, - }, - )); - - const priceTag = - siteData && - (await client.get( - `${API_VERSION_01}${PATH_WISHES.PRESENT_LINK_INFO}?url=${link}&tag=${siteData.PRICE_TAG}`, - { - headers: { - 'Content-Type': 'application/json', - Authorization: `Bearer ${ACCESS_TOKEN}`, - }, - }, - )); - return { imageTag, priceTag }; -}; - -/** - * 진행중인 소원 정보 조회 - */ -export const getProgressWishInfo = async () => { - const data = await client.get( - `${API_VERSION_01}${PATH_WISHES.PROGRESS}`, - { - headers: { - 'Content-Type': 'application/json', - Authorization: `Bearer ${ACCESS_TOKEN}`, - }, - }, - ); - - return data.data.data; -}; - -/** - * 진행중인 소원 정보 수정 - */ -export const patchProgressWishInfo = async ( - methods: UseFormReturn, -) => { - const data = await client.put( - `${API_VERSION_01}${PATH_WISHES.PROGRESS}`, - { - title: methods.getValues('title'), - hint: methods.getValues('hint'), - initial: methods.getValues('initial'), - imageUrl: methods.getValues('imageUrl'), - phone: methods.getValues('phone'), - account: methods.getValues('account'), - bank: methods.getValues('bank'), - name: methods.getValues('name'), - startDate: methods.getValues('startDate'), - endDate: methods.getValues('endDate'), - }, - { - headers: { - 'Content-Type': 'application/json', - Authorization: `Bearer ${ACCESS_TOKEN}`, - }, - }, - ); - - return data.data.data; -}; - -/** - * 소원 단건 조회 - */ -export const getSingleWishInfo = async (wishId: string | string[] | undefined) => { - const data = await client.get(`${API_VERSION_01}${PATH_WISHES.GET_SINGLE_WISH_INFO(wishId)}`, { - headers: { - 'Content-Type': 'application/json', - Authorization: `Bearer ${ACCESS_TOKEN}`, - }, - }); - - return data.data.data; -}; diff --git a/components/Cakes/CakesForm.tsx b/components/Cakes/CakesForm.tsx deleted file mode 100644 index 01dc15fc..00000000 --- a/components/Cakes/CakesForm.tsx +++ /dev/null @@ -1,120 +0,0 @@ -import TextareaBox from '../Common/Input/TextareaBox'; -import styled from 'styled-components'; -import { LIMIT_TEXT } from '@/constant/limitText'; -import SelectCakes from './SelectCakes'; -import Button from '../Common/Button'; -import Input from '../Common/Input/Input'; -import { UseFormReturn } from 'react-hook-form'; -import InputContainer from '../Common/Input/InputContainer'; -import { CakesDataInputType } from '@/types/common/input/cakesInput'; -import { StyledBox } from '../Common/Box'; -import BackBtn from '../Common/Button/BackBtn'; -import { CakeListType } from '@/types/cakes/cakeListType'; -import { useGetPublicWishes } from '@/hooks/queries/public'; -import { UseMutateFunction } from 'react-query'; -import theme from '@/styles/theme'; - -interface CakesFormProps { - methods: UseFormReturn; - selectedCake: CakeListType; - selectedIndex: number; - selectCake: (index: number) => void; - wishesId: string | string[] | undefined; - postPublicCakesData: UseMutateFunction< - { - cakeId: number; - imageUrl: string; - hint: string; - initial: string; - contribute: string; - wisher: string; - }, - unknown, - void, - unknown - >; -} - -export default function CakesForm(props: CakesFormProps) { - const { methods, selectedCake, selectedIndex, selectCake, wishesId, postPublicCakesData } = props; - - const { publicWishesData } = useGetPublicWishes(wishesId); - - const handleClickFn = () => { - postPublicCakesData(); - }; - - return ( - <> - - - {`D-${publicWishesData?.dayCount}`} - - - {publicWishesData?.title} - - - {publicWishesData?.hint} - - - - - - - - - - - - - - - - - ); -} - -const Styled = { - HeaderWrapper: styled.div` - display: flex; - justify-content: space-between; - - width: 100%; - - color: ${theme.colors.main_blue}; - ${theme.fonts.headline20}; - `, - - Title: styled.h1` - ${theme.fonts.headline24_100}; - color: ${theme.colors.main_blue}; - margin: 2.4rem 0 3rem; - `, - - HintBox: styled(StyledBox)` - width: 100%; - height: 12.6rem; - - ${theme.fonts.body14}; - - padding: 1.2rem 1rem 1.2rem 1.2rem; - `, - - ButtonWrapper: styled.div` - padding-bottom: 4.6rem; - `, -}; diff --git a/components/Cakes/CakesPay.tsx b/components/Cakes/CakesPay.tsx deleted file mode 100644 index 7e49f339..00000000 --- a/components/Cakes/CakesPay.tsx +++ /dev/null @@ -1,150 +0,0 @@ -import styled from 'styled-components'; -import theme from '@/styles/theme'; -import { BackBtnIc } from '@/public/assets/icons'; -import Image from 'next/image'; -import { CakeListType } from '@/types/cakes/cakeListType'; -import { convertMoneyText } from '@/utils/common/convertMoneyText'; -import PaymentItemSelect from '../Common/Select/PaymentItemSelect'; -import { BANK_LIST } from '@/constant/bankList'; -import { BankListType } from '@/types/bankListType'; -import Button from '../Common/Button'; -import { useState } from 'react'; -import { useGetPublicWishes } from '@/hooks/queries/public'; - -interface CakesPayProps { - handlePrevStep: () => void; - handleNextStep: () => void; - selectedCake: CakeListType; - wishesId: string | string[] | undefined; -} - -export default function CakesPay(props: CakesPayProps) { - const { handlePrevStep, handleNextStep, selectedCake, wishesId } = props; - - const { publicWishesData } = useGetPublicWishes(wishesId); - - const PAYMENTS: BankListType[] = [BANK_LIST[5], BANK_LIST[1]]; - const [selectedPayment, setSelected] = useState(); - - const handlePaymentSelect = (payment: BankListType) => { - setSelected(payment); - }; - - const handleDeepLink = (payment: BankListType | undefined) => { - const ua = navigator.userAgent.toLowerCase(); - - if (!selectedPayment) { - alert('결제수단을 선택해주세요!'); - return; - } - - if (window.confirm(`${payment?.name}(으)로 이동할까요?`)) { - if (payment?.name === '토스뱅크') { - window.open( - ua.indexOf('android') > -1 - ? 'https://play.google.com/store/apps/details?id=viva.republica.toss' - : 'https://apps.apple.com/app/id839333328', - ); - } - - if (payment?.name === '카카오뱅크') { - window.open( - ua.indexOf('android') > -1 - ? 'https://play.google.com/store/apps/details?id=com.kakaobank.channel' - : 'https://apps.apple.com/app/id1258016944', - ); - } - handleNextStep(); - } - }; - - return ( - <> - - 뒤로가기 - - - 주문 확인 내역 - {`${selectedCake.name} ${convertMoneyText( - String(selectedCake.price), - )}원을\n${publicWishesData?.name}님께 보내시겠습니까?`} - - - 케이크 이미지 - - - 결제수단 선택 - - - {PAYMENTS.map((payment: BankListType) => ( - - ))} - - - - - - - - ); -} - -const Styled = { - Header: styled.header` - display: flex; - justify-content: space-between; - align-items: center; - - width: 100%; - height: 3rem; - `, - - Container: styled.section` - width: 100%; - height: 100%; - - margin: 2.4rem 0 2rem; - `, - - TitleText: styled.h1` - ${theme.fonts.headline24_130}; - color: ${theme.colors.main_blue}; - `, - - TextWrapper: styled.div` - ${theme.fonts.headline24_130}; - color: ${theme.colors.black}; - - margin-top: 0.7rem; - - white-space: pre-line; - `, - - ImageWrapper: styled.div` - margin: 1.5rem 0 2rem; - `, - - PaymentWrapper: styled.ul` - display: flex; - flex-direction: column; - - gap: 1.4rem; - - margin-top: 2rem; - `, - - ButtonWrapper: styled.div` - padding-bottom: 4.6rem; - `, -}; diff --git a/components/Cakes/CakesResult.tsx b/components/Cakes/CakesResult.tsx deleted file mode 100644 index 61310b83..00000000 --- a/components/Cakes/CakesResult.tsx +++ /dev/null @@ -1,142 +0,0 @@ -import theme from '@/styles/theme'; -import styled from 'styled-components'; -import ItemImageBox from '@/components/Common/Box/ItemImageBox'; -import Contribution from './Result/Contribution'; -import { CakeListType } from '@/types/cakes/cakeListType'; -import Image from 'next/image'; -import Button from '../Common/Button'; -import router from 'next/router'; - -interface CakesResultProps { - cakesResultData: - | { - cakeId: number; - imageUrl: string; - hint: string; - initial: string; - contribute: string; - wisher: string; - } - | undefined; - selectedCake: CakeListType; -} - -export default function CakesResult(props: CakesResultProps) { - const { cakesResultData, selectedCake } = props; - - const handleMoveHome = () => { - router.push('/'); - }; - - return ( - <> - - - {cakesResultData?.wisher}님께 - - 케이크 감사 이미지 - - {selectedCake.name} - 선물이 완료 되었어요! - - {cakesResultData?.cakeId === 1 ? ( - <> - - - ~선물 초성힌트~ - {cakesResultData?.initial} - - - 사실 내가 갖고 싶었던 건...비밀이야❤ - - ) : ( - <> - - 사실 내가 갖고 싶었던 건...이거야❤ - - )} - {cakesResultData && ( - - )} - - - - - - ); -} - -const Styled = { - Container: styled.section` - display: flex; - flex-direction: column; - align-items: center; - - margin-top: 5rem; - `, - WishText: styled.div` - color: ${theme.colors.main_blue}; - ${theme.fonts.body16}; - - margin-top: 1.4rem; - `, - - HintWrapper: styled.div` - display: flex; - flex-direction: column; - align-items: center; - - color: ${theme.colors.main_blue}; - ${theme.fonts.body16}; - - margin-top: 1.4rem; - `, - - HintText: styled.div` - ${theme.fonts.headline30}; - margin-top: 3.4rem; - `, - - CakeText: styled.span` - ${theme.fonts.headline30}; - color: ${theme.colors.main_blue}; - `, - - ImageWrapper: styled.div` - margin: 1.3rem 0 2.1rem; - `, - - TextWrapper: styled.div` - display: flex; - flex-direction: column; - align-items: center; - - ${theme.fonts.headline30}; - - margin-bottom: 3.6rem; - `, - - ButtonWrapper: styled.div` - padding-bottom: 4.6rem; - `, - - HintBox: styled.div` - display: flex; - justify-content: center; - - width: 100%; - height: 16rem; - - border-radius: 1.6rem; - - border: 1px solid ${theme.colors.main_blue}; - background-color: ${theme.colors.pastel_blue}; - `, -}; diff --git a/components/Cakes/Result/Contribution.tsx b/components/Cakes/Result/Contribution.tsx deleted file mode 100644 index acf5e1b9..00000000 --- a/components/Cakes/Result/Contribution.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import styled, { css } from 'styled-components'; -import ProgressBar from '../../Common/ProgressBar'; -import theme from '@/styles/theme'; - -interface ContributionProps { - percent: number; - vertical: boolean; -} - -export default function Contribution(props: ContributionProps) { - const { percent, vertical } = props; - return ( - - 당신의 기여도는...? - - - - {percent}% - - - ); -} - -const Styled = { - Container: styled.div` - display: flex; - flex-direction: column; - align-items: center; - - margin: 5rem 0 7rem; - `, - - Text: styled.div` - ${theme.fonts.body16}; - color: ${theme.colors.main_blue}; - - margin-bottom: 0.5rem; - `, - - ProgressBox: styled.div` - display: flex; - - width: 100%; - - margin-top: 0.5rem; - `, - - PercentWrapper: styled.div<{ percent: number }>` - width: ${(props) => props.percent}%; - - ${(props) => - props.percent > 3 && - css` - margin-left: -1.7rem; - `} - `, - - Percent: styled.div` - ${theme.fonts.button18}; - color: ${theme.colors.main_blue}; - `, -}; diff --git a/components/Cakes/SelectCakes.tsx b/components/Cakes/SelectCakes.tsx deleted file mode 100644 index 67f05f99..00000000 --- a/components/Cakes/SelectCakes.tsx +++ /dev/null @@ -1,93 +0,0 @@ -import { CAKE_LIST } from '@/constant/cakeList'; -import { CakeListType } from '@/types/cakes/cakeListType'; -import InputContainer from '../Common/Input/InputContainer'; -import styled from 'styled-components'; -import Image from 'next/image'; -import theme from '@/styles/theme'; -import { convertMoneyText } from '@/utils/common/convertMoneyText'; -import ImageBox from '../Common/Box/ImageBox'; -import { StyledBox } from '../Common/Box'; - -interface SelectCakesProps { - selectedCake: CakeListType; - selectedIndex: number; - selectCake: (index: number) => void; -} - -export default function SelectCakes(props: SelectCakesProps) { - const { selectedCake, selectedIndex, selectCake } = props; - - return ( - - - {CAKE_LIST.map((cake, index) => ( - selectCake(index)} - index={index} - selectedIndex={selectedIndex} - key={cake.name} - > - {`${cake.name}이미지`} - - ))} - - - - 케이크 상세 이미지 - - - - {selectedCake.name} {convertMoneyText(String(selectedCake.price))}원 - - - ); -} - -const Styled = { - CakeWrapper: styled.ul` - display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr; - grid-template-rows: 1fr 1fr; - grid-column-gap: 1.2rem; - grid-row-gap: 1rem; - - width: 100%; - - margin-bottom: 1.2rem; - `, - - CakeBox: styled(StyledBox)<{ index: number; selectedIndex: number }>` - width: 7.4rem; - height: 4.6rem; - - display: flex; - justify-content: center; - align-items: center; - - padding: 0.8rem 1.4rem; - background-color: ${(props) => - props.index === props.selectedIndex ? theme.colors.main_blue : theme.colors.pastel_blue}; - border-radius: 0.6rem; - - cursor: pointer; - `, - - CakeInfo: styled.span` - ${theme.fonts.button18}; - color: ${theme.colors.main_blue}; - - display: flex; - justify-content: center; - - margin-top: 1rem; - `, - - CakesImageWrapper: styled.div` - height: 100%; - - display: flex; - justify-content: center; - align-items: center; - `, -}; diff --git a/components/Cakes/index.tsx b/components/Cakes/index.tsx deleted file mode 100644 index f0da3349..00000000 --- a/components/Cakes/index.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import useWishesStep from '@/hooks/wishes/useWisehsStep'; -import CakesForm from './CakesForm'; -import styled from 'styled-components'; -import theme from '@/styles/theme'; -import CakesPay from './CakesPay'; -import { useForm } from 'react-hook-form'; -import { CakesDataInputType } from '@/types/common/input/cakesInput'; -import useSelectCakes from '@/hooks/cakes/useSelectCakes'; -import { useRouter } from 'next/router'; -import { useEffect, useState } from 'react'; -import CakesResult from './CakesResult'; -import { usePostPublicCakes } from '@/hooks/queries/public'; - -export default function CakesContainer() { - const wishesStep = { ...useWishesStep() }; - const { selectedCake, selectedIndex, selectCake } = useSelectCakes(); - const [wishesId, setWishesId] = useState(''); - - const router = useRouter(); - - const methods = useForm({ - defaultValues: { - giverName: '', - letter: '', - }, - }); - - const { postPublicCakesData, cakesResultData, isSuccess } = usePostPublicCakes({ - name: methods.getValues('giverName'), - wishId: wishesId, - cakeId: selectedCake.cakeNumber, - message: methods.getValues('letter'), - }); - - useEffect(() => { - isSuccess && wishesStep.handleNextStep(); - }, [isSuccess]); - - useEffect(() => { - if (!router.isReady) return; - setWishesId(router.query.id); - }, [router.isReady]); - - return ( - - { - { - 1: ( - - ), - 2: ( - - ), - 3: , - }[wishesStep.stepIndex] - } - - ); -} - -const Styled = { - Container: styled.div` - display: flex; - flex-direction: column; - justify-content: space-between; - - height: 100svh; - `, - - Header: styled.header` - display: flex; - justify-content: space-between; - - width: 100%; - - color: ${theme.colors.main_blue}; - ${theme.fonts.headline20}; - `, - - ButtonWrapper: styled.div` - padding-bottom: 4.6rem; - `, -}; diff --git a/components/Common/AlertTextBox.tsx b/components/Common/AlertTextBox.tsx deleted file mode 100644 index 39d2612f..00000000 --- a/components/Common/AlertTextBox.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { ReactNode } from 'react'; -import { AlertSuccessIc, AlertWarningIc } from '@/public/assets/icons'; -import theme from '@/styles/theme'; -import styled from 'styled-components'; -import Image from 'next/image'; - -interface AlertTextBoxProps { - alertSuccess?: boolean; - children: ReactNode; -} - -export default function AlertTextBox(props: AlertTextBoxProps) { - const { alertSuccess, children } = props; - - return ( - - 알림 아이콘 - {children} - - ); -} - -const Styled = { - Container: styled.div` - display: flex; - align-items: center; - margin-top: 1rem; - `, - Text: styled.span<{ alertSuccess?: boolean }>` - margin-left: 0.6rem; - ${theme.fonts.body12}; - color: ${(props) => (props.alertSuccess ? theme.colors.dark_blue : theme.colors.warning_red)}; - `, -}; diff --git a/components/Common/Box/ImageBox.tsx b/components/Common/Box/ImageBox.tsx deleted file mode 100644 index 65a20dd6..00000000 --- a/components/Common/Box/ImageBox.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import styled from 'styled-components'; -import { StyledBox } from './index'; -import theme from '@/styles/theme'; -import { ColorSystemType, ImageBoxTypes } from '@/types/common/box/boxStyleType'; -import { PropsWithChildren } from 'react'; - -interface ImageBoxProps { - boxType?: ImageBoxTypes; - colorSystem: ColorSystemType; -} - -export default function ImageBox(props: PropsWithChildren) { - const { boxType, colorSystem, children } = props; - - return {children}; -} - -const StyledImageBox = styled(StyledBox)` - width: 100%; - height: 15rem; - - padding: 1rem 1rem 1rem 1.2rem; - border: 0.1rem solid ${theme.colors.main_blue}; - - //ImageBox Style System - &.imageBox--textarea { - height: 16rem; - - border-radius: 1rem; - padding: 1.4rem 1.2rem; - } - - &.imageBox--image { - position: relative; - - display: flex; - justify-content: center; - align-items: center; - - padding: 0; - - border-radius: 1.6rem; - background-color: ${theme.colors.pastel_blue}; - - overflow: hidden; - } -`; diff --git a/components/Common/Box/InputBox.tsx b/components/Common/Box/InputBox.tsx deleted file mode 100644 index c1f03364..00000000 --- a/components/Common/Box/InputBox.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import styled from 'styled-components'; -import { StyledBox } from './index'; -import theme from '@/styles/theme'; -import { ColorSystemType, InputBoxTypes } from '@/types/common/box/boxStyleType'; -import { PropsWithChildren } from 'react'; - -interface InputBoxProps { - width?: string; - boxType: InputBoxTypes; - colorSystem: ColorSystemType; -} - -export default function InputBox(props: PropsWithChildren) { - const { width, boxType, colorSystem, children } = props; - - return ( - - {children} - - ); -} - -const StyledInputBox = styled(StyledBox)<{ width?: string }>` - height: 5rem; - - padding: 1rem 1rem 1rem 1.2rem; - border: 0.1rem solid ${theme.colors.main_blue}; - border-radius: 1rem; - - //InputBox Style System - &.inputBox--half { - width: calc(100% / 2); - } - - &.inputBox--large { - width: 100%; - - display: flex; - align-items: center; - } - - &.inputBox--calendar { - width: 16rem; - - display: flex; - justify-content: space-between; - align-items: center; - - ${theme.fonts.body14}; - } - - &.inputBox--custom { - width: ${(props) => props.width}; - height: 5rem; - } -`; diff --git a/components/Common/Box/ItemImageBox.tsx b/components/Common/Box/ItemImageBox.tsx deleted file mode 100644 index 2074ddda..00000000 --- a/components/Common/Box/ItemImageBox.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import Image from 'next/image'; -import ImageBox from './ImageBox'; - -interface ItemImageBoxProps { - src: string; - alt: string; -} - -export default function ItemImageBox(props: ItemImageBoxProps) { - const { src, alt } = props; - - return ( - - {alt} - - ); -} diff --git a/components/Common/Box/PresentBox.tsx b/components/Common/Box/PresentBox.tsx deleted file mode 100644 index 5c50fd16..00000000 --- a/components/Common/Box/PresentBox.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import theme from '@/styles/theme'; -import { PropsWithChildren } from 'react'; -import styled from 'styled-components'; - -export default function PresentBox(props: PropsWithChildren) { - const { children } = props; - return {children}; -} - -const Styled = { - Container: styled.div` - display: flex; - justify-content: center; - align-items: center; - - width: 33.1rem; - height: 16rem; - - border: 0.1rem solid ${theme.colors.main_blue}; - background-color: ${theme.colors.white}; - border-radius: 1.6rem; - `, -}; diff --git a/components/Common/Box/index.tsx b/components/Common/Box/index.tsx deleted file mode 100644 index 6975afd9..00000000 --- a/components/Common/Box/index.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import theme from '@/styles/theme'; -import { BoxTypes, ColorSystemType } from '@/types/common/box/boxStyleType'; -import styled from 'styled-components'; - -interface BoxProps { - width?: number; - boxType?: BoxTypes; - colorSystem: ColorSystemType; - children: React.ReactNode; -} - -export default function Box(props: BoxProps) { - const { boxType, colorSystem, children } = props; - - return {children}; -} - -export const StyledBox = styled.div` - border-radius: 1rem; - - .small { - width: 7.4rem; - height: 4.6rem; - } - - .half { - width: calc(100% / 2); - height: 5rem; - } - - .large { - width: 100%; - height: 5rem; - } - - .image { - width: 100%; - height: 15rem; - } - - // Color System - &.gray1_white { - background-color: ${theme.colors.gray1}; - color: ${theme.colors.white}; - } - - &.mainBlue_white { - background-color: ${theme.colors.main_blue}; - color: ${theme.colors.white}; - } - - &.yellow_black { - background-color: ${theme.colors.yellow}; - color: ${theme.colors.black}; - } - - &.pastelBlue_white { - background-color: ${theme.colors.pastel_blue}; - color: ${theme.colors.white}; - } - - &.pastelBlue_mainBlue { - background-color: ${theme.colors.pastel_blue}; - color: ${theme.colors.main_blue}; - } - - &.pastelBlue_gray2 { - background-color: ${theme.colors.pastel_blue}; - color: ${theme.colors.gray2}; - } - - &.pastelBlue_darkBlue { - background-color: ${theme.colors.pastel_blue}; - color: ${theme.colors.dark_blue}; - } - - &.white_mainBlue { - background-color: ${theme.colors.white}; - color: ${theme.colors.main_blue}; - } - - &.gray1_gray2 { - background-color: ${theme.colors.gray1}; - color: ${theme.colors.gray2}; - } - - &.lightRed_warningRed { - background: rgba(190, 33, 33, 0.1); - color: ${theme.colors.warning_red}; - } -`; - -export const EmptyBox = styled.div` - width: 100%; -`; diff --git a/components/Common/Button/BackBtn.tsx b/components/Common/Button/BackBtn.tsx deleted file mode 100644 index 48d96ddd..00000000 --- a/components/Common/Button/BackBtn.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { BackBtnIc } from '@/public/assets/icons'; -import Image from 'next/image'; -import { useRouter } from 'next/router'; - -export default function BackBtn() { - const router = useRouter(); - - return ( - 뒤로가기 router.back()} - /> - ); -} diff --git a/components/Common/Button/SiteBox.tsx b/components/Common/Button/SiteBox.tsx deleted file mode 100644 index b74fdfea..00000000 --- a/components/Common/Button/SiteBox.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import theme from '@/styles/theme'; -import styled from 'styled-components'; - -interface SiteBoxProps { - children: React.ReactNode; -} - -export default function SiteBox(props: SiteBoxProps) { - const { children } = props; - - return {children}; -} - -const Styled = { - Container: styled.button` - display: inline-block; - width: 6rem; - height: 6rem; - background-color: ${theme.colors.white}; - cursor: pointer; - margin: 0 1rem 1rem 0; - `, -}; diff --git a/components/Common/Button/SnsBox.tsx b/components/Common/Button/SnsBox.tsx deleted file mode 100644 index ebd387b2..00000000 --- a/components/Common/Button/SnsBox.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import styled from 'styled-components'; - -interface SNSBoxProps { - children: React.ReactNode; - handleClick?: () => void; -} - -export default function SNSBox(props: SNSBoxProps) { - const { children, handleClick } = props; - - return {children}; -} - -const Styled = { - Box: styled.div` - margin: 0 0.5rem 0; - cursor: pointer; - `, -}; diff --git a/components/Common/Button/index.tsx b/components/Common/Button/index.tsx deleted file mode 100644 index d4f1cb9e..00000000 --- a/components/Common/Button/index.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { ReactNode } from 'react'; -import { BoxTypes, ColorSystemType } from '@/types/common/box/boxStyleType'; -import styled from 'styled-components'; -import { StyledBox } from '../Box'; -import theme from '@/styles/theme'; - -interface ButtonProps { - boxType: BoxTypes; - colorSystem: ColorSystemType; - handleClickFn?: (parameter?: unknown) => void | unknown; - children: ReactNode; -} - -export default function Button(props: ButtonProps) { - const { boxType, colorSystem, handleClickFn, children } = props; - - return ( - - {children} - - ); -} - -const StyledBtnBox = styled(StyledBox)<{ width?: number }>` - display: flex; - justify-content: center; - align-items: center; - - width: 100%; - height: 5rem; - - ${theme.fonts.button18}; -`; diff --git a/components/Common/Calendar/Calendar.tsx b/components/Common/Calendar/Calendar.tsx deleted file mode 100644 index 4fa22a43..00000000 --- a/components/Common/Calendar/Calendar.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import Image from 'next/image'; -import { ko } from 'date-fns/locale'; -import styled from 'styled-components'; -import theme from '@/styles/theme'; -import { UseFormReturn } from 'react-hook-form'; -import { WishesDataInputType } from '@/types/wishesType'; -import { CalendarGreyIc, CalendarIc } from '@/public/assets/icons'; -import DatePicker from 'react-datepicker'; -import 'react-datepicker/dist/react-datepicker.css'; -import CalendarHeader from './CalendarHeader'; -import { getDate } from '@/utils/common/getDate'; -import InputBox from '../Box/InputBox'; - -interface CalendarProps { - date: Date; - methods: UseFormReturn; - readOnly?: boolean; -} - -export default function Calendar(props: CalendarProps) { - const { date, methods, readOnly } = props; - - const handleChangeDate = (selectedDate: Date) => { - methods.setValue('startDate', selectedDate); - methods.setValue('endDate', getDate(selectedDate, 7)); - }; - - return ( - - - ( - - )} - locale={ko} - dateFormat="yyyy.MM.dd" - selected={new Date(date)} - onChange={handleChangeDate} - minDate={new Date()} - selectsEnd - readOnly={readOnly} - className="react-datepicker__input-container" - /> - {/* */} - - 캘린더 아이콘 - - ); -} - -const Styled = { - Wrapper: styled.div` - display: flex; - justify-content: space-between; - align-items: center; - - width: 100%; - height: 100%; - - ${theme.fonts.body12}; - `, -}; diff --git a/components/Common/Calendar/CalendarHeader.tsx b/components/Common/Calendar/CalendarHeader.tsx deleted file mode 100644 index 87c878b9..00000000 --- a/components/Common/Calendar/CalendarHeader.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import styled from 'styled-components'; -import { getMonth, getYear } from 'date-fns'; -import { MONTHS } from '@/constant/dateList'; - - -interface CalendarHeaderProps { - date: Date; - changeYear: (year: number) => void; - changeMonth: (month: number) => void; -} - -export default function CalendarHeader(props: CalendarHeaderProps) { - const { date, changeYear, changeMonth } = props; - - // 연도 range - const years = Array.from( - { length: getYear(new Date()) + 6 - getYear(new Date()) }, - (_, index) => getYear(new Date()) + index, - ); - - return ( - - - 년   - - 월 - - ); -} - -const Styled = { - CalendarHeader: styled.div` - width: 100%; - `, -}; diff --git a/components/Common/CheckBox.tsx b/components/Common/CheckBox.tsx deleted file mode 100644 index 422e3e4d..00000000 --- a/components/Common/CheckBox.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { CheckedBoxIc, UnCheckedBoxIc } from '@/public/assets/icons'; -import theme from '@/styles/theme'; -import Image from 'next/image'; -import { PropsWithChildren } from 'react'; -import styled from 'styled-components'; - -interface CheckBoxProps { - checkBoxState: boolean; - checkBoxText: string; - handleClickFn: () => void; -} - -export default function CheckBox(props: PropsWithChildren) { - const { checkBoxState, checkBoxText, handleClickFn } = props; - return ( - - {checkBoxState ? ( - 체크박스 아이콘 - ) : ( - 체크박스 아이콘 - )} - {checkBoxText} - - ); -} - -const Styled = { - CheckBoxWrapper: styled.div` - display: flex; - align-items: center; - - height: 100%; - `, - - CheckBoxText: styled.p` - color: ${theme.colors.main_blue}; - ${theme.fonts.body14}; - - margin-left: 0.8rem; - `, -}; diff --git a/components/Common/Input/Input.tsx b/components/Common/Input/Input.tsx deleted file mode 100644 index 8c0d7f87..00000000 --- a/components/Common/Input/Input.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import theme from '@/styles/theme'; -import { WishesDataInputType } from '@/types/wishesType'; -import { PropsWithChildren } from 'react'; -import { FieldError, UseFormRegisterReturn } from 'react-hook-form'; -import styled from 'styled-components'; - -import { InputBoxTypes } from '@/types/common/box/boxStyleType'; -import { CakesDataInputType } from '@/types/common/input/cakesInput'; -import AlertTextBox from '../AlertTextBox'; -import InputBox from '../Box/InputBox'; - -interface InputProps { - width?: string; - boxType?: InputBoxTypes; - placeholder?: string; - readOnly?: boolean; - register: UseFormRegisterReturn; - errors?: FieldError; -} - -export default function Input(props: PropsWithChildren) { - const { width, boxType, placeholder, readOnly, register, errors, children } = props; - - return ( - <> - - - {children} - - {errors?.message && {errors.message}} - - ); -} - -export const StyledInput = styled.input` - width: 100%; - height: 100%; - - ${theme.fonts.body12}; - color: ${theme.colors.dark_blue}; -`; diff --git a/components/Common/Input/InputContainer.tsx b/components/Common/Input/InputContainer.tsx deleted file mode 100644 index b872c1d3..00000000 --- a/components/Common/Input/InputContainer.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { ReactNode } from 'react'; -import styled from 'styled-components'; -import theme from '@/styles/theme'; - -interface InputContainerProps { - title?: string; - children: ReactNode; -} - -export default function InputContainer(props: InputContainerProps) { - const { title, children } = props; - return ( - - {title && {title}} - {children} - - ); -} - -const Styled = { - Container: styled.section` - margin-bottom: 2.4rem; - `, - - InputTitle: styled.h4` - ${theme.fonts.body16}; - color: ${theme.colors.main_blue}; - - margin-bottom: 1.2rem; - `, -}; diff --git a/components/Common/Input/InputLength.tsx b/components/Common/Input/InputLength.tsx deleted file mode 100644 index 978d8b16..00000000 --- a/components/Common/Input/InputLength.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import theme from '@/styles/theme'; -import styled from 'styled-components'; - -interface InputLengthProps { - inputLength: number; - limitLength: number; -} - -export default function InputLength(props: InputLengthProps) { - const { inputLength, limitLength } = props; - - return ( - - {inputLength}/{limitLength} - - ); -} - -const Styled = { - Container: styled.div` - color: ${theme.colors.gray2}; - ${theme.fonts.body12}; - - padding-left: 1rem; - `, -}; diff --git a/components/Common/Input/InputLink.tsx b/components/Common/Input/InputLink.tsx deleted file mode 100644 index 76c9d044..00000000 --- a/components/Common/Input/InputLink.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import theme from '@/styles/theme'; -import styled from 'styled-components'; - -interface InputLinkProps { - children: React.ReactNode; -} - -export default function InputLink(props: InputLinkProps) { - const { children } = props; - - return {children}; -} - -const Styled = { - Container: styled.div` - width: 100%; - height: 4.8rem; - - display: flex; - align-items: center; - - padding: 1.4rem 1.2rem; - background-color: ${theme.colors.main_blue}; - border-radius: 1rem; - `, -}; diff --git a/components/Common/Input/TextareaBox.tsx b/components/Common/Input/TextareaBox.tsx deleted file mode 100644 index 7f3d16e6..00000000 --- a/components/Common/Input/TextareaBox.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import theme from '@/styles/theme'; -import styled from 'styled-components'; -import InputLength from './InputLength'; -import { EmptyBox } from '../Box'; -import { UseFormRegisterReturn } from 'react-hook-form'; -import { WishesDataInputType } from '@/types/wishesType'; -import ImageBox from '../Box/ImageBox'; -import { CakesDataInputType } from '@/types/common/input/cakesInput'; - -interface TextareaBoxProps { - placeholder?: string; - inputLength?: number; - limitLength?: number; - readOnly?: boolean; - register: UseFormRegisterReturn; -} - -export default function TextareaBox(props: TextareaBoxProps) { - const { placeholder, inputLength, limitLength, readOnly, register } = props; - - return ( - - - - - {limitLength && } - - - ); -} - -const Styled = { - InputLengthWrapper: styled.div` - display: flex; - justify-content: space-between; - `, - - Textarea: styled.textarea` - width: 100%; - height: 10.5rem; - - ${theme.fonts.body12}; - - resize: none; - `, -}; diff --git a/components/Common/Loading/Loading.tsx b/components/Common/Loading/Loading.tsx deleted file mode 100644 index 55d020d7..00000000 --- a/components/Common/Loading/Loading.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import theme from '@/styles/theme'; -import ClipLoader from 'react-spinners/ClipLoader'; -import styled from 'styled-components'; - -export default function Loading() { - - return ( - - - 로딩중입니다 - - ); -} - -const Styled = { - Container: styled.div` - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100vh; - `, - - Title: styled.h1` - ${theme.fonts.headline24_100}; - color: ${theme.colors.main_blue}; - margin: 2.4rem 0 3rem; - `, -}; - diff --git a/components/Common/Modal/BankInput.tsx b/components/Common/Modal/BankInput.tsx deleted file mode 100644 index 61b051d3..00000000 --- a/components/Common/Modal/BankInput.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import useModal from '@/hooks/common/useModal'; -import Modal from '.'; -import BankModal from './BankModal'; -import styled from 'styled-components'; - -import { UseFormReturn } from 'react-hook-form'; - -import { WishesDataInputType } from '@/types/wishesType'; -import { ArrowDownIc } from '@/public/assets/icons'; -import Image from 'next/image'; - -import theme from '@/styles/theme'; -import Input from '../Input/Input'; -import Button from '../Button'; -import { StyledBox } from '../Box'; -import AlertTextBox from '../AlertTextBox'; - -interface BankInputProps { - methods: UseFormReturn; -} - -export default function BankInput(props: BankInputProps) { - const { methods } = props; - const { isOpen, handleToggle } = useModal(); - - return ( - - - ※ 4회 이상 틀리면, 서비스 이용이 제한됩니다 - - - - - - - - - 더 보기 - - - - - - - - - - {/* 조건 기능 추가 */} - {/* {{true ? '정상 계좌입니다' : '존재하지 않는 계좌번호입니다'}} */} - - - {isOpen && ( - - - - )} - - ); -} - -const Styled = { - Container: styled.div` - margin-bottom: 2.4rem; - `, - - ItemWrapper: styled.div` - margin-top: 1.2rem; - `, - - InputWrapper: styled.div` - display: flex; - justify-content: space-between; - - gap: 0.6rem; - - width: 100%; - `, - - GuideBox: styled(StyledBox)` - width: 100%; - height: 4.4rem; - - padding: 1.2rem; - - ${theme.fonts.body14}; - line-height: 140%; - `, -}; diff --git a/components/Common/Modal/BankModal.tsx b/components/Common/Modal/BankModal.tsx deleted file mode 100644 index c8c1f306..00000000 --- a/components/Common/Modal/BankModal.tsx +++ /dev/null @@ -1,109 +0,0 @@ -import styled from 'styled-components'; -import Image from 'next/image'; -import theme from '@/styles/theme'; -import { BANK_LIST } from '@/constant/bankList'; -import { UseFormReturn } from 'react-hook-form'; -import { WishesDataInputType } from '@/types/wishesType'; - -interface BankModalProps { - handleToggle: () => void; - - methods: UseFormReturn; -} - -export default function BankModal(props: BankModalProps) { - const { handleToggle, methods } = props; - - const handleChangeBank = (input: string) => { - methods.setValue('bank', input); - handleToggle(); - }; - - return ( - - 은행을 선택해주세요. - - - {BANK_LIST.map((bank) => ( - handleChangeBank(bank.name)}> - - - {`${bank.name} - - - {bank.name} - - - ))} - - - ); -} - -const Styled = { - Modal: styled.section` - width: 33.1rem; - height: 60rem; - - background-color: ${theme.colors.pastel_blue}; - padding: 2.2rem 2.2rem 0 2.2rem; - border: 0.1rem solid ${theme.colors.main_blue}; - - border-radius: 2rem; - `, - - Title: styled.h2` - width: 100%; - ${theme.fonts.body16}; - `, - - BankContainer: styled.ul` - height: 91.4%; - overflow: auto; - ::-webkit-scrollbar { - display: none; - } - margin: 2rem 0 0; - display: grid; - grid-template-columns: 1fr 1fr 1fr; - grid-column-gap: 0.8rem; - grid-row-gap: 0.8rem; - `, - - BankItem: styled.div` - width: 9rem; - height: 6.6rem; - - padding: 1rem 0 0.5rem; - - background-color: ${theme.colors.white}; - border-radius: 1rem; - - cursor: pointer; - `, - - BanksWrapper: styled.li` - display: flex; - flex-direction: column; - - align-items: center; - `, - - BankName: styled.div` - ${theme.fonts.body12}; - text-align: center; - - margin: 0.5rem 0 0; - `, - - BankLogo: styled.div` - display: flex; - justify-content: center; - align-items: center; - - width: 2.6rem; - height: 2.6rem; - - margin: 0 auto; - `, -}; diff --git a/components/Common/Modal/DeleteModal.tsx b/components/Common/Modal/DeleteModal.tsx deleted file mode 100644 index 6753bc4a..00000000 --- a/components/Common/Modal/DeleteModal.tsx +++ /dev/null @@ -1,92 +0,0 @@ -import styled from 'styled-components'; -import Image from 'next/image'; - -import theme from '@/styles/theme'; -import { CloseSmallIc } from '@/public/assets/icons'; -import { MainCakeImg } from '@/public/assets/images'; -import Button from '../Button'; - -interface DeleteModalProps { - clickModal: () => void; - handleDelete: () => void; - linksCount: number; -} - -export default function DeleteModal(props: DeleteModalProps) { - const { clickModal, handleDelete, linksCount } = props; - - const handleDeleteConfirm = () => { - handleDelete(); - clickModal(); - }; - - return ( - - - 닫기 - - - - {'케이크'} - 총 {linksCount}개의 소원링크를 삭제합니다. - - - - - - - - ); -} - -const Styled = { - Container: styled.div` - width: 31.6rem; - height: 21.2rem; - background-color: ${theme.colors.pastel_blue}; - padding: 2rem; - border-radius: 1.6rem; - margin: 0 1rem 0; - - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - `, - - IconContainer: styled.header` - position: absolute; - top: 20%; - right: 5%; - transform: translate(-50%, -50%); - `, - - ContentContainer: styled.div` - margin: 1.5rem 0 1.5rem; - display: flex; - flex-direction: column; - align-items: center; - `, - - DeleteText: styled.div` - ${theme.fonts.body14}; - color: ${theme.colors.dark_blue}; - margin: 0.7rem 0 1rem; - `, - - ButtonContainer: styled.div` - display: flex; - align-items: center; - & > :not(:last-child) { - margin-right: 1rem; - } - `, -}; diff --git a/components/Common/Modal/GuideModal.tsx b/components/Common/Modal/GuideModal.tsx deleted file mode 100644 index 6a9f4305..00000000 --- a/components/Common/Modal/GuideModal.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import styled from 'styled-components'; -import Image from 'next/image'; -import { CloseWhiteIc } from '@/public/assets/icons'; -import { GuideContentImg, GuideBoxImg } from '@/public/assets/images'; - -interface GuideModalProps { - handleToggle: () => void; -} - -export default function GuideModal(props: GuideModalProps) { - const { handleToggle } = props; - - return ( - <> - - 닫기 - - - - - 서비스 가이드 설명 - - - - ); -} - -const Styled = { - Content: styled.div` - display: flex; - flex-direction: column; - - width: 33rem; - height: 61.4rem; - - border-radius: 1.6rem; - - padding: 4rem 1.5rem 2rem; - - background-image: url(${GuideBoxImg.src}); - background-size: contain; - background-repeat: no-repeat; - background-position: center; - `, - - ScrollContent: styled.div` - width: 100%; - height: 100%; - - overflow: scroll; - `, - - ButtonContainer: styled.div` - display: flex; - flex-direction: row-reverse; - - position: relative; - margin: 2.3rem 0rem 2.9rem; - `, -}; diff --git a/components/Common/Modal/MainShareModal.tsx b/components/Common/Modal/MainShareModal.tsx deleted file mode 100644 index a018e47f..00000000 --- a/components/Common/Modal/MainShareModal.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import theme from '@/styles/theme'; -import styled from 'styled-components'; -import ShareContent from './ShareContent'; -import { useGetMainProgressData } from '@/hooks/queries/wishes'; -import Image from 'next/image'; -import { MainCakeImg, MainWishChatImg } from '@/public/assets/images'; -import { CloseWhiteIc } from '@/public/assets/icons'; - -interface MainShareModalProps { - handleToggle: () => void; -} - -export default function MainShareModal(props: MainShareModalProps) { - const { handleToggle } = props; - const { progressData } = useGetMainProgressData(); - - return ( - <> - - 닫기 - - - - {/* {progressData.title} */} - {'화정이의 앙큼 벌스데이'} - 말풍선 - 메인 케이크 이미지 - - {'예상 케이크 금액\n'} - {`총 ${progressData?.price}원`} - - - - {'조물주보다\n생일선물주'} - - - - ); -} - -const Styled = { - ButtonContainer: styled.div` - display: flex; - flex-direction: row-reverse; - - position: relative; - margin: 2.3rem 0rem 2.9rem; - `, - - Container: styled.div` - display: flex; - flex-direction: column; - align-items: center; - - width: 31.6rem; - - background-color: ${theme.colors.pastel_blue}; - - border-radius: 1.6rem; - `, - - IconContainer: styled.div` - position: absolute; - top: 20%; - right: 5%; - transform: translate(-50%, -50%); - `, - - DivisionLine: styled.hr` - width: 31.2rem; - height: 0.1rem; - border-top: 0.3rem dashed ${theme.colors.main_blue}; - - margin: 2.2rem 0 2.7rem; - `, - - Title: styled.h2` - ${theme.fonts.headline20}; - color: ${theme.colors.main_blue}; - - margin: 3rem 0 1.6rem; - `, - - PriceTextWrapper: styled.div` - ${theme.fonts.headline24_130}; - color: ${theme.colors.main_blue}; - - white-space: pre-line; - text-align: center; - - margin-top: -0.4rem; - `, - PriceText: styled.span` - color: ${theme.colors.black}; - `, - - LogoText: styled.span` - ${theme.fonts.headline20}; - color: ${theme.colors.main_blue}; - - line-height: 100%; - - white-space: pre-line; - text-align: center; - `, -}; diff --git a/components/Common/Modal/ShareContent.tsx b/components/Common/Modal/ShareContent.tsx deleted file mode 100644 index a1deae9f..00000000 --- a/components/Common/Modal/ShareContent.tsx +++ /dev/null @@ -1,100 +0,0 @@ -import { SNS_LIST } from '@/constant/snsList'; -import { LinkCopyIc } from '@/public/assets/icons'; -import theme from '@/styles/theme'; -import Image from 'next/image'; -import styled from 'styled-components'; - -import { useEffect, useState } from 'react'; -import useKakaoShare from '@/hooks/common/useKakaoShare'; -import { useRecoilValue } from 'recoil'; -import { LoginUserInfo } from '@/recoil/auth/loginUserInfo'; -import SNSBox from '../Button/SnsBox'; -import InputLink from '../Input/InputLink'; - -export default function ShareContent() { - const [wishesLink, setWishesLink] = useState(''); - const loginUserInfo = useRecoilValue(LoginUserInfo); - - useEffect(() => { - setWishesLink(`https://sunmulzu.store/wishes/${loginUserInfo.wishesId}`); - }, []); - - const handleShareSNS = (name: string) => { - const link = encodeURIComponent(wishesLink); - const text = encodeURIComponent( - `${loginUserInfo.nickName}님의 생일선물을 고민하고 있다면?\n고민할 필요없이 이 귀여운 케이크를 선물해 ${loginUserInfo.nickName}님의 생일 펀딩에 참여해보세요! \n`, - ); - const hashtag = encodeURIComponent(`#조물주보다생일선물주`); - - if (name === 'KakaoTalk') { - useKakaoShare(loginUserInfo.nickName, wishesLink); - } else if (name === 'FaceBook') { - if (name === 'FaceBook') { - window.open(`http://www.facebook.com/sharer/sharer.php?u=${link}&hashtag=${hashtag}`); - } - } else if (name === 'Twitter') { - window.open(`https://twitter.com/intent/tweet?text=${text + link}`); - } - }; - - const handleTextCopy = async (text: string) => { - const isClipboardSupported = () => navigator?.clipboard != null; - - try { - if (isClipboardSupported()) { - await navigator.clipboard.writeText(text); - } else { - const textArea = document.createElement('textarea'); - textArea.value = text; - document.body.appendChild(textArea); - textArea.select(); - - document.execCommand('copy'); - document.body.removeChild(textArea); - } - alert('링크가 복사되었습니다.'); - } catch (error) { - alert('공유하기가 지원되지 않는 환경입니다.'); - } - }; - - return ( - - - {SNS_LIST.map((sns) => ( - handleShareSNS(sns.name)}> - {`${sns.name}`} - - ))} - - - - - 링크 복사 handleTextCopy(wishesLink)} /> - - - ); -} - -const Styled = { - ContentWrapper: styled.div` - width: 100%; - height: 100%; - - padding: 2.2rem 1.5rem 1.6rem; - `, - - SNSContainer: styled.div` - margin: 0 0 1.5rem; - display: flex; - justify-content: center; - `, - - InputText: styled.input` - ${theme.fonts.body12}; - color: ${theme.colors.white}; - width: 100%; - `, - - -}; diff --git a/components/Common/Modal/ShareModal.tsx b/components/Common/Modal/ShareModal.tsx deleted file mode 100644 index 9bf58fb1..00000000 --- a/components/Common/Modal/ShareModal.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import styled from 'styled-components'; -import Image from 'next/image'; -import theme from '@/styles/theme'; -import { CloseSmallIc } from '@/public/assets/icons'; -import ShareContent from './ShareContent'; - -interface ShareModalProps { - handleToggle: () => void; -} - -export default function ShareModal(props: ShareModalProps) { - const { handleToggle } = props; - - return ( - - - 닫기 - - - - - ); -} - -const Styled = { - Container: styled.div` - width: 31.6rem; - height: 14.3rem; - background-color: ${theme.colors.pastel_blue}; - padding: 2.2rem 1.5rem 1.6rem; - border-radius: 1.6rem; - - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - `, - - IconContainer: styled.div` - position: absolute; - top: 20%; - right: 5%; - transform: translate(-50%, -50%); - `, -}; diff --git a/components/Common/Modal/index.tsx b/components/Common/Modal/index.tsx deleted file mode 100644 index f7968f63..00000000 --- a/components/Common/Modal/index.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { PropsWithChildren } from 'react'; -import styled from 'styled-components'; - -interface ModalProps { - isOpen: boolean; - handleToggle: () => void; - bgNone?: boolean; -} - -export default function Modal(props: PropsWithChildren) { - const { isOpen, handleToggle, bgNone, children } = props; - return ( - <> - {isOpen && ( - - e.stopPropagation()}> - {children} - - - )} - - ); -} - -const Styled = { - ModalOverlay: styled.div<{ bgNone?: boolean }>` - display: flex; - justify-content: center; - align-items: center; - - z-index: 9999; - width: 100%; - height: 100svh; - - position: fixed; - top: 0; - left: 0; - background: ${(props) => (props.bgNone ? 'transparent' : 'rgba(0, 0, 0, 0.7)')}; - display: flex; - justify-content: center; - align-items: center; - `, - - ModalContainer: styled.div``, -}; diff --git a/components/Common/ProgressBar.tsx b/components/Common/ProgressBar.tsx deleted file mode 100644 index 6504d737..00000000 --- a/components/Common/ProgressBar.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import theme from '@/styles/theme'; -import styled, { css } from 'styled-components'; - -interface ProgressBarProps { - percent: number; - vertical: boolean; -} - -export default function ProgressBar(props: ProgressBarProps) { - const { percent, vertical } = props; - - return ( - <> - - - - - ); -} - -const Styled = { - Container: styled.div<{ vertical: boolean }>` - width: 27rem; - height: 1rem; - - background-color: ${theme.colors.pastel_blue}; - - border-bottom-right-radius: 5rem; - border-bottom-left-radius: 5rem; - border-top-right-radius: 5rem; - border-top-left-radius: 5rem; - - ${(props) => - props.vertical && - css` - -ms-transform: rotate(-90deg); /* IE 9 */ - -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */ - transform: rotate(-90deg); - `} - `, - Progress: styled.div<{ percent: number }>` - width: ${(props) => (props.percent > 100 ? 100 : props.percent)}%; - height: 100%; - - background-color: ${theme.colors.main_blue}; - - border-bottom-right-radius: 5rem; - border-bottom-left-radius: 5rem; - border-top-right-radius: 5rem; - border-top-left-radius: 5rem; - `, -}; diff --git a/components/Common/Select/PaymentItemSelect.tsx b/components/Common/Select/PaymentItemSelect.tsx deleted file mode 100644 index 3dd8aafc..00000000 --- a/components/Common/Select/PaymentItemSelect.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import styled from 'styled-components'; -import { StyledBox } from '../Box'; -import theme from '@/styles/theme'; -import Image from 'next/image'; -import { BankListType } from '@/types/bankListType'; - -interface PaymentItemSelectProps { - payment: BankListType; - handleClickFn: (payment: BankListType) => void; - selectedPayment: BankListType | undefined; -} - -export default function PaymentItemSelect(props: PaymentItemSelectProps) { - const { payment, handleClickFn, selectedPayment } = props; - - const isSelected = (): boolean => { - return payment === selectedPayment; - }; - - return ( - - handleClickFn(payment)} isSelected={isSelected()}> - {isSelected() && } - - - - - 결제 수단 이미지 - - {payment.name} - - - ); -} - -const Styled = { - PaymentItem: styled(StyledBox)` - display: flex; - align-items: center; - gap: 0.8rem; - - width: 100%; - height: 6rem; - - background-color: ${theme.colors.pastel_blue}; - - border-radius: 1rem; - padding: 1rem; - `, - - SelectIcon: styled.div<{ isSelected: boolean }>` - display: flex; - justify-content: center; - align-items: center; - - width: 1.6rem; - height: 1.6rem; - - border-radius: 50%; - background-color: ${theme.colors.white}; - border: 1px solid ${(props) => (props.isSelected ? theme.colors.main_blue : theme.colors.gray2)}; - `, - - SelectInnerIcon: styled.div` - width: 0.9rem; - height: 0.9rem; - - border-radius: 50%; - background-color: ${theme.colors.main_blue}; - `, - - BankItem: styled.div` - width: 3rem; - height: 3rem; - - background-color: ${theme.colors.white}; - border-radius: 0.4rem; - - overflow: hidden; - `, - - BankItemWrapper: styled.div` - display: flex; - align-items: center; - - gap: 1.2rem; - - ${theme.fonts.body14}; - color: ${theme.colors.dark_blue}; - `, -}; diff --git a/components/Common/Select/index.tsx b/components/Common/Select/index.tsx deleted file mode 100644 index 9aeca538..00000000 --- a/components/Common/Select/index.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export default function Select() { - return <>; -} diff --git a/components/Common/UploadTypeToggleBtn.tsx b/components/Common/UploadTypeToggleBtn.tsx deleted file mode 100644 index 7e7bdd00..00000000 --- a/components/Common/UploadTypeToggleBtn.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import theme, { ColorsTypes } from '@/styles/theme'; -import styled from 'styled-components'; - -interface UploadTypeToggleBtnProps { - isLinkLoadType: boolean; - handleLoadTypeToggle: (state: boolean) => void; -} - -export default function UploadTypeToggleBtn(props: UploadTypeToggleBtnProps) { - const { isLinkLoadType, handleLoadTypeToggle } = props; - - return ( - - handleLoadTypeToggle(true)} - fontColor={isLinkLoadType ? 'white' : 'main_blue'} - bgColor={isLinkLoadType ? 'main_blue' : 'pastel_blue'} - > - 선물 링크 불러오기 - - handleLoadTypeToggle(false)} - fontColor={isLinkLoadType ? 'main_blue' : 'white'} - bgColor={isLinkLoadType ? 'pastel_blue' : 'main_blue'} - > - 선물 직접 등록하기 - - - ); -} - -const Styled = { - ButtonContainer: styled.div` - display: flex; - justify-content: space-between; - align-items: center; - - width: 100%; - height: 5.8rem; - - margin-bottom: 2rem; - - border-radius: 4.9rem; - background-color: ${theme.colors.pastel_blue}; - padding: 0.5rem; - `, - - ToggleButton: styled.div<{ fontColor: keyof ColorsTypes; bgColor: keyof ColorsTypes }>` - display: flex; - justify-content: center; - align-items: center; - - ${theme.fonts.body16}; - color: ${(props) => theme.colors[props.fontColor]}; - - width: calc(100% / 2); - height: 4.8rem; - - border-radius: 4rem; - background-color: ${(props) => theme.colors[props.bgColor]}; - - cursor: pointer; - `, -}; diff --git a/components/Common/VerticalProgressBar.tsx b/components/Common/VerticalProgressBar.tsx deleted file mode 100644 index 3c7d1f01..00000000 --- a/components/Common/VerticalProgressBar.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import theme from '@/styles/theme'; -import styled, { css } from 'styled-components'; - -interface ProgressBarProps { - percent: number | undefined; -} - -export default function VerticalProgressBar(props: ProgressBarProps) { - const { percent } = props; - - return ( - <> - - {percent}% - - - - - - - - ); -} - -const Styled = { - ProgressBox: styled.div` - height: 27rem; - display: flex; - flex-direction: column; - justify-content: right; - `, - - PercentWrapper: styled.div<{ percent: number }>` - height: ${(props) => props.percent}%; - - ${(props) => - props.percent > 3 && - css` - margin-top: -2rem; - `} - `, - - Percent: styled.div` - ${theme.fonts.button16}; - color: ${theme.colors.main_blue}; - margin-top: auto; - margin-right: 0.5rem; - `, - - BarContainer: styled.div` - width: 1rem; - height: 27rem; - - background-color: ${theme.colors.pastel_blue}; - - border-bottom-right-radius: 5rem; - border-bottom-left-radius: 5rem; - border-top-right-radius: 5rem; - border-top-left-radius: 5rem; - - -ms-transform: rotate(180deg); /* IE 9 */ - -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */ - transform: rotate(180deg); - `, - - Progress: styled.div<{ percent: number }>` - height: ${(props) => props.percent}%; - max-height: 100%; - width: 100%; - - background-color: ${theme.colors.main_blue}; - - border-bottom-right-radius: 5rem; - border-bottom-left-radius: 5rem; - border-top-right-radius: 5rem; - border-top-left-radius: 5rem; - `, -}; diff --git a/components/Common/mainHeader.tsx b/components/Common/mainHeader.tsx deleted file mode 100644 index 3613b52c..00000000 --- a/components/Common/mainHeader.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import styled from 'styled-components'; - -interface MainHeaderProps { - title: React.ReactNode; - side?: React.ReactNode; - children?: React.ReactNode; -} - -export default function MainHeader(props: MainHeaderProps) { - const { title, side } = props; - - - return ( - <> - - {title} - {side} - - - - ); -} - -const Styled = { - Container: styled.div` - display: flex; - margin: 2rem 0 0rem; - `, - - SideContainer: styled.div` - margin-left: auto; -`, -}; diff --git a/components/Common/mainView.tsx b/components/Common/mainView.tsx deleted file mode 100644 index 639a4b3e..00000000 --- a/components/Common/mainView.tsx +++ /dev/null @@ -1,89 +0,0 @@ -import styled from 'styled-components'; -import Image from 'next/image'; -import theme from '@/styles/theme'; -import { KakaoLoginIc, WideArrowDownIc } from '@/public/assets/icons'; -import { MainLoginImg } from '@/public/assets/images'; -import GuideModal from '@/components/Common/Modal/GuideModal'; -import Modal from '@/components/Common/Modal'; -import useModal from '@/hooks/common/useModal'; - -interface MainViewProps { - text: string; -} - -export default function MainView(props: MainViewProps) { - const { text } = props; - const { isOpen, handleToggle } = useModal(); - - return ( - <> - {isOpen && ( - - - - )} - - - - 조물주보다 -
- 생일선물주 - - - 사용 설명 케이크 이미지 - - {text} - - - - ); -} - -const Styled = { - Title: styled.div` - ${theme.fonts.title56}; - color: ${theme.colors.main_blue}; - margin-bottom: 2.8rem; - display: flex; - justify-content: center; - white-space: pre-line; - `, - - ImageContainer: styled.div` - display: flex; - flex-direction: column; - align-items: center; - - width: 100%; - - margin-top: 8.1rem; - `, - - About: styled.div` - display: flex; - justify-content: center; - - margin: 1rem 0 2.1rem; - - ${theme.fonts.headline24_100}; - color: ${theme.colors.main_blue}; - - text-align: center; - white-space: pre-line; - `, - - WideArrowDownIcon: styled((props) => 아래화살표)` - margin-bottom: 2.4rem; - `, - - KakaoLoginIcon: styled((props) => ( - 카카오로그인아이콘 - ))` - margin-right: 1.3rem; - `, -}; diff --git a/components/Header.tsx b/components/Header.tsx deleted file mode 100644 index fa21afdf..00000000 --- a/components/Header.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { ReactNode } from 'react'; -import styled from 'styled-components'; -import BackBtn from './Common/Button/BackBtn'; - -interface HeaderProps { - width: string; - children?: ReactNode; -} - -export default function Header(props: HeaderProps) { - const { width, children } = props; - - return ( - - - {children} - - ); -} - -const Styled = { - Container: styled.header<{ width: string }>` - display: flex; - justify-content: space-between; - align-items: center; - - width: ${(props) => props.width}; - height: 3rem; - - padding: 1rem 1.5rem; - margin-top: 1.6rem; - `, -}; diff --git a/components/Layout/EmptyLayout.tsx b/components/Layout/EmptyLayout.tsx deleted file mode 100644 index c1d11a63..00000000 --- a/components/Layout/EmptyLayout.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { PropsWithChildren } from 'react'; -import styled from 'styled-components'; - -export default function EmptyLayout(props: PropsWithChildren) { - const { children } = props; - return {children}; -} - -const Container = styled.main` - width: 37.5rem; - height: 100%; - - padding: 2.2rem 2.2rem 0 2.2rem; -`; diff --git a/components/Layout/HeaderLayout.tsx b/components/Layout/HeaderLayout.tsx deleted file mode 100644 index 54e840d6..00000000 --- a/components/Layout/HeaderLayout.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { PropsWithChildren } from 'react'; - -import styled from 'styled-components'; -import Header from '../Header'; - -export default function HeaderLayout(props: PropsWithChildren) { - const { children } = props; - const WIDTH = '37.5rem'; - - return ( - <> -
- {children} - - ); -} - -const Container = styled.main<{ width: string }>` - width: ${(props) => props.width}; - height: 100%; - - padding: 0 2.2rem; -`; diff --git a/components/Layout/index.tsx b/components/Layout/index.tsx deleted file mode 100644 index 7c5523b3..00000000 --- a/components/Layout/index.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { PropsWithChildren } from 'react'; -import EmptyLayout from './EmptyLayout'; -import HeaderLayout from './HeaderLayout'; - -const layouts = { - header: HeaderLayout, - empty: EmptyLayout, -}; - -interface LayoutProps { - layoutKey: keyof typeof layouts; -} - -export default function Layout(props: PropsWithChildren) { - const { layoutKey, children } = props; - - const LayoutContainer = layouts[layoutKey]; - - return {children}; -} diff --git a/components/Login/Rredirect.tsx b/components/Login/Rredirect.tsx deleted file mode 100644 index dea878e5..00000000 --- a/components/Login/Rredirect.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { useRouter } from 'next/router'; -import { useEffect } from 'react'; -import Loading from '../Common/Loading/Loading'; -import { useAuthKakao } from '@/hooks/queries/auth'; - -export default function Redirect() { - const router = useRouter(); - - const { accessToken, refreshToken, nickName } = useAuthKakao(); - - useEffect(() => { - if (accessToken && refreshToken && nickName) { - router.push('/main'); - } - }, [accessToken, refreshToken, nickName]); - - return ; -} diff --git a/components/Login/index.tsx b/components/Login/index.tsx deleted file mode 100644 index dc975bbf..00000000 --- a/components/Login/index.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import styled from 'styled-components'; -import Image from 'next/image'; -import { KakaoLoginIc } from '@/public/assets/icons'; -import MainView from '../Common/mainView'; -import Button from '../Common/Button'; - -export default function LoginContainer() { - const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${process.env.NEXT_PUBLIC_KAKAO_RESTAPI_KEY}&redirect_uri=${process.env.NEXT_PUBLIC_KAKAO_REDIRECT_URI}`; - const handleKaKaoLogin = () => { - window.location.href = KAKAO_AUTH_URL; - }; - return ( - - - - - - - - ); -} - -const Styled = { - Container: styled.div` - display: flex; - flex-direction: column; - align-items: center; - `, - - ButtonWrapper: styled.div` - display: flex; - justify-content: center; - - width: 100%; - - margin-bottom: 10.4rem; - `, - - ButtonContentWrapper: styled.div` - display: flex; - justify-content: center; - align-items: center; - - width: 100%; - - cursor: pointer; - `, - - KakaoLoginIcon: styled((props) => ( - 카카오로그인아이콘 - ))` - margin-right: 1.3rem; - `, -}; diff --git a/components/Main/MainBtn.tsx b/components/Main/MainBtn.tsx deleted file mode 100644 index cee73259..00000000 --- a/components/Main/MainBtn.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import router from 'next/router'; -import Button from '../Common/Button'; -import styled from 'styled-components'; -import useModal from '@/hooks/common/useModal'; -import Modal from '../Common/Modal'; -import { useGetMainProgressData } from '@/hooks/queries/wishes'; -import MainShareModal from '../Common/Modal/MainShareModal'; - -export default function MainBtn() { - const { progressData } = useGetMainProgressData(); - const progressStatus = progressData?.status; - - const { isOpen, handleToggle } = useModal(); - - const handleMoveWishesPage = () => { - router.push('/wishes'); - }; - - return ( - - {progressStatus ? ( - progressStatus !== 'END' && ( - - ) - ) : ( - - )} - {isOpen && ( - - - - )} - - ); -} - -const Styled = { - ButtonWrapper: styled.div` - margin-top: 7.1rem; - margin: 7.1rem 0 10.4rem; - `, -}; diff --git a/components/Main/MainCenterContent.tsx b/components/Main/MainCenterContent.tsx deleted file mode 100644 index 379dee26..00000000 --- a/components/Main/MainCenterContent.tsx +++ /dev/null @@ -1,107 +0,0 @@ -import Image from 'next/image'; -import styled from 'styled-components'; -import VerticalProgressBar from '../Common/VerticalProgressBar'; -import { MainCakeImg, MainChatImg, MainEndChatImg, MainWishChatImg } from '@/public/assets/images'; -import theme from '@/styles/theme'; -import { useGetMainProgressData } from '@/hooks/queries/wishes'; - -export default function MainCenterContent() { - const { progressData } = useGetMainProgressData(); - - const ChatImg = () => { - if (!progressData) { - return MainChatImg; - } - - if (progressData?.status === 'BEFORE' || progressData?.status === 'WHILE') { - return MainWishChatImg; - } - - if (progressData?.status === 'END') { - return MainEndChatImg; - } - }; - - return ( - - - - 말풍선 - - 메인 케이크 이미지 - - - - - - - - {progressData === undefined || progressData.status === 'BEFORE' ? ( - <> - {'모인 케이크\n'} - 총 ???개 - - ) : ( - <> - {'예상 케이크 금액 >\n'} - {`총 ${progressData.price}원`} - - )} - - - ); -} - -const Styled = { - Container: styled.div` - display: flex; - flex-direction: column; - align-items: center; - `, - - ImageWrapper: styled.div` - display: flex; - flex-direction: column; - - width: 100%; - `, - - CakeImageWrapper: styled.div` - display: flex; - justify-content: center; - width: 100%; - margin-top: -1rem; - margin-left: 2rem; - `, - - CenterContentWrapper: styled.div` - display: flex; - justify-content: space-between; - - width: 100%; - - margin-top: 10rem; - padding-right: 2.2rem; - `, - - CakeTextWrapper: styled.div` - text-align: center; - - ${theme.fonts.headline24_130}; - color: ${theme.colors.main_blue}; - - margin-top: -5.8rem; - - white-space: pre-line; - `, - - CakeText: styled.span` - color: ${theme.colors.black}; - `, - - ProgressBarWrapper: styled.div` - display: flex; - - margin-top: 3.4rem; - `, -}; diff --git a/components/Main/MainTopContent.tsx b/components/Main/MainTopContent.tsx deleted file mode 100644 index 03d6474c..00000000 --- a/components/Main/MainTopContent.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import { useGetMainProgressData } from '@/hooks/queries/wishes'; -import { SideBarIc } from '@/public/assets/icons'; -import { LoginUserInfo } from '@/recoil/auth/loginUserInfo'; -import theme from '@/styles/theme'; -import Image from 'next/image'; -import router from 'next/router'; -import { useEffect, useState } from 'react'; -import { useRecoilValue } from 'recoil'; -import styled from 'styled-components'; - -export default function MainTopContent() { - const { progressData } = useGetMainProgressData(); - const loginUserInfo = useRecoilValue(LoginUserInfo); - const [nickName, setNickName] = useState(''); - - const handleMoveToMypage = () => { - router.push('/mypage'); - }; - - const getDayText = () => { - if (!progressData) return 'D-?'; - - if (progressData?.dayCount === 0) { - return 'D-Day'; - } else { - return `D-${progressData?.dayCount}`; - } - }; - - useEffect(() => { - setNickName(loginUserInfo.nickName); - }, [loginUserInfo]); - - return ( - - - {progressData ? ( - progressData.status === 'BEFORE' ? ( - <> - {`${nickName}님\n`} - {`${progressData.dayCount}일 뒤 `} - {`부터 소원링크를\n공유할 수 있어요!`} - - ) : ( - //소원 진행 중 - <> - {`${nickName}님에게\n`} - {`${progressData.cakeCount}개 `} - {`의 조각 케이크가\n도착했어요!`} - - ) - ) : ( - <> - {`${nickName}님\n`} - {'소원 링크 '} - {`를 생성하고\n케이크를 모아봐요!`} - - )} - - - - 설정 - {getDayText()} - - - ); -} - -const Styled = { - Container: styled.header` - display: flex; - justify-content: space-between; - - margin-top: 2rem; - `, - - TextWrapper: styled.div` - ${theme.fonts.headline24_130}; - color: ${theme.colors.black}; - white-space: pre-line; - `, - - Text: styled.span` - color: ${theme.colors.main_blue}; - `, - - RigthSideWrapper: styled.div` - display: flex; - flex-direction: column; - - gap: 2.3rem; - `, - - DayText: styled.span` - ${theme.fonts.headline20}; - color: ${theme.colors.main_blue}; - - &.BEFORE { - color: ${theme.colors.gray2}; - } - - &.END { - color: ${theme.colors.warning_red}; - } - `, -}; diff --git a/components/Main/index.tsx b/components/Main/index.tsx deleted file mode 100644 index f8d5c5c2..00000000 --- a/components/Main/index.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import MainTopContent from './MainTopContent'; - -import MainBtn from './MainBtn'; -import MainCenterContent from './MainCenterContent'; - -export default function MainContainer() { - return ( - <> - - - - - ); -} diff --git a/components/Mypage/EditWishes/index.tsx b/components/Mypage/EditWishes/index.tsx deleted file mode 100644 index 8dcd4b62..00000000 --- a/components/Mypage/EditWishes/index.tsx +++ /dev/null @@ -1,206 +0,0 @@ -import Button from '@/components/Common/Button'; -import Calendar from '@/components/Common/Calendar/Calendar'; -import InputContainer from '@/components/Common/Input/InputContainer'; -import TextareaBox from '@/components/Common/Input/TextareaBox'; -import UploadTypeToggleBtn from '@/components/Common/UploadTypeToggleBtn'; -import ItemLink from '@/components/Wishes/WishesForm/ItemLink'; -import theme from '@/styles/theme'; -import styled from 'styled-components'; -import { useEffect, useState } from 'react'; -import { convertMoneyText } from '@/utils/common/convertMoneyText'; -import UploadPresent from '@/components/Wishes/WishesForm/UploadPresent'; -import Input from '@/components/Common/Input/Input'; -import useUploadItemInfo from '@/hooks/wishes/useUploadItemInfo'; -import { useForm } from 'react-hook-form'; -import { WishesDataInputType } from '@/types/wishesType'; -import BankInput from '@/components/Common/Modal/BankInput'; -import { - useGetMainProgressData, - useGetWishesProgress, - usePatchWishes, -} from '@/hooks/queries/wishes'; -import SiteList from '@/components/Wishes/WishesForm/SiteList'; -import { usePatchUserAccount } from '@/hooks/queries/user'; -import { LIMIT_TEXT } from '@/constant/limitText'; -import { getDate } from '@/utils/common/getDate'; - -export default function EditWishesContainer() { - const { imageFile, preSignedImageUrl, uploadImageFile } = useUploadItemInfo(); - const [isLinkLoadType, setIsLinkLoadType] = useState(true); //false : 링크 불러오기 true : 직접 - - const methods = useForm({ - defaultValues: { - linkURL: '', - imageUrl: '', - price: '', - initial: '', - title: '', - hint: '', - startDate: new Date(), - endDate: getDate(new Date(), 7), - phone: '', - name: '', - bank: '', - account: '', - }, - }); - - const { wishesProgressData } = useGetWishesProgress(); - const { progressData } = useGetMainProgressData(); - - const { patchUserAccountData } = usePatchUserAccount(methods); - const { patchWishesData } = usePatchWishes(methods); - - useEffect(() => { - if (wishesProgressData) { - methods.setValue('account', wishesProgressData?.accountInfo.account); - methods.setValue('name', wishesProgressData?.accountInfo.name); - methods.setValue('bank', wishesProgressData?.accountInfo.bank); - methods.setValue('phone', wishesProgressData.phone); - - methods.setValue('title', wishesProgressData.title); - methods.setValue('imageUrl', wishesProgressData.imageUrl); - methods.setValue('hint', wishesProgressData.hint); - methods.setValue('price', wishesProgressData.price); - methods.setValue('initial', wishesProgressData.initial); - - methods.setValue('startDate', new Date(wishesProgressData.startDate)); - methods.setValue('endDate', new Date(wishesProgressData.endDate)); - } - }, [wishesProgressData]); - - const handleLoadTypeToggle = (state: boolean) => { - setIsLinkLoadType(state); - }; - - return ( - <> - - 소원링크 정보 수정하기 - - - - - {isLinkLoadType ? ( - - - - - ) : ( - <> - - - )} - - - - - - - - - - - - {/* 시작일 */} - - {/* 종료일 */} - - - - - {/* BankInfo */} - - - - - - - - - - - - - - - - - ); -} - -const Styled = { - Title: styled.h1` - ${theme.fonts.headline24_100}; - color: ${theme.colors.black}; - - margin-left: 1rem; - `, - - TitleWrapper: styled.div` - display: flex; - - height: 2.4rem; - - margin: 2.4rem 0 2rem; - `, - - CalendarWrapper: styled.div` - display: flex; - justify-content: space-between; - `, - - UploadImageBox: styled.div` - display: flex; - justify-content: center; - align-items: center; - - width: 100%; - height: 100%; - - cursor: pointer; - `, - - Lable: styled.label` - cursor: pointer; - `, - - FileInput: styled.input` - display: none; - `, - - ButtonWrapper: styled.div` - display: flex; - justify-content: space-between; - - width: 100%; - - margin-bottom: 4.6rem; - `, -}; diff --git a/components/Mypage/ItemBox.tsx b/components/Mypage/ItemBox.tsx deleted file mode 100644 index a9b279d9..00000000 --- a/components/Mypage/ItemBox.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import theme from '@/styles/theme'; -import styled from 'styled-components'; -import { PropsWithChildren } from 'react'; -import { StyledBox } from '../Common/Box'; -import { ColorSystemType } from '@/types/common/box/boxStyleType'; - -interface ItemBoxProps { - handleClickFn?: () => void; - colorSystem: ColorSystemType; -} - -export default function ItemBox(props: PropsWithChildren) { - const { handleClickFn, colorSystem, children } = props; - - return ( -
  • - - {children} - {'>'} - -
    • - ); -} - -const MypageItemBox = styled(StyledBox)` - display: flex; - justify-content: space-between; - align-items: center; - - width: 100%; - height: 6rem; - - ${theme.fonts.button18}; - - padding: 0 2rem; -`; diff --git a/components/Mypage/Letters/CakeListButton.tsx b/components/Mypage/Letters/CakeListButton.tsx deleted file mode 100644 index 05f7d60a..00000000 --- a/components/Mypage/Letters/CakeListButton.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import theme from '@/styles/theme'; -import styled from 'styled-components'; -import Image, { StaticImageData } from 'next/image'; - -interface CakeListButtonProps { - image?: string | StaticImageData; - backgroundColor: string; - fontColor: string; - fonts: string; - handleClick?: () => void; - cakeName?: string; - cakeNum?: number; -} - -export default function CakeListButton(props: CakeListButtonProps) { - const { image, backgroundColor, fonts, fontColor, handleClick, cakeName, cakeNum } = props; - return ( - - {image && 케이크 이미지} - {/* */} - - {cakeName} X {cakeNum}개 - - - ); -} - -const Styled = { - Container: styled.button<{ backgroundColor: string }>` - width: 100%; - height: 6rem; - - display: flex; - justify-content: left; - align-items: center; - - padding: 0 2rem 0; - border-radius: 1rem; - - color: ${theme.colors.gray4}; - background-color: ${(props) => props.backgroundColor}; - border-color: transparent; - margin: 0 0 1rem; - `, - - // TextContainer: styled.div<{ fonts: string; fontColor: string }>` - // padding: 0.2rem 0.5rem 0 1rem; - // ${(props) => props.fonts} - - // `, - - TextContainer: styled.div<{ fontColor: string }>` - padding: 0.2rem 0.5rem 0 1rem; - `, - - NumText: styled.span` - color: ${theme.colors.main_blue}; - `, -}; diff --git a/components/Mypage/Letters/LettersMain.tsx b/components/Mypage/Letters/LettersMain.tsx deleted file mode 100644 index b0912ca5..00000000 --- a/components/Mypage/Letters/LettersMain.tsx +++ /dev/null @@ -1,110 +0,0 @@ -import theme from '@/styles/theme'; -import styled from 'styled-components'; -import { useRouter } from 'next/router'; -import CakeListButton from './CakeListButton'; -import { useRecoilValue } from 'recoil'; -import { LoginUserInfo } from '@/recoil/auth/loginUserInfo'; -import { useEffect, useState } from 'react'; -import MainHeader from '@/components/Common/mainHeader'; -import { CAKE_LIST } from '@/constant/cakeList'; -import { useGetCakesResult } from '@/hooks/queries/cakes'; - -export default function LettersMainContainer() { - const [wishId, setWishId] = useState(''); - const router = useRouter(); - - useEffect(() => { - if (!router.isReady) return; - setWishId(router.query.id); - }, [router.isReady]); - - // nickname - const [nickName, setNicknameState] = useState(''); - const loginUserInfo = useRecoilValue(LoginUserInfo); - - useEffect(() => { - setNicknameState(loginUserInfo.nickName); - }, [loginUserInfo]); - - // cake 개수, 합 - const { cakesCount, total } = useGetCakesResult(wishId); - - const getCakeNum = (cakeId: number, cakesCount: any[]): number => { - if (!cakesCount) { - return 0; - } - - const cake = cakesCount.find((cake) => cake.cakeId === cakeId); - return cake ? cake.count : 0; - }; - - const handleMoveToLetters = (cakeId: number) => { - const cake = CAKE_LIST.find((cake) => cake.cakeNumber === cakeId); - - if (cake) { - router.push({ - pathname: `/mypage/letters/${wishId}/${cakeId}`, - query: { - cake: getCakeNum(cake.cakeNumber, cakesCount), - }, - }); - } - }; - - const title = ( - - {nickName}님에게 도착한 -
    - {total}개의 조각 케이크 -
    - 편지 열어보기! -     - ); - - return ( - <> - - - - - {CAKE_LIST?.map((cake) => ( - handleMoveToLetters(cake.cakeNumber) - : undefined - } - backgroundColor={theme.colors.pastel_blue} - fontColor={theme.colors.gray4} - fonts={theme.fonts.button18} - image={cake.smallImage} - cakeName={cake.name} - cakeNum={getCakeNum(cake.cakeNumber, cakesCount)} - /> - ))} - - - - ); -} - -const Styled = { - Container: styled.div` - margin: 0 1rem 0; - `, - - Title: styled.h1` - margin: 0 0 3rem; - ${theme.fonts.headline24_130}; - color: ${theme.colors.gray4}; - `, - - TitleColor: styled.span` - color: ${theme.colors.main_blue}; - `, - - ListButton: styled.div` - ${theme.fonts.button18}; - `, -}; diff --git a/components/Mypage/Letters/[id].tsx b/components/Mypage/Letters/[id].tsx deleted file mode 100644 index 8a065bb6..00000000 --- a/components/Mypage/Letters/[id].tsx +++ /dev/null @@ -1,158 +0,0 @@ -import theme from '@/styles/theme'; -import styled from 'styled-components'; -import CakeListButton from './CakeListButton'; -import Image from 'next/image'; -import { BorderImg } from '@/public/assets/images'; -import { useEffect, useState } from 'react'; -import { ArrowLeftIc, ArrowRightIc, BackBtnIc } from '@/public/assets/icons'; -import { useRouter } from 'next/router'; -import { CAKE_LIST } from '@/constant/cakeList'; -import { useGetCakesInfo } from '@/hooks/queries/cakes'; - -export default function LettersContainer() { - const [wishId, setWishId] = useState(''); - const [cakeId, setCakeId] = useState(''); - const [clickedBox, setClickedBox] = useState(0); - const router = useRouter(); - - useEffect(() => { - if (!router.isReady) return; - setWishId(router.query.id); - setCakeId(router.query.cakeId); - }, [router.isReady]); - - // 케이크 정보, 개수 - const { cake } = router.query; - const cakeData = CAKE_LIST.find((cake) => cake.cakeNumber === Number(cakeId)); - - // 편지 - const { lettersData, lettersSum } = useGetCakesInfo(wishId, cakeId); - - const handleNameBoxClick = (index: number) => { - setClickedBox(index); - }; - - const handleArrowClick = (direction: string) => { - let movedBox = clickedBox; - - if (direction === 'left') { - movedBox = (movedBox - 1 + lettersSum) % lettersSum; - } else if (direction === 'right') { - movedBox = (movedBox + 1) % lettersSum; - } - - setClickedBox(movedBox); - }; - - const handleMoveBack = () => { - window.history.back(); - }; - - return ( - <> - - - - {cakeData?.name}를 보낸 선물주님들이 -
    - 남긴 편지를 읽어보세요 -     - - {`'${lettersData[clickedBox]?.name}' 선물주님`} - - handleArrowClick('left')}> - 왼쪽 화살표 - - - - - handleArrowClick('right')}> - 오른쪽 화살표 - - - - 구분선 - - - {lettersData.map((letters, index) => ( - handleNameBoxClick(index)} - > - {letters.name} - - ))} - - - ); -} - -const Styled = { - Title: styled.div` - ${theme.fonts.body16}; - color: ${theme.colors.main_blue}; - margin: 0 0 2rem 1rem; - `, - - Text: styled.div` - ${theme.fonts.body16}; - color: ${theme.colors.dark_blue}; - margin: 1rem 1rem 2rem; - `, - - LetterContainer: styled.div` - margin: 0 0 1rem; - display: flex; - align-items: center; - justify-content: space-between; - `, - - ArrowButton: styled.button``, - - TextareaText: styled.textarea` - width: 100%; - height: 15rem; - color: ${theme.colors.dark_blue}; - ${theme.fonts.body14}; - resize: none; - background-color: ${theme.colors.pastel_blue}; - border: 0.1rem solid ${theme.colors.main_blue}; - border-radius: 1rem; - padding: 1.2rem 1rem 1.2rem 1.2rem; - `, - - NameContainer: styled.div` - display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr; - grid-template-rows: 1fr 1fr; - grid-column-gap: 1.2rem; - grid-row-gap: 1rem; - margin: 1rem 0 2rem; - color: ${theme.colors.white}; - ${theme.fonts.body14}; - overflow: auto; - max-height: 45vh; - `, - - NameBox: styled.div<{ active: boolean }>` - width: 7.4rem; - height: 4.6rem; - display: flex; - justify-content: center; - align-items: center; - padding: 0.8rem; - border-radius: 0.6rem; - background-color: ${(props) => - props.active ? theme.colors.main_blue : theme.colors.pastel_blue}; - color: ${(props) => (props.active ? theme.colors.white : theme.colors.main_blue)}; - cursor: pointer; - `, -}; diff --git a/components/Mypage/Links/LinksBox.tsx b/components/Mypage/Links/LinksBox.tsx deleted file mode 100644 index 5e400485..00000000 --- a/components/Mypage/Links/LinksBox.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import theme from '@/styles/theme'; -import styled from 'styled-components'; - -interface LinksBoxProps { - title: string; - date: string; - handleCheckbox: () => void; - isChecked?: boolean; - handleMovePage: () => void; -} - -export default function LinksBox(props: LinksBoxProps) { - const { title, date, handleCheckbox, isChecked, handleMovePage } = props; - - - return ( - - - - {title} - {date} - - - - {'>'} - - - - ); -} - -const Styled = { - Container: styled.div` - width: 100%; - height: 7rem; - display: flex; - justify-content: left; - align-items: center; - padding: 0rem 1.5rem; - border-radius: 1rem; - background-color: ${theme.colors.pastel_blue}; - margin: 0 0 1rem; -`, - - TextContainer: styled.div` - display: flex; - flex-direction: column; - align-items: flex-start; - padding: 0 0 0 1rem; - `, - - Title: styled.div` - margin: 0 0 0.5rem; - ${theme.fonts.button16_2}; - color: ${theme.colors.main_blue}; -`, - - Date: styled.div` - ${theme.fonts.body12_2}; - color: ${theme.colors.main_blue}; -`, - - ButtonContainer: styled.button` - margin-left: auto; - color: ${theme.colors.main_blue}; - ${theme.fonts.button16_2}; -`, - - Checkbox: styled.input.attrs({ type: 'checkbox' })` - width: 1.7rem; - height: 1.7rem; - border: 0.4px solid ${theme.colors.main_blue}; - border-radius: 20%; - background-color: ${theme.colors.white}; - cursor: pointer; - &:checked { - background-image: url('/assets/icons/checkIc.svg'); - background-repeat: no-repeat; - background-position: center; - background-color: ${theme.colors.main_blue}; -} -appearance: none; -`, - -}; \ No newline at end of file diff --git a/components/Mypage/Links/NoWishLists.tsx b/components/Mypage/Links/NoWishLists.tsx deleted file mode 100644 index d283024b..00000000 --- a/components/Mypage/Links/NoWishLists.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import styled from 'styled-components'; -import Image from 'next/image'; -import { LinksPageChatImg, MainCakeImg } from '@/public/assets/images'; -import router from 'next/router'; -import Button from '@/components/Common/Button'; - -export default function NoWishLists() { - const handleMoveToMain = () => { - router.push('/main'); - }; - - return ( - <> - - - 말풍선 - 케이크 - - - - - - ); -} - -const Styled = { - Container: styled.div` - margin: 6.7rem 0 3.7rem; - `, - - ImageContainer: styled.div` - display: flex; - flex-direction: column; - align-items: center; - width: 100%; - `, -}; diff --git a/components/Mypage/Links/WishLists.tsx b/components/Mypage/Links/WishLists.tsx deleted file mode 100644 index d1038dd9..00000000 --- a/components/Mypage/Links/WishLists.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import LinksBox from './LinksBox'; -import { WishLinksType } from '@/types/links/wishLinksType'; -import { convertDateFormat } from '@/hooks/common/useDate'; -import router from 'next/router'; - -interface WishListsProps { - linksData: WishLinksType[]; - selectedLinks: number[]; - handleCheckbox: (wishId: number) => void; -} - -export default function WishLists(props: WishListsProps) { - const { linksData, selectedLinks, handleCheckbox } = props; - - const handleMovePage = (wishId: number) => { - router.push(`/mypage/links/${wishId}`); - }; - - return ( - <> - {linksData.map((link) => ( - handleMovePage(link.wishId)} - handleCheckbox={() => handleCheckbox(link.wishId)} - title={link.title} - date={`${convertDateFormat(link.startAt)} ~ ${convertDateFormat(link.endAt)}`} - isChecked={selectedLinks.includes(link.wishId)} - /> - ))} - - ); -} diff --git a/components/Mypage/Links/[id].tsx b/components/Mypage/Links/[id].tsx deleted file mode 100644 index 2c0ae8f8..00000000 --- a/components/Mypage/Links/[id].tsx +++ /dev/null @@ -1,98 +0,0 @@ -import styled from 'styled-components'; -import Image from 'next/image'; -import { useRouter } from 'next/router'; -import theme from '@/styles/theme'; -import { LinkBeefCakeImg } from '@/public/assets/images'; -import { useEffect, useState } from 'react'; -import { convertDateFormat } from '@/hooks/common/useDate'; -import VerticalProgressBar from '@/components/Common/VerticalProgressBar'; -import { useGetSingleWishInfo } from '@/hooks/queries/wishes'; - -export default function LinksContainer() { - const [wishId, setWishId] = useState(''); - const router = useRouter(); - - useEffect(() => { - if (!router.isReady) return; - setWishId(router.query.id); - }, [router.isReady]); - - const { wishData } = useGetSingleWishInfo(wishId); - - const handleMovePage = () => { - router.push(`/mypage/letters/${wishId}`); - }; - - return ( - <> - {wishData?.title} - {`${convertDateFormat(wishData?.startAt)} ~ ${convertDateFormat( - wishData?.endAt, - )}`} - - - - - 케이크 - - 모인 케이크 보러가기 {'>'} - 총 {wishData?.price}원 - - - - - - ); -} - -const Styled = { - Title: styled.div` - ${theme.fonts.headline24_130}; - color: ${theme.colors.gray4}; - margin: 2rem 0 0.5rem; - `, - - Date: styled.div` - ${theme.fonts.body16}; - color: ${theme.colors.gray4}; - `, - - CenterContainer: styled.div` - margin: 9rem 0 15.5rem; - width: 100%; - display: flex; - justify-content: right; - align-items: center; - `, - - ContentContainer: styled.div` - display: flex; - flex-direction: column; - justify-content: center; - `, - - BarContainer: styled.div` - float: right; - margin: 0rem 1.5rem 0 0; - `, - - ImageContainer: styled.div` - width: 100%; - text-align: center; - padding: 4rem 0 0; - `, - - About: styled.div` - display: flex; - justify-content: center; - margin: 0 0 1rem; - ${theme.fonts.headline24_100}; - color: ${theme.colors.main_blue}; - `, - - AboutSmall: styled.div` - display: flex; - justify-content: center; - ${theme.fonts.headline24_100}; - `, -}; diff --git a/components/Mypage/Links/index.tsx b/components/Mypage/Links/index.tsx deleted file mode 100644 index ef676d7d..00000000 --- a/components/Mypage/Links/index.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import theme from '@/styles/theme'; -import styled from 'styled-components'; -import useModal from '@/hooks/common/useModal'; -import Modal from '@/components/Common/Modal'; -import DeleteModal from '@/components/Common/Modal/DeleteModal'; -import { useState } from 'react'; -import WishLists from './WishLists'; -import NoWishLists from './NoWishLists'; -import { useQueryClient } from 'react-query'; -import { QUERY_KEY } from '@/constant/queryKey'; -import { useDeleteWishes, useGetWishLinks } from '@/hooks/queries/wishes'; - -export default function LinksMainContainer() { - const [selectedLinks, setSelectedLinks] = useState([]); - const { isOpen, handleToggle } = useModal(); - const queryClient = useQueryClient(); - - const deleteWishesMutation = useDeleteWishes(); - - const { wishLinks, noWishes } = useGetWishLinks(); - - const handleCheckbox = (wishId: number) => { - if (selectedLinks.includes(wishId)) { - setSelectedLinks((prev) => prev.filter((item) => item !== wishId)); - } else { - setSelectedLinks((prev) => [...prev, wishId]); - } - }; - - const handleDeleteConfirm = () => { - if (selectedLinks.length > 0) { - deleteWishesMutation.mutate(selectedLinks, { - onSuccess: () => { - queryClient.invalidateQueries(QUERY_KEY.WISH_LINKS); - }, - }); - } - }; - - return ( - <> - {isOpen && ( - - - - )} - - 지난 소원 링크 모음 - - {noWishes ? ( - - ) : ( - - )} - - - ); -} - -const Styled = { - Container: styled.div` - margin: 0 1rem 0; - overflow: auto; - max-height: 80vh; - `, - - Title: styled.h1` - ${theme.fonts.headline24_130}; - color: ${theme.colors.gray4}; - margin: 2rem 1rem 2rem; - `, -}; diff --git a/components/Mypage/index.tsx b/components/Mypage/index.tsx deleted file mode 100644 index ef5ffb39..00000000 --- a/components/Mypage/index.tsx +++ /dev/null @@ -1,175 +0,0 @@ -import theme from '@/styles/theme'; -import styled from 'styled-components'; -import router from 'next/router'; -import Image from 'next/image'; -import ItemBox from './ItemBox'; -import { useRecoilValue, useResetRecoilState } from 'recoil'; -import { LoginUserInfo } from '@/recoil/auth/loginUserInfo'; -import GuideModal from '@/components/Common/Modal/GuideModal'; -import Modal from '@/components/Common/Modal'; -import useModal from '@/hooks/common/useModal'; -import { MypageCakeImg } from '@/public/assets/images'; -import { useEffect, useState } from 'react'; -import { deleteUserInfo } from '@/api/user'; -import { useGetMainProgressData } from '@/hooks/queries/wishes'; - -export default function MyPageContainer() { - const { isOpen, handleToggle } = useModal(); - const [nickName, setNicknameState] = useState(''); - const loginUserInfo = useRecoilValue(LoginUserInfo); - const { progressData } = useGetMainProgressData(); - - useEffect(() => { - setNicknameState(loginUserInfo.nickName); - }, [loginUserInfo]); - - const handleEditWish = () => { - if (progressData?.status === 'END' || progressData === undefined) return; - - router.push('/mypage/editWishes'); - }; - - const handleWishLinks = () => { - router.push('/mypage/links'); - }; - - const handleCustomerService = () => { - if (progressData?.status === 'END' || progressData === undefined) return; - - if (window.Kakao && window.Kakao.Channel) { - window.Kakao.Channel.chat({ - channelPublicId: process.env.NEXT_PUBLIC_KAKAO_CHANNEL_ID, - }); - } else { - alert( - "채널 연결에 문제가 발생했습니다. 카카오톡에서 '조물주보다생일선물주'를 검색하여 문의해주세요.", - ); - } - }; - - const handleLogOut = () => { - window.location.href = `https://kauth.kakao.com/oauth/logout?client_id=${process.env.NEXT_PUBLIC_KAKAO_RESTAPI_KEY}&logout_redirect_uri=${process.env.NEXT_PUBLIC_KAKAO_LOGOUT_REDIRECT_URI}`; - localStorage.removeItem('accessToken'); - localStorage.removeItem('refreshToken'); - localStorage.removeItem('UserInfo'); - useResetRecoilState(LoginUserInfo); - }; - - const handleWithdrawal = () => { - if (window.confirm('탈퇴를 진행하시겠습니까?')) { - deleteUserInfo(); - } - }; - - return ( - <> - {isOpen && ( - - - - )} - - - - - 케이크 프로필 - - {nickName} 님 - - - - - 진행중인 소원 링크 정보 수정하기 - - - 진행중인 펀딩 중단하기 - - - 지난 소원 링크 모음 - - - 사용설명서 보기 - - - 고객센터 문의하기 - - - - - 로그아웃 - 회원탈퇴 - - - - ); -} - -const Styled = { - Container: styled.div` - margin: 0 1rem 0; - `, - - TitleContainer: styled.div` - display: flex; - margin: 2rem 0 2rem; - `, - - ItemBoxWrapper: styled.ul` - display: flex; - flex-direction: column; - - gap: 1.2rem; - `, - - Title: styled.h1` - ${theme.fonts.headline24_130}; - color: ${theme.colors.gray4}; - display: flex; - align-items: center; - margin: 0 0 0 1.5rem; - `, - - ProfileImgContainer: styled.div` - width: 5rem; - height: 5rem; - border-radius: 30rem; - background-color: ${theme.colors.pastel_blue}; - display: flex; - justify-content: center; - padding-top: 0.5rem; - `, - - TextButtonWrapper: styled.ul` - display: flex; - flex-direction: column; - align-items: left; - - width: 100%; - - ${theme.fonts.button18}; - color: ${theme.colors.main_blue}; - text-decoration: underline; - - margin-top: 3rem; - `, - - TextButton: styled.li` - line-height: 30px; - - cursor: pointer; - `, -}; diff --git a/components/Wishes/Common/WishesStepBtn.tsx b/components/Wishes/Common/WishesStepBtn.tsx deleted file mode 100644 index 636a2b31..00000000 --- a/components/Wishes/Common/WishesStepBtn.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import styled from 'styled-components'; -import Button from '../../Common/Button'; -import { ColorSystemType } from '@/types/common/box/boxStyleType'; - -interface WishesStepBtnProps { - wishesStep: { - stepIndex: number; - prevState: boolean; - nextState: boolean; - changePrevState: (state: boolean) => void; - changeNextState: (state: boolean) => void; - handleNextStep: () => void; - handlePrevStep: () => void; - getNextBtnColor: (state: boolean) => ColorSystemType; - getPrevBtnColor: (state: boolean) => ColorSystemType; - }; - - handleClickFn?: () => void; -} - -export default function WishesStepBtn(props: WishesStepBtnProps) { - const { wishesStep, handleClickFn } = props; - - const handleNextClickFn = () => { - if (handleClickFn) handleClickFn(); - wishesStep.handleNextStep(); - }; - - return ( - - - - - ); -} - -const Styled = { - ButtonWrapper: styled.div` - display: flex; - justify-content: space-between; - gap: 0.6rem; - - margin-bottom: 4.6rem; - `, -}; diff --git a/components/Wishes/Common/WishesStepTitle.tsx b/components/Wishes/Common/WishesStepTitle.tsx deleted file mode 100644 index 93ba8ce6..00000000 --- a/components/Wishes/Common/WishesStepTitle.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { WishesFormPresentIc } from '@/public/assets/icons'; -import theme from '@/styles/theme'; -import Image from 'next/image'; -import styled from 'styled-components'; - -interface WishesStepTitleProps { - title: string; -} - -export default function WishesStepTitle(props: WishesStepTitleProps) { - const { title } = props; - return ( - - 선물 이미지 - {title}, - - ); -} - -const Styled = { - Title: styled.h1` - ${theme.fonts.headline24_100}; - color: ${theme.colors.main_blue}; - - margin-left: 1rem; - `, - - TitleWrapper: styled.div` - display: flex; - - height: 2.4rem; - - margin: 2.4rem 0 2rem; - `, -}; diff --git a/components/Wishes/Share/index.tsx b/components/Wishes/Share/index.tsx deleted file mode 100644 index 4b9bdb51..00000000 --- a/components/Wishes/Share/index.tsx +++ /dev/null @@ -1,103 +0,0 @@ -import styled from 'styled-components'; -import Image from 'next/image'; -import { useRecoilValue } from 'recoil'; -import router from 'next/router'; -import theme from '@/styles/theme'; -import { CloseBlueIc } from '@/public/assets/icons'; -import { ShareChatImg, MainCakeImg } from '@/public/assets/images'; -import { LoginUserInfo } from '@/recoil/auth/loginUserInfo'; -import Button from '@/components/Common/Button'; -import useModal from '@/hooks/common/useModal'; -import { useGetMainProgressData } from '@/hooks/queries/wishes'; -import ShareModal from '@/components/Common/Modal/ShareModal'; -import Modal from '@/components/Common/Modal'; - -export default function ShareContainer() { - const { isOpen, handleToggle } = useModal(); - - const { progressData } = useGetMainProgressData(); - - const loginUserInfo = useRecoilValue(LoginUserInfo); - - const handleMoveToMain = () => { - router.push('/main'); - }; - - return ( - <> - - 닫기 - - - {`${loginUserInfo.nickName}님의\n 소원 생성 완료!`} - {progressData?.status === 'WHILE' ? ( - 선물주들에게 생일 축하 받으러 가볼까요? - ) : ( - - {progressData ? progressData?.dayCount : '?'}일 뒤부터 링크를 공유할 수 있어요 - - )} - - - 말풍선 - 케이크 - - - - {isOpen && ( - - - - )} - - - - - ); -} - -const Styled = { - TopButtonWrapper: styled.div` - display: flex; - flex-direction: row-reverse; - `, - - Title: styled.div` - display: flex; - justify-content: center; - margin: 0 0 2rem; - ${theme.fonts.headline30}; - color: ${theme.colors.main_blue}; - text-align: center; - white-space: pre-line; - `, - - Container: styled.div` - margin: 6.7rem 0 12.2rem; - `, - - ImageContainer: styled.div` - display: flex; - flex-direction: column; - align-items: center; - width: 100%; - `, - - About: styled.div` - display: flex; - justify-content: center; - margin: 0 0 4.3rem; - ${theme.fonts.body16}; - color: ${theme.colors.main_blue}; - `, - - ButtonWrapper: styled.div` - margin-bottom: 10.4rem; - `, -}; diff --git a/components/Wishes/WishesForm/BankInfo.tsx b/components/Wishes/WishesForm/BankInfo.tsx deleted file mode 100644 index 337d2582..00000000 --- a/components/Wishes/WishesForm/BankInfo.tsx +++ /dev/null @@ -1,155 +0,0 @@ -import { UseFormReturn } from 'react-hook-form'; -import InputContainer from '@/components/Common/Input/InputContainer'; -import BankInput from '@/components/Common/Modal/BankInput'; -import { WishesDataInputType } from '@/types/wishesType'; -import styled from 'styled-components'; -import CheckBox from '@/components/Common/CheckBox'; -import useCheckBox from '@/hooks/common/useCheckBox'; -import Input from '@/components/Common/Input/Input'; -import { StyledBox } from '@/components/Common/Box'; -import WishesStepTitle from '../Common/WishesStepTitle'; -import WishesStepBtn from '../Common/WishesStepBtn'; -import { ColorSystemType } from '@/types/common/box/boxStyleType'; -import theme from '@/styles/theme'; -import { useEffect } from 'react'; -import { validation } from '@/validation/input'; -import AlertTextBox from '@/components/Common/AlertTextBox'; -import { useGetUserAccount, usePatchUserAccount } from '@/hooks/queries/user'; -import { usePostWishes } from '@/hooks/queries/wishes'; - -interface BankInfoProps { - methods: UseFormReturn; - wishesStep: { - stepIndex: number; - prevState: boolean; - nextState: boolean; - changePrevState: (state: boolean) => void; - changeNextState: (state: boolean) => void; - handleNextStep: () => void; - handlePrevStep: () => void; - getNextBtnColor: (state: boolean) => ColorSystemType; - getPrevBtnColor: (state: boolean) => ColorSystemType; - }; -} - -export default function BankInfo(props: BankInfoProps) { - const { methods, wishesStep } = props; - - const { userAccountData } = useGetUserAccount(); - - const { checkBoxState, handleChangeCheckBoxState } = useCheckBox(); - - const { postWishesData } = usePostWishes(methods); - const { patchUserAccountData } = usePatchUserAccount(methods); - - useEffect(() => { - if ( - checkBoxState && - methods.getValues('name') && - methods.getValues('bank') && - methods.getValues('account') && - methods.getValues('phone') && - validation.isCorrectPhoneNumber(methods.getValues('phone')) - ) { - wishesStep.changeNextState(true); - } else { - wishesStep.changeNextState(false); - } - }, [methods.watch()]); - - useEffect(() => { - if (userAccountData) { - methods.setValue('name', userAccountData.accountInfo.name); - methods.setValue('bank', userAccountData.accountInfo.bank); - methods.setValue('account', userAccountData.accountInfo.account); - methods.setValue('phone', userAccountData.phone); - } - }, [userAccountData]); - - return ( - <> - - -
    - - {'※ 계좌번호, 연락처에 대한 허위기재와 오기로 인해 발생되는 문제는 책임지지 않습니다.'} - - - - - - - - - - - - {!validation.isIncludeHyphen(methods.watch('phone')) || - (!validation.isCorrectPhoneNumber(methods.watch('phone')) && - methods.watch('phone') !== '' && ( - {'올바른 연락처를 입력해주세요'} - ))} - - -
    - - { - postWishesData(); - patchUserAccountData(); - }} - /> -     - - ); -} - -const GuideBox = styled(StyledBox)` - display: flex; - flex-direction: column; - justify-content: space-between; - - width: 100%; - height: 9.8rem; - - ${theme.fonts.body14}; - text-align: left; - - margin-bottom: 2.4rem; - padding: 1.2rem; -`; - -const Styled = { - Container: styled.div` - display: flex; - flex-direction: column; - justify-content: space-between; - - height: 100svh; - `, - - GuideCheckBoxWrapper: styled.div` - display: flex; - justify-content: right; - - width: 100%; - height: 2rem; - `, - - ButtonWrapper: styled.div` - display: flex; - justify-content: space-between; - - width: 100%; - - margin-bottom: 4.6rem; - `, -}; diff --git a/components/Wishes/WishesForm/ItemLink.tsx b/components/Wishes/WishesForm/ItemLink.tsx deleted file mode 100644 index 32fb6d1e..00000000 --- a/components/Wishes/WishesForm/ItemLink.tsx +++ /dev/null @@ -1,94 +0,0 @@ -import theme from '@/styles/theme'; -import styled from 'styled-components'; -import { validation } from '@/validation/input'; -import { useState } from 'react'; -import { convertMoneyText } from '@/utils/common/convertMoneyText'; -import { QUERY_KEY } from '@/constant/queryKey'; -import { extractImageSrc, extractPrice } from '@/utils/common/extractItem'; -import { useQuery } from 'react-query'; -import { getSiteData } from '@/utils/common/getSiteData'; -import Input from '@/components/Common/Input/Input'; -import { UseFormReturn } from 'react-hook-form'; -import AlertTextBox from '@/components/Common/AlertTextBox'; -import ItemImageBox from '@/components/Common/Box/ItemImageBox'; -import { WishesDataInputType } from '@/types/wishesType'; -import { getPresentLinkInfo } from '@/api/wishes'; - -interface ItemLinkProps { - methods: UseFormReturn; -} - -export default function ItemLink(props: ItemLinkProps) { - const { methods } = props; - const [isCorrectLinkURL, setIsCorrectLinkURL] = useState(false); - - const linkURL = methods.watch('linkURL'); - const imageUrl = methods.getValues('imageUrl'); - const price = methods.getValues('price'); - - const parseImage = () => { - isSuccess && refetch(); - if (validation.isCorrectSite(linkURL)) { - setIsCorrectLinkURL(true); - } else { - setIsCorrectLinkURL(false); - } - }; - - const { refetch, isSuccess } = useQuery( - QUERY_KEY.ITEM_DATA, - () => getPresentLinkInfo(linkURL, getSiteData(linkURL)), - { - onSuccess: (data) => { - const imageData = extractImageSrc(data?.imageTag?.data?.data); - const priceData = extractPrice(data?.priceTag?.data?.data, linkURL); - - if (imageData) { - methods.setValue('imageUrl', imageData); - methods.setValue('price', priceData); - } - }, - enabled: isCorrectLinkURL && validation.isCorrectSite(linkURL), - }, - ); - - return ( - - - {linkURL && linkURL.length > 0 && !validation.isCorrectSite(linkURL) && ( - 정해진 사이트에서 링크를 가져와주세요! - )} - - {imageUrl && linkURL && isCorrectLinkURL && ( - - - {`가격 : ${convertMoneyText(price.toString())}원`} - - )} - - ); -} - -const Styled = { - Container: styled.div` - margin-bottom: 2.4rem; - `, - - SiteBox: styled.div` - display: inline-block; - width: 6rem; - height: 6rem; - background-color: ${theme.colors.white}; - cursor: pointer; - margin: 0 1rem 1rem 0; - `, - - ItemImageWrapper: styled.div` - margin-top: 1.2rem; - `, -}; diff --git a/components/Wishes/WishesForm/Preview.tsx b/components/Wishes/WishesForm/Preview.tsx deleted file mode 100644 index 5dab05dc..00000000 --- a/components/Wishes/WishesForm/Preview.tsx +++ /dev/null @@ -1,96 +0,0 @@ -import InputContainer from '@/components/Common/Input/InputContainer'; -import TextareaBox from '@/components/Common/Input/TextareaBox'; -import styled from 'styled-components'; -import theme from '@/styles/theme'; -import { convertMoneyText } from '@/utils/common/convertMoneyText'; -import { convertDateToString } from '@/utils/common/getDate'; -import Input from '@/components/Common/Input/Input'; -import { UseFormReturn } from 'react-hook-form'; -import { WishesDataInputType } from '@/types/wishesType'; -import ItemImageBox from '@/components/Common/Box/ItemImageBox'; -import WishesStepTitle from '../Common/WishesStepTitle'; -import WishesStepBtn from '../Common/WishesStepBtn'; -import { ColorSystemType } from '@/types/common/box/boxStyleType'; -import { useEffect } from 'react'; - -interface PreviewProps { - methods: UseFormReturn; - wishesStep: { - stepIndex: number; - prevState: boolean; - nextState: boolean; - changePrevState: (state: boolean) => void; - changeNextState: (state: boolean) => void; - handleNextStep: () => void; - handlePrevStep: () => void; - getNextBtnColor: (state: boolean) => ColorSystemType; - getPrevBtnColor: (state: boolean) => ColorSystemType; - }; -} - -export default function Preview(props: PreviewProps) { - const { methods, wishesStep } = props; - - useEffect(() => { - wishesStep.changeNextState(true); - }, []); - - return ( - <> - - -
    - - {convertDateToString(methods.getValues('startDate'))}~ - {convertDateToString(methods.getValues('endDate'))} - - - - - - 가격 : {convertMoneyText(methods.getValues('price').toString())}원 - - - - - - - - - - -
    - - -     - - ); -} - -const Styled = { - Container: styled.div` - display: flex; - flex-direction: column; - justify-content: space-between; - - height: 100%; - `, - - Period: styled.p` - ${theme.fonts.body16}; - color: ${theme.colors.main_blue}; - margin: 0 0 1rem; - `, - - PresentPrice: styled.p` - ${theme.fonts.button18}; - color: ${theme.colors.main_blue}; - text-align: center; - - margin-top: 1rem; - `, - - ButtonWrapper: styled.div` - padding-bottom: 4.6rem; - `, -}; diff --git a/components/Wishes/WishesForm/SiteList.tsx b/components/Wishes/WishesForm/SiteList.tsx deleted file mode 100644 index 66cd663d..00000000 --- a/components/Wishes/WishesForm/SiteList.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { SITE_LIST } from '@/constant/siteList'; -import theme from '@/styles/theme'; -import Image from 'next/image'; -import styled from 'styled-components'; - -export default function SiteList() { - return ( - - {Object.values(SITE_LIST).map((siteData) => ( - - - {`${siteData.NAME} - - - ))} - - ); -} - -const Styled = { - SiteItemWrapper: styled.ul` - display: flex; - - width: 100%; - `, - - SiteItem: styled.li` - display: inline-block; - width: 6rem; - height: 6rem; - background-color: ${theme.colors.white}; - cursor: pointer; - margin: 0 1rem 1rem 0; - `, -}; diff --git a/components/Wishes/WishesForm/UploadPresent.tsx b/components/Wishes/WishesForm/UploadPresent.tsx deleted file mode 100644 index 114db1f9..00000000 --- a/components/Wishes/WishesForm/UploadPresent.tsx +++ /dev/null @@ -1,92 +0,0 @@ -import InputContainer from '@/components/Common/Input/InputContainer'; -import styled from 'styled-components'; -import { ImageUploadIc } from '@/public/assets/icons'; -import Image from 'next/image'; -import InputLength from '@/components/Common/Input/InputLength'; -import Input from '@/components/Common/Input/Input'; -import { LIMIT_TEXT } from '@/constant/limitText'; -import { ChangeEvent, useEffect } from 'react'; -import { validation } from '@/validation/input'; -import AlertTextBox from '@/components/Common/AlertTextBox'; -import { UseFormReturn } from 'react-hook-form'; -import ImageBox from '@/components/Common/Box/ImageBox'; -import ItemImageBox from '@/components/Common/Box/ItemImageBox'; -import { WishesDataInputType } from '@/types/wishesType'; - -interface UploadPresentProps { - imageFile: File | Blob | null; - preSignedImageUrl: string; - uploadImageFile: (e: ChangeEvent) => void; - methods: UseFormReturn; -} - -export default function UploadPresent(props: UploadPresentProps) { - const { imageFile, preSignedImageUrl, uploadImageFile, methods } = props; - - useEffect(() => { - if (preSignedImageUrl) methods.setValue('imageUrl', preSignedImageUrl); - }, [preSignedImageUrl]); - - return ( - <> - - - {methods.watch('imageUrl') ? ( - - ) : ( - - - 업로드 아이콘 - - - )} - - - {imageFile && !validation.checkImageFileSize(imageFile.size) && ( - 사진은 10MB 이하로 업로드해주세요! - )} - - - - - - - - - ); -} - -const Styled = { - UploadImageBox: styled.div` - display: flex; - justify-content: center; - align-items: center; - - margin-top: 1.3rem; - - cursor: pointer; - `, - - Label: styled.label` - cursor: pointer; - `, - - FileInput: styled.input` - display: none; - `, - - ButtonWrapper: styled.div` - margin-bottom: 4.6rem; - `, -}; diff --git a/components/Wishes/WishesForm/WisehsStep2.tsx b/components/Wishes/WishesForm/WisehsStep2.tsx deleted file mode 100644 index dd2ffaa4..00000000 --- a/components/Wishes/WishesForm/WisehsStep2.tsx +++ /dev/null @@ -1,99 +0,0 @@ -import Calendar from '@/components/Common/Calendar/Calendar'; -import Input from '@/components/Common/Input/Input'; -import InputContainer from '@/components/Common/Input/InputContainer'; -import TextareaBox from '@/components/Common/Input/TextareaBox'; -import { LIMIT_TEXT } from '@/constant/limitText'; -import { WishesDataInputType } from '@/types/wishesType'; -import { useEffect } from 'react'; -import { UseFormReturn } from 'react-hook-form'; - -import styled from 'styled-components'; -import WishesStepTitle from '../Common/WishesStepTitle'; -import WishesStepBtn from '../Common/WishesStepBtn'; -import { ColorSystemType } from '@/types/common/box/boxStyleType'; - -interface WishesStep2Props { - methods: UseFormReturn; - wishesStep: { - stepIndex: number; - prevState: boolean; - nextState: boolean; - changePrevState: (state: boolean) => void; - changeNextState: (state: boolean) => void; - handleNextStep: () => void; - handlePrevStep: () => void; - getNextBtnColor: (state: boolean) => ColorSystemType; - getPrevBtnColor: (state: boolean) => ColorSystemType; - }; -} - -export default function WishesStep2(props: WishesStep2Props) { - const { methods, wishesStep } = props; - - useEffect(() => { - if ( - methods.getValues('title') && - methods.getValues('hint').length !== 0 && - methods.getValues('hint').length <= 300 - ) { - wishesStep.changeNextState(true); - } else { - wishesStep.changeNextState(false); - } - }, [methods.watch()]); - - return ( -
    - - -
    - - - - - - - - - - - {/* 시작일 */} - - {/* 종료일 */} - - - -
    - - -     - - ); -} - -const Styled = { - Container: styled.div` - display: flex; - flex-direction: column; - justify-content: space-between; - - height: 100svh; - `, - - CalendarWrapper: styled.div` - display: flex; - justify-content: space-between; - gap: 0.6rem; - - width: 100%; - `, - - ButtonWrapper: styled.div` - margin-bottom: 4.6rem; - `, -}; diff --git a/components/Wishes/WishesForm/WishesStep1.tsx b/components/Wishes/WishesForm/WishesStep1.tsx deleted file mode 100644 index 50c92eba..00000000 --- a/components/Wishes/WishesForm/WishesStep1.tsx +++ /dev/null @@ -1,142 +0,0 @@ -import InputContainer from '@/components/Common/Input/InputContainer'; -import ItemLink from './ItemLink'; -import { LIMIT_TEXT } from '@/constant/limitText'; -import { ChangeEvent, PropsWithChildren, useEffect, useState } from 'react'; -import styled from 'styled-components'; -import UploadTypeToggleBtn from '@/components/Common/UploadTypeToggleBtn'; -import { WishesDataInputType } from '@/types/wishesType'; -import { UseFormReturn } from 'react-hook-form'; -import Input from '@/components/Common/Input/Input'; -import InputLength from '@/components/Common/Input/InputLength'; -import UploadGift from './UploadPresent'; -import SiteList from './SiteList'; -import { validation } from '@/validation/input'; -import { ColorSystemType } from '@/types/common/box/boxStyleType'; -import WishesStepTitle from '../Common/WishesStepTitle'; -import WishesStepBtn from '../Common/WishesStepBtn'; -import { rules_initial } from '@/validation/rules'; - -interface WishesStep1Props { - methods: UseFormReturn; - wishesStep: { - stepIndex: number; - prevState: boolean; - nextState: boolean; - changePrevState: (state: boolean) => void; - changeNextState: (state: boolean) => void; - handleNextStep: () => void; - handlePrevStep: () => void; - getNextBtnColor: (state: boolean) => ColorSystemType; - getPrevBtnColor: (state: boolean) => ColorSystemType; - }; - imageFile: File | Blob | null; - preSignedImageUrl: string; - uploadImageFile: (e: ChangeEvent) => void; -} - -export default function WishesStep1(props: PropsWithChildren) { - const { methods, wishesStep, imageFile, preSignedImageUrl, uploadImageFile } = props; - const [isLinkLoadType, setIsLinkLoadType] = useState(true); //false : 링크 불러오기 true : 직접 불러오기 - - const handleLoadTypeToggle = (state: boolean) => { - setIsLinkLoadType(state); - }; - - useEffect(() => { - wishesStep.changeNextState(false); - - if (isLinkLoadType) { - if ( - validation.isCorrectSite(methods.getValues('linkURL')) && - methods.getValues('initial').length !== 0 && - methods.getValues('initial').length <= 15 - ) { - wishesStep.changeNextState(true); - } - } else { - if ( - methods.getValues('initial').length !== 0 && - methods.getValues('initial').length <= 15 && - imageFile && - methods.getValues('price') !== '' && - Number(methods.getValues('price')) <= 12000000 - ) { - wishesStep.changeNextState(true); - } - } - }, [methods.watch()]); - - return ( -
    - - -
    - - - {isLinkLoadType ? ( - <> - - - - ) : ( - - )} - - - - - - -
    - - -     - - ); -} - -const Styled = { - Container: styled.div` - display: flex; - flex-direction: column; - justify-content: space-between; - - height: 100svh; - `, - - UploadImageBox: styled.div` - display: flex; - justify-content: center; - align-items: center; - - margin-top: 1.3rem; - - cursor: pointer; - `, - - Lable: styled.label` - cursor: pointer; - `, - - FileInput: styled.input` - display: none; - `, -}; diff --git a/components/Wishes/WishesForm/index.tsx b/components/Wishes/WishesForm/index.tsx deleted file mode 100644 index 3dc9d709..00000000 --- a/components/Wishes/WishesForm/index.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import WishesStep1 from './WishesStep1'; -import styled from 'styled-components'; -import theme from '@/styles/theme'; -import useWishesStep from '@/hooks/wishes/useWisehsStep'; -import WishesStep2 from './WisehsStep2'; -import Preview from './Preview'; -import BankInfo from './BankInfo'; - -import { useForm } from 'react-hook-form'; -import { WishesDataInputType } from '@/types/wishesType'; -import { getDate } from '@/utils/common/getDate'; -import useUploadItemInfo from '@/hooks/wishes/useUploadItemInfo'; - -export default function WishesFormContainer() { - const wishesStep = { ...useWishesStep() }; - const { imageFile, preSignedImageUrl, uploadImageFile } = useUploadItemInfo(); - - const methods = useForm({ - defaultValues: { - linkURL: '', - imageUrl: '', - price: '', - initial: '', - title: '', - hint: '', - startDate: new Date(), - endDate: getDate(new Date(), 7), - phone: '', - name: '', - bank: '', - account: '', - }, - }); - - return ( - - { - { - 1: ( - - ), - 2: , - 3: , - 4: , - }[wishesStep.stepIndex] - } - - ); -} - -const Styled = { - Container: styled.div` - display: flex; - flex-direction: column; - justify-content: space-between; - - width: 100%; - height: 100%; - `, - - Title: styled.h1` - ${theme.fonts.headline24_100}; - color: ${theme.colors.main_blue}; - - margin-left: 1rem; - `, - - TitleWrapper: styled.div` - display: flex; - - height: 2.4rem; - - margin: 2.4rem 0 2rem; - `, -}; diff --git a/components/Wishes/[id].tsx b/components/Wishes/[id].tsx deleted file mode 100644 index c1f9770c..00000000 --- a/components/Wishes/[id].tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { useEffect, useState } from 'react'; -import styled from 'styled-components'; -import { useRouter } from 'next/router'; -import Button from '../Common/Button'; -import MainView from '../Common/mainView'; -import { useGetSingleWishInfo } from '@/hooks/queries/wishes'; -import { getPublicWishes } from '@/api/public'; -import { useGetPublicWishes } from '@/hooks/queries/public'; - -export default function WishesContainer() { - const [wishesId, setWishesId] = useState(''); - const router = useRouter(); - - useEffect(() => { - if (!router.isReady) return; - setWishesId(router.query.id); - }, [router.isReady]); - - const { publicWishesData } = useGetPublicWishes(wishesId); - - const handleMoveToCakes = () => { - router.push(`/cakes/${wishesId}`); - }; - - const handleMoveToHome = () => { - router.push('/'); - }; - - return ( - - - - - - - - - ); -} - -const Styled = { - Container: styled.div` - display: flex; - flex-direction: column; - align-items: center; - `, - - ButtonWrapper: styled.div` - display: flex; - flex-direction: column; - justify-content: space-between; - - width: 100%; - height: 11rem; - - margin-bottom: 4.6rem; - `, -}; diff --git a/constant/alertMessage.ts b/constant/alertMessage.ts deleted file mode 100644 index 7b74bdf0..00000000 --- a/constant/alertMessage.ts +++ /dev/null @@ -1,3 +0,0 @@ -export const ALERT_ACCOUNT_HYPEN_MESSAGE = '계좌번호는 (-)없이 입력해주세요'; -export const ALERT_ACCOUNT_LENGTH = '10~14자리의 계좌번호를 입력해주세요'; -export const ALERT_PHONE_FORM = '10~14자리의 계좌번호를 입력해주세요'; diff --git a/constant/bankList.ts b/constant/bankList.ts deleted file mode 100644 index 096acf32..00000000 --- a/constant/bankList.ts +++ /dev/null @@ -1,16 +0,0 @@ -import bankImgs from '@/public/assets/images'; -import { BankListType } from '@/types/bankListType'; - -export const BANK_LIST: BankListType[] = []; - -for (let i = 0; i <= 32; i++) { - BANK_LIST.push({ - name: - ['NH농협', '카카오뱅크', 'KB국민', '신한', '우리', '토스뱅크', 'IBK기업', '하나', '새마을', - '부산', '대구', '케이뱅크', '신협', '우체국', 'SC제일', "경남", "광주", "수협", "전북", - "저축은행", "제주", "씨티", "KDB산업", "산림조합", "SBI저축은행", "BOA", "중국", "HSBC", - "중국공상", "도이치", "JP모건", "BNP파리바", "중국건설"][i], - bankNumber: i + 1, - logo: bankImgs[`bank${i + 1}Img`], - }); -} \ No newline at end of file diff --git a/constant/cakeList.ts b/constant/cakeList.ts deleted file mode 100644 index 1454613c..00000000 --- a/constant/cakeList.ts +++ /dev/null @@ -1,110 +0,0 @@ -import { - BeefCakeImg, - ChickenCakeImg, - CoffeeCakeImg, - PoopCakeImg, - SushiCakeImg, - FlowerCakeImg, - PerfumeCakeImg, - VitaminCakeImg, - BeefCakeDetailImg, - ChickenCakeDetailImg, - CoffeeCakeDetailImg, - PoopCakeDetailImg, - SushiCakeDetailImg, - FlowerCakeDetailImg, - PerfumeCakeDetailImg, - VitaminCakeDetailImg, - BeefCakeThanksImg, - ChickenCakeThanksImg, - CoffeeCakeThanksImg, - PoopCakeThanksImg, - SushiCakeThanksImg, - FlowerCakeThanksImg, - PerfumeCakeThanksImg, - VitaminCakeThanksImg, - BeefCakeSmallImg, - VitaminCakeSmallImg, - ChickenCakeSmallImg, - SushiCakeSmallImg, - FlowerCakeSmallImg, - PerfumeCakeSmallImg, - PoopCakeSmallImg, - CoffeeCakeSmallImg -} from '@/public/assets/images'; -import { CakeListType } from '@/types/cakes/cakeListType'; - -export const CAKE_LIST: CakeListType[] = [ - { - name: '달콤 커피 케이크', - price: 4900, - cakeImage: CoffeeCakeImg, - detailImage: CoffeeCakeDetailImg, - thanksImage: CoffeeCakeThanksImg, - smallImage: CoffeeCakeSmallImg, - cakeNumber: 2, - }, - { - name: '상큼 비타민 케이크', - price: 9900, - cakeImage: VitaminCakeImg, - detailImage: VitaminCakeDetailImg, - thanksImage: VitaminCakeThanksImg, - smallImage: VitaminCakeSmallImg, - cakeNumber: 3, - }, - { - name: '바사삭 치킨 케이크', - price: 17900, - cakeImage: ChickenCakeImg, - detailImage: ChickenCakeDetailImg, - thanksImage: ChickenCakeThanksImg, - smallImage: ChickenCakeSmallImg, - cakeNumber: 4, - }, - { - name: '장인 초밥 케이크', - price: 25900, - cakeImage: SushiCakeImg, - detailImage: SushiCakeDetailImg, - thanksImage: SushiCakeThanksImg, - smallImage: SushiCakeSmallImg, - cakeNumber: 5, - }, - { - name: '샤랄라 꽃 케이크', - price: 38900, - cakeImage: FlowerCakeImg, - detailImage: FlowerCakeDetailImg, - thanksImage: FlowerCakeThanksImg, - smallImage: FlowerCakeSmallImg, - cakeNumber: 6, - }, - { - name: '몸보신 한우 케이크', - price: 46900, - cakeImage: BeefCakeImg, - detailImage: BeefCakeDetailImg, - thanksImage: BeefCakeThanksImg, - smallImage: BeefCakeSmallImg, - cakeNumber: 7, - }, - { - name: '킁킁 향수 케이크', - price: 55900, - cakeImage: PerfumeCakeImg, - detailImage: PerfumeCakeDetailImg, - thanksImage: PerfumeCakeThanksImg, - smallImage: PerfumeCakeSmallImg, - cakeNumber: 8, - }, - { - name: '구리구리 똥 케이크', - price: 0, - cakeImage: PoopCakeImg, - detailImage: PoopCakeDetailImg, - thanksImage: PoopCakeThanksImg, - smallImage: PoopCakeSmallImg, - cakeNumber: 1, - }, -]; diff --git a/constant/dateList.ts b/constant/dateList.ts deleted file mode 100644 index 70370fbc..00000000 --- a/constant/dateList.ts +++ /dev/null @@ -1,2 +0,0 @@ -export const MONTHS = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']; -export const TODAY = new Date(); diff --git a/constant/imageFileSize.ts b/constant/imageFileSize.ts deleted file mode 100644 index b250c04b..00000000 --- a/constant/imageFileSize.ts +++ /dev/null @@ -1 +0,0 @@ -export const IMAGE_FILE_SIZE = 10 * 1024 * 1024; diff --git a/constant/limitText.ts b/constant/limitText.ts deleted file mode 100644 index 277f2e34..00000000 --- a/constant/limitText.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { LimitTextType } from '@/types/limitTestType'; - -export const LIMIT_TEXT: LimitTextType = { - '15': 15, - '20': 20, - DESCRIPTION: 300, -}; diff --git a/constant/path.ts b/constant/path.ts deleted file mode 100644 index 66309c64..00000000 --- a/constant/path.ts +++ /dev/null @@ -1,27 +0,0 @@ -const PATH = { - API: 'api', - V1: 'v1', - CAKES: 'cakes', - PAY: 'pay', - AUTH: 'auth', - WISHES: 'wishes', - MAIN: 'main', - APPROVE: 'approve', - READY: 'ready', - PG_TOKEN: 'pg_token', - PRESENT: 'present', - INFO: 'info', - KAKAO: 'kakao', - CALLBACK: 'callback', - USER: 'user', - ACCOUNT: 'account', - PROGRESS: 'progress', - FILE: 'file', - FILE_NAME: 'fileName', - PUBLIC: 'public', - REDIRECT_URI: 'redirectUri', -}; - -export default PATH; - -//페이지 경로 diff --git a/constant/queryKey.ts b/constant/queryKey.ts deleted file mode 100644 index baf3f1ed..00000000 --- a/constant/queryKey.ts +++ /dev/null @@ -1,14 +0,0 @@ -export const QUERY_KEY = { - ITEM_DATA: 'itemData', - WISHES_DATA: 'wishesData', - PAYREADY: 'payReady', - PG_TOKEN: 'pgToken', - USER: 'user', - ACCOUNT: 'account', - PROGRESS: 'progress', - CAKES_COUNT: 'cakesCount', - CAKE_LETTERS: 'cakeLetters', - WISH_LINKS: 'wishLinks', - ONE_WISH: 'oneWish', - PRE_SIGNED_URL: 'preSignedURL', -}; diff --git a/constant/siteList.ts b/constant/siteList.ts deleted file mode 100644 index 3b37ffe9..00000000 --- a/constant/siteList.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { TwentynineLogoImg } from '@/public/assets/images'; -import { SiteDataType } from '@/types/siteDataType'; - -export const SITE_LIST = { - TWENTY_NINE: { - NAME: 'twentynine', - LINK: 'https://www.29cm.co.kr/', - LOGO: TwentynineLogoImg, - IMAGE_TAG: 'ewptmlp5', - PRICE_TAG: 'ent7twr4', - }, -}; diff --git a/constant/snsList.ts b/constant/snsList.ts deleted file mode 100644 index c34e8162..00000000 --- a/constant/snsList.ts +++ /dev/null @@ -1,23 +0,0 @@ - -import { KaKaoLogoImg, InstaLogoImg, FacebookLogoImg, TwitterLogoImg } from '@/public/assets/images'; -import { SNSListType } from '@/types/snsListType'; - - -export const SNS_LIST: SNSListType[] = [ - { - name: 'KakaoTalk', - logo: KaKaoLogoImg, - }, - // { - // name: 'Instagram', - // logo: InstaLogoImg, - // }, - { - name: 'FaceBook', - logo: FacebookLogoImg, - }, - { - name: 'Twitter', - logo: TwitterLogoImg, - }, -]; \ No newline at end of file diff --git a/constant/wishesStatus.ts b/constant/wishesStatus.ts deleted file mode 100644 index acba9385..00000000 --- a/constant/wishesStatus.ts +++ /dev/null @@ -1,5 +0,0 @@ -export const WISHES_STATUS = { - BEFORE: 'BEFORE', - WHILE: 'WHILE', - END: 'END', -}; diff --git a/hooks/cakes/useSelectCakes.ts b/hooks/cakes/useSelectCakes.ts deleted file mode 100644 index a73aeae8..00000000 --- a/hooks/cakes/useSelectCakes.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { CAKE_LIST } from "@/constant/cakeList"; -import { CakeListType } from "@/types/cakes/cakeListType"; -import { useState } from "react"; - -export default function useSelectCakes() { - const [selectedCake, setSelectedCake] = useState(CAKE_LIST[0]); - const [selectedIndex, setSelectedIndex] = useState(0); - - const selectCake = (index: number) => { - setSelectedCake(CAKE_LIST[index]); - setSelectedIndex(index); - }; - - return {selectedCake,selectedIndex,selectCake} -} diff --git a/hooks/common/useCheckBox.tsx b/hooks/common/useCheckBox.tsx deleted file mode 100644 index 4e29f02e..00000000 --- a/hooks/common/useCheckBox.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { useEffect, useState } from 'react'; - -export default function useCheckBox() { - const [checkBoxState, setCheckBoxState] = useState(false); - - useEffect(() => { - setCheckBoxState(false); - }, []); - - const handleChangeCheckBoxState = () => { - setCheckBoxState(!checkBoxState); - }; - - return { checkBoxState, handleChangeCheckBoxState }; -} diff --git a/hooks/common/useDate.ts b/hooks/common/useDate.ts deleted file mode 100644 index c33198d4..00000000 --- a/hooks/common/useDate.ts +++ /dev/null @@ -1,25 +0,0 @@ -export default function useDate(date: Date | null): string { - // 선택한 날짜가 없을 시 현재 날짜로 설정 - if (!date) { - date = new Date(); - } - - const year = date.getFullYear(); - const month = String(date.getMonth() + 1).padStart(2, '0'); - const day = String(date.getDate()).padStart(2, '0'); - - return `${year}-${month}-${day}`; -} - -export const convertDateFormat = (data: string | undefined): string => { - if (!data) { - return ''; - } - - const date = new Date(data); - const year = date.getFullYear(); - const month = String(date.getMonth() + 1).padStart(2, '0'); - const day = String(date.getDate()).padStart(2, '0'); - - return `${year}.${month}.${day}`; -}; diff --git a/hooks/common/useInput.tsx b/hooks/common/useInput.tsx deleted file mode 100644 index 6b17427f..00000000 --- a/hooks/common/useInput.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { useState, useCallback } from 'react'; - -export default function useInput(initValue: string, inputLimit?: number) { - const [value, setValue] = useState(initValue); - - const handleChangeInput = useCallback( - (e: React.ChangeEvent | React.ChangeEvent) => { - if (inputLimit) { - if (e.currentTarget.value.length <= inputLimit) { - setValue(e.currentTarget.value); - } - } else { - setValue(e.currentTarget.value); - } - }, - [], - ); - return [value, handleChangeInput, setValue] as const; -} diff --git a/hooks/common/useKakaoShare.ts b/hooks/common/useKakaoShare.ts deleted file mode 100644 index e7961c57..00000000 --- a/hooks/common/useKakaoShare.ts +++ /dev/null @@ -1,27 +0,0 @@ -export default function useKakaoShare(nickname: string, link: string) { - // if (window.Kakao) { - window.Kakao.Share.sendDefault({ - objectType: 'feed', - content: { - title: `${nickname}님의 생일선물을 고민하고 있다면?`, - description: - `고민할 필요없이 이 귀여운 케이크를 선물해 ${nickname}님의 생일 펀딩에 참여해보세요!`, - imageUrl: - 'https://ifh.cc/g/wWJNBF.jpg', - link: { - mobileWebUrl: link, - webUrl: link, - }, - }, - buttons: [ - { - title: '자세히 보기', - link: { - mobileWebUrl: link, - webUrl: link, - }, - }, - ], - }); - // } -} diff --git a/hooks/common/useModal.tsx b/hooks/common/useModal.tsx deleted file mode 100644 index 60b60093..00000000 --- a/hooks/common/useModal.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { useState } from 'react'; - -export default function useModal() { - const [isOpen, setIsOpen] = useState(false); - - const handleToggle = () => { - setIsOpen(!isOpen); - }; - - return { - isOpen, - handleToggle, - }; -} diff --git a/hooks/common/useSelect.ts b/hooks/common/useSelect.ts deleted file mode 100644 index 17530410..00000000 --- a/hooks/common/useSelect.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { useState } from 'react'; - -export default function useSelect() { - const [selectedItem, setSelectedItem] = useState(); -} diff --git a/hooks/queries/auth.ts b/hooks/queries/auth.ts deleted file mode 100644 index 0425339d..00000000 --- a/hooks/queries/auth.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { useRouter } from 'next/router'; -import { useEffect, useState } from 'react'; -import { useMutation } from 'react-query'; -import { useSetRecoilState } from 'recoil'; -import { LoginUserInfo } from '@/recoil/auth/loginUserInfo'; -import { postAuthKakao } from '@/api/auth'; - -export function useAuthKakao() { - const [accessToken, setAccessToken] = useState(''); - const [refreshToken, setRefreshToken] = useState(''); - const [nickName, setNickname] = useState(''); - - const setLoginUserInfo = useSetRecoilState(LoginUserInfo); - - const router = useRouter(); - const { code: authCode } = router.query; - - const { mutate: kakaoLoginMutate } = useMutation(() => postAuthKakao(authCode as string), { - onSuccess: (data) => { - const { nickName, accessToken, refreshToken } = data; - - setLoginUserInfo((prev) => ({ - ...prev, - nickName: nickName, - accessToken: accessToken, - refreshToken: refreshToken, - })); - - setAccessToken(accessToken); - setRefreshToken(refreshToken); - setNickname(nickName); - - localStorage.setItem('accessToken', accessToken); - }, - onError: (error) => { - alert('카카오 로그인에 실패하셨습니다. : ' + error); - router.back(); - }, - }); - - useEffect(() => { - if (authCode) { - kakaoLoginMutate(); - } - }, [authCode, kakaoLoginMutate]); - - return { accessToken, refreshToken, nickName }; -} diff --git a/hooks/queries/cakes.ts b/hooks/queries/cakes.ts deleted file mode 100644 index bda08be4..00000000 --- a/hooks/queries/cakes.ts +++ /dev/null @@ -1,53 +0,0 @@ -import { getCakesInfo, getCakesResult } from '@/api/cakes'; -import { QUERY_KEY } from '@/constant/queryKey'; -import { CakeLettersType } from '@/types/letters/cakeLettersType'; -import { useState } from 'react'; -import { useQuery } from 'react-query'; - -/** - * 해당 소원에 대한 케이크 조회 - */ -export function useGetCakesInfo( - wishId: string | string[] | undefined, - cakeId: string | string[] | undefined, -) { - const [lettersData, setLettersData] = useState([]); - - const { data } = useQuery(QUERY_KEY.CAKE_LETTERS, async () => getCakesInfo(wishId, cakeId), { - onSuccess: (data) => { - setLettersData(data); - }, - enabled: wishId !== '' && cakeId !== '', - }); - - const lettersSum = lettersData ? lettersData.length : 0; - - return { data, lettersData, lettersSum }; -} - -/** - * 해당 소원에 대한 모든 케이크 리스트 결과 조회 - */ - -export function useGetCakesResult(wishId: string | string[] | undefined) { - const [total, setTotal] = useState(0); - // const setCakesCountData = useSetRecoilState(CakesCountData); - - const { data: cakesCount } = useQuery(QUERY_KEY.CAKES_COUNT, async () => getCakesResult(wishId), { - onSuccess: (data) => { - // setCakesCountData(data); - if (Array.isArray(data)) { - const cakesTotal = calculateTotal(data.map((cake: { count: number }) => cake.count)); - setTotal(cakesTotal); - } - }, - enabled: wishId !== '', - }); - - const calculateTotal = (cakeCounts: number[]): number => { - const total = cakeCounts.reduce((sum, count) => sum + count, 0); - return total; - }; - - return { cakesCount, total }; -} diff --git a/hooks/queries/public.ts b/hooks/queries/public.ts deleted file mode 100644 index c7dce5bb..00000000 --- a/hooks/queries/public.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { getPublicWishes, postPublicCakes } from '@/api/public'; -import { PostPublicCakesRequestType } from '@/types/api/request'; -import { useMutation, useQuery } from 'react-query'; - -export function useGetPublicWishes(wishId: string | string[] | undefined) { - const { data: publicWishesData } = useQuery('publicWishes', () => getPublicWishes(wishId), { - enabled: wishId !== '', - }); - - return { publicWishesData }; -} - -export function usePostPublicCakes(parameter: PostPublicCakesRequestType) { - const { - mutate: postPublicCakesData, - data: cakesResultData, - ...restProps - } = useMutation(() => postPublicCakes(parameter)); - - return { postPublicCakesData, cakesResultData, ...restProps }; -} diff --git a/hooks/queries/user.ts b/hooks/queries/user.ts deleted file mode 100644 index 342effa4..00000000 --- a/hooks/queries/user.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { getUserAccount, patchUserAccount } from '@/api/user'; -import { QUERY_KEY } from '@/constant/queryKey'; -import { WishesDataInputType } from '@/types/wishesType'; -import router from 'next/router'; -import { UseFormReturn } from 'react-hook-form'; -import { useMutation, useQuery } from 'react-query'; - -export function usePatchUserAccount(methods: UseFormReturn) { - const { mutate: patchUserAccountData } = useMutation(() => patchUserAccount(methods), { - onSuccess: () => { - router.push('/wishes/share'); - }, - }); - - return { patchUserAccountData }; -} - -export function useGetUserAccount() { - const { data: userAccountData } = useQuery(QUERY_KEY.ITEM_DATA, getUserAccount); - - return { userAccountData }; -} diff --git a/hooks/queries/wishes.ts b/hooks/queries/wishes.ts deleted file mode 100644 index ee1dcc0f..00000000 --- a/hooks/queries/wishes.ts +++ /dev/null @@ -1,127 +0,0 @@ -import { - deleteWishes, - getMainProgressData, - getProgressWishInfo, - getSingleWishInfo, - getWishes, - patchProgressWishInfo, - postWishes, -} from '@/api/wishes'; -import { QUERY_KEY } from '@/constant/queryKey'; -import { LoginUserInfo } from '@/recoil/auth/loginUserInfo'; -import { WishesDataInputType } from '@/types/wishesType'; -import { WishLinksType } from '@/types/links/wishLinksType'; -import router from 'next/router'; -import { useState } from 'react'; -import { UseFormReturn } from 'react-hook-form'; -import { useMutation, useQuery } from 'react-query'; -import { useSetRecoilState } from 'recoil'; - -/** - * 모든 소원리스트 조회 - */ -export function useGetWishes() { - const { data } = useQuery(QUERY_KEY.WISHES_DATA, getWishes); - - return data; -} - -/** - * 진행중인 소원 정보 수정 - */ -export function usePatchWishes(methods: UseFormReturn) { - const { mutate: patchWishesData } = useMutation(() => patchProgressWishInfo(methods), { - onSuccess: () => { - alert('수정성공'); - router.back(); - }, - }); - - return { patchWishesData }; -} - -/** - * 소원링크 생성 - */ -export function usePostWishes(methods: UseFormReturn) { - const setLoginUserInfo = useSetRecoilState(LoginUserInfo); - - const { mutate: postWishesData } = useMutation(() => postWishes(methods), { - onSuccess: (data) => { - setLoginUserInfo((prevData) => ({ - ...prevData, - wishesId: data.data.data, - })); - }, - }); - - return { postWishesData }; -} - -/** - * 소원링크 삭제 - */ -export function useDeleteWishes() { - const mutation = useMutation((wishesData: number[]) => deleteWishes(wishesData)); - - return mutation; -} - -/** - * 진행중인 소원 정보 조회 - */ -export function useGetWishesProgress() { - const { data: wishesProgressData, ...restProps } = useQuery( - QUERY_KEY.PROGRESS, - getProgressWishInfo, - ); - - return { wishesProgressData, ...restProps }; -} - -/** - * 진행중인 소원 조회(메인화면) - */ -export function useGetMainProgressData() { - const { data: progressData, ...restProps } = useQuery(QUERY_KEY.PROGRESS, getMainProgressData); - - return { progressData, ...restProps }; -} - -/** - * 소원 단건 조회 - */ -export function useGetSingleWishInfo(wishId: string | string[] | undefined) { - const { data: wishData } = useQuery(QUERY_KEY.ONE_WISH, async () => getSingleWishInfo(wishId), { - onError: (error: any) => { - if (error.response && error.response.status === 403) { - alert('해당 소원에 접근할 수 없습니다.'); - router.back(); - } - }, - enabled: wishId !== '', - }); - - return { wishData }; -} - -export function useGetWishLinks() { - const [noWishes, setNoWishes] = useState(true); - const [wishLinks, setWishLinks] = useState([]); - - const { data, isSuccess } = useQuery( - QUERY_KEY.WISH_LINKS, - async () => getWishes(), - { - onSuccess: (wishLinks) => { - if (wishLinks.length > 0) { - setNoWishes(false); - } - - setWishLinks(wishLinks); - }, - }, - ); - - return { wishLinks, isSuccess, noWishes }; -} diff --git a/hooks/wishes/useUploadItemInfo.ts b/hooks/wishes/useUploadItemInfo.ts deleted file mode 100644 index 100dfe73..00000000 --- a/hooks/wishes/useUploadItemInfo.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { getPresignedURL, uploadPresignedURL } from '@/api/file'; -import { QUERY_KEY } from '@/constant/queryKey'; -import { validation } from '@/validation/input'; -import { useEffect, useState } from 'react'; -import { useMutation, useQuery } from 'react-query'; - -export default function useUploadItemInfo() { - const [imageFile, setImageFile] = useState(null); - const [preSignedImageUrl, setPreSignedImageUrl] = useState(''); - - const { data, refetch } = useQuery( - QUERY_KEY.PRE_SIGNED_URL, - () => getPresignedURL(imageFile?.name), - { - enabled: - imageFile !== null && - validation.checkImageFileSize(imageFile.size) && - imageFile?.name !== '', - }, - ); - - const { mutate } = useMutation(() => uploadPresignedURL(data?.data?.data?.signedUrl, imageFile), { - onSuccess: () => { - const S3_URL = `https://wish-image-bucket.s3.ap-northeast-2.amazonaws.com/${data?.data?.data.filename}`; - setPreSignedImageUrl(S3_URL); - }, - }); - - useEffect(() => { - data?.data?.success && mutate(); - }, [data]); - - useEffect(() => { - imageFile && validation.checkImageFileSize(imageFile.size) && refetch(); - }, [imageFile]); - - function uploadImageFile(e: React.ChangeEvent) { - const imageFile = e.target.files && e.target.files[0]; - imageFile && setImageFile(imageFile); - } - - return { imageFile, preSignedImageUrl, setPreSignedImageUrl, uploadImageFile }; -} diff --git a/hooks/wishes/useWisehsStep.ts b/hooks/wishes/useWisehsStep.ts deleted file mode 100644 index 432936c0..00000000 --- a/hooks/wishes/useWisehsStep.ts +++ /dev/null @@ -1,60 +0,0 @@ -import { ColorSystemType } from '@/types/common/box/boxStyleType'; -import { useEffect, useState } from 'react'; - -export default function useWishesStep() { - const [stepIndex, setStepIndex] = useState(1); - const [prevState, setPrevState] = useState(false); - const [nextState, setNextState] = useState(false); - - useEffect(() => { - if (stepIndex === 1) { - setPrevState(false); - } else { - setPrevState(true); - } - }, [stepIndex]); - - const handleNextStep = () => { - if (stepIndex < 4) { - setStepIndex((prev) => (prev += 1)); - } - }; - - const handlePrevStep = () => { - if (stepIndex > 1) { - setStepIndex((prev) => (prev -= 1)); - } - - if (stepIndex === 2) { - setPrevState(false); - } - }; - - const changePrevState = (state: boolean) => { - setPrevState(state); - }; - - const changeNextState = (state: boolean) => { - setNextState(state); - }; - - const getNextBtnColor = (state: boolean): ColorSystemType => { - return state ? 'mainBlue_white' : 'gray1_white'; - }; - - const getPrevBtnColor = (state: boolean): ColorSystemType => { - return state ? 'pastelBlue_mainBlue' : 'gray1_white'; - }; - - return { - stepIndex, - prevState, - nextState, - changePrevState, - changeNextState, - handleNextStep, - handlePrevStep, - getNextBtnColor, - getPrevBtnColor, - }; -} diff --git a/next.config.js b/next.config.js deleted file mode 100644 index 201c01e2..00000000 --- a/next.config.js +++ /dev/null @@ -1,48 +0,0 @@ -/** @type {import('next').NextConfig} */ - -const withBundleAnalyzer = require('@next/bundle-analyzer')({ - enabled: process.env.ANALYZE === 'true', -}); - -module.exports = withBundleAnalyzer({ - compress: true, - webpack(config, { webpack }) { - const prod = process.env.NODE_ENV === 'production'; - const plugins = [...config.plugins]; - return { - ...config, - mode: prod ? 'producton' : 'development', - devtool: prod ? 'hidden-source-map' : 'eval', - plugins, - }; - }, -}); - -const nextConfig = { - reactStrictMode: true, - swcMinify: true, - images: { - remotePatterns: [ - { - protocol: 'https', - hostname: 'img.29cm.co.kr', - port: '', - pathname: '/**', - }, - ], - domains: [ - 'img.29cm.co.kr', - 'img2.29cm.co.kr', - 'product.29cm.co.kr', - 'localhost', - 'wish-image-bucket.s3.ap-northeast-2.amazonaws.com', - 'shopping-phinf.pstatic.net', - ], - }, - rules: { - test: /\.svg$/, - use: ['@svgr/webpack'], - }, -}; - -module.exports = nextConfig; diff --git a/package.json b/package.json deleted file mode 100644 index 814cd898..00000000 --- a/package.json +++ /dev/null @@ -1,55 +0,0 @@ -{ - "name": "test", - "version": "0.1.0", - "private": true, - "scripts": { - "dev": "export PORT=8080 && next dev", - "build": "ANALYZE=true NODE_ENV=production next build", - "start": "next start", - "lint": "next lint" - }, - "dependencies": { - "@next/bundle-analyzer": "^13.4.19", - "@types/node": "18.15.11", - "@types/react": "^18.2.45", - "@types/react-dom": "18.0.11", - "autoprefixer": "10.4.14", - "axios": "^1.3.5", - "cheerio": "^1.0.0-rc.12", - "eslint": "^8.38.0", - "eslint-config-next": "13.3.0", - "next": "13.3.0", - "next-pwa": "^5.6.0", - "postcss": "8.4.22", - "qs": "^6.11.2", - "react": "18.2.0", - "react-datepicker": "^4.12.0", - "react-dom": "18.2.0", - "react-hook-form": "^7.47.0", - "react-query": "^3.39.3", - "react-responsive": "^9.0.2", - "react-spinners": "^0.13.8", - "recoil": "^0.7.7", - "recoil-persist": "^4.2.0", - "serverless": "^2.59.0", - "styled-component": "^2.8.0", - "styled-components": "^5.3.9", - "styled-reset": "^4.4.6", - "tailwindcss": "3.3.1", - "typescript": "5.0.4" - }, - "devDependencies": { - "@babel/eslint-parser": "^7.21.3", - "@svgr/webpack": "^8.0.1", - "@types/qs": "^6.9.7", - "@types/react-datepicker": "^4.11.2", - "@types/styled-components": "^5.1.26", - "@typescript-eslint/eslint-plugin": "^5.59.0", - "@typescript-eslint/parser": "^5.59.0", - "babel-plugin-styled-components": "^2.1.1", - "eslint-plugin-react": "^7.32.2" - }, - "resolutions": { - "@types/react": "^18.2.45" - } -} diff --git a/pages/_app.tsx b/pages/_app.tsx deleted file mode 100644 index c8d7d061..00000000 --- a/pages/_app.tsx +++ /dev/null @@ -1,101 +0,0 @@ -import { QueryClient, QueryClientProvider } from 'react-query'; -import type { AppProps } from 'next/app'; -import Head from 'next/head'; -import { RecoilRoot } from 'recoil'; -import GlobalStyle from '../styles/GlobalStyle'; -import styled, { ThemeProvider } from 'styled-components'; -import theme from '@/styles/theme'; -import { useEffect } from 'react'; -import Script from 'next/script'; -import { useRouter } from 'next/router'; - -declare global { - interface Window { - Kakao: any; - } -} - -export default function App({ Component, pageProps }: AppProps) { - const queryClient = new QueryClient({ - defaultOptions: { - queries: { - retry: 0, - refetchOnWindowFocus: false, - }, - }, - }); - - const router = useRouter(); - - // const setVh = () => { - // document.documentElement.style.setProperty('--vh', `${window.innerHeight}px`); - // }; - - useEffect(() => { - if (window.Kakao && !window.Kakao.isInitialized()) { - window.Kakao.init(process.env.NEXT_PUBLIC_KAKAO_JAVASCRIPT_KEY); - } - //높이 resize - // window.addEventListener('resize', setVh); - // setVh(); - }, []); - - // useEffect(() => { - // const handleRouteChange = (url: string) => { - // gtag.pageview(url); - // }; - // router.events.on('routeChangeComplete', handleRouteChange); - // router.events.on('hashChangeComplete', handleRouteChange); - // return () => { - // router.events.off('routeChangeComplete', handleRouteChange); - // router.events.off('hashChangeComplete', handleRouteChange); - // }; - // }, [router.events]); - - return ( - <> - {/* Global Site Tag (gtag.js) - Google Analytics */} - - - - - - - - - {/* */} -