[Feat] 한 줄 소개 필드 추가 (#64)

src/features/archive/archive.dto.ts

@@ -5,6 +5,7 @@ import type { ApiResponse } from '@/shared/api';
 export interface BaseArchiveDTO {
   title: string;
   description: string;
+  introduction: string;
   type: Color;
   canComment: boolean;
   tags: { content: string }[];

src/features/archive/model/archive.store.ts

@@ -20,6 +20,7 @@ interface ArchiveStore {
 export const initialArchiveState: BaseArchiveDTO = {
   title: '',
   description: '',
+  introduction: '',
   type: 'red',
   canComment: false,
   tags: [],

src/mocks/handlers/archive.ts

@@ -94,6 +94,7 @@ export const archiveHandlers = [
             title: '제목',
             description:
               '# h1\n## h2\n### 하이하이\n예제 **만드는** 중\n어떻게 _보일지_\n> 인용\n\n```\ncode\n```\n\n',
+            introduction: '소개',
             type: 'red',
             canComment: true,
             tags: [{ content: '태그' }, { content: '태그2' }, { content: '태그3' }],

src/widgets/DetailArchive/DetailHeader.module.scss

@@ -58,3 +58,18 @@
   display: flex;
   gap: 0.5rem;
 }
+
+.intro {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  padding: 1rem;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 131%;
+  color: $primary-color;
+  white-space: wrap;
+  border: 1px solid #e9e9e9;
+  border-radius: 8px;
+}

src/widgets/DetailArchive/DetailHeader.tsx

@@ -1,4 +1,10 @@
-import { faChevronRight, faCommentDots, faEye, faHeart } from '@fortawesome/free-solid-svg-icons';
+import {
+  faChevronRight,
+  faCommentDots,
+  faEye,
+  faFeather,
+  faHeart,
+} from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useNavigate } from 'react-router-dom';
 
@@ -18,6 +24,7 @@ export const DetailHeader = ({ archive, archiveId }: { archive: Archive; archive
     setArchiveData({
       title: archive.title,
       description: archive.description,
+      introduction: archive.introduction,
       type: archive.type,
       canComment: archive.canComment,
       tags: archive.tags,
@@ -80,6 +87,10 @@ export const DetailHeader = ({ archive, archiveId }: { archive: Archive; archive
           <Tag isDeleteable={false} key={tag.content} tag={tag} />
         ))}
       </div>
+      <div className={styles.intro}>
+        <FontAwesomeIcon icon={faFeather} />
+        {archive.introduction}
+      </div>
     </div>
   );
 };

src/widgets/WriteArchive/WriteStep.tsx

@@ -100,6 +100,19 @@ export const WriteStep = ({
           />
         </div>
       </div>
+      <div className={styles.inputContainer}>
+        <label>한 줄 소개</label>
+        <div className={styles.inputBox}>
+          <input
+            onChange={e => {
+              updateArchiveData('introduction', e.target.value);
+            }}
+            placeholder='스토리를 나타낼 간단한 소개 글을 적어주세요'
+            type='text'
+            value={archiveData.introduction}
+          />
+        </div>
+      </div>
       <MarkdownEditor />
       <div className={styles.inputContainer}>
         <label>태그</label>