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/features/feed-main-header/ui/FeedMainHeader.scss b/src/features/feed-main-header/ui/FeedMainHeader.scss index eab18a2..fee7dda 100644 --- a/src/features/feed-main-header/ui/FeedMainHeader.scss +++ b/src/features/feed-main-header/ui/FeedMainHeader.scss @@ -11,11 +11,7 @@ display: flex; .icon-link { - @include responsive-dimensions(44px, 44px); - - display: flex; - align-items: center; - justify-content: center; + @include fixed-box(44px, 44px); } } } diff --git a/src/features/feed-main-header/ui/FeedMainHeader.tsx b/src/features/feed-main-header/ui/FeedMainHeader.tsx index 272f93e..4767fd8 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.scss b/src/features/feed/ui/Feed.scss index 27e0ae0..65bcded 100644 --- a/src/features/feed/ui/Feed.scss +++ b/src/features/feed/ui/Feed.scss @@ -10,11 +10,7 @@ align-items: center; .kebab-icon-btn { - @include responsive-dimensions(44px, 44px); - - display: flex; - justify-content: center; - align-items: center; + @include fixed-box(44px, 44px); } } @@ -32,7 +28,7 @@ align-items: center; .count-divider { - @include responsive-dimensions(2px, 2px); + @include responsive-box(2px, 2px); margin: 0 4px; background-color: $gray4; @@ -56,7 +52,7 @@ } .icon-btn { - @include responsive-dimensions(20px, 20px); + @include fixed-box(20px, 20px); } } } diff --git a/src/features/feed/ui/Feed.tsx b/src/features/feed/ui/Feed.tsx index 33a1940..6d3673e 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'; @@ -22,8 +17,8 @@ export const Feed: React.FC = ({ feed }) => { content={calculateElapsedTime(updatedAt)} /> -
@@ -36,19 +31,19 @@ export const Feed: React.FC = ({ feed }) => {
diff --git a/src/shared/styles/_index.scss b/src/shared/styles/_index.scss index dcd15cc..98178c4 100644 --- a/src/shared/styles/_index.scss +++ b/src/shared/styles/_index.scss @@ -1,3 +1,3 @@ @forward 'colors.scss'; @forward 'fonts.scss'; -@forward 'responsive.scss'; +@forward 'box.scss'; diff --git a/src/shared/styles/responsive.scss b/src/shared/styles/box.scss similarity index 91% rename from src/shared/styles/responsive.scss rename to src/shared/styles/box.scss index f0ffd2f..7d9d4f4 100644 --- a/src/shared/styles/responsive.scss +++ b/src/shared/styles/box.scss @@ -1,4 +1,9 @@ -@mixin responsive-dimensions($default-width, $default-height) { +@mixin fixed-box($default-width, $default-height) { + width: $default-width; + height: $default-height; +} + +@mixin responsive-box($default-width, $default-height) { width: $default-width; height: $default-height; diff --git a/src/shared/styles/reset.scss b/src/shared/styles/reset.scss index 927b7a4..8cc3c26 100644 --- a/src/shared/styles/reset.scss +++ b/src/shared/styles/reset.scss @@ -127,3 +127,9 @@ button { border: none; padding: 0; } + +.icon { + display: flex; + justify-content: center; + align-items: center; +} diff --git a/src/shared/ui/button/ActiveButton.scss b/src/shared/ui/button/ActiveButton.scss index b43c098..d889eb0 100644 --- a/src/shared/ui/button/ActiveButton.scss +++ b/src/shared/ui/button/ActiveButton.scss @@ -1,7 +1,7 @@ @use '@/shared/styles/_index.scss' as *; @mixin confirmButton($isDisabled: false) { - @include responsive-dimensions(108px, 40px); + @include responsive-box(108px, 40px); @extend .h4semi; border-radius: 4px; @@ -25,10 +25,10 @@ border-radius: 30px; @if $isLg { - @include responsive-dimensions(280px, 30px); + @include responsive-box(280px, 30px); @extend .b1semi; } @else { - @include responsive-dimensions(48px, 24px); + @include responsive-box(48px, 24px); @extend .b2semi; } @if $isDisabled { diff --git a/src/shared/ui/button/BasicButton.scss b/src/shared/ui/button/BasicButton.scss index 9f8fa17..6608eb8 100644 --- a/src/shared/ui/button/BasicButton.scss +++ b/src/shared/ui/button/BasicButton.scss @@ -4,7 +4,7 @@ } .confirm-cancle { - @include responsive-dimensions(108px, 40px); + @include responsive-box(108px, 40px); @extend .h4semi; border-radius: 4px; color: $gray4; @@ -12,7 +12,7 @@ } .bsm-option { - @include responsive-dimensions(280px, 40px); + @include responsive-box(280px, 40px); @extend .h4md; background-color: $gray1; color: $gray5; @@ -21,7 +21,7 @@ } .bsm-cancle { - @include responsive-dimensions(280px, 47px); + @include responsive-box(280px, 47px); @extend .h4semi; text-align: center; background-color: $gray5; diff --git a/src/shared/ui/header/PageHeader.scss b/src/shared/ui/header/PageHeader.scss index 15d14af..83eadc5 100644 --- a/src/shared/ui/header/PageHeader.scss +++ b/src/shared/ui/header/PageHeader.scss @@ -1,7 +1,7 @@ @use '@/shared/styles/_index.scss' as *; .page-header { - @include responsive-dimensions(320px, 44px); + @include responsive-box(320px, 44px); display: flex; align-items: center; justify-content: space-between; 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}

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 @@ - - - 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'; diff --git a/src/shared/ui/modal/ConfirmModal.scss b/src/shared/ui/modal/ConfirmModal.scss index 395a565..7ba06e7 100644 --- a/src/shared/ui/modal/ConfirmModal.scss +++ b/src/shared/ui/modal/ConfirmModal.scss @@ -10,9 +10,9 @@ justify-content: space-around; @if $isReport { - @include responsive-dimensions(280px, 356px); + @include responsive-box(280px, 356px); } @else { - @include responsive-dimensions(252px, 146px); + @include responsive-box(252px, 146px); } .title { @@ -22,7 +22,7 @@ color: $gray4; } .buttons { - @include responsive-dimensions(224px, 40px); + @include responsive-box(224px, 40px); display: flex; justify-content: space-between; } diff --git a/src/shared/ui/profile/Profile.scss b/src/shared/ui/profile/Profile.scss index 1cce085..ec45e06 100644 --- a/src/shared/ui/profile/Profile.scss +++ b/src/shared/ui/profile/Profile.scss @@ -1,7 +1,7 @@ @use '@/shared/styles/_index.scss' as *; .profile { - @include responsive-dimensions(200px, 45px); + @include responsive-box(200px, 45px); display: flex; align-items: center; border-radius: 8px; @@ -9,13 +9,13 @@ background-color: white; .profile-image { - @include responsive-dimensions(32px, 32px); + @include responsive-box(32px, 32px); border-radius: 50%; overflow: hidden; } .name-section { - @include responsive-dimensions(155px, 32px); + @include responsive-box(155px, 32px); margin-left: 8px; display: flex;