From 9e13fdf3201984e0e5a83cc9074b827525bff53a Mon Sep 17 00:00:00 2001 From: Useong Lee Date: Sat, 24 Feb 2024 01:12:02 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20[LINKER-142]=20Tab=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=88=98=EC=A0=95=20(#71)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../lds/src/BottomSheet/BottomSheet.css.ts | 1 + packages/lds/src/Layout/Layout.css.ts | 7 +++- packages/lds/src/Layout/Layout.tsx | 22 +++++++++-- packages/lds/src/List/ListHeader.tsx | 20 +++++----- .../lds/src/SearchInput/SearchInput.css.ts | 2 +- packages/lds/src/SearchInput/SearchInput.tsx | 16 ++++---- packages/lds/src/Tabs/Tabs.css.ts | 38 ++++++++++--------- packages/lds/src/Tabs/Tabs.tsx | 19 ++++++---- services/web/src/app/my/contact/layout.tsx | 7 ++++ .../feed/contact-banner/ContactBanner.css.ts | 1 - .../components/PreviousSchedule.css.ts | 2 +- .../feed/trend/components/MoreButton.css.ts | 4 +- .../app/my/feed/trend/components/Trend.tsx | 27 +++---------- .../web/src/features/error/ErrorPage.css.ts | 2 +- .../web/src/features/my/MyHeader/MyHeader.tsx | 2 +- .../components/AddScheduleBottomSheet.css.ts | 4 ++ .../components/AddScheduleBottomSheet.tsx | 3 +- 17 files changed, 103 insertions(+), 74 deletions(-) create mode 100644 services/web/src/app/my/contact/layout.tsx diff --git a/packages/lds/src/BottomSheet/BottomSheet.css.ts b/packages/lds/src/BottomSheet/BottomSheet.css.ts index 2206088e..2db44477 100644 --- a/packages/lds/src/BottomSheet/BottomSheet.css.ts +++ b/packages/lds/src/BottomSheet/BottomSheet.css.ts @@ -28,6 +28,7 @@ export const content = style({ borderTopRightRadius: '1.6rem', backgroundColor: styleVar.backgroundColor, touchAction: 'none', + overscrollBehavior: 'none', }); export const handler = style({ diff --git a/packages/lds/src/Layout/Layout.css.ts b/packages/lds/src/Layout/Layout.css.ts index 75e7e235..4330bbd7 100644 --- a/packages/lds/src/Layout/Layout.css.ts +++ b/packages/lds/src/Layout/Layout.css.ts @@ -1,4 +1,8 @@ -import { style } from '@vanilla-extract/css'; +import { createThemeContract, style } from '@vanilla-extract/css'; + +export const bgColorVar = createThemeContract({ + backgroundColor: null, +}); export const container = style({ maxWidth: '72rem', @@ -6,4 +10,5 @@ export const container = style({ width: '100%', height: '100%', margin: '0 auto', + backgroundColor: bgColorVar.backgroundColor, }); diff --git a/packages/lds/src/Layout/Layout.tsx b/packages/lds/src/Layout/Layout.tsx index cf45772f..0905bdbd 100644 --- a/packages/lds/src/Layout/Layout.tsx +++ b/packages/lds/src/Layout/Layout.tsx @@ -1,7 +1,23 @@ -import { container } from './Layout.css'; +import { assignInlineVars } from '@vanilla-extract/dynamic'; -const Layout = ({ children }: { children: React.ReactNode }) => { - return
{children}
; +import { bgColorVar, container } from './Layout.css'; + +interface Props { + children: React.ReactNode; + bgColor?: string; +} + +const Layout = ({ children, bgColor }: Props) => { + return ( +
+ {children} +
+ ); }; export default Layout; diff --git a/packages/lds/src/List/ListHeader.tsx b/packages/lds/src/List/ListHeader.tsx index 5b80f544..d65cbad2 100644 --- a/packages/lds/src/List/ListHeader.tsx +++ b/packages/lds/src/List/ListHeader.tsx @@ -41,15 +41,17 @@ const ListHeader = ({ {title} - - {description} - + {description != null && ( + + {description} + + )}
{rightAddon}
diff --git a/packages/lds/src/SearchInput/SearchInput.css.ts b/packages/lds/src/SearchInput/SearchInput.css.ts index 959c7467..38a24832 100644 --- a/packages/lds/src/SearchInput/SearchInput.css.ts +++ b/packages/lds/src/SearchInput/SearchInput.css.ts @@ -2,7 +2,7 @@ import { colors } from '@linker/styles'; import { style } from '@vanilla-extract/css'; export const searchInputContainer = style({ - background: `${colors.gray100}`, + background: `${colors.gray050}`, width: '100%', borderRadius: '0.4rem', height: '4.4rem', diff --git a/packages/lds/src/SearchInput/SearchInput.tsx b/packages/lds/src/SearchInput/SearchInput.tsx index 6e6383f9..6bfcca36 100644 --- a/packages/lds/src/SearchInput/SearchInput.tsx +++ b/packages/lds/src/SearchInput/SearchInput.tsx @@ -65,13 +65,15 @@ const SearchInput = ({ onBlur={() => (setIsFocused ? setIsFocused(false) : () => {})} value={watchQuery} /> - + {query != null && ( + + )} )} /> diff --git a/packages/lds/src/Tabs/Tabs.css.ts b/packages/lds/src/Tabs/Tabs.css.ts index c753164b..1f8a285d 100644 --- a/packages/lds/src/Tabs/Tabs.css.ts +++ b/packages/lds/src/Tabs/Tabs.css.ts @@ -4,47 +4,51 @@ import { style } from '@vanilla-extract/css'; import { TAB_HEIGHT } from '../constants'; export const tabs = style({ - maxWidth: '72rem', + maxWidth: '68rem', margin: '0 auto', }); -export const tapList = style({ +export const tabList = style({ position: 'relative', display: 'flex', }); -export const tapItem = style({ +export const tabItem = style({ + position: 'relative', display: 'flex', justifyContent: 'center', alignItems: 'center', flex: 1, }); +export const activeTabItem = style({ + selectors: { + '&:after': { + content: '', + position: 'absolute', + bottom: -2, + width: '80%', + height: '0.4rem', + backgroundColor: `${colors.gray000}`, + }, + }, +}); + export const link = style({ + opacity: 0.3, display: 'flex', justifyContent: 'center', alignItems: 'center', - width: '94px', height: TAB_HEIGHT, - fontSize: '1.6rem', - color: 'rgba(255, 255, 255, 0.3)', - fontWeight: 'bold', }); export const activeLink = style({ - color: `${colors.gray000}`, + opacity: '1 !important', + transition: 'opacity 0.1s ease-out', }); export const bottomLine = style({ - position: 'relative', width: '100%', - height: '4px', + height: '0.2rem', backgroundColor: 'rgba(255, 255, 255, 0.3)', }); - -export const activeLine = style({ - position: 'absolute', - height: '100%', - backgroundColor: `${colors.gray000}`, - transition: 'left 0.1s ease-out', -}); diff --git a/packages/lds/src/Tabs/Tabs.tsx b/packages/lds/src/Tabs/Tabs.tsx index 8f994973..6cf7456a 100644 --- a/packages/lds/src/Tabs/Tabs.tsx +++ b/packages/lds/src/Tabs/Tabs.tsx @@ -1,10 +1,12 @@ 'use client'; +import { colors } from '@linker/styles'; import { clsx } from 'clsx'; import Link from 'next/link'; import { usePathname } from 'next/navigation'; -import { tabs, tapList, tapItem, link, activeLink, bottomLine, activeLine } from './Tabs.css'; +import { tabs, tabList, tabItem, link, activeLink, bottomLine, activeTabItem } from './Tabs.css'; +import { Txt } from '../Txt'; export interface TabInfo { href: string; @@ -20,21 +22,24 @@ function Tabs({ tabInfos }: TabsProps) { return ( ); } diff --git a/services/web/src/app/my/contact/layout.tsx b/services/web/src/app/my/contact/layout.tsx new file mode 100644 index 00000000..ea9d16f0 --- /dev/null +++ b/services/web/src/app/my/contact/layout.tsx @@ -0,0 +1,7 @@ +import { Layout } from '@linker/lds'; +import { colors } from '@linker/styles'; + +function ContactLayout({ children }: { children: React.ReactNode }) { + return {children}; +} +export default ContactLayout; diff --git a/services/web/src/app/my/feed/contact-banner/ContactBanner.css.ts b/services/web/src/app/my/feed/contact-banner/ContactBanner.css.ts index 59727306..11c7571c 100644 --- a/services/web/src/app/my/feed/contact-banner/ContactBanner.css.ts +++ b/services/web/src/app/my/feed/contact-banner/ContactBanner.css.ts @@ -23,7 +23,6 @@ export const bannerContainer = style({ alignItems: 'center', justifyContent: 'space-between', maxWidth: '72rem', - margin: '1.6rem auto', background: `${colors.gradationPurple} !important`, animation: `${keyframesExample} 0.4s linear`, }); diff --git a/services/web/src/app/my/feed/previous-schedule/components/PreviousSchedule.css.ts b/services/web/src/app/my/feed/previous-schedule/components/PreviousSchedule.css.ts index cab9019c..a4bbcfe0 100644 --- a/services/web/src/app/my/feed/previous-schedule/components/PreviousSchedule.css.ts +++ b/services/web/src/app/my/feed/previous-schedule/components/PreviousSchedule.css.ts @@ -6,7 +6,7 @@ export const wrapper = style({ export const header = style({ padding: '0 2rem', - marginBottom: '2.2rem', + marginBottom: '1.6rem', }); export const scheduleList = style({ diff --git a/services/web/src/app/my/feed/trend/components/MoreButton.css.ts b/services/web/src/app/my/feed/trend/components/MoreButton.css.ts index ae4a27ab..192d8c46 100644 --- a/services/web/src/app/my/feed/trend/components/MoreButton.css.ts +++ b/services/web/src/app/my/feed/trend/components/MoreButton.css.ts @@ -3,6 +3,6 @@ import { style } from '@vanilla-extract/css'; export const button = style({ width: '100%', - height: '4rem', - backgroundColor: colors.blue050, + height: '4rem !important', + backgroundColor: `${colors.blue050} !important`, }); diff --git a/services/web/src/app/my/feed/trend/components/Trend.tsx b/services/web/src/app/my/feed/trend/components/Trend.tsx index a67d3ce0..9d1dcfcc 100644 --- a/services/web/src/app/my/feed/trend/components/Trend.tsx +++ b/services/web/src/app/my/feed/trend/components/Trend.tsx @@ -1,12 +1,9 @@ import { NewsDTO } from '@/types/news'; import { TagDTO } from '@/types/tag'; import { ky } from '@linker/ky'; -import { List } from '@linker/lds'; -import Image from 'next/image'; +import { IconButton, List, Spacing } from '@linker/lds'; import Link from 'next/link'; -import { getTokens } from '@utils/token/server'; - import Issue from './Issue'; import MoreButton from './MoreButton'; @@ -21,17 +18,11 @@ export interface TrendDTO { }>; } -function getTrendNews() { +const getTrendNews = () => { return ky.get('/v1/news/trend?size=3'); -} +}; async function Trend() { - const accessToken = getTokens().accessToken; - - if (accessToken == null) { - return; - } - const { recommendations } = await getTrendNews(); return ( @@ -40,17 +31,9 @@ async function Trend() { - - - } + rightAddon={} /> + diff --git a/services/web/src/features/error/ErrorPage.css.ts b/services/web/src/features/error/ErrorPage.css.ts index 17c3ea70..8b70e3ee 100644 --- a/services/web/src/features/error/ErrorPage.css.ts +++ b/services/web/src/features/error/ErrorPage.css.ts @@ -5,7 +5,7 @@ export const container = style({ flexDirection: 'column', alignItems: 'center', justifyContent: 'center', - height: '90vh', + height: '80vh', }); export const title = style({ diff --git a/services/web/src/features/my/MyHeader/MyHeader.tsx b/services/web/src/features/my/MyHeader/MyHeader.tsx index a9131f1d..656211ba 100644 --- a/services/web/src/features/my/MyHeader/MyHeader.tsx +++ b/services/web/src/features/my/MyHeader/MyHeader.tsx @@ -6,7 +6,7 @@ import MyProfile from './MyProfile'; import MyProfileCard from './MyProfileCard'; const TAB_ITEMS = [ - { href: '/my/feed', text: '피드' }, + { href: '/my/feed', text: '홈 피드' }, { href: '/my/contact', text: '연락처' }, { href: '/my/timeline', text: '타임라인' }, ]; diff --git a/services/web/src/features/schedule/components/AddScheduleBottomSheet.css.ts b/services/web/src/features/schedule/components/AddScheduleBottomSheet.css.ts index e4d3247e..a30b407d 100644 --- a/services/web/src/features/schedule/components/AddScheduleBottomSheet.css.ts +++ b/services/web/src/features/schedule/components/AddScheduleBottomSheet.css.ts @@ -26,6 +26,10 @@ export const scheduleInput = style({ backgroundColor: `${colors.gray050} !important`, }); +export const titleInput = style({ + borderRadius: '0 !important', +}); + export const contactAddButton = style({ display: 'inline-flex', alignItems: 'center', diff --git a/services/web/src/features/schedule/components/AddScheduleBottomSheet.tsx b/services/web/src/features/schedule/components/AddScheduleBottomSheet.tsx index ee75c50a..2a61d1b0 100644 --- a/services/web/src/features/schedule/components/AddScheduleBottomSheet.tsx +++ b/services/web/src/features/schedule/components/AddScheduleBottomSheet.tsx @@ -39,6 +39,7 @@ import { scheduleInput, textarea, textareaContainer, + titleInput, } from './AddScheduleBottomSheet.css'; import SearchContact from './SearchContact'; import { contactCard, contactCardInfo, contactWrapper } from './SearchContact.css'; @@ -138,7 +139,7 @@ const AddScheduleBottomSheet = () => {