From da972cf5d4f13ac5472d7a9ee1297b96f665aec8 Mon Sep 17 00:00:00 2001 From: Nahyun-Kang Date: Thu, 8 Aug 2024 18:01:27 +0900 Subject: [PATCH 01/86] =?UTF-8?q?Feat:=20=ED=99=88=20=ED=8F=B4=EB=8D=94=20?= =?UTF-8?q?=EB=B0=8F=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(home)/page.css.ts | 7 ++ src/app/(home)/page.tsx | 79 +++++++++++++++++++ src/app/{page.tsx => __page.tsx} | 0 .../exploreComponents/FollowButton.tsx | 2 +- ...ndation.css.ts => RecommendedUsers.css.ts} | 0 ...ecommendation.tsx => RecommendedUsers.tsx} | 2 +- 6 files changed, 88 insertions(+), 2 deletions(-) create mode 100644 src/app/(home)/page.css.ts create mode 100644 src/app/(home)/page.tsx rename src/app/{page.tsx => __page.tsx} (100%) rename src/components/exploreComponents/{UsersRecommendation.css.ts => RecommendedUsers.css.ts} (100%) rename src/components/exploreComponents/{UsersRecommendation.tsx => RecommendedUsers.tsx} (98%) diff --git a/src/app/(home)/page.css.ts b/src/app/(home)/page.css.ts new file mode 100644 index 00000000..da9c3bcb --- /dev/null +++ b/src/app/(home)/page.css.ts @@ -0,0 +1,7 @@ +import { style } from '@vanilla-extract/css'; + +export const wrapper = style({ + paddingBottom: 40, + + position: 'relative', +}); diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx new file mode 100644 index 00000000..5dbfd956 --- /dev/null +++ b/src/app/(home)/page.tsx @@ -0,0 +1,79 @@ +'use client'; + +import React from 'react'; +import { useRouter, useSearchParams } from 'next/navigation'; +import { useEffect, Suspense } from 'react'; +import dynamic from 'next/dynamic'; + +import TrendingList from '@/components/exploreComponents/TrendingLists'; +import RecommendedUsers from '@/components/exploreComponents/RecommendedUsers'; +import Header from '@/components/exploreComponents/Header'; +import FloatingContainer from '@/components/floatingButton/FloatingContainer'; +import PlusOptionFloatingButton from '@/components/floatingButton/PlusOptionFloatingButton'; +import ArrowUpFloatingButton from '@/components/floatingButton/ArrowUpFloatingButton'; +import SearchBar from '@/app/search/_components/SearchBar'; +import Modal from '@/components/Modal/Modal'; +import LoginModal from '@/components/login/LoginModal'; +import Loading from '@/components/loading/Loading'; + +import * as styles from './page.css'; + +import useBooleanOutput from '@/hooks/useBooleanOutput'; +import toasting from '@/lib/utils/toasting'; +import toastMessage from '@/lib/constants/toastMessage'; +import { useLanguage } from '@/store/useLanguage'; + +const PWAPrompt = dynamic(() => import('react-ios-pwa-prompt'), { + ssr: false, +}); + +function LandingPage() { + const { language } = useLanguage(); + // TODO 소현 - 나중에 getStaticPaths, getStaticProps로 쿼리 가져오기 (리팩토링) + const router = useRouter(); + const searchParams = useSearchParams(); + const isLoginRequired = searchParams ? searchParams.get('loginRequired') : ''; + const { isOn, handleSetOn, handleSetOff } = useBooleanOutput(); + + // TODO 소현 - hoc or hof로 분리하기 + useEffect(() => { + if (!!isLoginRequired) { + toasting({ type: 'error', txt: toastMessage[language].requiredLogin }); + handleSetOn(); + router.replace('/', { scroll: false }); // 쿼리스트링 초가화 + } + }, [isLoginRequired, handleSetOn, router]); + + return ( + <> +
+
+ }> + + + + + + + + + +
+ {isOn && ( + + + + )} + + ); +} + +export default LandingPage; diff --git a/src/app/page.tsx b/src/app/__page.tsx similarity index 100% rename from src/app/page.tsx rename to src/app/__page.tsx diff --git a/src/components/exploreComponents/FollowButton.tsx b/src/components/exploreComponents/FollowButton.tsx index 885f4cb3..4aa4e339 100644 --- a/src/components/exploreComponents/FollowButton.tsx +++ b/src/components/exploreComponents/FollowButton.tsx @@ -11,7 +11,7 @@ import { QUERY_KEYS } from '@/lib/constants/queryKeys'; import { UserType } from '@/lib/types/userProfileType'; import toasting from '@/lib/utils/toasting'; import toastMessage, { MAX_FOLLOWING } from '@/lib/constants/toastMessage'; -import * as styles from './UsersRecommendation.css'; +import * as styles from './RecommendedUsers.css'; import useBooleanOutput from '@/hooks/useBooleanOutput'; import Modal from '@/components/Modal/Modal'; diff --git a/src/components/exploreComponents/UsersRecommendation.css.ts b/src/components/exploreComponents/RecommendedUsers.css.ts similarity index 100% rename from src/components/exploreComponents/UsersRecommendation.css.ts rename to src/components/exploreComponents/RecommendedUsers.css.ts diff --git a/src/components/exploreComponents/UsersRecommendation.tsx b/src/components/exploreComponents/RecommendedUsers.tsx similarity index 98% rename from src/components/exploreComponents/UsersRecommendation.tsx rename to src/components/exploreComponents/RecommendedUsers.tsx index 1ee9f220..4dc54444 100644 --- a/src/components/exploreComponents/UsersRecommendation.tsx +++ b/src/components/exploreComponents/RecommendedUsers.tsx @@ -11,7 +11,7 @@ import FollowButton from './FollowButton'; import { UserProfileType } from '@/lib/types/userProfileType'; import fallbackProfile from '/public/images/fallback_profileImage.webp'; -import * as styles from './UsersRecommendation.css'; +import * as styles from './RecommendedUsers.css'; import waveEmoji from '/public/images/wave.png'; import { UserListsSkeleton } from './Skeleton'; import { commonLocale } from '@/components/locale'; From 5076fea21b25d1aa92aca26c0e5811efcddf569e Mon Sep 17 00:00:00 2001 From: Nahyun-Kang Date: Thu, 8 Aug 2024 18:22:00 +0900 Subject: [PATCH 02/86] =?UTF-8?q?Design:=20=EC=B6=94=EC=B2=9C=20=EB=A6=AC?= =?UTF-8?q?=EC=8A=A4=ED=84=B0=20css=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../exploreComponents/RecommendedUsers.css.ts | 77 +++++++++---------- .../exploreComponents/RecommendedUsers.tsx | 3 +- 2 files changed, 37 insertions(+), 43 deletions(-) diff --git a/src/components/exploreComponents/RecommendedUsers.css.ts b/src/components/exploreComponents/RecommendedUsers.css.ts index 9efc853d..30f89772 100644 --- a/src/components/exploreComponents/RecommendedUsers.css.ts +++ b/src/components/exploreComponents/RecommendedUsers.css.ts @@ -1,20 +1,19 @@ import { style } from '@vanilla-extract/css'; import { vars } from '@/styles/theme.css'; -import { titleSmall, headlineSmall } from '@/styles/font.css'; export const wrapper = style({ padding: '0 16px', }); -export const sectionTitle = style([ - headlineSmall, - { - fontWeight: 600, - }, -]); +export const sectionTitle = style({ + color: '#323A43', + fontSize: '1.8rem', + fontWeight: 700, + letterSpacing: '-0.54px', +}); export const titleWrapper = style({ - marginBottom: '26px', + marginBottom: '12px', display: 'flex', alignItems: 'baseline', @@ -22,11 +21,11 @@ export const titleWrapper = style({ }); export const recommendUsersListWrapper = style({ - marginBottom: '30px', + marginBottom: '12px', display: 'flex', alignItems: 'center', - gap: '6px', + gap: '20px', overflowX: 'scroll', '::-webkit-scrollbar': { @@ -36,7 +35,7 @@ export const recommendUsersListWrapper = style({ export const recommendUserWrapper = style({ padding: '12px 9px', - width: '160px', + width: '122px', height: 'auto', position: 'relative', @@ -46,9 +45,6 @@ export const recommendUserWrapper = style({ alignItems: 'center', flexGrow: 0, flexShrink: 0, - - borderRadius: '5px', - border: `1px solid ${vars.color.gray5}`, }); export const closeButton = style({ @@ -58,9 +54,9 @@ export const closeButton = style({ }); export const imageWrapper = style({ - marginBottom: '13px', - width: '110px', - height: '110px', + marginBottom: '10px', + width: '122px', + height: '122px', position: 'relative', }); @@ -72,33 +68,32 @@ export const recommendUserProfileImage = style({ backgroundColor: vars.color.lightblue, }); -export const recommendUserNickname = style([ - titleSmall, - { - marginBottom: '10px', - - color: vars.color.black, - }, -]); +export const recommendUserNickname = style({ + color: '#121417', + marginBottom: '6px', + textAlign: 'center', + fontSize: '14px', + fontWeight: 400, + letterSpacing: '-0.28px', +}); -export const followButtonDefault = style([ - titleSmall, - { - width: '100%', - padding: '4px 0', +export const followButtonDefault = style({ + width: 'auto', + height: 'auto', + padding: '4px 6px', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', - backgroundColor: vars.color.blue, - borderRadius: '9px', - color: vars.color.white, - }, -]); + backgroundColor: vars.color.white, + borderRadius: '20px', + color: '#8599AD', + fontSize: '1.2rem', + fontWeight: '400', +}); export const followButtonFollowing = style({ - background: vars.color.white, - border: `1px solid ${vars.color.black}`, - color: vars.color.black, + backgroundColor: '#3D95FF', + color: vars.color.white, }); diff --git a/src/components/exploreComponents/RecommendedUsers.tsx b/src/components/exploreComponents/RecommendedUsers.tsx index 4dc54444..9026cba5 100644 --- a/src/components/exploreComponents/RecommendedUsers.tsx +++ b/src/components/exploreComponents/RecommendedUsers.tsx @@ -53,8 +53,7 @@ function UsersRecommendation() { {myId && usersList?.length !== 0 && (
-

HI, LISTER

- {commonLocale[language].waveEmoji} +

추천 리스터

    {usersList?.map((item: UserProfileType) => { From 75826425eb0f9efb9fcd032d20712d656bc65856 Mon Sep 17 00:00:00 2001 From: Nahyun Date: Thu, 15 Aug 2024 18:40:36 +0900 Subject: [PATCH 03/86] =?UTF-8?q?Feat:=20=ED=97=A4=EB=8D=94=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(home)/_components/Header.css.ts | 8 ++++++++ src/app/(home)/_components/Header.tsx | 9 +++++++++ src/app/(home)/page.tsx | 2 +- src/styles/GlobalStyles.css.ts | 4 ++++ 4 files changed, 22 insertions(+), 1 deletion(-) create mode 100644 src/app/(home)/_components/Header.css.ts create mode 100644 src/app/(home)/_components/Header.tsx diff --git a/src/app/(home)/_components/Header.css.ts b/src/app/(home)/_components/Header.css.ts new file mode 100644 index 00000000..779294f4 --- /dev/null +++ b/src/app/(home)/_components/Header.css.ts @@ -0,0 +1,8 @@ +import { style } from '@vanilla-extract/css'; + +export const headerWrapper = style({ + width: '100%', + height: '40px', + + margin: '25px 0 12px', +}); diff --git a/src/app/(home)/_components/Header.tsx b/src/app/(home)/_components/Header.tsx new file mode 100644 index 00000000..8d8120ba --- /dev/null +++ b/src/app/(home)/_components/Header.tsx @@ -0,0 +1,9 @@ +/** + * 홈, 검색 아이콘, 검색창, 로그인/로그아웃 버튼(비회원), 벨/유저 아이콘(회원) + */ + +function Header() { + return
    ; +} + +export default Header; diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx index 5dbfd956..65a3f615 100644 --- a/src/app/(home)/page.tsx +++ b/src/app/(home)/page.tsx @@ -7,7 +7,7 @@ import dynamic from 'next/dynamic'; import TrendingList from '@/components/exploreComponents/TrendingLists'; import RecommendedUsers from '@/components/exploreComponents/RecommendedUsers'; -import Header from '@/components/exploreComponents/Header'; +import Header from '@/app/(home)/_components/Header'; import FloatingContainer from '@/components/floatingButton/FloatingContainer'; import PlusOptionFloatingButton from '@/components/floatingButton/PlusOptionFloatingButton'; import ArrowUpFloatingButton from '@/components/floatingButton/ArrowUpFloatingButton'; diff --git a/src/styles/GlobalStyles.css.ts b/src/styles/GlobalStyles.css.ts index 5cb4b51a..42f9cdae 100644 --- a/src/styles/GlobalStyles.css.ts +++ b/src/styles/GlobalStyles.css.ts @@ -8,6 +8,10 @@ globalStyle('html', { backgroundColor: vars.color.gray3, }); +globalStyle('body', { + backgroundColor: '#F5F6FA !important', +}); + globalStyle('body *', { boxSizing: 'border-box', fontFamily: Pretendard, From 5c08f0b71bc6086d353c6b7fdd6714728e791cf8 Mon Sep 17 00:00:00 2001 From: Nahyun Date: Thu, 15 Aug 2024 19:55:04 +0900 Subject: [PATCH 04/86] =?UTF-8?q?Feat:=20=ED=97=A4=EB=8D=94=20=ED=8D=BC?= =?UTF-8?q?=EB=B8=94=EB=A6=AC=EC=8B=B1=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/icons/ver3/Avatar.svg | 12 +++++ public/icons/ver3/bell.svg | 3 ++ public/icons/ver3/search.svg | 3 ++ src/app/(home)/_components/Header.css.ts | 43 +++++++++++++++++- src/app/(home)/_components/Header.tsx | 57 +++++++++++++++++++++++- src/app/(home)/page.tsx | 2 - src/components/SearchBar/index.tsx | 16 +++++++ 7 files changed, 132 insertions(+), 4 deletions(-) create mode 100644 public/icons/ver3/Avatar.svg create mode 100644 public/icons/ver3/bell.svg create mode 100644 public/icons/ver3/search.svg create mode 100644 src/components/SearchBar/index.tsx diff --git a/public/icons/ver3/Avatar.svg b/public/icons/ver3/Avatar.svg new file mode 100644 index 00000000..5b0be660 --- /dev/null +++ b/public/icons/ver3/Avatar.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/public/icons/ver3/bell.svg b/public/icons/ver3/bell.svg new file mode 100644 index 00000000..cf787d69 --- /dev/null +++ b/public/icons/ver3/bell.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/ver3/search.svg b/public/icons/ver3/search.svg new file mode 100644 index 00000000..34fb7d40 --- /dev/null +++ b/public/icons/ver3/search.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/app/(home)/_components/Header.css.ts b/src/app/(home)/_components/Header.css.ts index 779294f4..27068857 100644 --- a/src/app/(home)/_components/Header.css.ts +++ b/src/app/(home)/_components/Header.css.ts @@ -1,8 +1,49 @@ import { style } from '@vanilla-extract/css'; +import { vars } from '@/styles/theme.css'; export const headerWrapper = style({ width: '100%', height: '40px', + padding: '10px 16px', + margin: '0 0 12px', +}); + +export const entireWrapper = style({ + display: 'flex', + alignItems: 'centre', + justifyContent: 'space-between', +}); + +export const homeTitleContainer = style({ + display: 'flex', + alignItems: 'center', + gap: '10px', +}); + +export const homeTitle = style({ + fontWeight: '700', + fontSize: '2rem', + color: '#323A43', +}); + +export const authButton = style({ + padding: '4px 6px', + + borderRadius: '20px', + backgroundColor: vars.color.white, + color: '#637587', + fontWeight: '600', + letterSpacing: '-3%', +}); + +export const iconWrapper = style({ + display: 'flex', + alignItems: 'center', + gap: '9px', +}); - margin: '25px 0 12px', +export const iconWrapperForMember = style({ + display: 'flex', + alignItems: 'center', + gap: '9px', }); diff --git a/src/app/(home)/_components/Header.tsx b/src/app/(home)/_components/Header.tsx index 8d8120ba..4c548f59 100644 --- a/src/app/(home)/_components/Header.tsx +++ b/src/app/(home)/_components/Header.tsx @@ -2,8 +2,63 @@ * 홈, 검색 아이콘, 검색창, 로그인/로그아웃 버튼(비회원), 벨/유저 아이콘(회원) */ +import { useState } from 'react'; + +import SearchBarComponent from '@/components/SearchBar'; + +import * as styles from './Header.css'; +import SearchIcon from '/public/icons/ver3/search.svg'; +import BellIcon from '/public/icons/ver3/bell.svg'; +import Avatar from '/public/icons/ver3/avatar.svg'; + function Header() { - return
    ; + const [isSearchBarOpened, setIsSearchBarOpened] = useState(false); + const [isLoggedIn, setIsLoggedIn] = useState(false); + + const handleAuthButtonClick = () => { + setIsLoggedIn(true); + }; + + const handleInactivateSearchBar = () => { + setIsSearchBarOpened(false); + }; + + const handleSearchIconClick = () => { + setIsSearchBarOpened(true); + }; + + return ( +
    + {isSearchBarOpened && } + {!isSearchBarOpened && ( +
    +
    +

    홈

    + {!isLoggedIn && ( + + )} +
    +
    + + {isLoggedIn && ( +
    + + +
    + )} +
    +
    + )} +
    + ); } export default Header; diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx index 65a3f615..4acf667e 100644 --- a/src/app/(home)/page.tsx +++ b/src/app/(home)/page.tsx @@ -11,7 +11,6 @@ import Header from '@/app/(home)/_components/Header'; import FloatingContainer from '@/components/floatingButton/FloatingContainer'; import PlusOptionFloatingButton from '@/components/floatingButton/PlusOptionFloatingButton'; import ArrowUpFloatingButton from '@/components/floatingButton/ArrowUpFloatingButton'; -import SearchBar from '@/app/search/_components/SearchBar'; import Modal from '@/components/Modal/Modal'; import LoginModal from '@/components/login/LoginModal'; import Loading from '@/components/loading/Loading'; @@ -58,7 +57,6 @@ function LandingPage() { timesToShow={100} permanentlyHideOnDismiss={false} /> - diff --git a/src/components/SearchBar/index.tsx b/src/components/SearchBar/index.tsx new file mode 100644 index 00000000..f43b8ac3 --- /dev/null +++ b/src/components/SearchBar/index.tsx @@ -0,0 +1,16 @@ +interface SearchBarProps { + handleCancel?: () => void; +} + +function SearchBarComponent({ handleCancel }: SearchBarProps) { + return ( +
    +
    + +
    + +
    + ); +} + +export default SearchBarComponent; From 3bf6cbddf606c9a967cabfbe8c7661849fc8fed1 Mon Sep 17 00:00:00 2001 From: Nahyun Date: Fri, 16 Aug 2024 21:01:22 +0900 Subject: [PATCH 05/86] =?UTF-8?q?Feat:=20=ED=8A=B8=EB=A0=8C=EB=94=A9?= =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/icons/ver3/blue_heart.svg | 3 + public/icons/ver3/chevron_down.svg | 3 + src/app/(home)/_components/Categories.css.ts | 53 +++ src/app/(home)/_components/Categories.tsx | 44 ++ src/app/(home)/_components/Feed.tsx | 23 + src/app/(home)/_components/FollowingFeed.tsx | 11 + src/app/(home)/_components/Header.tsx | 4 +- src/app/(home)/_components/HomeTab.css.ts | 33 ++ src/app/(home)/_components/HomeTab.tsx | 37 ++ src/app/(home)/_components/RecentFeed.css.ts | 27 ++ src/app/(home)/_components/RecentFeed.tsx | 19 + .../(home)/_components/RecommendationFeed.tsx | 15 + .../_components/TopicsRecommendation.css.ts | 58 +++ .../_components/TopicsRecommendation.tsx | 37 ++ .../(home)/_components/TrendingLists.css.ts | 185 ++++++++ src/app/(home)/_components/TrendingLists.tsx | 143 ++++++ .../_components/__TrendingLists.css.ts} | 101 +++-- src/app/(home)/layout.tsx | 27 ++ src/app/(home)/mock/mockdata.ts | 410 ++++++++++++++++++ src/app/(home)/page.tsx | 17 +- src/app/__page.tsx | 4 +- src/components/NoData/NoData.css.ts | 20 +- src/components/NoData/NoDataComponent.tsx | 14 +- src/components/SearchBar/SearchBar.css.ts | 42 ++ src/components/SearchBar/index.tsx | 14 +- src/components/SimpleList/SimpleList.css.ts | 39 +- src/components/SimpleList/SimpleList.tsx | 27 +- .../ListsRecommendation.css.ts | 99 ++--- .../exploreComponents/ListsRecommendation.tsx | 50 +-- .../exploreComponents/TrendingLists.tsx | 207 --------- src/lib/types/exploreType.ts | 9 + src/store/useTab.ts | 13 + 32 files changed, 1378 insertions(+), 410 deletions(-) create mode 100644 public/icons/ver3/blue_heart.svg create mode 100644 public/icons/ver3/chevron_down.svg create mode 100644 src/app/(home)/_components/Categories.css.ts create mode 100644 src/app/(home)/_components/Categories.tsx create mode 100644 src/app/(home)/_components/Feed.tsx create mode 100644 src/app/(home)/_components/FollowingFeed.tsx create mode 100644 src/app/(home)/_components/HomeTab.css.ts create mode 100644 src/app/(home)/_components/HomeTab.tsx create mode 100644 src/app/(home)/_components/RecentFeed.css.ts create mode 100644 src/app/(home)/_components/RecentFeed.tsx create mode 100644 src/app/(home)/_components/RecommendationFeed.tsx create mode 100644 src/app/(home)/_components/TopicsRecommendation.css.ts create mode 100644 src/app/(home)/_components/TopicsRecommendation.tsx create mode 100644 src/app/(home)/_components/TrendingLists.css.ts create mode 100644 src/app/(home)/_components/TrendingLists.tsx rename src/{components/exploreComponents/TrendingLists.css.ts => app/(home)/_components/__TrendingLists.css.ts} (70%) create mode 100644 src/app/(home)/layout.tsx create mode 100644 src/app/(home)/mock/mockdata.ts create mode 100644 src/components/SearchBar/SearchBar.css.ts delete mode 100644 src/components/exploreComponents/TrendingLists.tsx create mode 100644 src/store/useTab.ts diff --git a/public/icons/ver3/blue_heart.svg b/public/icons/ver3/blue_heart.svg new file mode 100644 index 00000000..e4127bce --- /dev/null +++ b/public/icons/ver3/blue_heart.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/ver3/chevron_down.svg b/public/icons/ver3/chevron_down.svg new file mode 100644 index 00000000..d204da62 --- /dev/null +++ b/public/icons/ver3/chevron_down.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/app/(home)/_components/Categories.css.ts b/src/app/(home)/_components/Categories.css.ts new file mode 100644 index 00000000..a94880a3 --- /dev/null +++ b/src/app/(home)/_components/Categories.css.ts @@ -0,0 +1,53 @@ +import { style } from '@vanilla-extract/css'; + +export const gridContainer = style({ + padding: '0 16px', + + width: '100%', + position: 'relative', +}); + +export const list = style({ + display: 'inline-flex', + gap: '8px', + flexWrap: 'wrap', + listStyle: 'none', + padding: 0, + margin: 0, +}); + +export const item = style({ + padding: '6px 12px', + flexShrink: 0, + + borderRadius: '20px', + backgroundColor: '#fff', + fontWeight: '500', + fontSize: '1.4rem', + color: '#8599AD', +}); + +export const selectedItem = style([ + item, + { + backgroundColor: '#E3EEFF', + color: '#3D95FF', + }, +]); + +export const alignText = style({ + flexGrow: 1, +}); + +export const orderDropdown = style({ + display: 'flex', + alignItems: 'center', + gap: '8px', + float: 'right', +}); + +export const order = style({ + fontWeight: '400', + fontSize: '1.6rem', + color: '#3C4F76', +}); diff --git a/src/app/(home)/_components/Categories.tsx b/src/app/(home)/_components/Categories.tsx new file mode 100644 index 00000000..16cc9151 --- /dev/null +++ b/src/app/(home)/_components/Categories.tsx @@ -0,0 +1,44 @@ +'use client'; + +import { useState } from 'react'; +import { useQuery } from '@tanstack/react-query'; + +import { CategoryType } from '@/lib/types/categoriesType'; +import { QUERY_KEYS } from '@/lib/constants/queryKeys'; +import getCategories from '@/app/_api/category/getCategories'; + +import * as styles from './Categories.css'; +import ChevronDown from '/public/icons/ver3/chevron_down.svg'; + +function Categories() { + const [selectedCategoryCode, setSelectedCategoryCode] = useState('0'); + + const { data, isFetching } = useQuery({ + queryKey: [QUERY_KEYS.getCategories], + queryFn: getCategories, + }); + + console.log(data); + + return ( +
    +
      + {data?.map((el) => { + return ( +
    • + +
      • + ); + })} +
    +
    + 정렬 + +
    +
    + ); +} + +export default Categories; diff --git a/src/app/(home)/_components/Feed.tsx b/src/app/(home)/_components/Feed.tsx new file mode 100644 index 00000000..0f9b7448 --- /dev/null +++ b/src/app/(home)/_components/Feed.tsx @@ -0,0 +1,23 @@ +'use client'; + +import { useTab } from '@/store/useTab'; + +import HomeTab from '@/app/(home)/_components/HomeTab'; +import RecommendationFeed from '@/app/(home)/_components/RecommendationFeed'; +import FollowingFeed from '@/app/(home)/_components/FollowingFeed'; +import RecentFeed from '@/app/(home)/_components/RecentFeed'; + +function Feed() { + const { currentTab } = useTab(); + + return ( +
    + + {currentTab === 'recommendation' && } + {currentTab === 'recent' && } + {currentTab === 'following' && } +
    + ); +} + +export default Feed; diff --git a/src/app/(home)/_components/FollowingFeed.tsx b/src/app/(home)/_components/FollowingFeed.tsx new file mode 100644 index 00000000..df1da2b8 --- /dev/null +++ b/src/app/(home)/_components/FollowingFeed.tsx @@ -0,0 +1,11 @@ +import ListRecommendation from '@/components/exploreComponents/ListsRecommendation'; + +function FollowingFeed() { + return ( +
    + +
    + ); +} + +export default FollowingFeed; diff --git a/src/app/(home)/_components/Header.tsx b/src/app/(home)/_components/Header.tsx index 4c548f59..cef5b296 100644 --- a/src/app/(home)/_components/Header.tsx +++ b/src/app/(home)/_components/Header.tsx @@ -28,7 +28,7 @@ function Header() { }; return ( -
    +
    {isSearchBarOpened && } {!isSearchBarOpened && (
    @@ -57,7 +57,7 @@ function Header() {
    )} -
+ ); } diff --git a/src/app/(home)/_components/HomeTab.css.ts b/src/app/(home)/_components/HomeTab.css.ts new file mode 100644 index 00000000..9733e233 --- /dev/null +++ b/src/app/(home)/_components/HomeTab.css.ts @@ -0,0 +1,33 @@ +import { style } from '@vanilla-extract/css'; +import { vars } from '@/styles/theme.css'; + +export const wrapper = style({ + padding: '0 16px', + marginBottom: '16px', + + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', +}); + +export const buttonsWrapper = style({ + display: 'flex', + alignItems: 'center', + gap: '18px', +}); + +export const tabButton = style({ + fontWeight: '400', + fontSize: '1.6rem', + color: '#8599AD', +}); + +export const activeTab = style([ + tabButton, + { + padding: '6px 12px', + color: '#ffffff', + backgroundColor: '#3D95FF', + borderRadius: '20px', + }, +]); diff --git a/src/app/(home)/_components/HomeTab.tsx b/src/app/(home)/_components/HomeTab.tsx new file mode 100644 index 00000000..8142b9fb --- /dev/null +++ b/src/app/(home)/_components/HomeTab.tsx @@ -0,0 +1,37 @@ +'use client'; + +import { useTab } from '@/store/useTab'; + +import * as styles from './HomeTab.css'; + +function HomeTab() { + const { currentTab, setCurrentTab } = useTab(); + + return ( + + ); +} + +export default HomeTab; diff --git a/src/app/(home)/_components/RecentFeed.css.ts b/src/app/(home)/_components/RecentFeed.css.ts new file mode 100644 index 00000000..95b1aa01 --- /dev/null +++ b/src/app/(home)/_components/RecentFeed.css.ts @@ -0,0 +1,27 @@ +import { style } from '@vanilla-extract/css'; + +export const wrapper = style({ + display: 'flex', + flexDirection: 'column', +}); + +export const listEndWrapper = style({ + display: 'flex', + flexDirection: 'column', + gap: '8px', + + alignItems: 'center', + justifyContent: 'center', +}); + +export const listEndMessage = style({ + fontWeight: '600', + fontSize: '19px', + color: '##323A43', +}); + +export const listPolicy = style({ + fontWeight: '600', + fontSize: '1.5rem', + color: '#8599AD', +}); diff --git a/src/app/(home)/_components/RecentFeed.tsx b/src/app/(home)/_components/RecentFeed.tsx new file mode 100644 index 00000000..4fc74334 --- /dev/null +++ b/src/app/(home)/_components/RecentFeed.tsx @@ -0,0 +1,19 @@ +import Categories from './Categories'; +import ListRecommendation from '@/components/exploreComponents/ListsRecommendation'; + +import * as styles from './RecentFeed.css'; + +function RecentFeed() { + return ( +
+ + +
+
최근 리스트를 모두 확인했어요!
+
30일 이내 수정 및 생성된 리스트
+
+
+ ); +} + +export default RecentFeed; diff --git a/src/app/(home)/_components/RecommendationFeed.tsx b/src/app/(home)/_components/RecommendationFeed.tsx new file mode 100644 index 00000000..65b6cb72 --- /dev/null +++ b/src/app/(home)/_components/RecommendationFeed.tsx @@ -0,0 +1,15 @@ +import UsersRecommendation from '@/components/exploreComponents/RecommendedUsers'; +import TopicsRecommendation from '@/app/(home)/_components/TopicsRecommendation'; +import TrendingList from '@/app/(home)/_components/TrendingLists'; + +function RecommendationFeed() { + return ( + <> + + + + + ); +} + +export default RecommendationFeed; diff --git a/src/app/(home)/_components/TopicsRecommendation.css.ts b/src/app/(home)/_components/TopicsRecommendation.css.ts new file mode 100644 index 00000000..3eef33d0 --- /dev/null +++ b/src/app/(home)/_components/TopicsRecommendation.css.ts @@ -0,0 +1,58 @@ +import { style } from '@vanilla-extract/css'; +import { vars } from '@/styles/theme.css'; + +export const wrapper = style({ + marginBottom: '24px', + + display: 'flex', + flexDirection: 'column', + gap: '15px', +}); + +export const sectionTitleWrapper = style({ + padding: '0 16px', + + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', +}); + +export const sectionTitle = style({ + color: '#323A43', + fontSize: '1.8rem', + fontWeight: 700, + letterSpacing: '-0.54px', +}); + +export const itemsWrapper = style({ + padding: '0 0 0 16px', + + display: 'flex', + alignItems: 'center', + gap: '12px', + + overflowX: 'scroll', + '::-webkit-scrollbar': { + display: 'none', + }, +}); + +export const topic = style({ + padding: '14px', + + flexShrink: 0, + + backgroundColor: vars.color.white, + borderRadius: '20px', + fontWeight: '400', + fontSize: '1.5rem', + letterSpacing: '-3%', + color: '#292929', +}); + +export const showMoreButton = style({ + color: '#637587', + fontWeight: '400', + fontSize: '1.4rem', + letterSpacing: '-3%', +}); diff --git a/src/app/(home)/_components/TopicsRecommendation.tsx b/src/app/(home)/_components/TopicsRecommendation.tsx new file mode 100644 index 00000000..846416c7 --- /dev/null +++ b/src/app/(home)/_components/TopicsRecommendation.tsx @@ -0,0 +1,37 @@ +import Link from 'next/link'; + +import * as styles from './TopicsRecommendation.css'; +/**목데이터 지우기 */ +import { TopicsData } from '../mock/mockdata'; + +function TopicsRecommendation() { + return ( +
+
+
이 주제로 만들어 주세요
+ + 더보기 + +
+
    + {TopicsData.map((el, idx) => { + return ( +
  • + +
    • + ); + })} +
+
+ ); +} + +export default TopicsRecommendation; + +interface TopicItemProps { + title: string; +} + +function TopicItem({ title }: TopicItemProps) { + return
{title}
; +} diff --git a/src/app/(home)/_components/TrendingLists.css.ts b/src/app/(home)/_components/TrendingLists.css.ts new file mode 100644 index 00000000..d8ca57cb --- /dev/null +++ b/src/app/(home)/_components/TrendingLists.css.ts @@ -0,0 +1,185 @@ +import { style, createVar } from '@vanilla-extract/css'; +import { headlineSmall, titleMedium, caption } from '@/styles/font.css'; + +export const blackLayer = createVar(); +export const itemFontColor = createVar(); + +export const customBorderRadius = createVar(); +export const customBackgroundColor = createVar(); +export const customFontColor = createVar(); +export const customItemBorder = createVar(); +export const customBackgroundImage = createVar(); + +export const sectionTitle = style([ + headlineSmall, + { + fontWeight: 600, + }, +]); + +export const titleWrapper = style({ + marginBottom: '26px', + padding: '0 16px', + + display: 'flex', + alignItems: 'baseline', + gap: '5px', +}); + +export const wrapper = style({ + marginTop: '50px', + marginBottom: '50px', +}); + +export const listWrapper = style({ + marginBottom: '30px', + height: '220px', + + display: 'flex', + alignItems: 'center', + + '::-webkit-scrollbar': { + display: 'none', + }, +}); + +export const sliderItem = style({ + height: 'auto', +}); + +export const listItem = style({ + cursor: 'pointer', +}); + +export const testItem = style({ + width: '100%', + height: '100%', +}); + +export const slide = style({}); + +export const itemWrapper = style({ + width: '100%', + height: '100%', + padding: '0 40px', + borderRadius: customBorderRadius, + + position: 'relative', + + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + + background: customBackgroundColor, + border: customItemBorder, + cursor: 'pointer', + + transition: 'transform 0.3s ease', // 애니메이션 효과를 부여할 속성 및 시간을 지정합니다. + + ':hover': { + transform: 'scale(1.01)', // hover 시 scale을 1.02로 변경합니다. + boxShadow: 'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px', + }, +}); + +export const itemWrapperWithImage = style([ + itemWrapper, + { + backgroundImage: customBackgroundImage, + backgroundRepeat: 'no-repeat', + backgroundSize: 'cover', + backgroundPosition: 'center', + zIndex: 0, + + selectors: { + '&:after': { + content: '', + position: 'absolute', + top: 0, + left: 0, + width: '100%', + height: '100%', + backgroundColor: 'rgba(0, 0, 0, 0.3)', + borderRadius: customBorderRadius, + }, + }, + }, +]); + +export const itemInformationWrapper = style({ + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + zIndex: 4, +}); + +export const ownerProfileWrapper = style({ + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + gap: '8px', +}); + +export const itemTitle = style({ + display: 'flex', + flexDirection: 'column', + gap: '8px', + + marginBottom: '16px', + color: customFontColor, + textAlign: 'center', + zIndex: 1, + overflow: 'hidden', + whiteSpace: 'normal', + textOverflow: 'ellipsis', + WebkitLineClamp: 3, + WebkitBoxOrient: 'vertical', + wordBreak: 'keep-all', +}); + +export const itemTitleContent = style({ + display: 'inline', + fontWeight: '600', + fontSize: '1.8rem', +}); + +export const category = style({ + padding: '6px 12px', + marginBottom: '16px', + + backgroundColor: '#3D95FF', + color: '#fff', + fontSize: '1.4rem', + borderRadius: '20px', +}); + +export const listOwner = style({ + fontSize: '1.6rem', + fontWeight: '400', + letterSpacing: '-3%', +}); + +export const top3ItemNoImage = style({ + padding: '5px 7px', + + backgroundColor: '#F5FAFF', + color: '#3D95FF', + borderRadius: '20px', +}); + +export const top3ItemWithImage = style({ + padding: '5px 7px', + + color: '#ffffff', + borderRadius: '20px', + backgroundColor: '#F5FAFF4D', +}); + +export const top3Wrapper = style({ + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + gap: '7px', + + fontSize: '1rem', +}); diff --git a/src/app/(home)/_components/TrendingLists.tsx b/src/app/(home)/_components/TrendingLists.tsx new file mode 100644 index 00000000..10c8af4d --- /dev/null +++ b/src/app/(home)/_components/TrendingLists.tsx @@ -0,0 +1,143 @@ +'use client'; +import Image from 'next/image'; +import Link from 'next/link'; +import { useMemo } from 'react'; + +import { useQuery } from '@tanstack/react-query'; +import { assignInlineVars } from '@vanilla-extract/dynamic'; +import { Swiper, SwiperSlide } from 'swiper/react'; +import 'swiper/css'; +import { Autoplay, EffectCoverflow } from 'swiper/modules'; + +import getTrendingLists from '@/app/_api/explore/getTrendingLists'; +import { QUERY_KEYS } from '@/lib/constants/queryKeys'; +import { TrendingListType } from '@/lib/types/exploreType'; +import { TRENDINGLISTS_DATA } from '../mock/mockdata'; + +import * as styles from './TrendingLists.css'; +import { vars } from '@/styles/theme.css'; +import { TrendingListsSkeleton } from '../../../components/exploreComponents/Skeleton'; + +function TrendingList() { + const { data: trendingLists, isFetching } = useQuery({ + queryKey: [QUERY_KEYS.getTrendingLists], + queryFn: () => getTrendingLists(), + }); + + const SWIPER_STYLE = useMemo( + () => ({ + width: '100vw', + height: '280px', + padding: '10px 0', + }), + [] + ); + + const SWIPER_SLIDER_STYLE = useMemo( + () => ({ + width: '260px', + borderRadius: '260px', + }), + [] + ); + + if (isFetching) { + return ; + } + + return ( +
+
+
+ {TRENDINGLISTS_DATA && TRENDINGLISTS_DATA.length > 0 && ( + + {TRENDINGLISTS_DATA.map((item, index) => ( + + + + ))} + + )} +
+
+
+ ); +} + +interface TrendingListItemProps { + item?: TrendingListType; + index: number; +} + +function TrendingListItem({ item, index }: TrendingListItemProps) { + return ( + +
+ {item?.itemImageUrl ? ( +
+ +
+ ) : ( +
+ +
+ )} +
+ + ); +} + +export default TrendingList; + +interface TrendingListInformationType { + item?: TrendingListType; +} + +function TrendingListInformation({ item }: TrendingListInformationType) { + return ( +
+
{item?.category}
+
+
{item?.title}
+

{item?.ownerNickname}

+
+
    + {item?.top3?.map((el, idx) => { + return ( +
  • + {`${idx + 1}. ${el.title}`} +
    • + ); + })} +
+
+ ); +} diff --git a/src/components/exploreComponents/TrendingLists.css.ts b/src/app/(home)/_components/__TrendingLists.css.ts similarity index 70% rename from src/components/exploreComponents/TrendingLists.css.ts rename to src/app/(home)/_components/__TrendingLists.css.ts index b36fe318..5b7b912f 100644 --- a/src/components/exploreComponents/TrendingLists.css.ts +++ b/src/app/(home)/_components/__TrendingLists.css.ts @@ -1,14 +1,11 @@ +import { width } from './../../../components/Skeleton/Skeleton.css'; import { style, createVar } from '@vanilla-extract/css'; import { vars } from '@/styles/theme.css'; import { headlineSmall, titleMedium, caption } from '@/styles/font.css'; -/**@todo 트렌딩 리스트 바뀐 디자인에 맞게 새로 갈아엎을 예정 */ - export const blackLayer = createVar(); export const itemFontColor = createVar(); -export const customWidth = createVar(); -export const customPadding = createVar(); export const customBorderRadius = createVar(); export const customBackgroundColor = createVar(); export const customFontColor = createVar(); @@ -33,6 +30,7 @@ export const titleWrapper = style({ export const wrapper = style({ marginTop: '50px', + marginBottom: '50px', }); export const listWrapper = style({ @@ -63,9 +61,9 @@ export const testItem = style({ export const slide = style({}); export const itemWrapper = style({ - height: '200px', + width: '100%', + height: '100%', padding: '0 40px', - width: customWidth, borderRadius: customBorderRadius, position: 'relative', @@ -114,6 +112,7 @@ export const itemInformationWrapper = style({ display: 'flex', flexDirection: 'column', alignItems: 'center', + zIndex: 4, }); export const ownerProfileWrapper = style({ @@ -123,58 +122,66 @@ export const ownerProfileWrapper = style({ gap: '8px', }); -export const itemTitle = style([ - titleMedium, - { - marginBottom: '16px', - color: customFontColor, - textAlign: 'center', - zIndex: 1, - overflow: 'hidden', - whiteSpace: 'normal', - textOverflow: 'ellipsis', - display: '-webkit-box', - WebkitLineClamp: 3, - WebkitBoxOrient: 'vertical', - wordBreak: 'keep-all', - }, -]); +export const itemTitle = style({ + display: 'flex', + flexDirection: 'column', + gap: '8px', + + marginBottom: '16px', + color: customFontColor, + textAlign: 'center', + zIndex: 1, + overflow: 'hidden', + whiteSpace: 'normal', + textOverflow: 'ellipsis', + WebkitLineClamp: 3, + WebkitBoxOrient: 'vertical', + wordBreak: 'keep-all', +}); export const itemTitleContent = style({ display: 'inline', + fontWeight: '600', + fontSize: '1.8rem', }); -export const profileImageWrapper = style({ - width: '32px', - height: '32px', +export const category = style({ + padding: '6px 12px', + marginBottom: '16px', - position: 'relative', + backgroundColor: '#3D95FF', + color: '#fff', + fontSize: '1.4rem', + borderRadius: '20px', +}); - display: 'flex', - alignItems: 'center', - justifyContent: 'center', +export const listOwner = style({ + fontSize: '1.6rem', + fontWeight: '400', + letterSpacing: '-3%', }); -export const profileImage = style({ - background: vars.color.gray5, - borderRadius: '50px', - border: `2px solid ${vars.color.white}`, +export const top3ItemNoImage = style({ + padding: '5px 7px', + + backgroundColor: '#F5FAFF', + color: '#3D95FF', + borderRadius: '20px', }); -export const profileTransparentBlack = style({ - width: '100%', - height: '100%', +export const top3ItemWithImage = style({ + padding: '5px 7px', - border: `2px solid ${vars.color.white}`, - borderRadius: '50px', - backgroundColor: 'rgba(0, 0, 0, 0.1)', - zIndex: 1, + color: '#ffffff', + borderRadius: '20px', + backgroundColor: '#F5FAFF4D', }); -export const ownerNickname = style([ - caption, - { - color: customFontColor, - zIndex: 1, - }, -]); +export const top3Wrapper = style({ + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + gap: '7px', + + fontSize: '1rem', +}); diff --git a/src/app/(home)/layout.tsx b/src/app/(home)/layout.tsx new file mode 100644 index 00000000..bc37590f --- /dev/null +++ b/src/app/(home)/layout.tsx @@ -0,0 +1,27 @@ +'use client'; + +import { ReactNode } from 'react'; + +import Header from '@/app/(home)/_components/Header'; +import FloatingContainer from '@/components/floatingButton/FloatingContainer'; +import PlusOptionFloatingButton from '@/components/floatingButton/PlusOptionFloatingButton'; +import ArrowUpFloatingButton from '@/components/floatingButton/ArrowUpFloatingButton'; + +interface HomeLayoutProps { + children: ReactNode; +} + +function HomeLayout({ children }: HomeLayoutProps) { + return ( + <> +
+ {children} + + + + + + ); +} + +export default HomeLayout; diff --git a/src/app/(home)/mock/mockdata.ts b/src/app/(home)/mock/mockdata.ts new file mode 100644 index 00000000..14335193 --- /dev/null +++ b/src/app/(home)/mock/mockdata.ts @@ -0,0 +1,410 @@ +import { TrendingListType } from '@/lib/types/exploreType'; + +export const TopicsData = [ + '최근 자주 듣는 팝송', + '카공하기 좋은 서울 카페', + '카공하기 좋은 서울 카페', + '카공하기 좋은 서울 카페', + '카공하기 좋은 서울 카페', +]; + +export const TRENDINGLISTS_DATA = [ + { + id: 1, + ownerId: 101, + ownerNickname: '나현', + title: 'Best Coffee Shops in Seoul', + itemImageUrl: + 'https://lh3.googleusercontent.com/proxy/REI0aZFETu1l9pQ3PMVuQ-_oqZ-RGZUUeyj0pEI0GLPOoF5geJziMwe3daKzncbZhlyMegTC8rJs5-CjfWp88tpF1ybQW8ZbIudDFBn5ge0o0CyNH3KKdpDwNugBFpk6ApTC7qV8GM1UXmbxLlmNy0rBSRfb_QS0xVerx1Bi-huVWxPDio6N2_vYyXyQZKVqc61VtZ9n2H1CuneIHv5r7RV5oTLPhJS9aghPcxbGmcpRaouN0rcKuSvFhGV7gTRzMiKgcF1vaR9nfXcqRL8', + category: 'Food & Drink', + backgroundColor: '#FFD700', + top3: [ + { + id: 201, + rank: 1, + title: 'Cafe Bene', + }, + { + id: 202, + rank: 2, + title: 'Tom N Toms', + }, + { + id: 203, + rank: 3, + title: 'Hollys Coffee', + }, + ], + }, + { + id: 2, + ownerId: 102, + ownerNickname: '지민', + title: 'Top 3 Beaches in Jeju', + itemImageUrl: null, + category: 'Travel', + backgroundColor: '#87CEEB', + top3: [ + { + id: 204, + rank: 1, + title: 'Hyeopjae Beach', + }, + { + id: 205, + rank: 2, + title: 'Gwakji Beach', + }, + { + id: 206, + rank: 3, + title: 'Woljeongri Beach', + }, + ], + }, + { + id: 3, + ownerId: 103, + ownerNickname: '민준', + title: 'Best Hiking Trails in Korea', + itemImageUrl: + 'https://lh3.googleusercontent.com/proxy/REI0aZFETu1l9pQ3PMVuQ-_oqZ-RGZUUeyj0pEI0GLPOoF5geJziMwe3daKzncbZhlyMegTC8rJs5-CjfWp88tpF1ybQW8ZbIudDFBn5ge0o0CyNH3KKdpDwNugBFpk6ApTC7qV8GM1UXmbxLlmNy0rBSRfb_QS0xVerx1Bi-huVWxPDio6N2_vYyXyQZKVqc61VtZ9n2H1CuneIHv5r7RV5oTLPhJS9aghPcxbGmcpRaouN0rcKuSvFhGV7gTRzMiKgcF1vaR9nfXcqRL8', + category: 'Outdoor', + backgroundColor: '#228B22', + top3: [ + { + id: 207, + rank: 1, + title: 'Seoraksan National Park', + }, + { + id: 208, + rank: 2, + title: 'Bukhansan National Park', + }, + { + id: 209, + rank: 3, + title: 'Jirisan National Park', + }, + ], + }, + { + id: 4, + ownerId: 104, + ownerNickname: '수빈', + title: 'Top 3 Korean Dramas of 2024', + itemImageUrl: null, + category: 'Entertainment', + backgroundColor: '#FF6347', + top3: [ + { + id: 210, + rank: 1, + title: 'Crash Landing on You Season 2', + }, + { + id: 211, + rank: 2, + title: 'Hospital Playlist Season 3', + }, + { + id: 212, + rank: 3, + title: 'Vincenzo: The Return', + }, + ], + }, + { + id: 5, + ownerId: 105, + ownerNickname: '지우', + title: 'Best Korean Street Foods', + itemImageUrl: + 'https://lh3.googleusercontent.com/proxy/REI0aZFETu1l9pQ3PMVuQ-_oqZ-RGZUUeyj0pEI0GLPOoF5geJziMwe3daKzncbZhlyMegTC8rJs5-CjfWp88tpF1ybQW8ZbIudDFBn5ge0o0CyNH3KKdpDwNugBFpk6ApTC7qV8GM1UXmbxLlmNy0rBSRfb_QS0xVerx1Bi-huVWxPDio6N2_vYyXyQZKVqc61VtZ9n2H1CuneIHv5r7RV5oTLPhJS9aghPcxbGmcpRaouN0rcKuSvFhGV7gTRzMiKgcF1vaR9nfXcqRL8', + category: 'Food & Drink', + backgroundColor: '#FFA07A', + top3: [ + { + id: 213, + rank: 1, + title: 'Tteokbokki', + }, + { + id: 214, + rank: 2, + title: 'Hotteok', + }, + { + id: 215, + rank: 3, + title: 'Kimbap', + }, + ], + }, + { + id: 6, + ownerId: 106, + ownerNickname: '현우', + title: 'Top 3 Korean Pop Bands', + itemImageUrl: null, + category: 'Music', + backgroundColor: '#8A2BE2', + top3: [ + { + id: 216, + rank: 1, + title: 'BTS', + }, + { + id: 217, + rank: 2, + title: 'BLACKPINK', + }, + { + id: 218, + rank: 3, + title: 'EXO', + }, + ], + }, + { + id: 7, + ownerId: 107, + ownerNickname: '서윤', + title: 'Top 3 Tech Gadgets of 2024', + itemImageUrl: + 'https://lh3.googleusercontent.com/proxy/REI0aZFETu1l9pQ3PMVuQ-_oqZ-RGZUUeyj0pEI0GLPOoF5geJziMwe3daKzncbZhlyMegTC8rJs5-CjfWp88tpF1ybQW8ZbIudDFBn5ge0o0CyNH3KKdpDwNugBFpk6ApTC7qV8GM1UXmbxLlmNy0rBSRfb_QS0xVerx1Bi-huVWxPDio6N2_vYyXyQZKVqc61VtZ9n2H1CuneIHv5r7RV5oTLPhJS9aghPcxbGmcpRaouN0rcKuSvFhGV7gTRzMiKgcF1vaR9nfXcqRL8', + category: 'Technology', + backgroundColor: '#4682B4', + top3: [ + { + id: 219, + rank: 1, + title: 'Samsung Galaxy Z Flip 4', + }, + { + id: 220, + rank: 2, + title: 'Apple Watch Series 10', + }, + { + id: 221, + rank: 3, + title: 'Sony WH-1000XM5', + }, + ], + }, + { + id: 8, + ownerId: 108, + ownerNickname: '도윤', + title: 'Best Bookstores in Seoul', + itemImageUrl: null, + category: 'Lifestyle', + backgroundColor: '#DAA520', + top3: [ + { + id: 222, + rank: 1, + title: 'Kyobo Book Centre', + }, + { + id: 223, + rank: 2, + title: 'Aladin Used Books', + }, + { + id: 224, + rank: 3, + title: 'Youngpoong Bookstore', + }, + ], + }, + { + id: 9, + ownerId: 109, + ownerNickname: '가영', + title: 'Top 3 Korean Webtoons', + itemImageUrl: + 'https://lh3.googleusercontent.com/proxy/REI0aZFETu1l9pQ3PMVuQ-_oqZ-RGZUUeyj0pEI0GLPOoF5geJziMwe3daKzncbZhlyMegTC8rJs5-CjfWp88tpF1ybQW8ZbIudDFBn5ge0o0CyNH3KKdpDwNugBFpk6ApTC7qV8GM1UXmbxLlmNy0rBSRfb_QS0xVerx1Bi-huVWxPDio6N2_vYyXyQZKVqc61VtZ9n2H1CuneIHv5r7RV5oTLPhJS9aghPcxbGmcpRaouN0rcKuSvFhGV7gTRzMiKgcF1vaR9nfXcqRL8', + category: 'Entertainment', + backgroundColor: '#FF4500', + top3: [ + { + id: 225, + rank: 1, + title: 'Tower of God', + }, + { + id: 226, + rank: 2, + title: 'The God of High School', + }, + { + id: 227, + rank: 3, + title: 'Lore Olympus', + }, + ], + }, + { + id: 10, + ownerId: 110, + ownerNickname: '하준', + title: 'Top 3 Scenic Spots in Busan', + itemImageUrl: 'null', + category: 'Travel', + backgroundColor: '#20B2AA', + top3: [ + { + id: 228, + rank: 1, + title: 'Haeundae Beach', + }, + { + id: 229, + rank: 2, + title: 'Gamcheon Culture Village', + }, + { + id: 230, + rank: 3, + title: 'Taejongdae Resort Park', + }, + ], + }, +]; + +export const LIST_DATA = [ + { + id: 1, + ownerId: 101, + ownerNickname: '나현', + ownerProfileImage: 'https://example.com/images/nahyun_profile.jpg', + title: 'Top 3 Restaurants in Gangnam', + description: 'Discover the best places to eat in Gangnam, Seoul.', + items: [ + { + id: 201, + rank: 1, + title: 'Gangnam Grill', + }, + { + id: 202, + rank: 2, + title: 'Samgyeopsal Heaven', + }, + { + id: 203, + rank: 3, + title: 'Bibimbap Palace', + }, + ], + version: 1, + }, + { + id: 2, + ownerId: 102, + ownerNickname: '지민', + ownerProfileImage: 'https://example.com/images/jimin_profile.jpg', + title: 'Top 3 Shopping Malls in Seoul', + description: 'A guide to the best shopping experiences in Seoul.', + items: [ + { + id: 204, + rank: 1, + title: 'COEX Mall', + }, + { + id: 205, + rank: 2, + title: 'Dongdaemun Design Plaza', + }, + { + id: 206, + rank: 3, + title: 'Lotte World Mall', + }, + ], + version: 1, + }, + { + id: 3, + ownerId: 103, + ownerNickname: '민준', + ownerProfileImage: 'https://example.com/images/minjun_profile.jpg', + title: 'Top 3 Cultural Experiences in Korea', + description: 'Explore the rich cultural heritage of Korea.', + items: [ + { + id: 207, + rank: 1, + title: 'Bukchon Hanok Village', + }, + { + id: 208, + rank: 2, + title: 'Gyeongbokgung Palace', + }, + { + id: 209, + rank: 3, + title: 'Insadong', + }, + ], + version: 1, + }, + { + id: 4, + ownerId: 104, + ownerNickname: '수빈', + ownerProfileImage: 'https://example.com/images/subin_profile.jpg', + title: 'Top 3 Scenic Spots in Jeju', + description: 'Must-visit scenic locations on Jeju Island.', + items: [ + { + id: 210, + rank: 1, + title: 'Seongsan Ilchulbong', + }, + { + id: 211, + rank: 2, + title: 'Hallasan Mountain', + }, + { + id: 212, + rank: 3, + title: 'Manjanggul Cave', + }, + ], + version: 1, + }, + { + id: 5, + ownerId: 105, + ownerNickname: '지우', + ownerProfileImage: 'https://example.com/images/jiwoo_profile.jpg', + title: 'Top 3 K-Pop Albums of 2024', + description: 'The hottest K-Pop albums you need to listen to this year.', + items: [ + { + id: 213, + rank: 1, + title: 'BTS - New Era', + }, + { + id: 214, + rank: 2, + title: 'BLACKPINK - Revolution', + }, + { + id: 215, + rank: 3, + title: 'TWICE - Infinity', + }, + ], + version: 1, + }, +]; diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx index 4acf667e..aa36942a 100644 --- a/src/app/(home)/page.tsx +++ b/src/app/(home)/page.tsx @@ -5,15 +5,10 @@ import { useRouter, useSearchParams } from 'next/navigation'; import { useEffect, Suspense } from 'react'; import dynamic from 'next/dynamic'; -import TrendingList from '@/components/exploreComponents/TrendingLists'; -import RecommendedUsers from '@/components/exploreComponents/RecommendedUsers'; -import Header from '@/app/(home)/_components/Header'; -import FloatingContainer from '@/components/floatingButton/FloatingContainer'; -import PlusOptionFloatingButton from '@/components/floatingButton/PlusOptionFloatingButton'; -import ArrowUpFloatingButton from '@/components/floatingButton/ArrowUpFloatingButton'; import Modal from '@/components/Modal/Modal'; import LoginModal from '@/components/login/LoginModal'; import Loading from '@/components/loading/Loading'; +import Feed from '@/app/(home)/_components/Feed'; import * as styles from './page.css'; @@ -41,12 +36,11 @@ function LandingPage() { handleSetOn(); router.replace('/', { scroll: false }); // 쿼리스트링 초가화 } - }, [isLoginRequired, handleSetOn, router]); + }, [isLoginRequired, handleSetOn, router, language]); return ( <>
-
}> - - - - - - +
{isOn && ( diff --git a/src/app/__page.tsx b/src/app/__page.tsx index 36f58b34..fb61aedb 100644 --- a/src/app/__page.tsx +++ b/src/app/__page.tsx @@ -6,8 +6,8 @@ import { useEffect, Suspense } from 'react'; import dynamic from 'next/dynamic'; import ListRecommendation from '@/components/exploreComponents/ListsRecommendation'; -import TrendingList from '@/components/exploreComponents/TrendingLists'; -import UsersRecommendation from '@/components/exploreComponents/UsersRecommendation'; +import TrendingList from '@/app/(home)/_components/TrendingLists'; +import UsersRecommendation from '@/components/exploreComponents/RecommendedUsers'; import Header from '@/components/exploreComponents/Header'; import FloatingContainer from '@/components/floatingButton/FloatingContainer'; import PlusOptionFloatingButton from '@/components/floatingButton/PlusOptionFloatingButton'; diff --git a/src/components/NoData/NoData.css.ts b/src/components/NoData/NoData.css.ts index 4455e517..fd1e3a1a 100644 --- a/src/components/NoData/NoData.css.ts +++ b/src/components/NoData/NoData.css.ts @@ -8,16 +8,30 @@ export const wrapper = style({ width: '100%', height: '100%', + padding: '55px 0', + display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', + + backgroundColor: '#fff', + borderRadius: '20px', }); export const message = style({ + marginBottom: '8px', + fontSize: '1.8rem', fontWeight: 600, - lineHeight: '24px', - letterSpacing: '0.14px', - color: vars.color.black, + lineHeight: '1.6', + letterSpacing: '-3%', + color: '#3C4F76', +}); + +export const button = style({ + padding: '7px 14px', + borderRadius: '20px', + border: '1px solid #3D95FF4D', + color: '#3D95FF', }); diff --git a/src/components/NoData/NoDataComponent.tsx b/src/components/NoData/NoDataComponent.tsx index 74233116..e1582c9a 100644 --- a/src/components/NoData/NoDataComponent.tsx +++ b/src/components/NoData/NoDataComponent.tsx @@ -2,14 +2,20 @@ import * as styles from './NoData.css'; import NoDataImg from '/public/images/no_data_image.svg'; import { ReactNode } from 'react'; import { commonLocale } from '@/components/locale'; -import { useLanguage } from '@/store/useLanguage'; +// import { useLanguage } from '@/store/useLanguage'; -function NoDataComponent({ message, button }: { message: string; button?: ReactNode }) { - const { language } = useLanguage(); +interface NoDataProps { + message: string; + button?: ReactNode; + buttonMessage?: string; +} + +function NoDataComponent({ message, button, buttonMessage }: NoDataProps) { + // const { language } = useLanguage(); return (
-
{message}
+ {buttonMessage && } {button}
); diff --git a/src/components/SearchBar/SearchBar.css.ts b/src/components/SearchBar/SearchBar.css.ts new file mode 100644 index 00000000..c1edaa4d --- /dev/null +++ b/src/components/SearchBar/SearchBar.css.ts @@ -0,0 +1,42 @@ +import { style } from '@vanilla-extract/css'; +import { vars } from '@/styles/theme.css'; + +export const wrapper = style({ + width: '100%', + + display: 'flex', + alignItems: 'center', + gap: '17px', +}); + +export const inputWrapper = style({ + width: '100%', + padding: '8px 16px', + + display: 'flex', + alignItems: 'center', + gap: '8px', + + backgroundColor: vars.color.white, + borderRadius: '12px', +}); + +export const input = style({ + width: '100%', + + fontSize: '1.6rem', + overflow: 'hidden', + '::placeholder': { + color: '#637587', + fontWeight: '400', + fontSize: '1.6rem', + }, +}); + +export const cancelButton = style({ + flexShrink: 0, + fontWeight: '400', + fontSize: '1.6rem', + letterSpacing: '-3%', + color: '#213752', +}); diff --git a/src/components/SearchBar/index.tsx b/src/components/SearchBar/index.tsx index f43b8ac3..a402172e 100644 --- a/src/components/SearchBar/index.tsx +++ b/src/components/SearchBar/index.tsx @@ -1,14 +1,20 @@ +import * as styles from './SearchBar.css'; +import SearchIcon from '/public/icons/ver3/search.svg'; + interface SearchBarProps { handleCancel?: () => void; } function SearchBarComponent({ handleCancel }: SearchBarProps) { return ( -
-
- +
+
+ +
- +
); } diff --git a/src/components/SimpleList/SimpleList.css.ts b/src/components/SimpleList/SimpleList.css.ts index a180cf2e..3d109e32 100644 --- a/src/components/SimpleList/SimpleList.css.ts +++ b/src/components/SimpleList/SimpleList.css.ts @@ -22,6 +22,7 @@ export const rankAndTitle = style({ }); export const rankWrapper = style({ + position: 'relative', width: '35px', height: '35px', @@ -31,20 +32,40 @@ export const rankWrapper = style({ flexShrink: 0, }); -export const rankText = style([ - titleMedium, +export const rankText = style({ + color: '#707681', + fontSize: '1.8rem', + fontWeight: '500', + letterSpacing: '-0.6px', + zIndex: 3, +}); + +export const rank1 = style([ + rankText, { - color: vars.color.black, - letterSpacing: '-0.6px', + color: '#3D95FF', }, ]); -export const titleText = style([ - bodyRegular, +export const heart = style({ + position: 'absolute', + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', +}); + +export const titleText = style({ + color: '#3E4455', + fontSize: '1.6rem', + wordBreak: 'break-all', + wordWrap: 'break-word', +}); + +export const titleRank1 = style([ + titleText, { - color: vars.color.black, - wordBreak: 'break-all', - wordWrap: 'break-word', + fontWeight: '600', + color: '#3D95FF', }, ]); diff --git a/src/components/SimpleList/SimpleList.tsx b/src/components/SimpleList/SimpleList.tsx index b54b87c1..b7a637ba 100644 --- a/src/components/SimpleList/SimpleList.tsx +++ b/src/components/SimpleList/SimpleList.tsx @@ -2,7 +2,7 @@ import Image from 'next/image'; import { ListItemType } from '@/lib/types/exploreType'; import * as styles from './SimpleList.css'; -import CrownIcon from '/public/icons/crown_new.svg'; +import HeartIcon from '/public/icons/ver3/blue_heart.svg'; import { commonLocale } from '@/components/locale'; import { useLanguage } from '@/store/useLanguage'; @@ -11,31 +11,20 @@ interface SimpleListProps { } function SimpleList({ items }: SimpleListProps) { - const { language } = useLanguage(); - const isExistImage = items?.some((item) => item.imageUrl !== ''); - return items?.map((item) => { return (
-
{item.rank === 1 ? : item.rank}
-
-
{item.title}
-
- {isExistImage && ( -
- {item.imageUrl && ( - {commonLocale[language].imageDescription} + {item.rank === 1 && ( +
+ +
)} + {item.rank}
- )} +
{item.title}
+
); }); diff --git a/src/components/exploreComponents/ListsRecommendation.css.ts b/src/components/exploreComponents/ListsRecommendation.css.ts index 1b1592ba..7fea4fc3 100644 --- a/src/components/exploreComponents/ListsRecommendation.css.ts +++ b/src/components/exploreComponents/ListsRecommendation.css.ts @@ -6,6 +6,7 @@ export const listBackground = createVar(); export const wrapperOuter = style({ padding: '0 16px 70px', + marginTop: '12px', display: 'flex', flexDirection: 'column', @@ -38,14 +39,14 @@ const listWrapperHoverAnimation = keyframes({ export const listWrapper = style({ width: '100%', marginBottom: '35px', - padding: '44px 24px 14px', + padding: '30px 24px 14px', position: 'relative', display: 'flex', flexDirection: 'column', borderRadius: '24px', - backgroundColor: listBackground, + backgroundColor: '#fff', ':hover': { animation: `${listWrapperHoverAnimation} 0.1s forwards`, @@ -53,65 +54,64 @@ export const listWrapper = style({ }, }); -export const labelsWrapper = style({ +export const listTopWrapper = style({ display: 'flex', - gap: '8px', -}); - -export const labelWrapper = style({ - marginRight: '8px', + alignItems: 'center', + justifyContent: 'space-between', }); -export const categoryWrapper = style({ - marginBottom: '11px', +export const version = style({ + padding: '6px 12px', - display: 'flex', - justifyContent: 'flex-start', - alignItems: 'center', + fontWeight: '400', + letterSpacing: '-3%', + fontSize: '1.4rem', + color: '#3D95FF', + backgroundColor: '#EEF6FF', + borderRadius: '20px', }); export const listInformationWrapper = style({ - marginBottom: '23px', + marginBottom: '20px', display: 'flex', flexDirection: 'column', }); -export const listTitle = style([ - headlineSmall, - { - color: vars.color.black, - wordBreak: 'break-word', - }, -]); +export const listTitle = style({ + color: '#3E4455', + wordBreak: 'break-word', + fontWeight: '700', + fontSize: '2rem', + letterSpacing: '-3%', +}); -export const listDescription = style([ - bodyMedium, - { - marginTop: '13px', +export const listDescription = style({ + marginTop: '13px', - color: vars.color.gray9, - wordBreak: 'break-word', - }, -]); + fontWeight: '400', + fontSize: '1.6rem', + color: '#3E4455', + wordBreak: 'break-word', +}); export const ownerInformationWrapper = style({ display: 'flex', - justifyContent: 'flex-end', + justifyContent: 'flex-start', alignItems: 'center', gap: '8px', }); -export const ownerNicknameText = style([ - bodySmall, - { - color: vars.color.black, - }, -]); +export const ownerNicknameText = style({ + color: '#676B75', + fontSize: '1.6rem', + fontWeight: '500', + letterSpacing: '-3%', +}); export const profileImageWrapper = style({ - width: '30px', - height: '30px', + width: '40px', + height: '40px', position: 'relative', }); @@ -129,27 +129,6 @@ export const simpleListWrapper = style({ flexDirection: 'column', gap: '10px', - borderRadius: '15px', - border: `1px solid ${vars.color.gray5}`, + borderTop: `1px solid ${vars.color.gray5}`, backgroundColor: vars.color.white, }); - -export const showMoreButtonWrapper = style({ - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - gap: '3px', - - cursor: 'pointer', -}); - -export const showMoreButton = style([ - labelSmall, - { - color: vars.color.gray9, - }, -]); - -export const noData = style({ - margin: '20px 0 70px', -}); diff --git a/src/components/exploreComponents/ListsRecommendation.tsx b/src/components/exploreComponents/ListsRecommendation.tsx index 226bd69c..fdeebf1a 100644 --- a/src/components/exploreComponents/ListsRecommendation.tsx +++ b/src/components/exploreComponents/ListsRecommendation.tsx @@ -11,15 +11,12 @@ import getRecommendedLists from '@/app/_api/explore/getRecommendedLists'; import { QUERY_KEYS } from '@/lib/constants/queryKeys'; import useIntersectionObserver from '@/hooks/useIntersectionObserver'; import { ListRecommendationType } from '@/lib/types/exploreType'; -import Label from '@/components/Label/Label'; import * as styles from './ListsRecommendation.css'; -import NoDataComponent from '@/components/NoData/NoDataComponent'; import { exploreBackgroundColors } from '@/lib/constants/exploreListBackgroundColor'; import { ListRecommendationSkeleton, ListsSkeleton } from './Skeleton'; -import sparkleEmoji from '/public/images/sparkle.png'; import fallbackProfile from '/public/images/fallback_profileImage.webp'; +import { LIST_DATA } from '@/app/(home)/mock/mockdata'; -import ChevronDown from '/public/icons/chevron_down.svg'; import { commonLocale } from '@/components/locale'; import { useLanguage } from '@/store/useLanguage'; @@ -64,13 +61,9 @@ function ListRecommendation() { return (
-
-
NEW
- {commonLocale[language].sparkleEmofi} -
    - {recommendLists?.length !== 0 ? ( - recommendLists?.map((item: ListRecommendationType, index) => { + {LIST_DATA?.length !== 0 && + LIST_DATA?.map((item: ListRecommendationType, index) => { return ( {isFetching ? ( @@ -80,24 +73,8 @@ function ListRecommendation() { className={styles.listWrapper} style={assignInlineVars({ [styles.listBackground]: exploreBackgroundColors[COLOR_INDEX(index)] })} > -
    -
    - -
    -
      - {item.labels.map((label) => { - return ( -
      - -
      - ); - })} -
    -
    -
    -
    {item.title}
    +
    -
    {`By. ${item.ownerNickname}`}
    {item?.ownerProfileImage ? ( )} +
    {item.ownerNickname}
    +
    {`Ver.${item.version}`}
    +
    +
    +
    {item.title}
    +
    {item.description}
    - -
    - - {commonLocale[language].more} -
    - )} ); - }) - ) : ( -
    - -
    - )} + })}
diff --git a/src/components/exploreComponents/TrendingLists.tsx b/src/components/exploreComponents/TrendingLists.tsx deleted file mode 100644 index 115ce8db..00000000 --- a/src/components/exploreComponents/TrendingLists.tsx +++ /dev/null @@ -1,207 +0,0 @@ -'use client'; -import Image from 'next/image'; -import Link from 'next/link'; -import { useQuery } from '@tanstack/react-query'; -import { assignInlineVars } from '@vanilla-extract/dynamic'; -import { Swiper, SwiperSlide } from 'swiper/react'; -import 'swiper/css'; -import { Autoplay, EffectCoverflow } from 'swiper/modules'; - -import getTrendingLists from '@/app/_api/explore/getTrendingLists'; -import { QUERY_KEYS } from '@/lib/constants/queryKeys'; -import { TrendingListType } from '@/lib/types/exploreType'; - -import * as styles from './TrendingLists.css'; -import { vars } from '@/styles/theme.css'; -import { TrendingListsSkeleton } from './Skeleton'; -import oceanEmoji from '/public/images/ocean.png'; -import fallbackProfile from '/public/images/fallback_profileImage.webp'; -import { commonLocale } from '@/components/locale'; -import { useLanguage } from '@/store/useLanguage'; -import { BACKGROUND_COLOR_READ } from '@/styles/Color'; - -/**@todo 트렌딩 리스트 바뀐 디자인에 맞게 새로 갈아엎을 예정 */ - -const swiperSliderStyle = [ - { - width: '258px', - borderRadius: '40px', - }, - { - width: '190px', - borderRadius: '180px', - }, - { - width: '258px', - borderRadius: '40px', - }, - { - width: '172px', - borderRadius: '20px', - }, -]; -const STYLE_INDEX = (num: number) => num % 4; - -function TrendingList() { - const { language } = useLanguage(); - const { data: trendingLists, isFetching } = useQuery({ - queryKey: [QUERY_KEYS.getTrendingLists], - queryFn: () => getTrendingLists(), - }); - - const swiperStyle = { - width: '100vw', - height: '100%', - padding: '10px 0', - }; - - if (isFetching) { - return ; - } - - return ( -
-
-

TRENDING

- {commonLocale[language].oceanEmofi} -
-
-
- {trendingLists && trendingLists.length > 0 && ( - - {trendingLists.map((item, index) => ( - - - - ))} - - {/* 슬라이드 개수가 10개 미만일 경우 추가 슬라이드를 생성 */} - {trendingLists.length < 10 && - Array.from({ length: 10 - trendingLists.length }).map((_, index) => ( - - - - ))} - - )} -
-
-
- ); -} - -interface TrendingListItemProps { - item?: TrendingListType; - index: number; -} - -function TrendingListItem({ item, index }: TrendingListItemProps) { - return ( - -
- {item?.itemImageUrl ? ( -
- -
- ) : ( -
- -
- )} -
- - ); -} - -export default TrendingList; - -interface TrendingListInformationType { - item?: TrendingListType; -} - -function TrendingListInformation({ item }: TrendingListInformationType) { - const { language } = useLanguage(); - return ( -
-
-

{item?.title}

-
-
-
-
- {item?.ownerProfileImageUrl ? ( - {commonLocale[language].userProfileImage} - ) : ( - {commonLocale[language].userProfileImage} - )} -
- - {item?.ownerNickname} - -
-
- ); -} diff --git a/src/lib/types/exploreType.ts b/src/lib/types/exploreType.ts index b6fc88db..6c69cfcf 100644 --- a/src/lib/types/exploreType.ts +++ b/src/lib/types/exploreType.ts @@ -1,12 +1,20 @@ +interface Top3Type { + id: number; + rank: number; + title: string; +} + export interface TrendingListType { id: number; ownerId: number; ownerNickname: string; ownerProfileImageUrl: string; title: string; + category: string; description: string; backgroundColor: string; itemImageUrl: string; + top3: Top3Type[]; } export interface UsersRecommendationItemType { @@ -39,4 +47,5 @@ export interface ListRecommendationType { title: string; description: string; items: ListItemType[]; + version: number; } diff --git a/src/store/useTab.ts b/src/store/useTab.ts new file mode 100644 index 00000000..49feded5 --- /dev/null +++ b/src/store/useTab.ts @@ -0,0 +1,13 @@ +import { create } from 'zustand'; + +export type TabType = 'recommendation' | 'recent' | 'following'; + +interface tabStoreType { + currentTab: TabType; + setCurrentTab: (tabType: TabType) => void; +} + +export const useTab = create((set) => ({ + currentTab: 'recommendation', + setCurrentTab: (tabType: TabType) => set({ currentTab: tabType }), +})); From a3277cae786a9a133b8ad58ab22036a516f2f76e Mon Sep 17 00:00:00 2001 From: Nahyun Date: Fri, 16 Aug 2024 21:02:45 +0900 Subject: [PATCH 06/86] =?UTF-8?q?Chore:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20css=20=ED=8C=8C=EC=9D=BC=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../(home)/_components/__TrendingLists.css.ts | 187 ------------------ 1 file changed, 187 deletions(-) delete mode 100644 src/app/(home)/_components/__TrendingLists.css.ts diff --git a/src/app/(home)/_components/__TrendingLists.css.ts b/src/app/(home)/_components/__TrendingLists.css.ts deleted file mode 100644 index 5b7b912f..00000000 --- a/src/app/(home)/_components/__TrendingLists.css.ts +++ /dev/null @@ -1,187 +0,0 @@ -import { width } from './../../../components/Skeleton/Skeleton.css'; -import { style, createVar } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; -import { headlineSmall, titleMedium, caption } from '@/styles/font.css'; - -export const blackLayer = createVar(); -export const itemFontColor = createVar(); - -export const customBorderRadius = createVar(); -export const customBackgroundColor = createVar(); -export const customFontColor = createVar(); -export const customItemBorder = createVar(); -export const customBackgroundImage = createVar(); - -export const sectionTitle = style([ - headlineSmall, - { - fontWeight: 600, - }, -]); - -export const titleWrapper = style({ - marginBottom: '26px', - padding: '0 16px', - - display: 'flex', - alignItems: 'baseline', - gap: '5px', -}); - -export const wrapper = style({ - marginTop: '50px', - marginBottom: '50px', -}); - -export const listWrapper = style({ - marginBottom: '30px', - height: '220px', - - display: 'flex', - alignItems: 'center', - - '::-webkit-scrollbar': { - display: 'none', - }, -}); - -export const sliderItem = style({ - height: 'auto', -}); - -export const listItem = style({ - cursor: 'pointer', -}); - -export const testItem = style({ - width: '100%', - height: '100%', -}); - -export const slide = style({}); - -export const itemWrapper = style({ - width: '100%', - height: '100%', - padding: '0 40px', - borderRadius: customBorderRadius, - - position: 'relative', - - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - - background: customBackgroundColor, - border: customItemBorder, - cursor: 'pointer', - - transition: 'transform 0.3s ease', // 애니메이션 효과를 부여할 속성 및 시간을 지정합니다. - - ':hover': { - transform: 'scale(1.01)', // hover 시 scale을 1.02로 변경합니다. - boxShadow: 'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px', - }, -}); - -export const itemWrapperWithImage = style([ - itemWrapper, - { - backgroundImage: customBackgroundImage, - backgroundRepeat: 'no-repeat', - backgroundSize: 'cover', - backgroundPosition: 'center', - zIndex: 0, - - selectors: { - '&:after': { - content: '', - position: 'absolute', - top: 0, - left: 0, - width: '100%', - height: '100%', - backgroundColor: 'rgba(0, 0, 0, 0.3)', - borderRadius: customBorderRadius, - }, - }, - }, -]); - -export const itemInformationWrapper = style({ - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - zIndex: 4, -}); - -export const ownerProfileWrapper = style({ - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - gap: '8px', -}); - -export const itemTitle = style({ - display: 'flex', - flexDirection: 'column', - gap: '8px', - - marginBottom: '16px', - color: customFontColor, - textAlign: 'center', - zIndex: 1, - overflow: 'hidden', - whiteSpace: 'normal', - textOverflow: 'ellipsis', - WebkitLineClamp: 3, - WebkitBoxOrient: 'vertical', - wordBreak: 'keep-all', -}); - -export const itemTitleContent = style({ - display: 'inline', - fontWeight: '600', - fontSize: '1.8rem', -}); - -export const category = style({ - padding: '6px 12px', - marginBottom: '16px', - - backgroundColor: '#3D95FF', - color: '#fff', - fontSize: '1.4rem', - borderRadius: '20px', -}); - -export const listOwner = style({ - fontSize: '1.6rem', - fontWeight: '400', - letterSpacing: '-3%', -}); - -export const top3ItemNoImage = style({ - padding: '5px 7px', - - backgroundColor: '#F5FAFF', - color: '#3D95FF', - borderRadius: '20px', -}); - -export const top3ItemWithImage = style({ - padding: '5px 7px', - - color: '#ffffff', - borderRadius: '20px', - backgroundColor: '#F5FAFF4D', -}); - -export const top3Wrapper = style({ - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - gap: '7px', - - fontSize: '1rem', -}); From f3e2077e5b6a1092a79577cdb54c0dd4dee96126 Mon Sep 17 00:00:00 2001 From: Eugene-A-01 Date: Sun, 11 Aug 2024 17:35:31 +0900 Subject: [PATCH 07/86] =?UTF-8?q?design/=EB=94=94=EC=9E=90=EC=9D=B8?= =?UTF-8?q?=EC=8B=9C=EC=8A=A4=ED=85=9C(=EC=BB=AC=EB=9F=AC&=ED=8F=B0?= =?UTF-8?q?=ED=8A=B8)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .vscode/settings.json | 4 +- .../_components/LanguageDropdown.css.ts | 4 +- src/app/account/page.css.ts | 4 +- .../profile/_components/ProfileForm.css.ts | 4 +- .../_component/AgreementConfirmation.css.ts | 4 +- .../_component/WithdrawalButton.css.ts | 4 +- .../_component/WithdrawalNotice.css.ts | 4 +- src/app/account/withdraw/page.css.ts | 2 +- .../[category]/_components/NoData.css.ts | 2 +- .../[category]/_components/Top3Card.css.ts | 2 +- src/app/collection/page.css.ts | 2 +- src/app/intro/_components/Footer.css.ts | 4 +- src/app/intro/_components/Label.css.ts | 4 +- .../intro/_components/LabelsAnimation.css.ts | 4 +- src/app/intro/_components/ListWave.css.ts | 4 +- src/app/intro/_components/SearchBar.css.ts | 4 +- src/app/intro/_components/Section1.css.ts | 2 +- src/app/intro/_components/Section2.css.ts | 4 +- src/app/intro/_components/Section3.css.ts | 4 +- src/app/intro/_components/Section4.css.ts | 4 +- src/app/intro/_components/Section5.css.ts | 4 +- src/app/intro/_components/Section6.css.ts | 4 +- src/app/intro/_components/Section7.css.ts | 4 +- src/app/intro/page.css.ts | 2 +- src/app/layout.css.ts | 4 +- .../ListDetailInner/RankList.css.ts | 2 +- .../ListDetailOuter/Collaborators.css.ts | 2 +- .../ListDetailOuter/CollaboratorsModal.css.ts | 4 +- .../ListDetailOuter/CollaboratorsModal.tsx | 2 +- .../ListDetailOuter/Comment.css.ts | 2 +- .../_components/ListDetailOuter/Comment.tsx | 2 +- .../ListDetailOuter/CommentForm.tsx | 2 +- .../ListDetailOuter/Comments.css.ts | 2 +- .../ListDetailOuter/HeaderRight.tsx | 2 +- .../ListDetailOuter/ListInformation.css.ts | 4 +- .../ListDetailOuter/ListInformation.tsx | 2 +- .../ListDetailOuter/ModalButtonStyle.css.ts | 2 +- .../ListDetailOuter/Replies.css.ts | 4 +- .../_components/ListDetailOuter/Replies.tsx | 2 +- .../history/_component/HistoryGraph.css.ts | 4 +- .../history/_component/HistoryVersions.css.ts | 4 +- src/app/list/[listId]/history/page.css.ts | 4 +- .../list/create/_components/CreateItem.css.ts | 4 +- .../_components/item/AddItemButton.css.ts | 4 +- .../create/_components/item/Header.css.ts | 4 +- .../create/_components/item/ItemLayout.css.ts | 4 +- .../create/_components/item/ItemLayout.tsx | 2 +- .../list/create/_components/item/Items.css.ts | 4 +- .../create/_components/item/LinkModal.css.ts | 4 +- .../create/_components/item/LinkModal.tsx | 2 +- .../create/_components/item/Preview.css.ts | 2 +- .../_components/list/ButtonSelector.css.ts | 4 +- .../create/_components/list/LabelInput.css.ts | 4 +- .../_components/list/MemberSelector.css.ts | 4 +- .../create/_components/list/RadioInput.css.ts | 4 +- .../create/_components/list/Section.css.ts | 4 +- .../_components/list/SimpleInput.css.ts | 4 +- src/app/not-found.css.ts | 4 +- .../_components/NotificationList.css.ts | 4 +- .../_components/ProfileImage.css.ts | 2 +- .../search/_components/CategoryArea.css.ts | 2 +- src/app/search/_components/KeywordArea.css.ts | 2 +- src/app/search/_components/NoData.css.ts | 2 +- .../_components/SearchUserProfile.css.ts | 2 +- src/app/search/_components/Top3Card.css.ts | 2 +- .../_components/CategoryButton.css.ts | 4 +- .../_components/CreateNicknameStep.css.ts | 4 +- .../_components/ListPreview.css.ts | 4 +- .../(follow)/_components/UserList.css.ts | 4 +- src/app/user/[userId]/(follow)/follow.css.ts | 4 +- src/app/user/[userId]/_components/Card.css.ts | 4 +- .../[userId]/_components/Categories.css.ts | 2 +- .../user/[userId]/_components/Content.css.ts | 4 +- .../[userId]/_components/FollowButton.css.ts | 2 +- .../user/[userId]/_components/Profile.css.ts | 4 +- src/app/withdrawn-account/page.css.ts | 2 +- src/components/BlueButton/BlueButton.css.ts | 4 +- src/components/BottomNav/BottomNav.css.ts | 2 +- src/components/BottomNav/BottomNav.tsx | 2 +- src/components/BottomSheet/BottomSheet.css.ts | 2 +- src/components/Header/Header.css.ts | 2 +- src/components/Label/Label.css.ts | 4 +- src/components/LinkPreview/LinkPreview.css.ts | 2 +- src/components/Modal/Modal.css.ts | 2 +- src/components/Modal/ModalButton.css.ts | 4 +- src/components/Modal/ModalTitle.css.ts | 2 +- src/components/NoData/NoData.css.ts | 2 +- .../SelectComponent/SelectComponent.tsx | 2 +- src/components/SimpleList/SimpleList.css.ts | 4 +- src/components/VideoEmbed/VideoEmbed.css.ts | 2 +- .../exploreComponents/Header.css.ts | 2 +- .../ListsRecommendation.css.ts | 4 +- .../exploreComponents/Skeleton.css.ts | 2 +- .../exploreComponents/TrendingLists.css.ts | 4 +- .../exploreComponents/TrendingLists.tsx | 2 +- .../UsersRecommendation.css.ts | 4 +- .../floatingButton/FloatingContainer.css.ts | 2 +- src/components/login/LoginModal.css.ts | 4 +- src/styles/GlobalStyles.css.ts | 2 +- src/styles/__font.css.ts | 185 ++++++++++++++++++ src/styles/__theme.css.ts | 48 +++++ src/styles/font.css.ts | 180 ++--------------- src/styles/theme.css.ts | 45 ++--- 103 files changed, 424 insertions(+), 342 deletions(-) create mode 100644 src/styles/__font.css.ts create mode 100644 src/styles/__theme.css.ts diff --git a/.vscode/settings.json b/.vscode/settings.json index 0967ef42..25fa6215 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1 +1,3 @@ -{} +{ + "typescript.tsdk": "node_modules/typescript/lib" +} diff --git a/src/app/account/_components/LanguageDropdown.css.ts b/src/app/account/_components/LanguageDropdown.css.ts index faec5db9..ee070065 100644 --- a/src/app/account/_components/LanguageDropdown.css.ts +++ b/src/app/account/_components/LanguageDropdown.css.ts @@ -1,6 +1,6 @@ import { style } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; -import * as fonts from '@/styles/font.css'; +import { vars } from '@/styles/__theme.css'; +import * as fonts from '@/styles/__font.css'; export const container = style({ position: 'relative', diff --git a/src/app/account/page.css.ts b/src/app/account/page.css.ts index d079a6dc..bd684fed 100644 --- a/src/app/account/page.css.ts +++ b/src/app/account/page.css.ts @@ -1,6 +1,6 @@ import { style } from '@vanilla-extract/css'; -import * as fonts from '@/styles/font.css'; -import { vars } from '@/styles/theme.css'; +import * as fonts from '@/styles/__font.css'; +import { vars } from '@/styles/__theme.css'; export const container = style({ marginTop: 18, diff --git a/src/app/account/profile/_components/ProfileForm.css.ts b/src/app/account/profile/_components/ProfileForm.css.ts index 50a549bf..b7488212 100644 --- a/src/app/account/profile/_components/ProfileForm.css.ts +++ b/src/app/account/profile/_components/ProfileForm.css.ts @@ -1,6 +1,6 @@ import { style, createVar } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; -import { labelSmall, bodyMedium, caption } from '@/styles/font.css'; +import { vars } from '@/styles/__theme.css'; +import { labelSmall, bodyMedium, caption } from '@/styles/__font.css'; export const form = style({ maxWidth: 400, diff --git a/src/app/account/withdraw/_component/AgreementConfirmation.css.ts b/src/app/account/withdraw/_component/AgreementConfirmation.css.ts index 54f41848..70f7c4ba 100644 --- a/src/app/account/withdraw/_component/AgreementConfirmation.css.ts +++ b/src/app/account/withdraw/_component/AgreementConfirmation.css.ts @@ -1,6 +1,6 @@ import { style } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; -import * as fonts from '@/styles/font.css'; +import { vars } from '@/styles/__theme.css'; +import * as fonts from '@/styles/__font.css'; export const wrapper = style({ display: 'flex', diff --git a/src/app/account/withdraw/_component/WithdrawalButton.css.ts b/src/app/account/withdraw/_component/WithdrawalButton.css.ts index 0cdb9114..4f650037 100644 --- a/src/app/account/withdraw/_component/WithdrawalButton.css.ts +++ b/src/app/account/withdraw/_component/WithdrawalButton.css.ts @@ -1,6 +1,6 @@ import { style } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; -import * as fonts from '@/styles/font.css'; +import { vars } from '@/styles/__theme.css'; +import * as fonts from '@/styles/__font.css'; export const confirmButton = style([ fonts.bodyMedium, diff --git a/src/app/account/withdraw/_component/WithdrawalNotice.css.ts b/src/app/account/withdraw/_component/WithdrawalNotice.css.ts index ef6ef1db..f8fe96d5 100644 --- a/src/app/account/withdraw/_component/WithdrawalNotice.css.ts +++ b/src/app/account/withdraw/_component/WithdrawalNotice.css.ts @@ -1,6 +1,6 @@ import { style } from '@vanilla-extract/css'; -import * as fonts from '@/styles/font.css'; -import { vars } from '@/styles/theme.css'; +import * as fonts from '@/styles/__font.css'; +import { vars } from '@/styles/__theme.css'; export const wrapper = style({ display: 'flex', diff --git a/src/app/account/withdraw/page.css.ts b/src/app/account/withdraw/page.css.ts index 87efd3b9..d4c64458 100644 --- a/src/app/account/withdraw/page.css.ts +++ b/src/app/account/withdraw/page.css.ts @@ -1,4 +1,4 @@ -import { vars } from '@/styles/theme.css'; +import { vars } from '@/styles/__theme.css'; import { style } from '@vanilla-extract/css'; export const page = style({ diff --git a/src/app/collection/[category]/_components/NoData.css.ts b/src/app/collection/[category]/_components/NoData.css.ts index 7cd47626..052ca24c 100644 --- a/src/app/collection/[category]/_components/NoData.css.ts +++ b/src/app/collection/[category]/_components/NoData.css.ts @@ -1,5 +1,5 @@ import { style } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; +import { vars } from '@/styles/__theme.css'; export const container = style({ paddingTop: '2rem', diff --git a/src/app/collection/[category]/_components/Top3Card.css.ts b/src/app/collection/[category]/_components/Top3Card.css.ts index 3541c5ab..88d92588 100644 --- a/src/app/collection/[category]/_components/Top3Card.css.ts +++ b/src/app/collection/[category]/_components/Top3Card.css.ts @@ -1,5 +1,5 @@ import { style, createVar } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; +import { vars } from '@/styles/__theme.css'; export const listColor = createVar(); export const listBackgroundImage = createVar(); diff --git a/src/app/collection/page.css.ts b/src/app/collection/page.css.ts index 13416ac0..5371635a 100644 --- a/src/app/collection/page.css.ts +++ b/src/app/collection/page.css.ts @@ -1,5 +1,5 @@ import { style, keyframes } from '@vanilla-extract/css'; -import * as fonts from '@/styles/font.css'; +import * as fonts from '@/styles/__font.css'; export const wrapper = style({ marginBottom: 70, diff --git a/src/app/intro/_components/Footer.css.ts b/src/app/intro/_components/Footer.css.ts index 4983bf17..717e37e3 100644 --- a/src/app/intro/_components/Footer.css.ts +++ b/src/app/intro/_components/Footer.css.ts @@ -1,6 +1,6 @@ import { style } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; -import * as fonts from '@/styles/font.css'; +import { vars } from '@/styles/__theme.css'; +import * as fonts from '@/styles/__font.css'; export const background = style({ width: '100%', diff --git a/src/app/intro/_components/Label.css.ts b/src/app/intro/_components/Label.css.ts index c6335580..47741624 100644 --- a/src/app/intro/_components/Label.css.ts +++ b/src/app/intro/_components/Label.css.ts @@ -1,6 +1,6 @@ import { style } from '@vanilla-extract/css'; -import * as fonts from '@/styles/font.css'; -import { vars } from '@/styles/theme.css'; +import * as fonts from '@/styles/__font.css'; +import { vars } from '@/styles/__theme.css'; export const baseLabel = style([ fonts.labelMedium, diff --git a/src/app/intro/_components/LabelsAnimation.css.ts b/src/app/intro/_components/LabelsAnimation.css.ts index 3987b86c..8422bb39 100644 --- a/src/app/intro/_components/LabelsAnimation.css.ts +++ b/src/app/intro/_components/LabelsAnimation.css.ts @@ -1,6 +1,6 @@ import { style, keyframes } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; -import * as fonts from '@/styles/font.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/ListWave.css.ts b/src/app/intro/_components/ListWave.css.ts index 7bfd7692..f2324225 100644 --- a/src/app/intro/_components/ListWave.css.ts +++ b/src/app/intro/_components/ListWave.css.ts @@ -1,6 +1,6 @@ import { style, keyframes, createVar } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; -import * as fonts from '@/styles/font.css'; +import { vars } from '@/styles/__theme.css'; +import * as fonts from '@/styles/__font.css'; export const customBackgroundImage = createVar(); diff --git a/src/app/intro/_components/SearchBar.css.ts b/src/app/intro/_components/SearchBar.css.ts index 76840e27..c786f0e8 100644 --- a/src/app/intro/_components/SearchBar.css.ts +++ b/src/app/intro/_components/SearchBar.css.ts @@ -1,6 +1,6 @@ import { style, keyframes } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; -import * as fonts from '@/styles/font.css'; +import { vars } from '@/styles/__theme.css'; +import * as fonts from '@/styles/__font.css'; export const wrapper = style({ width: '330px', diff --git a/src/app/intro/_components/Section1.css.ts b/src/app/intro/_components/Section1.css.ts index 6af4f7e6..f87c0acf 100644 --- a/src/app/intro/_components/Section1.css.ts +++ b/src/app/intro/_components/Section1.css.ts @@ -1,5 +1,5 @@ import { style, keyframes } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; +import { vars } from '@/styles/__theme.css'; export const wrapper = style({ width: '100%', diff --git a/src/app/intro/_components/Section2.css.ts b/src/app/intro/_components/Section2.css.ts index dfd270af..40d47a92 100644 --- a/src/app/intro/_components/Section2.css.ts +++ b/src/app/intro/_components/Section2.css.ts @@ -1,6 +1,6 @@ import { style, createVar } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; -import * as fonts from '@/styles/font.css'; +import { vars } from '@/styles/__theme.css'; +import * as fonts from '@/styles/__font.css'; export const customBackgroundImage = createVar(); diff --git a/src/app/intro/_components/Section3.css.ts b/src/app/intro/_components/Section3.css.ts index 41fde841..809366b5 100644 --- a/src/app/intro/_components/Section3.css.ts +++ b/src/app/intro/_components/Section3.css.ts @@ -1,6 +1,6 @@ import { style, keyframes } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; -import * as fonts from '@/styles/font.css'; +import { vars } from '@/styles/__theme.css'; +import * as fonts from '@/styles/__font.css'; export const background = style({ width: '100%', diff --git a/src/app/intro/_components/Section4.css.ts b/src/app/intro/_components/Section4.css.ts index 9213b5f3..73964081 100644 --- a/src/app/intro/_components/Section4.css.ts +++ b/src/app/intro/_components/Section4.css.ts @@ -1,6 +1,6 @@ import { style, keyframes } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; -import * as fonts from '@/styles/font.css'; +import { vars } from '@/styles/__theme.css'; +import * as fonts from '@/styles/__font.css'; export const background = style({ width: '100%', diff --git a/src/app/intro/_components/Section5.css.ts b/src/app/intro/_components/Section5.css.ts index 90ed6c43..4ad36b51 100644 --- a/src/app/intro/_components/Section5.css.ts +++ b/src/app/intro/_components/Section5.css.ts @@ -1,6 +1,6 @@ import { style, keyframes } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; -import * as fonts from '@/styles/font.css'; +import { vars } from '@/styles/__theme.css'; +import * as fonts from '@/styles/__font.css'; export const background = style({ width: '100%', diff --git a/src/app/intro/_components/Section6.css.ts b/src/app/intro/_components/Section6.css.ts index e3e0898c..5ab956f7 100644 --- a/src/app/intro/_components/Section6.css.ts +++ b/src/app/intro/_components/Section6.css.ts @@ -1,6 +1,6 @@ import { style } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; -import * as fonts from '@/styles/font.css'; +import { vars } from '@/styles/__theme.css'; +import * as fonts from '@/styles/__font.css'; export const background = style({ width: '100%', diff --git a/src/app/intro/_components/Section7.css.ts b/src/app/intro/_components/Section7.css.ts index 6bbaf249..dc0802d7 100644 --- a/src/app/intro/_components/Section7.css.ts +++ b/src/app/intro/_components/Section7.css.ts @@ -1,6 +1,6 @@ import { style, createVar } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; -import * as fonts from '@/styles/font.css'; +import { vars } from '@/styles/__theme.css'; +import * as fonts from '@/styles/__font.css'; export const background = style({ width: '100%', diff --git a/src/app/intro/page.css.ts b/src/app/intro/page.css.ts index 4ccf06c0..554c70d3 100644 --- a/src/app/intro/page.css.ts +++ b/src/app/intro/page.css.ts @@ -1,5 +1,5 @@ import { style } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; +import { vars } from '@/styles/__theme.css'; export const wrapper = style({ width: '100%', diff --git a/src/app/layout.css.ts b/src/app/layout.css.ts index 774c1615..9cf05b21 100644 --- a/src/app/layout.css.ts +++ b/src/app/layout.css.ts @@ -1,5 +1,5 @@ -import { vars } from '@/styles/theme.css'; -import * as fonts from '@/styles/font.css'; +import { vars } from '@/styles/__theme.css'; +import * as fonts from '@/styles/__font.css'; import { style } from '@vanilla-extract/css'; export const body = style({ diff --git a/src/app/list/[listId]/_components/ListDetailInner/RankList.css.ts b/src/app/list/[listId]/_components/ListDetailInner/RankList.css.ts index 5516a4ec..2899b773 100644 --- a/src/app/list/[listId]/_components/ListDetailInner/RankList.css.ts +++ b/src/app/list/[listId]/_components/ListDetailInner/RankList.css.ts @@ -1,5 +1,5 @@ import { createVar, style } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; +import { vars } from '@/styles/__theme.css'; export const listColor = createVar(); diff --git a/src/app/list/[listId]/_components/ListDetailOuter/Collaborators.css.ts b/src/app/list/[listId]/_components/ListDetailOuter/Collaborators.css.ts index 9a8ee905..cabcf5dc 100644 --- a/src/app/list/[listId]/_components/ListDetailOuter/Collaborators.css.ts +++ b/src/app/list/[listId]/_components/ListDetailOuter/Collaborators.css.ts @@ -1,5 +1,5 @@ import { style } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; +import { vars } from '@/styles/__theme.css'; export const collaboratorWrapper = style({ position: 'relative', diff --git a/src/app/list/[listId]/_components/ListDetailOuter/CollaboratorsModal.css.ts b/src/app/list/[listId]/_components/ListDetailOuter/CollaboratorsModal.css.ts index bd59a8cb..72dd1275 100644 --- a/src/app/list/[listId]/_components/ListDetailOuter/CollaboratorsModal.css.ts +++ b/src/app/list/[listId]/_components/ListDetailOuter/CollaboratorsModal.css.ts @@ -1,6 +1,6 @@ import { style } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; -import * as fonts from '@/styles/font.css'; +import { vars } from '@/styles/__theme.css'; +import * as fonts from '@/styles/__font.css'; /** * @todo 공용 폰트 스타일 적용 diff --git a/src/app/list/[listId]/_components/ListDetailOuter/CollaboratorsModal.tsx b/src/app/list/[listId]/_components/ListDetailOuter/CollaboratorsModal.tsx index 0d51b259..3882b9bd 100644 --- a/src/app/list/[listId]/_components/ListDetailOuter/CollaboratorsModal.tsx +++ b/src/app/list/[listId]/_components/ListDetailOuter/CollaboratorsModal.tsx @@ -4,7 +4,7 @@ import * as styles from './CollaboratorsModal.css'; import { UserProfileType } from '@/lib/types/userProfileType'; import CancelButton from '/public/icons/cancel_button.svg'; import fallbackProfile from '/public/images/fallback_profileImage.webp'; -import { vars } from '@/styles/theme.css'; +import { vars } from '@/styles/__theme.css'; import { listLocale } from '@/app/list/[listId]/locale'; import { useLanguage } from '@/store/useLanguage'; diff --git a/src/app/list/[listId]/_components/ListDetailOuter/Comment.css.ts b/src/app/list/[listId]/_components/ListDetailOuter/Comment.css.ts index c5217054..ff09aa7c 100644 --- a/src/app/list/[listId]/_components/ListDetailOuter/Comment.css.ts +++ b/src/app/list/[listId]/_components/ListDetailOuter/Comment.css.ts @@ -1,5 +1,5 @@ import { style } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; +import { vars } from '@/styles/__theme.css'; /**@todo 공용폰트 스타일 적용 */ diff --git a/src/app/list/[listId]/_components/ListDetailOuter/Comment.tsx b/src/app/list/[listId]/_components/ListDetailOuter/Comment.tsx index a6e4f132..479e8596 100644 --- a/src/app/list/[listId]/_components/ListDetailOuter/Comment.tsx +++ b/src/app/list/[listId]/_components/ListDetailOuter/Comment.tsx @@ -15,7 +15,7 @@ import { useCommentId, useCommentStatus } from '@/store/useComment'; import { commentLocale } from '@/app/list/[listId]/locale'; import * as styles from './Comment.css'; -import { vars } from '@/styles/theme.css'; +import { vars } from '@/styles/__theme.css'; import fallbackProfile from '/public/images/fallback_profileImage.webp'; import EditPen from '/public/icons/edit_pen.svg'; import { useLanguage } from '@/store/useLanguage'; diff --git a/src/app/list/[listId]/_components/ListDetailOuter/CommentForm.tsx b/src/app/list/[listId]/_components/ListDetailOuter/CommentForm.tsx index b49517c4..70ed087a 100644 --- a/src/app/list/[listId]/_components/ListDetailOuter/CommentForm.tsx +++ b/src/app/list/[listId]/_components/ListDetailOuter/CommentForm.tsx @@ -10,7 +10,7 @@ import Modal from '@/components/Modal/Modal'; import LoginModal from '@/components/login/LoginModal'; import useBooleanOutput from '@/hooks/useBooleanOutput'; -import { vars } from '@/styles/theme.css'; +import { vars } from '@/styles/__theme.css'; import * as styles from './Comments.css'; import CancelButton from '/public/icons/cancel_button.svg'; import Airplane from '/public/icons/airplane_send.svg'; diff --git a/src/app/list/[listId]/_components/ListDetailOuter/Comments.css.ts b/src/app/list/[listId]/_components/ListDetailOuter/Comments.css.ts index 8c77149e..5aedabe2 100644 --- a/src/app/list/[listId]/_components/ListDetailOuter/Comments.css.ts +++ b/src/app/list/[listId]/_components/ListDetailOuter/Comments.css.ts @@ -1,5 +1,5 @@ import { style } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; +import { vars } from '@/styles/__theme.css'; /**@todo 공용폰트 스타일 적용 */ diff --git a/src/app/list/[listId]/_components/ListDetailOuter/HeaderRight.tsx b/src/app/list/[listId]/_components/ListDetailOuter/HeaderRight.tsx index 871d5d6d..cb56ed49 100644 --- a/src/app/list/[listId]/_components/ListDetailOuter/HeaderRight.tsx +++ b/src/app/list/[listId]/_components/ListDetailOuter/HeaderRight.tsx @@ -9,7 +9,7 @@ import HistoryButton from '/public/icons/history.svg'; import PencilButton from '/public/icons/edit_pen.svg'; import { listLocale } from '@/app/list/[listId]/locale'; -import { vars } from '@/styles/theme.css'; +import { vars } from '@/styles/__theme.css'; import { useLanguage } from '@/store/useLanguage'; interface HeaderRightProps { diff --git a/src/app/list/[listId]/_components/ListDetailOuter/ListInformation.css.ts b/src/app/list/[listId]/_components/ListDetailOuter/ListInformation.css.ts index 2e073a1f..feb6b14c 100644 --- a/src/app/list/[listId]/_components/ListDetailOuter/ListInformation.css.ts +++ b/src/app/list/[listId]/_components/ListDetailOuter/ListInformation.css.ts @@ -1,6 +1,6 @@ import { style } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; -import { body2, title3, bodyRegular } from '@/styles/font.css'; +import { vars } from '@/styles/__theme.css'; +import { body2, title3, bodyRegular } from '@/styles/__font.css'; /**@todo 공용폰트 스타일 적용 */ export const wrapper = style({ diff --git a/src/app/list/[listId]/_components/ListDetailOuter/ListInformation.tsx b/src/app/list/[listId]/_components/ListDetailOuter/ListInformation.tsx index ceb15c70..6dabb566 100644 --- a/src/app/list/[listId]/_components/ListDetailOuter/ListInformation.tsx +++ b/src/app/list/[listId]/_components/ListDetailOuter/ListInformation.tsx @@ -29,7 +29,7 @@ import { modalLocale, listLocale } from '@/app/list/[listId]/locale'; import * as styles from './ListInformation.css'; import * as modalStyles from '@/components/Modal/ModalButton.css'; import LockIcon from '/public/icons/lock.svg'; -import { vars } from '@/styles/theme.css'; +import { vars } from '@/styles/__theme.css'; function ListInformation() { const { language } = useLanguage(); diff --git a/src/app/list/[listId]/_components/ListDetailOuter/ModalButtonStyle.css.ts b/src/app/list/[listId]/_components/ListDetailOuter/ModalButtonStyle.css.ts index a8039cb2..b95cdd39 100644 --- a/src/app/list/[listId]/_components/ListDetailOuter/ModalButtonStyle.css.ts +++ b/src/app/list/[listId]/_components/ListDetailOuter/ModalButtonStyle.css.ts @@ -1,4 +1,4 @@ -import { vars } from '@/styles/theme.css'; +import { vars } from '@/styles/__theme.css'; import { style } from '@vanilla-extract/css'; export const resetButtonStyle = style({ diff --git a/src/app/list/[listId]/_components/ListDetailOuter/Replies.css.ts b/src/app/list/[listId]/_components/ListDetailOuter/Replies.css.ts index 89762f40..ce05c60c 100644 --- a/src/app/list/[listId]/_components/ListDetailOuter/Replies.css.ts +++ b/src/app/list/[listId]/_components/ListDetailOuter/Replies.css.ts @@ -1,6 +1,6 @@ import { style } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; -import { caption1 } from '@/styles/font.css'; +import { vars } from '@/styles/__theme.css'; +import { caption1 } from '@/styles/__font.css'; /**@todo 공용폰트 스타일 적용 */ diff --git a/src/app/list/[listId]/_components/ListDetailOuter/Replies.tsx b/src/app/list/[listId]/_components/ListDetailOuter/Replies.tsx index 2f9a6d3c..e65468c3 100644 --- a/src/app/list/[listId]/_components/ListDetailOuter/Replies.tsx +++ b/src/app/list/[listId]/_components/ListDetailOuter/Replies.tsx @@ -13,7 +13,7 @@ import { UserType } from '@/lib/types/userProfileType'; import { replyLocale } from '@/app/list/[listId]/locale'; import * as styles from './Replies.css'; -import { vars } from '@/styles/theme.css'; +import { vars } from '@/styles/__theme.css'; import Line from '/public/icons/horizontal_line.svg'; import EditPen from '/public/icons/edit_pen.svg'; import { useLanguage } from '@/store/useLanguage'; diff --git a/src/app/list/[listId]/history/_component/HistoryGraph.css.ts b/src/app/list/[listId]/history/_component/HistoryGraph.css.ts index 5e5e90b9..27d97c4a 100644 --- a/src/app/list/[listId]/history/_component/HistoryGraph.css.ts +++ b/src/app/list/[listId]/history/_component/HistoryGraph.css.ts @@ -1,6 +1,6 @@ import { style } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; -import * as fonts from '@/styles/font.css'; +import { vars } from '@/styles/__theme.css'; +import * as fonts from '@/styles/__font.css'; export const container = style({ width: '100%', diff --git a/src/app/list/[listId]/history/_component/HistoryVersions.css.ts b/src/app/list/[listId]/history/_component/HistoryVersions.css.ts index f81ba0d7..bbdb7650 100644 --- a/src/app/list/[listId]/history/_component/HistoryVersions.css.ts +++ b/src/app/list/[listId]/history/_component/HistoryVersions.css.ts @@ -1,6 +1,6 @@ import { style } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; -import * as fonts from '@/styles/font.css'; +import { vars } from '@/styles/__theme.css'; +import * as fonts from '@/styles/__font.css'; export const container = style({ minHeight: '345px', diff --git a/src/app/list/[listId]/history/page.css.ts b/src/app/list/[listId]/history/page.css.ts index 2f9d3acd..7652c8f1 100644 --- a/src/app/list/[listId]/history/page.css.ts +++ b/src/app/list/[listId]/history/page.css.ts @@ -1,6 +1,6 @@ import { style, styleVariants, keyframes } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; -import * as fonts from '@/styles/font.css'; +import { vars } from '@/styles/__theme.css'; +import * as fonts from '@/styles/__font.css'; export const navContainer = style({ width: '100%', diff --git a/src/app/list/create/_components/CreateItem.css.ts b/src/app/list/create/_components/CreateItem.css.ts index 05658c68..3615d8f7 100644 --- a/src/app/list/create/_components/CreateItem.css.ts +++ b/src/app/list/create/_components/CreateItem.css.ts @@ -1,6 +1,6 @@ import { style } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; -import * as fonts from '@/styles/font.css'; +import { vars } from '@/styles/__theme.css'; +import * as fonts from '@/styles/__font.css'; export const article = style({ padding: '16px 20px 35px', diff --git a/src/app/list/create/_components/item/AddItemButton.css.ts b/src/app/list/create/_components/item/AddItemButton.css.ts index 6ac60b84..5f1e570f 100644 --- a/src/app/list/create/_components/item/AddItemButton.css.ts +++ b/src/app/list/create/_components/item/AddItemButton.css.ts @@ -1,6 +1,6 @@ import { style } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; -import * as fonts from '@/styles/font.css'; +import { vars } from '@/styles/__theme.css'; +import * as fonts from '@/styles/__font.css'; export const addButton = style([ fonts.bodyLarge, diff --git a/src/app/list/create/_components/item/Header.css.ts b/src/app/list/create/_components/item/Header.css.ts index 6899135b..e5921779 100644 --- a/src/app/list/create/_components/item/Header.css.ts +++ b/src/app/list/create/_components/item/Header.css.ts @@ -1,6 +1,6 @@ import { style, styleVariants } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; -import { title3, body1 } from '@/styles/font.css'; +import { vars } from '@/styles/__theme.css'; +import { title3, body1 } from '@/styles/__font.css'; export const header = style({ width: '100%', diff --git a/src/app/list/create/_components/item/ItemLayout.css.ts b/src/app/list/create/_components/item/ItemLayout.css.ts index 0ac42705..57cc8424 100644 --- a/src/app/list/create/_components/item/ItemLayout.css.ts +++ b/src/app/list/create/_components/item/ItemLayout.css.ts @@ -1,6 +1,6 @@ import { style } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; -import * as fonts from '@/styles/font.css'; +import { vars } from '@/styles/__theme.css'; +import * as fonts from '@/styles/__font.css'; export const itemHeader = style({ width: '100%', diff --git a/src/app/list/create/_components/item/ItemLayout.tsx b/src/app/list/create/_components/item/ItemLayout.tsx index 667e5d3b..39cb5e05 100644 --- a/src/app/list/create/_components/item/ItemLayout.tsx +++ b/src/app/list/create/_components/item/ItemLayout.tsx @@ -5,7 +5,7 @@ import ExpandMoreIcon from '/public/icons/chevron_down_sm.svg'; import DndIcon from '/public/icons/dnd.svg'; import DeleteIcon from '/public/icons/trash_bin.svg'; import Label from '@/components/Label/Label'; -import { vars } from '@/styles/theme.css'; +import { vars } from '@/styles/__theme.css'; import ImageUploader from './ImageUploader'; import * as styles from './ItemLayout.css'; import { useLanguage } from '@/store/useLanguage'; diff --git a/src/app/list/create/_components/item/Items.css.ts b/src/app/list/create/_components/item/Items.css.ts index 974f58a4..d1628e2f 100644 --- a/src/app/list/create/_components/item/Items.css.ts +++ b/src/app/list/create/_components/item/Items.css.ts @@ -1,6 +1,6 @@ import { style } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; -import * as fonts from '@/styles/font.css'; +import { vars } from '@/styles/__theme.css'; +import * as fonts from '@/styles/__font.css'; export const itemsContainer = style({ display: 'flex', diff --git a/src/app/list/create/_components/item/LinkModal.css.ts b/src/app/list/create/_components/item/LinkModal.css.ts index 619c6ef6..28bc57dc 100644 --- a/src/app/list/create/_components/item/LinkModal.css.ts +++ b/src/app/list/create/_components/item/LinkModal.css.ts @@ -1,6 +1,6 @@ import { style } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; -import * as fonts from '@/styles/font.css'; +import { vars } from '@/styles/__theme.css'; +import * as fonts from '@/styles/__font.css'; export const button = style({ width: 18, diff --git a/src/app/list/create/_components/item/LinkModal.tsx b/src/app/list/create/_components/item/LinkModal.tsx index becc9511..18bf9256 100644 --- a/src/app/list/create/_components/item/LinkModal.tsx +++ b/src/app/list/create/_components/item/LinkModal.tsx @@ -4,7 +4,7 @@ import LinkIcon from '/public/icons/link.svg'; import Modal from '@/components/Modal/Modal'; import useBooleanOutput from '@/hooks/useBooleanOutput'; -import { vars } from '@/styles/theme.css'; +import { vars } from '@/styles/__theme.css'; import { useLanguage } from '@/store/useLanguage'; import { itemLocale } from '@/app/list/create/locale'; import { itemPlaceholder } from '@/lib/constants/placeholder'; diff --git a/src/app/list/create/_components/item/Preview.css.ts b/src/app/list/create/_components/item/Preview.css.ts index 43c3dd4b..6da8be67 100644 --- a/src/app/list/create/_components/item/Preview.css.ts +++ b/src/app/list/create/_components/item/Preview.css.ts @@ -1,5 +1,5 @@ import { style } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; +import { vars } from '@/styles/__theme.css'; export const previewBox = style({ width: '90px', diff --git a/src/app/list/create/_components/list/ButtonSelector.css.ts b/src/app/list/create/_components/list/ButtonSelector.css.ts index 41287826..ff155eea 100644 --- a/src/app/list/create/_components/list/ButtonSelector.css.ts +++ b/src/app/list/create/_components/list/ButtonSelector.css.ts @@ -1,6 +1,6 @@ import { style } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; -import * as fonts from '@/styles/font.css'; +import { vars } from '@/styles/__theme.css'; +import * as fonts from '@/styles/__font.css'; export const container = style({ display: 'flex', diff --git a/src/app/list/create/_components/list/LabelInput.css.ts b/src/app/list/create/_components/list/LabelInput.css.ts index 901d0ec3..1dbfbb31 100644 --- a/src/app/list/create/_components/list/LabelInput.css.ts +++ b/src/app/list/create/_components/list/LabelInput.css.ts @@ -1,6 +1,6 @@ import { style } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; -import * as fonts from '@/styles/font.css'; +import { vars } from '@/styles/__theme.css'; +import * as fonts from '@/styles/__font.css'; export const inputBox = style([ fonts.bodyMedium, diff --git a/src/app/list/create/_components/list/MemberSelector.css.ts b/src/app/list/create/_components/list/MemberSelector.css.ts index 404da405..42a6b5cf 100644 --- a/src/app/list/create/_components/list/MemberSelector.css.ts +++ b/src/app/list/create/_components/list/MemberSelector.css.ts @@ -1,6 +1,6 @@ import { style } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; -import * as fonts from '@/styles/font.css'; +import { vars } from '@/styles/__theme.css'; +import * as fonts from '@/styles/__font.css'; export const container = style({ position: 'relative', diff --git a/src/app/list/create/_components/list/RadioInput.css.ts b/src/app/list/create/_components/list/RadioInput.css.ts index 42808a31..45227f64 100644 --- a/src/app/list/create/_components/list/RadioInput.css.ts +++ b/src/app/list/create/_components/list/RadioInput.css.ts @@ -1,6 +1,6 @@ import { style } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; -import * as fonts from '@/styles/font.css'; +import { vars } from '@/styles/__theme.css'; +import * as fonts from '@/styles/__font.css'; export const container = style({ marginBottom: '8px', diff --git a/src/app/list/create/_components/list/Section.css.ts b/src/app/list/create/_components/list/Section.css.ts index 3d6c8baf..f2ffa6b1 100644 --- a/src/app/list/create/_components/list/Section.css.ts +++ b/src/app/list/create/_components/list/Section.css.ts @@ -1,6 +1,6 @@ import { style } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; -import * as fonts from '@/styles/font.css'; +import { vars } from '@/styles/__theme.css'; +import * as fonts from '@/styles/__font.css'; export const title = style([ fonts.labelLarge, diff --git a/src/app/list/create/_components/list/SimpleInput.css.ts b/src/app/list/create/_components/list/SimpleInput.css.ts index 8510ad4f..19b6c1fb 100644 --- a/src/app/list/create/_components/list/SimpleInput.css.ts +++ b/src/app/list/create/_components/list/SimpleInput.css.ts @@ -1,6 +1,6 @@ import { style } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; -import * as fonts from '@/styles/font.css'; +import { vars } from '@/styles/__theme.css'; +import * as fonts from '@/styles/__font.css'; export const container = style({ width: '100%', diff --git a/src/app/not-found.css.ts b/src/app/not-found.css.ts index 127d1695..ecf7f67e 100644 --- a/src/app/not-found.css.ts +++ b/src/app/not-found.css.ts @@ -1,6 +1,6 @@ import { style } from '@vanilla-extract/css'; -import * as fonts from '@/styles/font.css'; -import { vars } from '@/styles/theme.css'; +import * as fonts from '@/styles/__font.css'; +import { vars } from '@/styles/__theme.css'; export const wrapper = style({ display: 'flex', diff --git a/src/app/notification/_components/NotificationList.css.ts b/src/app/notification/_components/NotificationList.css.ts index bf335d89..12766a3a 100644 --- a/src/app/notification/_components/NotificationList.css.ts +++ b/src/app/notification/_components/NotificationList.css.ts @@ -1,6 +1,6 @@ import { style, styleVariants } from '@vanilla-extract/css'; -import * as fonts from '@/styles/font.css'; -import { vars } from '@/styles/theme.css'; +import * as fonts from '@/styles/__font.css'; +import { vars } from '@/styles/__theme.css'; export const readAllButton = style([ fonts.labelMedium, diff --git a/src/app/notification/_components/ProfileImage.css.ts b/src/app/notification/_components/ProfileImage.css.ts index 488c15a5..ea3324f1 100644 --- a/src/app/notification/_components/ProfileImage.css.ts +++ b/src/app/notification/_components/ProfileImage.css.ts @@ -1,4 +1,4 @@ -import { vars } from '@/styles/theme.css'; +import { vars } from '@/styles/__theme.css'; import { style } from '@vanilla-extract/css'; export const profileImageContainer = style({ diff --git a/src/app/search/_components/CategoryArea.css.ts b/src/app/search/_components/CategoryArea.css.ts index 332c1f48..2b4208bb 100644 --- a/src/app/search/_components/CategoryArea.css.ts +++ b/src/app/search/_components/CategoryArea.css.ts @@ -1,5 +1,5 @@ import { keyframes, style } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; +import { vars } from '@/styles/__theme.css'; export const categoryWrapper = style({ paddingLeft: '1.6rem', diff --git a/src/app/search/_components/KeywordArea.css.ts b/src/app/search/_components/KeywordArea.css.ts index ea7e0db5..24f24941 100644 --- a/src/app/search/_components/KeywordArea.css.ts +++ b/src/app/search/_components/KeywordArea.css.ts @@ -1,5 +1,5 @@ import { style, keyframes } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; +import { vars } from '@/styles/__theme.css'; export const keywordWrapper = style({ width: '100%', diff --git a/src/app/search/_components/NoData.css.ts b/src/app/search/_components/NoData.css.ts index 7cd47626..052ca24c 100644 --- a/src/app/search/_components/NoData.css.ts +++ b/src/app/search/_components/NoData.css.ts @@ -1,5 +1,5 @@ import { style } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; +import { vars } from '@/styles/__theme.css'; export const container = style({ paddingTop: '2rem', diff --git a/src/app/search/_components/SearchUserProfile.css.ts b/src/app/search/_components/SearchUserProfile.css.ts index 53b668b4..f1cc64a0 100644 --- a/src/app/search/_components/SearchUserProfile.css.ts +++ b/src/app/search/_components/SearchUserProfile.css.ts @@ -1,5 +1,5 @@ import { style } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; +import { vars } from '@/styles/__theme.css'; export const container = style({ display: 'flex', diff --git a/src/app/search/_components/Top3Card.css.ts b/src/app/search/_components/Top3Card.css.ts index ab1211c0..9ceea20e 100644 --- a/src/app/search/_components/Top3Card.css.ts +++ b/src/app/search/_components/Top3Card.css.ts @@ -1,5 +1,5 @@ import { style, createVar } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; +import { vars } from '@/styles/__theme.css'; export const listColor = createVar(); export const listBackgroundImage = createVar(); diff --git a/src/app/start-listy/_components/CategoryButton.css.ts b/src/app/start-listy/_components/CategoryButton.css.ts index 8ac94174..fd33c29c 100644 --- a/src/app/start-listy/_components/CategoryButton.css.ts +++ b/src/app/start-listy/_components/CategoryButton.css.ts @@ -1,6 +1,6 @@ import { style, styleVariants, ComplexStyleRule } from '@vanilla-extract/css'; -import { titleLarge, titleMedium } from '@/styles/font.css'; -import { vars } from '@/styles/theme.css'; +import { titleLarge, titleMedium } from '@/styles/__font.css'; +import { vars } from '@/styles/__theme.css'; export const container = style({ width: '80%', diff --git a/src/app/start-listy/_components/CreateNicknameStep.css.ts b/src/app/start-listy/_components/CreateNicknameStep.css.ts index 053c6c97..a9a676e5 100644 --- a/src/app/start-listy/_components/CreateNicknameStep.css.ts +++ b/src/app/start-listy/_components/CreateNicknameStep.css.ts @@ -1,6 +1,6 @@ import { style, styleVariants } from '@vanilla-extract/css'; -import { bodyLarge, labelMedium, titleLarge, titleMedium, titleRegular } from '@/styles/font.css'; -import { vars } from '@/styles/theme.css'; +import { bodyLarge, labelMedium, titleLarge, titleMedium, titleRegular } from '@/styles/__font.css'; +import { vars } from '@/styles/__theme.css'; export const background = style({ minHeight: '100vh', diff --git a/src/app/start-listy/_components/ListPreview.css.ts b/src/app/start-listy/_components/ListPreview.css.ts index 334d20f6..898b7716 100644 --- a/src/app/start-listy/_components/ListPreview.css.ts +++ b/src/app/start-listy/_components/ListPreview.css.ts @@ -1,6 +1,6 @@ import { style } from '@vanilla-extract/css'; -import { bodyMedium, labelLarge, titleMedium } from '@/styles/font.css'; -import { vars } from '@/styles/theme.css'; +import { bodyMedium, labelLarge, titleMedium } from '@/styles/__font.css'; +import { vars } from '@/styles/__theme.css'; export const container = style({ width: '100%', diff --git a/src/app/user/[userId]/(follow)/_components/UserList.css.ts b/src/app/user/[userId]/(follow)/_components/UserList.css.ts index 9b8d14ad..d6b922b1 100644 --- a/src/app/user/[userId]/(follow)/_components/UserList.css.ts +++ b/src/app/user/[userId]/(follow)/_components/UserList.css.ts @@ -1,6 +1,6 @@ import { style } from '@vanilla-extract/css'; -import * as fonts from '@/styles/font.css'; -import { vars } from '@/styles/theme.css'; +import * as fonts from '@/styles/__font.css'; +import { vars } from '@/styles/__theme.css'; export const container = style({ width: '100%', diff --git a/src/app/user/[userId]/(follow)/follow.css.ts b/src/app/user/[userId]/(follow)/follow.css.ts index 10e5b6ec..5bb03e87 100644 --- a/src/app/user/[userId]/(follow)/follow.css.ts +++ b/src/app/user/[userId]/(follow)/follow.css.ts @@ -1,6 +1,6 @@ import { style } from '@vanilla-extract/css'; -import * as fonts from '@/styles/font.css'; -import { vars } from '@/styles/theme.css'; +import * as fonts from '@/styles/__font.css'; +import { vars } from '@/styles/__theme.css'; export const totalMessage = style([ fonts.titleMedium, diff --git a/src/app/user/[userId]/_components/Card.css.ts b/src/app/user/[userId]/_components/Card.css.ts index ee46159f..acb59ef7 100644 --- a/src/app/user/[userId]/_components/Card.css.ts +++ b/src/app/user/[userId]/_components/Card.css.ts @@ -1,6 +1,6 @@ import { style, createVar } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; -import { bodyMedium } from '@/styles/font.css'; +import { vars } from '@/styles/__theme.css'; +import { bodyMedium } from '@/styles/__font.css'; export const listColor = createVar(); diff --git a/src/app/user/[userId]/_components/Categories.css.ts b/src/app/user/[userId]/_components/Categories.css.ts index 454b2903..4aa9b324 100644 --- a/src/app/user/[userId]/_components/Categories.css.ts +++ b/src/app/user/[userId]/_components/Categories.css.ts @@ -1,5 +1,5 @@ import { style } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; +import { vars } from '@/styles/__theme.css'; export const container = style({ padding: '2.1rem 1.5rem 1.5rem 1.5rem', diff --git a/src/app/user/[userId]/_components/Content.css.ts b/src/app/user/[userId]/_components/Content.css.ts index 5109d5ed..95a854e3 100644 --- a/src/app/user/[userId]/_components/Content.css.ts +++ b/src/app/user/[userId]/_components/Content.css.ts @@ -1,6 +1,6 @@ import { style } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; -import { bodyLarge } from '@/styles/font.css'; +import { vars } from '@/styles/__theme.css'; +import { bodyLarge } from '@/styles/__font.css'; export const container = style({ width: '100%', diff --git a/src/app/user/[userId]/_components/FollowButton.css.ts b/src/app/user/[userId]/_components/FollowButton.css.ts index 25cb1c4b..73210e27 100644 --- a/src/app/user/[userId]/_components/FollowButton.css.ts +++ b/src/app/user/[userId]/_components/FollowButton.css.ts @@ -1,5 +1,5 @@ import { style, styleVariants } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; +import { vars } from '@/styles/__theme.css'; export const button = style({ padding: '0.8rem 1.2rem', diff --git a/src/app/user/[userId]/_components/Profile.css.ts b/src/app/user/[userId]/_components/Profile.css.ts index 6148000f..be0bfba5 100644 --- a/src/app/user/[userId]/_components/Profile.css.ts +++ b/src/app/user/[userId]/_components/Profile.css.ts @@ -1,6 +1,6 @@ import { style, createVar } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; -import { bodySmall, caption, titleMedium } from '@/styles/font.css'; +import { vars } from '@/styles/__theme.css'; +import { bodySmall, caption, titleMedium } from '@/styles/__font.css'; export const imageUrl = createVar(); diff --git a/src/app/withdrawn-account/page.css.ts b/src/app/withdrawn-account/page.css.ts index 1b7dfc77..90e45f40 100644 --- a/src/app/withdrawn-account/page.css.ts +++ b/src/app/withdrawn-account/page.css.ts @@ -1,4 +1,4 @@ -import { vars } from '@/styles/theme.css'; +import { vars } from '@/styles/__theme.css'; import { style } from '@vanilla-extract/css'; export const wrapper = style({ diff --git a/src/components/BlueButton/BlueButton.css.ts b/src/components/BlueButton/BlueButton.css.ts index d232c93e..3bfc6f7a 100644 --- a/src/components/BlueButton/BlueButton.css.ts +++ b/src/components/BlueButton/BlueButton.css.ts @@ -1,6 +1,6 @@ import { style } from '@vanilla-extract/css'; -import * as fonts from '@/styles/font.css'; -import { vars } from '@/styles/theme.css'; +import * as fonts from '@/styles/__font.css'; +import { vars } from '@/styles/__theme.css'; export const button = style([ fonts.bodyLarge, diff --git a/src/components/BottomNav/BottomNav.css.ts b/src/components/BottomNav/BottomNav.css.ts index 73f3a4cb..3b1c2dc0 100644 --- a/src/components/BottomNav/BottomNav.css.ts +++ b/src/components/BottomNav/BottomNav.css.ts @@ -1,5 +1,5 @@ import { style } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; +import { vars } from '@/styles/__theme.css'; export const navDiv = style({ width: '100%', diff --git a/src/components/BottomNav/BottomNav.tsx b/src/components/BottomNav/BottomNav.tsx index 99397064..e8ede79e 100644 --- a/src/components/BottomNav/BottomNav.tsx +++ b/src/components/BottomNav/BottomNav.tsx @@ -14,7 +14,7 @@ import { useUser } from '@/store/useUser'; import toasting from '@/lib/utils/toasting'; import toastMessage from '@/lib/constants/toastMessage'; -import { vars } from '@/styles/theme.css'; +import { vars } from '@/styles/__theme.css'; import * as styles from './BottomNav.css'; import Modal from '../Modal/Modal'; diff --git a/src/components/BottomSheet/BottomSheet.css.ts b/src/components/BottomSheet/BottomSheet.css.ts index 71032a39..4b756460 100644 --- a/src/components/BottomSheet/BottomSheet.css.ts +++ b/src/components/BottomSheet/BottomSheet.css.ts @@ -1,5 +1,5 @@ import { keyframes, style } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; +import { vars } from '@/styles/__theme.css'; export const backGround = style({ position: 'fixed', diff --git a/src/components/Header/Header.css.ts b/src/components/Header/Header.css.ts index 1430a02e..91846272 100644 --- a/src/components/Header/Header.css.ts +++ b/src/components/Header/Header.css.ts @@ -1,5 +1,5 @@ import { style } from '@vanilla-extract/css'; -import * as fonts from '@/styles/font.css'; +import * as fonts from '@/styles/__font.css'; export const header = style({ width: '100%', diff --git a/src/components/Label/Label.css.ts b/src/components/Label/Label.css.ts index 64feca77..bb333d6b 100644 --- a/src/components/Label/Label.css.ts +++ b/src/components/Label/Label.css.ts @@ -1,6 +1,6 @@ import { style } from '@vanilla-extract/css'; -import { body3 } from '@/styles/font.css'; -import { vars } from '@/styles/theme.css'; +import { body3 } from '@/styles/__font.css'; +import { vars } from '@/styles/__theme.css'; export const baseLabel = style([ body3, diff --git a/src/components/LinkPreview/LinkPreview.css.ts b/src/components/LinkPreview/LinkPreview.css.ts index 10316f5e..f9b25d5c 100644 --- a/src/components/LinkPreview/LinkPreview.css.ts +++ b/src/components/LinkPreview/LinkPreview.css.ts @@ -1,5 +1,5 @@ import { style } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; +import { vars } from '@/styles/__theme.css'; export const container = style({ width: '100%', diff --git a/src/components/Modal/Modal.css.ts b/src/components/Modal/Modal.css.ts index e469751c..3221d31b 100644 --- a/src/components/Modal/Modal.css.ts +++ b/src/components/Modal/Modal.css.ts @@ -1,5 +1,5 @@ import { style, styleVariants, ComplexStyleRule } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; +import { vars } from '@/styles/__theme.css'; export const background = style({ margin: 'auto', diff --git a/src/components/Modal/ModalButton.css.ts b/src/components/Modal/ModalButton.css.ts index ad5cdb10..988453a9 100644 --- a/src/components/Modal/ModalButton.css.ts +++ b/src/components/Modal/ModalButton.css.ts @@ -1,6 +1,6 @@ import { style, styleVariants } from '@vanilla-extract/css'; -import { body3 } from '@/styles/font.css'; -import { vars } from '@/styles/theme.css'; +import { body3 } from '@/styles/__font.css'; +import { vars } from '@/styles/__theme.css'; export const buttonContainer = style({ width: '100%', diff --git a/src/components/Modal/ModalTitle.css.ts b/src/components/Modal/ModalTitle.css.ts index 32e0e381..1c80fa72 100644 --- a/src/components/Modal/ModalTitle.css.ts +++ b/src/components/Modal/ModalTitle.css.ts @@ -1,5 +1,5 @@ import { style } from '@vanilla-extract/css'; -import { body1 } from '@/styles/font.css'; +import { body1 } from '@/styles/__font.css'; export const title = style([ body1, diff --git a/src/components/NoData/NoData.css.ts b/src/components/NoData/NoData.css.ts index 4455e517..0a11ea8b 100644 --- a/src/components/NoData/NoData.css.ts +++ b/src/components/NoData/NoData.css.ts @@ -1,5 +1,5 @@ import { style } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; +import { vars } from '@/styles/__theme.css'; /** * @todo 공용 폰트 스타일로 지정 */ diff --git a/src/components/SelectComponent/SelectComponent.tsx b/src/components/SelectComponent/SelectComponent.tsx index 5f805014..a45d182a 100644 --- a/src/components/SelectComponent/SelectComponent.tsx +++ b/src/components/SelectComponent/SelectComponent.tsx @@ -1,5 +1,5 @@ import Select from 'react-select'; -import { vars } from '@/styles/theme.css'; +import { vars } from '@/styles/__theme.css'; interface OptionsProps { value: string; diff --git a/src/components/SimpleList/SimpleList.css.ts b/src/components/SimpleList/SimpleList.css.ts index a180cf2e..dd3e367e 100644 --- a/src/components/SimpleList/SimpleList.css.ts +++ b/src/components/SimpleList/SimpleList.css.ts @@ -1,6 +1,6 @@ import { style } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; -import { titleMedium, bodyRegular } from '@/styles/font.css'; +import { vars } from '@/styles/__theme.css'; +import { titleMedium, bodyRegular } from '@/styles/__font.css'; export const simpleItemWrapper = style({ width: '100%', diff --git a/src/components/VideoEmbed/VideoEmbed.css.ts b/src/components/VideoEmbed/VideoEmbed.css.ts index e6c4ba63..3f335c3e 100644 --- a/src/components/VideoEmbed/VideoEmbed.css.ts +++ b/src/components/VideoEmbed/VideoEmbed.css.ts @@ -1,5 +1,5 @@ import { style } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; +import { vars } from '@/styles/__theme.css'; export const videoWrapper = style({ border: `1px solid ${vars.color.gray5}`, diff --git a/src/components/exploreComponents/Header.css.ts b/src/components/exploreComponents/Header.css.ts index a31688c2..60ec3b55 100644 --- a/src/components/exploreComponents/Header.css.ts +++ b/src/components/exploreComponents/Header.css.ts @@ -1,5 +1,5 @@ import { style } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; +import { vars } from '@/styles/__theme.css'; export const wrapper = style({ padding: '35px 16px 24px', diff --git a/src/components/exploreComponents/ListsRecommendation.css.ts b/src/components/exploreComponents/ListsRecommendation.css.ts index 1b1592ba..a5d78138 100644 --- a/src/components/exploreComponents/ListsRecommendation.css.ts +++ b/src/components/exploreComponents/ListsRecommendation.css.ts @@ -1,6 +1,6 @@ import { style, createVar, keyframes } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; -import { headlineSmall, bodyMedium, bodySmall, labelSmall } from '@/styles/font.css'; +import { vars } from '@/styles/__theme.css'; +import { headlineSmall, bodyMedium, bodySmall, labelSmall } from '@/styles/__font.css'; export const listBackground = createVar(); diff --git a/src/components/exploreComponents/Skeleton.css.ts b/src/components/exploreComponents/Skeleton.css.ts index f3ba1a44..e2cbff87 100644 --- a/src/components/exploreComponents/Skeleton.css.ts +++ b/src/components/exploreComponents/Skeleton.css.ts @@ -1,5 +1,5 @@ import { style } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; +import { vars } from '@/styles/__theme.css'; export const listSkeletonWrapper = style({ width: '370px', diff --git a/src/components/exploreComponents/TrendingLists.css.ts b/src/components/exploreComponents/TrendingLists.css.ts index b36fe318..94301342 100644 --- a/src/components/exploreComponents/TrendingLists.css.ts +++ b/src/components/exploreComponents/TrendingLists.css.ts @@ -1,6 +1,6 @@ import { style, createVar } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; -import { headlineSmall, titleMedium, caption } from '@/styles/font.css'; +import { vars } from '@/styles/__theme.css'; +import { headlineSmall, titleMedium, caption } from '@/styles/__font.css'; /**@todo 트렌딩 리스트 바뀐 디자인에 맞게 새로 갈아엎을 예정 */ diff --git a/src/components/exploreComponents/TrendingLists.tsx b/src/components/exploreComponents/TrendingLists.tsx index 115ce8db..f947bb93 100644 --- a/src/components/exploreComponents/TrendingLists.tsx +++ b/src/components/exploreComponents/TrendingLists.tsx @@ -12,7 +12,7 @@ import { QUERY_KEYS } from '@/lib/constants/queryKeys'; import { TrendingListType } from '@/lib/types/exploreType'; import * as styles from './TrendingLists.css'; -import { vars } from '@/styles/theme.css'; +import { vars } from '@/styles/__theme.css'; import { TrendingListsSkeleton } from './Skeleton'; import oceanEmoji from '/public/images/ocean.png'; import fallbackProfile from '/public/images/fallback_profileImage.webp'; diff --git a/src/components/exploreComponents/UsersRecommendation.css.ts b/src/components/exploreComponents/UsersRecommendation.css.ts index 9efc853d..f49c3db5 100644 --- a/src/components/exploreComponents/UsersRecommendation.css.ts +++ b/src/components/exploreComponents/UsersRecommendation.css.ts @@ -1,6 +1,6 @@ import { style } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; -import { titleSmall, headlineSmall } from '@/styles/font.css'; +import { vars } from '@/styles/__theme.css'; +import { titleSmall, headlineSmall } from '@/styles/__font.css'; export const wrapper = style({ padding: '0 16px', diff --git a/src/components/floatingButton/FloatingContainer.css.ts b/src/components/floatingButton/FloatingContainer.css.ts index 55969232..f9ac96a0 100644 --- a/src/components/floatingButton/FloatingContainer.css.ts +++ b/src/components/floatingButton/FloatingContainer.css.ts @@ -1,5 +1,5 @@ import { style, keyframes, styleVariants } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; +import { vars } from '@/styles/__theme.css'; export const wrapper = style({ width: '100%', diff --git a/src/components/login/LoginModal.css.ts b/src/components/login/LoginModal.css.ts index e17d6331..94b686bb 100644 --- a/src/components/login/LoginModal.css.ts +++ b/src/components/login/LoginModal.css.ts @@ -1,6 +1,6 @@ import { style } from '@vanilla-extract/css'; -import { vars } from '@/styles/theme.css'; -import { bodyRegular, titleLarge } from '@/styles/font.css'; +import { vars } from '@/styles/__theme.css'; +import { bodyRegular, titleLarge } from '@/styles/__font.css'; export const container = style({ width: '100%', diff --git a/src/styles/GlobalStyles.css.ts b/src/styles/GlobalStyles.css.ts index 5cb4b51a..d2cc5160 100644 --- a/src/styles/GlobalStyles.css.ts +++ b/src/styles/GlobalStyles.css.ts @@ -1,6 +1,6 @@ import { globalStyle } from '@vanilla-extract/css'; import { Pretendard } from './pretendardFont.css'; -import { vars } from './theme.css'; +import { vars } from './__theme.css'; globalStyle('html', { fontSize: '62.5%', diff --git a/src/styles/__font.css.ts b/src/styles/__font.css.ts new file mode 100644 index 00000000..6df575ae --- /dev/null +++ b/src/styles/__font.css.ts @@ -0,0 +1,185 @@ +import { style } from '@vanilla-extract/css'; + +export const largeTitle = style({ + fontSize: '3.4rem', + fontWeight: '800', + letterSpacing: '-0.102rem', +}); + +export const title1 = style({ + fontSize: '2.8rem', + fontWeight: '700', + letterSpacing: '-0.084rem', +}); + +export const title2 = style({ + fontSize: '2.2rem', + fontWeight: '600', + lineHeight: '2.5rem', + letterSpacing: '-0.066rem', +}); + +export const title3 = style({ + fontSize: '2rem', + fontWeight: '600', + lineHeight: '2.5rem', + letterSpacing: '-0.06rem', +}); + +export const headline = style({ + fontSize: '1.7rem', + fontWeight: '600', + letterSpacing: '-0.051rem', +}); + +export const body1 = style({ + fontSize: '1.6rem', + fontWeight: '400', + lineHeight: '1.6rem', + letterSpacing: '-0.48px', +}); + +export const body2 = style({ + fontSize: '1.5rem', + fontWeight: '400', + lineHeight: '2.5rem', + letterSpacing: '-0.045rem', +}); + +export const body3 = style({ + fontSize: '1.4rem', + fontWeight: '400', + lineHeight: '2.5rem', + letterSpacing: '-0.042rem', +}); + +export const footnote = style({ + fontSize: '1.3rem', + fontWeight: '400', + lineHeight: '1.6rem', +}); + +export const caption1 = style({ + fontSize: '1.2rem', + fontWeight: '400', + lineHeight: '2.5rem', + letterSpacing: '-0.036rem', +}); + +export const caption2 = style({ + fontSize: '1.1rem', + fontWeight: '400', + lineHeight: '2.5rem', + letterSpacing: '-0.033rem', +}); + +/**TODO: 모두 폰트 수정 후 위에 지우기*/ + +export const headlineLarge = style({ + fontSize: '3.2rem', + fontWeight: '600', + lineHeight: '4.0rem', +}); + +export const headlineMedium = style({ + fontSize: '2.8rem', + fontWeight: '600', + lineHeight: '3.6rem', +}); + +export const headlineSmall = style({ + fontSize: '2.4rem', + fontWeight: '600', + lineHeight: '3.2rem', +}); + +export const titleLarge = style({ + fontSize: '2.2rem', + fontWeight: '600', + lineHeight: '2.8rem', + letterSpacing: '0.0088rem', +}); + +export const titleMedium = style({ + fontSize: '2.0rem', + fontWeight: '600', + lineHeight: '2.4rem', + letterSpacing: '0.016rem', +}); + +export const titleRegular = style({ + fontSize: '1.8rem', + fontWeight: '600', + lineHeight: '2.4rem', + letterSpacing: '0.014rem', +}); + +export const titleSmall = style({ + fontSize: '1.4rem', + fontWeight: '600', + lineHeight: '2.0rem', + letterSpacing: '0.012rem', +}); + +export const labelLarge = style({ + fontSize: '1.6rem', + fontWeight: '600', + lineHeight: '2.4rem', + letterSpacing: '0.02rem', +}); + +export const labelMedium = style({ + fontSize: '1.4rem', + fontWeight: '500', + lineHeight: '2.4rem', + letterSpacing: '0.04rem', +}); + +export const labelSmall = style({ + fontSize: '1.2rem', + fontWeight: '500', + lineHeight: '1.6rem', + letterSpacing: '0.06rem', +}); + +export const bodyLarge = style({ + fontSize: '1.6rem', + fontWeight: '400', + lineHeight: '2.4rem', + letterSpacing: '0.0026rem', +}); + +export const bodyRegular = style({ + fontSize: '1.5rem', + fontWeight: '500', + lineHeight: '2.0rem', + letterSpacing: '0.02rem', +}); + +export const bodyMedium = style({ + fontSize: '1.4rem', + fontWeight: '400', + lineHeight: '2.0rem', + letterSpacing: '0.008rem', +}); + +export const bodySmall = style({ + fontSize: '1.2rem', + fontWeight: '400', + lineHeight: '1.6rem', + letterSpacing: '0.0048rem', +}); + +export const overline = style({ + fontSize: '1.1rem', + fontWeight: '400', + lineHeight: '1.2rem', + letterSpacing: '0.1rem', +}); + +export const caption = style({ + fontSize: '1.1rem', + fontWeight: '400', + lineHeight: '1.6rem', + letterSpacing: '0.0055rem', +}); diff --git a/src/styles/__theme.css.ts b/src/styles/__theme.css.ts new file mode 100644 index 00000000..8e4235dd --- /dev/null +++ b/src/styles/__theme.css.ts @@ -0,0 +1,48 @@ +import { createThemeContract, createGlobalTheme } from '@vanilla-extract/css'; + +export const vars = createThemeContract({ + color: { + black: 'color-black', + white: 'color-white', + gray9: 'color-gray9', + gray7: 'color-gray7', + gray5: 'color-gray5', + gray3: 'color-gray3', + blue: 'color-blue', + skyblue: 'color-skyblue', + lightblue: 'color-lightblue', + blueGray: 'color-blueGray', + yellow: 'color-yellow', + red: 'color-red', + }, + // TODO 반응형 코드 수정 필요 + breakpoints: { + common: 'mobile-common', + medium: 'mobile-medium', + mediumSmall: 'mobile-mediumSmall', + small: 'mobile-small', + }, +}); + +createGlobalTheme(':root', vars, { + color: { + black: '#19191B', + white: '#fff', + gray9: '#61646B', + gray7: '#AFB1B6', + gray5: '#EFEFF0', + gray3: '#FAFAFA', + blue: '#0047FF', + skyblue: '#82C3FF', + lightblue: '#EBF4FF', + blueGray: '#F7F5FF', + yellow: '#FFF6A5', + red: '#FF5454', + }, + breakpoints: { + common: '414px', + medium: '400px', + mediumSmall: '390px', + small: '375px', + }, +}); diff --git a/src/styles/font.css.ts b/src/styles/font.css.ts index 6df575ae..60d02009 100644 --- a/src/styles/font.css.ts +++ b/src/styles/font.css.ts @@ -1,185 +1,31 @@ import { style } from '@vanilla-extract/css'; -export const largeTitle = style({ - fontSize: '3.4rem', - fontWeight: '800', - letterSpacing: '-0.102rem', -}); - -export const title1 = style({ - fontSize: '2.8rem', - fontWeight: '700', - letterSpacing: '-0.084rem', -}); - -export const title2 = style({ - fontSize: '2.2rem', - fontWeight: '600', - lineHeight: '2.5rem', - letterSpacing: '-0.066rem', -}); - -export const title3 = style({ +export const header = style({ fontSize: '2rem', - fontWeight: '600', - lineHeight: '2.5rem', - letterSpacing: '-0.06rem', -}); - -export const headline = style({ - fontSize: '1.7rem', - fontWeight: '600', - letterSpacing: '-0.051rem', -}); - -export const body1 = style({ - fontSize: '1.6rem', - fontWeight: '400', - lineHeight: '1.6rem', - letterSpacing: '-0.48px', -}); - -export const body2 = style({ - fontSize: '1.5rem', - fontWeight: '400', - lineHeight: '2.5rem', - letterSpacing: '-0.045rem', -}); - -export const body3 = style({ - fontSize: '1.4rem', - fontWeight: '400', - lineHeight: '2.5rem', - letterSpacing: '-0.042rem', -}); - -export const footnote = style({ - fontSize: '1.3rem', - fontWeight: '400', - lineHeight: '1.6rem', -}); - -export const caption1 = style({ - fontSize: '1.2rem', - fontWeight: '400', - lineHeight: '2.5rem', - letterSpacing: '-0.036rem', -}); - -export const caption2 = style({ - fontSize: '1.1rem', - fontWeight: '400', - lineHeight: '2.5rem', - letterSpacing: '-0.033rem', -}); - -/**TODO: 모두 폰트 수정 후 위에 지우기*/ - -export const headlineLarge = style({ - fontSize: '3.2rem', - fontWeight: '600', - lineHeight: '4.0rem', -}); - -export const headlineMedium = style({ - fontSize: '2.8rem', - fontWeight: '600', - lineHeight: '3.6rem', -}); - -export const headlineSmall = style({ - fontSize: '2.4rem', - fontWeight: '600', - lineHeight: '3.2rem', -}); - -export const titleLarge = style({ - fontSize: '2.2rem', - fontWeight: '600', - lineHeight: '2.8rem', - letterSpacing: '0.0088rem', -}); - -export const titleMedium = style({ - fontSize: '2.0rem', - fontWeight: '600', - lineHeight: '2.4rem', - letterSpacing: '0.016rem', + fontWeight: '700', + letterSpacing: '-0.6rem', }); -export const titleRegular = style({ +export const Subtitle = style({ fontSize: '1.8rem', - fontWeight: '600', - lineHeight: '2.4rem', - letterSpacing: '0.014rem', -}); - -export const titleSmall = style({ - fontSize: '1.4rem', - fontWeight: '600', - lineHeight: '2.0rem', - letterSpacing: '0.012rem', + fontWeight: '700', + letterSpacing: '-0.54rem', }); -export const labelLarge = style({ +export const BodyBold = style({ fontSize: '1.6rem', fontWeight: '600', - lineHeight: '2.4rem', - letterSpacing: '0.02rem', + letterSpacing: '-0.54rem', }); -export const labelMedium = style({ - fontSize: '1.4rem', - fontWeight: '500', - lineHeight: '2.4rem', - letterSpacing: '0.04rem', -}); - -export const labelSmall = style({ - fontSize: '1.2rem', - fontWeight: '500', - lineHeight: '1.6rem', - letterSpacing: '0.06rem', -}); - -export const bodyLarge = style({ - fontSize: '1.6rem', - fontWeight: '400', - lineHeight: '2.4rem', - letterSpacing: '0.0026rem', -}); - -export const bodyRegular = style({ +export const Body = style({ fontSize: '1.5rem', - fontWeight: '500', - lineHeight: '2.0rem', - letterSpacing: '0.02rem', -}); - -export const bodyMedium = style({ - fontSize: '1.4rem', - fontWeight: '400', - lineHeight: '2.0rem', - letterSpacing: '0.008rem', -}); - -export const bodySmall = style({ - fontSize: '1.2rem', fontWeight: '400', - lineHeight: '1.6rem', - letterSpacing: '0.0048rem', + letterSpacing: '-0.54rem', }); -export const overline = style({ - fontSize: '1.1rem', - fontWeight: '400', - lineHeight: '1.2rem', - letterSpacing: '0.1rem', -}); - -export const caption = style({ - fontSize: '1.1rem', +export const Label = style({ + fontSize: '1.4rem', fontWeight: '400', - lineHeight: '1.6rem', - letterSpacing: '0.0055rem', + letterSpacing: '-0.42rem', }); diff --git a/src/styles/theme.css.ts b/src/styles/theme.css.ts index 8e4235dd..6eea6b28 100644 --- a/src/styles/theme.css.ts +++ b/src/styles/theme.css.ts @@ -2,18 +2,18 @@ import { createThemeContract, createGlobalTheme } from '@vanilla-extract/css'; export const vars = createThemeContract({ color: { - black: 'color-black', white: 'color-white', - gray9: 'color-gray9', - gray7: 'color-gray7', - gray5: 'color-gray5', - gray3: 'color-gray3', - blue: 'color-blue', - skyblue: 'color-skyblue', lightblue: 'color-lightblue', - blueGray: 'color-blueGray', - yellow: 'color-yellow', - red: 'color-red', + skyblue: 'color-skyblue', + blue: 'color-blue', + deepblue8: 'colpor-deepblue8', + deepblue10: 'color-deepblue10', + bluegray6: 'color-bluegray6', + bluegray8: 'color-bluegray8', + bluegray10: 'color-bluegray10', + lightgray: 'color-lightgray', + gray: 'color-gray', + black: 'color-black', }, // TODO 반응형 코드 수정 필요 breakpoints: { @@ -26,19 +26,20 @@ export const vars = createThemeContract({ createGlobalTheme(':root', vars, { color: { - black: '#19191B', - white: '#fff', - gray9: '#61646B', - gray7: '#AFB1B6', - gray5: '#EFEFF0', - gray3: '#FAFAFA', - blue: '#0047FF', - skyblue: '#82C3FF', - lightblue: '#EBF4FF', - blueGray: '#F7F5FF', - yellow: '#FFF6A5', - red: '#FF5454', + white: '#FFFFFF', + lightblue: '#E5EEFE', + skyblue: '#C5DFFF', + blue: '#3D95FF', + deepblue8: '#6A7DA1', + deepblue10: '#3C4F76', + bluegray6: '#B6C2CE', + bluegray8: '#8599AD', + bluegray10: '#637587', + lightgray: '#B6BBBF', + gray: '#7A7B7D', + black: '#323A43', }, + // TODO 반응형 코드 수정 필요 breakpoints: { common: '414px', medium: '400px', From 7d9f6ab274c7e1f00813eee5b545e7d391f94b0b Mon Sep 17 00:00:00 2001 From: Nahyun-Kang Date: Sun, 18 Aug 2024 14:28:52 +0900 Subject: [PATCH 08/86] =?UTF-8?q?Feat:=20=ED=94=8C=EB=A1=9C=ED=8C=85=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../_components/TopicsRecommendation.css.ts | 1 + .../PlusOptionFloatingButton.tsx | 23 ------ .../__PlusOptionFloationButton.tsx | 74 +++++++++++++++++++ 3 files changed, 75 insertions(+), 23 deletions(-) create mode 100644 src/components/floatingButton/__PlusOptionFloationButton.tsx diff --git a/src/app/(home)/_components/TopicsRecommendation.css.ts b/src/app/(home)/_components/TopicsRecommendation.css.ts index 3eef33d0..3f8924cc 100644 --- a/src/app/(home)/_components/TopicsRecommendation.css.ts +++ b/src/app/(home)/_components/TopicsRecommendation.css.ts @@ -41,6 +41,7 @@ export const topic = style({ padding: '14px', flexShrink: 0, + textWrap: 'nowrap', backgroundColor: vars.color.white, borderRadius: '20px', diff --git a/src/components/floatingButton/PlusOptionFloatingButton.tsx b/src/components/floatingButton/PlusOptionFloatingButton.tsx index 57990ddb..dc7fff07 100644 --- a/src/components/floatingButton/PlusOptionFloatingButton.tsx +++ b/src/components/floatingButton/PlusOptionFloatingButton.tsx @@ -13,16 +13,11 @@ import { useUser } from '@/store/useUser'; import { useLanguage } from '@/store/useLanguage'; import copyUrl from '@/lib/utils/copyUrl'; -import LoginModal from '@/components/login/LoginModal'; -import Modal from '@/components/Modal/Modal'; import { commonLocale } from '@/components/locale'; function FloatingMenu() { - const router = useRouter(); const path = usePathname(); - const { user } = useUser(); - const { isOn, handleSetOn, handleSetOff } = useBooleanOutput(); const { language } = useLanguage(); const handleSharePage = () => { @@ -30,31 +25,13 @@ function FloatingMenu() { copyUrl(`https://listywave.com${path}`, language); }; - const handleMoveToPage = () => { - // TODO 토큰 유효성 검증 관련 인가 처리 로직 추가 - // 지금은 토큰이 있는 지 확인 후 이동만 간단하게 처리시켜 둠(추후 수정 예정) - if (!user.id) { - handleSetOn(); - return; - } - router.push('/list/create'); - }; - return ( <>
-
- -
- {isOn && ( - - - - )} ); } diff --git a/src/components/floatingButton/__PlusOptionFloationButton.tsx b/src/components/floatingButton/__PlusOptionFloationButton.tsx new file mode 100644 index 00000000..57990ddb --- /dev/null +++ b/src/components/floatingButton/__PlusOptionFloationButton.tsx @@ -0,0 +1,74 @@ +'use client'; + +import { usePathname, useRouter } from 'next/navigation'; + +import * as styles from './FloatingContainer.css'; + +import PlusIcon from '/public/icons/plus.svg'; +import ShareAltIcon from '/public/icons/share_alt.svg'; +import WriteIcon from '/public/icons/write.svg'; + +import useBooleanOutput from '@/hooks/useBooleanOutput'; +import { useUser } from '@/store/useUser'; +import { useLanguage } from '@/store/useLanguage'; +import copyUrl from '@/lib/utils/copyUrl'; + +import LoginModal from '@/components/login/LoginModal'; +import Modal from '@/components/Modal/Modal'; +import { commonLocale } from '@/components/locale'; + +function FloatingMenu() { + const router = useRouter(); + const path = usePathname(); + + const { user } = useUser(); + const { isOn, handleSetOn, handleSetOff } = useBooleanOutput(); + const { language } = useLanguage(); + + const handleSharePage = () => { + // TODO 카카오 공유하기 기능으로 변경하기 + copyUrl(`https://listywave.com${path}`, language); + }; + + const handleMoveToPage = () => { + // TODO 토큰 유효성 검증 관련 인가 처리 로직 추가 + // 지금은 토큰이 있는 지 확인 후 이동만 간단하게 처리시켜 둠(추후 수정 예정) + if (!user.id) { + handleSetOn(); + return; + } + router.push('/list/create'); + }; + + return ( + <> +
+
+ +
+
+ +
+
+ {isOn && ( + + + + )} + + ); +} + +export default function PlusOptionFloatingButton() { + const { language } = useLanguage(); + const { isOn, toggle } = useBooleanOutput(); + + return ( + <> + {isOn && } +
toggle()}> + +
+ + ); +} From 698c56f1e71074ee23ba90047f2291604773ab64 Mon Sep 17 00:00:00 2001 From: Nahyun-Kang Date: Sun, 18 Aug 2024 16:43:35 +0900 Subject: [PATCH 09/86] =?UTF-8?q?Fix:=20=ED=94=8C=EB=A1=9C=ED=8C=85=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/icons/arrow_up.svg | 2 +- public/icons/ver3/add.svg | 3 + public/icons/ver3/house.svg | 3 + public/icons/ver3/list_create.svg | 9 ++ public/icons/ver3/share.svg | 3 + public/icons/ver3/square_pencil.svg | 3 + .../_components/TopicsRecommendation.tsx | 2 +- src/components/BottomNav/BottomNav.css.ts | 52 +++++++++-- src/components/BottomNav/BottomNav.tsx | 31 ++++--- src/components/BottomNav/__BottomNav.tsx | 88 +++++++++++++++++++ .../floatingButton/ArrowUpFloatingButton.tsx | 2 +- .../floatingButton/FloatingContainer.css.ts | 8 +- .../PlusOptionFloatingButton.tsx | 16 +--- 13 files changed, 183 insertions(+), 39 deletions(-) create mode 100644 public/icons/ver3/add.svg create mode 100644 public/icons/ver3/house.svg create mode 100644 public/icons/ver3/list_create.svg create mode 100644 public/icons/ver3/share.svg create mode 100644 public/icons/ver3/square_pencil.svg create mode 100644 src/components/BottomNav/__BottomNav.tsx diff --git a/public/icons/arrow_up.svg b/public/icons/arrow_up.svg index ca5df02a..debd88c6 100644 --- a/public/icons/arrow_up.svg +++ b/public/icons/arrow_up.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/public/icons/ver3/add.svg b/public/icons/ver3/add.svg new file mode 100644 index 00000000..b82ccac8 --- /dev/null +++ b/public/icons/ver3/add.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/ver3/house.svg b/public/icons/ver3/house.svg new file mode 100644 index 00000000..650872cc --- /dev/null +++ b/public/icons/ver3/house.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/ver3/list_create.svg b/public/icons/ver3/list_create.svg new file mode 100644 index 00000000..67b82e5a --- /dev/null +++ b/public/icons/ver3/list_create.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/icons/ver3/share.svg b/public/icons/ver3/share.svg new file mode 100644 index 00000000..eb4d401e --- /dev/null +++ b/public/icons/ver3/share.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/ver3/square_pencil.svg b/public/icons/ver3/square_pencil.svg new file mode 100644 index 00000000..ef82c48e --- /dev/null +++ b/public/icons/ver3/square_pencil.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/app/(home)/_components/TopicsRecommendation.tsx b/src/app/(home)/_components/TopicsRecommendation.tsx index 846416c7..2ad0189a 100644 --- a/src/app/(home)/_components/TopicsRecommendation.tsx +++ b/src/app/(home)/_components/TopicsRecommendation.tsx @@ -8,7 +8,7 @@ function TopicsRecommendation() { return (
-
이 주제로 만들어 주세요
+
이 주제로 만들어 보세요
더보기 diff --git a/src/components/BottomNav/BottomNav.css.ts b/src/components/BottomNav/BottomNav.css.ts index 73f3a4cb..5c4712ab 100644 --- a/src/components/BottomNav/BottomNav.css.ts +++ b/src/components/BottomNav/BottomNav.css.ts @@ -3,23 +3,63 @@ import { vars } from '@/styles/theme.css'; export const navDiv = style({ width: '100%', - height: 70, + height: '90px', position: 'fixed', bottom: 0, - display: 'flex', + backgroundColor: '#F5F6FA', +}); + +export const ulDiv = style({ + padding: '9px 0 29px', - backgroundColor: vars.color.white, - borderTop: `1px solid ${vars.color.gray5}`, + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + gap: '60px', }); export const buttonDiv = style({ - flexGrow: 1, - display: 'flex', + flexDirection: 'column', + gap: '4.36px', justifyContent: 'center', alignItems: 'center', cursor: 'pointer', }); + +export const listCreateButton = style({ + width: '52px', + height: '52px', + background: 'linear-gradient(219deg, #5CA5FE 20.55%, #2788FF 94.24%)', + borderRadius: '9999px', +}); + +export const createButtonWrapper = style({ + width: '52px', + height: '52px', + + position: 'relative', +}); + +export const addIcon = style({ + position: 'absolute', + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', +}); + +export const menuName = style({ + fontSize: '1rem', + fontWeight: '400', + color: '#7A7B7D', +}); + +export const selectedMenuName = style([ + menuName, + { + color: '#53A0FF', + }, +]); diff --git a/src/components/BottomNav/BottomNav.tsx b/src/components/BottomNav/BottomNav.tsx index 99397064..4eb5dcf6 100644 --- a/src/components/BottomNav/BottomNav.tsx +++ b/src/components/BottomNav/BottomNav.tsx @@ -3,16 +3,14 @@ import { usePathname } from 'next/navigation'; import { useRouter } from 'next/navigation'; -import ExploreIcon from '/public/icons/explore.svg'; -import MyFeedIcon from '/public/icons/my_feed.svg'; -import CollectionIcon from '/public/icons/collection.svg'; +import HomeIcon from '/public/icons/ver3/house.svg'; +import MyFeedIcon from '/public/icons/ver3/square_pencil.svg'; +import AddIcon from '/public/icons/ver3/add.svg'; import useMoveToPage from '@/hooks/useMoveToPage'; import useBooleanOutput from '@/hooks/useBooleanOutput'; import { useUser } from '@/store/useUser'; -import toasting from '@/lib/utils/toasting'; -import toastMessage from '@/lib/constants/toastMessage'; import { vars } from '@/styles/theme.css'; import * as styles from './BottomNav.css'; @@ -49,8 +47,6 @@ export default function BottomNav() { return 'explore'; } else if (pathname === `/user/${userId}/mylist` || pathname === `/user/${userId}/collabolist`) { return 'my-feed'; - } else if (pathname.startsWith('/collection')) { - return 'collection'; } else { return null; } @@ -67,16 +63,23 @@ export default function BottomNav() { return ( <> -
); From 64c8e07fa229f7c64581fdce6de77876d8b8852b Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Sun, 18 Aug 2024 16:47:02 +0900 Subject: [PATCH 11/86] =?UTF-8?q?Design:=20=EB=82=B4=ED=94=BC=EB=93=9C=20?= =?UTF-8?q?=EA=B3=B5=EA=B0=9C/=EB=B9=84=EA=B3=B5=EA=B0=9C=20=EB=9D=BC?= =?UTF-8?q?=EB=B2=A8=20=ED=91=9C=EC=8B=9C=20UI=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/icons/popup_menu.svg | 5 +++ src/app/user/[userId]/_components/Card.css.ts | 36 ++++++++++++------- src/app/user/[userId]/_components/Card.tsx | 13 +++---- src/styles/font.css.ts | 6 ++++ 4 files changed, 42 insertions(+), 18 deletions(-) create mode 100644 public/icons/popup_menu.svg diff --git a/public/icons/popup_menu.svg b/public/icons/popup_menu.svg new file mode 100644 index 00000000..2cb074da --- /dev/null +++ b/public/icons/popup_menu.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/app/user/[userId]/_components/Card.css.ts b/src/app/user/[userId]/_components/Card.css.ts index acb59ef7..8d1449e8 100644 --- a/src/app/user/[userId]/_components/Card.css.ts +++ b/src/app/user/[userId]/_components/Card.css.ts @@ -1,6 +1,9 @@ import { style, createVar } from '@vanilla-extract/css'; -import { vars } from '@/styles/__theme.css'; -import { bodyMedium } from '@/styles/__font.css'; + +import { bodyMedium } from '@/styles/__font.css'; // TODO 새로운 폰트로 변경하기 + +import { vars } from '@/styles/theme.css'; +import { LabelSmall } from '@/styles/font.css'; export const listColor = createVar(); @@ -11,7 +14,6 @@ export const container = style({ borderRadius: '1.5rem', backgroundColor: listColor, - border: `1px solid ${vars.color.gray5}`, cursor: 'pointer', transition: 'all 200ms ease', @@ -65,19 +67,29 @@ export const list = style({ letterSpacing: '-0.36px', }); -export const lockIcon = style({ +export const label = style({ display: 'flex', - justifyContent: 'flex-end', + justifyContent: 'space-between', alignItems: 'center', - gap: '2px', }); -export const lockText = style({ - fontSize: '1.1rem', - fontWeight: '400', - letterSpacing: '-0.33px', - color: vars.color.gray7, -}); +export const labelText = style([ + LabelSmall, + { + padding: '0.4rem 1rem', + height: '2.6rem', + + display: 'inline-flex', + justifyContent: 'center', + alignItems: 'center', + gap: '0.5rem', + + color: vars.color.blue, + + borderRadius: '1.7rem', + backgroundColor: vars.color.lightblue, + }, +]); export const item = style({ display: 'flex', diff --git a/src/app/user/[userId]/_components/Card.tsx b/src/app/user/[userId]/_components/Card.tsx index b10d8dbb..4efdf5fc 100644 --- a/src/app/user/[userId]/_components/Card.tsx +++ b/src/app/user/[userId]/_components/Card.tsx @@ -3,7 +3,7 @@ import { assignInlineVars } from '@vanilla-extract/dynamic'; import * as styles from './Card.css'; import useMoveToPage from '@/hooks/useMoveToPage'; -import LockIcon from '/public/icons/lock_alt.svg'; +import PopupMenuIcon from '/public/icons/popup_menu.svg'; import { ListType } from '@/lib/types/listType'; import { BACKGROUND_COLOR_READ } from '@/styles/Color'; @@ -15,7 +15,6 @@ interface CardProps { export default function Card({ list, isOwner }: CardProps) { const { onClickMoveToPage } = useMoveToPage(); - const isVisibleLockIcon = isOwner && !list.isPublic; return ( // MasonryGrid 라이브러리에서는 ul로 감싸줘야 하므로 Link태그 미사용 @@ -26,10 +25,12 @@ export default function Card({ list, isOwner }: CardProps) { [styles.listColor]: `${BACKGROUND_COLOR_READ[list.backgroundColor as keyof typeof BACKGROUND_COLOR_READ]}`, })} > - {isVisibleLockIcon && ( -
- 비공개 - + {isOwner && ( +
+
비공개
+
)}

{list.title}

diff --git a/src/styles/font.css.ts b/src/styles/font.css.ts index 60d02009..774a9261 100644 --- a/src/styles/font.css.ts +++ b/src/styles/font.css.ts @@ -29,3 +29,9 @@ export const Label = style({ fontWeight: '400', letterSpacing: '-0.42rem', }); + +export const LabelSmall = style({ + fontSize: '1.1rem', + fontWeight: '400', + letterSpacing: '-0.0221rem', +}); From 622098495a79970f503fa32686520f8eba6df69c Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Sun, 18 Aug 2024 16:52:55 +0900 Subject: [PATCH 12/86] =?UTF-8?q?Chore:=20=EA=B8=B0=EC=A1=B4=20=EB=B2=84?= =?UTF-8?q?=EC=A0=84=20=EC=B9=B4=EB=93=9C=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../user/[userId]/_components/__Card.css.ts | 102 ++++++++++++++++++ src/app/user/[userId]/_components/__Card.tsx | 49 +++++++++ 2 files changed, 151 insertions(+) create mode 100644 src/app/user/[userId]/_components/__Card.css.ts create mode 100644 src/app/user/[userId]/_components/__Card.tsx diff --git a/src/app/user/[userId]/_components/__Card.css.ts b/src/app/user/[userId]/_components/__Card.css.ts new file mode 100644 index 00000000..acb59ef7 --- /dev/null +++ b/src/app/user/[userId]/_components/__Card.css.ts @@ -0,0 +1,102 @@ +import { style, createVar } from '@vanilla-extract/css'; +import { vars } from '@/styles/__theme.css'; +import { bodyMedium } from '@/styles/__font.css'; + +export const listColor = createVar(); + +export const container = style({ + maxWidth: '185px', + width: '100%', + padding: '2rem 2rem 3rem 2rem', + + borderRadius: '1.5rem', + backgroundColor: listColor, + border: `1px solid ${vars.color.gray5}`, + + cursor: 'pointer', + transition: 'all 200ms ease', + + ':hover': { + boxShadow: `0px 2px 3px -1px rgba(0,0,0,0.1), + 0px 1px 0px 0px rgba(25,28,33,0.02), + 0px 0px 0px 1px rgba(25,28,33,0.08)`, + }, + + '@media': { + // 화면이 414px 이하일 때, + 'screen and (max-width: 414px)': { + // iPhone XR, 갤럭시 S20 + maxWidth: '180px', + }, + 'screen and (max-width: 400px)': { + // 중간 point + maxWidth: '170px', + }, + 'screen and (max-width: 390px)': { + // iPhone 12 Pro + maxWidth: '165px', + }, + 'screen and (max-width: 375px)': { + // iPhone SE + maxWidth: '160px', + }, + }, +}); + +export const title = style({ + padding: '1.2rem 0 2rem 0', + + fontSize: '1.7rem', + fontWeight: '600', + color: vars.color.black, + textAlign: 'center', + letterSpacing: '-0.51px', + wordBreak: 'break-all', +}); + +export const list = style({ + display: 'flex', + flexDirection: 'column', + + fontSize: '1.2rem', + fontWeight: '400', + color: vars.color.black, + lineHeight: '2.5rem', + letterSpacing: '-0.36px', +}); + +export const lockIcon = style({ + display: 'flex', + justifyContent: 'flex-end', + alignItems: 'center', + gap: '2px', +}); + +export const lockText = style({ + fontSize: '1.1rem', + fontWeight: '400', + letterSpacing: '-0.33px', + color: vars.color.gray7, +}); + +export const item = style({ + display: 'flex', + alignItems: 'center', + gap: '5px', +}); + +export const rank = style([ + bodyMedium, + { + width: '1.2rem', + }, +]); + +export const itemTitle = style([ + bodyMedium, + { + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + }, +]); diff --git a/src/app/user/[userId]/_components/__Card.tsx b/src/app/user/[userId]/_components/__Card.tsx new file mode 100644 index 00000000..d4d546c1 --- /dev/null +++ b/src/app/user/[userId]/_components/__Card.tsx @@ -0,0 +1,49 @@ +import { assignInlineVars } from '@vanilla-extract/dynamic'; + +import * as styles from './__Card.css'; + +import useMoveToPage from '@/hooks/useMoveToPage'; +import LockIcon from '/public/icons/lock_alt.svg'; +import { ListType } from '@/lib/types/listType'; +import { BACKGROUND_COLOR_READ } from '@/styles/Color'; + +interface CardProps { + list: ListType; + isOwner: boolean; + userId: number; +} + +export default function Card({ list, isOwner }: CardProps) { + const { onClickMoveToPage } = useMoveToPage(); + const isVisibleLockIcon = isOwner && !list.isPublic; + + return ( + // MasonryGrid 라이브러리에서는 ul로 감싸줘야 하므로 Link태그 미사용 +
    + {isVisibleLockIcon && ( +
    + 비공개 + +
    + )} +

    {list.title}

    +
      + {list.listItems.map((item) => ( +
    • + + {item.rank} + {'.'} + + {item.title} +
      • + ))} +
    +
+ ); +} From 75f4d0ba96a3be01ff1cc65000682ff7a21e92a9 Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Sun, 18 Aug 2024 16:55:04 +0900 Subject: [PATCH 13/86] =?UTF-8?q?Design:=20isPublic=20=EC=98=B5=EC=85=98?= =?UTF-8?q?=EC=97=90=20=EB=94=B0=EB=A5=B8=20=EB=82=B4=ED=94=BC=EB=93=9C=20?= =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EA=B3=B5=EA=B0=9C/=EB=B9=84?= =?UTF-8?q?=EA=B3=B5=EA=B0=9C=20=EB=AC=B8=EA=B5=AC=20=EB=82=98=EC=98=A4?= =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/user/[userId]/_components/Card.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/user/[userId]/_components/Card.tsx b/src/app/user/[userId]/_components/Card.tsx index 4efdf5fc..45b4a2b1 100644 --- a/src/app/user/[userId]/_components/Card.tsx +++ b/src/app/user/[userId]/_components/Card.tsx @@ -27,7 +27,7 @@ export default function Card({ list, isOwner }: CardProps) { > {isOwner && (
-
비공개
+
{list.isPublic ? '공개' : '비공개'}
From af10b8b3439e5f7afddc9cfbca7510e2e2dd22ed Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Sun, 18 Aug 2024 17:05:48 +0900 Subject: [PATCH 14/86] =?UTF-8?q?Design:=20=EB=82=B4=ED=94=BC=EB=93=9C=20?= =?UTF-8?q?=EA=B3=B5=EA=B0=9C/=EB=B9=84=EA=B3=B5=EA=B0=9C=20=EC=98=B5?= =?UTF-8?q?=EC=85=98=20=EB=B2=84=ED=8A=BC=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/user/[userId]/_components/Card.css.ts | 9 +++++++++ src/app/user/[userId]/_components/Card.tsx | 2 +- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/src/app/user/[userId]/_components/Card.css.ts b/src/app/user/[userId]/_components/Card.css.ts index 8d1449e8..944de715 100644 --- a/src/app/user/[userId]/_components/Card.css.ts +++ b/src/app/user/[userId]/_components/Card.css.ts @@ -91,6 +91,15 @@ export const labelText = style([ }, ]); +export const labelOption = style({ + width: '50%', + height: '2.6rem', + + display: 'flex', + justifyContent: 'end', + alignItems: 'center', +}); + export const item = style({ display: 'flex', alignItems: 'center', diff --git a/src/app/user/[userId]/_components/Card.tsx b/src/app/user/[userId]/_components/Card.tsx index 45b4a2b1..66a3cf34 100644 --- a/src/app/user/[userId]/_components/Card.tsx +++ b/src/app/user/[userId]/_components/Card.tsx @@ -28,7 +28,7 @@ export default function Card({ list, isOwner }: CardProps) { {isOwner && (
{list.isPublic ? '공개' : '비공개'}
-
From ddd972186269f446bd5e8bf813558cbdec38132a Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Wed, 21 Aug 2024 22:19:41 +0900 Subject: [PATCH 15/86] =?UTF-8?q?Feat:=20=EB=A7=88=EC=9D=B4=ED=94=BC?= =?UTF-8?q?=EB=93=9C=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EC=BC=80=EB=B0=A5?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=ED=81=B4=EB=A6=AD=EC=8B=9C,=20=ED=8C=9D?= =?UTF-8?q?=EC=97=85=20=EB=A9=94=EB=89=B4=20=EB=82=98=EC=98=A4=EB=8F=84?= =?UTF-8?q?=EB=A1=9D=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/user/[userId]/_components/Card.tsx | 13 +++++++++++- .../[userId]/_components/PopupMenu.css.ts | 15 ++++++++++++++ .../user/[userId]/_components/PopupMenu.tsx | 20 +++++++++++++++++++ 3 files changed, 47 insertions(+), 1 deletion(-) create mode 100644 src/app/user/[userId]/_components/PopupMenu.css.ts create mode 100644 src/app/user/[userId]/_components/PopupMenu.tsx diff --git a/src/app/user/[userId]/_components/Card.tsx b/src/app/user/[userId]/_components/Card.tsx index 66a3cf34..784a750d 100644 --- a/src/app/user/[userId]/_components/Card.tsx +++ b/src/app/user/[userId]/_components/Card.tsx @@ -1,11 +1,15 @@ +import { MouseEvent } from 'react'; import { assignInlineVars } from '@vanilla-extract/dynamic'; import * as styles from './Card.css'; import useMoveToPage from '@/hooks/useMoveToPage'; +import useBooleanOutput from '@/hooks/useBooleanOutput'; + import PopupMenuIcon from '/public/icons/popup_menu.svg'; import { ListType } from '@/lib/types/listType'; import { BACKGROUND_COLOR_READ } from '@/styles/Color'; +import PopupMenu from './PopupMenu'; interface CardProps { list: ListType; @@ -15,6 +19,12 @@ interface CardProps { export default function Card({ list, isOwner }: CardProps) { const { onClickMoveToPage } = useMoveToPage(); + const { isOn: popupIsOpen, toggle: popupToggle, handleSetOn: handlePopupOn } = useBooleanOutput(); + + const handleOpenMenu = (e: MouseEvent) => { + e.stopPropagation(); + handlePopupOn(); + }; return ( // MasonryGrid 라이브러리에서는 ul로 감싸줘야 하므로 Link태그 미사용 @@ -28,9 +38,10 @@ export default function Card({ list, isOwner }: CardProps) { {isOwner && (
{list.isPublic ? '공개' : '비공개'}
- + {popupIsOpen && }
)}

{list.title}

diff --git a/src/app/user/[userId]/_components/PopupMenu.css.ts b/src/app/user/[userId]/_components/PopupMenu.css.ts new file mode 100644 index 00000000..d25dc0c8 --- /dev/null +++ b/src/app/user/[userId]/_components/PopupMenu.css.ts @@ -0,0 +1,15 @@ +import { style } from '@vanilla-extract/css'; +import { vars } from '@/styles/theme.css'; + +export const optionMenu = style({ + padding: '1.6rem', + position: 'absolute', + right: 0, + + display: 'flex', + flexDirection: 'column', + + borderRadius: '1.2rem', + background: vars.color.white, + boxShadow: '0px 0px 4px 0px rgba(180, 180, 180, 0.04), 0px 8px 16px 0px rgba(136, 136, 136, 0.08)', +}); diff --git a/src/app/user/[userId]/_components/PopupMenu.tsx b/src/app/user/[userId]/_components/PopupMenu.tsx new file mode 100644 index 00000000..2b0742e4 --- /dev/null +++ b/src/app/user/[userId]/_components/PopupMenu.tsx @@ -0,0 +1,20 @@ +import { MouseEvent, RefObject } from 'react'; + +import * as styles from './PopupMenu.css'; + +interface PopupMenuProps { + ref?: RefObject; +} + +export default function PopupMenu({ ref }: PopupMenuProps) { + const handleToggleVisibilityList = (e: MouseEvent) => { + e.stopPropagation(); + console.log('비공개 기능'); + }; + + return ( +
+ +
+ ); +} From e4d245ef49037a9069085fd22ca14e2cd1006d46 Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Mon, 2 Sep 2024 13:07:07 +0900 Subject: [PATCH 16/86] =?UTF-8?q?Feat:=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=ED=8C=9D=EC=97=85=20=EC=98=B5=EC=85=98=20=ED=86=A0=EA=B8=80=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/user/[userId]/_components/Card.css.ts | 9 ----- src/app/user/[userId]/_components/Card.tsx | 26 ++++++-------- ...pMenu.css.ts => OptionToggleButton.css.ts} | 10 ++++++ .../_components/OptionToggleButton.tsx | 34 +++++++++++++++++++ .../user/[userId]/_components/PopupMenu.tsx | 20 ----------- 5 files changed, 55 insertions(+), 44 deletions(-) rename src/app/user/[userId]/_components/{PopupMenu.css.ts => OptionToggleButton.css.ts} (70%) create mode 100644 src/app/user/[userId]/_components/OptionToggleButton.tsx delete mode 100644 src/app/user/[userId]/_components/PopupMenu.tsx diff --git a/src/app/user/[userId]/_components/Card.css.ts b/src/app/user/[userId]/_components/Card.css.ts index 944de715..8d1449e8 100644 --- a/src/app/user/[userId]/_components/Card.css.ts +++ b/src/app/user/[userId]/_components/Card.css.ts @@ -91,15 +91,6 @@ export const labelText = style([ }, ]); -export const labelOption = style({ - width: '50%', - height: '2.6rem', - - display: 'flex', - justifyContent: 'end', - alignItems: 'center', -}); - export const item = style({ display: 'flex', alignItems: 'center', diff --git a/src/app/user/[userId]/_components/Card.tsx b/src/app/user/[userId]/_components/Card.tsx index 784a750d..b447553f 100644 --- a/src/app/user/[userId]/_components/Card.tsx +++ b/src/app/user/[userId]/_components/Card.tsx @@ -1,15 +1,12 @@ -import { MouseEvent } from 'react'; import { assignInlineVars } from '@vanilla-extract/dynamic'; import * as styles from './Card.css'; import useMoveToPage from '@/hooks/useMoveToPage'; -import useBooleanOutput from '@/hooks/useBooleanOutput'; - -import PopupMenuIcon from '/public/icons/popup_menu.svg'; import { ListType } from '@/lib/types/listType'; import { BACKGROUND_COLOR_READ } from '@/styles/Color'; -import PopupMenu from './PopupMenu'; + +import OptionToggleButton from './OptionToggleButton'; interface CardProps { list: ListType; @@ -17,14 +14,16 @@ interface CardProps { userId: number; } +/** +TODO +- [x] 팝오버 메뉴 토글 기능 +- [x] 외부 클릭 시 팝오버 닫히는 기능 +- [ ] 팝오버 메뉴에 삭제하기 추가 +- [ ] 리스트 삭제하기 기능 + */ + export default function Card({ list, isOwner }: CardProps) { const { onClickMoveToPage } = useMoveToPage(); - const { isOn: popupIsOpen, toggle: popupToggle, handleSetOn: handlePopupOn } = useBooleanOutput(); - - const handleOpenMenu = (e: MouseEvent) => { - e.stopPropagation(); - handlePopupOn(); - }; return ( // MasonryGrid 라이브러리에서는 ul로 감싸줘야 하므로 Link태그 미사용 @@ -38,10 +37,7 @@ export default function Card({ list, isOwner }: CardProps) { {isOwner && (
{list.isPublic ? '공개' : '비공개'}
- - {popupIsOpen && } +
)}

{list.title}

diff --git a/src/app/user/[userId]/_components/PopupMenu.css.ts b/src/app/user/[userId]/_components/OptionToggleButton.css.ts similarity index 70% rename from src/app/user/[userId]/_components/PopupMenu.css.ts rename to src/app/user/[userId]/_components/OptionToggleButton.css.ts index d25dc0c8..c643c805 100644 --- a/src/app/user/[userId]/_components/PopupMenu.css.ts +++ b/src/app/user/[userId]/_components/OptionToggleButton.css.ts @@ -1,9 +1,19 @@ import { style } from '@vanilla-extract/css'; import { vars } from '@/styles/theme.css'; +export const labelOption = style({ + width: '50%', + height: '2.6rem', + + display: 'flex', + justifyContent: 'end', + alignItems: 'center', +}); + export const optionMenu = style({ padding: '1.6rem', position: 'absolute', + top: '4.6rem', right: 0, display: 'flex', diff --git a/src/app/user/[userId]/_components/OptionToggleButton.tsx b/src/app/user/[userId]/_components/OptionToggleButton.tsx new file mode 100644 index 00000000..95c329fd --- /dev/null +++ b/src/app/user/[userId]/_components/OptionToggleButton.tsx @@ -0,0 +1,34 @@ +import { MouseEvent } from 'react'; + +import * as styles from './OptionToggleButton.css'; + +import OptionMenuIcon from '/public/icons/popup_menu.svg'; +import useOnClickOutside from '@/hooks/useOnClickOutside'; +import useBooleanOutput from '@/hooks/useBooleanOutput'; + +// memoization +export default function OptionToggleButton() { + const { isOn: isPopupOpen, toggle: popupToggle, handleSetOff: handlePopupOff } = useBooleanOutput(); + const { ref: popupRef } = useOnClickOutside(handlePopupOff); + + const handleOpenMenu = (e: MouseEvent) => { + e.stopPropagation(); + popupToggle(); + }; + + // 리스트 공개, 비공개 기능 + const handleToggleVisibilityList = (e: MouseEvent) => { + e.stopPropagation(); + }; + + return ( +
+ + {isPopupOpen && ( +
+ +
+ )} +
+ ); +} diff --git a/src/app/user/[userId]/_components/PopupMenu.tsx b/src/app/user/[userId]/_components/PopupMenu.tsx deleted file mode 100644 index 2b0742e4..00000000 --- a/src/app/user/[userId]/_components/PopupMenu.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { MouseEvent, RefObject } from 'react'; - -import * as styles from './PopupMenu.css'; - -interface PopupMenuProps { - ref?: RefObject; -} - -export default function PopupMenu({ ref }: PopupMenuProps) { - const handleToggleVisibilityList = (e: MouseEvent) => { - e.stopPropagation(); - console.log('비공개 기능'); - }; - - return ( -
- -
- ); -} From 2945681364d609b1ed4f98517568ff62bbc7d71b Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Mon, 2 Sep 2024 13:18:55 +0900 Subject: [PATCH 17/86] =?UTF-8?q?Fix:=20=ED=8C=9D=EC=97=85=20=EB=A9=94?= =?UTF-8?q?=EB=89=B4=20div=20=ED=83=9C=EA=B7=B8=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/user/[userId]/_components/OptionToggleButton.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/user/[userId]/_components/OptionToggleButton.tsx b/src/app/user/[userId]/_components/OptionToggleButton.tsx index 95c329fd..11f1e756 100644 --- a/src/app/user/[userId]/_components/OptionToggleButton.tsx +++ b/src/app/user/[userId]/_components/OptionToggleButton.tsx @@ -25,9 +25,9 @@ export default function OptionToggleButton() {
{isPopupOpen && ( -
- -
+ )}
); From 9835032e35758f549318479585c698e463a7278d Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Mon, 2 Sep 2024 13:30:54 +0900 Subject: [PATCH 18/86] =?UTF-8?q?Feat:=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EA=B3=B5=EA=B0=9C,=20=EB=B9=84=EA=B3=B5=EA=B0=9C=20=EC=83=81?= =?UTF-8?q?=ED=83=9C=EC=97=90=20=EB=94=B0=EB=A5=B8=20=ED=8C=9D=EC=97=85?= =?UTF-8?q?=EB=A9=94=EB=89=B4=20text=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/user/[userId]/_components/Card.tsx | 2 +- .../user/[userId]/_components/OptionToggleButton.tsx | 10 ++++++++-- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/app/user/[userId]/_components/Card.tsx b/src/app/user/[userId]/_components/Card.tsx index b447553f..af1cc71c 100644 --- a/src/app/user/[userId]/_components/Card.tsx +++ b/src/app/user/[userId]/_components/Card.tsx @@ -37,7 +37,7 @@ export default function Card({ list, isOwner }: CardProps) { {isOwner && (
{list.isPublic ? '공개' : '비공개'}
- +
)}

{list.title}

diff --git a/src/app/user/[userId]/_components/OptionToggleButton.tsx b/src/app/user/[userId]/_components/OptionToggleButton.tsx index 11f1e756..7b0ddc84 100644 --- a/src/app/user/[userId]/_components/OptionToggleButton.tsx +++ b/src/app/user/[userId]/_components/OptionToggleButton.tsx @@ -6,11 +6,17 @@ import OptionMenuIcon from '/public/icons/popup_menu.svg'; import useOnClickOutside from '@/hooks/useOnClickOutside'; import useBooleanOutput from '@/hooks/useBooleanOutput'; +interface OptionToggleButton { + isPublicCurrent: boolean; +} + // memoization -export default function OptionToggleButton() { +export default function OptionToggleButton({ isPublicCurrent }: OptionToggleButton) { const { isOn: isPopupOpen, toggle: popupToggle, handleSetOff: handlePopupOff } = useBooleanOutput(); const { ref: popupRef } = useOnClickOutside(handlePopupOff); + const publicAction = isPublicCurrent ? '비공개' : '공개'; + const handleOpenMenu = (e: MouseEvent) => { e.stopPropagation(); popupToggle(); @@ -26,7 +32,7 @@ export default function OptionToggleButton() { {isPopupOpen && ( )}
From 2eba820a6c9bc00e4f7e5ad6ff85c9e6fb289e7d Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Mon, 2 Sep 2024 14:12:30 +0900 Subject: [PATCH 19/86] =?UTF-8?q?Design:=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=ED=8C=9D=EC=98=A4=EB=B2=84=20=EB=A9=94=EB=89=B4=EC=97=90=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C=ED=95=98=EA=B8=B0=20=EC=98=B5=EC=85=98=20UI?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../_components/OptionToggleButton.css.ts | 43 ++++++++++++++++++- .../_components/OptionToggleButton.tsx | 20 ++++++--- src/styles/theme.css.ts | 2 + 3 files changed, 59 insertions(+), 6 deletions(-) diff --git a/src/app/user/[userId]/_components/OptionToggleButton.css.ts b/src/app/user/[userId]/_components/OptionToggleButton.css.ts index c643c805..10819653 100644 --- a/src/app/user/[userId]/_components/OptionToggleButton.css.ts +++ b/src/app/user/[userId]/_components/OptionToggleButton.css.ts @@ -1,5 +1,7 @@ import { style } from '@vanilla-extract/css'; + import { vars } from '@/styles/theme.css'; +import { LabelSmall } from '@/styles/font.css'; export const labelOption = style({ width: '50%', @@ -11,7 +13,6 @@ export const labelOption = style({ }); export const optionMenu = style({ - padding: '1.6rem', position: 'absolute', top: '4.6rem', right: 0, @@ -23,3 +24,43 @@ export const optionMenu = style({ background: vars.color.white, boxShadow: '0px 0px 4px 0px rgba(180, 180, 180, 0.04), 0px 8px 16px 0px rgba(136, 136, 136, 0.08)', }); + +export const optionTop = style([ + LabelSmall, + { + paddingTop: '1.6rem', + paddingLeft: '1.6rem', + paddingRight: '1.6rem', + paddingBottom: '0.6rem', + + borderTopLeftRadius: '1.2rem', + borderTopRightRadius: '1.2rem', + + selectors: { + '&:hover': { + backgroundColor: vars.color.lightblue, + }, + }, + }, +]); + +export const optionBottom = style([ + LabelSmall, + { + paddingTop: '0.6rem', + paddingLeft: '1.6rem', + paddingRight: '1.6rem', + paddingBottom: '1.6rem', + + borderBottomLeftRadius: '1.2rem', + borderBottomRightRadius: '1.2rem', + + color: vars.color.red, + + selectors: { + '&:hover': { + backgroundColor: vars.color.lightblue, + }, + }, + }, +]); diff --git a/src/app/user/[userId]/_components/OptionToggleButton.tsx b/src/app/user/[userId]/_components/OptionToggleButton.tsx index 7b0ddc84..172fb880 100644 --- a/src/app/user/[userId]/_components/OptionToggleButton.tsx +++ b/src/app/user/[userId]/_components/OptionToggleButton.tsx @@ -22,18 +22,28 @@ export default function OptionToggleButton({ isPublicCurrent }: OptionToggleButt popupToggle(); }; - // 리스트 공개, 비공개 기능 - const handleToggleVisibilityList = (e: MouseEvent) => { + const handleClickOption = (e: MouseEvent) => { e.stopPropagation(); + console.log((e.target as HTMLButtonElement).id); }; + // 리스트 공개, 비공개 기능 + // const handleToggleVisibilityList = (e: MouseEvent) => { + // e.stopPropagation(); + // }; + return (
{isPopupOpen && ( - +
+ + +
)}
); diff --git a/src/styles/theme.css.ts b/src/styles/theme.css.ts index 6eea6b28..5f56ef01 100644 --- a/src/styles/theme.css.ts +++ b/src/styles/theme.css.ts @@ -14,6 +14,7 @@ export const vars = createThemeContract({ lightgray: 'color-lightgray', gray: 'color-gray', black: 'color-black', + red: 'color-red', }, // TODO 반응형 코드 수정 필요 breakpoints: { @@ -38,6 +39,7 @@ createGlobalTheme(':root', vars, { lightgray: '#B6BBBF', gray: '#7A7B7D', black: '#323A43', + red: '#FF0000', }, // TODO 반응형 코드 수정 필요 breakpoints: { From fd59ef89202f2578fa80039250a94046dad5113b Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Mon, 2 Sep 2024 14:43:40 +0900 Subject: [PATCH 20/86] =?UTF-8?q?Feat:=20=ED=8C=9D=EC=97=85=20=EB=A9=94?= =?UTF-8?q?=EB=89=B4=20=EC=82=AD=EC=A0=9C=ED=95=98=EA=B8=B0=20=ED=81=B4?= =?UTF-8?q?=EB=A6=AD=20=EC=8B=9C,=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EA=B0=9C=EB=B3=84=20=EC=82=AD=EC=A0=9C=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/user/[userId]/_components/Card.tsx | 11 ++++++---- .../_components/OptionToggleButton.tsx | 21 ++++++++++++++++++- 2 files changed, 27 insertions(+), 5 deletions(-) diff --git a/src/app/user/[userId]/_components/Card.tsx b/src/app/user/[userId]/_components/Card.tsx index af1cc71c..4e7e4ff3 100644 --- a/src/app/user/[userId]/_components/Card.tsx +++ b/src/app/user/[userId]/_components/Card.tsx @@ -18,11 +18,14 @@ interface CardProps { TODO - [x] 팝오버 메뉴 토글 기능 - [x] 외부 클릭 시 팝오버 닫히는 기능 -- [ ] 팝오버 메뉴에 삭제하기 추가 -- [ ] 리스트 삭제하기 기능 +- [x] 팝오버 메뉴에 삭제하기 추가 +- [x] 리스트 삭제하기 기능 +- [ ] 삭제 시 컨펌모달 +- [ ] 토스트 메세지 +- [ ] 리스트 공개, 비공개 기능 */ -export default function Card({ list, isOwner }: CardProps) { +export default function Card({ list, isOwner, userId }: CardProps) { const { onClickMoveToPage } = useMoveToPage(); return ( @@ -37,7 +40,7 @@ export default function Card({ list, isOwner }: CardProps) { {isOwner && (
{list.isPublic ? '공개' : '비공개'}
- +
)}

{list.title}

diff --git a/src/app/user/[userId]/_components/OptionToggleButton.tsx b/src/app/user/[userId]/_components/OptionToggleButton.tsx index 172fb880..41e7cb09 100644 --- a/src/app/user/[userId]/_components/OptionToggleButton.tsx +++ b/src/app/user/[userId]/_components/OptionToggleButton.tsx @@ -1,4 +1,5 @@ import { MouseEvent } from 'react'; +import { useMutation, useQueryClient } from '@tanstack/react-query'; import * as styles from './OptionToggleButton.css'; @@ -6,17 +7,33 @@ import OptionMenuIcon from '/public/icons/popup_menu.svg'; import useOnClickOutside from '@/hooks/useOnClickOutside'; import useBooleanOutput from '@/hooks/useBooleanOutput'; +import deleteList from '@/app/_api/list/deleteList'; +import { QUERY_KEYS } from '@/lib/constants/queryKeys'; + interface OptionToggleButton { + listId: string; + userId: number; isPublicCurrent: boolean; } // memoization -export default function OptionToggleButton({ isPublicCurrent }: OptionToggleButton) { +export default function OptionToggleButton({ listId, userId, isPublicCurrent }: OptionToggleButton) { + const queryClient = useQueryClient(); const { isOn: isPopupOpen, toggle: popupToggle, handleSetOff: handlePopupOff } = useBooleanOutput(); const { ref: popupRef } = useOnClickOutside(handlePopupOff); const publicAction = isPublicCurrent ? '비공개' : '공개'; + const deleteListMutation = useMutation({ + mutationFn: () => deleteList(listId), + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.getAllList, userId] }); + }, + onError: () => { + // TODO 에러핸들링 - 토스트메세지 + }, + }); + const handleOpenMenu = (e: MouseEvent) => { e.stopPropagation(); popupToggle(); @@ -25,6 +42,8 @@ export default function OptionToggleButton({ isPublicCurrent }: OptionToggleButt const handleClickOption = (e: MouseEvent) => { e.stopPropagation(); console.log((e.target as HTMLButtonElement).id); + + deleteListMutation.mutate(); }; // 리스트 공개, 비공개 기능 From cf3ccf0e6e9c35278cffa18938b7bbc702d69016 Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Wed, 4 Sep 2024 09:51:06 +0900 Subject: [PATCH 21/86] =?UTF-8?q?Feat:=20=EC=82=AD=EC=A0=9C=ED=95=98?= =?UTF-8?q?=EA=B8=B0=20=EC=98=B5=EC=85=98=EC=9D=84=20=EB=88=8C=EB=A0=80?= =?UTF-8?q?=EC=9D=84=20=EB=95=8C=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=EA=B0=80=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C=EB=90=98=EB=8F=84=EB=A1=9D=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/_api/list/deleteList.ts | 4 +--- .../_components/OptionToggleButton.tsx | 19 ++++++++++--------- 2 files changed, 11 insertions(+), 12 deletions(-) diff --git a/src/app/_api/list/deleteList.ts b/src/app/_api/list/deleteList.ts index 5e8d3b90..d5ea8071 100644 --- a/src/app/_api/list/deleteList.ts +++ b/src/app/_api/list/deleteList.ts @@ -1,10 +1,8 @@ // 리스트 삭제 api import axiosInstance from '@/lib/axios/axiosInstance'; -//댓글 삭제 api const deleteList = async (listId: string | undefined) => { - const response = await axiosInstance.delete(`/lists/${listId}`); - return response.data; + await axiosInstance.delete(`/lists/${listId}`); }; export default deleteList; diff --git a/src/app/user/[userId]/_components/OptionToggleButton.tsx b/src/app/user/[userId]/_components/OptionToggleButton.tsx index 41e7cb09..6571a2b7 100644 --- a/src/app/user/[userId]/_components/OptionToggleButton.tsx +++ b/src/app/user/[userId]/_components/OptionToggleButton.tsx @@ -10,14 +10,16 @@ import useBooleanOutput from '@/hooks/useBooleanOutput'; import deleteList from '@/app/_api/list/deleteList'; import { QUERY_KEYS } from '@/lib/constants/queryKeys'; -interface OptionToggleButton { +interface OptionToggleButtonType { listId: string; userId: number; isPublicCurrent: boolean; } +type SelectOptionType = 'visibility' | 'delete'; + // memoization -export default function OptionToggleButton({ listId, userId, isPublicCurrent }: OptionToggleButton) { +export default function OptionToggleButton({ listId, userId, isPublicCurrent }: OptionToggleButtonType) { const queryClient = useQueryClient(); const { isOn: isPopupOpen, toggle: popupToggle, handleSetOff: handlePopupOff } = useBooleanOutput(); const { ref: popupRef } = useOnClickOutside(handlePopupOff); @@ -41,16 +43,15 @@ export default function OptionToggleButton({ listId, userId, isPublicCurrent }: const handleClickOption = (e: MouseEvent) => { e.stopPropagation(); - console.log((e.target as HTMLButtonElement).id); + const selectOption = (e.target as HTMLButtonElement).id as SelectOptionType; - deleteListMutation.mutate(); + if (selectOption === 'delete') { + deleteListMutation.mutate(); + } else { + // TODO 비공개, 공개 설정 + } }; - // 리스트 공개, 비공개 기능 - // const handleToggleVisibilityList = (e: MouseEvent) => { - // e.stopPropagation(); - // }; - return (
From d6f7c7e9b9369c10ec197a9d678fb81f73040fdf Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Wed, 4 Sep 2024 11:12:17 +0900 Subject: [PATCH 22/86] =?UTF-8?q?Chore:=20=EB=94=94=EC=9E=90=EC=9D=B8?= =?UTF-8?q?=EC=8B=9C=EC=8A=A4=ED=85=9C=20=ED=8F=B0=ED=8A=B8=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/font.css.ts | 89 +++++++++++++++++++++++++++++++++++++++++- 1 file changed, 88 insertions(+), 1 deletion(-) diff --git a/src/styles/font.css.ts b/src/styles/font.css.ts index 774a9261..c8ce28ea 100644 --- a/src/styles/font.css.ts +++ b/src/styles/font.css.ts @@ -30,8 +30,95 @@ export const Label = style({ letterSpacing: '-0.42rem', }); +/** + * 아래부터는 피그마 확인하여 정리함 + TODO 최종 디자인시스템 확인하면, 위의 변수와 아래 변수 통합하기 + */ + +// 타이틀 +export const TitleLarge = style({ + fontSize: '2.2rem', + fontWeight: '600', + lineHeight: '2.8rem', + letterSpacing: '0.088rem', +}); + +export const TitleMedium = style({ + fontSize: '2rem', + fontWeight: '600', + lineHeight: '2.4rem', + letterSpacing: '0.16rem', +}); + +export const TitleRegular = style({ + fontSize: '1.8rem', + fontWeight: '600', + lineHeight: '2.4rem', + letterSpacing: '0.14rem', +}); + +export const TitleSmall = style({ + fontSize: '1.4rem', + fontWeight: '600', + lineHeight: '2rem', + letterSpacing: '0.12rem', +}); + +// 바디 +export const BodyLarge = style({ + fontSize: '1.6rem', + fontWeight: '400', + lineHeight: '2.4rem', + letterSpacing: ' 0.026rem', +}); + +export const BodyRegular = style({ + fontSize: '1.5rem', + fontWeight: '500', + lineHeight: '2rem', + letterSpacing: '0.2rem', +}); + +export const BodyMedium = style({ + fontSize: '1.4rem', + fontWeight: '400', + lineHeight: '2rem', + letterSpacing: '0.08rem', +}); + +export const BodySmall = style({ + fontSize: '1.2rem', + fontWeight: '400', + lineHeight: '1.6rem', + letterSpacing: '0.048rem', +}); + +// 라벨 +export const LabelLarge = style({ + fontSize: '1.6rem', + fontWeight: '600', + lineHeight: '2.4rem', + letterSpacing: '0.2rem', +}); + +export const LabelMedium = style({ + fontSize: '1.4rem', + fontWeight: '500', + lineHeight: '2.4rem', + letterSpacing: '0.4rem', +}); + export const LabelSmall = style({ + fontSize: '1.2rem', + fontWeight: '500', + lineHeight: '1.6rem', + letterSpacing: '0.6rem', +}); + +// 캡션 +export const Caption = style({ fontSize: '1.1rem', fontWeight: '400', - letterSpacing: '-0.0221rem', + lineHeight: '1.6rem', + lineHeightStep: '0.055rem', }); From 7dac6b63ed8be9c6f5e09214b23981f6644dba03 Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Wed, 4 Sep 2024 13:37:28 +0900 Subject: [PATCH 23/86] =?UTF-8?q?Design:=20=EB=A7=88=EC=9D=B4=ED=94=BC?= =?UTF-8?q?=EB=93=9C=20ver3.0=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD=EC=97=90=20=EB=94=B0=EB=A5=B8=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=20=EC=9D=BC=EB=B6=80=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/user/[userId]/_components/Card.css.ts | 20 ++--- src/app/user/[userId]/_components/Card.tsx | 11 +-- .../user/[userId]/_components/Content.css.ts | 11 +-- .../_components/OptionToggleButton.css.ts | 11 ++- .../user/[userId]/_components/Profile.css.ts | 73 +++++++++---------- src/app/user/[userId]/_components/Profile.tsx | 66 ++++++++--------- src/styles/theme.css.ts | 2 + 7 files changed, 93 insertions(+), 101 deletions(-) diff --git a/src/app/user/[userId]/_components/Card.css.ts b/src/app/user/[userId]/_components/Card.css.ts index 8d1449e8..f287909d 100644 --- a/src/app/user/[userId]/_components/Card.css.ts +++ b/src/app/user/[userId]/_components/Card.css.ts @@ -1,19 +1,15 @@ -import { style, createVar } from '@vanilla-extract/css'; - -import { bodyMedium } from '@/styles/__font.css'; // TODO 새로운 폰트로 변경하기 +import { style } from '@vanilla-extract/css'; import { vars } from '@/styles/theme.css'; -import { LabelSmall } from '@/styles/font.css'; - -export const listColor = createVar(); +import { BodyMedium, Caption } from '@/styles/font.css'; export const container = style({ maxWidth: '185px', width: '100%', - padding: '2rem 2rem 3rem 2rem', + padding: '1.2rem', - borderRadius: '1.5rem', - backgroundColor: listColor, + borderRadius: '2.4rem', + backgroundColor: vars.color.white, cursor: 'pointer', transition: 'all 200ms ease', @@ -74,7 +70,7 @@ export const label = style({ }); export const labelText = style([ - LabelSmall, + Caption, { padding: '0.4rem 1rem', height: '2.6rem', @@ -98,14 +94,14 @@ export const item = style({ }); export const rank = style([ - bodyMedium, + BodyMedium, { width: '1.2rem', }, ]); export const itemTitle = style([ - bodyMedium, + BodyMedium, { overflow: 'hidden', textOverflow: 'ellipsis', diff --git a/src/app/user/[userId]/_components/Card.tsx b/src/app/user/[userId]/_components/Card.tsx index 4e7e4ff3..e496e0fa 100644 --- a/src/app/user/[userId]/_components/Card.tsx +++ b/src/app/user/[userId]/_components/Card.tsx @@ -1,10 +1,11 @@ -import { assignInlineVars } from '@vanilla-extract/dynamic'; +// 리스트 배경색은 없어질 예정이므로 우선 주석처리 해둠 +// import { assignInlineVars } from '@vanilla-extract/dynamic'; import * as styles from './Card.css'; import useMoveToPage from '@/hooks/useMoveToPage'; import { ListType } from '@/lib/types/listType'; -import { BACKGROUND_COLOR_READ } from '@/styles/Color'; +// import { BACKGROUND_COLOR_READ } from '@/styles/Color'; import OptionToggleButton from './OptionToggleButton'; @@ -33,9 +34,9 @@ export default function Card({ list, isOwner, userId }: CardProps) {
    {isOwner && (
    diff --git a/src/app/user/[userId]/_components/Content.css.ts b/src/app/user/[userId]/_components/Content.css.ts index 95a854e3..073d413d 100644 --- a/src/app/user/[userId]/_components/Content.css.ts +++ b/src/app/user/[userId]/_components/Content.css.ts @@ -1,6 +1,7 @@ import { style } from '@vanilla-extract/css'; -import { vars } from '@/styles/__theme.css'; -import { bodyLarge } from '@/styles/__font.css'; + +import { BodyLarge } from '@/styles/font.css'; +import { vars } from '@/styles/theme.css'; export const container = style({ width: '100%', @@ -9,7 +10,7 @@ export const container = style({ position: 'absolute', top: 0, - backgroundColor: vars.color.white, + backgroundColor: vars.color.bgblue, borderTopLeftRadius: '2.5rem', borderTopRightRadius: '2.5rem', }); @@ -35,7 +36,7 @@ export const link = style({ }); export const button = style([ - bodyLarge, + BodyLarge, { height: '100%', @@ -44,7 +45,7 @@ export const button = style([ alignItems: 'center', justifyContent: 'center', - backgroundColor: vars.color.white, + backgroundColor: vars.color.bgblue, }, ]); diff --git a/src/app/user/[userId]/_components/OptionToggleButton.css.ts b/src/app/user/[userId]/_components/OptionToggleButton.css.ts index 10819653..1375a478 100644 --- a/src/app/user/[userId]/_components/OptionToggleButton.css.ts +++ b/src/app/user/[userId]/_components/OptionToggleButton.css.ts @@ -1,7 +1,7 @@ import { style } from '@vanilla-extract/css'; import { vars } from '@/styles/theme.css'; -import { LabelSmall } from '@/styles/font.css'; +import { BodyMedium } from '@/styles/font.css'; export const labelOption = style({ width: '50%', @@ -10,6 +10,8 @@ export const labelOption = style({ display: 'flex', justifyContent: 'end', alignItems: 'center', + + color: vars.color.black, }); export const optionMenu = style({ @@ -26,7 +28,7 @@ export const optionMenu = style({ }); export const optionTop = style([ - LabelSmall, + BodyMedium, { paddingTop: '1.6rem', paddingLeft: '1.6rem', @@ -36,6 +38,8 @@ export const optionTop = style([ borderTopLeftRadius: '1.2rem', borderTopRightRadius: '1.2rem', + fontWeight: '300', + selectors: { '&:hover': { backgroundColor: vars.color.lightblue, @@ -45,7 +49,7 @@ export const optionTop = style([ ]); export const optionBottom = style([ - LabelSmall, + BodyMedium, { paddingTop: '0.6rem', paddingLeft: '1.6rem', @@ -56,6 +60,7 @@ export const optionBottom = style([ borderBottomRightRadius: '1.2rem', color: vars.color.red, + fontWeight: '300', selectors: { '&:hover': { diff --git a/src/app/user/[userId]/_components/Profile.css.ts b/src/app/user/[userId]/_components/Profile.css.ts index be0bfba5..61d47386 100644 --- a/src/app/user/[userId]/_components/Profile.css.ts +++ b/src/app/user/[userId]/_components/Profile.css.ts @@ -1,11 +1,12 @@ import { style, createVar } from '@vanilla-extract/css'; -import { vars } from '@/styles/__theme.css'; -import { bodySmall, caption, titleMedium } from '@/styles/__font.css'; + +import { BodyLarge, BodySmall } from '@/styles/font.css'; +import { vars } from '@/styles/theme.css'; export const imageUrl = createVar(); export const container = style({ - padding: '2.1rem 1.9rem 6.4rem 1.5rem', + padding: '2.1rem 2rem 6.4rem 2rem', width: '100%', height: '440px', @@ -29,7 +30,7 @@ export const header = style({ }); export const profileContainer = style({ - padding: '0 3.3rem', + paddingBottom: '2rem', display: 'flex', flexDirection: 'column', @@ -49,7 +50,7 @@ export const profileContainer = style({ }); export const skeletonProfileContainer = style({ - paddingBottom: '3rem', + paddingBottom: '2rem', display: 'flex', alignItems: 'center', gap: '1.2rem', @@ -71,16 +72,16 @@ export const profile = style({ }); export const profileImageWrapper = style({ - width: '5rem', - height: '5rem', + width: '4.8rem', + height: '4.8rem', borderRadius: '50%', backgroundColor: vars.color.white, }); export const profileImage = style({ - width: '5rem', - height: '5rem', + width: '4.8rem', + height: '4.8rem', padding: '2px', borderRadius: '50%', }); @@ -88,19 +89,19 @@ export const profileImage = style({ export const info = style({ display: 'flex', flexDirection: 'column', - gap: '0.8rem', + gap: '0.5rem', }); export const user = style({ display: 'flex', - alignItems: 'center', - gap: '1.2rem', + alignItems: 'baseline', + gap: '1rem', }); export const nickName = style([ - titleMedium, + BodyLarge, { - color: vars.color.white, + color: vars.color.black, '@media': { 'screen and (max-width: 414px)': { @@ -112,40 +113,32 @@ export const nickName = style([ export const follow = style({ display: 'flex', - gap: '1.6rem', -}); - -export const text = style({ - display: 'flex', - alignItems: 'center', - gap: '0.5rem', - - cursor: 'pointer', + gap: '1rem', }); -export const count = style([ - bodySmall, +export const text = style([ + BodySmall, { - color: vars.color.white, - }, -]); + display: 'flex', + alignItems: 'center', + gap: '0.5rem', -export const captionText = style([ - caption, - { - color: vars.color.white, + color: vars.color.black, + + cursor: 'pointer', }, ]); export const description = style([ - bodySmall, + BodySmall, { - paddingLeft: '2.5rem', - marginBottom: '2.5rem', - - width: '100%', - maxHeight: '80px', - - color: vars.color.white, + padding: '0.3rem 0.8rem', + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + gap: '1rem', + + borderRadius: '2rem', + backgroundColor: 'rgba(255, 255, 255, 0.50)', }, ]); diff --git a/src/app/user/[userId]/_components/Profile.tsx b/src/app/user/[userId]/_components/Profile.tsx index 586923a7..909cf8a0 100644 --- a/src/app/user/[userId]/_components/Profile.tsx +++ b/src/app/user/[userId]/_components/Profile.tsx @@ -65,54 +65,48 @@ export default function Profile({ userId }: { userId: number }) {
    {isLoading ? (
    - +
    ) : ( - <> -
    -
    - {data?.profileImageUrl ? ( - {userLocale[language].profileImageAlt} - ) : ( -
    - )} -
    -
    -
    - {data?.nickname} - {!data?.isOwner && } -
    +
    +
    + {data?.profileImageUrl ? ( + {userLocale[language].profileImageAlt} + ) : ( +
    + )} +
    +
    +
    + {data?.nickname}
    - - - {data?.followingCount !== undefined && numberFormatter(data.followingCount, 'ko')} - - {userLocale[language].following} - - - {data?.followerCount !== undefined && numberFormatter(data.followerCount, 'ko')} - - {userLocale[language].follower} + {data?.followerCount !== undefined && numberFormatter(data.followerCount, 'ko')} + {userLocale[language].follower} + + + {data?.followingCount !== undefined && numberFormatter(data.followingCount, 'ko')} + {userLocale[language].following}
    + {!data?.isOwner && }
    +

    {data?.description}

    -

    {data?.description ? `" ${data.description} "` : ''}

    - +
    )}
    diff --git a/src/styles/theme.css.ts b/src/styles/theme.css.ts index 5f56ef01..6221b246 100644 --- a/src/styles/theme.css.ts +++ b/src/styles/theme.css.ts @@ -15,6 +15,7 @@ export const vars = createThemeContract({ gray: 'color-gray', black: 'color-black', red: 'color-red', + bgblue: 'color-bg-light-blue', }, // TODO 반응형 코드 수정 필요 breakpoints: { @@ -40,6 +41,7 @@ createGlobalTheme(':root', vars, { gray: '#7A7B7D', black: '#323A43', red: '#FF0000', + bgblue: '#F5F6FA', }, // TODO 반응형 코드 수정 필요 breakpoints: { From deb4abc9ccac7985a480216f2575a77df8969c4d Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Wed, 4 Sep 2024 17:23:46 +0900 Subject: [PATCH 24/86] =?UTF-8?q?Refactor:=20=EB=A6=AC=EC=8A=A4=ED=8A=B8?= =?UTF-8?q?=20=EC=B9=B4=EB=93=9C=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?= =?UTF-8?q?=EC=99=80=20=EC=98=B5=EC=85=98=ED=86=A0=EA=B8=80=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=97=90=20?= =?UTF-8?q?=EB=A9=94=EB=AA=A8=EC=9D=B4=EC=A0=9C=EC=9D=B4=EC=85=98=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/user/[userId]/_components/Card.tsx | 6 +++++- src/app/user/[userId]/_components/OptionToggleButton.tsx | 7 ++++--- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src/app/user/[userId]/_components/Card.tsx b/src/app/user/[userId]/_components/Card.tsx index e496e0fa..75968038 100644 --- a/src/app/user/[userId]/_components/Card.tsx +++ b/src/app/user/[userId]/_components/Card.tsx @@ -1,6 +1,8 @@ // 리스트 배경색은 없어질 예정이므로 우선 주석처리 해둠 // import { assignInlineVars } from '@vanilla-extract/dynamic'; +import { memo } from 'react'; + import * as styles from './Card.css'; import useMoveToPage from '@/hooks/useMoveToPage'; @@ -26,7 +28,7 @@ TODO - [ ] 리스트 공개, 비공개 기능 */ -export default function Card({ list, isOwner, userId }: CardProps) { +function Card({ list, isOwner, userId }: CardProps) { const { onClickMoveToPage } = useMoveToPage(); return ( @@ -59,3 +61,5 @@ export default function Card({ list, isOwner, userId }: CardProps) {
); } + +export default memo(Card); diff --git a/src/app/user/[userId]/_components/OptionToggleButton.tsx b/src/app/user/[userId]/_components/OptionToggleButton.tsx index 6571a2b7..c9e19bca 100644 --- a/src/app/user/[userId]/_components/OptionToggleButton.tsx +++ b/src/app/user/[userId]/_components/OptionToggleButton.tsx @@ -1,4 +1,4 @@ -import { MouseEvent } from 'react'; +import { memo, MouseEvent } from 'react'; import { useMutation, useQueryClient } from '@tanstack/react-query'; import * as styles from './OptionToggleButton.css'; @@ -18,8 +18,7 @@ interface OptionToggleButtonType { type SelectOptionType = 'visibility' | 'delete'; -// memoization -export default function OptionToggleButton({ listId, userId, isPublicCurrent }: OptionToggleButtonType) { +function OptionToggleButton({ listId, userId, isPublicCurrent }: OptionToggleButtonType) { const queryClient = useQueryClient(); const { isOn: isPopupOpen, toggle: popupToggle, handleSetOff: handlePopupOff } = useBooleanOutput(); const { ref: popupRef } = useOnClickOutside(handlePopupOff); @@ -68,3 +67,5 @@ export default function OptionToggleButton({ listId, userId, isPublicCurrent }:
); } + +export default memo(OptionToggleButton); From 7613f78c422de442200851b008c4c073b2806b3b Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Sun, 8 Sep 2024 20:45:52 +0900 Subject: [PATCH 25/86] =?UTF-8?q?Design:=20Ver3.0=20=ED=8F=B0=ED=8A=B8?= =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/user/[userId]/_components/Card.css.ts | 8 +- .../user/[userId]/_components/Content.css.ts | 4 +- .../_components/OptionToggleButton.css.ts | 6 +- .../user/[userId]/_components/Profile.css.ts | 8 +- src/styles/font.css.ts | 90 +------------------ 5 files changed, 15 insertions(+), 101 deletions(-) diff --git a/src/app/user/[userId]/_components/Card.css.ts b/src/app/user/[userId]/_components/Card.css.ts index f287909d..12406f2d 100644 --- a/src/app/user/[userId]/_components/Card.css.ts +++ b/src/app/user/[userId]/_components/Card.css.ts @@ -1,7 +1,7 @@ import { style } from '@vanilla-extract/css'; import { vars } from '@/styles/theme.css'; -import { BodyMedium, Caption } from '@/styles/font.css'; +import { Label, LabelSmall } from '@/styles/font.css'; export const container = style({ maxWidth: '185px', @@ -70,7 +70,7 @@ export const label = style({ }); export const labelText = style([ - Caption, + LabelSmall, { padding: '0.4rem 1rem', height: '2.6rem', @@ -94,14 +94,14 @@ export const item = style({ }); export const rank = style([ - BodyMedium, + Label, { width: '1.2rem', }, ]); export const itemTitle = style([ - BodyMedium, + Label, { overflow: 'hidden', textOverflow: 'ellipsis', diff --git a/src/app/user/[userId]/_components/Content.css.ts b/src/app/user/[userId]/_components/Content.css.ts index 073d413d..355707f9 100644 --- a/src/app/user/[userId]/_components/Content.css.ts +++ b/src/app/user/[userId]/_components/Content.css.ts @@ -1,6 +1,6 @@ import { style } from '@vanilla-extract/css'; -import { BodyLarge } from '@/styles/font.css'; +import { BodyBold } from '@/styles/font.css'; import { vars } from '@/styles/theme.css'; export const container = style({ @@ -36,7 +36,7 @@ export const link = style({ }); export const button = style([ - BodyLarge, + BodyBold, { height: '100%', diff --git a/src/app/user/[userId]/_components/OptionToggleButton.css.ts b/src/app/user/[userId]/_components/OptionToggleButton.css.ts index 1375a478..1c84a120 100644 --- a/src/app/user/[userId]/_components/OptionToggleButton.css.ts +++ b/src/app/user/[userId]/_components/OptionToggleButton.css.ts @@ -1,7 +1,7 @@ import { style } from '@vanilla-extract/css'; import { vars } from '@/styles/theme.css'; -import { BodyMedium } from '@/styles/font.css'; +import { Label } from '@/styles/font.css'; export const labelOption = style({ width: '50%', @@ -28,7 +28,7 @@ export const optionMenu = style({ }); export const optionTop = style([ - BodyMedium, + Label, { paddingTop: '1.6rem', paddingLeft: '1.6rem', @@ -49,7 +49,7 @@ export const optionTop = style([ ]); export const optionBottom = style([ - BodyMedium, + Label, { paddingTop: '0.6rem', paddingLeft: '1.6rem', diff --git a/src/app/user/[userId]/_components/Profile.css.ts b/src/app/user/[userId]/_components/Profile.css.ts index 61d47386..82f71e36 100644 --- a/src/app/user/[userId]/_components/Profile.css.ts +++ b/src/app/user/[userId]/_components/Profile.css.ts @@ -1,6 +1,6 @@ import { style, createVar } from '@vanilla-extract/css'; -import { BodyLarge, BodySmall } from '@/styles/font.css'; +import { BodyBold, LabelSmall } from '@/styles/font.css'; import { vars } from '@/styles/theme.css'; export const imageUrl = createVar(); @@ -99,7 +99,7 @@ export const user = style({ }); export const nickName = style([ - BodyLarge, + BodyBold, { color: vars.color.black, @@ -117,7 +117,7 @@ export const follow = style({ }); export const text = style([ - BodySmall, + LabelSmall, { display: 'flex', alignItems: 'center', @@ -130,7 +130,7 @@ export const text = style([ ]); export const description = style([ - BodySmall, + LabelSmall, { padding: '0.3rem 0.8rem', display: 'flex', diff --git a/src/styles/font.css.ts b/src/styles/font.css.ts index c8ce28ea..f2e404d8 100644 --- a/src/styles/font.css.ts +++ b/src/styles/font.css.ts @@ -1,6 +1,6 @@ import { style } from '@vanilla-extract/css'; -export const header = style({ +export const Header = style({ fontSize: '2rem', fontWeight: '700', letterSpacing: '-0.6rem', @@ -30,95 +30,9 @@ export const Label = style({ letterSpacing: '-0.42rem', }); -/** - * 아래부터는 피그마 확인하여 정리함 - TODO 최종 디자인시스템 확인하면, 위의 변수와 아래 변수 통합하기 - */ - -// 타이틀 -export const TitleLarge = style({ - fontSize: '2.2rem', - fontWeight: '600', - lineHeight: '2.8rem', - letterSpacing: '0.088rem', -}); - -export const TitleMedium = style({ - fontSize: '2rem', - fontWeight: '600', - lineHeight: '2.4rem', - letterSpacing: '0.16rem', -}); - -export const TitleRegular = style({ - fontSize: '1.8rem', - fontWeight: '600', - lineHeight: '2.4rem', - letterSpacing: '0.14rem', -}); - -export const TitleSmall = style({ - fontSize: '1.4rem', - fontWeight: '600', - lineHeight: '2rem', - letterSpacing: '0.12rem', -}); - -// 바디 -export const BodyLarge = style({ - fontSize: '1.6rem', - fontWeight: '400', - lineHeight: '2.4rem', - letterSpacing: ' 0.026rem', -}); - -export const BodyRegular = style({ - fontSize: '1.5rem', - fontWeight: '500', - lineHeight: '2rem', - letterSpacing: '0.2rem', -}); - -export const BodyMedium = style({ - fontSize: '1.4rem', - fontWeight: '400', - lineHeight: '2rem', - letterSpacing: '0.08rem', -}); - -export const BodySmall = style({ - fontSize: '1.2rem', - fontWeight: '400', - lineHeight: '1.6rem', - letterSpacing: '0.048rem', -}); - -// 라벨 -export const LabelLarge = style({ - fontSize: '1.6rem', - fontWeight: '600', - lineHeight: '2.4rem', - letterSpacing: '0.2rem', -}); - -export const LabelMedium = style({ - fontSize: '1.4rem', - fontWeight: '500', - lineHeight: '2.4rem', - letterSpacing: '0.4rem', -}); - export const LabelSmall = style({ fontSize: '1.2rem', - fontWeight: '500', + fontWeight: '300', lineHeight: '1.6rem', letterSpacing: '0.6rem', }); - -// 캡션 -export const Caption = style({ - fontSize: '1.1rem', - fontWeight: '400', - lineHeight: '1.6rem', - lineHeightStep: '0.055rem', -}); From 6b55f9ecd8f402d1032d7cf08de233f4abd7aeaa Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Thu, 5 Sep 2024 14:11:22 +0900 Subject: [PATCH 26/86] =?UTF-8?q?Feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=EB=AA=A8=EB=8B=AC=EC=97=90=20=EB=A1=9C=EC=BB=AC=EC=9A=A9=20?= =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/login/LoginModal.css.ts | 16 ++++++++++--- src/components/login/LoginModal.tsx | 31 ++++++++++++++++++++++++++ 2 files changed, 44 insertions(+), 3 deletions(-) diff --git a/src/components/login/LoginModal.css.ts b/src/components/login/LoginModal.css.ts index 94b686bb..93cfe4d6 100644 --- a/src/components/login/LoginModal.css.ts +++ b/src/components/login/LoginModal.css.ts @@ -46,12 +46,22 @@ export const title = style([ ]); export const buttonContainer = style({ - padding: '2.4rem 2.8rem 0 2.8rem', + width: '100%', + paddingTop: '2.4rem', display: 'flex', - justifyContent: 'space-between', + justifyContent: 'center', alignItems: 'center', - gap: '1.8rem', + gap: '1rem', borderTop: `1px solid ${vars.color.gray5}`, }); + +export const buttonForLocal = style({ + height: '4.7rem', + padding: '0.2rem', + + border: `1px solid ${vars.color.gray5}`, + background: vars.color.lightblue, + borderRadius: '1.2rem', +}); diff --git a/src/components/login/LoginModal.tsx b/src/components/login/LoginModal.tsx index 1eeac0b9..933dd62a 100644 --- a/src/components/login/LoginModal.tsx +++ b/src/components/login/LoginModal.tsx @@ -9,6 +9,11 @@ import KakaoLoginIcon from '/public/icons/kakao_login_narrow.svg'; import { commonLocale } from '@/components/locale'; import { useLanguage } from '@/store/useLanguage'; +import axiosInstance from '@/lib/axios/axiosInstance'; +import { UserOnLoginType } from '@/lib/types/user'; +import { useUser } from '@/store/useUser'; +import { setCookie } from '@/lib/utils/cookie'; + const oauthType = { kakao: 'kakao', }; @@ -19,6 +24,27 @@ interface LoginModalProps { export default function LoginModal({ id }: LoginModalProps) { const { language } = useLanguage(); + const { updateUser } = useUser(); + + const handleLoginLocal = async () => { + try { + const res = await axiosInstance.post('/login/local', { + account: process.env.NEXT_PUBLIC_LOCAL_LOGIN_ID, + password: process.env.NEXT_PUBLIC_LOCAL_LOGIN_PASSWARD, + }); + + const { id, accessToken, refreshToken } = res.data; + updateUser({ id }); + setCookie('accessToken', accessToken, 'AT'); + setCookie('refreshToken', refreshToken, 'RT'); + + location.reload(); + } catch (error) { + alert(error); + console.log('Request canceled:', error); + } + }; + return (
@@ -41,6 +67,11 @@ export default function LoginModal({ id }: LoginModalProps) { + {process.env.NODE_ENV === 'development' && ( + + )}
); From 9ea85a0d0e3e8f061d7b9fae34ea2dd0f5c90382 Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Thu, 5 Sep 2024 14:17:29 +0900 Subject: [PATCH 27/86] =?UTF-8?q?Feat:=20=EA=B0=9C=EB=B0=9C=EC=9A=A9=20?= =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EB=B2=84=ED=8A=BC=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/login/LoginModal.tsx | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/src/components/login/LoginModal.tsx b/src/components/login/LoginModal.tsx index 933dd62a..7357cfa9 100644 --- a/src/components/login/LoginModal.tsx +++ b/src/components/login/LoginModal.tsx @@ -22,8 +22,8 @@ interface LoginModalProps { id: string; } -export default function LoginModal({ id }: LoginModalProps) { - const { language } = useLanguage(); +/** FE 개발을 위한 로컬용 로그인 컴포넌트 입니다. */ +function LoginButtonForLocal() { const { updateUser } = useUser(); const handleLoginLocal = async () => { @@ -45,6 +45,16 @@ export default function LoginModal({ id }: LoginModalProps) { } }; + return ( + + ); +} + +export default function LoginModal({ id }: LoginModalProps) { + const { language } = useLanguage(); + return (
@@ -67,11 +77,7 @@ export default function LoginModal({ id }: LoginModalProps) { - {process.env.NODE_ENV === 'development' && ( - - )} + {process.env.NODE_ENV === 'development' && }
); From edd77ed2a6e060b87d8a971f215ae25de5199a67 Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Thu, 5 Sep 2024 14:30:53 +0900 Subject: [PATCH 28/86] =?UTF-8?q?Feat:=20=EB=A1=9C=EC=BB=AC=EC=9A=A9=20?= =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EA=B3=84=EC=A0=95=EC=97=90?= =?UTF-8?q?=EC=84=9C=20=EB=A1=9C=EA=B7=B8=EC=95=84=EC=9B=83=20=EC=8B=9C,?= =?UTF-8?q?=20=EC=BF=A0=ED=82=A4=20=EC=A0=9C=EA=B1=B0=20=EB=B0=8F=20?= =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=95=84=EC=9B=83=20=EC=83=81=ED=83=9C?= =?UTF-8?q?=EB=90=98=EB=8F=84=EB=A1=9D=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/account/_components/LogoutModal.tsx | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/src/app/account/_components/LogoutModal.tsx b/src/app/account/_components/LogoutModal.tsx index 117a7a12..c471b5d8 100644 --- a/src/app/account/_components/LogoutModal.tsx +++ b/src/app/account/_components/LogoutModal.tsx @@ -30,17 +30,26 @@ export default function LogoutModal({ handleSetOff }: LogOutModalProps) { const router = useRouter(); const { logoutUser } = useUser(); + const logoutUserInfo = () => { + logoutUser(); + removeCookie('accessToken'); + removeCookie('refreshToken'); + + toasting({ type: 'success', txt: toastMessage[language].loggedOut }); + router.push('/'); + }; + const handleLogout = async () => { try { + if (process.env.NODE_ENV === 'development') { + logoutUserInfo(); + return; + } + const result = await axiosInstance.patch(`/auth/${oauthType.kakao}`); if (result.status === 204) { - logoutUser(); - removeCookie('accessToken'); // TODO removeCookieAll - removeCookie('refreshToken'); - - toasting({ type: 'success', txt: toastMessage[language].loggedOut }); - router.push('/'); + logoutUserInfo(); } } catch (error) { if (error instanceof AxiosError) { From bbc504c9a7a935f4dc746dfb30cbccaa7f7c3924 Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Thu, 5 Sep 2024 14:32:37 +0900 Subject: [PATCH 29/86] =?UTF-8?q?Remove:=20=EA=B8=B0=EC=A1=B4=20=EB=A1=9C?= =?UTF-8?q?=EA=B7=B8=EC=9D=B8=EC=9D=84=20=EC=9C=84=ED=95=B4=20=EB=A7=8C?= =?UTF-8?q?=EB=93=A0=20=EC=9E=84=EC=8B=9C=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/login/page.tsx | 44 ------------------------------------------ 1 file changed, 44 deletions(-) delete mode 100644 src/app/login/page.tsx diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx deleted file mode 100644 index 51b389bc..00000000 --- a/src/app/login/page.tsx +++ /dev/null @@ -1,44 +0,0 @@ -/** - TODO - * 로그인 모달이 모든 곳에 연동될 때까지 로그인을 하기위한 임시페이지 - * 추후 페이지 삭제 예정 - */ - -'use client'; - -import Modal from '@/components/Modal/Modal'; -import LoginModal from '@/components/login/LoginModal'; -import useBooleanOutput from '@/hooks/useBooleanOutput'; - -export default function LoginPage() { - const { isOn, handleSetOff, handleSetOn } = useBooleanOutput(); - - return ( - <> -
- -
- {isOn && ( - - - - )} - - ); -} From dde06db490ec906fdc5650ce1431572a731ec531 Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Fri, 6 Sep 2024 11:57:59 +0900 Subject: [PATCH 30/86] =?UTF-8?q?Refactor:=20=ED=95=98=EB=8B=A8=20?= =?UTF-8?q?=EB=84=A4=EB=B8=8C=EB=B0=94=20=EB=A1=9C=EC=A7=81=20=EB=A6=AC?= =?UTF-8?q?=ED=8C=A9=ED=86=A0=EB=A7=81=20-=20=EC=88=A8=EA=B8=B0=EA=B3=A0?= =?UTF-8?q?=20=EC=8B=B6=EC=9D=80=20=EA=B2=BD=EB=A1=9C=20=EB=8C=80=EC=8B=A0?= =?UTF-8?q?=20=EB=84=A4=EB=B8=8C=EB=B0=94=EA=B0=80=20=EB=B3=B4=EC=97=AC?= =?UTF-8?q?=EC=A7=80=EB=8A=94=20path=EB=A1=9C=20=EB=B3=80=EC=88=98=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=20-=20=EB=84=A4=EB=B8=8C=EB=B0=94=20?= =?UTF-8?q?=ED=83=AD=20=ED=81=B4=EB=A6=AD=EC=8B=9C,=20=ED=98=84=EC=9E=AC?= =?UTF-8?q?=20=EC=9C=84=EC=B9=98=EB=A5=BC=20=ED=91=9C=EC=8B=9C=ED=95=98?= =?UTF-8?q?=EA=B8=B0=20=EC=9C=84=ED=95=9C=20=EB=B6=84=EA=B8=B0=EC=B2=98?= =?UTF-8?q?=EB=A6=AC=20switch=EB=AC=B8=EC=9C=BC=EB=A1=9C=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20-=20=EB=84=A4=EB=B8=8C=EB=B0=94=EC=97=90=EC=84=9C?= =?UTF-8?q?=20=EC=BD=9C=EB=A0=89=EC=85=98=20=ED=83=AD=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/BottomNav/BottomNav.tsx | 62 ++++++++++---------------- 1 file changed, 24 insertions(+), 38 deletions(-) diff --git a/src/components/BottomNav/BottomNav.tsx b/src/components/BottomNav/BottomNav.tsx index e8ede79e..1064b708 100644 --- a/src/components/BottomNav/BottomNav.tsx +++ b/src/components/BottomNav/BottomNav.tsx @@ -1,83 +1,69 @@ 'use client'; -import { usePathname } from 'next/navigation'; -import { useRouter } from 'next/navigation'; +import { usePathname, useRouter } from 'next/navigation'; import ExploreIcon from '/public/icons/explore.svg'; import MyFeedIcon from '/public/icons/my_feed.svg'; -import CollectionIcon from '/public/icons/collection.svg'; import useMoveToPage from '@/hooks/useMoveToPage'; import useBooleanOutput from '@/hooks/useBooleanOutput'; import { useUser } from '@/store/useUser'; -import toasting from '@/lib/utils/toasting'; -import toastMessage from '@/lib/constants/toastMessage'; import { vars } from '@/styles/__theme.css'; import * as styles from './BottomNav.css'; -import Modal from '../Modal/Modal'; -import LoginModal from '../login/LoginModal'; +import Modal from '@/components/Modal/Modal'; +import LoginModal from '@/components/login/LoginModal'; export default function BottomNav() { const { user } = useUser(); const router = useRouter(); - const userId = user.id; const pathname = usePathname() as string; const { onClickMoveToPage } = useMoveToPage(); const { isOn, handleSetOff, handleSetOn } = useBooleanOutput(); - // 숨기고 싶은 경로 패턴 배열 - const hiddenPaths = [ - '/list', - '/intro', - '/start-listy', - '/account', - '/followings', - '/followers', - '/notification', - '/withdrawn-account', - ]; - const isHidden = hiddenPaths.some((path) => pathname.includes(path)); + const userId = user.id; + + const visiblePaths = ['/', '/mylist', 'collection']; + const isVisible = visiblePaths.some((path) => pathname.endsWith(path)); - if (isHidden) return; + if (!isVisible) { + return <>; + } - //파란색 선택 표시를 위한 분기처리 + // 네브바 탭 현재위치를 표시하기 위한 분기처리 const selectedItem = (() => { - if (pathname === '/' || pathname.includes('/search')) { - return 'explore'; - } else if (pathname === `/user/${userId}/mylist` || pathname === `/user/${userId}/collabolist`) { - return 'my-feed'; - } else if (pathname.startsWith('/collection')) { - return 'collection'; - } else { - return null; + switch (pathname) { + case '/': + return 'home'; + case `/user/${userId}/mylist`: + return 'my-feed'; + default: + return null; } })(); - // 로그인한 사용자 검증 - const handleMoveToPageOnLogin = (path: string) => () => { + // 로그인한 사용자 검증 후, 마이피드로 이동 + const handleMoveToPageOnLogin = () => { if (!userId) { handleSetOn(); return; } - path === 'my-feed' ? router.push(`/user/${userId}/mylist`) : router.push('/collection'); + router.push(`/user/${userId}/mylist`); }; return ( <> {isOn && ( From 8c8c57a3abf05ec31e1f412bfe26003b30c0e68d Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Fri, 6 Sep 2024 12:08:08 +0900 Subject: [PATCH 31/86] =?UTF-8?q?Fix:=20=EA=B8=B0=EC=A1=B4=20explore=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=EC=9D=84=20home=20=EB=B2=84=ED=8A=BC?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD=20=EB=B0=8F=20next/link?= =?UTF-8?q?=20=ED=83=9C=EA=B7=B8=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/BottomNav/BottomNav.tsx | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/components/BottomNav/BottomNav.tsx b/src/components/BottomNav/BottomNav.tsx index 1064b708..0ed60be8 100644 --- a/src/components/BottomNav/BottomNav.tsx +++ b/src/components/BottomNav/BottomNav.tsx @@ -1,13 +1,12 @@ 'use client'; import { usePathname, useRouter } from 'next/navigation'; +import Link from 'next/link'; -import ExploreIcon from '/public/icons/explore.svg'; +import HomeIcon from '/public/icons/explore.svg'; import MyFeedIcon from '/public/icons/my_feed.svg'; -import useMoveToPage from '@/hooks/useMoveToPage'; import useBooleanOutput from '@/hooks/useBooleanOutput'; - import { useUser } from '@/store/useUser'; import { vars } from '@/styles/__theme.css'; @@ -20,7 +19,6 @@ export default function BottomNav() { const { user } = useUser(); const router = useRouter(); const pathname = usePathname() as string; - const { onClickMoveToPage } = useMoveToPage(); const { isOn, handleSetOff, handleSetOn } = useBooleanOutput(); const userId = user.id; @@ -57,15 +55,15 @@ export default function BottomNav() { <> + {isOn && ( From 8dba1a4c681fe7abe0890f1fe20465552ed2d82d Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Fri, 6 Sep 2024 13:05:58 +0900 Subject: [PATCH 32/86] =?UTF-8?q?Feat:=20=EB=84=A4=EB=B8=8C=20=ED=83=AD=20?= =?UTF-8?q?=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20?= =?UTF-8?q?=ED=95=98=EB=93=9C=EC=BD=94=EB=94=A9=20=EB=90=9C=20path?= =?UTF-8?q?=EB=A5=BC=20=EA=B0=9D=EC=B2=B4=EB=A1=9C=20=EB=A6=AC=ED=8C=A9?= =?UTF-8?q?=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/icons/new/bottom_nav_add.svg | 3 ++ public/icons/new/bottom_nav_feed.svg | 3 ++ public/icons/new/bottom_nav_home.svg | 3 ++ src/components/BottomNav/BottomNav.tsx | 46 ++++++++++++++++++-------- 4 files changed, 41 insertions(+), 14 deletions(-) create mode 100644 public/icons/new/bottom_nav_add.svg create mode 100644 public/icons/new/bottom_nav_feed.svg create mode 100644 public/icons/new/bottom_nav_home.svg diff --git a/public/icons/new/bottom_nav_add.svg b/public/icons/new/bottom_nav_add.svg new file mode 100644 index 00000000..b82ccac8 --- /dev/null +++ b/public/icons/new/bottom_nav_add.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/new/bottom_nav_feed.svg b/public/icons/new/bottom_nav_feed.svg new file mode 100644 index 00000000..8e957aaf --- /dev/null +++ b/public/icons/new/bottom_nav_feed.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/new/bottom_nav_home.svg b/public/icons/new/bottom_nav_home.svg new file mode 100644 index 00000000..76e13233 --- /dev/null +++ b/public/icons/new/bottom_nav_home.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/BottomNav/BottomNav.tsx b/src/components/BottomNav/BottomNav.tsx index 0ed60be8..4110de85 100644 --- a/src/components/BottomNav/BottomNav.tsx +++ b/src/components/BottomNav/BottomNav.tsx @@ -3,8 +3,9 @@ import { usePathname, useRouter } from 'next/navigation'; import Link from 'next/link'; -import HomeIcon from '/public/icons/explore.svg'; -import MyFeedIcon from '/public/icons/my_feed.svg'; +import HomeIcon from '/public/icons/new/bottom_nav_home.svg'; +import AddIcon from '/public/icons/new/bottom_nav_add.svg'; +import MyFeedIcon from '/public/icons/new/bottom_nav_feed.svg'; import useBooleanOutput from '@/hooks/useBooleanOutput'; import { useUser } from '@/store/useUser'; @@ -15,16 +16,30 @@ import * as styles from './BottomNav.css'; import Modal from '@/components/Modal/Modal'; import LoginModal from '@/components/login/LoginModal'; +type BottomNavTapPathType = 'home' | 'feed' | 'list'; + +const home = 'home'; +const feed = 'my-feed'; +const list = 'create-list'; + +const bottomNavTapPath: Record = { + home, + feed, + list, +}; + +// TODO 하드코딩된 path를 줄이는 방법이 없을까? + export default function BottomNav() { const { user } = useUser(); const router = useRouter(); - const pathname = usePathname() as string; + const pathname = usePathname(); const { isOn, handleSetOff, handleSetOn } = useBooleanOutput(); const userId = user.id; const visiblePaths = ['/', '/mylist', 'collection']; - const isVisible = visiblePaths.some((path) => pathname.endsWith(path)); + const isVisible = visiblePaths.some((path) => pathname?.endsWith(path)); if (!isVisible) { return <>; @@ -34,34 +49,37 @@ export default function BottomNav() { const selectedItem = (() => { switch (pathname) { case '/': - return 'home'; + return bottomNavTapPath.home; case `/user/${userId}/mylist`: - return 'my-feed'; + return bottomNavTapPath.feed; default: return null; } })(); // 로그인한 사용자 검증 후, 마이피드로 이동 - const handleMoveToPageOnLogin = () => { + const handleMoveToPageOnLogin = (path: string) => () => { if (!userId) { handleSetOn(); return; } - router.push(`/user/${userId}/mylist`); + path === bottomNavTapPath.feed ? router.push(`/user/${userId}/mylist`) : router.push('/list/create'); }; return ( <>
{isOn && ( From 1b3fb7cd445e863f8e249dd7c1bd9fa8ad2f2eaf Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Fri, 6 Sep 2024 20:56:17 +0900 Subject: [PATCH 33/86] =?UTF-8?q?Design:=20=ED=95=98=EB=8B=A8=20=EB=84=A4?= =?UTF-8?q?=EB=B8=8C=EB=B0=94=20UI=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/BottomNav/BottomNav.css.ts | 48 +++++++++++++++++++---- src/components/BottomNav/BottomNav.tsx | 36 +++++++++++------ src/styles/theme.css.ts | 2 + 3 files changed, 67 insertions(+), 19 deletions(-) diff --git a/src/components/BottomNav/BottomNav.css.ts b/src/components/BottomNav/BottomNav.css.ts index 3b1c2dc0..ae6c3043 100644 --- a/src/components/BottomNav/BottomNav.css.ts +++ b/src/components/BottomNav/BottomNav.css.ts @@ -1,25 +1,57 @@ -import { style } from '@vanilla-extract/css'; -import { vars } from '@/styles/__theme.css'; +import { style, styleVariants } from '@vanilla-extract/css'; +import { vars } from '@/styles/theme.css'; -export const navDiv = style({ +export const bottomTapContainer = style({ width: '100%', - height: 70, + height: '8.4rem', position: 'fixed', bottom: 0, display: 'flex', - backgroundColor: vars.color.white, - borderTop: `1px solid ${vars.color.gray5}`, + backgroundColor: vars.color.bggray, }); -export const buttonDiv = style({ +export const bottomTap = style({ flexGrow: 1, + paddingTop: '0.7rem', + paddingBottom: '2.1rem', display: 'flex', - justifyContent: 'center', + flexDirection: 'column', + gap: '0.5rem', + + justifyContent: 'end', alignItems: 'center', cursor: 'pointer', }); + +export const bottomTapText = styleVariants({ + default: { + fontSize: '1.2rem', + color: vars.color.gray, + }, + variant: { + fontSize: '1.2rem', + color: vars.color.blue, + }, +}); + +export const addButtonTap = style({ + paddingTop: '0.7rem', + paddingBottom: '2.1rem', +}); + +export const addButton = style({ + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + + width: '5.3rem', + height: '5.3rem', + + borderRadius: '100%', + background: 'linear-gradient(44deg, #428AF7 0%, #6CA5F7 100%)', +}); diff --git a/src/components/BottomNav/BottomNav.tsx b/src/components/BottomNav/BottomNav.tsx index 4110de85..1411dfb0 100644 --- a/src/components/BottomNav/BottomNav.tsx +++ b/src/components/BottomNav/BottomNav.tsx @@ -10,7 +10,7 @@ import MyFeedIcon from '/public/icons/new/bottom_nav_feed.svg'; import useBooleanOutput from '@/hooks/useBooleanOutput'; import { useUser } from '@/store/useUser'; -import { vars } from '@/styles/__theme.css'; +import { vars } from '@/styles/theme.css'; import * as styles from './BottomNav.css'; import Modal from '@/components/Modal/Modal'; @@ -28,8 +28,6 @@ const bottomNavTapPath: Record = { list, }; -// TODO 하드코딩된 path를 줄이는 방법이 없을까? - export default function BottomNav() { const { user } = useUser(); const router = useRouter(); @@ -69,15 +67,31 @@ export default function BottomNav() { return ( <> diff --git a/src/styles/theme.css.ts b/src/styles/theme.css.ts index 6221b246..16da28c0 100644 --- a/src/styles/theme.css.ts +++ b/src/styles/theme.css.ts @@ -13,6 +13,7 @@ export const vars = createThemeContract({ bluegray10: 'color-bluegray10', lightgray: 'color-lightgray', gray: 'color-gray', + bggray: 'color-bggray', black: 'color-black', red: 'color-red', bgblue: 'color-bg-light-blue', @@ -39,6 +40,7 @@ createGlobalTheme(':root', vars, { bluegray10: '#637587', lightgray: '#B6BBBF', gray: '#7A7B7D', + bggray: '#F5F6FA', black: '#323A43', red: '#FF0000', bgblue: '#F5F6FA', From e7b73d84cc9b40d3f56be1767b9db7fc3c5a1999 Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Fri, 6 Sep 2024 21:20:49 +0900 Subject: [PATCH 34/86] =?UTF-8?q?Design:=20=ED=95=98=EB=8B=A8=20=EB=84=A4?= =?UTF-8?q?=EB=B8=8C=20=ED=83=AD=20=ED=8C=A8=EB=94=A9=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/BottomNav/BottomNav.css.ts | 14 +++++++++++++- src/components/BottomNav/BottomNav.tsx | 4 ++-- 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/src/components/BottomNav/BottomNav.css.ts b/src/components/BottomNav/BottomNav.css.ts index ae6c3043..aa97cf0c 100644 --- a/src/components/BottomNav/BottomNav.css.ts +++ b/src/components/BottomNav/BottomNav.css.ts @@ -13,7 +13,9 @@ export const bottomTapContainer = style({ backgroundColor: vars.color.bggray, }); -export const bottomTap = style({ +const bottomTap = style({ + width: '40%', + flexGrow: 1, paddingTop: '0.7rem', paddingBottom: '2.1rem', @@ -28,6 +30,11 @@ export const bottomTap = style({ cursor: 'pointer', }); +export const bottomTapVariant = styleVariants({ + left: [bottomTap, { paddingLeft: '1.5rem' }], + right: [bottomTap, { paddingRight: '1.5rem' }], +}); + export const bottomTapText = styleVariants({ default: { fontSize: '1.2rem', @@ -40,8 +47,13 @@ export const bottomTapText = styleVariants({ }); export const addButtonTap = style({ + width: '20%', + paddingTop: '0.7rem', paddingBottom: '2.1rem', + + display: 'flex', + justifyContent: 'center', }); export const addButton = style({ diff --git a/src/components/BottomNav/BottomNav.tsx b/src/components/BottomNav/BottomNav.tsx index 1411dfb0..6173b701 100644 --- a/src/components/BottomNav/BottomNav.tsx +++ b/src/components/BottomNav/BottomNav.tsx @@ -68,7 +68,7 @@ export default function BottomNav() { <>
From 8e00c45daa48689366c4f18c723a31bebf13fac9 Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Mon, 9 Sep 2024 10:00:46 +0900 Subject: [PATCH 36/86] =?UTF-8?q?Design:=20=ED=99=88,=20=ED=94=BC=EB=93=9C?= =?UTF-8?q?=20=EC=95=84=EC=9D=B4=EC=BD=98=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/icons/new/bottom_nav_feed.svg | 4 ++-- public/icons/new/bottom_nav_home.svg | 2 +- src/components/BottomNav/BottomNav.css.ts | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/public/icons/new/bottom_nav_feed.svg b/public/icons/new/bottom_nav_feed.svg index 8e957aaf..f5b9f0e1 100644 --- a/public/icons/new/bottom_nav_feed.svg +++ b/public/icons/new/bottom_nav_feed.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/icons/new/bottom_nav_home.svg b/public/icons/new/bottom_nav_home.svg index 76e13233..e642a16c 100644 --- a/public/icons/new/bottom_nav_home.svg +++ b/public/icons/new/bottom_nav_home.svg @@ -1,3 +1,3 @@ - + diff --git a/src/components/BottomNav/BottomNav.css.ts b/src/components/BottomNav/BottomNav.css.ts index aa97cf0c..17d96eca 100644 --- a/src/components/BottomNav/BottomNav.css.ts +++ b/src/components/BottomNav/BottomNav.css.ts @@ -18,11 +18,11 @@ const bottomTap = style({ flexGrow: 1, paddingTop: '0.7rem', - paddingBottom: '2.1rem', + paddingBottom: '3.3rem', display: 'flex', flexDirection: 'column', - gap: '0.5rem', + gap: '0.4rem', justifyContent: 'end', alignItems: 'center', From ae92eebf6978213f53988e217b6cc2eb33d566fc Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Mon, 9 Sep 2024 11:59:12 +0900 Subject: [PATCH 37/86] =?UTF-8?q?Design:=20=EB=A7=88=EC=9D=B4=ED=94=BC?= =?UTF-8?q?=EB=93=9C=20=ED=8E=98=EC=9D=B4=EC=A7=80=20Profile,=20Content,?= =?UTF-8?q?=20FollowButton=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20Ver3.0?= =?UTF-8?q?=20UI=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/icons/new/bookmark.svg | 3 + .../user/[userId]/_components/Content.css.ts | 61 +++------- src/app/user/[userId]/_components/Content.tsx | 20 ++-- .../[userId]/_components/FollowButton.css.ts | 17 +-- .../[userId]/_components/FollowButton.tsx | 2 +- .../user/[userId]/_components/Profile.css.ts | 50 ++------ src/app/user/[userId]/_components/Profile.tsx | 86 +++++++------- .../[userId]/_components/__Content.css.ts | 85 ++++++++++++++ .../user/[userId]/_components/__Content.tsx | 111 ++++++++++++++++++ .../user/[userId]/mylist/MylistPage.css.ts | 8 ++ src/app/user/[userId]/mylist/page.tsx | 4 +- src/styles/font.css.ts | 8 +- 12 files changed, 307 insertions(+), 148 deletions(-) create mode 100644 public/icons/new/bookmark.svg create mode 100644 src/app/user/[userId]/_components/__Content.css.ts create mode 100644 src/app/user/[userId]/_components/__Content.tsx create mode 100644 src/app/user/[userId]/mylist/MylistPage.css.ts diff --git a/public/icons/new/bookmark.svg b/public/icons/new/bookmark.svg new file mode 100644 index 00000000..f8032f22 --- /dev/null +++ b/public/icons/new/bookmark.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/app/user/[userId]/_components/Content.css.ts b/src/app/user/[userId]/_components/Content.css.ts index 355707f9..cfa55b21 100644 --- a/src/app/user/[userId]/_components/Content.css.ts +++ b/src/app/user/[userId]/_components/Content.css.ts @@ -1,64 +1,41 @@ import { style } from '@vanilla-extract/css'; -import { BodyBold } from '@/styles/font.css'; +import { Subtitle, Label } from '@/styles/font.css'; import { vars } from '@/styles/theme.css'; export const container = style({ - width: '100%', - marginTop: '37.6rem', - - position: 'absolute', - top: 0, - backgroundColor: vars.color.bgblue, - borderTopLeftRadius: '2.5rem', - borderTopRightRadius: '2.5rem', }); -export const options = style({ - height: '6.4rem', - display: 'flex', - borderBottom: '1px solid rgba(0, 0, 0, 0.10)', - borderTopLeftRadius: '2.5rem', - borderTopRightRadius: '2.5rem', -}); +export const contentInfo = style({ + padding: '1.1rem 1.6rem 1.2rem 1.9rem', -export const link = style({ - padding: '0 1.5rem', display: 'flex', - flexDirection: 'column', + justifyContent: 'space-between', alignItems: 'center', - justifyContent: 'center', - - flexGrow: '1', - textDecoration: 'none', - color: vars.color.black, }); -export const button = style([ - BodyBold, +export const infoTitle = style([ + Subtitle, { - height: '100%', + color: vars.color.deepblue10, + }, +]); + +export const collectionButton = style([ + Label, + { + padding: '0.9rem 1.2rem', display: 'flex', - flexDirection: 'column', - alignItems: 'center', justifyContent: 'center', + alignItems: 'center', + gap: ' 0.7rem', - backgroundColor: vars.color.bgblue, - }, -]); - -export const line = style({ - width: '60%', - height: '5px', - borderRadius: '50px', -}); + color: vars.color.blue, -export const currentLine = style([ - line, - { - backgroundColor: vars.color.blue, + borderRadius: '2rem', + backgroundColor: vars.color.white, }, ]); diff --git a/src/app/user/[userId]/_components/Content.tsx b/src/app/user/[userId]/_components/Content.tsx index 5c41bf05..3b048361 100644 --- a/src/app/user/[userId]/_components/Content.tsx +++ b/src/app/user/[userId]/_components/Content.tsx @@ -7,6 +7,8 @@ import { MasonryGrid } from '@egjs/react-grid'; import { Skeleton } from '@mui/material'; import * as styles from './Content.css'; +import { vars } from '@/styles/theme.css'; +import BookmarkIcon from '/public/icons/new/bookmark.svg'; import Card from './Card'; import Categories from './Categories'; @@ -72,16 +74,18 @@ export default function Content({ userId, type }: ContentProps) { setSelectedCategory(category); }; + // TODO 사용자 정보 로딩중일때 스켈레톤 UI + if (!userData) { + return <>; + } + return (
-
- - {userLocale[language].myList} -
- - - -
+
+

{`${userData?.nickname}님의 리스트`}

+ + + 콜렉션
diff --git a/src/app/user/[userId]/_components/FollowButton.css.ts b/src/app/user/[userId]/_components/FollowButton.css.ts index 73210e27..fdf4bcb4 100644 --- a/src/app/user/[userId]/_components/FollowButton.css.ts +++ b/src/app/user/[userId]/_components/FollowButton.css.ts @@ -1,12 +1,13 @@ import { style, styleVariants } from '@vanilla-extract/css'; -import { vars } from '@/styles/__theme.css'; +import { vars } from '@/styles/theme.css'; export const button = style({ - padding: '0.8rem 1.2rem', - borderRadius: '5rem', - fontSize: '1.1rem', + padding: '0.4rem 0.6rem', + borderRadius: '2rem', + + fontSize: '1.2rem', fontWeight: '400', - lineHeight: '1.6rem', + letterSpacing: '-0.036rem', }); export const variant = styleVariants({ @@ -17,11 +18,11 @@ export const variant = styleVariants({ color: vars.color.white, }, ], - gray: [ + white: [ button, { - backgroundColor: vars.color.gray7, - color: vars.color.white, + backgroundColor: vars.color.white, + color: vars.color.blue, }, ], }); diff --git a/src/app/user/[userId]/_components/FollowButton.tsx b/src/app/user/[userId]/_components/FollowButton.tsx index 6ba04640..aff3a010 100644 --- a/src/app/user/[userId]/_components/FollowButton.tsx +++ b/src/app/user/[userId]/_components/FollowButton.tsx @@ -80,7 +80,7 @@ export default function FollowButton({ isFollowed, userId }: FollowButtonProps) return ( <> +
+ +
+ + {!isLoading && !lists.length && ( +
+ +
+ )} +
+ {isLoading ? ( +
+ {new Array(4).fill(0).map((_, index) => ( + + ))} +
+ ) : ( + + {lists.map((list) => ( + + ))} + + )} +
+
+
+ ); +} diff --git a/src/app/user/[userId]/mylist/MylistPage.css.ts b/src/app/user/[userId]/mylist/MylistPage.css.ts new file mode 100644 index 00000000..c9a48890 --- /dev/null +++ b/src/app/user/[userId]/mylist/MylistPage.css.ts @@ -0,0 +1,8 @@ +import { style } from '@vanilla-extract/css'; + +import { vars } from '@/styles/theme.css'; + +export const container = style({ + height: '100vh', + backgroundColor: vars.color.bgblue, +}); diff --git a/src/app/user/[userId]/mylist/page.tsx b/src/app/user/[userId]/mylist/page.tsx index 289041f8..a29c49b1 100644 --- a/src/app/user/[userId]/mylist/page.tsx +++ b/src/app/user/[userId]/mylist/page.tsx @@ -6,6 +6,8 @@ import FloatingContainer from '@/components/floatingButton/FloatingContainer'; import PlusOptionFloatingButton from '@/components/floatingButton/PlusOptionFloatingButton'; import ArrowUpFloatingButton from '@/components/floatingButton/ArrowUpFloatingButton'; +import * as styles from './MylistPage.css'; + import axiosInstance from '@/lib/axios/axiosInstance'; import { UserType } from '@/lib/types/userProfileType'; import METADATA from '@/lib/constants/metadata'; @@ -36,7 +38,7 @@ export async function generateMetadata({ params }: MyListPageProps, parent: Reso export default function MyListPage({ params }: MyListPageProps) { return ( -
+
diff --git a/src/styles/font.css.ts b/src/styles/font.css.ts index f2e404d8..bf17428b 100644 --- a/src/styles/font.css.ts +++ b/src/styles/font.css.ts @@ -9,13 +9,13 @@ export const Header = style({ export const Subtitle = style({ fontSize: '1.8rem', fontWeight: '700', - letterSpacing: '-0.54rem', + letterSpacing: '-0.054rem', }); export const BodyBold = style({ fontSize: '1.6rem', fontWeight: '600', - letterSpacing: '-0.54rem', + letterSpacing: '-0.054rem', }); export const Body = style({ @@ -27,12 +27,12 @@ export const Body = style({ export const Label = style({ fontSize: '1.4rem', fontWeight: '400', - letterSpacing: '-0.42rem', + letterSpacing: '-0.042rem', }); export const LabelSmall = style({ fontSize: '1.2rem', fontWeight: '300', lineHeight: '1.6rem', - letterSpacing: '0.6rem', + letterSpacing: '0.06rem', }); From 9e749044e81db8c45bb0bce703388986ff9330eb Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Mon, 9 Sep 2024 14:44:18 +0900 Subject: [PATCH 38/86] =?UTF-8?q?Design:=20=EB=A7=88=EC=9D=B4=ED=94=BC?= =?UTF-8?q?=EB=93=9C=20=ED=8E=98=EC=9D=B4=EC=A7=80=20Card,=20Category,=20O?= =?UTF-8?q?ptionToggleButton=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20Ver3?= =?UTF-8?q?.0=20UI=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/icons/new/lock.svg | 8 +++ src/app/user/[userId]/_components/Card.css.ts | 25 +++++---- src/app/user/[userId]/_components/Card.tsx | 23 +++----- .../[userId]/_components/Categories.css.ts | 35 ++++++------- .../user/[userId]/_components/Content.css.ts | 7 ++- .../_components/OptionToggleButton.css.ts | 52 +++++++++++-------- .../_components/OptionToggleButton.tsx | 10 ++-- 7 files changed, 82 insertions(+), 78 deletions(-) create mode 100644 public/icons/new/lock.svg diff --git a/public/icons/new/lock.svg b/public/icons/new/lock.svg new file mode 100644 index 00000000..73e69150 --- /dev/null +++ b/public/icons/new/lock.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/app/user/[userId]/_components/Card.css.ts b/src/app/user/[userId]/_components/Card.css.ts index 12406f2d..99ff6c9b 100644 --- a/src/app/user/[userId]/_components/Card.css.ts +++ b/src/app/user/[userId]/_components/Card.css.ts @@ -4,6 +4,10 @@ import { vars } from '@/styles/theme.css'; import { Label, LabelSmall } from '@/styles/font.css'; export const container = style({ + display: 'flex', + flexDirection: 'column', + gap: '1.1rem', + maxWidth: '185px', width: '100%', padding: '1.2rem', @@ -28,7 +32,7 @@ export const container = style({ }, 'screen and (max-width: 400px)': { // 중간 point - maxWidth: '170px', + maxWidth: '171px', }, 'screen and (max-width: 390px)': { // iPhone 12 Pro @@ -42,12 +46,10 @@ export const container = style({ }); export const title = style({ - padding: '1.2rem 0 2rem 0', - fontSize: '1.7rem', fontWeight: '600', color: vars.color.black, - textAlign: 'center', + textAlign: 'start', letterSpacing: '-0.51px', wordBreak: 'break-all', }); @@ -55,12 +57,9 @@ export const title = style({ export const list = style({ display: 'flex', flexDirection: 'column', + gap: '0.8rem', - fontSize: '1.2rem', - fontWeight: '400', color: vars.color.black, - lineHeight: '2.5rem', - letterSpacing: '-0.36px', }); export const label = style({ @@ -69,21 +68,21 @@ export const label = style({ alignItems: 'center', }); -export const labelText = style([ +export const visibilityLabel = style([ LabelSmall, { padding: '0.4rem 1rem', height: '2.6rem', - display: 'inline-flex', + display: 'flex', justifyContent: 'center', alignItems: 'center', - gap: '0.5rem', + gap: '0.2rem', color: vars.color.blue, borderRadius: '1.7rem', - backgroundColor: vars.color.lightblue, + backgroundColor: '#F4F8FD', }, ]); @@ -96,7 +95,7 @@ export const item = style({ export const rank = style([ Label, { - width: '1.2rem', + width: '1.6rem', }, ]); diff --git a/src/app/user/[userId]/_components/Card.tsx b/src/app/user/[userId]/_components/Card.tsx index 75968038..a3050774 100644 --- a/src/app/user/[userId]/_components/Card.tsx +++ b/src/app/user/[userId]/_components/Card.tsx @@ -1,13 +1,11 @@ -// 리스트 배경색은 없어질 예정이므로 우선 주석처리 해둠 -// import { assignInlineVars } from '@vanilla-extract/dynamic'; - import { memo } from 'react'; import * as styles from './Card.css'; +import { vars } from '@/styles/theme.css'; +import LockIcon from '/public/icons/new/lock.svg'; import useMoveToPage from '@/hooks/useMoveToPage'; import { ListType } from '@/lib/types/listType'; -// import { BACKGROUND_COLOR_READ } from '@/styles/Color'; import OptionToggleButton from './OptionToggleButton'; @@ -19,10 +17,6 @@ interface CardProps { /** TODO -- [x] 팝오버 메뉴 토글 기능 -- [x] 외부 클릭 시 팝오버 닫히는 기능 -- [x] 팝오버 메뉴에 삭제하기 추가 -- [x] 리스트 삭제하기 기능 - [ ] 삭제 시 컨펌모달 - [ ] 토스트 메세지 - [ ] 리스트 공개, 비공개 기능 @@ -33,16 +27,13 @@ function Card({ list, isOwner, userId }: CardProps) { return ( // MasonryGrid 라이브러리에서는 ul로 감싸줘야 하므로 Link태그 미사용 -
    +
      {isOwner && (
      -
      {list.isPublic ? '공개' : '비공개'}
      +
      + {!list.isPublic && } + {list.isPublic ? '공개' : '비공개'} +
      )} diff --git a/src/app/user/[userId]/_components/Categories.css.ts b/src/app/user/[userId]/_components/Categories.css.ts index 4aa9b324..a67b0d57 100644 --- a/src/app/user/[userId]/_components/Categories.css.ts +++ b/src/app/user/[userId]/_components/Categories.css.ts @@ -1,12 +1,14 @@ import { style } from '@vanilla-extract/css'; -import { vars } from '@/styles/__theme.css'; + +import { vars } from '@/styles/theme.css'; +import { Label } from '@/styles/font.css'; export const container = style({ - padding: '2.1rem 1.5rem 1.5rem 1.5rem', + padding: '0 1.6rem', display: 'flex', alignItems: 'flex-start', - gap: '1.2rem', + gap: '0.8rem', overflow: 'scroll', msOverflowStyle: 'none', @@ -22,23 +24,20 @@ export const skeletonContainer = style({ gap: '1.5rem', }); -export const button = style({ - padding: '0.8rem 1.2rem', +export const button = style([ + Label, + { + padding: '0.6rem 1.2rem', - backgroundColor: vars.color.white, - borderRadius: '5rem', - border: `1px solid ${vars.color.gray5}`, + backgroundColor: vars.color.white, + borderRadius: '2rem', - /** TODO - 공용폰트 body large 적용 */ - fontSize: '1.6rem', - fontWeight: '400', - color: vars.color.gray9, - letterSpacing: '-0.48px', - whiteSpace: 'nowrap', -}); + color: vars.color.bluegray8, + whiteSpace: 'nowrap', + }, +]); export const variant = style({ - backgroundColor: vars.color.blue, - color: vars.color.white, - border: 'none', + backgroundColor: vars.color.lightblue, + color: vars.color.blue, }); diff --git a/src/app/user/[userId]/_components/Content.css.ts b/src/app/user/[userId]/_components/Content.css.ts index cfa55b21..9b8b517d 100644 --- a/src/app/user/[userId]/_components/Content.css.ts +++ b/src/app/user/[userId]/_components/Content.css.ts @@ -8,7 +8,7 @@ export const container = style({ }); export const contentInfo = style({ - padding: '1.1rem 1.6rem 1.2rem 1.9rem', + padding: '1.1rem 1.6rem 0.65rem 1.9rem', display: 'flex', justifyContent: 'space-between', @@ -41,15 +41,14 @@ export const collectionButton = style([ export const cards = style({ padding: '2.1rem', - marginBottom: '70px', + marginBottom: '84px', textAlign: 'center', }); export const gridSkeletonContainer = style({ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', - rowGap: '1.6rem', - columnGap: '1.2rem', + gap: '1.6rem', }); export const nodataContainer = style({ diff --git a/src/app/user/[userId]/_components/OptionToggleButton.css.ts b/src/app/user/[userId]/_components/OptionToggleButton.css.ts index 1c84a120..9214e565 100644 --- a/src/app/user/[userId]/_components/OptionToggleButton.css.ts +++ b/src/app/user/[userId]/_components/OptionToggleButton.css.ts @@ -4,20 +4,33 @@ import { vars } from '@/styles/theme.css'; import { Label } from '@/styles/font.css'; export const labelOption = style({ - width: '50%', - height: '2.6rem', + width: '2.4rem', + height: '2.4rem', + + position: 'relative', + padding: '0.7rem 1.1rem', display: 'flex', - justifyContent: 'end', + justifyContent: 'center', alignItems: 'center', - color: vars.color.black, + color: vars.color.deepblue10, + borderRadius: '100%', + + selectors: { + '&:hover': { + boxShadow: '0px 8px 16px rgba(0, 0, 0, 0.08), 0px 0px 4px rgba(0, 0, 0, 0.02)', + }, + }, }); export const optionMenu = style({ + width: '9.1rem', + padding: '0.4rem', + position: 'absolute', - top: '4.6rem', - right: 0, + top: '4.4rem', + right: '-8px', display: 'flex', flexDirection: 'column', @@ -30,19 +43,15 @@ export const optionMenu = style({ export const optionTop = style([ Label, { - paddingTop: '1.6rem', - paddingLeft: '1.6rem', - paddingRight: '1.6rem', - paddingBottom: '0.6rem', - - borderTopLeftRadius: '1.2rem', - borderTopRightRadius: '1.2rem', + textAlign: 'left', - fontWeight: '300', + width: '100%', + padding: '0.9rem 1.2rem', + borderRadius: '0.8rem', selectors: { '&:hover': { - backgroundColor: vars.color.lightblue, + backgroundColor: 'rgba(149, 158, 176, 0.11)', }, }, }, @@ -51,20 +60,17 @@ export const optionTop = style([ export const optionBottom = style([ Label, { - paddingTop: '0.6rem', - paddingLeft: '1.6rem', - paddingRight: '1.6rem', - paddingBottom: '1.6rem', + textAlign: 'left', - borderBottomLeftRadius: '1.2rem', - borderBottomRightRadius: '1.2rem', + width: '100%', + padding: '0.9rem 1.2rem', + borderRadius: '0.8rem', color: vars.color.red, - fontWeight: '300', selectors: { '&:hover': { - backgroundColor: vars.color.lightblue, + backgroundColor: 'rgba(149, 158, 176, 0.11)', }, }, }, diff --git a/src/app/user/[userId]/_components/OptionToggleButton.tsx b/src/app/user/[userId]/_components/OptionToggleButton.tsx index c9e19bca..3abf44d3 100644 --- a/src/app/user/[userId]/_components/OptionToggleButton.tsx +++ b/src/app/user/[userId]/_components/OptionToggleButton.tsx @@ -23,7 +23,7 @@ function OptionToggleButton({ listId, userId, isPublicCurrent }: OptionToggleBut const { isOn: isPopupOpen, toggle: popupToggle, handleSetOff: handlePopupOff } = useBooleanOutput(); const { ref: popupRef } = useOnClickOutside(handlePopupOff); - const publicAction = isPublicCurrent ? '비공개' : '공개'; + const publicAction = isPublicCurrent ? '비공개하기' : '공개하기'; const deleteListMutation = useMutation({ mutationFn: () => deleteList(listId), @@ -52,8 +52,10 @@ function OptionToggleButton({ listId, userId, isPublicCurrent }: OptionToggleBut }; return ( -
      - + <> +
      + +
      {isPopupOpen && (
      )} -
      + ); } From aa0a6f100ac0eb9dcf2b393db684182d79ab147f Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Mon, 9 Sep 2024 16:10:07 +0900 Subject: [PATCH 39/86] =?UTF-8?q?Design:=20=EB=A7=88=EC=9D=B4=ED=94=BC?= =?UTF-8?q?=EB=93=9C=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EC=8A=A4=ED=81=AC?= =?UTF-8?q?=EB=A1=A4=20=EC=98=81=EC=97=AD=20=EC=A7=80=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/user/[userId]/_components/Categories.css.ts | 1 + src/app/user/[userId]/_components/Content.css.ts | 9 ++++++++- src/app/user/[userId]/mylist/MylistPage.css.ts | 2 +- 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/app/user/[userId]/_components/Categories.css.ts b/src/app/user/[userId]/_components/Categories.css.ts index a67b0d57..7ac227a5 100644 --- a/src/app/user/[userId]/_components/Categories.css.ts +++ b/src/app/user/[userId]/_components/Categories.css.ts @@ -5,6 +5,7 @@ import { Label } from '@/styles/font.css'; export const container = style({ padding: '0 1.6rem', + marginBottom: '1.6rem', display: 'flex', alignItems: 'flex-start', diff --git a/src/app/user/[userId]/_components/Content.css.ts b/src/app/user/[userId]/_components/Content.css.ts index 9b8b517d..e2bc94ee 100644 --- a/src/app/user/[userId]/_components/Content.css.ts +++ b/src/app/user/[userId]/_components/Content.css.ts @@ -40,9 +40,16 @@ export const collectionButton = style([ ]); export const cards = style({ - padding: '2.1rem', + padding: '0.1rem 2.1rem', + height: '52rem', marginBottom: '84px', textAlign: 'center', + overflowY: 'auto', + + msOverflowStyle: 'none', + '::-webkit-scrollbar': { + display: 'none', + }, }); export const gridSkeletonContainer = style({ diff --git a/src/app/user/[userId]/mylist/MylistPage.css.ts b/src/app/user/[userId]/mylist/MylistPage.css.ts index c9a48890..75cdbd83 100644 --- a/src/app/user/[userId]/mylist/MylistPage.css.ts +++ b/src/app/user/[userId]/mylist/MylistPage.css.ts @@ -3,6 +3,6 @@ import { style } from '@vanilla-extract/css'; import { vars } from '@/styles/theme.css'; export const container = style({ - height: '100vh', + // height: '100vh', backgroundColor: vars.color.bgblue, }); From b3c5f91866adf48a18ffefabd9946362abc43dcc Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Tue, 10 Sep 2024 14:49:32 +0900 Subject: [PATCH 40/86] =?UTF-8?q?Design:=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EC=98=81=EC=97=AD=20=EB=86=92?= =?UTF-8?q?=EC=9D=B4=EA=B0=80=20=EC=83=81=ED=95=98=EB=8B=A8=20=EC=9A=94?= =?UTF-8?q?=EC=86=8C=20=ED=81=AC=EA=B8=B0=EC=97=90=20=EB=A7=9E=EC=B6=B0=20?= =?UTF-8?q?=EC=A1=B0=EC=A0=95=EB=90=A0=20=EC=88=98=20=EC=9E=88=EB=8F=84?= =?UTF-8?q?=EB=A1=9D=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../user/[userId]/_components/Content.css.ts | 20 ++++++++++++++++++- src/app/user/[userId]/_components/Content.tsx | 3 ++- .../user/[userId]/mylist/MylistPage.css.ts | 5 ++++- 3 files changed, 25 insertions(+), 3 deletions(-) diff --git a/src/app/user/[userId]/_components/Content.css.ts b/src/app/user/[userId]/_components/Content.css.ts index e2bc94ee..41063d0c 100644 --- a/src/app/user/[userId]/_components/Content.css.ts +++ b/src/app/user/[userId]/_components/Content.css.ts @@ -4,6 +4,8 @@ import { Subtitle, Label } from '@/styles/font.css'; import { vars } from '@/styles/theme.css'; export const container = style({ + // 상하단 요소 크기에 맞춰 높이 조정 (100vh - 프로필 영역 제외) + height: 'calc(100vh - 225px)', backgroundColor: vars.color.bgblue, }); @@ -40,9 +42,15 @@ export const collectionButton = style([ ]); export const cards = style({ + position: 'sticky', + top: '1rem', + padding: '0.1rem 2.1rem', - height: '52rem', marginBottom: '84px', + + // 상하단 요소 크기에 맞춰 높이 조정 (100vh - 타이틀, 카테고리 영역 제외) + height: 'calc(100% - 100px)', + textAlign: 'center', overflowY: 'auto', @@ -52,6 +60,16 @@ export const cards = style({ }, }); +export const scrollDiv = style({ + position: 'fixed', + bottom: '84px', + + width: '100%', + height: '83px', + + background: 'linear-gradient(180deg, rgba(245, 246, 250, 0.00) 0%, #F5F6FA 100%)', +}); + export const gridSkeletonContainer = style({ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', diff --git a/src/app/user/[userId]/_components/Content.tsx b/src/app/user/[userId]/_components/Content.tsx index 3b048361..7e2ea3f6 100644 --- a/src/app/user/[userId]/_components/Content.tsx +++ b/src/app/user/[userId]/_components/Content.tsx @@ -106,10 +106,11 @@ export default function Content({ userId, type }: ContentProps) { {lists.map((list) => ( ))} +
      )} -
      + {/*
      */} ); } diff --git a/src/app/user/[userId]/mylist/MylistPage.css.ts b/src/app/user/[userId]/mylist/MylistPage.css.ts index 75cdbd83..809908e8 100644 --- a/src/app/user/[userId]/mylist/MylistPage.css.ts +++ b/src/app/user/[userId]/mylist/MylistPage.css.ts @@ -3,6 +3,9 @@ import { style } from '@vanilla-extract/css'; import { vars } from '@/styles/theme.css'; export const container = style({ - // height: '100vh', + width: '100%', + height: '100%', + + position: 'fixed', backgroundColor: vars.color.bgblue, }); From 2c7173ce0089e90a53351b33a15d199f75c65da2 Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Wed, 11 Sep 2024 11:52:06 +0900 Subject: [PATCH 41/86] =?UTF-8?q?Feat:=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20?= =?UTF-8?q?=EC=8B=9C=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EC=98=81=EC=97=AD=20?= =?UTF-8?q?=EC=83=81,=20=ED=95=98=EB=8B=A8=EC=97=90=20=EA=B7=B8=EB=9D=BC?= =?UTF-8?q?=EB=8D=B0=EC=9D=B4=EC=85=98=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9=ED=95=98=EB=8A=94=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84(Observer=20API)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/user/[userId]/_components/Card.css.ts | 4 ++ .../[userId]/_components/Categories.css.ts | 2 +- .../user/[userId]/_components/Content.css.ts | 58 ++++++++++++++----- src/app/user/[userId]/_components/Content.tsx | 50 +++++++++++++--- .../user/[userId]/mylist/MylistPage.css.ts | 3 +- src/hooks/useIntersectionObserver.ts | 2 +- 6 files changed, 91 insertions(+), 28 deletions(-) diff --git a/src/app/user/[userId]/_components/Card.css.ts b/src/app/user/[userId]/_components/Card.css.ts index 99ff6c9b..33125434 100644 --- a/src/app/user/[userId]/_components/Card.css.ts +++ b/src/app/user/[userId]/_components/Card.css.ts @@ -45,6 +45,10 @@ export const container = style({ }, }); +export const visible = style({ + backgroundColor: vars.color.lightblue, +}); + export const title = style({ fontSize: '1.7rem', fontWeight: '600', diff --git a/src/app/user/[userId]/_components/Categories.css.ts b/src/app/user/[userId]/_components/Categories.css.ts index 7ac227a5..004097cc 100644 --- a/src/app/user/[userId]/_components/Categories.css.ts +++ b/src/app/user/[userId]/_components/Categories.css.ts @@ -5,7 +5,7 @@ import { Label } from '@/styles/font.css'; export const container = style({ padding: '0 1.6rem', - marginBottom: '1.6rem', + paddingBottom: '1.6rem', display: 'flex', alignItems: 'flex-start', diff --git a/src/app/user/[userId]/_components/Content.css.ts b/src/app/user/[userId]/_components/Content.css.ts index 41063d0c..48b75045 100644 --- a/src/app/user/[userId]/_components/Content.css.ts +++ b/src/app/user/[userId]/_components/Content.css.ts @@ -4,13 +4,15 @@ import { Subtitle, Label } from '@/styles/font.css'; import { vars } from '@/styles/theme.css'; export const container = style({ - // 상하단 요소 크기에 맞춰 높이 조정 (100vh - 프로필 영역 제외) - height: 'calc(100vh - 225px)', + position: 'absolute', + + // (참고 - 내부 카드 영역만 스크롤되도록 구현 시) 상하단 요소 크기에 맞춰 높이 조정 (100vh - 프로필 영역 제외) + // height: 'calc(100vh - 225px)', backgroundColor: vars.color.bgblue, }); export const contentInfo = style({ - padding: '1.1rem 1.6rem 0.65rem 1.9rem', + padding: '1.65rem 1.6rem 0.65rem 1.9rem', display: 'flex', justifyContent: 'space-between', @@ -42,25 +44,39 @@ export const collectionButton = style([ ]); export const cards = style({ + padding: '0.1rem 2.1rem 1rem 2.1rem', + marginBottom: '84px', + + textAlign: 'center', + + // (참고 - 내부 카드 영역만 스크롤되도록 구현 시) 상하단 요소 크기에 맞춰 높이 조정 (100vh - 타이틀, 카테고리 영역 제외) + // height: 'calc(100% - 100px)', + // overflowY: 'auto', +}); + +export const stickyContainer = style({ position: 'sticky', - top: '1rem', + top: '-1px', // observer API로 sticky 영역이 stuck 상태임을 감지하기 위해 - padding: '0.1rem 2.1rem', - marginBottom: '84px', + zIndex: 1, + background: vars.color.bgblue, +}); - // 상하단 요소 크기에 맞춰 높이 조정 (100vh - 타이틀, 카테고리 영역 제외) - height: 'calc(100% - 100px)', +export const scrollDivTop = style({ + position: 'absolute', + top: '100px', - textAlign: 'center', - overflowY: 'auto', + width: '100%', + height: '83px', - msOverflowStyle: 'none', - '::-webkit-scrollbar': { - display: 'none', - }, + background: 'linear-gradient(360deg, rgba(245, 246, 250, 0.00) 35.68%, #F5F6FA 92.16%)', + zIndex: '1', + opacity: 0, + + transition: 'opacity 0.3s ease', }); -export const scrollDiv = style({ +export const scrollDivBottom = style({ position: 'fixed', bottom: '84px', @@ -68,6 +84,13 @@ export const scrollDiv = style({ height: '83px', background: 'linear-gradient(180deg, rgba(245, 246, 250, 0.00) 0%, #F5F6FA 100%)', + opacity: 0, + + transition: 'opacity 0.3s ease', +}); + +export const visibleScrollDiv = style({ + opacity: 1, }); export const gridSkeletonContainer = style({ @@ -84,3 +107,8 @@ export const target = style({ width: '100%', height: '2px', }); + +export const scrollBottomTarget = style({ + height: '2px', + width: '100%', +}); diff --git a/src/app/user/[userId]/_components/Content.tsx b/src/app/user/[userId]/_components/Content.tsx index 7e2ea3f6..afd9788c 100644 --- a/src/app/user/[userId]/_components/Content.tsx +++ b/src/app/user/[userId]/_components/Content.tsx @@ -33,6 +33,9 @@ interface ContentProps { const DEFAULT_CATEGORY = 'entire'; export default function Content({ userId, type }: ContentProps) { + const [visibleTopGradient, setVisibleTopGradient] = useState(false); + const [visibleBottomGradient, setVisibleBottomGradient] = useState(true); + const { language } = useLanguage(); const [selectedCategory, setSelectedCategory] = useState(DEFAULT_CATEGORY); @@ -64,12 +67,36 @@ export default function Content({ userId, type }: ContentProps) { : []; }, [listsData, userData]); - const ref = useIntersectionObserver(() => { + const ref = useIntersectionObserver((entry) => { if (hasNextPage) { fetchNextPage(); } }); + const stickyContainer = useIntersectionObserver( + (entry) => { + if (entry.intersectionRatio < 1) { + // 메뉴가 상단에 sticky 되었을 떄 + setVisibleTopGradient(true); + } else if (entry.intersectionRatio === 1) { + // sticky가 해제되었을 뗴 + setVisibleTopGradient(false); + } + }, + [0, 1] + ); + + const scrollBottomTarget = useIntersectionObserver( + (entry) => { + if (entry.intersectionRatio < 1) { + setVisibleBottomGradient(true); + } else { + setVisibleBottomGradient(false); + } + }, + [0, 1] + ); + const handleFetchListsOnCategory = (category: string) => { setSelectedCategory(category); }; @@ -81,14 +108,18 @@ export default function Content({ userId, type }: ContentProps) { return (
      -
      -

      {`${userData?.nickname}님의 리스트`}

      - - - 콜렉션 - +
      +
      +

      {`${userData?.nickname}님의 리스트`}

      + + + 콜렉션 + +
      + +
      - + {!isLoading && !lists.length && (
      @@ -110,7 +141,8 @@ export default function Content({ userId, type }: ContentProps) { )}
      - {/*
      */} +
      +
      ); } diff --git a/src/app/user/[userId]/mylist/MylistPage.css.ts b/src/app/user/[userId]/mylist/MylistPage.css.ts index 809908e8..20070e09 100644 --- a/src/app/user/[userId]/mylist/MylistPage.css.ts +++ b/src/app/user/[userId]/mylist/MylistPage.css.ts @@ -4,8 +4,7 @@ import { vars } from '@/styles/theme.css'; export const container = style({ width: '100%', - height: '100%', + height: '100vh', - position: 'fixed', backgroundColor: vars.color.bgblue, }); diff --git a/src/hooks/useIntersectionObserver.ts b/src/hooks/useIntersectionObserver.ts index c94c64ff..9833b8c9 100644 --- a/src/hooks/useIntersectionObserver.ts +++ b/src/hooks/useIntersectionObserver.ts @@ -8,7 +8,7 @@ import { useEffect, useRef } from 'react'; * @returns target 요소에 전달할 ref 값 */ -const useIntersectionObserver = (callback: (entry: IntersectionObserverEntry) => void, threshold = 1) => { +const useIntersectionObserver = (callback: (entry: IntersectionObserverEntry) => void, threshold = [1]) => { const options = { root: null, rootMain: '0px', From c6150ff671b819b699c6188ae47a4c36e063b9cb Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Wed, 11 Sep 2024 11:54:03 +0900 Subject: [PATCH 42/86] =?UTF-8?q?Fix:=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EB=8D=94=EB=B3=B4=EA=B8=B0=20=ED=86=A0=EA=B8=80=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20=EC=98=B5=EC=85=98=20click=20=EC=95=88=EB=90=A8=20?= =?UTF-8?q?=EC=9D=B4=EC=8A=88=20=ED=95=B4=EA=B2=B0=20(ref=20=EC=98=81?= =?UTF-8?q?=EC=97=AD,=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98=EC=A0=95)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../user/[userId]/_components/OptionToggleButton.css.ts | 4 ++-- src/app/user/[userId]/_components/OptionToggleButton.tsx | 9 ++++----- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/app/user/[userId]/_components/OptionToggleButton.css.ts b/src/app/user/[userId]/_components/OptionToggleButton.css.ts index 9214e565..a6129b2c 100644 --- a/src/app/user/[userId]/_components/OptionToggleButton.css.ts +++ b/src/app/user/[userId]/_components/OptionToggleButton.css.ts @@ -29,8 +29,8 @@ export const optionMenu = style({ padding: '0.4rem', position: 'absolute', - top: '4.4rem', - right: '-8px', + top: '3.2rem', + right: '-20px', display: 'flex', flexDirection: 'column', diff --git a/src/app/user/[userId]/_components/OptionToggleButton.tsx b/src/app/user/[userId]/_components/OptionToggleButton.tsx index 3abf44d3..dc789806 100644 --- a/src/app/user/[userId]/_components/OptionToggleButton.tsx +++ b/src/app/user/[userId]/_components/OptionToggleButton.tsx @@ -52,10 +52,9 @@ function OptionToggleButton({ listId, userId, isPublicCurrent }: OptionToggleBut }; return ( - <> -
      - -
      +
      + + {isPopupOpen && (
      )} - +
      ); } From 6cf61da8f2a393765de5ed20c46f3f8abe687cc4 Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Wed, 11 Sep 2024 11:55:14 +0900 Subject: [PATCH 43/86] =?UTF-8?q?Fix:=20ListRecommendation=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20item=20=EC=97=86=EC=9D=84=20?= =?UTF-8?q?=EB=95=8C=20=EC=97=90=EB=9F=AC=20=EC=88=98=EC=A0=95=20(?= =?UTF-8?q?=EC=98=B5=EC=85=94=EB=84=90=EC=B2=B4=EC=9D=B4=EB=8B=9D=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/exploreComponents/ListsRecommendation.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/exploreComponents/ListsRecommendation.tsx b/src/components/exploreComponents/ListsRecommendation.tsx index 226bd69c..6f1b443e 100644 --- a/src/components/exploreComponents/ListsRecommendation.tsx +++ b/src/components/exploreComponents/ListsRecommendation.tsx @@ -85,7 +85,7 @@ function ListRecommendation() {
        - {item.labels.map((label) => { + {item?.labels?.map((label) => { return (
        From 9d994638c6f831e827bcfca81de53a6530681182 Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Wed, 11 Sep 2024 12:59:11 +0900 Subject: [PATCH 44/86] =?UTF-8?q?Design:=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EB=8D=94=EB=B3=B4=EA=B8=B0=EB=B2=84=ED=8A=BC=20=EA=B0=80?= =?UTF-8?q?=EB=A0=A4=EC=A7=80=EB=8A=94=20=EB=AC=B8=EC=A0=9C=EB=A1=9C=20?= =?UTF-8?q?=EC=83=81=EB=8B=A8=20=EA=B7=B8=EB=9D=BC=EB=8D=B0=EC=9D=B4?= =?UTF-8?q?=EC=85=98=20=EC=98=81=EC=97=AD=20=EC=9C=84=EC=B9=98=20=EC=A1=B0?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/user/[userId]/_components/Content.css.ts | 7 ++++++- src/app/user/[userId]/_components/Content.tsx | 2 +- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/app/user/[userId]/_components/Content.css.ts b/src/app/user/[userId]/_components/Content.css.ts index 48b75045..0ef60aea 100644 --- a/src/app/user/[userId]/_components/Content.css.ts +++ b/src/app/user/[userId]/_components/Content.css.ts @@ -64,7 +64,7 @@ export const stickyContainer = style({ export const scrollDivTop = style({ position: 'absolute', - top: '100px', + top: 0, width: '100%', height: '83px', @@ -89,6 +89,11 @@ export const scrollDivBottom = style({ transition: 'opacity 0.3s ease', }); +export const visibleScrollDivTop = style({ + top: '100px', + opacity: 1, +}); + export const visibleScrollDiv = style({ opacity: 1, }); diff --git a/src/app/user/[userId]/_components/Content.tsx b/src/app/user/[userId]/_components/Content.tsx index afd9788c..165a2523 100644 --- a/src/app/user/[userId]/_components/Content.tsx +++ b/src/app/user/[userId]/_components/Content.tsx @@ -117,7 +117,7 @@ export default function Content({ userId, type }: ContentProps) {
        -
        +
        {!isLoading && !lists.length && ( From 9bbba3f428dac2a7754f521e927bee4d4e2faa8a Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Wed, 11 Sep 2024 13:43:48 +0900 Subject: [PATCH 45/86] =?UTF-8?q?Fix:=20=EB=AC=B4=ED=95=9C=EC=8A=A4?= =?UTF-8?q?=ED=81=AC=EB=A1=A4=20=EA=B0=90=EC=A7=80=ED=95=98=EB=8A=94=20ref?= =?UTF-8?q?=20=ED=83=9C=EA=B7=B8=20=EC=9C=84=EC=B9=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/user/[userId]/_components/Content.css.ts | 1 - src/app/user/[userId]/_components/Content.tsx | 6 ++++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/app/user/[userId]/_components/Content.css.ts b/src/app/user/[userId]/_components/Content.css.ts index 0ef60aea..0f04d3cb 100644 --- a/src/app/user/[userId]/_components/Content.css.ts +++ b/src/app/user/[userId]/_components/Content.css.ts @@ -70,7 +70,6 @@ export const scrollDivTop = style({ height: '83px', background: 'linear-gradient(360deg, rgba(245, 246, 250, 0.00) 35.68%, #F5F6FA 92.16%)', - zIndex: '1', opacity: 0, transition: 'opacity 0.3s ease', diff --git a/src/app/user/[userId]/_components/Content.tsx b/src/app/user/[userId]/_components/Content.tsx index 165a2523..b04367ea 100644 --- a/src/app/user/[userId]/_components/Content.tsx +++ b/src/app/user/[userId]/_components/Content.tsx @@ -67,12 +67,13 @@ export default function Content({ userId, type }: ContentProps) { : []; }, [listsData, userData]); - const ref = useIntersectionObserver((entry) => { + const ref = useIntersectionObserver(() => { if (hasNextPage) { fetchNextPage(); } }); + /** 콘텐츠 상단 영역(sticky)이 붙어있음을 감지하여 그라데이션 스타일 적용 */ const stickyContainer = useIntersectionObserver( (entry) => { if (entry.intersectionRatio < 1) { @@ -86,6 +87,7 @@ export default function Content({ userId, type }: ContentProps) { [0, 1] ); + /** 스크롤이 끝났음을 감지하여 하단 영역 그라데이션 스타일 적용 */ const scrollBottomTarget = useIntersectionObserver( (entry) => { if (entry.intersectionRatio < 1) { @@ -137,9 +139,9 @@ export default function Content({ userId, type }: ContentProps) { {lists.map((list) => ( ))} -
        )} +
        From a7fe0e3d6caad7dfab75d5e509ad420fd34bd68f Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Wed, 11 Sep 2024 14:25:21 +0900 Subject: [PATCH 46/86] =?UTF-8?q?Feat:=20=EB=A7=88=EC=9D=B4=ED=94=BC?= =?UTF-8?q?=EB=93=9C=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EA=B3=B5=EA=B0=9C/?= =?UTF-8?q?=EB=B9=84=EA=B3=B5=EA=B0=9C=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84=20=EB=B0=8F=20mutation=20=ED=9B=84=20=ED=86=A0?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=EB=A9=94=EC=84=B8=EC=A7=80=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/_api/list/updateVisibilityList.ts | 7 ++++++ src/app/user/[userId]/_components/Card.tsx | 4 +-- .../_components/OptionToggleButton.tsx | 25 ++++++++++++++++--- src/lib/constants/toastMessage.ts | 8 ++++++ 4 files changed, 39 insertions(+), 5 deletions(-) create mode 100644 src/app/_api/list/updateVisibilityList.ts diff --git a/src/app/_api/list/updateVisibilityList.ts b/src/app/_api/list/updateVisibilityList.ts new file mode 100644 index 00000000..24b87bf0 --- /dev/null +++ b/src/app/_api/list/updateVisibilityList.ts @@ -0,0 +1,7 @@ +import axiosInstance from '@/lib/axios/axiosInstance'; + +const updateVisibilityList = async (listId: string) => { + return await axiosInstance.patch(`/lists/${listId}/visibility`); +}; + +export default updateVisibilityList; diff --git a/src/app/user/[userId]/_components/Card.tsx b/src/app/user/[userId]/_components/Card.tsx index a3050774..3d7f1f2f 100644 --- a/src/app/user/[userId]/_components/Card.tsx +++ b/src/app/user/[userId]/_components/Card.tsx @@ -18,8 +18,8 @@ interface CardProps { /** TODO - [ ] 삭제 시 컨펌모달 -- [ ] 토스트 메세지 -- [ ] 리스트 공개, 비공개 기능 +- [x] 토스트 메세지 +- [x] 리스트 공개, 비공개 기능 */ function Card({ list, isOwner, userId }: CardProps) { diff --git a/src/app/user/[userId]/_components/OptionToggleButton.tsx b/src/app/user/[userId]/_components/OptionToggleButton.tsx index dc789806..40157dc4 100644 --- a/src/app/user/[userId]/_components/OptionToggleButton.tsx +++ b/src/app/user/[userId]/_components/OptionToggleButton.tsx @@ -8,7 +8,12 @@ import useOnClickOutside from '@/hooks/useOnClickOutside'; import useBooleanOutput from '@/hooks/useBooleanOutput'; import deleteList from '@/app/_api/list/deleteList'; +import updateVisibilityList from '@/app/_api/list/updateVisibilityList'; + import { QUERY_KEYS } from '@/lib/constants/queryKeys'; +import toasting from '@/lib/utils/toasting'; +import toastMessage from '@/lib/constants/toastMessage'; +import { useLanguage } from '@/store/useLanguage'; interface OptionToggleButtonType { listId: string; @@ -20,6 +25,7 @@ type SelectOptionType = 'visibility' | 'delete'; function OptionToggleButton({ listId, userId, isPublicCurrent }: OptionToggleButtonType) { const queryClient = useQueryClient(); + const { language } = useLanguage(); const { isOn: isPopupOpen, toggle: popupToggle, handleSetOff: handlePopupOff } = useBooleanOutput(); const { ref: popupRef } = useOnClickOutside(handlePopupOff); @@ -29,9 +35,22 @@ function OptionToggleButton({ listId, userId, isPublicCurrent }: OptionToggleBut mutationFn: () => deleteList(listId), onSuccess: () => { queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.getAllList, userId] }); + toasting({ type: 'success', txt: toastMessage[language].deleteListSuccess }); + }, + onError: () => { + toasting({ type: 'error', txt: toastMessage[language].deleteListError }); + }, + }); + + const updateVisibilityMutation = useMutation({ + mutationFn: () => updateVisibilityList(listId), + onSuccess: () => { + handlePopupOff(); + queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.getAllList, userId] }); + toasting({ type: 'success', txt: toastMessage[language].visibilityListSuccess }); }, onError: () => { - // TODO 에러핸들링 - 토스트메세지 + toasting({ type: 'error', txt: toastMessage[language].visibilityListError }); }, }); @@ -46,8 +65,8 @@ function OptionToggleButton({ listId, userId, isPublicCurrent }: OptionToggleBut if (selectOption === 'delete') { deleteListMutation.mutate(); - } else { - // TODO 비공개, 공개 설정 + } else if (selectOption === 'visibility') { + updateVisibilityMutation.mutate(); } }; diff --git a/src/lib/constants/toastMessage.ts b/src/lib/constants/toastMessage.ts index cc159a2a..269f6a87 100644 --- a/src/lib/constants/toastMessage.ts +++ b/src/lib/constants/toastMessage.ts @@ -18,6 +18,10 @@ const toastMessage: Record = { withdraw: '리스티웨이브를 탈퇴했어요.🥲 꼭 돌아와주세요!', withdrawError: '탈퇴에 실패했어요. 다시 시도해주세요.', failedCollect: '콜렉트에 실패했어요. 다시 시도해주세요.🥲', + deleteListSuccess: '리스트를 삭제했어요.', + deleteListError: '리스트 삭제에 실패했어요. 다시 시도해주세요.🥲', + visibilityListSuccess: '리스트 변경사항을 저장했어요.', + visibilityListError: '리스트 변경사항 저장에 실패했어요. 다시 시도해주세요.🥲', }, en: { requiredLogin: 'Login is required.', @@ -36,6 +40,10 @@ const toastMessage: Record = { withdraw: "You've withdrawn from ListyWave. 🥲 Please come back soon!", withdrawError: 'Failed to withdraw. Please try again.', failedCollect: 'Failed to collect. Please try again.🥲', + deleteListSuccess: 'Successfully deleted the list.', + deleteListError: 'Failed to delete the list. Please try again.🥲', + visibilityListSuccess: 'Changes to the list have been saved.', + visibilityListError: 'Failed to save changes to the list. Please try again.🥲', }, }; From 9d87a488c912e46375f71e6c54196f515b83dfcc Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Wed, 11 Sep 2024 15:37:10 +0900 Subject: [PATCH 47/86] =?UTF-8?q?Feat:=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C=20=EC=8B=9C=20=EC=BB=A8=ED=8E=8C=EB=AA=A8?= =?UTF-8?q?=EB=8B=AC=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/user/[userId]/_components/Card.tsx | 7 --- .../_components/OptionToggleButton.tsx | 53 ++++++++++++++----- 2 files changed, 39 insertions(+), 21 deletions(-) diff --git a/src/app/user/[userId]/_components/Card.tsx b/src/app/user/[userId]/_components/Card.tsx index 3d7f1f2f..ab209160 100644 --- a/src/app/user/[userId]/_components/Card.tsx +++ b/src/app/user/[userId]/_components/Card.tsx @@ -15,13 +15,6 @@ interface CardProps { userId: number; } -/** -TODO -- [ ] 삭제 시 컨펌모달 -- [x] 토스트 메세지 -- [x] 리스트 공개, 비공개 기능 - */ - function Card({ list, isOwner, userId }: CardProps) { const { onClickMoveToPage } = useMoveToPage(); diff --git a/src/app/user/[userId]/_components/OptionToggleButton.tsx b/src/app/user/[userId]/_components/OptionToggleButton.tsx index 40157dc4..c074dbaa 100644 --- a/src/app/user/[userId]/_components/OptionToggleButton.tsx +++ b/src/app/user/[userId]/_components/OptionToggleButton.tsx @@ -9,12 +9,15 @@ import useBooleanOutput from '@/hooks/useBooleanOutput'; import deleteList from '@/app/_api/list/deleteList'; import updateVisibilityList from '@/app/_api/list/updateVisibilityList'; +import { modalLocale } from '@/app/list/[listId]/locale'; import { QUERY_KEYS } from '@/lib/constants/queryKeys'; import toasting from '@/lib/utils/toasting'; import toastMessage from '@/lib/constants/toastMessage'; import { useLanguage } from '@/store/useLanguage'; +import Modal from '@/components/Modal/Modal'; + interface OptionToggleButtonType { listId: string; userId: number; @@ -27,6 +30,7 @@ function OptionToggleButton({ listId, userId, isPublicCurrent }: OptionToggleBut const queryClient = useQueryClient(); const { language } = useLanguage(); const { isOn: isPopupOpen, toggle: popupToggle, handleSetOff: handlePopupOff } = useBooleanOutput(); + const { isOn: isModalOpen, handleSetOn: handleModalOn, handleSetOff: handleModalOff } = useBooleanOutput(); const { ref: popupRef } = useOnClickOutside(handlePopupOff); const publicAction = isPublicCurrent ? '비공개하기' : '공개하기'; @@ -64,27 +68,48 @@ function OptionToggleButton({ listId, userId, isPublicCurrent }: OptionToggleBut const selectOption = (e.target as HTMLButtonElement).id as SelectOptionType; if (selectOption === 'delete') { - deleteListMutation.mutate(); + handleModalOn(); + handlePopupOff(); } else if (selectOption === 'visibility') { updateVisibilityMutation.mutate(); } }; return ( -
        - - - {isPopupOpen && ( -
        - - -
        + <> +
        + + + {isPopupOpen && ( +
        + + +
        + )} +
        + + {isModalOpen && ( + + {modalLocale[language].deleteMessage} + { + e.stopPropagation(); + handleModalOff(); + }} + onClick={(e) => { + e.stopPropagation(); + deleteListMutation.mutate(); + }} + > + {modalLocale[language].confirm} + + )} -
        + ); } From da3b9b2f0b668d855b99a262ddb74a7db2586d62 Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Wed, 11 Sep 2024 17:27:37 +0900 Subject: [PATCH 48/86] =?UTF-8?q?Fix:=20build=20=EC=97=90=EB=9F=AC=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/intro/_components/MotionWrapper.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/intro/_components/MotionWrapper.tsx b/src/app/intro/_components/MotionWrapper.tsx index 49d0ed0e..a07bf23d 100644 --- a/src/app/intro/_components/MotionWrapper.tsx +++ b/src/app/intro/_components/MotionWrapper.tsx @@ -32,7 +32,7 @@ function MotionWrapper({ children, delay, variantsType = 'vertical' }: MotionWra const ref = useIntersectionObserver(() => { controls.start('visible'); - }, 0.4); + }, [0.4]); return ( Date: Wed, 18 Sep 2024 17:00:28 +0900 Subject: [PATCH 49/86] =?UTF-8?q?Design:=20=EB=A7=88=EC=9D=B4=ED=94=BC?= =?UTF-8?q?=EB=93=9C=20Content=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20po?= =?UTF-8?q?sition=20style=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/user/[userId]/_components/Content.css.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/user/[userId]/_components/Content.css.ts b/src/app/user/[userId]/_components/Content.css.ts index 0f04d3cb..37521173 100644 --- a/src/app/user/[userId]/_components/Content.css.ts +++ b/src/app/user/[userId]/_components/Content.css.ts @@ -4,7 +4,7 @@ import { Subtitle, Label } from '@/styles/font.css'; import { vars } from '@/styles/theme.css'; export const container = style({ - position: 'absolute', + // position: 'absolute', // (참고 - 내부 카드 영역만 스크롤되도록 구현 시) 상하단 요소 크기에 맞춰 높이 조정 (100vh - 프로필 영역 제외) // height: 'calc(100vh - 225px)', From 655c27ff58b14c9e906c6a83280a20ac49cca01a Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Wed, 18 Sep 2024 17:01:00 +0900 Subject: [PATCH 50/86] =?UTF-8?q?Feat:=20=ED=86=A0=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EB=A9=94=EC=84=B8=EC=A7=80=20=EB=AC=B8=EA=B5=AC=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/lib/constants/toastMessage.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/lib/constants/toastMessage.ts b/src/lib/constants/toastMessage.ts index 269f6a87..42bd990a 100644 --- a/src/lib/constants/toastMessage.ts +++ b/src/lib/constants/toastMessage.ts @@ -19,9 +19,9 @@ const toastMessage: Record = { withdrawError: '탈퇴에 실패했어요. 다시 시도해주세요.', failedCollect: '콜렉트에 실패했어요. 다시 시도해주세요.🥲', deleteListSuccess: '리스트를 삭제했어요.', - deleteListError: '리스트 삭제에 실패했어요. 다시 시도해주세요.🥲', - visibilityListSuccess: '리스트 변경사항을 저장했어요.', - visibilityListError: '리스트 변경사항 저장에 실패했어요. 다시 시도해주세요.🥲', + deleteListError: '리스트 삭제에 실패했어요.', + visibilityListSuccess: '리스트 공개/비공개 변경을 완료했어요.', + visibilityListError: '리스트 공개/비공개 변경에 실패했어요.', }, en: { requiredLogin: 'Login is required.', @@ -42,8 +42,8 @@ const toastMessage: Record = { failedCollect: 'Failed to collect. Please try again.🥲', deleteListSuccess: 'Successfully deleted the list.', deleteListError: 'Failed to delete the list. Please try again.🥲', - visibilityListSuccess: 'Changes to the list have been saved.', - visibilityListError: 'Failed to save changes to the list. Please try again.🥲', + visibilityListSuccess: 'List visibility updated successfully.', + visibilityListError: 'Failed to update list visibility. Please try again.🥲', }, }; From 608ae27dab03803b6d705e78d427b0be6a7cd30f Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Wed, 18 Sep 2024 17:59:09 +0900 Subject: [PATCH 51/86] =?UTF-8?q?Fix:=20=ED=86=A0=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EB=A9=94=EC=84=B8=EC=A7=80=20=ED=83=80=EC=9E=85=20=EC=A1=B0?= =?UTF-8?q?=EA=B1=B4=EB=AC=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/lib/utils/toasting.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/utils/toasting.ts b/src/lib/utils/toasting.ts index bb0ae922..b55e7969 100644 --- a/src/lib/utils/toasting.ts +++ b/src/lib/utils/toasting.ts @@ -19,7 +19,7 @@ function toasting({ type = 'default', txt = '' }: ToastingProps) { transition: Slide, }; - if (type !== ('success' || 'error' || 'warning')) { + if (type === 'default') { toast(txt, toastOption); } else { toast[type](txt, toastOption); From c92c1c53e10e9fc0d7422f4d7c584517082849a1 Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Thu, 19 Sep 2024 11:42:47 +0900 Subject: [PATCH 52/86] =?UTF-8?q?Design:=20=ED=85=8C=EB=A7=88=20=EC=BB=AC?= =?UTF-8?q?=EB=9F=AC=20=EC=88=98=EC=A0=95=EC=97=90=20=EB=94=B0=EB=A5=B8=20?= =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/user/[userId]/_components/Content.css.ts | 4 ++-- src/app/user/[userId]/_components/__Content.css.ts | 4 ++-- src/app/user/[userId]/mylist/MylistPage.css.ts | 2 +- src/styles/font.css.ts | 2 +- src/styles/theme.css.ts | 2 -- 5 files changed, 6 insertions(+), 8 deletions(-) diff --git a/src/app/user/[userId]/_components/Content.css.ts b/src/app/user/[userId]/_components/Content.css.ts index 37521173..83d263e3 100644 --- a/src/app/user/[userId]/_components/Content.css.ts +++ b/src/app/user/[userId]/_components/Content.css.ts @@ -8,7 +8,7 @@ export const container = style({ // (참고 - 내부 카드 영역만 스크롤되도록 구현 시) 상하단 요소 크기에 맞춰 높이 조정 (100vh - 프로필 영역 제외) // height: 'calc(100vh - 225px)', - backgroundColor: vars.color.bgblue, + backgroundColor: vars.color.bggray, }); export const contentInfo = style({ @@ -59,7 +59,7 @@ export const stickyContainer = style({ top: '-1px', // observer API로 sticky 영역이 stuck 상태임을 감지하기 위해 zIndex: 1, - background: vars.color.bgblue, + background: vars.color.bggray, }); export const scrollDivTop = style({ diff --git a/src/app/user/[userId]/_components/__Content.css.ts b/src/app/user/[userId]/_components/__Content.css.ts index 355707f9..5a23e878 100644 --- a/src/app/user/[userId]/_components/__Content.css.ts +++ b/src/app/user/[userId]/_components/__Content.css.ts @@ -10,7 +10,7 @@ export const container = style({ position: 'absolute', top: 0, - backgroundColor: vars.color.bgblue, + backgroundColor: vars.color.bggray, borderTopLeftRadius: '2.5rem', borderTopRightRadius: '2.5rem', }); @@ -45,7 +45,7 @@ export const button = style([ alignItems: 'center', justifyContent: 'center', - backgroundColor: vars.color.bgblue, + backgroundColor: vars.color.bggray, }, ]); diff --git a/src/app/user/[userId]/mylist/MylistPage.css.ts b/src/app/user/[userId]/mylist/MylistPage.css.ts index 20070e09..15d5deea 100644 --- a/src/app/user/[userId]/mylist/MylistPage.css.ts +++ b/src/app/user/[userId]/mylist/MylistPage.css.ts @@ -6,5 +6,5 @@ export const container = style({ width: '100%', height: '100vh', - backgroundColor: vars.color.bgblue, + backgroundColor: vars.color.bggray, }); diff --git a/src/styles/font.css.ts b/src/styles/font.css.ts index bf17428b..d53a3b62 100644 --- a/src/styles/font.css.ts +++ b/src/styles/font.css.ts @@ -3,7 +3,7 @@ import { style } from '@vanilla-extract/css'; export const Header = style({ fontSize: '2rem', fontWeight: '700', - letterSpacing: '-0.6rem', + letterSpacing: '-0.06rem', }); export const Subtitle = style({ diff --git a/src/styles/theme.css.ts b/src/styles/theme.css.ts index 16da28c0..cfe3e0a6 100644 --- a/src/styles/theme.css.ts +++ b/src/styles/theme.css.ts @@ -16,7 +16,6 @@ export const vars = createThemeContract({ bggray: 'color-bggray', black: 'color-black', red: 'color-red', - bgblue: 'color-bg-light-blue', }, // TODO 반응형 코드 수정 필요 breakpoints: { @@ -43,7 +42,6 @@ createGlobalTheme(':root', vars, { bggray: '#F5F6FA', black: '#323A43', red: '#FF0000', - bgblue: '#F5F6FA', }, // TODO 반응형 코드 수정 필요 breakpoints: { From 48842804228a664d0bfda86d4da05e7480296fc5 Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Thu, 19 Sep 2024 12:26:48 +0900 Subject: [PATCH 53/86] =?UTF-8?q?Design:=20=EC=B9=B4=ED=85=8C=EA=B3=A0?= =?UTF-8?q?=EB=A6=AC=20=EB=B2=84=ED=8A=BC=20=EA=B0=80=EB=A0=A4=EC=A7=90=20?= =?UTF-8?q?=EB=AC=B8=EC=A0=9C=EB=A1=9C=20=EC=83=81=EB=8B=A8=20=EA=B7=B8?= =?UTF-8?q?=EB=9D=BC=EB=8D=B0=EC=9D=B4=EC=85=98=20div=20=EC=9C=84=EC=B9=98?= =?UTF-8?q?=EC=97=90=20=EB=94=B0=EB=A5=B8=20height=20=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/user/[userId]/_components/Content.css.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/app/user/[userId]/_components/Content.css.ts b/src/app/user/[userId]/_components/Content.css.ts index 83d263e3..8c61d9ef 100644 --- a/src/app/user/[userId]/_components/Content.css.ts +++ b/src/app/user/[userId]/_components/Content.css.ts @@ -67,7 +67,7 @@ export const scrollDivTop = style({ top: 0, width: '100%', - height: '83px', + height: '1px', background: 'linear-gradient(360deg, rgba(245, 246, 250, 0.00) 35.68%, #F5F6FA 92.16%)', opacity: 0, @@ -90,6 +90,7 @@ export const scrollDivBottom = style({ export const visibleScrollDivTop = style({ top: '100px', + height: '83px', opacity: 1, }); From cc2a666e45afb282f7f5b784e182d23a03c52d6d Mon Sep 17 00:00:00 2001 From: Nahyun Date: Fri, 27 Sep 2024 19:47:23 +0900 Subject: [PATCH 54/86] =?UTF-8?q?Feat:=20=ED=97=A4=EB=8D=94=20=EB=A1=9C?= =?UTF-8?q?=EC=A7=81=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(home)/_components/Header.css.ts | 16 ++++++ src/app/(home)/_components/Header.tsx | 62 +++++++++++++++++++++--- 2 files changed, 70 insertions(+), 8 deletions(-) diff --git a/src/app/(home)/_components/Header.css.ts b/src/app/(home)/_components/Header.css.ts index 27068857..9dc1a701 100644 --- a/src/app/(home)/_components/Header.css.ts +++ b/src/app/(home)/_components/Header.css.ts @@ -47,3 +47,19 @@ export const iconWrapperForMember = style({ alignItems: 'center', gap: '9px', }); + +export const profileImageWrapper = style({ + width: '20px', + height: '20px', + + position: 'relative', +}); + +export const profileImage = style({ + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + + backgroundColor: vars.color.white, + borderRadius: '9999px', +}); diff --git a/src/app/(home)/_components/Header.tsx b/src/app/(home)/_components/Header.tsx index cef5b296..bb32261b 100644 --- a/src/app/(home)/_components/Header.tsx +++ b/src/app/(home)/_components/Header.tsx @@ -2,9 +2,21 @@ * 홈, 검색 아이콘, 검색창, 로그인/로그아웃 버튼(비회원), 벨/유저 아이콘(회원) */ -import { useState } from 'react'; +import { useState, useEffect } from 'react'; +import Link from 'next/link'; +import Image from 'next/image'; +import { useQuery } from '@tanstack/react-query'; import SearchBarComponent from '@/components/SearchBar'; +import Modal from '@/components/Modal/Modal'; +import LoginModal from '@/components/login/LoginModal'; + +import useBooleanOutput from '@/hooks/useBooleanOutput'; +import { getCookie } from '@/lib/utils/cookie'; +import { UserType } from '@/lib/types/userProfileType'; +import getUserOne from '@/app/_api/user/getUserOne'; +import { useUser } from '@/store/useUser'; +import { QUERY_KEYS } from '@/lib/constants/queryKeys'; import * as styles from './Header.css'; import SearchIcon from '/public/icons/ver3/search.svg'; @@ -13,10 +25,19 @@ import Avatar from '/public/icons/ver3/avatar.svg'; function Header() { const [isSearchBarOpened, setIsSearchBarOpened] = useState(false); - const [isLoggedIn, setIsLoggedIn] = useState(false); + const { isOn, handleSetOn, handleSetOff } = useBooleanOutput(); + const [isLoggedIn, setIsLoggedIn] = useState(false); // 로그인 상태를 관리하는 useState 추가 + + const { user } = useUser(); + + const { data: userData } = useQuery({ + queryKey: [QUERY_KEYS.userOne, user.id], + queryFn: () => getUserOne(user.id as number), + enabled: !!user.id, + }); const handleAuthButtonClick = () => { - setIsLoggedIn(true); + handleSetOn(); }; const handleInactivateSearchBar = () => { @@ -27,6 +48,11 @@ function Header() { setIsSearchBarOpened(true); }; + useEffect(() => { + const accessToken = getCookie('accessToken'); + setIsLoggedIn(accessToken !== null && accessToken !== undefined); + }, []); // useEffect를 사용해 클라이언트 측에서만 실행되도록 함 + return (
        {isSearchBarOpened && } @@ -46,17 +72,37 @@ function Header() { {isLoggedIn && (
        - - + + + {userData && userData.profileImageUrl ? ( +
        + 프로필 이미지 +
        + ) : ( + + )} +
        )} )} + {isOn && ( + + + + )}
        ); } From bf037c85e36f952f33e0b2b53bf1a8004b1c523d Mon Sep 17 00:00:00 2001 From: Nahyun Date: Fri, 27 Sep 2024 21:26:47 +0900 Subject: [PATCH 55/86] =?UTF-8?q?Feat:=20=EC=B5=9C=EC=8B=A0=20=EB=A6=AC?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(home)/_components/Categories.tsx | 20 ++- src/app/(home)/_components/FeedLists.css.ts | 136 +++++++++++++++++ src/app/(home)/_components/FeedLists.tsx | 140 ++++++++++++++++++ src/app/(home)/_components/FollowingFeed.tsx | 4 +- src/app/(home)/_components/HomeTab.tsx | 1 - src/app/(home)/_components/RecentFeed.css.ts | 2 + src/app/(home)/_components/RecentFeed.tsx | 18 ++- src/app/(home)/_components/TrendingLists.tsx | 2 +- src/app/__page.tsx | 4 +- src/app/_api/home/getFollowingLists.ts | 22 +++ src/app/_api/home/getRecentLists.ts | 27 ++++ .../{explore => home}/getRecommendedLists.ts | 0 .../{explore => home}/getRecommendedUsers.ts | 0 .../{explore => home}/getTrendingLists.ts | 0 src/components/BottomNav/BottomNav.css.ts | 1 + src/components/SimpleList/SimpleList.css.ts | 4 +- ...{ListsRecommendation.tsx => FeedLists.tsx} | 12 +- .../exploreComponents/RecommendedUsers.css.ts | 8 +- .../exploreComponents/RecommendedUsers.tsx | 3 +- .../exploreComponents/TrendingLists.tsx | 2 +- src/lib/constants/queryKeys.ts | 2 + 21 files changed, 378 insertions(+), 30 deletions(-) create mode 100644 src/app/(home)/_components/FeedLists.css.ts create mode 100644 src/app/(home)/_components/FeedLists.tsx create mode 100644 src/app/_api/home/getFollowingLists.ts create mode 100644 src/app/_api/home/getRecentLists.ts rename src/app/_api/{explore => home}/getRecommendedLists.ts (100%) rename src/app/_api/{explore => home}/getRecommendedUsers.ts (100%) rename src/app/_api/{explore => home}/getTrendingLists.ts (100%) rename src/components/exploreComponents/{ListsRecommendation.tsx => FeedLists.tsx} (94%) diff --git a/src/app/(home)/_components/Categories.tsx b/src/app/(home)/_components/Categories.tsx index 16cc9151..7f133f29 100644 --- a/src/app/(home)/_components/Categories.tsx +++ b/src/app/(home)/_components/Categories.tsx @@ -10,7 +10,11 @@ import getCategories from '@/app/_api/category/getCategories'; import * as styles from './Categories.css'; import ChevronDown from '/public/icons/ver3/chevron_down.svg'; -function Categories() { +interface CategoriesType { + onClick: (name: string) => void; +} + +function Categories({ onClick }: CategoriesType) { const [selectedCategoryCode, setSelectedCategoryCode] = useState('0'); const { data, isFetching } = useQuery({ @@ -18,7 +22,10 @@ function Categories() { queryFn: getCategories, }); - console.log(data); + const handleClickCategory = (codeNum: string, name: string) => { + setSelectedCategoryCode(codeNum); + onClick(name); + }; return (
        @@ -26,17 +33,20 @@ function Categories() { {data?.map((el) => { return (
      • -
        • ); })}
      -
      + {/*
      정렬 -
      +
      */} ); } diff --git a/src/app/(home)/_components/FeedLists.css.ts b/src/app/(home)/_components/FeedLists.css.ts new file mode 100644 index 00000000..0dee9bf2 --- /dev/null +++ b/src/app/(home)/_components/FeedLists.css.ts @@ -0,0 +1,136 @@ +import { style, createVar, keyframes } from '@vanilla-extract/css'; +import { vars } from '@/styles/__theme.css'; +import { headlineSmall, bodyMedium, bodySmall, labelSmall } from '@/styles/__font.css'; + +export const listBackground = createVar(); + +export const wrapperOuter = style({ + padding: '0 16px 30px', + marginTop: '12px', + + display: 'flex', + flexDirection: 'column', +}); + +export const titleWrapper = style({ + marginBottom: '26px', + + display: 'flex', + alignItems: 'baseline', + gap: '5px', +}); + +export const sectionTitle = style([ + headlineSmall, + { + fontWeight: 600, + }, +]); + +const listWrapperHoverAnimation = keyframes({ + '0%': { + transform: 'scale(1)', + }, + '100%': { + transform: 'scale(1.01)', + }, +}); + +export const listWrapper = style({ + width: '100%', + marginBottom: '35px', + padding: '30px 24px 14px', + + position: 'relative', + + display: 'flex', + flexDirection: 'column', + borderRadius: '24px', + backgroundColor: '#fff', + + ':hover': { + animation: `${listWrapperHoverAnimation} 0.1s forwards`, + boxShadow: 'rgba(0, 0, 0, 0.04) 0px 3px 5px', + }, +}); + +export const listTopWrapper = style({ + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', + + marginBottom: '8px', +}); + +export const version = style({ + padding: '6px 12px', + + fontWeight: '400', + letterSpacing: '-3%', + fontSize: '1.4rem', + color: '#3D95FF', + backgroundColor: '#EEF6FF', + borderRadius: '20px', +}); + +export const listInformationWrapper = style({ + marginBottom: '20px', + + display: 'flex', + flexDirection: 'column', +}); + +export const listTitle = style({ + color: '#3E4455', + wordBreak: 'break-word', + fontWeight: '700', + fontSize: '2rem', + letterSpacing: '-3%', +}); + +export const listDescription = style({ + marginTop: '13px', + + fontWeight: '400', + fontSize: '1.6rem', + color: '#3E4455', + wordBreak: 'break-word', +}); + +export const ownerInformationWrapper = style({ + display: 'flex', + justifyContent: 'flex-start', + alignItems: 'center', + gap: '8px', +}); + +export const ownerNicknameText = style({ + color: '#676B75', + fontSize: '1.6rem', + fontWeight: '500', + letterSpacing: '-3%', +}); + +export const profileImageWrapper = style({ + width: '30px', + height: '30px', + + position: 'relative', +}); + +export const ownerProfileImage = style({ + borderRadius: '50%', +}); + +export const simpleListWrapper = style({ + height: 'auto', + padding: '20px 16px', + marginBottom: '16px', + + display: 'flex', + flexDirection: 'column', + gap: '10px', + + borderTop: `1px solid ${vars.color.gray5}`, + backgroundColor: vars.color.white, +}); diff --git a/src/app/(home)/_components/FeedLists.tsx b/src/app/(home)/_components/FeedLists.tsx new file mode 100644 index 00000000..a72c52ad --- /dev/null +++ b/src/app/(home)/_components/FeedLists.tsx @@ -0,0 +1,140 @@ +'use client'; + +import Image from 'next/image'; +import Link from 'next/link'; +import { useInfiniteQuery } from '@tanstack/react-query'; +import { useMemo } from 'react'; +import { assignInlineVars } from '@vanilla-extract/dynamic'; + +import SimpleList from '@/components/SimpleList/SimpleList'; +import getRecentLists from '@/app/_api/home/getRecentLists'; +import getFollowingLists from '@/app/_api/home/getFollowingLists'; +import { QUERY_KEYS } from '@/lib/constants/queryKeys'; +import useIntersectionObserver from '@/hooks/useIntersectionObserver'; +import { ListRecommendationType } from '@/lib/types/exploreType'; +import * as styles from './FeedLists.css'; +import { exploreBackgroundColors } from '@/lib/constants/exploreListBackgroundColor'; +import fallbackProfile from '/public/images/fallback_profileImage.webp'; +import { LIST_DATA as feedLists } from '@/app/(home)/mock/mockdata'; + +import { commonLocale } from '@/components/locale'; +import { useLanguage } from '@/store/useLanguage'; + +interface FeedListsType { + category?: string; + tab?: 'recent' | 'following'; +} + +function FeedLists({ category, tab = 'recent' }: FeedListsType) { + const { language } = useLanguage(); + const current_QueryKey = tab === 'recent' ? [QUERY_KEYS.getRecentLists, category] : [QUERY_KEYS.getFollowingLists]; + + const COLOR_INDEX = (num: number) => num % 5; + + //리스트 무한스크롤 리액트 쿼리 함수 + const { + data: result, + hasNextPage, + fetchNextPage, + isFetching, + } = useInfiniteQuery({ + queryKey: current_QueryKey, + queryFn: ({ pageParam: cursorUpdatedDate }) => { + if (tab === 'recent') { + return getRecentLists({ cursorUpdatedDate, category }); + } else { + return getFollowingLists({ cursorUpdatedDate }); + } + }, + initialPageParam: null, + getNextPageParam: (lastPage) => (lastPage.hasNext ? lastPage.cursorUpdatedDate : null), + }); + + const ref = useIntersectionObserver(() => { + if (hasNextPage) { + fetchNextPage(); + } + }); + + //리스트 변수화 + const feedLists = useMemo(() => { + const list = result ? result.pages.flatMap(({ lists }) => lists) : []; + return list; + }, [result]); + + // if (!result) { + // return ( + //
      + // + //
      + // ); + // } + console.log(category); + + console.log(feedLists); + + return ( +
      +
        + {feedLists?.length !== 0 && + feedLists?.map((item, index) => { + return ( + + {isFetching ? ( +
        불러오는 중입니다..
        + ) : ( + // +
      • +
        +
        + + {item?.ownerProfileImage ? ( + {commonLocale[language].listOwnerImage} + ) : ( + {commonLocale[language].listOwnerImage} + )} + +
        {item.ownerNickname}
        +
        +
        {`업데이트 ${item.updateCount}회째`}
        +
        +
        +
        {item.title}
        +
        {item.description}
        +
        +
        + +
        +
        • + )} + + ); + })} +
        +
      +
      + ); +} + +export default FeedLists; diff --git a/src/app/(home)/_components/FollowingFeed.tsx b/src/app/(home)/_components/FollowingFeed.tsx index df1da2b8..9cfcf798 100644 --- a/src/app/(home)/_components/FollowingFeed.tsx +++ b/src/app/(home)/_components/FollowingFeed.tsx @@ -1,9 +1,9 @@ -import ListRecommendation from '@/components/exploreComponents/ListsRecommendation'; +import FeedLists from '@/app/(home)/_components/FeedLists'; function FollowingFeed() { return (
      - +
      ); } diff --git a/src/app/(home)/_components/HomeTab.tsx b/src/app/(home)/_components/HomeTab.tsx index 8142b9fb..7978dbcf 100644 --- a/src/app/(home)/_components/HomeTab.tsx +++ b/src/app/(home)/_components/HomeTab.tsx @@ -29,7 +29,6 @@ function HomeTab() { 팔로잉 - {currentTab === 'recommendation' &&
      1/10
      } ); } diff --git a/src/app/(home)/_components/RecentFeed.css.ts b/src/app/(home)/_components/RecentFeed.css.ts index 95b1aa01..6c8ed0f3 100644 --- a/src/app/(home)/_components/RecentFeed.css.ts +++ b/src/app/(home)/_components/RecentFeed.css.ts @@ -10,6 +10,8 @@ export const listEndWrapper = style({ flexDirection: 'column', gap: '8px', + marginBottom: '90px', + alignItems: 'center', justifyContent: 'center', }); diff --git a/src/app/(home)/_components/RecentFeed.tsx b/src/app/(home)/_components/RecentFeed.tsx index 4fc74334..a2331d49 100644 --- a/src/app/(home)/_components/RecentFeed.tsx +++ b/src/app/(home)/_components/RecentFeed.tsx @@ -1,13 +1,23 @@ -import Categories from './Categories'; -import ListRecommendation from '@/components/exploreComponents/ListsRecommendation'; +'use client'; + +import { useState } from 'react'; + +import FeedLists from '@/app/(home)/_components/FeedLists'; import * as styles from './RecentFeed.css'; +import Categories from './Categories'; function RecentFeed() { + const [selectedCategory, setSelectedCategory] = useState('entire'); + + const handleClickCategory = (name: string) => { + setSelectedCategory(name); + }; + return (
      - - + +
      최근 리스트를 모두 확인했어요!
      30일 이내 수정 및 생성된 리스트
      diff --git a/src/app/(home)/_components/TrendingLists.tsx b/src/app/(home)/_components/TrendingLists.tsx index 10c8af4d..334430af 100644 --- a/src/app/(home)/_components/TrendingLists.tsx +++ b/src/app/(home)/_components/TrendingLists.tsx @@ -9,7 +9,7 @@ import { Swiper, SwiperSlide } from 'swiper/react'; import 'swiper/css'; import { Autoplay, EffectCoverflow } from 'swiper/modules'; -import getTrendingLists from '@/app/_api/explore/getTrendingLists'; +import getTrendingLists from '@/app/_api/home/getTrendingLists'; import { QUERY_KEYS } from '@/lib/constants/queryKeys'; import { TrendingListType } from '@/lib/types/exploreType'; import { TRENDINGLISTS_DATA } from '../mock/mockdata'; diff --git a/src/app/__page.tsx b/src/app/__page.tsx index fb61aedb..f80f6f10 100644 --- a/src/app/__page.tsx +++ b/src/app/__page.tsx @@ -5,7 +5,7 @@ import { useRouter, useSearchParams } from 'next/navigation'; import { useEffect, Suspense } from 'react'; import dynamic from 'next/dynamic'; -import ListRecommendation from '@/components/exploreComponents/ListsRecommendation'; +import FeedLists from '@/components/exploreComponents/FeedLists'; import TrendingList from '@/app/(home)/_components/TrendingLists'; import UsersRecommendation from '@/components/exploreComponents/RecommendedUsers'; import Header from '@/components/exploreComponents/Header'; @@ -62,7 +62,7 @@ function LandingPage() { - + diff --git a/src/app/_api/home/getFollowingLists.ts b/src/app/_api/home/getFollowingLists.ts new file mode 100644 index 00000000..6f4a99c5 --- /dev/null +++ b/src/app/_api/home/getFollowingLists.ts @@ -0,0 +1,22 @@ +// 리스트 조회 api +import axiosInstance from '@/lib/axios/axiosInstance'; +//리스트 추천 상위 10개 +interface GetFollowingListType { + cursorUpdatedDate?: string | null; +} + +const getFollowingLists = async ({ cursorUpdatedDate }: GetFollowingListType) => { + const params = new URLSearchParams({ + size: '10', + }); + + if (cursorUpdatedDate) { + params.append('cursorUpdatedDate', cursorUpdatedDate); + } + + const response = await axiosInstance.get(`/lists/following?${params.toString()}`); + + return response.data; +}; + +export default getFollowingLists; diff --git a/src/app/_api/home/getRecentLists.ts b/src/app/_api/home/getRecentLists.ts new file mode 100644 index 00000000..372d1d85 --- /dev/null +++ b/src/app/_api/home/getRecentLists.ts @@ -0,0 +1,27 @@ +// 리스트 조회 api +import axiosInstance from '@/lib/axios/axiosInstance'; +//리스트 추천 상위 10개 +interface GetRecentListsType { + cursorUpdatedDate?: string | null; + category?: string; +} + +const getRecentLists = async ({ cursorUpdatedDate, category = 'entire' }: GetRecentListsType) => { + const params = new URLSearchParams({ + size: '10', + }); + + if (cursorUpdatedDate) { + params.append('cursorUpdatedDate', cursorUpdatedDate); + } + + if (category) { + params.append('category', category); + } + + const response = await axiosInstance.get(`/lists?${params.toString()}`); + + return response.data; +}; + +export default getRecentLists; diff --git a/src/app/_api/explore/getRecommendedLists.ts b/src/app/_api/home/getRecommendedLists.ts similarity index 100% rename from src/app/_api/explore/getRecommendedLists.ts rename to src/app/_api/home/getRecommendedLists.ts diff --git a/src/app/_api/explore/getRecommendedUsers.ts b/src/app/_api/home/getRecommendedUsers.ts similarity index 100% rename from src/app/_api/explore/getRecommendedUsers.ts rename to src/app/_api/home/getRecommendedUsers.ts diff --git a/src/app/_api/explore/getTrendingLists.ts b/src/app/_api/home/getTrendingLists.ts similarity index 100% rename from src/app/_api/explore/getTrendingLists.ts rename to src/app/_api/home/getTrendingLists.ts diff --git a/src/components/BottomNav/BottomNav.css.ts b/src/components/BottomNav/BottomNav.css.ts index 17d96eca..15ddda1d 100644 --- a/src/components/BottomNav/BottomNav.css.ts +++ b/src/components/BottomNav/BottomNav.css.ts @@ -11,6 +11,7 @@ export const bottomTapContainer = style({ display: 'flex', backgroundColor: vars.color.bggray, + zIndex: 30, }); const bottomTap = style({ diff --git a/src/components/SimpleList/SimpleList.css.ts b/src/components/SimpleList/SimpleList.css.ts index 29af405f..b9fd1438 100644 --- a/src/components/SimpleList/SimpleList.css.ts +++ b/src/components/SimpleList/SimpleList.css.ts @@ -1,6 +1,4 @@ import { style } from '@vanilla-extract/css'; -import { vars } from '@/styles/__theme.css'; -import { titleMedium, bodyRegular } from '@/styles/__font.css'; export const simpleItemWrapper = style({ width: '100%', @@ -37,7 +35,7 @@ export const rankText = style({ fontSize: '1.8rem', fontWeight: '500', letterSpacing: '-0.6px', - zIndex: 3, + zIndex: 1, }); export const rank1 = style([ diff --git a/src/components/exploreComponents/ListsRecommendation.tsx b/src/components/exploreComponents/FeedLists.tsx similarity index 94% rename from src/components/exploreComponents/ListsRecommendation.tsx rename to src/components/exploreComponents/FeedLists.tsx index bc56bea1..547ea9b8 100644 --- a/src/components/exploreComponents/ListsRecommendation.tsx +++ b/src/components/exploreComponents/FeedLists.tsx @@ -3,11 +3,12 @@ import Image from 'next/image'; import Link from 'next/link'; import { useInfiniteQuery } from '@tanstack/react-query'; + import { useMemo } from 'react'; import { assignInlineVars } from '@vanilla-extract/dynamic'; import SimpleList from '@/components/SimpleList/SimpleList'; -import getRecommendedLists from '@/app/_api/explore/getRecommendedLists'; +import getRecentLists from '@/app/_api/home/getRecentLists'; import { QUERY_KEYS } from '@/lib/constants/queryKeys'; import useIntersectionObserver from '@/hooks/useIntersectionObserver'; import { ListRecommendationType } from '@/lib/types/exploreType'; @@ -20,8 +21,9 @@ import { LIST_DATA } from '@/app/(home)/mock/mockdata'; import { commonLocale } from '@/components/locale'; import { useLanguage } from '@/store/useLanguage'; -function ListRecommendation() { +function FeedLists() { const { language } = useLanguage(); + const COLOR_INDEX = (num: number) => num % 5; //리스트 무한스크롤 리액트 쿼리 함수 @@ -31,9 +33,9 @@ function ListRecommendation() { fetchNextPage, isFetching, } = useInfiniteQuery({ - queryKey: [QUERY_KEYS.getRecommendedLists], + queryKey: [QUERY_KEYS.getRecentLists], queryFn: ({ pageParam: cursorUpdatedDate }) => { - return getRecommendedLists({ cursorUpdatedDate: cursorUpdatedDate }); + return getRecentLists({ cursorUpdatedDate: cursorUpdatedDate }); }, initialPageParam: null, getNextPageParam: (lastPage) => (lastPage.hasNext ? lastPage.cursorUpdatedDate : null), @@ -123,4 +125,4 @@ function ListRecommendation() { ); } -export default ListRecommendation; +export default FeedLists; diff --git a/src/components/exploreComponents/RecommendedUsers.css.ts b/src/components/exploreComponents/RecommendedUsers.css.ts index c9f025b2..f997f770 100644 --- a/src/components/exploreComponents/RecommendedUsers.css.ts +++ b/src/components/exploreComponents/RecommendedUsers.css.ts @@ -87,14 +87,14 @@ export const followButtonDefault = style({ alignItems: 'center', justifyContent: 'center', - backgroundColor: vars.color.white, + backgroundColor: '#3D95FF', borderRadius: '20px', - color: '#8599AD', + color: vars.color.white, fontSize: '1.2rem', fontWeight: '400', }); export const followButtonFollowing = style({ - backgroundColor: '#3D95FF', - color: vars.color.white, + backgroundColor: vars.color.white, + color: '#8599AD', }); diff --git a/src/components/exploreComponents/RecommendedUsers.tsx b/src/components/exploreComponents/RecommendedUsers.tsx index 9026cba5..547a324b 100644 --- a/src/components/exploreComponents/RecommendedUsers.tsx +++ b/src/components/exploreComponents/RecommendedUsers.tsx @@ -5,14 +5,13 @@ import Link from 'next/link'; import { useQuery } from '@tanstack/react-query'; import { QUERY_KEYS } from '@/lib/constants/queryKeys'; -import getRecommendedUsers from '@/app/_api/explore/getRecommendedUsers'; +import getRecommendedUsers from '@/app/_api/home/getRecommendedUsers'; import { useUser } from '@/store/useUser'; import FollowButton from './FollowButton'; import { UserProfileType } from '@/lib/types/userProfileType'; import fallbackProfile from '/public/images/fallback_profileImage.webp'; import * as styles from './RecommendedUsers.css'; -import waveEmoji from '/public/images/wave.png'; import { UserListsSkeleton } from './Skeleton'; import { commonLocale } from '@/components/locale'; import { useLanguage } from '@/store/useLanguage'; diff --git a/src/components/exploreComponents/TrendingLists.tsx b/src/components/exploreComponents/TrendingLists.tsx index f947bb93..2b9250c8 100644 --- a/src/components/exploreComponents/TrendingLists.tsx +++ b/src/components/exploreComponents/TrendingLists.tsx @@ -7,7 +7,7 @@ import { Swiper, SwiperSlide } from 'swiper/react'; import 'swiper/css'; import { Autoplay, EffectCoverflow } from 'swiper/modules'; -import getTrendingLists from '@/app/_api/explore/getTrendingLists'; +import getTrendingLists from '@/app/_api/home/getTrendingLists'; import { QUERY_KEYS } from '@/lib/constants/queryKeys'; import { TrendingListType } from '@/lib/types/exploreType'; diff --git a/src/lib/constants/queryKeys.ts b/src/lib/constants/queryKeys.ts index f46c1252..a7dfde9e 100644 --- a/src/lib/constants/queryKeys.ts +++ b/src/lib/constants/queryKeys.ts @@ -7,6 +7,8 @@ export const QUERY_KEYS = { getCategories: 'getCategories', getComments: 'getComments', getRecommendedLists: 'getRecommendedLists', + getRecentLists: 'getRecentLists', + getFollowingLists: 'getFollowingLists', getRecommendedUsers: 'getRecommendedUsers', getTrendingLists: 'getTrendingLists', getNotificationAllChecked: 'getNotificationOnAllChecked', From 767f53a56dac9688904b8106b7438f3ffb5188b1 Mon Sep 17 00:00:00 2001 From: Nahyun Date: Fri, 27 Sep 2024 22:11:51 +0900 Subject: [PATCH 56/86] =?UTF-8?q?Feat:=20=ED=8C=94=EB=A1=9C=EC=9E=89=20?= =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EA=B5=AC=ED=98=84=20=EC=99=84?= =?UTF-8?q?=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(home)/_components/FeedLists.tsx | 153 +++++++++++-------- src/app/(home)/_components/FollowingFeed.tsx | 41 ++++- src/components/NoData/NoDataButton.css.ts | 13 ++ src/components/NoData/NoDataButton.tsx | 16 ++ 4 files changed, 159 insertions(+), 64 deletions(-) create mode 100644 src/components/NoData/NoDataButton.css.ts create mode 100644 src/components/NoData/NoDataButton.tsx diff --git a/src/app/(home)/_components/FeedLists.tsx b/src/app/(home)/_components/FeedLists.tsx index a72c52ad..e9730d65 100644 --- a/src/app/(home)/_components/FeedLists.tsx +++ b/src/app/(home)/_components/FeedLists.tsx @@ -11,14 +11,16 @@ import getRecentLists from '@/app/_api/home/getRecentLists'; import getFollowingLists from '@/app/_api/home/getFollowingLists'; import { QUERY_KEYS } from '@/lib/constants/queryKeys'; import useIntersectionObserver from '@/hooks/useIntersectionObserver'; -import { ListRecommendationType } from '@/lib/types/exploreType'; import * as styles from './FeedLists.css'; import { exploreBackgroundColors } from '@/lib/constants/exploreListBackgroundColor'; import fallbackProfile from '/public/images/fallback_profileImage.webp'; import { LIST_DATA as feedLists } from '@/app/(home)/mock/mockdata'; +import NoDataComponent from '@/components/NoData/NoDataComponent'; +import NoDataButton from '@/components/NoData/NoDataButton'; import { commonLocale } from '@/components/locale'; import { useLanguage } from '@/store/useLanguage'; +import { useTab } from '@/store/useTab'; interface FeedListsType { category?: string; @@ -26,10 +28,8 @@ interface FeedListsType { } function FeedLists({ category, tab = 'recent' }: FeedListsType) { - const { language } = useLanguage(); const current_QueryKey = tab === 'recent' ? [QUERY_KEYS.getRecentLists, category] : [QUERY_KEYS.getFollowingLists]; - - const COLOR_INDEX = (num: number) => num % 5; + const { setCurrentTab } = useTab(); //리스트 무한스크롤 리액트 쿼리 함수 const { @@ -62,6 +62,10 @@ function FeedLists({ category, tab = 'recent' }: FeedListsType) { return list; }, [result]); + const handleClickNoDataButton = () => { + setCurrentTab('recommendation'); + }; + // if (!result) { // return ( //
      @@ -75,66 +79,93 @@ function FeedLists({ category, tab = 'recent' }: FeedListsType) { return (
      -
        - {feedLists?.length !== 0 && - feedLists?.map((item, index) => { - return ( - - {isFetching ? ( -
        불러오는 중입니다..
        - ) : ( - // -
      • -
        -
        - - {item?.ownerProfileImage ? ( - {commonLocale[language].listOwnerImage} - ) : ( - {commonLocale[language].listOwnerImage} - )} - -
        {item.ownerNickname}
        -
        -
        {`업데이트 ${item.updateCount}회째`}
        -
        -
        -
        {item.title}
        -
        {item.description}
        -
        -
        - -
        + {isFetching ? ( +
        불러오는 중입니다..
        + ) : ( +
          + {feedLists && feedLists?.length !== 0 ? ( + feedLists?.map((item, index) => { + return ( + +
        • +
          • - )} - - ); - })} -
          -
        + + ); + }) + ) : ( +
        + {tab === 'following' && ( + 추천 리스터 보러가기} + /> + )} +
        + )} +
        +
      + )}
      ); } export default FeedLists; + +/**@Todo 아이템 타입 정리 */ +interface FeedListItemType { + index: number; + item: any; +} + +function FeedListItem({ item, index }: FeedListItemType) { + const { language } = useLanguage(); + + const COLOR_INDEX = (num: number) => num % 5; + + return ( +
      +
      +
      + + {item?.ownerProfileImage ? ( + {commonLocale[language].listOwnerImage} + ) : ( + {commonLocale[language].listOwnerImage} + )} + +
      {item.ownerNickname}
      +
      +
      {`업데이트 ${item.updateCount}회째`}
      +
      +
      +
      {item.title}
      +
      {item.description}
      +
      +
      + +
      +
      + ); +} diff --git a/src/app/(home)/_components/FollowingFeed.tsx b/src/app/(home)/_components/FollowingFeed.tsx index 9cfcf798..fbabad23 100644 --- a/src/app/(home)/_components/FollowingFeed.tsx +++ b/src/app/(home)/_components/FollowingFeed.tsx @@ -1,10 +1,45 @@ +'use client'; + +import { useState, useEffect } from 'react'; + import FeedLists from '@/app/(home)/_components/FeedLists'; +import NoDataComponent from '@/components/NoData/NoDataComponent'; +import NoDataButton from '@/components/NoData/NoDataButton'; +import Modal from '@/components/Modal/Modal'; +import LoginModal from '@/components/login/LoginModal'; + +import useBooleanOutput from '@/hooks/useBooleanOutput'; +import { getCookie } from '@/lib/utils/cookie'; function FollowingFeed() { + const [isLoggedIn, setIsLoggedIn] = useState(false); + const { isOn, handleSetOn, handleSetOff } = useBooleanOutput(); + + const handleClickNoDataButton = () => { + handleSetOn(); + }; + + useEffect(() => { + const accessToken = getCookie('accessToken'); + setIsLoggedIn(accessToken !== null && accessToken !== undefined); + }, []); + return ( -
      - -
      + <> + {!isLoggedIn ? ( + 로그인 하러가기} + /> + ) : ( + + )} + {isOn && ( + + + + )} + ); } diff --git a/src/components/NoData/NoDataButton.css.ts b/src/components/NoData/NoDataButton.css.ts new file mode 100644 index 00000000..ec97ec79 --- /dev/null +++ b/src/components/NoData/NoDataButton.css.ts @@ -0,0 +1,13 @@ +import { style } from '@vanilla-extract/css'; +import { vars } from '@/styles/__theme.css'; + +export const buttonWrapper = style({ + padding: '7px 14px', + + backgroundColor: vars.color.white, + border: '1px solid #3D95FF4D', + borderRadius: '9999px', + + color: '#3D95FF', + fontSize: '1.4rem', +}); diff --git a/src/components/NoData/NoDataButton.tsx b/src/components/NoData/NoDataButton.tsx new file mode 100644 index 00000000..c0c35481 --- /dev/null +++ b/src/components/NoData/NoDataButton.tsx @@ -0,0 +1,16 @@ +import { ReactNode } from 'react'; + +import * as styles from './NoDataButton.css'; + +interface NoDataButtonType { + children: ReactNode; + onClick: () => void; +} + +export default function NoDataButton({ children, onClick }: NoDataButtonType) { + return ( + + ); +} From f579dc5acbf84421668b0a895f9d33900dedde7f Mon Sep 17 00:00:00 2001 From: Nahyun Date: Mon, 14 Oct 2024 19:48:31 +0900 Subject: [PATCH 57/86] =?UTF-8?q?Style:=20=EC=9D=BC=EB=B6=80=20=EC=BD=94?= =?UTF-8?q?=EB=93=9C=20=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(home)/_components/FeedLists.css.ts | 2 +- src/app/(home)/_components/Header.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/(home)/_components/FeedLists.css.ts b/src/app/(home)/_components/FeedLists.css.ts index 0dee9bf2..70e54f0e 100644 --- a/src/app/(home)/_components/FeedLists.css.ts +++ b/src/app/(home)/_components/FeedLists.css.ts @@ -1,6 +1,6 @@ import { style, createVar, keyframes } from '@vanilla-extract/css'; import { vars } from '@/styles/__theme.css'; -import { headlineSmall, bodyMedium, bodySmall, labelSmall } from '@/styles/__font.css'; +import { headlineSmall } from '@/styles/__font.css'; export const listBackground = createVar(); diff --git a/src/app/(home)/_components/Header.tsx b/src/app/(home)/_components/Header.tsx index bb32261b..20f8fd51 100644 --- a/src/app/(home)/_components/Header.tsx +++ b/src/app/(home)/_components/Header.tsx @@ -26,7 +26,7 @@ import Avatar from '/public/icons/ver3/avatar.svg'; function Header() { const [isSearchBarOpened, setIsSearchBarOpened] = useState(false); const { isOn, handleSetOn, handleSetOff } = useBooleanOutput(); - const [isLoggedIn, setIsLoggedIn] = useState(false); // 로그인 상태를 관리하는 useState 추가 + const [isLoggedIn, setIsLoggedIn] = useState(false); const { user } = useUser(); @@ -51,7 +51,7 @@ function Header() { useEffect(() => { const accessToken = getCookie('accessToken'); setIsLoggedIn(accessToken !== null && accessToken !== undefined); - }, []); // useEffect를 사용해 클라이언트 측에서만 실행되도록 함 + }, []); return (
      From 3e9df905128bd8fc058d0266b0377a3aa7b95c45 Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Sun, 13 Oct 2024 11:05:15 +0900 Subject: [PATCH 58/86] =?UTF-8?q?rename:=20=EC=BD=9C=EB=A0=89=EC=85=98=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20Ver2.0=20=ED=8C=8C=EC=9D=BC=20?= =?UTF-8?q?=EA=B5=AC=EB=B6=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../{collectList.ts => __collectList.ts} | 0 .../{getCollection.ts => __getCollection.ts} | 0 ...gories.ts => __getCollectionCategories.ts} | 0 src/app/collection/[category]/page.tsx | 2 +- src/app/collection/__page.css.ts | 70 ++++++++++++++ src/app/collection/__page.tsx | 96 +++++++++++++++++++ .../ListDetailInner/CollectButton.tsx | 2 +- 7 files changed, 168 insertions(+), 2 deletions(-) rename src/app/_api/collect/{collectList.ts => __collectList.ts} (100%) rename src/app/_api/collect/{getCollection.ts => __getCollection.ts} (100%) rename src/app/_api/collect/{getCollectionCategories.ts => __getCollectionCategories.ts} (100%) create mode 100644 src/app/collection/__page.css.ts create mode 100644 src/app/collection/__page.tsx diff --git a/src/app/_api/collect/collectList.ts b/src/app/_api/collect/__collectList.ts similarity index 100% rename from src/app/_api/collect/collectList.ts rename to src/app/_api/collect/__collectList.ts diff --git a/src/app/_api/collect/getCollection.ts b/src/app/_api/collect/__getCollection.ts similarity index 100% rename from src/app/_api/collect/getCollection.ts rename to src/app/_api/collect/__getCollection.ts diff --git a/src/app/_api/collect/getCollectionCategories.ts b/src/app/_api/collect/__getCollectionCategories.ts similarity index 100% rename from src/app/_api/collect/getCollectionCategories.ts rename to src/app/_api/collect/__getCollectionCategories.ts diff --git a/src/app/collection/[category]/page.tsx b/src/app/collection/[category]/page.tsx index 0f934241..fd29dcb0 100644 --- a/src/app/collection/[category]/page.tsx +++ b/src/app/collection/[category]/page.tsx @@ -8,7 +8,7 @@ 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 getCollection from '@/app/_api/collect/__getCollection'; import Top3CardSkeleton from '@/app/collection/[category]/_components/Top3CardSkeleton'; import NoData from '@/app/collection/[category]/_components/NoData'; import { CollectionType } from '@/lib/types/listType'; diff --git a/src/app/collection/__page.css.ts b/src/app/collection/__page.css.ts new file mode 100644 index 00000000..5371635a --- /dev/null +++ b/src/app/collection/__page.css.ts @@ -0,0 +1,70 @@ +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 new file mode 100644 index 00000000..3adf1e77 --- /dev/null +++ b/src/app/collection/__page.tsx @@ -0,0 +1,96 @@ +// 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/list/[listId]/_components/ListDetailInner/CollectButton.tsx b/src/app/list/[listId]/_components/ListDetailInner/CollectButton.tsx index c30d34fe..d5453896 100644 --- a/src/app/list/[listId]/_components/ListDetailInner/CollectButton.tsx +++ b/src/app/list/[listId]/_components/ListDetailInner/CollectButton.tsx @@ -6,7 +6,7 @@ import { QUERY_KEYS } from '@/lib/constants/queryKeys'; import { AxiosError } from 'axios'; import { useUser } from '@/store/useUser'; import numberFormatter from '@/lib/utils/numberFormatter'; -import collectList from '@/app/_api/collect/collectList'; +import collectList from '@/app/_api/collect/__collectList'; import toasting from '@/lib/utils/toasting'; import CollectIcon from '/public/icons/collect.svg'; import CollectedIcon from '/public/icons/collected.svg'; From c1abff33f9028988480b9cbce75c6f931016c814 Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Sun, 13 Oct 2024 11:06:34 +0900 Subject: [PATCH 59/86] =?UTF-8?q?feat:=20mock=20data=EB=A1=9C=20=EC=BD=9C?= =?UTF-8?q?=EB=A0=89=EC=85=98=20=ED=8E=98=EC=9D=B4=EC=A7=80=20Ver3.0=20UI?= =?UTF-8?q?=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/collection/mockData.ts | 44 +++++++ src/app/collection/page.css.ts | 108 ++++++++++-------- src/app/collection/page.tsx | 105 ++++------------- src/app/user/[userId]/_components/Content.tsx | 2 +- src/components/BottomNav/BottomNav.tsx | 2 +- 5 files changed, 129 insertions(+), 132 deletions(-) create mode 100644 src/app/collection/mockData.ts diff --git a/src/app/collection/mockData.ts b/src/app/collection/mockData.ts new file mode 100644 index 00000000..d0f87e6d --- /dev/null +++ b/src/app/collection/mockData.ts @@ -0,0 +1,44 @@ +import { FoldersType } from '@/lib/types/folderType'; + +export const FOLDERS: FoldersType[] = [ + { + folderId: 1, + folderName: '가을밤에 든 생각', + listCount: 3, + }, + { + folderId: 2, + folderName: '좋아하는 글귀', + listCount: 1, + }, + { + folderId: 3, + folderName: '드라마/영화', + listCount: 10, + }, + { + folderId: 4, + folderName: '코딩 노래', + listCount: 100, + }, + { + folderId: 5, + folderName: '2024 축제', + listCount: 16, + }, + { + folderId: 6, + folderName: '커피/디저트', + listCount: 20, + }, + { + folderId: 7, + folderName: '가보고 싶은 곳', + listCount: 49, + }, + { + folderId: 8, + folderName: '그냥', + listCount: 0, + }, +]; diff --git a/src/app/collection/page.css.ts b/src/app/collection/page.css.ts index 5371635a..77b1c24b 100644 --- a/src/app/collection/page.css.ts +++ b/src/app/collection/page.css.ts @@ -1,70 +1,80 @@ -import { style, keyframes } from '@vanilla-extract/css'; -import * as fonts from '@/styles/__font.css'; +import { style } from '@vanilla-extract/css'; +import { vars } from '@/styles/theme.css'; +import { Label } 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', +export const folders = style({ + padding: '2.4rem 4.8rem', display: 'grid', gridTemplateColumns: '1fr 1fr', - gridTemplateRows: 'repeat(5, 1fr)', - gridColumnGap: 15, - gridRowGap: 25, + gridColumnGap: 34, + gridRowGap: 34, }); -export const categoryContainer = style({ - height: '100%', +export const folder = style({ + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + gap: 16, + cursor: 'pointer', + + selectors: { + '&:hover': { + transform: 'translateY(-10%)', + }, + }, + transition: 'transform 0.2s ease', }); -export const categoryFolder = style({ - width: 160, - height: 120, - margin: 'auto', +export const folderShape = style({ position: 'relative', - - cursor: 'pointer', + width: 130, + height: 96, }); -export const folderIcon = style({ - width: 160, - height: 120, +export const topShape = style({ + position: 'absolute', + top: 10, + left: 0, + + width: 130, + height: 69.83, + + backgroundColor: '#9CC9FF', // TODO opacity: 0.7 또는 color 변경 + borderTopLeftRadius: 12, + borderTopRightRadius: 12, }); -const folderHoverAnimation = keyframes({ - '0%': { - transform: 'scale(1)', - }, - '100%': { - transform: 'scale(1.2)', - }, +export const topLeftShape = style({ + position: 'absolute', + top: 0, + left: 0, + + width: 66.62, + height: 83.69, + + backgroundColor: '#9CC9FF', // TODO opacity: 0.7 또는 color 변경 + borderTopLeftRadius: 12, + borderTopRightRadius: 23, }); -export const categoryIcon = style({ +export const bottomShape = style({ position: 'absolute', - bottom: 22, - left: '50%', - marginLeft: -25, + bottom: 0, + left: 0, - selectors: { - [`${categoryFolder}:hover &`]: { - animation: `${folderHoverAnimation} 0.1s forwards`, - }, - }, + width: 130, + height: 76.83, + + backgroundColor: '#E3EEFF', + borderRadius: 12, }); -export const categoryLabel = style([ - fonts.titleSmall, +export const title = style([ + Label, { - marginTop: '1.4rem', - textAlign: 'center', + display: 'flex', + gap: 6, + alignItems: 'center', + color: vars.color.black, }, ]); diff --git a/src/app/collection/page.tsx b/src/app/collection/page.tsx index ba68de40..7aa327a4 100644 --- a/src/app/collection/page.tsx +++ b/src/app/collection/page.tsx @@ -1,94 +1,37 @@ '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 Header from '@/components/Header/Header'; 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 ; - } -}; +import { FOLDERS } from './mockData'; export default function CollectionPage() { - const { language } = useLanguage(); - const router = useRouter(); - - const { data } = useQuery({ - queryKey: [QUERY_KEYS.getCollectionCategories], - queryFn: getCollectionCategories, - }); + // const { data } = useQuery({ + // queryKey: [QUERY_KEYS.getFolders], + // queryFn: getFolders, + // }); - const handleCategoryClick = (category: string) => { - router.push(`/collection/${category}`); - }; + const folders = FOLDERS; + console.log(folders); return ( -
      -
      {collectionLocale[language].collection}
      -
      - {data && - data.map((category) => ( -
      -
      { - handleCategoryClick(category.engName); - }} - > - {`${category.korName} -
      {codeToFolderIcon(category.code, language)}
      -
      -

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

      +
      +
      +
      + {folders.map((folder) => ( +
      +
      +
      +
      +
      - ))} +

      + {folder.folderName} + {`(${folder.listCount})`} +

      +
      + ))}
      -
      +
      ); } diff --git a/src/app/user/[userId]/_components/Content.tsx b/src/app/user/[userId]/_components/Content.tsx index b04367ea..eb5eb85e 100644 --- a/src/app/user/[userId]/_components/Content.tsx +++ b/src/app/user/[userId]/_components/Content.tsx @@ -113,7 +113,7 @@ export default function Content({ userId, type }: ContentProps) {

      {`${userData?.nickname}님의 리스트`}

      - + 콜렉션 diff --git a/src/components/BottomNav/BottomNav.tsx b/src/components/BottomNav/BottomNav.tsx index f47bd153..59c63e0a 100644 --- a/src/components/BottomNav/BottomNav.tsx +++ b/src/components/BottomNav/BottomNav.tsx @@ -36,7 +36,7 @@ export default function BottomNav() { const userId = user.id; - const visiblePaths = ['/', '/mylist', 'collection']; + const visiblePaths = ['/', '/mylist']; const isVisible = visiblePaths.some((path) => pathname?.endsWith(path)); if (!isVisible) { From e0621b035e6c54a6c8af90a79858c644610ba5d9 Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Sun, 13 Oct 2024 11:47:33 +0900 Subject: [PATCH 60/86] =?UTF-8?q?Style:=20=ED=8F=B4=EB=8D=94=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=ED=95=98=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20=EB=A7=88?= =?UTF-8?q?=ED=81=AC=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/icons/new/add.svg | 1 + src/app/collection/page.css.ts | 31 +++++++++++++++++++++++++++++++ src/app/collection/page.tsx | 7 +++++++ 3 files changed, 39 insertions(+) create mode 100644 public/icons/new/add.svg diff --git a/public/icons/new/add.svg b/public/icons/new/add.svg new file mode 100644 index 00000000..e2827a32 --- /dev/null +++ b/public/icons/new/add.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/collection/page.css.ts b/src/app/collection/page.css.ts index 77b1c24b..3712ca7f 100644 --- a/src/app/collection/page.css.ts +++ b/src/app/collection/page.css.ts @@ -10,6 +10,7 @@ export const folders = style({ gridRowGap: 34, }); +// 폴더 export const folder = style({ display: 'flex', flexDirection: 'column', @@ -78,3 +79,33 @@ export const title = style([ color: vars.color.black, }, ]); + +// 폴더 버튼 +export const addFolderButtonContainer = style({ + position: 'sticky', + bottom: 0, + padding: '1.6rem', + + display: 'flex', + justifyContent: 'center', + alignItems: 'center', +}); + +export const addFolderButton = style({ + padding: '16px 10px 14px 10px', + width: '100%', + maxWidth: 358, + + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + gap: 10, + + border: '1px solid rgba(61, 149, 255, 0.50)', + borderRadius: 18, + backgroundColor: vars.color.white, + + color: vars.color.blue, + fontSize: '1.6rem', + fontWeight: 700, +}); diff --git a/src/app/collection/page.tsx b/src/app/collection/page.tsx index 7aa327a4..2a664ded 100644 --- a/src/app/collection/page.tsx +++ b/src/app/collection/page.tsx @@ -1,5 +1,6 @@ 'use client'; +import Image from 'next/image'; import Header from '@/components/Header/Header'; import * as styles from './page.css'; @@ -32,6 +33,12 @@ export default function CollectionPage() {
      ))}
      +
      + +
); } From cbdd77295e4a270fbdc9eafe604a923f765a45e2 Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Sun, 13 Oct 2024 12:43:51 +0900 Subject: [PATCH 61/86] =?UTF-8?q?Design:=20=EC=BD=9C=EB=A0=89=EC=85=98=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=B0=94=ED=85=80=EC=8B=9C?= =?UTF-8?q?=ED=8A=B8=20=EB=A7=88=ED=81=AC=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../collection/_components/BottomSheet.css.ts | 30 +++++++++++++++++++ .../collection/_components/BottomSheet.tsx | 18 +++++++++++ src/app/collection/page.tsx | 7 ++++- 3 files changed, 54 insertions(+), 1 deletion(-) create mode 100644 src/app/collection/_components/BottomSheet.css.ts create mode 100644 src/app/collection/_components/BottomSheet.tsx diff --git a/src/app/collection/_components/BottomSheet.css.ts b/src/app/collection/_components/BottomSheet.css.ts new file mode 100644 index 00000000..c28e391d --- /dev/null +++ b/src/app/collection/_components/BottomSheet.css.ts @@ -0,0 +1,30 @@ +import { style, styleVariants } from '@vanilla-extract/css'; +import { vars } from '@/styles/theme.css'; + +const containerStyle = style({ + position: 'fixed', + bottom: 0, + left: 0, + right: 0, + margin: 'auto', + + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + + borderRadius: '40px 40px 0px 0px', + background: vars.color.white, + boxShadow: '0px -4px 40px 0px #D9D9D9', + + transition: 'all 0.2s linear', + zIndex: -1, +}); + +export const container = styleVariants({ + open: [containerStyle, { height: 216, opacity: 1, zIndex: 1 }], + close: [containerStyle, { height: 0.5, opacity: 0 }], +}); + +export const contents = style({ + padding: '4rem', +}); diff --git a/src/app/collection/_components/BottomSheet.tsx b/src/app/collection/_components/BottomSheet.tsx new file mode 100644 index 00000000..3000bf12 --- /dev/null +++ b/src/app/collection/_components/BottomSheet.tsx @@ -0,0 +1,18 @@ +import * as styles from './BottomSheet.css'; + +interface BottomSheetProps { + isOn: boolean; + onClose: () => void; +} + +export default function BottomSheet({ isOn, onClose }: BottomSheetProps) { + console.log(isOn); + + return ( +
+
+ 바텀시트 +
+
+ ); +} diff --git a/src/app/collection/page.tsx b/src/app/collection/page.tsx index 2a664ded..fa8271e2 100644 --- a/src/app/collection/page.tsx +++ b/src/app/collection/page.tsx @@ -5,6 +5,8 @@ import Header from '@/components/Header/Header'; import * as styles from './page.css'; import { FOLDERS } from './mockData'; +import useBooleanOutput from '@/hooks/useBooleanOutput'; +import BottomSheet from './_components/BottomSheet'; export default function CollectionPage() { // const { data } = useQuery({ @@ -15,6 +17,8 @@ export default function CollectionPage() { const folders = FOLDERS; console.log(folders); + const { isOn, handleSetOn, handleSetOff } = useBooleanOutput(false); + return (
@@ -34,11 +38,12 @@ export default function CollectionPage() { ))}
-
+
); } From 9225314c064ca4dd05e4ffa7ef36178484840f8f Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Sun, 13 Oct 2024 13:24:57 +0900 Subject: [PATCH 62/86] =?UTF-8?q?Design:=20=EB=B0=94=ED=85=80=EC=8B=9C?= =?UTF-8?q?=ED=8A=B8=20=EC=A0=9C=EB=AA=A9,=20=EC=9D=B8=ED=92=8B,=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EB=A7=88=ED=81=AC=EC=97=85=20=EB=B0=8F=20?= =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../collection/_components/BottomSheet.css.ts | 54 ++++++++++++++++++- .../collection/_components/BottomSheet.tsx | 11 +++- 2 files changed, 62 insertions(+), 3 deletions(-) diff --git a/src/app/collection/_components/BottomSheet.css.ts b/src/app/collection/_components/BottomSheet.css.ts index c28e391d..919ab11d 100644 --- a/src/app/collection/_components/BottomSheet.css.ts +++ b/src/app/collection/_components/BottomSheet.css.ts @@ -1,5 +1,6 @@ import { style, styleVariants } from '@vanilla-extract/css'; import { vars } from '@/styles/theme.css'; +import { Subtitle } from '@/styles/font.css'; const containerStyle = style({ position: 'fixed', @@ -26,5 +27,56 @@ export const container = styleVariants({ }); export const contents = style({ - padding: '4rem', + paddingTop: '3.3rem', + paddingLeft: '2rem', + paddingRight: '2rem', + + width: '100%', + height: '100%', + + display: 'flex', + flexDirection: 'column', + gap: 12, +}); + +export const contentTitle = style([ + Subtitle, + { + color: vars.color.black, + textAlign: 'center', + }, +]); + +export const contentInput = style({ + padding: '2rem 2.4rem', + backgroundColor: '#F5F6FA', + borderRadius: 18, + + color: vars.color.black, + fontSize: '1.6rem', + fontWeight: 400, +}); + +export const optionButtons = style({ + margin: 12, + display: 'flex', + justifyContent: 'space-between', + height: '100%', +}); + +const button = style({ + flexGrow: 1, + + display: 'flex', + alignItems: 'flex-start', + justifyContent: 'center', + + fontSize: '1.6rem', + fontWeight: 400, + color: vars.color.black, +}); + +export const variantButton = styleVariants({ + default: [button], + active: [button, { color: vars.color.blue }], }); diff --git a/src/app/collection/_components/BottomSheet.tsx b/src/app/collection/_components/BottomSheet.tsx index 3000bf12..612d7a02 100644 --- a/src/app/collection/_components/BottomSheet.tsx +++ b/src/app/collection/_components/BottomSheet.tsx @@ -10,8 +10,15 @@ export default function BottomSheet({ isOn, onClose }: BottomSheetProps) { return (
-
- 바텀시트 +
+

새로운 폴더

+ +
+ + +
); From fcdc7d3179019a49b3cd75de65de6901bfdae6e2 Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Sun, 13 Oct 2024 20:03:52 +0900 Subject: [PATCH 63/86] =?UTF-8?q?Design:=20content=20=EB=86=92=EC=9D=B4=20?= =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/collection/page.css.ts | 9 +++++++- src/app/collection/page.tsx | 40 ++++++++++++++++++---------------- 2 files changed, 29 insertions(+), 20 deletions(-) diff --git a/src/app/collection/page.css.ts b/src/app/collection/page.css.ts index 3712ca7f..cadfb9cb 100644 --- a/src/app/collection/page.css.ts +++ b/src/app/collection/page.css.ts @@ -2,6 +2,12 @@ import { style } from '@vanilla-extract/css'; import { vars } from '@/styles/theme.css'; import { Label } from '@/styles/font.css'; +export const container = style({ + position: 'relative', + paddingBottom: 83, + height: 'calc(100% - 70px)', +}); + export const folders = style({ padding: '2.4rem 4.8rem', display: 'grid', @@ -82,9 +88,10 @@ export const title = style([ // 폴더 버튼 export const addFolderButtonContainer = style({ - position: 'sticky', + position: 'fixed', bottom: 0, padding: '1.6rem', + width: '100%', display: 'flex', justifyContent: 'center', diff --git a/src/app/collection/page.tsx b/src/app/collection/page.tsx index fa8271e2..e86412ea 100644 --- a/src/app/collection/page.tsx +++ b/src/app/collection/page.tsx @@ -22,26 +22,28 @@ export default function CollectionPage() { return (
-
- {folders.map((folder) => ( -
-
-
-
-
+
+
+ {folders.map((folder) => ( +
+
+
+
+
+
+

+ {folder.folderName} + {`(${folder.listCount})`} +

-

- {folder.folderName} - {`(${folder.listCount})`} -

-
- ))} -
-
- + ))} +
+
+ +
From 4f53c1b96c6bc74d5f3e57c642a20bd512ae544e Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Sun, 13 Oct 2024 21:36:46 +0900 Subject: [PATCH 64/86] =?UTF-8?q?Feat:=20=ED=8F=B4=EB=8D=94=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1=ED=95=98=EA=B8=B0=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84=20(API=20=EC=97=B0=EB=8F=99,=20=EC=97=90=EB=9F=AC=20?= =?UTF-8?q?=EC=BD=94=EB=93=9C=EC=97=90=20=EB=94=B0=EB=A5=B8=20=EC=97=90?= =?UTF-8?q?=EB=9F=AC=20=ED=95=B8=EB=93=A4=EB=A7=81)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/_api/folder/createFolder.ts | 9 ++ .../collection/_components/BottomSheet.tsx | 89 ++++++++++++++++--- src/lib/constants/toastMessage.ts | 6 ++ src/lib/types/folderType.ts | 5 ++ 4 files changed, 98 insertions(+), 11 deletions(-) create mode 100644 src/app/_api/folder/createFolder.ts create mode 100644 src/lib/types/folderType.ts diff --git a/src/app/_api/folder/createFolder.ts b/src/app/_api/folder/createFolder.ts new file mode 100644 index 00000000..0d03ce6e --- /dev/null +++ b/src/app/_api/folder/createFolder.ts @@ -0,0 +1,9 @@ +import axiosInstance from '@/lib/axios/axiosInstance'; +import { FoldersType } from '@/lib/types/folderType'; + +const createCollectionFolder = async (value: { folderName: string }) => { + const response = await axiosInstance.post>('/folders', value); + return response.data; +}; + +export default createCollectionFolder; diff --git a/src/app/collection/_components/BottomSheet.tsx b/src/app/collection/_components/BottomSheet.tsx index 612d7a02..a1b98eda 100644 --- a/src/app/collection/_components/BottomSheet.tsx +++ b/src/app/collection/_components/BottomSheet.tsx @@ -1,4 +1,15 @@ +import { ChangeEvent, useState } from 'react'; +import { useMutation } from '@tanstack/react-query'; +import { isAxiosError } from 'axios'; + import * as styles from './BottomSheet.css'; +import createCollectionFolder from '@/app/_api/folder/createFolder'; +import toasting from '@/lib/utils/toasting'; +import toastMessage from '@/lib/constants/toastMessage'; +import { useLanguage } from '@/store/useLanguage'; +import Modal from '@/components/Modal/Modal'; +import LoginModal from '@/components/login/LoginModal'; +import useBooleanOutput from '@/hooks/useBooleanOutput'; interface BottomSheetProps { isOn: boolean; @@ -6,20 +17,76 @@ interface BottomSheetProps { } export default function BottomSheet({ isOn, onClose }: BottomSheetProps) { - console.log(isOn); + const { language } = useLanguage(); + const { isOn: isLoginModalOn, handleSetOn: loginModalOn, handleSetOff: loginModalOff } = useBooleanOutput(); + + const [value, setValue] = useState(''); + + const createFolderMutation = useMutation({ + mutationFn: createCollectionFolder, + onSuccess: (data) => { + // TODO update folder list + setValue(''); + onClose(); + }, + onError: (error) => { + if (isAxiosError(error)) { + const errorData = error.response?.data; + if (errorData.error === 'UNAUTHORIZED') { + loginModalOn(); + return; + } + if (errorData.code.split('_')[0] === 'DUPLICATE') { + toasting({ type: 'error', txt: toastMessage[language].duplicatedFolderName }); + return; + } + } + toasting({ type: 'error', txt: toastMessage[language].failedFolder }); + }, + }); + + const handleChangeInput = (e: ChangeEvent) => { + setValue(e.target.value); + }; + + const handleCreateFolder = () => { + if (!value.trim()) { + toasting({ type: 'warning', txt: toastMessage[language].emptyFolderName }); + return; + } + createFolderMutation.mutate({ + folderName: value, + }); + }; return ( -
-
-

새로운 폴더

- -
- - + <> +
+
+

새로운 폴더

+ +
+ + +
-
+ + {isLoginModalOn && ( + + + + )} + ); } diff --git a/src/lib/constants/toastMessage.ts b/src/lib/constants/toastMessage.ts index 42bd990a..105571c3 100644 --- a/src/lib/constants/toastMessage.ts +++ b/src/lib/constants/toastMessage.ts @@ -22,6 +22,9 @@ const toastMessage: Record = { deleteListError: '리스트 삭제에 실패했어요.', visibilityListSuccess: '리스트 공개/비공개 변경을 완료했어요.', visibilityListError: '리스트 공개/비공개 변경에 실패했어요.', + emptyFolderName: '폴더명을 작성해 주세요.', + duplicatedFolderName: '이미 존재하는 폴더입니다. 다른 이름을 지어주세요.', + failedFolder: '다시 시도해 주세요.', }, en: { requiredLogin: 'Login is required.', @@ -44,6 +47,9 @@ const toastMessage: Record = { deleteListError: 'Failed to delete the list. Please try again.🥲', visibilityListSuccess: 'List visibility updated successfully.', visibilityListError: 'Failed to update list visibility. Please try again.🥲', + emptyFolderName: 'Please write the name of folder', + duplicatedFolderName: 'This folder already exists. Please give me another name.', + failedFolder: 'Please try again.', }, }; diff --git a/src/lib/types/folderType.ts b/src/lib/types/folderType.ts new file mode 100644 index 00000000..4155c8aa --- /dev/null +++ b/src/lib/types/folderType.ts @@ -0,0 +1,5 @@ +export interface FoldersType { + folderId: number; + folderName: string; + listCount: number; +} From f84cf969dcff03ae75684d678550815eed4b7387 Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Sun, 13 Oct 2024 23:04:15 +0900 Subject: [PATCH 65/86] =?UTF-8?q?Feat:=20=ED=8F=B4=EB=8D=94=20=EC=A1=B0?= =?UTF-8?q?=ED=9A=8C=ED=95=98=EA=B8=B0=20API=20=EC=97=B0=EB=8F=99=20?= =?UTF-8?q?=EB=B0=8F=20=ED=8F=B4=EB=8D=94=20=EC=83=9D=EC=84=B1=20=ED=9B=84?= =?UTF-8?q?=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EC=B5=9C=EC=8B=A0=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/_api/folder/getFolders.ts | 13 ++++++ .../collection/_components/BottomSheet.tsx | 8 ++-- src/app/collection/mockData.ts | 44 ------------------- src/app/collection/page.tsx | 23 +++++----- src/lib/constants/queryKeys.ts | 3 +- 5 files changed, 32 insertions(+), 59 deletions(-) create mode 100644 src/app/_api/folder/getFolders.ts delete mode 100644 src/app/collection/mockData.ts diff --git a/src/app/_api/folder/getFolders.ts b/src/app/_api/folder/getFolders.ts new file mode 100644 index 00000000..b24f3ddd --- /dev/null +++ b/src/app/_api/folder/getFolders.ts @@ -0,0 +1,13 @@ +import axiosInstance from '@/lib/axios/axiosInstance'; +import { FoldersType } from '@/lib/types/folderType'; + +export interface FoldersResponseType { + folders: FoldersType[]; +} + +const getFolders = async () => { + const response = await axiosInstance.get('/folders'); + return response.data; +}; + +export default getFolders; diff --git a/src/app/collection/_components/BottomSheet.tsx b/src/app/collection/_components/BottomSheet.tsx index a1b98eda..4511e5fa 100644 --- a/src/app/collection/_components/BottomSheet.tsx +++ b/src/app/collection/_components/BottomSheet.tsx @@ -1,5 +1,5 @@ import { ChangeEvent, useState } from 'react'; -import { useMutation } from '@tanstack/react-query'; +import { useMutation, useQueryClient } from '@tanstack/react-query'; import { isAxiosError } from 'axios'; import * as styles from './BottomSheet.css'; @@ -10,6 +10,7 @@ import { useLanguage } from '@/store/useLanguage'; import Modal from '@/components/Modal/Modal'; import LoginModal from '@/components/login/LoginModal'; import useBooleanOutput from '@/hooks/useBooleanOutput'; +import { QUERY_KEYS } from '@/lib/constants/queryKeys'; interface BottomSheetProps { isOn: boolean; @@ -17,6 +18,7 @@ interface BottomSheetProps { } export default function BottomSheet({ isOn, onClose }: BottomSheetProps) { + const queryClient = useQueryClient(); const { language } = useLanguage(); const { isOn: isLoginModalOn, handleSetOn: loginModalOn, handleSetOff: loginModalOff } = useBooleanOutput(); @@ -24,8 +26,8 @@ export default function BottomSheet({ isOn, onClose }: BottomSheetProps) { const createFolderMutation = useMutation({ mutationFn: createCollectionFolder, - onSuccess: (data) => { - // TODO update folder list + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.getFolders] }); setValue(''); onClose(); }, diff --git a/src/app/collection/mockData.ts b/src/app/collection/mockData.ts deleted file mode 100644 index d0f87e6d..00000000 --- a/src/app/collection/mockData.ts +++ /dev/null @@ -1,44 +0,0 @@ -import { FoldersType } from '@/lib/types/folderType'; - -export const FOLDERS: FoldersType[] = [ - { - folderId: 1, - folderName: '가을밤에 든 생각', - listCount: 3, - }, - { - folderId: 2, - folderName: '좋아하는 글귀', - listCount: 1, - }, - { - folderId: 3, - folderName: '드라마/영화', - listCount: 10, - }, - { - folderId: 4, - folderName: '코딩 노래', - listCount: 100, - }, - { - folderId: 5, - folderName: '2024 축제', - listCount: 16, - }, - { - folderId: 6, - folderName: '커피/디저트', - listCount: 20, - }, - { - folderId: 7, - folderName: '가보고 싶은 곳', - listCount: 49, - }, - { - folderId: 8, - folderName: '그냥', - listCount: 0, - }, -]; diff --git a/src/app/collection/page.tsx b/src/app/collection/page.tsx index e86412ea..ead3e15a 100644 --- a/src/app/collection/page.tsx +++ b/src/app/collection/page.tsx @@ -1,21 +1,22 @@ 'use client'; import Image from 'next/image'; -import Header from '@/components/Header/Header'; +import { useQuery } from '@tanstack/react-query'; import * as styles from './page.css'; -import { FOLDERS } from './mockData'; -import useBooleanOutput from '@/hooks/useBooleanOutput'; + +import Header from '@/components/Header/Header'; import BottomSheet from './_components/BottomSheet'; +import useBooleanOutput from '@/hooks/useBooleanOutput'; +import getFolders, { FoldersResponseType } from '../_api/folder/getFolders'; +import { QUERY_KEYS } from '@/lib/constants/queryKeys'; export default function CollectionPage() { - // const { data } = useQuery({ - // queryKey: [QUERY_KEYS.getFolders], - // queryFn: getFolders, - // }); - - const folders = FOLDERS; - console.log(folders); + const { data } = useQuery({ + queryKey: [QUERY_KEYS.getFolders], + queryFn: getFolders, + staleTime: 1000 * 60 * 5, // 5분 설정 + }); const { isOn, handleSetOn, handleSetOff } = useBooleanOutput(false); @@ -24,7 +25,7 @@ export default function CollectionPage() {
- {folders.map((folder) => ( + {data?.folders.map((folder) => (
diff --git a/src/lib/constants/queryKeys.ts b/src/lib/constants/queryKeys.ts index f46c1252..df021be3 100644 --- a/src/lib/constants/queryKeys.ts +++ b/src/lib/constants/queryKeys.ts @@ -26,5 +26,6 @@ export const QUERY_KEYS = { searchUserResult: 'searchUserResult', collect: 'collect', getCollection: 'getCollection', - getCollectionCategories: 'getCollectionCategories', + getFolders: 'getFolders', + getCollectionCategories: 'getCollectionCategories', // ver2.0 }; From d9bf530597cd29b576fe4279b1f1f2122cac4fd9 Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Sun, 13 Oct 2024 23:29:04 +0900 Subject: [PATCH 66/86] =?UTF-8?q?Design:=20=EC=BD=9C=EB=A0=89=EC=85=98=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=20(=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EC=A4=84?= =?UTF-8?q?=EC=9E=84=20=EC=A0=81=EC=9A=A9,=20=EB=92=A4=EB=A1=9C=EA=B0=80?= =?UTF-8?q?=EA=B8=B0=20path=20=EC=B6=94=EA=B0=80=20=EB=93=B1)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/collection/page.css.ts | 11 +++++++++-- src/app/collection/page.tsx | 6 ++++-- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/src/app/collection/page.css.ts b/src/app/collection/page.css.ts index cadfb9cb..4ea677ab 100644 --- a/src/app/collection/page.css.ts +++ b/src/app/collection/page.css.ts @@ -11,9 +11,9 @@ export const container = style({ export const folders = style({ padding: '2.4rem 4.8rem', display: 'grid', - gridTemplateColumns: '1fr 1fr', + gridTemplateColumns: 'repeat(2, 1fr)', gridColumnGap: 34, - gridRowGap: 34, + gridRowGap: 24, }); // 폴더 @@ -79,6 +79,7 @@ export const bottomShape = style({ export const title = style([ Label, { + maxWidth: 130, display: 'flex', gap: 6, alignItems: 'center', @@ -86,6 +87,12 @@ export const title = style([ }, ]); +export const folderName = style({ + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', +}); + // 폴더 버튼 export const addFolderButtonContainer = style({ position: 'fixed', diff --git a/src/app/collection/page.tsx b/src/app/collection/page.tsx index ead3e15a..d2374bc5 100644 --- a/src/app/collection/page.tsx +++ b/src/app/collection/page.tsx @@ -1,6 +1,7 @@ 'use client'; import Image from 'next/image'; +import { useRouter } from 'next/navigation'; import { useQuery } from '@tanstack/react-query'; import * as styles from './page.css'; @@ -12,6 +13,7 @@ import getFolders, { FoldersResponseType } from '../_api/folder/getFolders'; import { QUERY_KEYS } from '@/lib/constants/queryKeys'; export default function CollectionPage() { + const router = useRouter(); const { data } = useQuery({ queryKey: [QUERY_KEYS.getFolders], queryFn: getFolders, @@ -22,7 +24,7 @@ export default function CollectionPage() { return (
-
+
router.back()} />
{data?.folders.map((folder) => ( @@ -33,7 +35,7 @@ export default function CollectionPage() {

- {folder.folderName} + {folder.folderName} {`(${folder.listCount})`}

From bc9e5ba1767a37373dfc30639560b34bce3becac Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Thu, 24 Oct 2024 00:49:53 +0900 Subject: [PATCH 67/86] =?UTF-8?q?Rename:=20=EC=BD=9C=EB=A0=89=EC=85=98=20?= =?UTF-8?q?=EC=83=81=EC=84=B8=ED=8E=98=EC=9D=B4=EC=A7=80=20Ver2.0=20?= =?UTF-8?q?=ED=8C=8C=EC=9D=BC=20=EA=B5=AC=EB=B6=84=EC=9D=84=20=EC=9C=84?= =?UTF-8?q?=ED=95=B4=20=EC=9D=B4=EB=A6=84=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../{[category] => _[category]}/_components/NoData.css.ts | 0 .../collection/{[category] => _[category]}/_components/NoData.tsx | 0 .../{[category] => _[category]}/_components/Top3Card.css.ts | 0 .../{[category] => _[category]}/_components/Top3Card.tsx | 0 .../{[category] => _[category]}/_components/Top3CardItem.css.ts | 0 .../{[category] => _[category]}/_components/Top3CardItem.tsx | 0 .../{[category] => _[category]}/_components/Top3CardSkeleton.tsx | 0 src/app/collection/{[category] => _[category]}/page.css.ts | 0 src/app/collection/{[category] => _[category]}/page.tsx | 0 9 files changed, 0 insertions(+), 0 deletions(-) rename src/app/collection/{[category] => _[category]}/_components/NoData.css.ts (100%) rename src/app/collection/{[category] => _[category]}/_components/NoData.tsx (100%) rename src/app/collection/{[category] => _[category]}/_components/Top3Card.css.ts (100%) rename src/app/collection/{[category] => _[category]}/_components/Top3Card.tsx (100%) rename src/app/collection/{[category] => _[category]}/_components/Top3CardItem.css.ts (100%) rename src/app/collection/{[category] => _[category]}/_components/Top3CardItem.tsx (100%) rename src/app/collection/{[category] => _[category]}/_components/Top3CardSkeleton.tsx (100%) rename src/app/collection/{[category] => _[category]}/page.css.ts (100%) rename src/app/collection/{[category] => _[category]}/page.tsx (100%) diff --git a/src/app/collection/[category]/_components/NoData.css.ts b/src/app/collection/_[category]/_components/NoData.css.ts similarity index 100% rename from src/app/collection/[category]/_components/NoData.css.ts rename to src/app/collection/_[category]/_components/NoData.css.ts diff --git a/src/app/collection/[category]/_components/NoData.tsx b/src/app/collection/_[category]/_components/NoData.tsx similarity index 100% rename from src/app/collection/[category]/_components/NoData.tsx rename to src/app/collection/_[category]/_components/NoData.tsx diff --git a/src/app/collection/[category]/_components/Top3Card.css.ts b/src/app/collection/_[category]/_components/Top3Card.css.ts similarity index 100% rename from src/app/collection/[category]/_components/Top3Card.css.ts rename to src/app/collection/_[category]/_components/Top3Card.css.ts diff --git a/src/app/collection/[category]/_components/Top3Card.tsx b/src/app/collection/_[category]/_components/Top3Card.tsx similarity index 100% rename from src/app/collection/[category]/_components/Top3Card.tsx rename to src/app/collection/_[category]/_components/Top3Card.tsx diff --git a/src/app/collection/[category]/_components/Top3CardItem.css.ts b/src/app/collection/_[category]/_components/Top3CardItem.css.ts similarity index 100% rename from src/app/collection/[category]/_components/Top3CardItem.css.ts rename to src/app/collection/_[category]/_components/Top3CardItem.css.ts diff --git a/src/app/collection/[category]/_components/Top3CardItem.tsx b/src/app/collection/_[category]/_components/Top3CardItem.tsx similarity index 100% rename from src/app/collection/[category]/_components/Top3CardItem.tsx rename to src/app/collection/_[category]/_components/Top3CardItem.tsx diff --git a/src/app/collection/[category]/_components/Top3CardSkeleton.tsx b/src/app/collection/_[category]/_components/Top3CardSkeleton.tsx similarity index 100% rename from src/app/collection/[category]/_components/Top3CardSkeleton.tsx rename to src/app/collection/_[category]/_components/Top3CardSkeleton.tsx diff --git a/src/app/collection/[category]/page.css.ts b/src/app/collection/_[category]/page.css.ts similarity index 100% rename from src/app/collection/[category]/page.css.ts rename to src/app/collection/_[category]/page.css.ts diff --git a/src/app/collection/[category]/page.tsx b/src/app/collection/_[category]/page.tsx similarity index 100% rename from src/app/collection/[category]/page.tsx rename to src/app/collection/_[category]/page.tsx From 4b1870a2a3cd7c7fae0dba6efded65b3030335a0 Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Thu, 24 Oct 2024 00:52:33 +0900 Subject: [PATCH 68/86] =?UTF-8?q?Feat:=20=EC=BD=9C=EB=A0=89=EC=85=98=20?= =?UTF-8?q?=ED=8F=B4=EB=8D=94=20Link=20=ED=83=9C=EA=B7=B8=EB=A1=9C=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=20=EB=B0=8F=20href=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/collection/page.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/app/collection/page.tsx b/src/app/collection/page.tsx index d2374bc5..0f7fd51b 100644 --- a/src/app/collection/page.tsx +++ b/src/app/collection/page.tsx @@ -1,5 +1,6 @@ 'use client'; +import Link from 'next/link'; import Image from 'next/image'; import { useRouter } from 'next/navigation'; import { useQuery } from '@tanstack/react-query'; @@ -28,7 +29,7 @@ export default function CollectionPage() {
{data?.folders.map((folder) => ( -
+
@@ -38,7 +39,7 @@ export default function CollectionPage() { {folder.folderName} {`(${folder.listCount})`}

-
+ ))}
From eb2d404a24f740fc98957c96e02398e98ca90db2 Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Thu, 24 Oct 2024 10:47:14 +0900 Subject: [PATCH 69/86] =?UTF-8?q?Feat:=20=EC=BD=9C=EB=A0=89=EC=85=98=20?= =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=EC=A1=B0=ED=9A=8C=20API=20=EC=97=B0?= =?UTF-8?q?=EB=8F=99=20=EB=B0=8F=20=ED=8F=B4=EB=8D=94=20=EC=83=81=EC=84=B8?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=A0=88=EC=9D=B4=EC=95=84?= =?UTF-8?q?=EC=9B=83=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/_api/collect/getCollection.ts | 29 ++++++++++++++++ .../[folderId]/_components/Collections.css.ts | 15 ++++++++ .../[folderId]/_components/Collections.tsx | 34 +++++++++++++++++++ .../_components/HeaderContainer.tsx | 7 ++++ src/app/collection/[folderId]/page.tsx | 21 ++++++++++++ src/lib/types/listType.ts | 4 ++- 6 files changed, 109 insertions(+), 1 deletion(-) create mode 100644 src/app/_api/collect/getCollection.ts create mode 100644 src/app/collection/[folderId]/_components/Collections.css.ts create mode 100644 src/app/collection/[folderId]/_components/Collections.tsx create mode 100644 src/app/collection/[folderId]/_components/HeaderContainer.tsx create mode 100644 src/app/collection/[folderId]/page.tsx diff --git a/src/app/_api/collect/getCollection.ts b/src/app/_api/collect/getCollection.ts new file mode 100644 index 00000000..3420942d --- /dev/null +++ b/src/app/_api/collect/getCollection.ts @@ -0,0 +1,29 @@ +import axiosInstance from '@/lib/axios/axiosInstance'; +import { CollectionType } from '@/lib/types/listType'; + +interface GetCollectionType { + folderId: string; + cursorId?: number; +} + +interface ResponseType { + collectionLists: CollectionType[]; + cursorId: number; + hasNext: boolean; +} + +async function getCollection({ folderId, cursorId }: GetCollectionType) { + const params = new URLSearchParams({ + size: '8', + }); + + if (cursorId) { + params.append('cursorId', cursorId.toString()); + } + + const response = await axiosInstance.get(`/folder/${folderId}/collections?${params.toString()}`); + + return response.data; +} + +export default getCollection; diff --git a/src/app/collection/[folderId]/_components/Collections.css.ts b/src/app/collection/[folderId]/_components/Collections.css.ts new file mode 100644 index 00000000..1be5ab1b --- /dev/null +++ b/src/app/collection/[folderId]/_components/Collections.css.ts @@ -0,0 +1,15 @@ +import { style } from '@vanilla-extract/css'; + +export const container = style({ + padding: '2.4rem 1.6rem', + display: 'grid', + gridTemplateColumns: '1fr 1fr', + gridGap: 12, +}); + +export const content = style({ + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', +}); diff --git a/src/app/collection/[folderId]/_components/Collections.tsx b/src/app/collection/[folderId]/_components/Collections.tsx new file mode 100644 index 00000000..780eaae2 --- /dev/null +++ b/src/app/collection/[folderId]/_components/Collections.tsx @@ -0,0 +1,34 @@ +'use client'; + +import Link from 'next/link'; +import { useQuery } from '@tanstack/react-query'; + +import * as styles from './Collections.css'; + +import getCollection from '@/app/_api/collect/getCollection'; +import { QUERY_KEYS } from '@/lib/constants/queryKeys'; + +interface CollectionsProps { + folderId: string; +} + +// TODO 무한스크롤 + +export default function Collections({ folderId }: CollectionsProps) { + const { data } = useQuery({ + queryKey: [QUERY_KEYS.getCollection], + queryFn: () => getCollection({ folderId }), + }); + + console.log(data); + + return ( +
    + {data?.collectionLists.map(({ list, id }) => ( + + {list.title} + + ))} +
+ ); +} diff --git a/src/app/collection/[folderId]/_components/HeaderContainer.tsx b/src/app/collection/[folderId]/_components/HeaderContainer.tsx new file mode 100644 index 00000000..94af9af9 --- /dev/null +++ b/src/app/collection/[folderId]/_components/HeaderContainer.tsx @@ -0,0 +1,7 @@ +'use client'; + +import Header from '@/components/Header/Header'; + +export default function HeaderContainer() { + return
history.back()} />; +} diff --git a/src/app/collection/[folderId]/page.tsx b/src/app/collection/[folderId]/page.tsx new file mode 100644 index 00000000..62d48a3d --- /dev/null +++ b/src/app/collection/[folderId]/page.tsx @@ -0,0 +1,21 @@ +// 1. 폴더 상세조회 API 연결 +// 2. 레이아웃 퍼블리싱 +// 2. 헤더의 [수정] 기능 + +import HeaderContainer from './_components/HeaderContainer'; +import Collections from './_components/Collections'; + +interface ParamType { + params: { folderId: string }; +} + +export default function CollectionDetailPage({ params }: ParamType) { + const folderId = params.folderId; + + return ( +
+ + +
+ ); +} diff --git a/src/lib/types/listType.ts b/src/lib/types/listType.ts index d5f3f713..465448a1 100644 --- a/src/lib/types/listType.ts +++ b/src/lib/types/listType.ts @@ -143,6 +143,7 @@ export interface SearchResultType { hasNext: boolean; } +// 콜렉션 리스트 조회 export interface CollectionType { id: number; list: CollectionListType; @@ -150,9 +151,10 @@ export interface CollectionType { export interface CollectionListType { id: number; + category: string; backgroundColor: string; title: string; - ownerId: string; + ownerId: number; ownerNickname: string; ownerProfileImageUrl: string; updatedDate: Date; From 8f1d1ab32c8b7cab9f2abcf34fba2fdee0e67499 Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Thu, 24 Oct 2024 13:22:48 +0900 Subject: [PATCH 70/86] =?UTF-8?q?Design:=20=EC=BD=9C=EB=A0=89=EC=85=98=20?= =?UTF-8?q?=EC=83=81=EC=84=B8=ED=8E=98=EC=9D=B4=EC=A7=80=20=ED=8D=BC?= =?UTF-8?q?=EB=B8=94=EB=A6=AC=EC=8B=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../[folderId]/_components/Collections.css.ts | 63 +++++++++++++++++++ .../[folderId]/_components/Collections.tsx | 16 ++++- src/app/collection/[folderId]/page.css.ts | 7 +++ src/app/collection/[folderId]/page.tsx | 4 +- src/app/collection/page.css.ts | 1 + 5 files changed, 89 insertions(+), 2 deletions(-) create mode 100644 src/app/collection/[folderId]/page.css.ts diff --git a/src/app/collection/[folderId]/_components/Collections.css.ts b/src/app/collection/[folderId]/_components/Collections.css.ts index 1be5ab1b..30e01cf1 100644 --- a/src/app/collection/[folderId]/_components/Collections.css.ts +++ b/src/app/collection/[folderId]/_components/Collections.css.ts @@ -1,15 +1,78 @@ import { style } from '@vanilla-extract/css'; +import { vars } from '@/styles/theme.css'; +import { Label, LabelSmall } from '@/styles/font.css'; export const container = style({ padding: '2.4rem 1.6rem', display: 'grid', gridTemplateColumns: '1fr 1fr', + gridTemplateRows: 'max-content', gridGap: 12, + alignContent: 'flex-start', + backgroundColor: vars.color.bggray, }); export const content = style({ + height: 173, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', + backgroundColor: vars.color.white, + borderRadius: 20, +}); + +export const category = style([ + LabelSmall, + { + padding: '2px 6px', + backgroundColor: vars.color.blue, + borderRadius: 20, + color: vars.color.white, + }, +]); + +export const info = style({ + paddingTop: '0.6rem', + paddingBottom: '0.5rem', + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + gap: 4, +}); + +export const title = style([ + Label, + { + fontWeight: 600, + color: vars.color.black, + }, +]); + +export const owner = style([ + LabelSmall, + { + fontWeight: 400, + color: vars.color.black, + }, +]); + +export const items = style({ + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + gap: 5, +}); + +export const item = style({ + padding: '0.45rem 0.62rem', + backgroundColor: '#F5FAFF', + borderRadius: 18, + color: vars.color.blue, +}); + +export const date = style({ + paddingTop: '0.8rem', + fontSize: '0.9rem', + color: vars.color.black, }); diff --git a/src/app/collection/[folderId]/_components/Collections.tsx b/src/app/collection/[folderId]/_components/Collections.tsx index 780eaae2..c6193b19 100644 --- a/src/app/collection/[folderId]/_components/Collections.tsx +++ b/src/app/collection/[folderId]/_components/Collections.tsx @@ -7,6 +7,7 @@ import * as styles from './Collections.css'; import getCollection from '@/app/_api/collect/getCollection'; import { QUERY_KEYS } from '@/lib/constants/queryKeys'; +import formatDate from '@/lib/utils/dateFormat'; interface CollectionsProps { folderId: string; @@ -26,7 +27,20 @@ export default function Collections({ folderId }: CollectionsProps) {
    {data?.collectionLists.map(({ list, id }) => ( - {list.title} +
    {list.category}
    +
    +

    {list.title}

    +

    Sehui Park

    +
    +
      + {list.listItems.map((item) => ( +
    • + {item.rank} + {item.title} +
      • + ))} +
    +

    {formatDate(list.updatedDate)}

    ))}
diff --git a/src/app/collection/[folderId]/page.css.ts b/src/app/collection/[folderId]/page.css.ts new file mode 100644 index 00000000..82d256fe --- /dev/null +++ b/src/app/collection/[folderId]/page.css.ts @@ -0,0 +1,7 @@ +import { style } from '@vanilla-extract/css'; +import { vars } from '@/styles/theme.css'; + +export const container = style({ + height: '100vh', + backgroundColor: vars.color.bggray, +}); diff --git a/src/app/collection/[folderId]/page.tsx b/src/app/collection/[folderId]/page.tsx index 62d48a3d..86cdbb54 100644 --- a/src/app/collection/[folderId]/page.tsx +++ b/src/app/collection/[folderId]/page.tsx @@ -5,6 +5,8 @@ import HeaderContainer from './_components/HeaderContainer'; import Collections from './_components/Collections'; +import * as styles from './page.css'; + interface ParamType { params: { folderId: string }; } @@ -13,7 +15,7 @@ export default function CollectionDetailPage({ params }: ParamType) { const folderId = params.folderId; return ( -
+
diff --git a/src/app/collection/page.css.ts b/src/app/collection/page.css.ts index 4ea677ab..b2232a57 100644 --- a/src/app/collection/page.css.ts +++ b/src/app/collection/page.css.ts @@ -6,6 +6,7 @@ export const container = style({ position: 'relative', paddingBottom: 83, height: 'calc(100% - 70px)', + backgroundColor: vars.color.bggray, }); export const folders = style({ From 582bcc30d8e56af8123e2c6f59ed6f76f577cc1b Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Thu, 24 Oct 2024 15:09:34 +0900 Subject: [PATCH 71/86] =?UTF-8?q?Design:=20=EB=B0=B0=EA=B2=BD=EC=9D=B4?= =?UTF-8?q?=EB=AF=B8=EC=A7=80=20=EC=9C=A0=EB=AC=B4=EC=97=90=20=EB=94=B0?= =?UTF-8?q?=EB=A5=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC=20variants=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../[folderId]/_components/Collections.css.ts | 58 ++++++++++++++----- .../[folderId]/_components/Collections.tsx | 47 +++++++++------ 2 files changed, 74 insertions(+), 31 deletions(-) diff --git a/src/app/collection/[folderId]/_components/Collections.css.ts b/src/app/collection/[folderId]/_components/Collections.css.ts index 30e01cf1..8388e63b 100644 --- a/src/app/collection/[folderId]/_components/Collections.css.ts +++ b/src/app/collection/[folderId]/_components/Collections.css.ts @@ -1,7 +1,9 @@ -import { style } from '@vanilla-extract/css'; +import { createVar, style, styleVariants } from '@vanilla-extract/css'; import { vars } from '@/styles/theme.css'; import { Label, LabelSmall } from '@/styles/font.css'; +export const imageUrl = createVar(); + export const container = style({ padding: '2.4rem 1.6rem', display: 'grid', @@ -9,17 +11,26 @@ export const container = style({ gridTemplateRows: 'max-content', gridGap: 12, alignContent: 'flex-start', + justifyItems: 'center', backgroundColor: vars.color.bggray, }); -export const content = style({ +const content = style({ + width: 173, height: 173, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', + + backgroundImage: imageUrl, + backgroundPosition: 'center', backgroundColor: vars.color.white, - borderRadius: 20, +}); + +export const contentVariant = styleVariants({ + round: [content, { borderRadius: '100%' }], + square: [content, { borderRadius: 20 }], }); export const category = style([ @@ -41,19 +52,25 @@ export const info = style({ gap: 4, }); -export const title = style([ +// 배경이미지 유무에 따른 스타일 variants +const fontColor = { + white: vars.color.white, + black: vars.color.black, +}; + +export const title = styleVariants(fontColor, (color) => [ Label, { + color, fontWeight: 600, - color: vars.color.black, }, ]); -export const owner = style([ +export const owner = styleVariants(fontColor, (color) => [ LabelSmall, { + color, fontWeight: 400, - color: vars.color.black, }, ]); @@ -64,15 +81,30 @@ export const items = style({ gap: 5, }); -export const item = style({ +const item = style({ padding: '0.45rem 0.62rem', - backgroundColor: '#F5FAFF', borderRadius: 18, - color: vars.color.blue, }); -export const date = style({ +export const itemVariant = styleVariants({ + white: [ + item, + { + backgroundColor: '#F5FAFF', + color: vars.color.blue, + }, + ], + blue: [ + item, + { + backgroundColor: 'rgba(245, 250, 255, 0.30)', + color: vars.color.white, + }, + ], +}); + +export const date = styleVariants(fontColor, (color) => ({ paddingTop: '0.8rem', fontSize: '0.9rem', - color: vars.color.black, -}); + color, +})); diff --git a/src/app/collection/[folderId]/_components/Collections.tsx b/src/app/collection/[folderId]/_components/Collections.tsx index c6193b19..c4c621ab 100644 --- a/src/app/collection/[folderId]/_components/Collections.tsx +++ b/src/app/collection/[folderId]/_components/Collections.tsx @@ -2,6 +2,7 @@ import Link from 'next/link'; import { useQuery } from '@tanstack/react-query'; +import { assignInlineVars } from '@vanilla-extract/dynamic'; import * as styles from './Collections.css'; @@ -25,24 +26,34 @@ export default function Collections({ folderId }: CollectionsProps) { return (
    - {data?.collectionLists.map(({ list, id }) => ( - -
    {list.category}
    -
    -

    {list.title}

    -

    Sehui Park

    -
    -
      - {list.listItems.map((item) => ( -
    • - {item.rank} - {item.title} -
      • - ))} -
    -

    {formatDate(list.updatedDate)}

    - - ))} + {data?.collectionLists.map(({ list, id }) => { + const hasImage = !!list.representativeImageUrl; + return ( + +
    {list.category}
    +
    +

    {list.title}

    +

    Sehui Park

    +
    +
      + {list.listItems.map((item) => ( +
    • + {item.rank} + {item.title} +
      • + ))} +
    +

    {formatDate(list.updatedDate)}

    + + ); + })}
); } From 2897e70787259efd026779ea85514241289c455a Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Thu, 24 Oct 2024 16:22:36 +0900 Subject: [PATCH 72/86] =?UTF-8?q?Feat:=20Header=20=EC=88=98=EC=A0=95?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=ED=81=B4=EB=A6=AD=EC=8B=9C=20=EA=B3=B5?= =?UTF-8?q?=ED=86=B5=20BottomSheet=20=EB=82=98=EC=98=A4=EB=8F=84=EB=A1=9D?= =?UTF-8?q?=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../_components/HeaderContainer.tsx | 32 ++++++++++++++++++- src/components/Header/Header.css.ts | 5 ++- 2 files changed, 33 insertions(+), 4 deletions(-) diff --git a/src/app/collection/[folderId]/_components/HeaderContainer.tsx b/src/app/collection/[folderId]/_components/HeaderContainer.tsx index 94af9af9..6a4bc44e 100644 --- a/src/app/collection/[folderId]/_components/HeaderContainer.tsx +++ b/src/app/collection/[folderId]/_components/HeaderContainer.tsx @@ -1,7 +1,37 @@ 'use client'; +import BottomSheet from '@/components/BottomSheet/BottomSheet'; import Header from '@/components/Header/Header'; +import useBooleanOutput from '@/hooks/useBooleanOutput'; + export default function HeaderContainer() { - return
history.back()} />; + const { isOn, handleSetOn, handleSetOff } = useBooleanOutput(); + + const bottomSheetOptionList = [ + { + key: 'editFolder', + title: '폴더 이름 바꾸기', + onClick: () => {}, + }, + { + key: 'deleteFolder', + title: '폴더 삭제하기', + onClick: () => {}, + }, + ]; + + const RightButton = () => { + const handleClickOption = () => { + handleSetOn(); + }; + return ; + }; + + return ( + <> +
} leftClick={() => history.back()} /> + {isOn && } + + ); } diff --git a/src/components/Header/Header.css.ts b/src/components/Header/Header.css.ts index 91846272..0cae8d46 100644 --- a/src/components/Header/Header.css.ts +++ b/src/components/Header/Header.css.ts @@ -1,5 +1,6 @@ import { style } from '@vanilla-extract/css'; import * as fonts from '@/styles/__font.css'; +import { vars } from '@/styles/theme.css'; export const header = style({ width: '100%', @@ -16,9 +17,7 @@ export const header = style({ flexDirection: 'row', alignItems: 'center', - backgroundColor: '#fff', - - borderBottom: '1px solid rgba(0, 0, 0, 0.10)', + backgroundColor: vars.color.bggray, }); export const flexChild = style({ From 5c8a437a9ed8d0d400c987222cb7221592e22339 Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Thu, 24 Oct 2024 18:23:14 +0900 Subject: [PATCH 73/86] =?UTF-8?q?Refactor:=20BottomSheet=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20Compound=20Component=20=ED=8C=A8?= =?UTF-8?q?=ED=84=B4=EC=9C=BC=EB=A1=9C=20=EB=A6=AC=ED=8C=A9=ED=86=A0?= =?UTF-8?q?=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../collection/_components/BottomSheet.css.ts | 10 -- .../collection/_components/BottomSheet.tsx | 100 +++--------------- .../_components/BottomSheetButton.tsx | 19 ++++ .../_components/BottomSheetTitle.tsx | 10 ++ src/app/collection/page.css.ts | 11 ++ src/app/collection/page.tsx | 72 ++++++++++++- 6 files changed, 126 insertions(+), 96 deletions(-) create mode 100644 src/app/collection/_components/BottomSheetButton.tsx create mode 100644 src/app/collection/_components/BottomSheetTitle.tsx diff --git a/src/app/collection/_components/BottomSheet.css.ts b/src/app/collection/_components/BottomSheet.css.ts index 919ab11d..4913429a 100644 --- a/src/app/collection/_components/BottomSheet.css.ts +++ b/src/app/collection/_components/BottomSheet.css.ts @@ -47,16 +47,6 @@ export const contentTitle = style([ }, ]); -export const contentInput = style({ - padding: '2rem 2.4rem', - backgroundColor: '#F5F6FA', - borderRadius: 18, - - color: vars.color.black, - fontSize: '1.6rem', - fontWeight: 400, -}); - export const optionButtons = style({ margin: 12, display: 'flex', diff --git a/src/app/collection/_components/BottomSheet.tsx b/src/app/collection/_components/BottomSheet.tsx index 4511e5fa..ea15c759 100644 --- a/src/app/collection/_components/BottomSheet.tsx +++ b/src/app/collection/_components/BottomSheet.tsx @@ -1,94 +1,26 @@ -import { ChangeEvent, useState } from 'react'; -import { useMutation, useQueryClient } from '@tanstack/react-query'; -import { isAxiosError } from 'axios'; +import { ReactNode } from 'react'; import * as styles from './BottomSheet.css'; -import createCollectionFolder from '@/app/_api/folder/createFolder'; -import toasting from '@/lib/utils/toasting'; -import toastMessage from '@/lib/constants/toastMessage'; -import { useLanguage } from '@/store/useLanguage'; -import Modal from '@/components/Modal/Modal'; -import LoginModal from '@/components/login/LoginModal'; -import useBooleanOutput from '@/hooks/useBooleanOutput'; -import { QUERY_KEYS } from '@/lib/constants/queryKeys'; + +import BottomSheetTitle from './BottomSheetTitle'; +import BottomSheetButton from './BottomSheetButton'; interface BottomSheetProps { isOn: boolean; - onClose: () => void; + children: ReactNode; } -export default function BottomSheet({ isOn, onClose }: BottomSheetProps) { - const queryClient = useQueryClient(); - const { language } = useLanguage(); - const { isOn: isLoginModalOn, handleSetOn: loginModalOn, handleSetOff: loginModalOff } = useBooleanOutput(); - - const [value, setValue] = useState(''); - - const createFolderMutation = useMutation({ - mutationFn: createCollectionFolder, - onSuccess: () => { - queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.getFolders] }); - setValue(''); - onClose(); - }, - onError: (error) => { - if (isAxiosError(error)) { - const errorData = error.response?.data; - if (errorData.error === 'UNAUTHORIZED') { - loginModalOn(); - return; - } - if (errorData.code.split('_')[0] === 'DUPLICATE') { - toasting({ type: 'error', txt: toastMessage[language].duplicatedFolderName }); - return; - } - } - toasting({ type: 'error', txt: toastMessage[language].failedFolder }); - }, - }); - - const handleChangeInput = (e: ChangeEvent) => { - setValue(e.target.value); - }; - - const handleCreateFolder = () => { - if (!value.trim()) { - toasting({ type: 'warning', txt: toastMessage[language].emptyFolderName }); - return; - } - createFolderMutation.mutate({ - folderName: value, - }); - }; - +function FolderBottomSheet({ isOn, children }: BottomSheetProps) { return ( - <> -
-
-

새로운 폴더

- -
- - -
-
-
- - {isLoginModalOn && ( - - - - )} - +
+
{children}
+
); } + +const BottomSheet = Object.assign(FolderBottomSheet, { + Title: BottomSheetTitle, + Button: BottomSheetButton, +}); + +export default BottomSheet; diff --git a/src/app/collection/_components/BottomSheetButton.tsx b/src/app/collection/_components/BottomSheetButton.tsx new file mode 100644 index 00000000..e4ca4b47 --- /dev/null +++ b/src/app/collection/_components/BottomSheetButton.tsx @@ -0,0 +1,19 @@ +import * as styles from './BottomSheet.css'; + +interface BottomSheetButtonProps { + onClose: () => void; + onClick: () => void; +} + +export default function BottomSheetButton({ onClose, onClick }: BottomSheetButtonProps) { + return ( +
+ + +
+ ); +} diff --git a/src/app/collection/_components/BottomSheetTitle.tsx b/src/app/collection/_components/BottomSheetTitle.tsx new file mode 100644 index 00000000..d3b85df3 --- /dev/null +++ b/src/app/collection/_components/BottomSheetTitle.tsx @@ -0,0 +1,10 @@ +import { ReactNode } from 'react'; +import * as styles from './BottomSheet.css'; + +interface BottomSheetTitleProps { + children: ReactNode; +} + +export default function BottomSheetTitle({ children }: BottomSheetTitleProps) { + return

{children}

; +} diff --git a/src/app/collection/page.css.ts b/src/app/collection/page.css.ts index b2232a57..4c68c4f1 100644 --- a/src/app/collection/page.css.ts +++ b/src/app/collection/page.css.ts @@ -124,3 +124,14 @@ export const addFolderButton = style({ fontSize: '1.6rem', fontWeight: 700, }); + +// BottomSheet Input +export const contentInput = style({ + padding: '2rem 2.4rem', + backgroundColor: '#F5F6FA', + borderRadius: 18, + + color: vars.color.black, + fontSize: '1.6rem', + fontWeight: 400, +}); diff --git a/src/app/collection/page.tsx b/src/app/collection/page.tsx index 0f7fd51b..6ef735a4 100644 --- a/src/app/collection/page.tsx +++ b/src/app/collection/page.tsx @@ -3,18 +3,31 @@ import Link from 'next/link'; import Image from 'next/image'; import { useRouter } from 'next/navigation'; -import { useQuery } from '@tanstack/react-query'; +import { ChangeEvent, useState } from 'react'; +import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; +import { isAxiosError } from 'axios'; import * as styles from './page.css'; import Header from '@/components/Header/Header'; import BottomSheet from './_components/BottomSheet'; +import Modal from '@/components/Modal/Modal'; +import LoginModal from '@/components/login/LoginModal'; + import useBooleanOutput from '@/hooks/useBooleanOutput'; +import { useLanguage } from '@/store/useLanguage'; + +import createCollectionFolder from '../_api/folder/createFolder'; import getFolders, { FoldersResponseType } from '../_api/folder/getFolders'; + +import toasting from '@/lib/utils/toasting'; +import toastMessage from '@/lib/constants/toastMessage'; import { QUERY_KEYS } from '@/lib/constants/queryKeys'; export default function CollectionPage() { const router = useRouter(); + const queryClient = useQueryClient(); + const { language } = useLanguage(); const { data } = useQuery({ queryKey: [QUERY_KEYS.getFolders], queryFn: getFolders, @@ -22,6 +35,45 @@ export default function CollectionPage() { }); const { isOn, handleSetOn, handleSetOff } = useBooleanOutput(false); + const { isOn: isLoginModalOn, handleSetOn: loginModalOn, handleSetOff: loginModalOff } = useBooleanOutput(); + const [value, setValue] = useState(''); + + const createFolderMutation = useMutation({ + mutationFn: createCollectionFolder, + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.getFolders] }); + setValue(''); + handleSetOff(); + }, + onError: (error) => { + if (isAxiosError(error)) { + const errorData = error.response?.data; + if (errorData.error === 'UNAUTHORIZED') { + loginModalOn(); + return; + } + if (errorData.code.split('_')[0] === 'DUPLICATE') { + toasting({ type: 'error', txt: toastMessage[language].duplicatedFolderName }); + return; + } + } + toasting({ type: 'error', txt: toastMessage[language].failedFolder }); + }, + }); + + const handleChangeInput = (e: ChangeEvent) => { + setValue(e.target.value); + }; + + const handleCreateFolder = () => { + if (!value.trim()) { + toasting({ type: 'warning', txt: toastMessage[language].emptyFolderName }); + return; + } + createFolderMutation.mutate({ + folderName: value, + }); + }; return (
@@ -49,7 +101,23 @@ export default function CollectionPage() {
- + + 새로운 폴더 + + + + + {isLoginModalOn && ( + + + + )}
); } From 0eb8bad486aaea704554c9423b947cc550b0d135 Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Thu, 24 Oct 2024 18:28:23 +0900 Subject: [PATCH 74/86] =?UTF-8?q?Fix:=20unauthorized=20=EC=97=90=EB=9F=AC?= =?UTF-8?q?=EC=9D=BC=EB=95=8C=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EB=AA=A8?= =?UTF-8?q?=EB=8B=AC=20=EB=8C=80=EC=8B=A0=20=ED=86=A0=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EB=A9=94=EC=84=B8=EC=A7=80=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/collection/page.tsx | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/src/app/collection/page.tsx b/src/app/collection/page.tsx index 6ef735a4..c0759e36 100644 --- a/src/app/collection/page.tsx +++ b/src/app/collection/page.tsx @@ -11,8 +11,6 @@ import * as styles from './page.css'; import Header from '@/components/Header/Header'; import BottomSheet from './_components/BottomSheet'; -import Modal from '@/components/Modal/Modal'; -import LoginModal from '@/components/login/LoginModal'; import useBooleanOutput from '@/hooks/useBooleanOutput'; import { useLanguage } from '@/store/useLanguage'; @@ -35,7 +33,6 @@ export default function CollectionPage() { }); const { isOn, handleSetOn, handleSetOff } = useBooleanOutput(false); - const { isOn: isLoginModalOn, handleSetOn: loginModalOn, handleSetOff: loginModalOff } = useBooleanOutput(); const [value, setValue] = useState(''); const createFolderMutation = useMutation({ @@ -49,7 +46,7 @@ export default function CollectionPage() { if (isAxiosError(error)) { const errorData = error.response?.data; if (errorData.error === 'UNAUTHORIZED') { - loginModalOn(); + toasting({ type: 'error', txt: toastMessage[language].requiredLogin }); return; } if (errorData.code.split('_')[0] === 'DUPLICATE') { @@ -112,12 +109,6 @@ export default function CollectionPage() { /> - - {isLoginModalOn && ( - - - - )}
); } From ad1827af842a19fecadd49c6f27380195a92d187 Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Thu, 24 Oct 2024 20:36:03 +0900 Subject: [PATCH 75/86] =?UTF-8?q?Feat:=20=ED=8F=B4=EB=8D=94=20=EC=9D=B4?= =?UTF-8?q?=EB=A6=84=20=EC=88=98=EC=A0=95=ED=95=98=EA=B8=B0=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/_api/folder/updateFolder.ts | 12 ++++ .../_components/HeaderContainer.tsx | 10 ++- src/app/collection/[folderId]/page.css.ts | 11 +++ src/app/collection/[folderId]/page.tsx | 70 +++++++++++++++++-- 4 files changed, 96 insertions(+), 7 deletions(-) create mode 100644 src/app/_api/folder/updateFolder.ts diff --git a/src/app/_api/folder/updateFolder.ts b/src/app/_api/folder/updateFolder.ts new file mode 100644 index 00000000..0bfcce21 --- /dev/null +++ b/src/app/_api/folder/updateFolder.ts @@ -0,0 +1,12 @@ +import axiosInstance from '@/lib/axios/axiosInstance'; + +interface CollectionFolderProps { + folderId: string; + folderName: string; +} + +const updateCollectionFolder = async ({ folderId, folderName }: CollectionFolderProps) => { + await axiosInstance.put(`/folders/${folderId}`, { folderName }); +}; + +export default updateCollectionFolder; diff --git a/src/app/collection/[folderId]/_components/HeaderContainer.tsx b/src/app/collection/[folderId]/_components/HeaderContainer.tsx index 6a4bc44e..0a982cea 100644 --- a/src/app/collection/[folderId]/_components/HeaderContainer.tsx +++ b/src/app/collection/[folderId]/_components/HeaderContainer.tsx @@ -5,14 +5,18 @@ import Header from '@/components/Header/Header'; import useBooleanOutput from '@/hooks/useBooleanOutput'; -export default function HeaderContainer() { +interface HeaderContainerProps { + handleSetOnBottomSheet: () => void; +} + +export default function HeaderContainer({ handleSetOnBottomSheet }: HeaderContainerProps) { const { isOn, handleSetOn, handleSetOff } = useBooleanOutput(); const bottomSheetOptionList = [ { key: 'editFolder', - title: '폴더 이름 바꾸기', - onClick: () => {}, + title: '폴더 이름 바꾸기', // TODO locale 적용 + onClick: handleSetOnBottomSheet, }, { key: 'deleteFolder', diff --git a/src/app/collection/[folderId]/page.css.ts b/src/app/collection/[folderId]/page.css.ts index 82d256fe..b9f07c90 100644 --- a/src/app/collection/[folderId]/page.css.ts +++ b/src/app/collection/[folderId]/page.css.ts @@ -5,3 +5,14 @@ export const container = style({ height: '100vh', backgroundColor: vars.color.bggray, }); + +// BottomSheet Input +export const contentInput = style({ + padding: '2rem 2.4rem', + backgroundColor: '#F5F6FA', + borderRadius: 18, + + color: vars.color.black, + fontSize: '1.6rem', + fontWeight: 400, +}); diff --git a/src/app/collection/[folderId]/page.tsx b/src/app/collection/[folderId]/page.tsx index 86cdbb54..1b5f1c74 100644 --- a/src/app/collection/[folderId]/page.tsx +++ b/src/app/collection/[folderId]/page.tsx @@ -1,23 +1,85 @@ -// 1. 폴더 상세조회 API 연결 -// 2. 레이아웃 퍼블리싱 -// 2. 헤더의 [수정] 기능 +'use client'; + +import { ChangeEvent, useState } from 'react'; +import { useMutation, useQueryClient } from '@tanstack/react-query'; +import { isAxiosError } from 'axios'; import HeaderContainer from './_components/HeaderContainer'; import Collections from './_components/Collections'; +import BottomSheet from '../_components/BottomSheet'; import * as styles from './page.css'; +import useBooleanOutput from '@/hooks/useBooleanOutput'; +import { useLanguage } from '@/store/useLanguage'; +import toasting from '@/lib/utils/toasting'; +import toastMessage from '@/lib/constants/toastMessage'; +import { QUERY_KEYS } from '@/lib/constants/queryKeys'; +import updateCollectionFolder from '@/app/_api/folder/updateFolder'; + interface ParamType { params: { folderId: string }; } +// TODO API에 FolderName 필드 추가 요청 => input value에 보여주기 & 헤더 타이틀 export default function CollectionDetailPage({ params }: ParamType) { const folderId = params.folderId; + const { isOn, handleSetOn, handleSetOff } = useBooleanOutput(); + const queryClient = useQueryClient(); + const { language } = useLanguage(); + + const [value, setValue] = useState(''); + + const editFolderMutation = useMutation({ + mutationFn: updateCollectionFolder, + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.getFolders] }); + setValue(''); + handleSetOff(); + }, + onError: (error) => { + if (isAxiosError(error)) { + const errorData = error.response?.data; + if (errorData.error === 'UNAUTHORIZED') { + toasting({ type: 'error', txt: toastMessage[language].requiredLogin }); + return; + } + if (errorData.code.split('_')[0] === 'DUPLICATE') { + toasting({ type: 'error', txt: toastMessage[language].duplicatedFolderName }); + return; + } + } + toasting({ type: 'error', txt: toastMessage[language].failedFolder }); + }, + }); + + const handleChangeInput = (e: ChangeEvent) => { + setValue(e.target.value); + }; + + const handleEditFolder = () => { + if (!value.trim()) { + toasting({ type: 'warning', txt: toastMessage[language].emptyFolderName }); + return; + } + editFolderMutation.mutate({ folderId, folderName: value }); + }; return (
- + + + 폴더 이름 바꾸기 + + +
); } From 39d9d97b2de0db7057daa306ae2d4e1637a39c47 Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Thu, 24 Oct 2024 21:53:47 +0900 Subject: [PATCH 76/86] =?UTF-8?q?Feat:=20BottomSheet=20Button=20=EC=9D=B4?= =?UTF-8?q?=EB=A6=84=EC=9D=84=20children=EC=9C=BC=EB=A1=9C=20=EB=B0=9B?= =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C=EC=9D=BC=EB=95=8C=20=ED=8F=B0=ED=8A=B8=EC=83=89?= =?UTF-8?q?=EC=83=81=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../_components/HeaderContainer.tsx | 5 +++-- src/app/collection/[folderId]/page.css.ts | 16 +++++++++++++++ src/app/collection/[folderId]/page.tsx | 20 +++++++++++++++++-- .../collection/_components/BottomSheet.css.ts | 1 + .../_components/BottomSheetButton.tsx | 8 +++++--- src/app/collection/page.tsx | 4 +++- 6 files changed, 46 insertions(+), 8 deletions(-) diff --git a/src/app/collection/[folderId]/_components/HeaderContainer.tsx b/src/app/collection/[folderId]/_components/HeaderContainer.tsx index 0a982cea..e082c453 100644 --- a/src/app/collection/[folderId]/_components/HeaderContainer.tsx +++ b/src/app/collection/[folderId]/_components/HeaderContainer.tsx @@ -7,9 +7,10 @@ import useBooleanOutput from '@/hooks/useBooleanOutput'; interface HeaderContainerProps { handleSetOnBottomSheet: () => void; + handleSetOnDeleteOption: () => void; } -export default function HeaderContainer({ handleSetOnBottomSheet }: HeaderContainerProps) { +export default function HeaderContainer({ handleSetOnBottomSheet, handleSetOnDeleteOption }: HeaderContainerProps) { const { isOn, handleSetOn, handleSetOff } = useBooleanOutput(); const bottomSheetOptionList = [ @@ -21,7 +22,7 @@ export default function HeaderContainer({ handleSetOnBottomSheet }: HeaderContai { key: 'deleteFolder', title: '폴더 삭제하기', - onClick: () => {}, + onClick: handleSetOnDeleteOption, }, ]; diff --git a/src/app/collection/[folderId]/page.css.ts b/src/app/collection/[folderId]/page.css.ts index b9f07c90..24faafab 100644 --- a/src/app/collection/[folderId]/page.css.ts +++ b/src/app/collection/[folderId]/page.css.ts @@ -1,5 +1,6 @@ import { style } from '@vanilla-extract/css'; import { vars } from '@/styles/theme.css'; +import { Subtitle } from '@/styles/font.css'; export const container = style({ height: '100vh', @@ -16,3 +17,18 @@ export const contentInput = style({ fontSize: '1.6rem', fontWeight: 400, }); + +// BottomSheet Description +export const content = style([ + Subtitle, + { + paddingTop: 30, + fontWeight: 600, + color: vars.color.black, + + display: 'flex', + flexDirection: 'column', + gap: 8, + alignItems: 'center', + }, +]); diff --git a/src/app/collection/[folderId]/page.tsx b/src/app/collection/[folderId]/page.tsx index 1b5f1c74..5a705a3b 100644 --- a/src/app/collection/[folderId]/page.tsx +++ b/src/app/collection/[folderId]/page.tsx @@ -25,6 +25,11 @@ interface ParamType { export default function CollectionDetailPage({ params }: ParamType) { const folderId = params.folderId; const { isOn, handleSetOn, handleSetOff } = useBooleanOutput(); + const { + isOn: isDeleteOption, + handleSetOn: handleSetOnDeleteOption, + handleSetOff: handleSetOffDeleteOption, + } = useBooleanOutput(); const queryClient = useQueryClient(); const { language } = useLanguage(); @@ -67,7 +72,7 @@ export default function CollectionDetailPage({ params }: ParamType) { return (
- + 폴더 이름 바꾸기 @@ -78,7 +83,18 @@ export default function CollectionDetailPage({ params }: ParamType) { onChange={handleChangeInput} className={styles.contentInput} /> - + + 만들기 + + + +
+

정말 삭제하시나요?

+

폴더와 안에 있었던 리스트가 모두 삭제돼요

+
+ {}}> + 삭제 +
); diff --git a/src/app/collection/_components/BottomSheet.css.ts b/src/app/collection/_components/BottomSheet.css.ts index 4913429a..9241a953 100644 --- a/src/app/collection/_components/BottomSheet.css.ts +++ b/src/app/collection/_components/BottomSheet.css.ts @@ -69,4 +69,5 @@ const button = style({ export const variantButton = styleVariants({ default: [button], active: [button, { color: vars.color.blue }], + delete: [button, { color: vars.color.red }], }); diff --git a/src/app/collection/_components/BottomSheetButton.tsx b/src/app/collection/_components/BottomSheetButton.tsx index e4ca4b47..a3b5e23b 100644 --- a/src/app/collection/_components/BottomSheetButton.tsx +++ b/src/app/collection/_components/BottomSheetButton.tsx @@ -3,16 +3,18 @@ import * as styles from './BottomSheet.css'; interface BottomSheetButtonProps { onClose: () => void; onClick: () => void; + children: string; + isDelete?: boolean; } -export default function BottomSheetButton({ onClose, onClick }: BottomSheetButtonProps) { +export default function BottomSheetButton({ onClose, onClick, children, isDelete = false }: BottomSheetButtonProps) { return (
-
); diff --git a/src/app/collection/page.tsx b/src/app/collection/page.tsx index c0759e36..ffc1a2f6 100644 --- a/src/app/collection/page.tsx +++ b/src/app/collection/page.tsx @@ -107,7 +107,9 @@ export default function CollectionPage() { onChange={handleChangeInput} className={styles.contentInput} /> - + + 만들기 + ); From 85088f566a914252351dcfc8591c1f89487f13e3 Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Thu, 24 Oct 2024 22:57:44 +0900 Subject: [PATCH 77/86] =?UTF-8?q?Feat:=20=ED=8F=B4=EB=8D=94=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C=ED=95=98=EA=B8=B0=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/_api/folder/deleteFolder.ts | 7 +++++++ src/app/collection/[folderId]/page.tsx | 29 +++++++++++++++++++++++++- 2 files changed, 35 insertions(+), 1 deletion(-) create mode 100644 src/app/_api/folder/deleteFolder.ts diff --git a/src/app/_api/folder/deleteFolder.ts b/src/app/_api/folder/deleteFolder.ts new file mode 100644 index 00000000..32541cf8 --- /dev/null +++ b/src/app/_api/folder/deleteFolder.ts @@ -0,0 +1,7 @@ +import axiosInstance from '@/lib/axios/axiosInstance'; + +const deleteFolder = async (folderId: string) => { + await axiosInstance.delete(`/folders/${folderId}`); +}; + +export default deleteFolder; diff --git a/src/app/collection/[folderId]/page.tsx b/src/app/collection/[folderId]/page.tsx index 5a705a3b..8308d1fe 100644 --- a/src/app/collection/[folderId]/page.tsx +++ b/src/app/collection/[folderId]/page.tsx @@ -1,5 +1,6 @@ 'use client'; +import { useRouter } from 'next/navigation'; import { ChangeEvent, useState } from 'react'; import { useMutation, useQueryClient } from '@tanstack/react-query'; import { isAxiosError } from 'axios'; @@ -16,6 +17,7 @@ import toasting from '@/lib/utils/toasting'; import toastMessage from '@/lib/constants/toastMessage'; import { QUERY_KEYS } from '@/lib/constants/queryKeys'; import updateCollectionFolder from '@/app/_api/folder/updateFolder'; +import deleteFolder from '@/app/_api/folder/deleteFolder'; interface ParamType { params: { folderId: string }; @@ -32,9 +34,11 @@ export default function CollectionDetailPage({ params }: ParamType) { } = useBooleanOutput(); const queryClient = useQueryClient(); const { language } = useLanguage(); + const router = useRouter(); const [value, setValue] = useState(''); + // 폴더 수정하기 mutation const editFolderMutation = useMutation({ mutationFn: updateCollectionFolder, onSuccess: () => { @@ -58,6 +62,25 @@ export default function CollectionDetailPage({ params }: ParamType) { }, }); + // 폴더 삭제하기 mutation + const deleteFolderMutation = useMutation({ + mutationFn: deleteFolder, + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.getFolders] }); + handleSetOffDeleteOption(); + router.push('/collection'); + }, + onError: (error) => { + if (isAxiosError(error)) { + const errorData = error.response?.data; + if (errorData.error === 'UNAUTHORIZED') { + toasting({ type: 'error', txt: toastMessage[language].requiredLogin }); + return; + } + } + }, + }); + const handleChangeInput = (e: ChangeEvent) => { setValue(e.target.value); }; @@ -70,6 +93,10 @@ export default function CollectionDetailPage({ params }: ParamType) { editFolderMutation.mutate({ folderId, folderName: value }); }; + const handleDeleteFolder = () => { + deleteFolderMutation.mutate(folderId); + }; + return (
@@ -92,7 +119,7 @@ export default function CollectionDetailPage({ params }: ParamType) {

정말 삭제하시나요?

폴더와 안에 있었던 리스트가 모두 삭제돼요

- {}}> + 삭제 From 97f494dcf4ed6eb5e01a5b18653c68586b11e350 Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Thu, 24 Oct 2024 22:58:30 +0900 Subject: [PATCH 78/86] =?UTF-8?q?Feat:=20=ED=8F=B4=EB=8D=94=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=EC=97=90=EC=84=9C=20=EB=92=A4=EB=A1=9C?= =?UTF-8?q?=EA=B0=80=EA=B8=B0=20=ED=81=B4=EB=A6=AD=EC=8B=9C=20=EA=B2=BD?= =?UTF-8?q?=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/collection/page.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/app/collection/page.tsx b/src/app/collection/page.tsx index ffc1a2f6..170cdb09 100644 --- a/src/app/collection/page.tsx +++ b/src/app/collection/page.tsx @@ -14,6 +14,7 @@ import BottomSheet from './_components/BottomSheet'; import useBooleanOutput from '@/hooks/useBooleanOutput'; import { useLanguage } from '@/store/useLanguage'; +import { useUser } from '@/store/useUser'; import createCollectionFolder from '../_api/folder/createFolder'; import getFolders, { FoldersResponseType } from '../_api/folder/getFolders'; @@ -24,6 +25,7 @@ import { QUERY_KEYS } from '@/lib/constants/queryKeys'; export default function CollectionPage() { const router = useRouter(); + const { user: userMe } = useUser(); const queryClient = useQueryClient(); const { language } = useLanguage(); const { data } = useQuery({ @@ -74,7 +76,7 @@ export default function CollectionPage() { return (
-
router.back()} /> +
router.push(`/user/${userMe.id}/mylist`)} />
{data?.folders.map((folder) => ( From 99683a4bf89e52d8be9d38d3438028fa3ebc8fd6 Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Thu, 24 Oct 2024 23:00:37 +0900 Subject: [PATCH 79/86] =?UTF-8?q?Fix:=20=ED=8F=B4=EB=8D=94=20=EC=BD=9C?= =?UTF-8?q?=EB=A0=89=EC=85=98=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EB=B0=B0?= =?UTF-8?q?=EA=B2=BD=EC=9D=B4=EB=AF=B8=EC=A7=80=20url=20=EA=B0=92=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/collection/[folderId]/_components/Collections.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/collection/[folderId]/_components/Collections.tsx b/src/app/collection/[folderId]/_components/Collections.tsx index c4c621ab..5c9f4a43 100644 --- a/src/app/collection/[folderId]/_components/Collections.tsx +++ b/src/app/collection/[folderId]/_components/Collections.tsx @@ -34,7 +34,7 @@ export default function Collections({ folderId }: CollectionsProps) { href={`/list/${list.id}`} className={styles.contentVariant[hasImage ? 'round' : 'square']} style={assignInlineVars({ - [styles.imageUrl]: `url(${hasImage ? list.representativeImageUrl : null})`, + [styles.imageUrl]: `url(${hasImage ? list.representativeImageUrl : ''})`, })} >
{list.category}
From 9d31279328a91be366c4027e93bb00d7773bfada Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Thu, 24 Oct 2024 23:22:04 +0900 Subject: [PATCH 80/86] =?UTF-8?q?Design:=20=EC=BD=9C=EB=A0=89=EC=85=98=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/collection/page.css.ts | 7 +++++-- src/app/collection/page.tsx | 2 +- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/app/collection/page.css.ts b/src/app/collection/page.css.ts index 4c68c4f1..cdbf7c00 100644 --- a/src/app/collection/page.css.ts +++ b/src/app/collection/page.css.ts @@ -2,15 +2,18 @@ import { style } from '@vanilla-extract/css'; import { vars } from '@/styles/theme.css'; import { Label } from '@/styles/font.css'; +export const wrapper = style({ + height: '100vh', +}); + export const container = style({ position: 'relative', - paddingBottom: 83, height: 'calc(100% - 70px)', backgroundColor: vars.color.bggray, }); export const folders = style({ - padding: '2.4rem 4.8rem', + padding: '2.4rem 4.8rem 8.3rem 4.8rem', display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gridColumnGap: 34, diff --git a/src/app/collection/page.tsx b/src/app/collection/page.tsx index 170cdb09..25e3f033 100644 --- a/src/app/collection/page.tsx +++ b/src/app/collection/page.tsx @@ -75,7 +75,7 @@ export default function CollectionPage() { }; return ( -
+
router.push(`/user/${userMe.id}/mylist`)} />
From 38504e244750c1e4940aa536876e766d6fdb4fdc Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Fri, 25 Oct 2024 09:55:38 +0900 Subject: [PATCH 81/86] =?UTF-8?q?Chore:=20=EB=B9=8C=EB=93=9C=20=EC=97=90?= =?UTF-8?q?=EB=9F=AC=20=EC=88=98=EC=A0=95=20(=EA=B8=B0=EC=A1=B4=20?= =?UTF-8?q?=ED=8F=B4=EB=8D=94=20rename=EC=9C=BC=EB=A1=9C=20=EC=9D=B8?= =?UTF-8?q?=ED=95=9C=20import=20=EA=B2=BD=EB=A1=9C=20=EC=98=A4=EB=A5=98)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/collection/_[category]/page.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/collection/_[category]/page.tsx b/src/app/collection/_[category]/page.tsx index fd29dcb0..a55c528b 100644 --- a/src/app/collection/_[category]/page.tsx +++ b/src/app/collection/_[category]/page.tsx @@ -9,10 +9,10 @@ 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/[category]/_components/NoData'; +import Top3CardSkeleton from '@/app/collection/_[category]/_components/Top3CardSkeleton'; +import NoData from '@/app/collection/_[category]/_components/NoData'; import { CollectionType } from '@/lib/types/listType'; -import Top3Card from '@/app/collection/[category]/_components/Top3Card'; +import Top3Card from '@/app/collection/_[category]/_components/Top3Card'; import { categoriesLocale } from '@/app/collection/locale'; import { useLanguage } from '@/store/useLanguage'; From eab8f547e05cddcefd247b2103bb562bc3bb024d Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Fri, 25 Oct 2024 10:21:45 +0900 Subject: [PATCH 82/86] =?UTF-8?q?Design:=20(=EC=BD=94=EB=93=9C=EB=A6=AC?= =?UTF-8?q?=EB=B7=B0=20=EB=B0=98=EC=98=81)=20=EC=BD=9C=EB=A0=89=EC=85=98?= =?UTF-8?q?=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../collection/[folderId]/_components/Collections.css.ts | 3 +++ src/app/collection/[folderId]/_components/Collections.tsx | 7 +++++-- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/app/collection/[folderId]/_components/Collections.css.ts b/src/app/collection/[folderId]/_components/Collections.css.ts index 8388e63b..1ad25384 100644 --- a/src/app/collection/[folderId]/_components/Collections.css.ts +++ b/src/app/collection/[folderId]/_components/Collections.css.ts @@ -84,6 +84,9 @@ export const items = style({ const item = style({ padding: '0.45rem 0.62rem', borderRadius: 18, + display: 'flex', + gap: 2, + alignItems: 'center', }); export const itemVariant = styleVariants({ diff --git a/src/app/collection/[folderId]/_components/Collections.tsx b/src/app/collection/[folderId]/_components/Collections.tsx index 5c9f4a43..43e42375 100644 --- a/src/app/collection/[folderId]/_components/Collections.tsx +++ b/src/app/collection/[folderId]/_components/Collections.tsx @@ -40,12 +40,15 @@ export default function Collections({ folderId }: CollectionsProps) {
{list.category}

{list.title}

-

Sehui Park

+

{list.ownerNickname}

    {list.listItems.map((item) => (
  • - {item.rank} + + {item.rank} + {`.`} + {item.title}
    • ))} From d1823b80442f125338e3645b23d5053e3a6ec728 Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Sun, 27 Oct 2024 17:30:54 +0900 Subject: [PATCH 83/86] =?UTF-8?q?Refactor:=20=EC=BD=9C=EB=A0=89=EC=85=98?= =?UTF-8?q?=20=EC=8B=AC=ED=94=8C=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EA=B3=B5?= =?UTF-8?q?=ED=86=B5=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A1=9C=20?= =?UTF-8?q?=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../[folderId]/_components/Collections.css.ts | 102 +--------------- .../[folderId]/_components/Collections.tsx | 35 +----- .../ShapeSimpleList/ShapeSimpleList.css.ts | 113 ++++++++++++++++++ .../ShapeSimpleList/ShapeSimpleList.tsx | 42 +++++++ 4 files changed, 158 insertions(+), 134 deletions(-) create mode 100644 src/components/ShapeSimpleList/ShapeSimpleList.css.ts create mode 100644 src/components/ShapeSimpleList/ShapeSimpleList.tsx diff --git a/src/app/collection/[folderId]/_components/Collections.css.ts b/src/app/collection/[folderId]/_components/Collections.css.ts index 1ad25384..3e29718c 100644 --- a/src/app/collection/[folderId]/_components/Collections.css.ts +++ b/src/app/collection/[folderId]/_components/Collections.css.ts @@ -1,8 +1,5 @@ -import { createVar, style, styleVariants } from '@vanilla-extract/css'; +import { style } from '@vanilla-extract/css'; import { vars } from '@/styles/theme.css'; -import { Label, LabelSmall } from '@/styles/font.css'; - -export const imageUrl = createVar(); export const container = style({ padding: '2.4rem 1.6rem', @@ -14,100 +11,3 @@ export const container = style({ justifyItems: 'center', backgroundColor: vars.color.bggray, }); - -const content = style({ - width: 173, - height: 173, - display: 'flex', - flexDirection: 'column', - justifyContent: 'center', - alignItems: 'center', - - backgroundImage: imageUrl, - backgroundPosition: 'center', - backgroundColor: vars.color.white, -}); - -export const contentVariant = styleVariants({ - round: [content, { borderRadius: '100%' }], - square: [content, { borderRadius: 20 }], -}); - -export const category = style([ - LabelSmall, - { - padding: '2px 6px', - backgroundColor: vars.color.blue, - borderRadius: 20, - color: vars.color.white, - }, -]); - -export const info = style({ - paddingTop: '0.6rem', - paddingBottom: '0.5rem', - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - gap: 4, -}); - -// 배경이미지 유무에 따른 스타일 variants -const fontColor = { - white: vars.color.white, - black: vars.color.black, -}; - -export const title = styleVariants(fontColor, (color) => [ - Label, - { - color, - fontWeight: 600, - }, -]); - -export const owner = styleVariants(fontColor, (color) => [ - LabelSmall, - { - color, - fontWeight: 400, - }, -]); - -export const items = style({ - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - gap: 5, -}); - -const item = style({ - padding: '0.45rem 0.62rem', - borderRadius: 18, - display: 'flex', - gap: 2, - alignItems: 'center', -}); - -export const itemVariant = styleVariants({ - white: [ - item, - { - backgroundColor: '#F5FAFF', - color: vars.color.blue, - }, - ], - blue: [ - item, - { - backgroundColor: 'rgba(245, 250, 255, 0.30)', - color: vars.color.white, - }, - ], -}); - -export const date = styleVariants(fontColor, (color) => ({ - paddingTop: '0.8rem', - fontSize: '0.9rem', - color, -})); diff --git a/src/app/collection/[folderId]/_components/Collections.tsx b/src/app/collection/[folderId]/_components/Collections.tsx index 43e42375..dec07b32 100644 --- a/src/app/collection/[folderId]/_components/Collections.tsx +++ b/src/app/collection/[folderId]/_components/Collections.tsx @@ -1,14 +1,12 @@ 'use client'; -import Link from 'next/link'; import { useQuery } from '@tanstack/react-query'; -import { assignInlineVars } from '@vanilla-extract/dynamic'; import * as styles from './Collections.css'; +import ShapeSimpleList from '@/components/ShapeSimpleList/ShapeSimpleList'; import getCollection from '@/app/_api/collect/getCollection'; import { QUERY_KEYS } from '@/lib/constants/queryKeys'; -import formatDate from '@/lib/utils/dateFormat'; interface CollectionsProps { folderId: string; @@ -22,40 +20,11 @@ export default function Collections({ folderId }: CollectionsProps) { queryFn: () => getCollection({ folderId }), }); - console.log(data); - return (
      {data?.collectionLists.map(({ list, id }) => { const hasImage = !!list.representativeImageUrl; - return ( - -
      {list.category}
      -
      -

      {list.title}

      -

      {list.ownerNickname}

      -
      -
        - {list.listItems.map((item) => ( -
      • - - {item.rank} - {`.`} - - {item.title} -
        • - ))} -
      -

      {formatDate(list.updatedDate)}

      - - ); + return ; })}
    ); diff --git a/src/components/ShapeSimpleList/ShapeSimpleList.css.ts b/src/components/ShapeSimpleList/ShapeSimpleList.css.ts new file mode 100644 index 00000000..1ad25384 --- /dev/null +++ b/src/components/ShapeSimpleList/ShapeSimpleList.css.ts @@ -0,0 +1,113 @@ +import { createVar, style, styleVariants } from '@vanilla-extract/css'; +import { vars } from '@/styles/theme.css'; +import { Label, LabelSmall } from '@/styles/font.css'; + +export const imageUrl = createVar(); + +export const container = style({ + padding: '2.4rem 1.6rem', + display: 'grid', + gridTemplateColumns: '1fr 1fr', + gridTemplateRows: 'max-content', + gridGap: 12, + alignContent: 'flex-start', + justifyItems: 'center', + backgroundColor: vars.color.bggray, +}); + +const content = style({ + width: 173, + height: 173, + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + + backgroundImage: imageUrl, + backgroundPosition: 'center', + backgroundColor: vars.color.white, +}); + +export const contentVariant = styleVariants({ + round: [content, { borderRadius: '100%' }], + square: [content, { borderRadius: 20 }], +}); + +export const category = style([ + LabelSmall, + { + padding: '2px 6px', + backgroundColor: vars.color.blue, + borderRadius: 20, + color: vars.color.white, + }, +]); + +export const info = style({ + paddingTop: '0.6rem', + paddingBottom: '0.5rem', + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + gap: 4, +}); + +// 배경이미지 유무에 따른 스타일 variants +const fontColor = { + white: vars.color.white, + black: vars.color.black, +}; + +export const title = styleVariants(fontColor, (color) => [ + Label, + { + color, + fontWeight: 600, + }, +]); + +export const owner = styleVariants(fontColor, (color) => [ + LabelSmall, + { + color, + fontWeight: 400, + }, +]); + +export const items = style({ + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + gap: 5, +}); + +const item = style({ + padding: '0.45rem 0.62rem', + borderRadius: 18, + display: 'flex', + gap: 2, + alignItems: 'center', +}); + +export const itemVariant = styleVariants({ + white: [ + item, + { + backgroundColor: '#F5FAFF', + color: vars.color.blue, + }, + ], + blue: [ + item, + { + backgroundColor: 'rgba(245, 250, 255, 0.30)', + color: vars.color.white, + }, + ], +}); + +export const date = styleVariants(fontColor, (color) => ({ + paddingTop: '0.8rem', + fontSize: '0.9rem', + color, +})); diff --git a/src/components/ShapeSimpleList/ShapeSimpleList.tsx b/src/components/ShapeSimpleList/ShapeSimpleList.tsx new file mode 100644 index 00000000..b9353403 --- /dev/null +++ b/src/components/ShapeSimpleList/ShapeSimpleList.tsx @@ -0,0 +1,42 @@ +import Link from 'next/link'; +import { assignInlineVars } from '@vanilla-extract/dynamic'; + +import * as styles from './ShapeSimpleList.css'; + +import formatDate from '@/lib/utils/dateFormat'; +import { CollectionListType } from '@/lib/types/listType'; + +interface ShapeSimpleListProps { + list: CollectionListType; + hasImage: boolean; +} + +export default function ShapeSimpleList({ list, hasImage }: ShapeSimpleListProps) { + return ( + +
    {list.category}
    +
    +

    {list.title}

    +

    {list.ownerNickname}

    +
    +
      + {list.listItems.map((item) => ( +
    • + + {item.rank} + {`.`} + + {item.title} +
      • + ))} +
    +

    {formatDate(list.updatedDate)}

    + + ); +} From 77f65a8cc46fd3d2b8126d8534bb95656341212a Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Sun, 27 Oct 2024 17:45:13 +0900 Subject: [PATCH 84/86] =?UTF-8?q?Rename:=20BottomSheet=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20Ver3.0=20=EA=B3=B5=ED=86=B5?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A1=9C=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/collection/[folderId]/page.tsx | 2 +- src/app/collection/page.tsx | 2 +- .../BottomSheet/ver3.0}/BottomSheet.css.ts | 0 .../BottomSheet/ver3.0}/BottomSheet.tsx | 0 .../BottomSheet/ver3.0}/BottomSheetButton.tsx | 0 .../BottomSheet/ver3.0}/BottomSheetTitle.tsx | 0 6 files changed, 2 insertions(+), 2 deletions(-) rename src/{app/collection/_components => components/BottomSheet/ver3.0}/BottomSheet.css.ts (100%) rename src/{app/collection/_components => components/BottomSheet/ver3.0}/BottomSheet.tsx (100%) rename src/{app/collection/_components => components/BottomSheet/ver3.0}/BottomSheetButton.tsx (100%) rename src/{app/collection/_components => components/BottomSheet/ver3.0}/BottomSheetTitle.tsx (100%) diff --git a/src/app/collection/[folderId]/page.tsx b/src/app/collection/[folderId]/page.tsx index 8308d1fe..2087a492 100644 --- a/src/app/collection/[folderId]/page.tsx +++ b/src/app/collection/[folderId]/page.tsx @@ -7,7 +7,7 @@ import { isAxiosError } from 'axios'; import HeaderContainer from './_components/HeaderContainer'; import Collections from './_components/Collections'; -import BottomSheet from '../_components/BottomSheet'; +import BottomSheet from '@/components/BottomSheet/ver3.0/BottomSheet'; import * as styles from './page.css'; diff --git a/src/app/collection/page.tsx b/src/app/collection/page.tsx index 25e3f033..dfcf422d 100644 --- a/src/app/collection/page.tsx +++ b/src/app/collection/page.tsx @@ -10,7 +10,7 @@ import { isAxiosError } from 'axios'; import * as styles from './page.css'; import Header from '@/components/Header/Header'; -import BottomSheet from './_components/BottomSheet'; +import BottomSheet from '@/components/BottomSheet/ver3.0/BottomSheet'; import useBooleanOutput from '@/hooks/useBooleanOutput'; import { useLanguage } from '@/store/useLanguage'; diff --git a/src/app/collection/_components/BottomSheet.css.ts b/src/components/BottomSheet/ver3.0/BottomSheet.css.ts similarity index 100% rename from src/app/collection/_components/BottomSheet.css.ts rename to src/components/BottomSheet/ver3.0/BottomSheet.css.ts diff --git a/src/app/collection/_components/BottomSheet.tsx b/src/components/BottomSheet/ver3.0/BottomSheet.tsx similarity index 100% rename from src/app/collection/_components/BottomSheet.tsx rename to src/components/BottomSheet/ver3.0/BottomSheet.tsx diff --git a/src/app/collection/_components/BottomSheetButton.tsx b/src/components/BottomSheet/ver3.0/BottomSheetButton.tsx similarity index 100% rename from src/app/collection/_components/BottomSheetButton.tsx rename to src/components/BottomSheet/ver3.0/BottomSheetButton.tsx diff --git a/src/app/collection/_components/BottomSheetTitle.tsx b/src/components/BottomSheet/ver3.0/BottomSheetTitle.tsx similarity index 100% rename from src/app/collection/_components/BottomSheetTitle.tsx rename to src/components/BottomSheet/ver3.0/BottomSheetTitle.tsx From 332ef8afadf73b749ba1878ca9a50eae9cccb6a2 Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Sun, 27 Oct 2024 18:06:11 +0900 Subject: [PATCH 85/86] =?UTF-8?q?Refactor:=20BottomSheet=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=97=90=20Content=20=EB=B6=80?= =?UTF-8?q?=EB=B6=84=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/collection/[folderId]/page.tsx | 10 ++++++---- .../BottomSheet/ver3.0/BottomSheet.css.ts | 19 ++++++++++++++++++ .../BottomSheet/ver3.0/BottomSheet.tsx | 2 ++ .../BottomSheet/ver3.0/BottomSheetContent.tsx | 20 +++++++++++++++++++ 4 files changed, 47 insertions(+), 4 deletions(-) create mode 100644 src/components/BottomSheet/ver3.0/BottomSheetContent.tsx diff --git a/src/app/collection/[folderId]/page.tsx b/src/app/collection/[folderId]/page.tsx index 2087a492..6a068fd6 100644 --- a/src/app/collection/[folderId]/page.tsx +++ b/src/app/collection/[folderId]/page.tsx @@ -115,10 +115,12 @@ export default function CollectionDetailPage({ params }: ParamType) { -
    -

    정말 삭제하시나요?

    -

    폴더와 안에 있었던 리스트가 모두 삭제돼요

    -
    + 삭제 diff --git a/src/components/BottomSheet/ver3.0/BottomSheet.css.ts b/src/components/BottomSheet/ver3.0/BottomSheet.css.ts index 9241a953..a95657e0 100644 --- a/src/components/BottomSheet/ver3.0/BottomSheet.css.ts +++ b/src/components/BottomSheet/ver3.0/BottomSheet.css.ts @@ -2,6 +2,7 @@ import { style, styleVariants } from '@vanilla-extract/css'; import { vars } from '@/styles/theme.css'; import { Subtitle } from '@/styles/font.css'; +// BottomSheet Container const containerStyle = style({ position: 'fixed', bottom: 0, @@ -26,6 +27,7 @@ export const container = styleVariants({ close: [containerStyle, { height: 0.5, opacity: 0 }], }); +// BottomSheet Inner Content Warpper export const contents = style({ paddingTop: '3.3rem', paddingLeft: '2rem', @@ -39,6 +41,7 @@ export const contents = style({ gap: 12, }); +// BottomSheet Title export const contentTitle = style([ Subtitle, { @@ -47,6 +50,22 @@ export const contentTitle = style([ }, ]); +// BottomSheet Description +export const content = style([ + Subtitle, + { + paddingTop: 30, + fontWeight: 600, + color: vars.color.black, + + display: 'flex', + flexDirection: 'column', + gap: 8, + alignItems: 'center', + }, +]); + +// BottomSheet Button export const optionButtons = style({ margin: 12, display: 'flex', diff --git a/src/components/BottomSheet/ver3.0/BottomSheet.tsx b/src/components/BottomSheet/ver3.0/BottomSheet.tsx index ea15c759..97c757b7 100644 --- a/src/components/BottomSheet/ver3.0/BottomSheet.tsx +++ b/src/components/BottomSheet/ver3.0/BottomSheet.tsx @@ -3,6 +3,7 @@ import { ReactNode } from 'react'; import * as styles from './BottomSheet.css'; import BottomSheetTitle from './BottomSheetTitle'; +import BottomSheetContent from './BottomSheetContent'; import BottomSheetButton from './BottomSheetButton'; interface BottomSheetProps { @@ -20,6 +21,7 @@ function FolderBottomSheet({ isOn, children }: BottomSheetProps) { const BottomSheet = Object.assign(FolderBottomSheet, { Title: BottomSheetTitle, + Content: BottomSheetContent, Button: BottomSheetButton, }); diff --git a/src/components/BottomSheet/ver3.0/BottomSheetContent.tsx b/src/components/BottomSheet/ver3.0/BottomSheetContent.tsx new file mode 100644 index 00000000..5edcf97d --- /dev/null +++ b/src/components/BottomSheet/ver3.0/BottomSheetContent.tsx @@ -0,0 +1,20 @@ +import { ReactNode } from 'react'; +import * as styles from './BottomSheet.css'; + +interface ContentsType { + text?: string; + subText?: string; +} + +interface BottomSheetContentProps { + contents: ContentsType; +} + +export default function BottomSheetContent({ contents }: BottomSheetContentProps) { + return ( +
    +

    {contents.text}

    +

    {contents.subText}

    +
    + ); +} From a083ac0815a5c00d3469a253ea3dd006d5303744 Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Sun, 27 Oct 2024 18:19:09 +0900 Subject: [PATCH 86/86] =?UTF-8?q?Refactor:=20BottomSheet=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B2=84=ED=8A=BC=20children=20p?= =?UTF-8?q?rop=20=ED=83=80=EC=9E=85=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/collection/[folderId]/page.tsx | 4 ++-- src/app/collection/page.tsx | 2 +- src/components/BottomSheet/ver3.0/BottomSheetButton.tsx | 8 +++++--- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/app/collection/[folderId]/page.tsx b/src/app/collection/[folderId]/page.tsx index 6a068fd6..b2d5a44a 100644 --- a/src/app/collection/[folderId]/page.tsx +++ b/src/app/collection/[folderId]/page.tsx @@ -111,7 +111,7 @@ export default function CollectionDetailPage({ params }: ParamType) { className={styles.contentInput} /> - 만들기 + {['취소', '만들기']}     @@ -122,7 +122,7 @@ export default function CollectionDetailPage({ params }: ParamType) { }} /> - 삭제 + {['취소', '삭제']}
diff --git a/src/app/collection/page.tsx b/src/app/collection/page.tsx index dfcf422d..0c3fd0d8 100644 --- a/src/app/collection/page.tsx +++ b/src/app/collection/page.tsx @@ -110,7 +110,7 @@ export default function CollectionPage() { className={styles.contentInput} /> - 만들기 + {['취소', '만들기']}
diff --git a/src/components/BottomSheet/ver3.0/BottomSheetButton.tsx b/src/components/BottomSheet/ver3.0/BottomSheetButton.tsx index a3b5e23b..b64ab5ce 100644 --- a/src/components/BottomSheet/ver3.0/BottomSheetButton.tsx +++ b/src/components/BottomSheet/ver3.0/BottomSheetButton.tsx @@ -3,18 +3,20 @@ import * as styles from './BottomSheet.css'; interface BottomSheetButtonProps { onClose: () => void; onClick: () => void; - children: string; + children: [string, string]; isDelete?: boolean; } export default function BottomSheetButton({ onClose, onClick, children, isDelete = false }: BottomSheetButtonProps) { + const [cancelText, actionText] = children; + return (
);