From 95a764513e544aaf636a5f4a6579d9fecbacdfb8 Mon Sep 17 00:00:00 2001 From: BangDori Date: Thu, 2 May 2024 00:33:59 +0900 Subject: [PATCH 1/7] =?UTF-8?q?feat:=20icon=20sprite=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/assets/sprites/common.svg | 12 ++++++++++++ src/shared/ui/icon/assets/back_icon.svg | 3 --- src/shared/ui/icon/assets/bookmark_icon.svg | 3 --- src/shared/ui/icon/assets/chat_icon.svg | 4 ---- src/shared/ui/icon/assets/kebab_menu_icon.svg | 5 ----- src/shared/ui/icon/assets/like_icon.svg | 3 --- src/shared/ui/icon/assets/notification_icon.svg | 3 --- src/shared/ui/icon/assets/pennyway_logo_icon.svg | 15 --------------- src/shared/ui/icon/assets/search_icon.svg | 3 --- src/shared/ui/icon/assets/share_icon.svg | 4 ---- src/shared/ui/icon/assets/writing_icon.svg | 3 --- 11 files changed, 12 insertions(+), 46 deletions(-) create mode 100644 public/assets/sprites/common.svg delete mode 100644 src/shared/ui/icon/assets/back_icon.svg delete mode 100644 src/shared/ui/icon/assets/bookmark_icon.svg delete mode 100644 src/shared/ui/icon/assets/chat_icon.svg delete mode 100644 src/shared/ui/icon/assets/kebab_menu_icon.svg delete mode 100644 src/shared/ui/icon/assets/like_icon.svg delete mode 100644 src/shared/ui/icon/assets/notification_icon.svg delete mode 100644 src/shared/ui/icon/assets/pennyway_logo_icon.svg delete mode 100644 src/shared/ui/icon/assets/search_icon.svg delete mode 100644 src/shared/ui/icon/assets/share_icon.svg delete mode 100644 src/shared/ui/icon/assets/writing_icon.svg diff --git a/public/assets/sprites/common.svg b/public/assets/sprites/common.svg new file mode 100644 index 0000000..8860471 --- /dev/null +++ b/public/assets/sprites/common.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/shared/ui/icon/assets/back_icon.svg b/src/shared/ui/icon/assets/back_icon.svg deleted file mode 100644 index ed1e136..0000000 --- a/src/shared/ui/icon/assets/back_icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/shared/ui/icon/assets/bookmark_icon.svg b/src/shared/ui/icon/assets/bookmark_icon.svg deleted file mode 100644 index 399d793..0000000 --- a/src/shared/ui/icon/assets/bookmark_icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/shared/ui/icon/assets/chat_icon.svg b/src/shared/ui/icon/assets/chat_icon.svg deleted file mode 100644 index 8a0f8d2..0000000 --- a/src/shared/ui/icon/assets/chat_icon.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/shared/ui/icon/assets/kebab_menu_icon.svg b/src/shared/ui/icon/assets/kebab_menu_icon.svg deleted file mode 100644 index 5cf563d..0000000 --- a/src/shared/ui/icon/assets/kebab_menu_icon.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/src/shared/ui/icon/assets/like_icon.svg b/src/shared/ui/icon/assets/like_icon.svg deleted file mode 100644 index f7d0f64..0000000 --- a/src/shared/ui/icon/assets/like_icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/shared/ui/icon/assets/notification_icon.svg b/src/shared/ui/icon/assets/notification_icon.svg deleted file mode 100644 index 06c0ed7..0000000 --- a/src/shared/ui/icon/assets/notification_icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/shared/ui/icon/assets/pennyway_logo_icon.svg b/src/shared/ui/icon/assets/pennyway_logo_icon.svg deleted file mode 100644 index c54eb4a..0000000 --- a/src/shared/ui/icon/assets/pennyway_logo_icon.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/src/shared/ui/icon/assets/search_icon.svg b/src/shared/ui/icon/assets/search_icon.svg deleted file mode 100644 index f7c1d86..0000000 --- a/src/shared/ui/icon/assets/search_icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/shared/ui/icon/assets/share_icon.svg b/src/shared/ui/icon/assets/share_icon.svg deleted file mode 100644 index ab77d92..0000000 --- a/src/shared/ui/icon/assets/share_icon.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/shared/ui/icon/assets/writing_icon.svg b/src/shared/ui/icon/assets/writing_icon.svg deleted file mode 100644 index 7f20a1c..0000000 --- a/src/shared/ui/icon/assets/writing_icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - From 2a75b5ffd19d3e33fdc24421e9e9b226accca095 Mon Sep 17 00:00:00 2001 From: BangDori Date: Thu, 2 May 2024 00:50:53 +0900 Subject: [PATCH 2/7] =?UTF-8?q?feat:=20SVG=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/ui/icon/consts/sprite.d.ts | 11 +++++++++++ src/shared/ui/icon/index.ts | 1 + src/shared/ui/icon/ui/Icon.tsx | 16 ++++++++++++++++ src/shared/ui/index.ts | 1 + 4 files changed, 29 insertions(+) create mode 100644 src/shared/ui/icon/consts/sprite.d.ts create mode 100644 src/shared/ui/icon/index.ts create mode 100644 src/shared/ui/icon/ui/Icon.tsx diff --git a/src/shared/ui/icon/consts/sprite.d.ts b/src/shared/ui/icon/consts/sprite.d.ts new file mode 100644 index 0000000..b41c8b2 --- /dev/null +++ b/src/shared/ui/icon/consts/sprite.d.ts @@ -0,0 +1,11 @@ +export type IconName = + | 'back' + | 'notification' + | 'like' + | 'share' + | 'kebab-menu' + | 'writing' + | 'bookmark' + | 'pennyway-logo' + | 'chat' + | 'search'; diff --git a/src/shared/ui/icon/index.ts b/src/shared/ui/icon/index.ts new file mode 100644 index 0000000..33a652e --- /dev/null +++ b/src/shared/ui/icon/index.ts @@ -0,0 +1 @@ +export { Icon } from './ui/Icon'; diff --git a/src/shared/ui/icon/ui/Icon.tsx b/src/shared/ui/icon/ui/Icon.tsx new file mode 100644 index 0000000..de10109 --- /dev/null +++ b/src/shared/ui/icon/ui/Icon.tsx @@ -0,0 +1,16 @@ +import { IconName } from '../consts/sprite'; + +interface IconProps { + name: IconName; + width: string; + height: string; + color?: string; +} + +export const Icon: React.FC = ({ name, width, height, color }) => { + return ( + + + + ); +}; diff --git a/src/shared/ui/index.ts b/src/shared/ui/index.ts index 5442abd..2c6d9b0 100644 --- a/src/shared/ui/index.ts +++ b/src/shared/ui/index.ts @@ -2,3 +2,4 @@ export { ActiveButton, BasicButton } from './button'; export { PageHeader } from './header'; export { ConfirmModal, ConfirmReportModal, BottomSheetModal } from './modal'; export { Profile } from './profile'; +export { Icon } from './icon'; From 6d9c2690f5fdfcafbf1e12192f8891d97ae488fa Mon Sep 17 00:00:00 2001 From: BangDori Date: Thu, 2 May 2024 00:52:57 +0900 Subject: [PATCH 3/7] =?UTF-8?q?refactor:=20Icon=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../feed-main-header/ui/FeedMainHeader.tsx | 13 +++++-------- src/features/feed/ui/Feed.tsx | 17 ++++++----------- src/shared/ui/header/PageHeader.tsx | 5 +++-- 3 files changed, 14 insertions(+), 21 deletions(-) diff --git a/src/features/feed-main-header/ui/FeedMainHeader.tsx b/src/features/feed-main-header/ui/FeedMainHeader.tsx index 272f93e..c9c3ae9 100644 --- a/src/features/feed-main-header/ui/FeedMainHeader.tsx +++ b/src/features/feed-main-header/ui/FeedMainHeader.tsx @@ -1,9 +1,6 @@ import { Link } from 'react-router-dom'; -import NotificationIcon from '@/shared/ui/icon/assets/notification_icon.svg?react'; -import PennywayLogo from '@/shared/ui/icon/assets/pennyway_logo_icon.svg?react'; -import SearchIcon from '@/shared/ui/icon/assets/search_icon.svg?react'; -import WritingIcon from '@/shared/ui/icon/assets/writing_icon.svg?react'; +import { Icon } from '@/shared/ui'; import './FeedMainHeader.scss'; @@ -11,17 +8,17 @@ export const FeedMainHeader = () => { return (
- +
diff --git a/src/features/feed/ui/Feed.tsx b/src/features/feed/ui/Feed.tsx index 33a1940..17e0da3 100644 --- a/src/features/feed/ui/Feed.tsx +++ b/src/features/feed/ui/Feed.tsx @@ -1,9 +1,4 @@ -import { Profile } from '@/shared/ui'; -import BookmarkIcon from '@/shared/ui/icon/assets/bookmark_icon.svg?react'; -import ChatIcon from '@/shared/ui/icon/assets/chat_icon.svg?react'; -import KebabMenuIcon from '@/shared/ui/icon/assets/kebab_menu_icon.svg?react'; -import LikeIcon from '@/shared/ui/icon/assets/like_icon.svg?react'; -import SharedIcon from '@/shared/ui/icon/assets/share_icon.svg?react'; +import { Icon, Profile } from '@/shared/ui'; import { calculateElapsedTime } from '@/shared/utils'; import './Feed.scss'; @@ -23,7 +18,7 @@ export const Feed: React.FC = ({ feed }) => { />
@@ -37,18 +32,18 @@ export const Feed: React.FC = ({ feed }) => {
diff --git a/src/shared/ui/header/PageHeader.tsx b/src/shared/ui/header/PageHeader.tsx index 28945bc..897e181 100644 --- a/src/shared/ui/header/PageHeader.tsx +++ b/src/shared/ui/header/PageHeader.tsx @@ -1,6 +1,7 @@ import { Link } from 'react-router-dom'; -import BackIcon from '@/shared/ui/icon/assets/back_icon.svg?react'; +import { Icon } from '..'; + import './PageHeader.scss'; interface PageHeaderProps { @@ -12,7 +13,7 @@ export const PageHeader = ({ prevPageLink, page }: PageHeaderProps) => { return (
- +

{page}

From 9f3c538d8e84e7e6b7532d88f524f326f94340b3 Mon Sep 17 00:00:00 2001 From: BangDori Date: Thu, 2 May 2024 01:09:11 +0900 Subject: [PATCH 4/7] =?UTF-8?q?style:=20icon=20=EC=A0=84=EC=97=AD=20?= =?UTF-8?q?=ED=81=B4=EB=9E=98=EC=8A=A4=20=EC=84=A4=EC=A0=95=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/features/feed-main-header/ui/FeedMainHeader.scss | 4 ---- src/features/feed-main-header/ui/FeedMainHeader.tsx | 6 +++--- src/features/feed/ui/Feed.scss | 4 ---- src/features/feed/ui/Feed.tsx | 10 +++++----- src/shared/styles/reset.scss | 6 ++++++ 5 files changed, 14 insertions(+), 16 deletions(-) diff --git a/src/features/feed-main-header/ui/FeedMainHeader.scss b/src/features/feed-main-header/ui/FeedMainHeader.scss index eab18a2..14526d8 100644 --- a/src/features/feed-main-header/ui/FeedMainHeader.scss +++ b/src/features/feed-main-header/ui/FeedMainHeader.scss @@ -12,10 +12,6 @@ .icon-link { @include responsive-dimensions(44px, 44px); - - display: flex; - align-items: center; - justify-content: center; } } } diff --git a/src/features/feed-main-header/ui/FeedMainHeader.tsx b/src/features/feed-main-header/ui/FeedMainHeader.tsx index c9c3ae9..4767fd8 100644 --- a/src/features/feed-main-header/ui/FeedMainHeader.tsx +++ b/src/features/feed-main-header/ui/FeedMainHeader.tsx @@ -11,13 +11,13 @@ export const FeedMainHeader = () => {
diff --git a/src/features/feed/ui/Feed.scss b/src/features/feed/ui/Feed.scss index 27e0ae0..e32f242 100644 --- a/src/features/feed/ui/Feed.scss +++ b/src/features/feed/ui/Feed.scss @@ -11,10 +11,6 @@ .kebab-icon-btn { @include responsive-dimensions(44px, 44px); - - display: flex; - justify-content: center; - align-items: center; } } diff --git a/src/features/feed/ui/Feed.tsx b/src/features/feed/ui/Feed.tsx index 17e0da3..6d3673e 100644 --- a/src/features/feed/ui/Feed.tsx +++ b/src/features/feed/ui/Feed.tsx @@ -17,7 +17,7 @@ export const Feed: React.FC = ({ feed }) => { content={calculateElapsedTime(updatedAt)} /> - @@ -31,18 +31,18 @@ export const Feed: React.FC = ({ feed }) => {