Merge pull request #76 from DEPthes/dev

Dev
DEPthes · Aug 22, 2023 · 34654e7 · 34654e7
2 parents ce76cb3 + fbf7f78
commit 34654e7
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 6 deletions.
diff --git a/components/pages/response/response-Writing.tsx b/components/pages/response/response-Writing.tsx
@@ -173,7 +173,7 @@ const ResponseWriting: React.FC<SendProps> = ({ componentChangeHandler, newtitle
           <form className='w-334 tablet:w-900 desktop:w-[1280px]'>
             <p className='text-primary text-center font-heading--lg desktop:font-heading--xl'>편지 작성</p>
             <input
-              className='flex items-center self-stretch w-full mt-24 p-12 border-primary/30 rounded-8 border-2 outline-none bg-tertiary placeholder-text_secondary text-hover font-letter--title'
+              className='flex items-center self-stretch w-full mt-24 p-12 border-primary/30 rounded-8 border-2 outline-none bg-tertiary placeholder-text_secondary text-hover font-letter--title desktop:font-letter--title-desktop'
               type='text'
               placeholder='편지 제목을 입력하세요.'
               minLength={1}
@@ -183,7 +183,7 @@ const ResponseWriting: React.FC<SendProps> = ({ componentChangeHandler, newtitle
               onChange={onInputHandler}
             />
             <AutoResizableTextarea
-              className='flex items-start self-stretch w-full min-h-440 mt-24 py-8 px-12 border-primary/30 rounded-8 border-2 outline-none bg-tertiary placeholder-text_secondary text-hover resize-none font-letter--content'
+              className='flex items-start self-stretch w-full min-h-440 mt-24 py-8 px-12 border-primary/30 rounded-8 border-2 outline-none bg-tertiary placeholder-text_secondary text-hover resize-none font-letter--content desktop:font-letter--content-desktop'
               placeholder='편지 내용을 입력하세요.'
               minLength={1}
               maxLength={MAX_LENGTH}

diff --git a/components/pages/send/send-Writing.tsx b/components/pages/send/send-Writing.tsx
@@ -172,7 +172,7 @@ const SendWriting: React.FC<SendProps> = ({ componentChangeHandler, newtitle, ne
           <form className='w-334 tablet:w-900 desktop:w-[1280px]'>
             <p className='text-primary text-center font-heading--lg desktop:font-heading--xl'>편지 작성</p>
             <input
-              className='flex items-center self-stretch w-full mt-24 p-12 border-primary/30 rounded-8 border-2 outline-none bg-tertiary placeholder-text_secondary text-hover font-letter--title'
+              className='flex items-center self-stretch w-full mt-24 p-12 border-primary/30 rounded-8 border-2 outline-none bg-tertiary placeholder-text_secondary text-hover font-letter--title desktop:font-letter--title-desktop'
               type='text'
               placeholder='편지 제목을 입력하세요.'
               minLength={1}
@@ -182,7 +182,7 @@ const SendWriting: React.FC<SendProps> = ({ componentChangeHandler, newtitle, ne
               onChange={onInputHandler}
             />
             <AutoResizableTextarea
-              className='flex items-start self-stretch w-full min-h-440 mt-24 py-8 px-12 border-primary/30 rounded-8 border-2 outline-none bg-tertiary placeholder-text_secondary text-hover resize-none font-letter--content'
+              className='flex items-start self-stretch w-full min-h-440 mt-24 py-8 px-12 border-primary/30 rounded-8 border-2 outline-none bg-tertiary placeholder-text_secondary text-hover resize-none font-letter--content desktop:font-letter--content-desktop'
               placeholder='편지 내용을 입력하세요.'
               minLength={1}
               maxLength={MAX_LENGTH}

diff --git a/pages/letter/[id]/index.tsx b/pages/letter/[id]/index.tsx
@@ -16,10 +16,10 @@ export default function Letters() {
       ) : (
         <main className='flex justify-center px-24 py-40 tablet:px-32 tablet:py-56 desktop:px-64 desktop:py-64'>
           <div className='w-334 tablet:w-900 desktop:w-[1280px]'>
-            <div className='flex items-center self-stretch w-full p-12 rounded-10 outline-none bg-letter_bg text-hover font-letter--title'>
+            <div className='flex items-center self-stretch w-full p-12 rounded-10 outline-none bg-letter_bg text-hover font-letter--title desktop:font-letter--title-desktop'>
               {letter?.title}
             </div>
-            <div className='flex items-start self-stretch w-full min-h-440 mt-16 py-8 px-12 rounded-10 outline-none bg-letter_bg text-hover resize-none font-letter--content'>
+            <div className='flex items-start self-stretch w-full min-h-440 mt-16 py-8 px-12 rounded-10 outline-none bg-letter_bg text-hover resize-none font-letter--content desktop:font-letter--content-desktop'>
               {letter?.contents}
             </div>
             <div className='float-right font-label--sm mt-8 text-primary'>

diff --git a/plugins/tokens.ts b/plugins/tokens.ts
@@ -97,6 +97,7 @@ const tokens = plugin(({ addUtilities }) => {
       'line-height': '160%',
       'font-size': '1.2rem',
     },
+
     '.font-letter--title': {
       'font-family': 'KCC-eunyoung',
       'letter-spacing': '0.1',
@@ -112,6 +113,21 @@ const tokens = plugin(({ addUtilities }) => {
       'line-height': '160%',
       'font-size': '1.6rem',
     },
+    '.font-letter--title-desktop': {
+      'font-family': 'KCC-eunyoung',
+      'letter-spacing': '0.1',
+      'font-weight': '400',
+      'line-height': '160%',
+      '-webkit-text-stroke': '0.1',
+      'font-size': '2.2rem',
+    },
+    '.font-letter--content-desktop': {
+      'font-family': 'KCC-eunyoung',
+      'letter-spacing': '0.1',
+      'font-weight': '400',
+      'line-height': '160%',
+      'font-size': '2rem',
+    },
   });
 });