Merge pull request #67 from dnd-side-project/design/#64

design: 디자인 변경 사항 적용

src/app/bookmarks/page.tsx

@@ -44,7 +44,7 @@ export default function BookmarksPage() {
             >
               <p className="text-sub3">
                 <span className="text-primary-400">별 단어</span>라고 생각이
-                드는 실무 용어를 더 추가해보세요.
+                드는 용어를 더 추가해보세요.
               </p>
               <Image
                 alt="dictionary"

src/app/dictionary/page.tsx

@@ -18,7 +18,7 @@ export default function DictionaryPage() {
         <SearchHeader disabled={true} />
         <div className="flex flex-col px-4 gap-5 mt-[90px]">
           <p className="text-h2">
-            등록된 실무 용어
+            등록된 용어
             <span className="text-primary-400 ml-2">{totalCnt}</span>
           </p>
           <div className="flex gap-2">

src/app/globals.css

@@ -5,3 +5,19 @@
 ::-webkit-scrollbar {
   display: none;
 }
+
+/* 홈 사전탭 용어 목록 보러가기 컴포넌트를 위한 style 코드 */
+.box-gradient {
+  background-image: linear-gradient(
+    to right,
+    #00ffbb 0%,
+    #21b8da 52%,
+    #00ffbb 100%
+  );
+  transition: 0.5s ease-in-out;
+  background-size: 300% auto;
+}
+
+.box-gradient:hover {
+  background-position: -60% 0%;
+}

src/app/words/[slug]/page.tsx

@@ -15,7 +15,7 @@ export default function WordDetailPage({
   return (
     <div className="text-onSurface-300">
       <Header
-        title="실무 영어"
+        title="용어 상세"
         rightItem={
           <BookmarkButton
             isMarked={false}

src/components/common/Button/index.tsx

@@ -24,7 +24,7 @@ export default function Button({
           'bg-gray-800 hover:bg-gray-700': type === 'default',
           'bg-btn-gradient hover:bg-btn-gradient-hover text-background':
             type === 'gradient',
-          'bg-background': type === 'black',
+          'bg-background hover:bg-gray-800': type === 'black',
           'bg-gray-800 text-onSurface-100': type === 'disabled',
           'bg-gray-600 hover:bg-gray-500': type === 'light',
           'w-full': isFullWidth,

src/components/domain/home/dictionary/Bookmarks/index.tsx

@@ -21,19 +21,25 @@ export default function Bookmarks() {
               {isLoggedIn ? (
                 <>
                   <span className="text-primary-200">별 단어</span>가 다 있다고
-                  생각이 드는 생소한 실무 용어를 등록하고 학습해보세요.
+                  생각이 드는 생소한 용어를
+                  <br />
+                  등록하고 학습해보세요.
                 </>
               ) : (
                 <>
-                  로그인을 하면 즐겨찾기 한 실무 용어를{' '}
+                  로그인을 하면 즐겨찾기 한 용어를{' '}
                   <span className="text-primary-200">별별 저장소</span>에서
                   만나볼 수 있어요!
                 </>
               )}
             </p>
           </div>
-          {/* <Image alt="image" src={'/images/logo.svg'} width={80} height={80} /> */}
-          <div className="w-[166px] h-[118px] bg-outline" />
+          <Image
+            alt="image"
+            src={'/images/star_ring.svg'}
+            width={166}
+            height={118}
+          />
         </div>
         <Link href={'/bookmarks'}>
           <Button type="black" isFullWidth>

src/components/domain/home/dictionary/PopularCommentsList/PopularCommentItem.tsx

@@ -35,7 +35,7 @@ export default function PopularCommentItem({
     <>
       <Link
         href={`/words/${wordId}`}
-        className="flex flex-col gap-3 justify-between py-6 px-5 bg-gray-800 rounded-2xl"
+        className="flex flex-col gap-3 justify-between py-6 px-5 bg-gray-800 hover:bg-gray-700 rounded-2xl"
       >
         <div className="flex justify-between">
           <div className="flex gap-2">

src/components/domain/home/dictionary/RecentlyAddedWords/index.tsx

@@ -8,7 +8,7 @@ export default function RecentlyAddedWords({
 }) {
   return (
     <>
-      <HorizontalScrollArea title="최근 등록된 업무 용어 🌟" scrollDivisor={2}>
+      <HorizontalScrollArea title="최근 등록된 용어 🌟" scrollDivisor={2}>
         {wordsList.map(({ id, name, meaning, category }, idx) => (
           <WordCard
             key={id}

src/components/domain/home/dictionary/ViewAllWords/index.tsx

@@ -6,7 +6,7 @@ export default function ViewAllWords() {
   return (
     <Link
       href={'/dictionary'}
-      className="flex justify-between items-center p-5 mx-4 rounded-2xl bg-btn-gradient"
+      className="flex justify-between items-center p-5 mx-4 rounded-2xl box-gradient"
     >
       <div className="flex gap-4 items-center">
         <Image
@@ -17,12 +17,12 @@ export default function ViewAllWords() {
         />
         <div className="flex flex-col gap-1">
           <p className="text-body2 text-background">
-            지금까지 등록된 실무 용어{' '}
+            지금까지 등록된 용어{' '}
             <span className="text-secondary-300 text-h3">
               100<span className="text-h3 text-background">개</span>
             </span>
           </p>
-          <p className="text-h2 text-background">전체 실무 용어 보러가기</p>
+          <p className="text-h2 text-background">전체 용어 보러가기</p>
         </div>
       </div>
       <RightArrow color="#0E121B" />

src/components/domain/home/learning/CommunicationStats/index.tsx

@@ -13,7 +13,7 @@ export default function CommunicationStats() {
           <div>
             <p className="text-h2 mb-3">나의 업무 소통 능력치 📊</p>
             <p className="text-onSurface-200">
-              실무 용어 퀴즈로 단어를 학습하고 <br />
+              용어 퀴즈로 단어를 학습하고 <br />
               소통 능력치를 높일 수 있어요.
             </p>
           </div>

src/components/domain/home/learning/TodayQuiz/index.tsx

@@ -12,7 +12,7 @@ export default function TodayQuiz({ todaySolvedCnt }: TodayQuizProps) {
     <div className="w-full px-4 text-onSurface-300 ">
       <p className="text-h2 text-onSurface-300 mb-3">
         <span className="text-primary-400">{getTodayDate() + ' '}</span>
-        실무 용어 퀴즈💫
+        용어 퀴즈💫
       </p>
       <div
         className="w-full flex justify-between p-5 rounded-2xl"
@@ -22,7 +22,7 @@ export default function TodayQuiz({ todaySolvedCnt }: TodayQuizProps) {
         }}
       >
         <div className="flex flex-col justify-between text-onSurface-300">
-          <p className="text-h1 mb-2">실무 용어 퀴즈</p>
+          <p className="text-h1 mb-2">용어 퀴즈</p>
           <p className="mb-5">
             오늘&nbsp;
             <span className="text-primary-100 text-h3">{todaySolvedCnt}</span>

src/components/domain/home/learning/TodayWords/index.tsx

@@ -8,7 +8,7 @@ export default function TodayWords({
 }) {
   return (
     <>
-      <HorizontalScrollArea title="오늘의 실무 용어 🔭" scrollDivisor={2}>
+      <HorizontalScrollArea title="오늘의 용어 🔭" scrollDivisor={2}>
         {wordsList.map(({ id, name, meaning, category }, idx) => (
           <WordCard
             key={id}

src/components/domain/wordDetail/CommentTextarea/index.tsx

@@ -49,7 +49,7 @@ export default function CommentTextarea({ wordId }: { wordId: string }) {
         placeholder={
           focused
             ? '주제와 무관한 내용 및 악플은 삭제될 수 있어요.'
-            : '실무 용어와 관련된 에피소드나 의견을 공유해 보세요.'
+            : '용어와 관련된 에피소드나 의견을 공유해 보세요.'
         }
         className={value ? 'pt-3 pb-8' : ''}
         value={value}

src/components/domain/wordDetail/ContactButton/index.tsx

@@ -7,9 +7,9 @@ export default function ContactButton() {
       href={'#'}
       className="flex justify-between gap-6 bg-gray-800 rounded-2xl py-5 px-7 mx-4"
     >
-      <Image alt="image" src={''} width={50} height={50} />
+      <Image alt="image" src={'/images/contact.svg'} width={50} height={50} />
       <div>
-        <p className="text-onSurface-200">실무 용어 관련 문의가 있으신가요?</p>
+        <p className="text-onSurface-200">용어 관련 문의가 있으신가요?</p>
         <p className="text-sub1">문의하러 가기</p>
       </div>
       <Image

src/components/shared/Header/Header.stories.tsx

@@ -33,19 +33,19 @@ type Story = StoryObj<typeof Header>
 
 export const Default: Story = {
   args: {
-    title: '실무 용어',
+    title: 'title',
   },
 }
 
 export const HeaderWithRightItem: Story = {
   render: () => (
     <>
       <Header
-        title="실무 용어"
+        title="용어 상세"
         rightItem={<BookmarkButton isMarked={false} markCount={8} wordId={2} />}
       />
       <Header
-        title="실무 용어"
+        title="용어 상세"
         rightItem={<BookmarkButton isMarked={true} markCount={34} wordId={1} />}
       />
     </>

src/components/shared/WordCard/index.tsx

@@ -29,7 +29,7 @@ export default function WordCard({
   return (
     <Link
       href={`/words/${id}`}
-      className="w-min-[200px] w-max h-[140px] py-5 rounded-xl px-5 text-white bg-gray-800 bg-opacity-outline"
+      className="w-min-[200px] w-max h-[140px] py-5 rounded-xl px-5 text-white bg-gray-800 hover:bg-gray-700 bg-opacity-outline"
     >
       <div className="w-max flex flex-col gap-2">
         <CategoryTag category={category} />

src/constants/bottomSheet.ts

@@ -14,7 +14,7 @@ export const LOGIN_BOTTOMSHEET: {
   },
   bookmark: {
     title: '별별 저장소에 저장해 보세요!',
-    description: `로그인을 하면 즐겨찾기한 실무 용어를\n별별 저장소에서 만나볼 수 있어요.`,
+    description: `로그인을 하면 즐겨찾기한 용어를\n별별 저장소에서 만나볼 수 있어요.`,
   },
   loginBtn: {
     title:

src/constants/emptyLayout.ts

@@ -9,26 +9,26 @@ export const EMPTY_LAYOUT: {
   }
 } = {
   likeComments: {
-    image: 'logo.svg',
+    image: 'like_comment.svg',
     title: '좋아요 한 댓글이 없어요.',
-    btnText: '실무 용어 탐색하기',
+    btnText: '용어 탐색하기',
   },
   myComments: {
-    image: 'logo.svg',
+    image: 'comment.svg',
     title: '작성한 댓글이 없어요.',
-    btnText: '실무 용어 탐색하기',
+    btnText: '용어 탐색하기',
   },
   bookmarks: {
-    image: 'logo.svg',
+    image: 'star.svg',
     title: '저장소가 비어있어요.',
     description: [
-      '별 단어가 다 있다고 생각이 드는\n실무 용어를 별별 저장소에 등록해보세요.',
-      '로그인을 하고 별 단어가 다 있다고 생각이 드는\n실무 용어를 별별 저장소에 등록해보세요.',
+      '별 단어가 다 있다고 생각이 드는\n용어를 별별 저장소에 등록해보세요.',
+      '로그인을 하고 별 단어가 다 있다고 생각이 드는\n용어를 별별 저장소에 등록해보세요.',
     ],
     btnText: '등록하러 가기',
   },
   searchResults: {
-    image: 'logo.svg',
-    title: '검색된 실무 용어가 없어요.',
+    image: 'telescope.svg',
+    title: '검색된 용어가 없어요.',
   },
 }

tailwind.config.ts

@@ -16,7 +16,7 @@ const config: Config = {
           'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
         'btn-gradient': 'linear-gradient(103deg, #00FFBB 0%, #3D7DF3 148.93%)',
         'btn-gradient-hover':
-          'linear-gradient(103deg, rgba(0, 255, 187, 0.80) 0%, rgba(61, 125, 243, 0.80) 148.93%)',
+          'linear-gradient(103deg, rgba(0, 255, 187, 0.90) 0%, rgba(61, 125, 243, 0.90) 148.93%)',
       },
       colors,
       fontFamily: {