From 89144ab79c79c65b8d56ca67a5280795dd0f17a0 Mon Sep 17 00:00:00 2001 From: Useong Lee Date: Tue, 23 Jan 2024 17:05:18 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20[LINKER-95]=20=EB=94=94=EC=9E=90?= =?UTF-8?q?=EC=9D=B8=20=EC=8B=9C=EC=8A=A4=ED=85=9C=20=EC=B5=9C=EC=8B=A0?= =?UTF-8?q?=ED=99=94=20(#41)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + packages/lds/src/Calendar/Calendar.tsx | 12 +- packages/lds/src/Icon/Icon.css.ts | 13 ++ packages/lds/src/Icon/Icon.stories.tsx | 141 ++++++++++++++++++ packages/lds/src/Icon/Icon.tsx | 22 +++ packages/lds/src/Icon/index.ts | 1 + packages/lds/src/List/List.css.ts | 2 +- packages/lds/src/List/List.stories.tsx | 15 +- packages/lds/src/List/ListRow.tsx | 9 +- packages/lds/src/SearchInput/SearchInput.tsx | 9 +- packages/lds/src/index.ts | 1 + packages/styles/src/colors.css.ts | 48 +++++- packages/styles/src/nomalize.css | 10 ++ packages/styles/src/themes.css.ts | 6 +- packages/styles/src/typography.css.ts | 4 + services/web/next.config.js | 4 + services/web/src/app/my/contact/Contact.tsx | 13 +- .../ContactDefault/ContactDefault.tsx | 11 +- .../component/ContactSearch/ContactSearch.tsx | 10 +- .../feed/upcoming-schedule/ScheduleItem.tsx | 18 +-- services/web/src/app/my/timeline/Feed.tsx | 2 +- .../component/TimelineItem/TimelineItem.tsx | 24 +-- 22 files changed, 278 insertions(+), 98 deletions(-) create mode 100644 packages/lds/src/Icon/Icon.css.ts create mode 100644 packages/lds/src/Icon/Icon.stories.tsx create mode 100644 packages/lds/src/Icon/Icon.tsx create mode 100644 packages/lds/src/Icon/index.ts diff --git a/package.json b/package.json index 97ba53b2..6caedc55 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "dev": "yarn workspace web dev", "dev:mock": "yarn workspace web dev:mock", "build": "yarn workspace web build && yarn workspace web export", + "typecheck": "yarn workspace web typecheck", "lint": "yarn workspace web lint", "test": "yarn workspace web test", "postinstall": "husky install", diff --git a/packages/lds/src/Calendar/Calendar.tsx b/packages/lds/src/Calendar/Calendar.tsx index 3214d481..9d20c615 100644 --- a/packages/lds/src/Calendar/Calendar.tsx +++ b/packages/lds/src/Calendar/Calendar.tsx @@ -3,13 +3,13 @@ import clsx from 'clsx'; import { differenceInDays, differenceInWeeks, format, startOfMonth } from 'date-fns'; import { motion } from 'framer-motion'; -import Image from 'next/image'; import { forwardRef, useState } from 'react'; import { Calendar as ReactCalendar, CalendarProps } from 'react-calendar'; import { LooseValue, Value } from 'react-calendar/dist/cjs/shared/types'; import 'react-calendar/dist/Calendar.css'; import { calendar, dot, container, buttonWrapper } from './Calendar.css'; +import { Icon } from '../Icon'; interface Props extends Omit { value?: LooseValue; @@ -33,7 +33,7 @@ const Calendar = forwardRef((props, ref) => { > {withModeChange && ( )} ((props, ref) => { showNeighboringMonth={false} next2Label={null} prev2Label={null} - nextLabel={ - - } - prevLabel={ - - } + nextLabel={} + prevLabel={} calendarType="gregory" className={clsx(calendar, className)} maxDate={isWeekMode ? endOfWeek(value as Date) : undefined} diff --git a/packages/lds/src/Icon/Icon.css.ts b/packages/lds/src/Icon/Icon.css.ts new file mode 100644 index 00000000..b0a1163c --- /dev/null +++ b/packages/lds/src/Icon/Icon.css.ts @@ -0,0 +1,13 @@ +import { style } from '@vanilla-extract/css'; + +export const storybookContainer = style({ + display: 'flex', + flexWrap: 'wrap', +}); + +export const iconWrapper = style({ + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + margin: '0 10px', +}); diff --git a/packages/lds/src/Icon/Icon.stories.tsx b/packages/lds/src/Icon/Icon.stories.tsx new file mode 100644 index 00000000..67f96145 --- /dev/null +++ b/packages/lds/src/Icon/Icon.stories.tsx @@ -0,0 +1,141 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import Icon from './Icon'; +import { iconWrapper, storybookContainer } from './Icon.css'; +import { Txt } from '../Txt'; + +const meta: Meta = { + title: 'Icon', + component: Icon, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Template: Story = { + render: () => { + return ( + <> + mono +
+
+ + back +
+ +
+ + calendar +
+ +
+ + calendar-gray +
+ +
+ + close +
+ +
+ + down +
+ +
+ + list +
+ +
+ + more +
+ +
+ + more-gray +
+ +
+ + next +
+ +
+ + next-gray +
+ +
+ + plus +
+ +
+ + reset +
+ +
+ + reset-gray +
+ +
+ + search +
+ +
+ + setting +
+ +
+ + share +
+ +
+ + time +
+ +
+ + time-gray +
+ +
+ + user +
+
+ +
+ + fill +
+
+ + arrow-fill +
+ +
+ + kakao +
+ +
+ + pencil-fill +
+
+ + ); + }, +}; diff --git a/packages/lds/src/Icon/Icon.tsx b/packages/lds/src/Icon/Icon.tsx new file mode 100644 index 00000000..25722a1b --- /dev/null +++ b/packages/lds/src/Icon/Icon.tsx @@ -0,0 +1,22 @@ +import Image, { ImageProps } from 'next/image'; + +const bucket = 'https://static.im-linker.com'; + +interface Props extends Omit { + name: string; + size?: number; +} + +const Icon = ({ name, size = 32, className, ...props }: Props) => { + return ( + {`${name} + ); +}; + +export default Icon; diff --git a/packages/lds/src/Icon/index.ts b/packages/lds/src/Icon/index.ts new file mode 100644 index 00000000..ea963a10 --- /dev/null +++ b/packages/lds/src/Icon/index.ts @@ -0,0 +1 @@ +export { default as Icon } from './Icon'; diff --git a/packages/lds/src/List/List.css.ts b/packages/lds/src/List/List.css.ts index b6589329..0059ba65 100644 --- a/packages/lds/src/List/List.css.ts +++ b/packages/lds/src/List/List.css.ts @@ -11,5 +11,5 @@ export const listContent = style({ height: '100%', padding: '1.6rem 2rem', borderRadius: '0.8rem', - backgroundColor: `${colors.gray000}`, + background: `${colors.gray000}`, }); diff --git a/packages/lds/src/List/List.stories.tsx b/packages/lds/src/List/List.stories.tsx index a367698a..ca126ce8 100644 --- a/packages/lds/src/List/List.stories.tsx +++ b/packages/lds/src/List/List.stories.tsx @@ -1,6 +1,7 @@ import { Meta, StoryObj } from '@storybook/react'; import List from './List'; +import { Icon } from '../Icon'; import { Spacing } from '../Spacing'; import { Txt } from '../Txt'; @@ -24,12 +25,7 @@ export const Template: Story = { description="다가오는 일정을 확인하고 대화 주제를 확인해보세요." rightAddon={ } /> @@ -48,12 +44,7 @@ export const Template: Story = { title="커피챗 진행" rightAddon={ } /> diff --git a/packages/lds/src/List/ListRow.tsx b/packages/lds/src/List/ListRow.tsx index ef286183..7a51a1e4 100644 --- a/packages/lds/src/List/ListRow.tsx +++ b/packages/lds/src/List/ListRow.tsx @@ -1,9 +1,9 @@ /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */ /* eslint-disable jsx-a11y/click-events-have-key-events */ import clsx from 'clsx'; -import Image from 'next/image'; import { listRowContainer } from './ListRow.css'; +import { Icon } from '../Icon'; interface Props { content: React.ReactNode; @@ -19,12 +19,7 @@ const ListRow = ({ content, withArrow, disabled, className, onClick }: Props) =>
{content}
{withArrow && ( )} diff --git a/packages/lds/src/SearchInput/SearchInput.tsx b/packages/lds/src/SearchInput/SearchInput.tsx index a9d508a3..cd474aa6 100644 --- a/packages/lds/src/SearchInput/SearchInput.tsx +++ b/packages/lds/src/SearchInput/SearchInput.tsx @@ -2,12 +2,12 @@ import { typography } from '@linker/styles'; import clsx from 'clsx'; -import Image from 'next/image'; import { HTMLAttributes, useEffect, useRef } from 'react'; import { Controller, useForm, useWatch } from 'react-hook-form'; import { useDebounce } from 'use-debounce'; import { searchInputContainer, searchInput } from './SearchInput.css'; +import { Icon } from '../Icon'; interface Props extends HTMLAttributes { children?: React.ReactNode; @@ -32,12 +32,7 @@ const SearchInput = ({ children, className, placeholder, setQuery, query }: Prop return (