From 0fe32c1503b53c8a877903e2979221e68159f8bd Mon Sep 17 00:00:00 2001 From: semnil5202 Date: Thu, 11 Jan 2024 22:22:09 +0900 Subject: [PATCH] =?UTF-8?q?storybook:=20SVG,=20PNG=20=EC=97=90=EC=85=8B=20?= =?UTF-8?q?=EC=8A=A4=ED=86=A0=EB=A6=AC=EB=B6=81=20=EC=B6=94=EA=B0=80=20?= =?UTF-8?q?=EB=B0=8F=20=EB=B6=88=ED=95=84=EC=9A=94=ED=95=9C=20=EC=97=90?= =?UTF-8?q?=EC=85=8B=20=EC=82=AD=EC=A0=9C=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/image/header_logo.png | Bin 1660 -> 0 bytes src/assets/image/main_logo.png | Bin 524 -> 0 bytes src/assets/image/plus.png | Bin 507 -> 0 bytes .../svg/{navigation => login}/image_write.svg | 0 src/components/Header/Header.stories.tsx | 40 +++++----- .../Navigation/Navigation.stories.tsx | 6 +- src/components/Tag/Tag.tsx | 2 +- src/index.ts | 8 +- src/stories/PNGCommon.stories.tsx | 72 ++++++++++++++++++ src/stories/SVGCard.stories.tsx | 27 +++++++ src/stories/SVGCommon.stories.tsx | 43 +++++++++++ src/stories/SVGFeed.stories.tsx | 44 +++++++++++ src/stories/SVGHeader.stories.tsx | 67 ++++++++++++++++ src/stories/SVGLogin.stories.tsx | 51 +++++++++++++ src/stories/SVGNavigation.stories.tsx | 39 ++++++++++ 15 files changed, 368 insertions(+), 31 deletions(-) delete mode 100644 src/assets/image/header_logo.png delete mode 100644 src/assets/image/main_logo.png delete mode 100644 src/assets/image/plus.png rename src/assets/svg/{navigation => login}/image_write.svg (100%) create mode 100644 src/stories/PNGCommon.stories.tsx create mode 100644 src/stories/SVGCard.stories.tsx create mode 100644 src/stories/SVGCommon.stories.tsx create mode 100644 src/stories/SVGFeed.stories.tsx create mode 100644 src/stories/SVGHeader.stories.tsx create mode 100644 src/stories/SVGLogin.stories.tsx create mode 100644 src/stories/SVGNavigation.stories.tsx diff --git a/src/assets/image/header_logo.png b/src/assets/image/header_logo.png deleted file mode 100644 index adbd5bea96c0c37241a60c5275cb14e7334e2cdc..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1660 zcmV-?27~#DP)X1^@s6k))(}00009a7bBm000XU z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yPut{`>=Cs$xy1>RI(xdJH_SgAmJ61g9V3iR#5OHEI6R1aA;?I~W-FofzYN#*gE{q%jN({02tO*xuk{ z*_d=Sc;kU{GopWt5x3^@uSp6%j-^SjCjDvB*TI+v&WbT&WzrVU!!-;HoPi7fhw+fw z7}_`U=Y6Csc~HvVxO>|0eSv?-Nb8C$5QBrJ~|`Ug%8}AHBiP9SS79CJ>OCu z)Z|TjJa-F)&|sLfzGJAp6~oS1pQNOW1#NxJVRO<`{3l zm*8(Yb!efEhTUthlOx8CUIh7aVh8pnB14`2B(y^)h_eWEnF#Iq38+}!4g4~+Bi#OD zEYz8l^Rf|ru6Ug3^m}Gyf4Df7mwjU89!;9VvEDqqr1AI!$L%U}*|NtPWZgTHZXwOy zS*8s58)V=NhdfT>6uOZ*t^n=aI$tdju}n+wyx?cFmsqjbtm;ouPl}CQJpg*DUWX z(GI5($|#}SBvRiR>sSPJlza(3a0VBC;LL?OdJO#?-GKe*F?EkRlWzU&bc)d?hVHLM zWnl;*Ehl|Ck=|T)oe<$O{w2~jc?ep{o`YvJxc8B=sk-}6Pyp-KhGkPo)e2&N3C}he zy6pH-V?eF5`cD6#96F^q)Wgj-=?G&Sl%XB>jLo(ulxJ^P*A@$Y7lE<|%$ihOsHZ%C z->G{(mu9>09AkRovB#c423Y3F)+fk@EF!vOts+=|{Px~9mY;wetgPgLDOi_`guEzS zX>-=NXJq|fO`1z_2wG1b)}_FnD727=V)whuPtY-Mcm$@s^<|`<7VN4Mn@oNqN%<;L zM<4th{xfM6DZA^D%|U}5ONrc7L~8f%NLf0D42|zoqz(;!F$$%Ba8zefgFWO~n z&h8@5TF9ee_ZrjZ(B8oL24R*Ns$UA*D*iBD*VL!J+U zNt3|o5cJa9MENDy7?sO4J#rx({p0kH8j;bT!U&p-N~ptoC@C+siPK;`mJ;%wAPtQV zjh%EJJ%UP5j!9#y2zML`^7}n@e%P;<1#}#f;G7sEyT|je#f)FG4GdI+@@K=3GTy2fXJ8-~+Qd;D zsNv(F`j%inBcHmV7#K+6|5K+w`%`clWUxB-?08_{RDJ?XMpUt;iq-1?0000FG diff --git a/src/assets/image/main_logo.png b/src/assets/image/main_logo.png deleted file mode 100644 index b061757d721fe257c7da38b21e7908ceeb59e34d..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 524 zcmV+n0`vWeP)X1^@s6FWx?200009a7bBm000XU z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yPjdHkbpmt(*+4d+OduOjC%_Flf^5(_0XV_=k0yBJC260O|K5Lr=I(y; z(_U)Gf|;inru2Wb;LaFxh(BW3Xf+?!!c98SIAvNBfS+BGyoC@*2?OlFJa2c zXX+Oat2WvywjF`Hb`}-U{xYRkpap8Zmujxj*F&4=kg1pqT=1Vof^EnquU2!a!|{f? z2o#stk^@asIpd=Y-9ZSoEnZL$_}o&5W5bs2onxGXcQ*cq?Abzn=gYZBj-iQ6-&0R= z#+P*lhr&--+vRUnqKxx|NYNv56!N=w>iucKPwLJXvGakt4qi|i2iSkBMc(*2*l3X@ zUk44lJ?3sBuO)J7MHB0HOXET6Rn&c)xYPLbaUyTJsONMUq;MO0_kIEF@AuP>Y5U{= O0000VK~#7FtyED` z!Y~lsU1xwoNBHFr2L9y&jNSmf0o*`O0G>cO0o*`50>cG301WkuPe3W9&X{#mP_dL& zp>HOWWRtvXHg6Xp0L+}TZKqB|mkdx5Q(?1$Lj<;z;%Cz|xh8B~Lqz^txFG*^JQ zfOLTpKla;o%yyr+Sj@dXoBdH!KA#VaDM8Rh2+__Q*n?3&tT7l2yuMnkLMRx9gp!{S z8`KLa_0flzz=S=V%{Z4xxDyD;-|=`O>{98luqC9Hq+ihs?WeDy7jT7=mA7ng#zX{K(!=6h<=xlM#kj*yZ_MAVKAU14_3 x2PM2MX*D@mkX@Cn*^)M7Q2mTN5fSJ9bDw3loYI;Yxp4ph002ovPDHLkV1f(s(=Gr2 diff --git a/src/assets/svg/navigation/image_write.svg b/src/assets/svg/login/image_write.svg similarity index 100% rename from src/assets/svg/navigation/image_write.svg rename to src/assets/svg/login/image_write.svg diff --git a/src/components/Header/Header.stories.tsx b/src/components/Header/Header.stories.tsx index 57e3db1..1ba2b9b 100644 --- a/src/components/Header/Header.stories.tsx +++ b/src/components/Header/Header.stories.tsx @@ -1,13 +1,13 @@ import { Meta, StoryObj } from '@storybook/react'; import Header from './Header'; import { - SVGBack24B, - SVGBack24W, - SVGCheck24, - SVGFeedDotsVertical, - SVGFilter, - SVGMainLogo, - SVGSetting, + SVGHeaderBack24B, + SVGHeaderBack24W, + SVGHeaderCheck24, + SVGTripleDots, + SVGHeaderFilter, + SVGHeaderMainLogo, + SVGHeaderSetting, } from '../..'; const meta = { @@ -43,10 +43,10 @@ export const Default: Story = { <>
- + - +
@@ -60,8 +60,8 @@ export const FeedDetail: Story = { }, render: ({ main, spacerPosition }) => (
- - + +
), }; @@ -72,10 +72,10 @@ export const MyFeedDetail: Story = { }, render: ({ main, spacerPosition }) => (
- - + +
- +
), @@ -87,7 +87,7 @@ export const WriteFeed: Story = { }, render: ({ main, spacerPosition }) => (
- + 글쓰기 - +
), }; @@ -136,10 +136,10 @@ export const Profile: Story = { render: ({ main, spacerPosition }) => (
- + - +
), @@ -153,7 +153,7 @@ export const ProfileSetting: Story = { render: ({ main, spacerPosition }) => (
- + (
- + setNavPosition('center')} > - + setNavPosition('right')}> {navPosition === 'right' ? ( @@ -80,7 +80,7 @@ export const InteractionTest: Story = { position="center" onClick={() => setNavPosition('center')} > - + ; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => ( +
+
+ PNGAgreementBackground + PNGBottomBackground +
+
+ PNGIdeaBackground1 + PNGIdeaBackground2 + PNGIdeaBackground3 + PNGIdeaBackground4 + PNGIdeaBackground5 +
+
+ ), +}; diff --git a/src/stories/SVGCard.stories.tsx b/src/stories/SVGCard.stories.tsx new file mode 100644 index 0000000..cbd76a2 --- /dev/null +++ b/src/stories/SVGCard.stories.tsx @@ -0,0 +1,27 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { + SVGCardComment14, + SVGCardLike14, + SVGCardScrap14, + SVGCardView14, +} from '..'; + +const meta = { + title: 'Assets/SVG/Card', + tags: ['autodocs'], +} as Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => ( +
+ + + + +
+ ), +}; diff --git a/src/stories/SVGCommon.stories.tsx b/src/stories/SVGCommon.stories.tsx new file mode 100644 index 0000000..65f9a17 --- /dev/null +++ b/src/stories/SVGCommon.stories.tsx @@ -0,0 +1,43 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { + SVGAdd24, + SVGCancel, + SVGCheckFilled24, + SVGFeed24, + SVGFeedFilled24, + SVGProfile24, + SVGProfileFilled24, + SVGScrap24, + SVGScrapFilled24, + SVGTextRequired, + SVGTripleDots, + SVGDropdownArrow, +} from '..'; + +const meta = { + title: 'Assets/SVG/Common', + tags: ['autodocs'], +} as Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => ( +
+ + + + + + + + + + + + +
+ ), +}; diff --git a/src/stories/SVGFeed.stories.tsx b/src/stories/SVGFeed.stories.tsx new file mode 100644 index 0000000..46b4e96 --- /dev/null +++ b/src/stories/SVGFeed.stories.tsx @@ -0,0 +1,44 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { + SVGFeedWrite40, + SVGFeedLike, + SVGFeedUnLike, + SVGFeedReCommentLine, + SVGFeedMessage, + SVGFeedPencil, + SVGFeedScrap, + SVGFeedUnScrap, +} from '..'; + +const meta = { + title: 'Assets/SVG/Feed', + tags: ['autodocs'], +} as Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => ( +
+
+ +
+ + + + + + + + +
+ ), +}; diff --git a/src/stories/SVGHeader.stories.tsx b/src/stories/SVGHeader.stories.tsx new file mode 100644 index 0000000..44aba4a --- /dev/null +++ b/src/stories/SVGHeader.stories.tsx @@ -0,0 +1,67 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { + SVGHeaderBack24B, + SVGHeaderBack24W, + SVGHeaderCheck24, + SVGHeaderUncheck24, + SVGHeaderFilter, + SVGHeaderMainLogo, + SVGHeaderSetting, + SVGHeaderClose24, +} from '..'; + +const meta = { + title: 'Assets/SVG/Header', + tags: ['autodocs'], +} as Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => ( +
+
+ +
+ +
+ +
+
+ +
+ + + +
+ +
+
+ ), +}; diff --git a/src/stories/SVGLogin.stories.tsx b/src/stories/SVGLogin.stories.tsx new file mode 100644 index 0000000..9121cb9 --- /dev/null +++ b/src/stories/SVGLogin.stories.tsx @@ -0,0 +1,51 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { + SVGLoginNaver, + SVGLoginKakao, + SVGLoginLogo, + SVGLoginDefaultImage, + SVGLoginImageWrite, + SVGLoginDefaultProfile, +} from '..'; + +const meta = { + title: 'Assets/SVG/Login', + tags: ['autodocs'], +} as Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => ( +
+
+ +
+
+ +
+ + + + +
+ ), +}; diff --git a/src/stories/SVGNavigation.stories.tsx b/src/stories/SVGNavigation.stories.tsx new file mode 100644 index 0000000..b51db2f --- /dev/null +++ b/src/stories/SVGNavigation.stories.tsx @@ -0,0 +1,39 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { + SVGNavWrite24, + SVGNavActiveFeed, + SVGNavFeed, + SVGNavActiveProfile, + SVGNavProfile, +} from '..'; + +const meta = { + title: 'Assets/SVG/Navigation', + tags: ['autodocs'], +} as Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => ( +
+
+ +
+ + + + +
+ ), +};