Merge pull request #89 from TeamBNBN/fe/icons

[Front-End] design: 아이콘 svg 추가

frontend/package.json

@@ -31,6 +31,7 @@
     "eslint-plugin-react-refresh": "^0.4.7",
     "prettier": "^3.3.2",
     "vite": "^5.3.1",
+    "vite-plugin-svgr": "^4.2.0",
     "vitest": "^1.6.0"
   }
 }

frontend/src/assets/icons/back.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Chevron left">
+<path id="Icon" d="M12.5 15L7.5 10L12.5 5"  stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

frontend/src/assets/icons/edit.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Edit" clip-path="url(#clip0_708_1897)">
+<path id="Icon" d="M7.33325 2.66665H2.66659C2.31296 2.66665 1.97382 2.80713 1.72378 3.05718C1.47373 3.30723 1.33325 3.64637 1.33325 3.99999V13.3333C1.33325 13.6869 1.47373 14.0261 1.72378 14.2761C1.97382 14.5262 2.31296 14.6667 2.66659 14.6667H11.9999C12.3535 14.6667 12.6927 14.5262 12.9427 14.2761C13.1928 14.0261 13.3333 13.6869 13.3333 13.3333V8.66665M12.3333 1.66665C12.5985 1.40144 12.9582 1.25244 13.3333 1.25244C13.7083 1.25244 14.068 1.40144 14.3333 1.66665C14.5985 1.93187 14.7475 2.29158 14.7475 2.66665C14.7475 3.04173 14.5985 3.40144 14.3333 3.66665L7.99992 9.99999L5.33325 10.6667L5.99992 7.99999L12.3333 1.66665Z" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_708_1897">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

frontend/src/assets/icons/play.svg

@@ -0,0 +1,13 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Play circle" clip-path="url(#clip0_708_1883)">
+<g id="Icon">
+<path d="M7.99992 14.6667C11.6818 14.6667 14.6666 11.6819 14.6666 8.00004C14.6666 4.31814 11.6818 1.33337 7.99992 1.33337C4.31802 1.33337 1.33325 4.31814 1.33325 8.00004C1.33325 11.6819 4.31802 14.6667 7.99992 14.6667Z" stroke="#FEE9E7" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.66658 5.33337L10.6666 8.00004L6.66658 10.6667V5.33337Z" stroke="#FEE9E7" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_708_1883">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

frontend/src/assets/icons/reply.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Corner down-right">
+<path id="Icon" d="M12.5 8.3335L16.6667 12.5002M16.6667 12.5002L12.5 16.6668M16.6667 12.5002H6.66671C5.78265 12.5002 4.93481 12.149 4.30968 11.5239C3.68456 10.8987 3.33337 10.0509 3.33337 9.16683V3.3335" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

frontend/src/assets/icons/right.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Chevron right">
+<path id="Icon" d="M9 18.5L15 12.5L9 6.5" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

frontend/src/assets/icons/user.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="User">
+<path id="Icon" d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

frontend/src/components/Article/ArticleDetail/ArticleDetail.jsx

@@ -1,3 +1,4 @@
+import BackIcon from '/src/assets/icons/back.svg?react';
 import { Link } from 'react-router-dom';
 import styles from './ArticleDetail.module.css';
 import ArticleDetailAnswer from './ArticleDetailAnswer/ArticleDetailAnswer';
@@ -7,19 +8,17 @@ export default function ArticleDetail({ topic, title, author = null, content, an
 
   return (
     <div className={styles.articleDetail}>
-      <header>
+      <header className={styles.header}>
-        <div>
         <Link
           to={'..'}
-            className={styles.backButton}
+          className={styles.goBack}
         >
-            <div>-</div>
+          <BackIcon />
-            <div className={styles.backText}>{topic}</div>
+          <span>{topic}</span>
         </Link>
-        </div>
         <div>
-          <div className={styles.title}>{title}</div>
+          <h1 className={styles.title}>{title}</h1>
-          {author && <div className={styles.author}>{author}</div>}
+          {author && <span className={styles.author}>{author}</span>}
         </div>
       </header>
       <div>

frontend/src/components/Article/ArticleDetail/ArticleDetail.module.css

@@ -9,29 +9,34 @@
   padding: 0;
 }
 
-.backButton {
+.header {
   display: flex;
-  color: var(--text-color-secondary);
+  flex-direction: column;
-  flex-wrap: nowrap;
+  align-items: start;
-  line-height: 1.2;
+  gap: 8px;
-  font-weight: 400;
-  font-size: 20px;
-  padding-bottom: 8px;
 }
 
-.backText {
+.goBack {
-  padding-left: 4px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 20px;
+  line-height: 1.2;
+  font-weight: 400;
+  color: var(--text-color-secondary);
+  stroke: var(--text-color-secondary);
 }
 
 .title {
   font-size: 32px;
   line-height: 1.2;
   font-weight: 800;
+  margin: 0;
 }
 
 .author {
   font-size: 14px;
-  font-weight: 200;
+  font-weight: 400;
   line-height: 1.4;
   color: var(--text-color-secondary);
 }

frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswer.jsx

@@ -1,13 +1,14 @@
 import styles from './ArticleDetailAnswer.module.css';
+import ReplyIcon from '/src/assets/icons/reply.svg?react';
 
 export default function ArticleDetailAnswer({ answer }) {
   return (
-    <div className={styles.answer}>
+    <section className={styles.answer}>
       <div className={styles.answerHeader}>
-        <div>--</div>
+        <ReplyIcon />
         <div className={styles.author}>선생님의 답변</div>
       </div>
-      <div className={styles.content}>{answer}</div>
+      <p className={styles.content}>{answer}</p>
-    </div>
+    </section>
   );
 }

frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswer.module.css

@@ -1,4 +1,7 @@
 .answer {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
   width: 100%;
   border: 1px solid var(--border-color);
   border-radius: 16px;
@@ -8,20 +11,21 @@
 
 .answerHeader {
   display: flex;
-  flex-wrap: nowrap;
+  gap: 4px;
-}
+  color: var(--text-color-secondary);
-
+  stroke: var(--text-color-secondary);
-.content {
-  margin-top: 8px;
-  font-size: 16px;
-  font-weight: 300;
-  line-height: 1.4;
 }
 
 .author {
   font-size: 14px;
-  font-weight: 200;
+  font-weight: 400;
   line-height: 1.4;
-  color: var(--text-color-secondary);
+}
-  margin-left: 4px;
+
+.content {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.4;
+  margin: 0;
+  color: var(--text-color);
 }

frontend/src/components/Article/ArticlePreview/ArticlePreview.jsx

@@ -1,19 +1,17 @@
 import { Link } from 'react-router-dom';
 import styles from './ArticlePreview.module.css';
+import RightIcon from '/src/assets/icons/right.svg?react';
 
 export default function ArticlePreview({ to, title, contents = [] }) {
-  // TODO: 아이콘 변경
   return (
     <div className={styles.wrapper}>
-      <div className={styles.header}>
       <Link
         to={to}
-          className={styles.title}
+        className={styles.header}
       >
-          {title}
+        <h2 className={styles.title}>{title}</h2>
+        <RightIcon />
       </Link>
-        <Link to={to}>ICON</Link>
-      </div>
       <div className={styles.main}>
         {contents.map((content) => {
           return (

frontend/src/components/Article/ArticlePreview/ArticlePreview.module.css

@@ -11,12 +11,15 @@
   display: flex;
   justify-content: space-between;
   margin-bottom: 24px;
+  color: var(--text-color);
+  stroke: var(--text-color);
 }
 
 .title {
   font-size: 24px;
   line-height: 1.2;
   font-weight: 700;
+  margin: 0;
 }
 
 .main {

frontend/src/components/ArticleBoard/ArticleBoard.jsx

@@ -1,8 +1,8 @@
+import EditIcon from '/src/assets/icons/edit.svg?react';
 import { Link } from 'react-router-dom';
 import styles from './ArticleBoard.module.css';
 
 export default function ArticleBoard({ title, canCreate, children }) {
-  // TODO : ㅁ 을 글쓰기 아이콘으로 변경
   return (
     <div className={styles.articleBoard}>
       <div className={styles.header}>
@@ -13,7 +13,7 @@ export default function ArticleBoard({ title, canCreate, children }) {
             className={styles.writeButton}
             to="write"
           >
-            <div>ㅁ</div>
+            <EditIcon className={styles.icon} />
             <div className={styles.buttonText}>글쓰기</div>
           </Link>
         )}

frontend/src/components/ArticleBoard/ArticleBoard.module.css

@@ -36,6 +36,10 @@
   cursor: pointer;
 }
 
+.icon {
+  stroke: var(--text-color);
+}
+
 .buttonText {
   font-family: inherit;
   font-size: 16px;

frontend/src/components/ClassInfo/ClassInfo.module.css

@@ -37,7 +37,7 @@
 
 .content {
   font-size: 14px;
-  font-weight: 300;
+  font-weight: 400;
   line-height: 1.4;
   color: var(--text-color-secondary);
 }

frontend/src/components/LectureHeader/LectureHeader.jsx

@@ -1,4 +1,5 @@
 import styles from './LectureHeader.module.css';
+import PlayIcon from '/src/assets/icons/play.svg?react';
 
 export default function LectureHeader({ img, title, tutorImg, tutor, isLive = false }) {
   return (
@@ -26,7 +27,8 @@ export default function LectureHeader({ img, title, tutorImg, tutor, isLive = fa
                   type="button"
                   className={styles.liveButton}
                 >
-                  실시간 강의 입장하기
+                  <PlayIcon />
+                  <span>실시간 강의 입장하기</span>
                 </button>
               ) : null}
             </div>

frontend/src/components/LectureHeader/LectureHeader.module.css

@@ -73,6 +73,9 @@
 }
 
 .liveButton {
+  display: flex;
+  gap: 8px;
+  align-items: center;
   padding: 12px 16px;
   text-align: center;
   font-size: 14px;

frontend/vite.config.js

@@ -1,7 +1,8 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react-swc';
+import vitePluginSvgr from 'vite-plugin-svgr';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), vitePluginSvgr()],
 });