diff --git a/package.json b/package.json index 294e8b4f..5461b3a6 100644 --- a/package.json +++ b/package.json @@ -45,6 +45,7 @@ "framer-motion": "^11.0.6", "html-to-image": "^1.11.11", "http-proxy-middleware": "^2.0.6", + "lottie-react": "^2.4.0", "next": "14.0.4", "next-pwa": "^5.6.0", "open-graph": "^0.2.6", @@ -54,7 +55,6 @@ "react-dom": "^18.3.1", "react-hook-form": "^7.50.0", "react-ios-pwa-prompt": "^1.8.4", - "react-lottie": "^1.2.4", "react-scripts": "^5.0.1", "react-select": "^5.8.0", "react-spinners": "^0.13.8", diff --git a/src/app/_api/adminTopics/editAdminTopic.ts b/src/app/_api/adminTopics/editAdminTopic.ts index 172bee3e..f4cb1840 100644 --- a/src/app/_api/adminTopics/editAdminTopic.ts +++ b/src/app/_api/adminTopics/editAdminTopic.ts @@ -1,8 +1,7 @@ -import { editAdminTopicType } from '@/lib/types/requestedTopicType'; -//PUT "/admin/topics/{topicId}" - import axiosInstance from '@/lib/axios/axiosInstance'; +import { editAdminTopicType } from '@/lib/types/requestedTopicType'; + const editAdminTopic = async ({ topicId, isExposed, categoryCode, title }: editAdminTopicType) => { await axiosInstance.put(`/admin/topics/${topicId}`, { isExposed, diff --git a/src/app/_api/adminTopics/getAdminTopics.ts b/src/app/_api/adminTopics/getAdminTopics.ts index 9f86027c..d7041d24 100644 --- a/src/app/_api/adminTopics/getAdminTopics.ts +++ b/src/app/_api/adminTopics/getAdminTopics.ts @@ -1,5 +1,3 @@ -// GET "/admin/topics?cursorId={}&size={}" - import axiosInstance from '@/lib/axios/axiosInstance'; interface GetTopicsType { diff --git a/src/app/_api/collect/__getCollection.ts b/src/app/_api/collect/__getCollection.ts deleted file mode 100644 index fa5b0f76..00000000 --- a/src/app/_api/collect/__getCollection.ts +++ /dev/null @@ -1,22 +0,0 @@ -import axiosInstance from '@/lib/axios/axiosInstance'; - -interface GetCollectionType { - cursorId: number | undefined | null; - category: string; -} - -async function getCollection({ category, cursorId }: GetCollectionType) { - const params = new URLSearchParams({ - size: '6', - }); - - if (cursorId) { - params.append('cursorId', cursorId.toString()); - } - - const response = await axiosInstance.get(`/lists/collect?category=${category}&${params.toString()}`); - - return response.data; -} - -export default getCollection; diff --git a/src/app/_api/collect/__getCollectionCategories.ts b/src/app/_api/collect/__getCollectionCategories.ts deleted file mode 100644 index c7730476..00000000 --- a/src/app/_api/collect/__getCollectionCategories.ts +++ /dev/null @@ -1,10 +0,0 @@ -import axiosInstance from '@/lib/axios/axiosInstance'; -import { CategoryType } from '@/lib/types/categoriesType'; - -const getCollectionCategories = async () => { - const response = await axiosInstance.get('/collection/categories'); - - return response.data; -}; - -export default getCollectionCategories; diff --git a/src/app/_api/follow/getFollowerList.ts b/src/app/_api/follow/getFollowerList.ts index 70eccfd4..dd0a2033 100644 --- a/src/app/_api/follow/getFollowerList.ts +++ b/src/app/_api/follow/getFollowerList.ts @@ -3,7 +3,6 @@ import { FollowerListType } from '@/lib/types/followType'; const getFollowerList = async (userId: number) => { const response = await axiosInstance.get(`/users/${userId}/followers`); - // const response = await axiosInstance.get(`/users/${userId}/followers?size={}&cursorId={}`); return response.data; }; diff --git a/src/app/_api/list/uploadItemImages.ts b/src/app/_api/list/uploadItemImages.ts index 31947fb9..c38db9dd 100644 --- a/src/app/_api/list/uploadItemImages.ts +++ b/src/app/_api/list/uploadItemImages.ts @@ -1,6 +1,6 @@ +import axios from 'axios'; import axiosInstance from '@/lib/axios/axiosInstance'; import { ItemImagesType, PresignedUrlListType } from '@/lib/types/listType'; -import axios from 'axios'; interface UploadItemImagesProps { listId: number; diff --git a/src/app/_api/topics/getTopics.ts b/src/app/_api/topics/getTopics.ts index 4ebedae2..81476fba 100644 --- a/src/app/_api/topics/getTopics.ts +++ b/src/app/_api/topics/getTopics.ts @@ -1,5 +1,3 @@ -// GET "/topics?cursorId={}&size={}" - import axiosInstance from '@/lib/axios/axiosInstance'; interface GetTopicsType { diff --git a/src/app/_api/user/getUsersByNicknameSearch.ts b/src/app/_api/user/getUsersByNicknameSearch.ts index 0a6b00c4..5517f721 100644 --- a/src/app/_api/user/getUsersByNicknameSearch.ts +++ b/src/app/_api/user/getUsersByNicknameSearch.ts @@ -3,7 +3,6 @@ import { UserSearchType } from '@/lib/types/user'; const getUsersByNicknameSearch = async (search: string) => { const response = await axiosInstance.get(`/users?search=${search}`); - // const response = await axiosInstance.get(`/collaborators?search=${search}&size={}&page={}`); return response.data; }; diff --git a/src/app/_context/init.ts b/src/app/_context/init.ts deleted file mode 100644 index e099ee9f..00000000 --- a/src/app/_context/init.ts +++ /dev/null @@ -1,2 +0,0 @@ -// 보일러플레이트용 임시 파일 -// 추후 이 파일은 지워주세요 diff --git a/src/app/account/profile/_components/ProfileForm.tsx b/src/app/account/profile/_components/ProfileForm.tsx index 385580d7..4d678a73 100644 --- a/src/app/account/profile/_components/ProfileForm.tsx +++ b/src/app/account/profile/_components/ProfileForm.tsx @@ -164,7 +164,7 @@ export default function ProfileForm({ useEffect(() => { setSelectedBackground(getValues('backgroundImageUrl') as string); setSelectedProfile(getValues('profileImageUrl') as string); - }, []); + }, [getValues]); return ( <> diff --git a/src/app/account/profile/_components/ProfileSkeleton.tsx b/src/app/account/profile/_components/ProfileSkeleton.tsx index 0da9eff2..870a6480 100644 --- a/src/app/account/profile/_components/ProfileSkeleton.tsx +++ b/src/app/account/profile/_components/ProfileSkeleton.tsx @@ -1,6 +1,4 @@ import Skeleton from '@/components/Skeleton/Skeleton'; -import * as pageStyles from '../page.css'; -import * as previewStyles from './ImagePreview.css'; import * as styles from './ProfileForm.css'; const NUMBER_OF_BACKGROUND_OPTIONS = 8; diff --git a/src/app/account/profile/page.tsx b/src/app/account/profile/page.tsx index 17f08bb1..8ecc2bcc 100644 --- a/src/app/account/profile/page.tsx +++ b/src/app/account/profile/page.tsx @@ -1,4 +1,5 @@ 'use client'; + import { useEffect, useState } from 'react'; import { FormProvider, useForm } from 'react-hook-form'; import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; diff --git a/src/app/auth/redirect/kakao/page.tsx b/src/app/auth/redirect/kakao/page.tsx index ab717ecf..82c6466f 100644 --- a/src/app/auth/redirect/kakao/page.tsx +++ b/src/app/auth/redirect/kakao/page.tsx @@ -11,6 +11,8 @@ import { setCookie } from '@/lib/utils/cookie'; import Loading from '@/components/loading/Loading'; +import { vars } from '@/styles/theme.css'; + export default function KakaoRedirectPage() { const router = useRouter(); const { updateUser } = useUser(); @@ -73,6 +75,7 @@ export default function KakaoRedirectPage() { alignItems: 'center', justifyContent: 'center', height: '100vh', + backgroundColor: vars.color.white, }} > diff --git a/src/app/collection/[folderId]/page.tsx b/src/app/collection/[folderId]/page.tsx index 00896bdc..2ac48942 100644 --- a/src/app/collection/[folderId]/page.tsx +++ b/src/app/collection/[folderId]/page.tsx @@ -125,7 +125,7 @@ export default function CollectionDetailPage({ params }: ParamType) { if (listData) { setValue(listData.pages[0].folderName); } - }, []); + }, [listData]); return (
diff --git a/src/app/collection/_[category]/_components/Top3Card.css.ts b/src/app/collection/_[category]/_components/Top3Card.css.ts deleted file mode 100644 index 88d92588..00000000 --- a/src/app/collection/_[category]/_components/Top3Card.css.ts +++ /dev/null @@ -1,138 +0,0 @@ -import { style, createVar } from '@vanilla-extract/css'; -import { vars } from '@/styles/__theme.css'; - -export const listColor = createVar(); -export const listBackgroundImage = createVar(); - -export const container = style({ - minWidth: '17rem', - - display: 'flex', - flexDirection: 'column', - justifyContent: 'flex-start', - alignItems: 'center', -}); - -export const card = style({ - width: '100%', - - display: 'flex', - flexDirection: 'column', - rowGap: '1rem', - columnGap: '1.6rem', -}); - -export const listWrapper = style({ - width: '100%', - height: '26rem', - padding: '3rem 1.8rem', - - position: 'relative', - - display: 'flex', - flexDirection: 'column', - justifyContent: 'center', - - border: `1px solid ${vars.color.gray5}`, - borderRadius: '10px', - - backgroundColor: listColor, - backgroundImage: `linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent), ${listBackgroundImage}`, - backgroundSize: 'cover', - backgroundPosition: 'center', - cursor: 'pointer', - - ':hover': { - boxShadow: 'rgba(0, 0, 0, 0.3) 3px 3px 2px;', - borderWidth: '1.5px', - }, -}); - -export const skeletonListWrapper = style([ - listWrapper, - { - cursor: 'default', - ':hover': { - boxShadow: 'none', - borderWidth: '1px', - }, - }, -]); - -export const userProfiles = style({ - width: '80%', - - position: 'absolute', - bottom: '1rem', - - display: 'flex', - alignItems: 'center', - gap: '.8rem', -}); - -export const userImageWrapper = style({ - width: '3.2rem', - height: '3.2rem', - - border: `1px solid ${vars.color.gray5}`, - borderRadius: '50px', - - flexShrink: 0, - - overflow: 'hidden', -}); - -export const userImage = style({ - width: '100%', - height: '100%', - - borderRadius: '50px', - backgroundColor: vars.color.gray7, - objectFit: 'cover', -}); - -export const userTextWrapper = style({ - width: '100%', - - display: 'flex', - flexDirection: 'column', - justifyContent: 'center', -}); - -export const nameText = style({ - width: '100%', - - fontSize: '1.2rem', - fontWeight: '400', - color: vars.color.white, - - wordWrap: 'break-word', -}); - -export const updatedDateText = style({ - fontSize: '1.1rem', - color: vars.color.white, -}); - -export const title = style({ - fontSize: '1.8rem', - fontWeight: '600', - color: 'var(--text-text-grey-dark, #202020)', - textAlign: 'left', - letterSpacing: '0.14px', - wordWrap: 'break-word', -}); - -export const list = style({ - padding: '1rem 0', - - display: 'flex', - flexDirection: 'column', - gap: '.8rem', - - fontSize: '1.2rem', - fontWeight: '400', - color: vars.color.white, - lineHeight: '2.5rem', - letterSpacing: '-0.36px', -}); diff --git a/src/app/collection/_[category]/_components/Top3Card.tsx b/src/app/collection/_[category]/_components/Top3Card.tsx deleted file mode 100644 index 6802efe3..00000000 --- a/src/app/collection/_[category]/_components/Top3Card.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import Image from 'next/image'; -import { useMemo } from 'react'; -import { useRouter } from 'next/navigation'; -import { assignInlineVars } from '@vanilla-extract/dynamic'; - -import * as styles from './Top3Card.css'; -import { CollectionType } from '@/lib/types/listType'; -import formatDate from '@/lib/utils/dateFormat'; -import Top3CardItem from './Top3CardItem'; -import DefaultProfile from '/public/icons/default_profile.svg'; -import { collectionLocale } from '@/app/collection/locale'; -import { useLanguage } from '@/store/useLanguage'; -import { BACKGROUND_COLOR_READ } from '@/styles/Color'; - -// TODO: search 아래의 Top3Card와 공통으로 수정하기 -export default function Top3Card({ collectionList }: { collectionList: CollectionType }) { - const { language } = useLanguage(); - const { list } = collectionList; - - const router = useRouter(); - const handleCardClick = () => { - router.push(`/list/${list.id}`); - }; - - const Top3CardComponent = useMemo( - () => ( -
-
-
-
    -
      - {list.listItems.map((item, index) => { - if (index > 2) return; - return ; - })} -
    -
- -
-
- {list.ownerProfileImageUrl ? ( - {collectionLocale[language].profileImageAlt} - ) : ( - - )} -
-
-
{list.ownerNickname}
-
{formatDate(list.updatedDate)}
-
-
-
-

{list.title}

-
-
- ), - [list, handleCardClick] - ); - - return Top3CardComponent; -} diff --git a/src/app/collection/_[category]/_components/Top3CardItem.css.ts b/src/app/collection/_[category]/_components/Top3CardItem.css.ts deleted file mode 100644 index f586e0be..00000000 --- a/src/app/collection/_[category]/_components/Top3CardItem.css.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { style } from '@vanilla-extract/css'; - -export const container = style({ - display: 'flex', - gap: '5px', - - fontSize: '1.4rem', - fontWeight: '400', - letterSpacing: '0.08px', -}); - -export const titleText = style({ - overflow: 'hidden', - textOverflow: 'ellipsis', - display: '-webkit-box', - WebkitLineClamp: 1, - WebkitBoxOrient: 'vertical', -}); diff --git a/src/app/collection/_[category]/_components/Top3CardItem.tsx b/src/app/collection/_[category]/_components/Top3CardItem.tsx deleted file mode 100644 index 905f5b7a..00000000 --- a/src/app/collection/_[category]/_components/Top3CardItem.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import * as styles from './Top3CardItem.css'; -import { ListItemType } from '@/lib/types/listType'; - -interface CardItemProps { - item: ListItemType; - index: number; -} - -export default function Top3CardItem({ item, index }: CardItemProps) { - return ( -
  • - {index + 1}. - {item.title} -
    • - ); -} diff --git a/src/app/collection/_[category]/_components/Top3CardSkeleton.tsx b/src/app/collection/_[category]/_components/Top3CardSkeleton.tsx deleted file mode 100644 index 23f2fc27..00000000 --- a/src/app/collection/_[category]/_components/Top3CardSkeleton.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import Skeleton from '@mui/material/Skeleton'; -import * as styles from './Top3Card.css'; - -function Top3CardSkeleton() { - return ( -
    -
    -
      -
        - {Array.from({ length: 3 }).map((_, index) => ( - - ))} -
      -
    - -
    -
    - -
    -
    - - -
    -
    -
    - -
    - ); -} - -export default Top3CardSkeleton; diff --git a/src/app/collection/_[category]/page.css.ts b/src/app/collection/_[category]/page.css.ts deleted file mode 100644 index 74c49136..00000000 --- a/src/app/collection/_[category]/page.css.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { style } from '@vanilla-extract/css'; - -export const container = style({ - paddingBottom: '9rem', -}); - -export const cardsWrapper = style({ - width: '100%', - padding: '1.8rem 1.6rem', - - display: 'flex', - justifyContent: 'center', - alignItems: 'center', -}); - -export const cards = style({ - width: '100%', - - display: 'grid', - gridTemplateColumns: 'repeat(2, 49%)', - gridAutoRows: 'auto', - gap: '1.6rem 0.8rem', - - '@media': { - 'screen and (max-width: 380px)': { - gridTemplateColumns: 'repeat(1, 100%)', - }, - }, -}); diff --git a/src/app/collection/_[category]/page.tsx b/src/app/collection/_[category]/page.tsx deleted file mode 100644 index e9cfb189..00000000 --- a/src/app/collection/_[category]/page.tsx +++ /dev/null @@ -1,122 +0,0 @@ -'use client'; - -import { useRouter, useParams } from 'next/navigation'; - -import Header from '@/components/Header/__Header'; -import * as styles from './page.css'; -import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query'; -import { QUERY_KEYS } from '@/lib/constants/queryKeys'; -import { useEffect, useMemo } from 'react'; -import useIntersectionObserver from '@/hooks/useIntersectionObserver'; -import getCollection from '@/app/_api/collect/__getCollection'; -import Top3CardSkeleton from '@/app/collection/_[category]/_components/Top3CardSkeleton'; -import NoData from '@/app/collection/[folderId]/_components/NoData'; -import { CollectionType } from '@/lib/types/listType'; -import Top3Card from '@/app/collection/_[category]/_components/Top3Card'; -import { categoriesLocale } from '@/app/collection/locale'; -import { useLanguage } from '@/store/useLanguage'; - -type categoryNameType = - | 'entire' - | 'culture' - | 'life' - | 'place' - | 'music' - | 'movie_drama' - | 'book' - | 'animal_plant' - | 'etc' - | 'food'; - -function CollectionByCategory() { - const { language } = useLanguage(); - const queryClient = useQueryClient(); - const router = useRouter(); - const params = useParams<{ category: string }>(); - const category = params?.category ?? 'entire'; - - // 콜렉션 조회 - const { - data: collectionData, - hasNextPage, - fetchNextPage, - isFetchingNextPage, - isFetching, - } = useInfiniteQuery({ - queryKey: [QUERY_KEYS.getCollection], - queryFn: ({ pageParam: cursorId }) => { - return getCollection({ category, cursorId }); - }, - initialPageParam: null, - getNextPageParam: (lastPage) => (lastPage.hasNext ? lastPage.cursorId : null), - }); - - // 검색결과 변수 - const result = useMemo(() => { - const resultList = collectionData ? collectionData.pages.flatMap(({ collectionLists }) => collectionLists) : []; - return { resultList }; - }, [collectionData]); - - // 옵저버 - const ref = useIntersectionObserver(() => { - if (hasNextPage) { - fetchNextPage(); - } - }); - - // 쿼리 리셋 - useEffect(() => { - return () => { - queryClient.removeQueries({ - queryKey: [QUERY_KEYS.getCollection], - exact: true, - }); - }; - }, [queryClient, category]); - - const Result = () => { - return ( -
    -
    -
    - {result?.resultList?.map((collectionList: CollectionType) => ( - - ))} - {isFetchingNextPage && result?.resultList?.map((_, index) => )} -
    -
    -
    - ); - }; - - return ( - <> -
    { - router.back(); - }} - right={
    } - /> - <> - {!collectionData && isFetching ? ( // 최초 검색결과 받기 전 -
    -
    - {Array.from({ length: 6 }).map((_, index) => ( - - ))} -
    -
    - ) : result.resultList?.length > 0 ? ( // 데이터가 있는 경우 - - ) : ( - - )} - {hasNextPage &&
    } - - - ); -} - -export default CollectionByCategory; diff --git a/src/app/collection/__page.css.ts b/src/app/collection/__page.css.ts deleted file mode 100644 index 5371635a..00000000 --- a/src/app/collection/__page.css.ts +++ /dev/null @@ -1,70 +0,0 @@ -import { style, keyframes } from '@vanilla-extract/css'; -import * as fonts from '@/styles/__font.css'; - -export const wrapper = style({ - marginBottom: 70, -}); - -export const title = style([ - fonts.headlineSmall, - { - padding: '24px 16px', - }, -]); - -export const categoryFolders = style({ - padding: '18px 16px', - display: 'grid', - gridTemplateColumns: '1fr 1fr', - gridTemplateRows: 'repeat(5, 1fr)', - gridColumnGap: 15, - gridRowGap: 25, -}); - -export const categoryContainer = style({ - height: '100%', -}); - -export const categoryFolder = style({ - width: 160, - height: 120, - margin: 'auto', - position: 'relative', - - cursor: 'pointer', -}); - -export const folderIcon = style({ - width: 160, - height: 120, -}); - -const folderHoverAnimation = keyframes({ - '0%': { - transform: 'scale(1)', - }, - '100%': { - transform: 'scale(1.2)', - }, -}); - -export const categoryIcon = style({ - position: 'absolute', - bottom: 22, - left: '50%', - marginLeft: -25, - - selectors: { - [`${categoryFolder}:hover &`]: { - animation: `${folderHoverAnimation} 0.1s forwards`, - }, - }, -}); - -export const categoryLabel = style([ - fonts.titleSmall, - { - marginTop: '1.4rem', - textAlign: 'center', - }, -]); diff --git a/src/app/collection/__page.tsx b/src/app/collection/__page.tsx deleted file mode 100644 index 3adf1e77..00000000 --- a/src/app/collection/__page.tsx +++ /dev/null @@ -1,96 +0,0 @@ -// Ver1.0 콜렉션 페이지 입니다. - -'use client'; - -import { useRouter } from 'next/navigation'; -import Image from 'next/image'; -import { useQuery } from '@tanstack/react-query'; - -import { CategoryType } from '@/lib/types/categoriesType'; -import { QUERY_KEYS } from '@/lib/constants/queryKeys'; -import { collectionLocale } from '@/app/collection/locale'; -import { useLanguage } from '@/store/useLanguage'; -import { categoriesLocale } from '@/app/collection/locale'; - -import EntireFolder from '/public/icons/folder_entire.svg'; -import CultureFolder from '/public/icons/folder_culture.svg'; -import LifeFolder from '/public/icons/folder_life.svg'; -import PlaceFolder from '/public/icons/folder_place.svg'; -import MusicFolder from '/public/icons/folder_music.svg'; -import MovieDramaFolder from '/public/icons/folder_movie_drama.svg'; -import AnimalPlantFolder from '/public/icons/folder_animal_plant.svg'; -import EtcFolder from '/public/icons/folder_etc.svg'; -import BookFolder from '/public/icons/folder_book.svg'; -import FoodFolder from '/public/icons/folder_food.svg'; - -import getCollectionCategories from '../_api/collect/__getCollectionCategories'; - -import * as styles from './__page.css'; - -const codeToFolderIcon = (code: string, language: string) => { - switch (code) { - case '0': - return ; - case '1': - return ; - case '2': - return ; - case '3': - return ; - case '4': - return ; - case '5': - return ; - case '6': - return ; - case '7': - return ; - case '8': - return ; - case '9': - return ; - } -}; - -export default function CollectionPage() { - const { language } = useLanguage(); - const router = useRouter(); - - const { data } = useQuery({ - queryKey: [QUERY_KEYS.getCollectionCategories], - queryFn: getCollectionCategories, - }); - - const handleCategoryClick = (category: string) => { - router.push(`/collection/${category}`); - }; - - return ( -
    -
    {collectionLocale[language].collection}
    -
    - {data && - data.map((category) => ( -
    -
    { - handleCategoryClick(category.engName); - }} - > - {`${category.korName} -
    {codeToFolderIcon(category.code, language)}
    -
    -

    {language === 'ko' ? category.korName : category.engName}

    -
    - ))} -
    -
    - ); -} diff --git a/src/app/intro/_components/LabelsAnimation.css.ts b/src/app/intro/_components/LabelsAnimation.css.ts index 8422bb39..260dea10 100644 --- a/src/app/intro/_components/LabelsAnimation.css.ts +++ b/src/app/intro/_components/LabelsAnimation.css.ts @@ -1,6 +1,4 @@ import { style, keyframes } from '@vanilla-extract/css'; -import { vars } from '@/styles/__theme.css'; -import * as fonts from '@/styles/__font.css'; export const wrapper = style({ height: '300px', diff --git a/src/app/intro/_components/SearchBar.css.ts b/src/app/intro/_components/SearchBar.css.ts index c786f0e8..d9f8a156 100644 --- a/src/app/intro/_components/SearchBar.css.ts +++ b/src/app/intro/_components/SearchBar.css.ts @@ -1,4 +1,4 @@ -import { style, keyframes } from '@vanilla-extract/css'; +import { style } from '@vanilla-extract/css'; import { vars } from '@/styles/__theme.css'; import * as fonts from '@/styles/__font.css'; diff --git a/src/app/intro/_components/Section3.tsx b/src/app/intro/_components/Section3.tsx index 3895a048..2b27365b 100644 --- a/src/app/intro/_components/Section3.tsx +++ b/src/app/intro/_components/Section3.tsx @@ -1,5 +1,4 @@ 'use client'; -import Image from 'next/image'; import MotionWrapper from './MotionWrapper'; import * as styles from './Section3.css'; diff --git a/src/app/intro/_components/Section4.css.ts b/src/app/intro/_components/Section4.css.ts index 73964081..6d480501 100644 --- a/src/app/intro/_components/Section4.css.ts +++ b/src/app/intro/_components/Section4.css.ts @@ -1,5 +1,4 @@ import { style, keyframes } from '@vanilla-extract/css'; -import { vars } from '@/styles/__theme.css'; import * as fonts from '@/styles/__font.css'; export const background = style({ diff --git a/src/app/intro/_components/Section5.css.ts b/src/app/intro/_components/Section5.css.ts index 4ad36b51..900ba5c0 100644 --- a/src/app/intro/_components/Section5.css.ts +++ b/src/app/intro/_components/Section5.css.ts @@ -1,4 +1,4 @@ -import { style, keyframes } from '@vanilla-extract/css'; +import { style } from '@vanilla-extract/css'; import { vars } from '@/styles/__theme.css'; import * as fonts from '@/styles/__font.css'; diff --git a/src/app/intro/_components/Section7.css.ts b/src/app/intro/_components/Section7.css.ts index dc0802d7..3e4c335b 100644 --- a/src/app/intro/_components/Section7.css.ts +++ b/src/app/intro/_components/Section7.css.ts @@ -1,4 +1,4 @@ -import { style, createVar } from '@vanilla-extract/css'; +import { style } from '@vanilla-extract/css'; import { vars } from '@/styles/__theme.css'; import * as fonts from '@/styles/__font.css'; diff --git a/src/app/list/[listId]/edit/page.tsx b/src/app/list/[listId]/edit/page.tsx index 099b2fdd..7e287ee2 100644 --- a/src/app/list/[listId]/edit/page.tsx +++ b/src/app/list/[listId]/edit/page.tsx @@ -90,7 +90,7 @@ export default function EditPage() { } methods.trigger(['title']); - }, [listDetailData, categories, methods]); + }, [listDetailData, categories, methods, user.id]); /** Request 보내기 */ //--- 포맷 맞추기 diff --git a/src/app/list/create/_components/StepOne.tsx b/src/app/list/create/_components/StepOne.tsx index 986f0729..aee6d77d 100644 --- a/src/app/list/create/_components/StepOne.tsx +++ b/src/app/list/create/_components/StepOne.tsx @@ -1,6 +1,6 @@ 'use client'; -import { useEffect, useState } from 'react'; +import { useEffect } from 'react'; import { useRouter } from 'next/navigation'; import { useFormContext, useWatch } from 'react-hook-form'; import { useQuery } from '@tanstack/react-query'; @@ -11,7 +11,6 @@ import { listCategoryRules, listDescriptionRules, listTitleRules } from '@/lib/c import { useLanguage } from '@/store/useLanguage'; import Header from '@/components/Header/Header'; -import { getListDetail } from '@/app/_api/list/getLists'; //TODO: 확인하기 import getCategories from '@/app/_api/category/getCategories'; import { listError, listLocale } from '@/app/list/create/locale'; diff --git a/src/app/list/create/_components/StepThree.tsx b/src/app/list/create/_components/StepThree.tsx index d7a0add7..e5f67cab 100644 --- a/src/app/list/create/_components/StepThree.tsx +++ b/src/app/list/create/_components/StepThree.tsx @@ -42,7 +42,7 @@ export default function StepThree({ onBeforeClick, onNextClick, type, isSubmitti register: labelRegister, setError, clearErrors, - formState: { errors: labelError, isValid: isLabelValid }, + formState: { errors: labelError }, } = useForm<{ newLabel: string }>({ mode: 'onChange', defaultValues: { @@ -244,7 +244,7 @@ export default function StepThree({ onBeforeClick, onNextClick, type, isSubmitti className={styles.radioInput} type="radio" checked={!isPublic} - onChange={(e) => { + onChange={() => { setIsPublic(false); setValue('isPublic', false); }} diff --git a/src/app/list/create/_components/StepTwo.tsx b/src/app/list/create/_components/StepTwo.tsx index 62ac6954..4456b9fb 100644 --- a/src/app/list/create/_components/StepTwo.tsx +++ b/src/app/list/create/_components/StepTwo.tsx @@ -16,7 +16,7 @@ import ItemAccordion from './ItemAccordion'; import AddIcon from '/public/icons/add.svg'; import * as styles from './Step.css'; -import { ItemType, ListCreateType } from '@/lib/types/listType'; +import { ItemType } from '@/lib/types/listType'; import toasting from '@/lib/utils/toasting'; import toastMessage from '@/lib/constants/toastMessage'; import NoDataComponent from '@/components/NoData/NoDataComponent'; diff --git a/src/app/list/create/page.tsx b/src/app/list/create/page.tsx index ae0ceb7b..b8c5e811 100644 --- a/src/app/list/create/page.tsx +++ b/src/app/list/create/page.tsx @@ -91,7 +91,7 @@ export default function CreatePage() { //데이터 쪼개기 const listData: ListCreateType = { ...originData, - items: originData.items.map(({ imageUrl, ...rest }) => { + items: originData.items.map(({ ...rest }) => { return { ...rest, imageUrl: '', diff --git a/src/app/start-listy/page.tsx b/src/app/start-listy/page.tsx index 63532333..31005b4b 100644 --- a/src/app/start-listy/page.tsx +++ b/src/app/start-listy/page.tsx @@ -8,7 +8,7 @@ */ import { useQuery } from '@tanstack/react-query'; -import { useEffect, useState } from 'react'; +import { useCallback, useEffect, useState } from 'react'; import { useUser } from '@/store/useUser'; import getUserOne from '../_api/user/getUserOne'; @@ -36,7 +36,7 @@ export default function StartListyPage() { setStepIndex((prev) => prev + 1); }; - const handleBackControl = () => { + const handleBackControl = useCallback(() => { /** TODO * 뒤로가기 클릭시, [온보딩을 종료할까요?] 모달 @@ -47,7 +47,7 @@ export default function StartListyPage() { alert(startListyLocale[language].endOnboardingMessage); // 다른 페이지로 이동 - }; + }, [language]); useEffect(() => { history.pushState('onboard', '', '/intro'); // 브라우저 기본 동작으로 온보딩페이지에 접근하지 못하도록 설정 @@ -55,7 +55,7 @@ export default function StartListyPage() { return () => { window.removeEventListener('popstate', handleBackControl); }; - }, []); + }, [handleBackControl]); return ( <> diff --git a/src/app/topics/_components/BottomSheet.tsx b/src/app/topics/_components/BottomSheet.tsx index 7827f546..eacd295e 100644 --- a/src/app/topics/_components/BottomSheet.tsx +++ b/src/app/topics/_components/BottomSheet.tsx @@ -48,7 +48,7 @@ function BottomSheet({ onClose }: BottomSheetProps) { setIsAnonymous(false); openModal(); }, - onError: (error) => { + onError: () => { setErrorMessage('요청 중 오류가 발생했습니다. 다시 시도해 주세요. :('); }, }); diff --git a/src/app/user/[userId]/(follow)/_components/UserList.tsx b/src/app/user/[userId]/(follow)/_components/UserList.tsx index dd1d586f..43dc36ff 100644 --- a/src/app/user/[userId]/(follow)/_components/UserList.tsx +++ b/src/app/user/[userId]/(follow)/_components/UserList.tsx @@ -12,23 +12,9 @@ import { QUERY_KEYS } from '@/lib/constants/queryKeys'; import * as styles from './UserList.css'; import NoDataComponent from '@/components/NoData/NoDataComponent'; -import getFollowerList from '@/app/_api/follow/getFollowerList'; import { userLocale } from '@/app/user/locale'; import { useLanguage } from '@/store/useLanguage'; -// const BUTTON_MESSAGE = { -// ko: { -// delete: '삭제', -// }, -// }; -// -// const EMPTY_MESSAGE = { -// ko: { -// follower: '아직은 팔로워가 없어요', -// following: '아직 팔로우한 사람이 없어요', -// }, -// }; - function DeleteFollowerButton({ userId }: { userId: number }) { const { language } = useLanguage(); const { user } = useUser(); diff --git a/src/components/BottomSheet/ver3.0/BottomSheetContent.tsx b/src/components/BottomSheet/ver3.0/BottomSheetContent.tsx index 5edcf97d..9849a233 100644 --- a/src/components/BottomSheet/ver3.0/BottomSheetContent.tsx +++ b/src/components/BottomSheet/ver3.0/BottomSheetContent.tsx @@ -1,4 +1,3 @@ -import { ReactNode } from 'react'; import * as styles from './BottomSheet.css'; interface ContentsType { diff --git a/src/components/SegmentedControl/SegmentedControl.tsx b/src/components/SegmentedControl/SegmentedControl.tsx index a6de0070..f90ec712 100644 --- a/src/components/SegmentedControl/SegmentedControl.tsx +++ b/src/components/SegmentedControl/SegmentedControl.tsx @@ -3,7 +3,7 @@ import * as styles from './SegmentedCotrol.css'; interface SegmentedControlProps { options: string[]; selected: string; - handleSelect: (option: any) => void; + handleSelect: (option: string) => void; } export default function SegmentedControl({ options, selected, handleSelect }: SegmentedControlProps) { diff --git a/src/components/SegmentedControl/SegmentedCotrol.css.ts b/src/components/SegmentedControl/SegmentedCotrol.css.ts index 91b8ca13..dab8eed1 100644 --- a/src/components/SegmentedControl/SegmentedCotrol.css.ts +++ b/src/components/SegmentedControl/SegmentedCotrol.css.ts @@ -1,5 +1,4 @@ import { style } from '@vanilla-extract/css'; -import * as fonts from '@/styles/font.css'; import { vars } from '@/styles/theme.css'; export const track = style({ diff --git a/src/components/SimpleList/SimpleList.tsx b/src/components/SimpleList/SimpleList.tsx index 018a8555..c45fb2a5 100644 --- a/src/components/SimpleList/SimpleList.tsx +++ b/src/components/SimpleList/SimpleList.tsx @@ -1,10 +1,6 @@ -import Image from 'next/image'; - -import { ListItemType } from '@/lib/types/homeType'; import * as styles from './SimpleList.css'; import HeartIcon from '/public/icons/ver3/blue_heart.svg'; -import { commonLocale } from '@/components/locale'; -import { useLanguage } from '@/store/useLanguage'; +import { ListItemType } from '@/lib/types/listType'; interface SimpleListProps { items: ListItemType[]; diff --git a/src/components/loading/Loading.tsx b/src/components/loading/Loading.tsx index 6eab3652..fce5a349 100644 --- a/src/components/loading/Loading.tsx +++ b/src/components/loading/Loading.tsx @@ -1,16 +1,16 @@ -import Lottie from 'react-lottie'; +import Lottie from 'lottie-react'; import animation from './Animation - 1708700954738.json'; function Loading() { - const defaultOptions = { - loop: true, - autoplay: true, - animationData: animation, - rendererSettings: { - preserveAspectRatio: 'xMidYMid slice', - }, - }; - return ; + return ( + + ); } export default Loading; diff --git a/src/hooks/useToast.ts b/src/hooks/useToast.ts index 62f26c07..56abe279 100644 --- a/src/hooks/useToast.ts +++ b/src/hooks/useToast.ts @@ -24,7 +24,7 @@ const useToasting = ({ type = 'default', txt = '' }: ToastingProps) => { transition: Slide, }; - if (type !== ('success' || 'error' || 'warning')) { + if (type === 'default') { toast(txt, toastOption); } else { toast[type](txt, toastOption); diff --git a/src/lib/utils/saveImageFromHtml.ts b/src/lib/utils/saveImageFromHtml.ts index 83974b62..260b2be9 100644 --- a/src/lib/utils/saveImageFromHtml.ts +++ b/src/lib/utils/saveImageFromHtml.ts @@ -6,7 +6,7 @@ interface SaveImageFromHtmlProps { element: HTMLElement; } -async function saveImageFromHtml({ filename, element }: SaveImageFromHtmlProps) { +async function saveImageFromHtml({ filename }: SaveImageFromHtmlProps) { const saveElement: HTMLElement | null = document.querySelector('#rankList'); if (!saveElement) { console.error('리스트를 찾을 수 없습니다.'); diff --git a/yarn.lock b/yarn.lock index 2bd2ecd9..5b5ef784 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4706,14 +4706,6 @@ babel-preset-react-app@^10.0.1: babel-plugin-macros "^3.1.0" babel-plugin-transform-react-remove-prop-types "^0.4.24" -babel-runtime@^6.26.0: - version "6.26.0" - resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe" - integrity sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g== - dependencies: - core-js "^2.4.0" - regenerator-runtime "^0.11.0" - bail@^2.0.0: version "2.0.2" resolved "https://registry.yarnpkg.com/bail/-/bail-2.0.2.tgz#d26f5cd8fe5d6f832a31517b9f7c356040ba6d5d" @@ -5392,11 +5384,6 @@ core-js-pure@^3.23.3: resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.39.0.tgz#aa0d54d70a15bdc13e7c853db87c10abc30d68f3" integrity sha512-7fEcWwKI4rJinnK+wLTezeg2smbFFdSBP6E2kQZNbnzM2s1rpKQ6aaRteZSSg7FLU3P0HGGVo/gbpfanU36urg== -core-js@^2.4.0: - version "2.6.12" - resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec" - integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ== - core-js@^3.19.2: version "3.39.0" resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.39.0.tgz#57f7647f4d2d030c32a72ea23a0555b2eaa30f83" @@ -9960,7 +9947,14 @@ loose-envify@^1.1.0, loose-envify@^1.4.0: dependencies: js-tokens "^3.0.0 || ^4.0.0" -lottie-web@^5.12.2: +lottie-react@^2.4.0: + version "2.4.0" + resolved "https://registry.yarnpkg.com/lottie-react/-/lottie-react-2.4.0.tgz#f7249eee2b1deee70457a2d142194fdf2456e4bd" + integrity sha512-pDJGj+AQlnlyHvOHFK7vLdsDcvbuqvwPZdMlJ360wrzGFurXeKPr8SiRCjLf3LrNYKANQtSsh5dz9UYQHuqx4w== + dependencies: + lottie-web "^5.10.2" + +lottie-web@^5.10.2: version "5.12.2" resolved "https://registry.yarnpkg.com/lottie-web/-/lottie-web-5.12.2.tgz#579ca9fe6d3fd9e352571edd3c0be162492f68e5" integrity sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg== @@ -12020,7 +12014,7 @@ prompts@^2.0.1, prompts@^2.4.2: kleur "^3.0.3" sisteransi "^1.0.5" -prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.8.1: +prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -12233,15 +12227,6 @@ react-is@^18.0.0, react-is@^18.3.1: resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e" integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg== -react-lottie@^1.2.4: - version "1.2.10" - resolved "https://registry.yarnpkg.com/react-lottie/-/react-lottie-1.2.10.tgz#399f78a448a7833b2380d74fc489ecf15f8d18c7" - integrity sha512-x0eWX3Z6zSx1XM5QSjnLupc6D22LlMCB0PH06O/N/epR2hsLaj1Vxd9RtMnbbEHjJ/qlsgHJ6bpN3vnZI92hjw== - dependencies: - babel-runtime "^6.26.0" - lottie-web "^5.12.2" - prop-types "^15.6.1" - react-markdown@~9.0.1: version "9.0.1" resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-9.0.1.tgz#c05ddbff67fd3b3f839f8c648e6fb35d022397d1" @@ -12486,11 +12471,6 @@ regenerate@^1.4.2: resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a" integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A== -regenerator-runtime@^0.11.0: - version "0.11.1" - resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9" - integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg== - regenerator-runtime@^0.13.9: version "0.13.11" resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"