fix: [LINKER-142] Tab 컴포넌트 수정 (#71)

YAPP-Github · Feb 23, 2024 · 9e13fdf · 9e13fdf
1 parent 72ebbdd
commit 9e13fdf
Show file tree

Hide file tree

Showing 17 changed files with 103 additions and 74 deletions.
diff --git 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
@@ -1,9 +1,14 @@
-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',
   minWidth: '36rem',
   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
@@ -1,7 +1,23 @@
-import { container } from './Layout.css';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
 
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <section className={container}>{children}</section>;
+import { bgColorVar, container } from './Layout.css';
+
+interface Props {
+  children: React.ReactNode;
+  bgColor?: string;
+}
+
+const Layout = ({ children, bgColor }: Props) => {
+  return (
+    <section
+      className={container}
+      style={assignInlineVars(bgColorVar, {
+        backgroundColor: bgColor == null ? 'inherit' : bgColor,
+      })}
+    >
+      {children}
+    </section>
+  );
 };
 
 export default Layout;
diff --git a/packages/lds/src/List/ListHeader.tsx b/packages/lds/src/List/ListHeader.tsx
@@ -41,15 +41,17 @@ const ListHeader = ({
             {title}
           </Txt>
 
-          <Txt
-            as="p"
-            typography="p3"
-            fontWeight="regular"
-            color={colors.gray700}
-            className={descriptipon}
-          >
-            {description}
-          </Txt>
+          {description != null && (
+            <Txt
+              as="p"
+              typography="p3"
+              fontWeight="regular"
+              color={colors.gray700}
+              className={descriptipon}
+            >
+              {description}
+            </Txt>
+          )}
         </div>
 
         <div>{rightAddon}</div>

diff --git 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
@@ -65,13 +65,15 @@ const SearchInput = ({
               onBlur={() => (setIsFocused ? setIsFocused(false) : () => {})}
               value={watchQuery}
             />
-            <button
-              onClick={() => {
-                reset({ search: '' });
-              }}
-            >
-              <Icon name="close-gray" size={16} />
-            </button>
+            {query != null && (
+              <button
+                onClick={() => {
+                  reset({ search: '' });
+                }}
+              >
+                <Icon name="close-gray" size={16} />
+              </button>
+            )}
           </div>
         )}
       />

diff --git 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
@@ -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 (
     <nav className={tabs}>
-      <ul className={tapList}>
+      <ul className={tabList}>
         {tabInfos.map((tabInfo) => (
-          <li className={tapItem} key={tabInfo.href}>
+          <li
+            className={clsx(tabItem, pathname === tabInfo.href && activeTabItem)}
+            key={tabInfo.href}
+          >
             <Link
               href={tabInfo.href}
               className={clsx(link, pathname === tabInfo.href && activeLink)}
             >
-              <span>{tabInfo.text}</span>
+              <Txt typography="p1" color={colors.gray000} fontWeight="bold">
+                {tabInfo.text}
+              </Txt>
             </Link>
           </li>
         ))}
       </ul>
-      <div className={bottomLine}>
-        <div className={activeLine} />
-      </div>
+      <div className={bottomLine} />
     </nav>
   );
 }

diff --git a/services/web/src/app/my/contact/layout.tsx 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 <Layout bgColor={colors.gray000}>{children}</Layout>;
+}
+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
@@ -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
@@ -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
@@ -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
@@ -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<TrendDTO>('/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() {
         <List.Header
           title="트렌드 핫 이슈"
           typograyphy="h7"
-          rightAddon={
-            <button type="button">
-              <Image
-                src="https://static.im-linker.com/right-arrow-mono.png"
-                alt=""
-                width={28}
-                height={28}
-              />
-            </button>
-          }
+          rightAddon={<IconButton name="next-gray" size={24} />}
         />
+        <Spacing size={16} />
         <Issue recommendations={recommendations} />
         <MoreButton />
       </Link>

diff --git 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
@@ -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
@@ -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
@@ -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 = () => {
           <form className={container}>
             <div style={{ backgroundColor: categoryColor }} className={categoryIdentifier} />
             <Input
-              className={typography({ type: 'h5' })}
+              className={clsx(typography({ type: 'h5' }), titleInput)}
               placeholder="어떤 일정인가요?"
               errorMessage={errors.title?.message}
               {...register('title', {