feat: 새 아이콘 추가

Ocean-Portfolio · Mar 2, 2024 · 6c9b88c · 6c9b88c
1 parent 13f74ca
commit 6c9b88c
Show file tree

Hide file tree

Showing 12 changed files with 116 additions and 76 deletions.
diff --git a/src/app/sungyeon/context.ts → src/app/context.ts b/src/app/sungyeon/context.ts → src/app/context.ts
@@ -1,6 +1,7 @@
 import { createStaticContext } from '@/utils/context/StaticContext';
 
 export interface UserInfoData {
+  token: UserNameToken;
   id: string;
   name: string;
   email: string;
@@ -22,6 +23,7 @@ interface PageInfoData {
 
 export const StaticContextPageInfo = createStaticContext<PageInfoData>({
   userInfo: {
+    token: 'sungyeon',
     id: '',
     name: '',
     email: '',

diff --git a/src/app/sungyeon/page.tsx b/src/app/sungyeon/page.tsx
@@ -7,7 +7,7 @@ import { getSectionsByUserIdQuery } from '@/helper/getSectionByUserIdQuery';
 import { getUserByNameQuery } from '@/helper/getUserByNameQuery';
 import { backgroundColorVariants } from '@/styles/common/color.css';
 import { sungyeonColorTheme } from '@/styles/theme/sungyeon.css';
-import { StaticContextPageInfo } from './context';
+import { StaticContextPageInfo } from '../context';
 
 const Sungyeon = async () => {
   const apolloClient = getClient();
@@ -24,6 +24,7 @@ const Sungyeon = async () => {
     <StaticContextPageInfo.Provider
       value={{
         userInfo: {
+          token: 'sungyeon',
           id: getUserByName.id,
           name: getUserByName.name,
           email: getUserByName.email,

diff --git a/src/components/Card/History/Impact/HistoryImpactCard.tsx b/src/components/Card/History/Impact/HistoryImpactCard.tsx
@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 import React, { PropsWithChildren } from 'react';
+import { StaticContextPageInfo } from '@/app/context';
 import CommonIcon from '@/composable/Icon/CommonIcon';
 import { getStaticContext } from '@/utils/context/StaticContext';
 import calcRemToPxNumber from '@/utils/style/calcRemToPxNumber';
@@ -59,6 +60,7 @@ const HistoryImpactCard = ({
 };
 
 const Headline = () => {
+  const { userInfo } = getStaticContext(StaticContextPageInfo);
   const { sizeToken, before, after, unitWord } = getStaticContext(
     StaticContextHistoryImpactCard,
   );
@@ -77,6 +79,7 @@ const Headline = () => {
           sizeToken ? iconStyleVariants[sizeToken] : iconStyle,
         )}
         variant="LEFT_ARROW_SECONDARY_VARIANT"
+        userToken={userInfo.token}
         width={calcRemToPxNumber('1.5rem')}
         height={calcRemToPxNumber('1.5rem')}
       />

diff --git a/src/components/HistorySlideButton/HistorySlideButton.tsx b/src/components/HistorySlideButton/HistorySlideButton.tsx
@@ -16,6 +16,7 @@ const HistorySlideButton = ({ direction }: Props) => {
       <CommonIcon
         className={iconVariants[direction]}
         variant="LEFT_ARROW_SECONDARY_VARIANT"
+        userToken="sungyeon"
         width={24}
         height={24}
       />

diff --git a/src/components/NormalProject/NormalProject.tsx b/src/components/NormalProject/NormalProject.tsx
@@ -279,6 +279,7 @@ const ButtonBox = (props: ButtonBoxProps) => {
       <CommonIcon
         className={iconVariants[direction]}
         variant="LEFT_ARROW_SECONDARY_VARIANT"
+        userToken="sungyeon"
         format="png"
         width={40}
         height={40}

diff --git a/src/components/storybook/IconBoard.tsx b/src/components/storybook/IconBoard.tsx
@@ -36,12 +36,19 @@ const IconBoard = () => {
       <Grid
         className={backgroundColorVariants['gray-scale-01']}
         autoFlow="column"
-        templateColumns="repeat(7, 2rem)"
+        autoColumns="auto"
         style={gridStyle}
       >
         <IconBoard.Common />
       </Grid>
-
+      <Grid
+        className={backgroundColorVariants['gray-scale-03']}
+        autoFlow="column"
+        autoColumns="auto"
+        style={gridStyle}
+      >
+        <IconBoard.Common2 />
+      </Grid>
       <Text
         as="h1"
         typoToken="display-m-bold"
@@ -260,11 +267,71 @@ const Common = ({ format }: CommonProps) => {
         format={format}
       />
       <CommonIcon variant="UP_ARROW" width={32} height={32} format={format} />
+      <CommonIcon variant="PLUS" width={32} height={32} format={format} />
+    </>
+  );
+};
+
+const Common2 = ({ format }: CommonProps) => {
+  return (
+    <>
+      <CommonIcon
+        variant="RIGHT_TAIL_ARROW"
+        width={36}
+        height={36}
+        format={format}
+      />
+      <CommonIcon
+        variant="RIGHT_TAIL_ARROW_MEDIUM"
+        width={48}
+        height={48}
+        format={format}
+      />
+      <CommonIcon
+        variant="RIGHT_TAIL_ARROW_SECONDARY_VARIANT"
+        userToken="sungyeon"
+        width={36}
+        height={36}
+        format={format}
+      />
+      <CommonIcon
+        variant="LEFT_ARROW_SECONDARY_VARIANT"
+        userToken="sungyeon"
+        width={36}
+        height={36}
+        format={format}
+      />
+      <CommonIcon variant="MEATBALL" width={24} height={24} format={format} />
+      <CommonIcon
+        variant="PAGINATION_SELECTED_SKY_BLUE_LARGE"
+        width={44}
+        height={44}
+        format={format}
+      />
+      <CommonIcon
+        variant="PAGINATION_SELECTED_SKY_BLUE_MEDIUM"
+        width={40}
+        height={40}
+        format={format}
+      />
+      <CommonIcon
+        variant="PAGINATION_UNSELECTED_SKY_BLUE_LARGE"
+        width={24}
+        height={24}
+        format={format}
+      />
+      <CommonIcon
+        variant="PAGINATION_UNSELECTED_SKY_BLUE_MEDIUM"
+        width={16}
+        height={16}
+        format={format}
+      />
     </>
   );
 };
 
 IconBoard.Social = Social;
 IconBoard.Common = Common;
+IconBoard.Common2 = Common2;
 
 export default IconBoard;
diff --git a/src/composable/Icon/CommonIcon.tsx b/src/composable/Icon/CommonIcon.tsx
@@ -4,10 +4,20 @@ import iconAssetEndpoint from '@/utils/string/iconAssetEndpoint';
 
 type CommonIconProps = IconProps & {
   variant: CommonIconToken;
+  userToken?: UserNameToken;
 };
 
-const CommonIcon = ({ variant, format, ...props }: CommonIconProps) => {
-  const path = iconAssetEndpoint(variant, '/common');
+const CommonIcon = ({
+  variant,
+  userToken,
+  format,
+  ...props
+}: CommonIconProps) => {
+  const path = iconAssetEndpoint({
+    iconName: variant,
+    userName: userToken,
+    prefix: '/common',
+  });
 
   return <Image {...props} src={`${path}.${format || 'png'}`} alt={variant} />;
 };

diff --git a/src/composable/Icon/SocialIcon.tsx b/src/composable/Icon/SocialIcon.tsx
@@ -22,7 +22,9 @@ const SocialIcon = ({
     state,
   });
 
-  const path = iconAssetEndpoint(company);
+  const path = iconAssetEndpoint({
+    iconName: company,
+  });
 
   return (
     <Image

diff --git a/src/containers/Contents.tsx b/src/containers/Contents.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { StaticContextPageInfo } from '@/app/sungyeon/context';
+import { StaticContextPageInfo } from '@/app/context';
 import { getStaticContext } from '@/utils/context/StaticContext';
 import ContactContainer from './Contact';
 import HistoryContainer from './History';

diff --git a/src/types/designToken/Color.d.ts b/src/types/designToken/Color.d.ts
@@ -43,69 +43,3 @@ type UserColorThemeToken =
   | 'accent'
   | 'tertiary'
   | 'tertiary-variant';
-
-// interface JaeyoonMainColorTokenInterface {
-//   'jaeyoon-01': string;
-//   'jaeyoon-02': string;
-//   'jaeyoon-03': string;
-//   'jaeyoon-04': string;
-//   'jaeyoon-05': string;
-// }
-
-// interface SungyeonMainColorTokenInterface {
-//   'sungyeon-01': string;
-//   'sungyeon-02': string;
-//   'sungyeon-03': string;
-//   'sungyeon-04': string;
-//   'sungyeon-05': string;
-//   'sungyeon-primary-200': string;
-//   'sungyeon-tertiary-100': string;
-//   'sungyeon-tertiary-200': string;
-// }
-
-// interface YejiMainColorTokenInterface {
-//   'yeji-01': string;
-//   'yeji-02': string;
-//   'yeji-03': string;
-//   'yeji-04': string;
-//   'yeji-05': string;
-// }
-
-// interface ODSColorTokenInterface
-//   extends GrayScaleTokenInterface,
-//     SungyeonMainColorTokenInterface,
-//     YejiMainColorTokenInterface,
-//     JaeyoonMainColorTokenInterface {
-//   transparent: string;
-// }
-
-// type SungyeonMainColorToken =
-//   | 'sungyeon-01'
-//   | 'sungyeon-02'
-//   | 'sungyeon-03'
-//   | 'sungyeon-04'
-//   | 'sungyeon-05'
-//   | 'sungyeon-primary-200'
-//   | 'sungyeon-tertiary-100'
-//   | 'sungyeon-tertiary-200';
-
-// type YejiMainColorToken =
-//   | 'yeji-01'
-//   | 'yeji-02'
-//   | 'yeji-03'
-//   | 'yeji-04'
-//   | 'yeji-05';
-
-// type JaeyoonMainColorToken =
-//   | 'jaeyoon-01'
-//   | 'jaeyoon-02'
-//   | 'jaeyoon-03'
-//   | 'jaeyoon-04'
-//   | 'jaeyoon-05';
-
-// type ODSColorToken =
-//   | GrayScaleToken
-//   | SungyeonMainColorToken
-//   | YejiMainColorToken
-//   | JaeyoonMainColorToken
-//   | 'transparent';
diff --git a/src/types/designToken/Icon.d.ts b/src/types/designToken/Icon.d.ts
@@ -6,9 +6,18 @@ type CommonIconToken =
   | 'UP_ARROW'
   | 'LEFT_ARROW'
   | 'LEFT_ARROW_SECONDARY_VARIANT'
+  | 'RIGHT_TAIL_ARROW'
+  | 'RIGHT_TAIL_ARROW_MEDIUM'
+  | 'RIGHT_TAIL_ARROW_SECONDARY_VARIANT'
   | 'ROUND_CLOSE'
   | 'NORMAL_CLOSE'
-  | 'LARGE_CLOSE';
+  | 'LARGE_CLOSE'
+  | 'PLUS'
+  | 'MEATBALL'
+  | 'PAGINATION_SELECTED_SKY_BLUE_MEDIUM'
+  | 'PAGINATION_SELECTED_SKY_BLUE_LARGE'
+  | 'PAGINATION_UNSELECTED_SKY_BLUE_MEDIUM'
+  | 'PAGINATION_UNSELECTED_SKY_BLUE_LARGE';
 
 type CompanyIconToken =
   | 'GOOGLE'

diff --git a/src/utils/string/iconAssetEndpoint.ts b/src/utils/string/iconAssetEndpoint.ts
@@ -1,8 +1,18 @@
 import { ASSET_ENDPOINT } from '@/const/endpoint';
 
-const iconAssetEndpoint = (iconName: string, prefix?: string) => {
+const iconAssetEndpoint = ({
+  iconName,
+  userName,
+  prefix,
+}: {
+  iconName: string;
+  userName?: string;
+  prefix?: string;
+}) => {
   const prefixPath = prefix ? `${prefix}` : '';
-  return `${ASSET_ENDPOINT}/icons${prefixPath}/${iconName.toLowerCase()}`;
+  return `${ASSET_ENDPOINT}/icons${prefixPath}/${iconName.toLowerCase()}${
+    userName ? `_${userName.toLowerCase()}` : ''
+  }`;
 };
 
 export default iconAssetEndpoint;