Merge pull request #38 from dnd-side-project/design/#37

design: 피드백 이후 디자인 수정 사항 반영
dnd-side-project · Aug 20, 2024 · 597b182 · 597b182
2 parents dda9f20 + 91f598b
commit 597b182
Show file tree

Hide file tree

Showing 12 changed files with 70 additions and 50 deletions.
diff --git a/public/icons/check_black.svg b/public/icons/check_black.svg
diff --git a/public/icons/check_white.svg b/public/icons/check_white.svg
diff --git a/src/components/common/Button/index.tsx b/src/components/common/Button/index.tsx
@@ -19,10 +19,11 @@ export default function Button({
   return (
     <button
       className={cn(
-        `py-4 px-6 text-onSurface-300 rounded-lg w-fit font-medium leading-5`,
+        `py-4 px-6 text-onSurface-300 rounded-lg w-fit font-medium leading-6`,
         {
           'bg-gray-800 hover:bg-gray-700': type === 'default',
-          'bg-btn-gradient hover:bg-btn-gradient-hover': type === 'gradient',
+          'bg-btn-gradient hover:bg-btn-gradient-hover text-background':
+            type === 'gradient',
           'bg-background': type === 'black',
           'bg-gray-800 text-onSurface-100': type === 'disabled',
           'bg-gray-600 hover:bg-gray-500': type === 'light',

diff --git a/src/components/common/HorizontalScrollArea/index.tsx b/src/components/common/HorizontalScrollArea/index.tsx
@@ -43,8 +43,8 @@ export default function HorizontalScrollArea({
     if (containerRef.current) {
       const { scrollLeft, scrollWidth, clientWidth } = containerRef.current
 
-      setIsStart(scrollLeft <= 0)
-      setIsEnd(scrollLeft + clientWidth >= scrollWidth - 1)
+      setIsStart(scrollLeft <= 2)
+      setIsEnd(scrollLeft + clientWidth >= scrollWidth)
     }
   }
 

diff --git a/src/components/common/Icons/RightArrow.tsx b/src/components/common/Icons/RightArrow.tsx
@@ -0,0 +1,23 @@
+export default function RightArrow({ color }: { color: string }) {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g id="chevron-right">
+        <path
+          id="Vector"
+          d="M9 20.001L17 12.001L9 4.00098"
+          stroke={color}
+          stroke-opacity="0.87"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/src/components/domain/home/dictionary/Bookmarks/index.tsx b/src/components/domain/home/dictionary/Bookmarks/index.tsx
@@ -6,15 +6,21 @@ export default function Bookmarks() {
 
   return (
     <div className="mx-4">
-      <div className="w-full flex flex-col gap-3 p-5 rounded-2xl bg-devBlue-400">
+      <div
+        className="w-full flex flex-col gap-3 p-5 rounded-2xl"
+        style={{
+          backgroundImage:
+            'linear-gradient(120deg, #0FB -25.6%, #3D7DF3 31.25%, #6E32E6 86.98%)',
+        }}
+      >
         <div className="flex gap-4">
           <div className="flex-1 flex flex-col gap-2 text-onSurface-300">
             <p className="text-h1">별별 저장소 ⭐</p>
-            <p className="leading-5">
+            <p className="text-body2">
               {isLoggedIn ? (
                 <>
                   <span className="text-primary-200">별 단어</span>가 다 있다고
-                  생각이 드는 생소한 실무 용어를 저장하고 학습해보세요.
+                  생각이 드는 생소한 실무 용어를 등록하고 학습해보세요.
                 </>
               ) : (
                 <>

diff --git a/src/components/domain/home/dictionary/ViewAllWords/index.tsx b/src/components/domain/home/dictionary/ViewAllWords/index.tsx
@@ -1,30 +1,25 @@
+import RightArrow from '@/components/common/Icons/RightArrow'
 import Image from 'next/image'
 import Link from 'next/link'
 
 export default function ViewAllWords() {
   return (
     <Link
       href={'/dictionary'}
-      className="flex justify-between items-center p-5 mx-4 rounded-2xl"
-      style={{
-        backgroundImage: 'linear-gradient(117deg, #1FD5BC 4.97%, #358BF2 54%)',
-      }}
+      className="flex justify-between items-center p-5 mx-4 rounded-2xl bg-btn-gradient"
     >
       {/* 이미지 변경 필요 */}
       <Image alt="image" src={'/images/logo.svg'} width={75} height={75} />
       <div className="flex flex-col gap-1">
-        <p className="leading-5 text-onSurface-300">
+        <p className="text-body2 text-background">
           지금까지 등록된 실무 용어{' '}
-          <span className="text-primary-200 font-semibold">100</span>개
+          <span className="text-secondary-300 text-h3">
+            100<span className="text-h3 text-background">개</span>
+          </span>
         </p>
-        <p className="text-h2 text-onSurface-300">전체 실무 용어 보러가기</p>
+        <p className="text-h2 text-background">전체 실무 용어 보러가기</p>
       </div>
-      <Image
-        alt="보러가기"
-        src={'/icons/right_arrow.svg'}
-        width={24}
-        height={24}
-      />
+      <RightArrow color="#0E121B" />
     </Link>
   )
 }
diff --git a/src/components/domain/home/learning/TodayQuiz/index.tsx b/src/components/domain/home/learning/TodayQuiz/index.tsx
@@ -13,24 +13,19 @@ export default function TodayQuiz({ todaySolvedCnt }: TodayQuizProps) {
         <span className="text-primary-400">{getTodayDate() + ' '}</span>
         실무 용어 퀴즈💫
       </p>
-      <div
-        className="w-full flex justify-between p-5 rounded-2xl"
-        style={{
-          backgroundImage:
-            'linear-gradient(120deg, #0FB -25.6%, #3D7DF3 31.25%, #6E32E6 86.98%)',
-        }}
-      >
-        <div className="flex flex-col justify-between">
+      <div className="w-full flex justify-between p-5 rounded-2xl bg-btn-gradient">
+        <div className="flex flex-col justify-between text-background">
           <p className="text-h1 mb-2">실무 용어 퀴즈</p>
           <p className="mb-5">
             오늘&nbsp;
-            <span className="text-primary-200 text-h3">{todaySolvedCnt}</span>
+            <span className="text-secondary-300 text-h3">{todaySolvedCnt}</span>
             명이 퀴즈에
-            <br /> 참여했어요.
+            <br />
+            참여했어요.
           </p>
           <Link
             href={'#'}
-            className="w-36 py-4 px-6 text-center text-sub2 bg-background rounded-lg"
+            className="w-36 py-4 px-6 text-center text-sub2 bg-background rounded-lg text-onSurface-300"
           >
             퀴즈 풀러 가기
           </Link>

diff --git a/src/components/domain/home/learning/TodayWords/index.tsx b/src/components/domain/home/learning/TodayWords/index.tsx
@@ -1,5 +1,5 @@
 import HorizontalScrollArea from '@/components/common/HorizontalScrollArea'
-import WordItem, { WordItemProps } from '../../../../shared/WordItem'
+import WordItem, { WordItemProps } from '@/components/shared/WordItem'
 
 export default function TodayWords({
   wordsList,
@@ -9,7 +9,7 @@ export default function TodayWords({
   return (
     <>
       <HorizontalScrollArea
-        title="오늘의 실무 용어 세 가지 🔭"
+        title="오늘의 실무 용어 🔭"
         scrollDivisor={2}
       >
         {wordsList.map(({ id, name, meaning, category }, idx) => (

diff --git a/src/components/shared/CheckboxBottomSheet/OneCheckbox.tsx b/src/components/shared/CheckboxBottomSheet/OneCheckbox.tsx
@@ -21,7 +21,7 @@ export default function OneCheckbox({
         className={cn(
           'appearance-none w-[22px] h-[22px] outline-gray-500 outline outline-[1.5px] p-1 rounded-[4px]',
           {
-            "bg-primary-400 outline-0 bg-[url('/icons/check_white.svg')] bg-no-repeat bg-center":
+            "bg-primary-400 outline-0 bg-[url('/icons/check_black.svg')] bg-no-repeat bg-center":
               isChecked,
           },
         )}

diff --git a/src/styles/theme/fontSize.ts b/src/styles/theme/fontSize.ts
@@ -4,77 +4,77 @@ export const fontSize: ThemeConfig['fontSize'] = {
   h1: [
     '1.5rem',
     {
-      lineHeight: '2rem',
+      lineHeight: '2.1rem', // 1.5rem * 140%
       fontWeight: '600',
     },
   ],
   h2: [
     '1.25rem',
     {
-      lineHeight: '1.625rem',
+      lineHeight: '1.75rem', // 1.25rem * 140%
       fontWeight: '600',
     },
   ],
   h3: [
     '1rem',
     {
-      lineHeight: '1.25rem',
+      lineHeight: '1.4rem', // 1rem * 140%
       fontWeight: '600',
     },
   ],
   sub1: [
     '1.125rem',
     {
-      lineHeight: '1.5rem',
+      lineHeight: '1.575rem', // 1.125rem * 140%
       fontWeight: '500',
     },
   ],
   sub2: [
     '1rem',
     {
-      lineHeight: '1.25rem',
+      lineHeight: '1.4rem', // 1rem * 140%
       fontWeight: '500',
     },
   ],
   sub3: [
     '0.875rem',
     {
-      lineHeight: '1.125rem',
+      lineHeight: '1.225rem', // 0.875rem * 140%
       fontWeight: '500',
     },
   ],
   body1: [
     '1.125rem',
     {
-      lineHeight: '1.5rem',
+      lineHeight: '1.575rem', // 1.125rem * 140%
       fontWeight: '400',
     },
   ],
   body2: [
     '1rem',
     {
-      lineHeight: '1.25rem',
+      lineHeight: '1.4rem', // 1rem * 140%
       fontWeight: '400',
     },
   ],
   body3: [
     '0.875rem',
     {
-      lineHeight: '1.125rem',
+      lineHeight: '1.225rem', // 0.875rem * 140%
       fontWeight: '400',
     },
   ],
   caption: [
     '0.75rem',
     {
-      lineHeight: '1rem',
+      lineHeight: '1.05rem', // 0.75rem * 140%
       fontWeight: '400',
     },
   ],
   phonetic: [
     '0.875rem',
     {
-      lineHeight: '1.25rem',
+      lineHeight: '1.225rem', // 0.875rem * 140%
       fontWeight: '400',
     },
   ],

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -14,9 +14,9 @@ const config: Config = {
         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
         'gradient-conic':
           'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
-        'btn-gradient': 'linear-gradient(117deg, #1FD5BC 4.97%, #358BF2 54%)',
+        'btn-gradient': 'linear-gradient(103deg, #00FFBB 0%, #3D7DF3 148.93%)',
         'btn-gradient-hover':
-          'linear-gradient(117deg, rgba(31, 213, 188, 0.80) 4.97%, rgba(53, 139, 242, 0.80) 54%)',
+          'linear-gradient(103deg, rgba(0, 255, 187, 0.80) 0%, rgba(61, 125, 243, 0.80) 148.93%)',
       },
       colors,
       fontFamily: {