diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 51b517a..c8bc10c 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -8,7 +8,11 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="1ca51ffe-c632-44cc-ab91-89f67bc24dd0" name="Changes" comment="2024-04-20 오후 2:05">
+      <change afterPath="$PROJECT_DIR$/qwilight-fe/src/app/[language]/avatar/components/IntroView.module.scss" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/qwilight-fe/src/app/[language]/avatar/[[...want]]/page.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/qwilight-fe/src/app/[language]/avatar/[[...want]]/page.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/qwilight-fe/src/app/[language]/avatar/components/IntroView.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/qwilight-fe/src/app/[language]/avatar/components/IntroView.tsx" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -21,8 +25,8 @@
         <option value="JavaScript File" />
         <option value="CSS File" />
         <option value="SCSS File" />
-        <option value="TypeScript File" />
         <option value="TypeScript JSX File" />
+        <option value="TypeScript File" />
       </list>
     </option>
   </component>
@@ -54,41 +58,41 @@
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent">{
-  &quot;keyToString&quot;: {
-    &quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
-    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
-    &quot;full.screen.before.presentation.mode&quot;: &quot;false&quot;,
-    &quot;git-widget-placeholder&quot;: &quot;develop&quot;,
-    &quot;ignore.virus.scanning.warn.message&quot;: &quot;true&quot;,
-    &quot;javascript.nodejs.core.library.configured.version&quot;: &quot;20.13.1&quot;,
-    &quot;javascript.nodejs.core.library.typings.version&quot;: &quot;20.12.12&quot;,
-    &quot;last_opened_file_path&quot;: &quot;C:/Users/qpdgo/WebStormProjects/taehui&quot;,
-    &quot;list.type.of.created.stylesheet&quot;: &quot;SCSS&quot;,
-    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
-    &quot;node.js.detected.package.standard&quot;: &quot;true&quot;,
-    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
-    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
-    &quot;node.js.selected.package.standard&quot;: &quot;&quot;,
-    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
-    &quot;nodejs_package_manager_path&quot;: &quot;pnpm&quot;,
-    &quot;npm.taehui &gt; dev.executor&quot;: &quot;Run&quot;,
-    &quot;npm.taehui &gt; start.executor&quot;: &quot;Run&quot;,
-    &quot;npm.taehui &gt; start:taehui-www.executor&quot;: &quot;Run&quot;,
-    &quot;prettierjs.PrettierConfiguration.Package&quot;: &quot;C:\\Users\\qpdgo\\WebStormProjects\\taehui\\node_modules\\prettier&quot;,
-    &quot;run.code.analysis.last.selected.profile&quot;: &quot;pProject Default&quot;,
-    &quot;settings.editor.selected.configurable&quot;: &quot;preferences.lookFeel&quot;,
-    &quot;ts.external.directory.path&quot;: &quot;C:\\Users\\qpdgo\\WebStormProjects\\taehui\\node_modules\\typescript\\lib&quot;,
-    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
+  <component name="PropertiesComponent"><![CDATA[{
+  "keyToString": {
+    "RunOnceActivity.OpenProjectViewOnStart": "true",
+    "RunOnceActivity.ShowReadmeOnStart": "true",
+    "full.screen.before.presentation.mode": "false",
+    "git-widget-placeholder": "develop",
+    "ignore.virus.scanning.warn.message": "true",
+    "javascript.nodejs.core.library.configured.version": "20.13.1",
+    "javascript.nodejs.core.library.typings.version": "20.12.12",
+    "last_opened_file_path": "C:/Users/qpdgo/WebStormProjects/taehui/qwilight-fe/src/app/[language]/avatar/components",
+    "list.type.of.created.stylesheet": "SCSS",
+    "node.js.detected.package.eslint": "true",
+    "node.js.detected.package.standard": "true",
+    "node.js.detected.package.tslint": "true",
+    "node.js.selected.package.eslint": "(autodetect)",
+    "node.js.selected.package.standard": "",
+    "node.js.selected.package.tslint": "(autodetect)",
+    "nodejs_package_manager_path": "pnpm",
+    "npm.taehui > dev.executor": "Run",
+    "npm.taehui > start.executor": "Run",
+    "npm.taehui > start:taehui-www.executor": "Run",
+    "prettierjs.PrettierConfiguration.Package": "C:\\Users\\qpdgo\\WebStormProjects\\taehui\\node_modules\\prettier",
+    "run.code.analysis.last.selected.profile": "pProject Default",
+    "settings.editor.selected.configurable": "preferences.lookFeel",
+    "ts.external.directory.path": "C:\\Users\\qpdgo\\WebStormProjects\\taehui\\node_modules\\typescript\\lib",
+    "vue.rearranger.settings.migration": "true"
   }
-}</component>
+}]]></component>
   <component name="RecentsManager">
     <key name="CopyFile.RECENT_KEYS">
+      <recent name="C:\Users\qpdgo\WebStormProjects\taehui\qwilight-fe\src\app\[language]\avatar\components" />
       <recent name="C:\Users\qpdgo\WebStormProjects\taehui\qwilight-fe\src\app\save\test" />
       <recent name="C:\Users\qpdgo\WebStormProjects\taehui\qwilight-fe\src\app\save\components" />
       <recent name="C:\Users\qpdgo\WebStormProjects\taehui\qwilight-fe\src\app\save" />
       <recent name="C:\Users\qpdgo\WebStormProjects\taehui\qwilight-fe\src\type" />
-      <recent name="C:\Users\qpdgo\WebStormProjects\taehui\qwilight-fe\src\app\[language]\remit" />
     </key>
     <key name="MoveFile.RECENT_KEYS">
       <recent name="C:\Users\qpdgo\WebStormProjects\taehui\qwilight-fe\src\app\file" />
@@ -271,7 +275,8 @@
       <workItem from="1716119167337" duration="2347000" />
       <workItem from="1716892783696" duration="24000" />
       <workItem from="1717028487253" duration="269000" />
-      <workItem from="1717123769096" duration="400000" />
+      <workItem from="1717123769096" duration="707000" />
+      <workItem from="1717237781783" duration="584000" />
     </task>
     <task id="LOCAL-00001" summary="2024-02-02 오전 11:19">
       <option name="closed" value="true" />
diff --git a/package.json b/package.json
index 574cf87..1e0894a 100644
--- a/package.json
+++ b/package.json
@@ -18,8 +18,8 @@
   "devDependencies": {
     "eslint": "^8.57.0",
     "prettier": "^3.2.5",
-    "sass": "^1.77.3",
+    "sass": "^1.77.4",
     "typescript": "^5.4.5"
   },
-  "packageManager": "pnpm@9.0.6"
+  "packageManager": "pnpm@9.1.4"
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f98b17e..7246b2b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -15,8 +15,8 @@
         specifier: ^3.2.5
         version: 3.2.5
       sass:
-        specifier: ^1.77.3
-        version: 1.77.3
+        specifier: ^1.77.4
+        version: 1.77.4
       typescript:
         specifier: ^5.4.5
         version: 5.4.5
@@ -39,8 +39,8 @@
         specifier: ^4.2.0
         version: 4.2.0
       dompurify:
-        specifier: ^3.1.4
-        version: 3.1.4
+        specifier: ^3.1.5
+        version: 3.1.5
       google-protobuf:
         specifier: ^3.21.2
         version: 3.21.2
@@ -55,10 +55,10 @@
         version: 4.0.7(mobx@6.12.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       next:
         specifier: ^14.2.3
-        version: 14.2.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.3)
+        version: 14.2.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4)
       next-intl:
         specifier: ^3.14.1
-        version: 3.14.1(next@14.2.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.3))(react@18.3.1)
+        version: 3.14.1(next@14.2.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4))(react@18.3.1)
       react:
         specifier: ^18.3.1
         version: 18.3.1
@@ -103,8 +103,8 @@
         specifier: ^29.5.12
         version: 29.5.12
       '@types/node':
-        specifier: ^20.12.13
-        version: 20.12.13
+        specifier: ^20.13.0
+        version: 20.13.0
       '@types/react':
         specifier: ^18.3.3
         version: 18.3.3
@@ -136,8 +136,8 @@
         specifier: ^1.11.11
         version: 1.11.11
       dompurify:
-        specifier: ^3.1.4
-        version: 3.1.4
+        specifier: ^3.1.5
+        version: 3.1.5
       htmlparser2:
         specifier: ^9.1.0
         version: 9.1.0
@@ -155,10 +155,10 @@
         version: 4.0.7(mobx@6.12.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       next:
         specifier: ^14.2.3
-        version: 14.2.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.3)
+        version: 14.2.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4)
       next-intl:
         specifier: ^3.14.1
-        version: 3.14.1(next@14.2.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.3))(react@18.3.1)
+        version: 3.14.1(next@14.2.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4))(react@18.3.1)
       react:
         specifier: ^18.3.1
         version: 18.3.1
@@ -212,8 +212,8 @@
         specifier: ^29.5.12
         version: 29.5.12
       '@types/node':
-        specifier: ^20.12.13
-        version: 20.12.13
+        specifier: ^20.13.0
+        version: 20.13.0
       '@types/react':
         specifier: ^18.3.3
         version: 18.3.3
@@ -249,10 +249,10 @@
         version: 14.2.3(eslint@8.57.0)(typescript@5.4.5)
       next:
         specifier: ^14.2.3
-        version: 14.2.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.3)
+        version: 14.2.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4)
       next-intl:
         specifier: ^3.14.1
-        version: 3.14.1(next@14.2.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.3))(react@18.3.1)
+        version: 3.14.1(next@14.2.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4))(react@18.3.1)
       react:
         specifier: ^18.3.1
         version: 18.3.1
@@ -750,8 +750,8 @@
   '@types/json5@0.0.29':
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
 
-  '@types/node@20.12.13':
-    resolution: {integrity: sha512-gBGeanV41c1L171rR7wjbMiEpEI/l5XFQdLLfhr/REwpgDy/4U8y89+i8kRiLzDyZdOkXh+cRaTetUnCYutoXA==}
+  '@types/node@20.13.0':
+    resolution: {integrity: sha512-FM6AOb3khNkNIXPnHFDYaHerSv8uN22C91z098AnGccVu+Pcdhi+pNUFDi0iLmPIsVE0JBD0KVS7mzUYt4nRzQ==}
 
   '@types/prop-types@15.7.12':
     resolution: {integrity: sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==}
@@ -1155,8 +1155,8 @@
     resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
     engines: {node: '>= 4'}
 
-  dompurify@3.1.4:
-    resolution: {integrity: sha512-2gnshi6OshmuKil8rMZuQCGiUF3cUxHY3NGDzUAdUx/NPEe5DVnO8BDoAQouvgwnx0R/+a6jUn36Z0FSdq8vww==}
+  dompurify@3.1.5:
+    resolution: {integrity: sha512-lwG+n5h8QNpxtyrJW/gJWckL+1/DQiYMX8f7t8Z2AZTPw1esVrqjI63i7Zc2Gz0aKzLVMYC1V1PL/ky+aY/NgA==}
 
   domutils@3.1.0:
     resolution: {integrity: sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==}
@@ -2176,8 +2176,8 @@
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
-  sass@1.77.3:
-    resolution: {integrity: sha512-WJHo+jmFp0dwRuymPmIovuxHaBntcCyja5hCB0yYY9wWrViEp4kF5Cdai98P72v6FzroPuABqu+ddLMbQWmwzA==}
+  sass@1.77.4:
+    resolution: {integrity: sha512-vcF3Ckow6g939GMA4PeU7b2K/9FALXk2KF9J87txdHzXbUF9XRQRwSxcAs/fGaTnJeBFd7UoV22j3lzMLdM0Pw==}
     engines: {node: '>=14.0.0'}
     hasBin: true
 
@@ -2751,7 +2751,7 @@
       '@jest/schemas': 29.6.3
       '@types/istanbul-lib-coverage': 2.0.6
       '@types/istanbul-reports': 3.0.4
-      '@types/node': 20.12.13
+      '@types/node': 20.13.0
       '@types/yargs': 17.0.32
       chalk: 4.1.2
 
@@ -2971,7 +2971,7 @@
 
   '@types/json5@0.0.29': {}
 
-  '@types/node@20.12.13':
+  '@types/node@20.13.0':
     dependencies:
       undici-types: 5.26.5
 
@@ -3412,7 +3412,7 @@
     dependencies:
       domelementtype: 2.3.0
 
-  dompurify@3.1.4: {}
+  dompurify@3.1.5: {}
 
   domutils@3.1.0:
     dependencies:
@@ -4090,7 +4090,7 @@
   isomorphic-dompurify@2.11.0:
     dependencies:
       '@types/dompurify': 3.0.5
-      dompurify: 3.1.4
+      dompurify: 3.1.5
       jsdom: 24.0.0
     transitivePeerDependencies:
       - bufferutil
@@ -4143,7 +4143,7 @@
   jest-util@29.7.0:
     dependencies:
       '@jest/types': 29.6.3
-      '@types/node': 20.12.13
+      '@types/node': 20.13.0
       chalk: 4.1.2
       ci-info: 3.9.0
       graceful-fs: 4.2.11
@@ -4241,7 +4241,7 @@
   mariadb@3.3.0:
     dependencies:
       '@types/geojson': 7946.0.14
-      '@types/node': 20.12.13
+      '@types/node': 20.13.0
       denque: 2.1.0
       iconv-lite: 0.6.3
       lru-cache: 10.2.2
@@ -4297,15 +4297,15 @@
 
   negotiator@0.6.3: {}
 
-  next-intl@3.14.1(next@14.2.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.3))(react@18.3.1):
+  next-intl@3.14.1(next@14.2.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4))(react@18.3.1):
     dependencies:
       '@formatjs/intl-localematcher': 0.2.32
       negotiator: 0.6.3
-      next: 14.2.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.3)
+      next: 14.2.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4)
       react: 18.3.1
       use-intl: 3.14.1(react@18.3.1)
 
-  next@14.2.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.3):
+  next@14.2.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4):
     dependencies:
       '@next/env': 14.2.3
       '@swc/helpers': 0.5.5
@@ -4326,7 +4326,7 @@
       '@next/swc-win32-arm64-msvc': 14.2.3
       '@next/swc-win32-ia32-msvc': 14.2.3
       '@next/swc-win32-x64-msvc': 14.2.3
-      sass: 1.77.3
+      sass: 1.77.4
     transitivePeerDependencies:
       - '@babel/core'
       - babel-plugin-macros
@@ -4674,7 +4674,7 @@
 
   safer-buffer@2.1.2: {}
 
-  sass@1.77.3:
+  sass@1.77.4:
     dependencies:
       chokidar: 3.6.0
       immutable: 4.3.5
diff --git a/qwilight-fe/package.json b/qwilight-fe/package.json
index 5791f10..f80637b 100644
--- a/qwilight-fe/package.json
+++ b/qwilight-fe/package.json
@@ -16,7 +16,7 @@
     "bootstrap": "^5.3.3",
     "chart.js": "^4.4.3",
     "crypto-js": "^4.2.0",
-    "dompurify": "^3.1.4",
+    "dompurify": "^3.1.5",
     "google-protobuf": "^3.21.2",
     "isomorphic-dompurify": "^2.11.0",
     "mobx": "^6.12.3",
@@ -39,7 +39,7 @@
     "@types/crypto-js": "^4.2.2",
     "@types/dompurify": "^3.0.5",
     "@types/jest": "^29.5.12",
-    "@types/node": "^20.12.13",
+    "@types/node": "^20.13.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "eslint-config-next": "^14.2.3",
diff --git "a/qwilight-fe/src/app/\133language\135/avatar/\133\133...want\135\135/page.module.scss" "b/qwilight-fe/src/app/\133language\135/avatar/\133\133...want\135\135/page.module.scss"
new file mode 100644
index 0000000..13c1b7b
--- /dev/null
+++ "b/qwilight-fe/src/app/\133language\135/avatar/\133\133...want\135\135/page.module.scss"
@@ -0,0 +1,5 @@
+span {
+  &.avatarIntro {
+    white-space: break-spaces;
+  }
+}
diff --git "a/qwilight-fe/src/app/\133language\135/avatar/\133\133...want\135\135/page.tsx" "b/qwilight-fe/src/app/\133language\135/avatar/\133\133...want\135\135/page.tsx"
index 91b99ed..b7452d6 100644
--- "a/qwilight-fe/src/app/\133language\135/avatar/\133\133...want\135\135/page.tsx"
+++ "b/qwilight-fe/src/app/\133language\135/avatar/\133\133...want\135\135/page.tsx"
@@ -32,6 +32,8 @@
 import Tab from "react-bootstrap/Tab";
 import Tabs from "react-bootstrap/Tabs";
 
+import scss from "@/app/[language]/avatar/[[...want]]/page.module.scss";
+
 export default observer(() => {
   const { input, setInput, tabItem, setTabItem } = useAvatarStore();
   const { siteAvatarID, isLoggedIn } = useSiteStore();
@@ -114,7 +116,9 @@
                               avatarName={avatarName}
                               textID
                             />
-                            <span>{avatarIntro}</span>
+                            <span className={scss.avatarIntro}>
+                              {avatarIntro}
+                            </span>
                           </Stack>
                         </Col>
                       </Row>
diff --git "a/qwilight-fe/src/app/\133language\135/avatar/components/IntroView.module.scss" "b/qwilight-fe/src/app/\133language\135/avatar/components/IntroView.module.scss"
new file mode 100644
index 0000000..13c1b7b
--- /dev/null
+++ "b/qwilight-fe/src/app/\133language\135/avatar/components/IntroView.module.scss"
@@ -0,0 +1,5 @@
+span {
+  &.avatarIntro {
+    white-space: break-spaces;
+  }
+}
diff --git "a/qwilight-fe/src/app/\133language\135/avatar/components/IntroView.tsx" "b/qwilight-fe/src/app/\133language\135/avatar/components/IntroView.tsx"
index 2b4a266..8db3676 100644
--- "a/qwilight-fe/src/app/\133language\135/avatar/components/IntroView.tsx"
+++ "b/qwilight-fe/src/app/\133language\135/avatar/components/IntroView.tsx"
@@ -4,6 +4,8 @@
 import CardBody from "react-bootstrap/CardBody";
 import CardHeader from "react-bootstrap/CardHeader";
 
+import scss from "@/app/[language]/avatar/components/IntroView.module.scss";
+
 export default function IntroView({
   avatar: { avatarIntro },
 }: {
@@ -19,7 +21,7 @@
     <Card>
       <CardHeader>{t("avatarIntroText")}</CardHeader>
       <CardBody>
-        <span>{avatarIntro}</span>
+        <span className={scss.avatarIntro}>{avatarIntro}</span>
       </CardBody>
     </Card>
   );
diff --git a/taehui-fe/package.json b/taehui-fe/package.json
index 505bf92..b0612b9 100644
--- a/taehui-fe/package.json
+++ b/taehui-fe/package.json
@@ -16,7 +16,7 @@
     "bootstrap": "^5.3.3",
     "crypto-js": "^4.2.0",
     "dayjs": "^1.11.11",
-    "dompurify": "^3.1.4",
+    "dompurify": "^3.1.5",
     "htmlparser2": "^9.1.0",
     "isomorphic-dompurify": "^2.11.0",
     "mariadb": "^3.3.0",
@@ -43,7 +43,7 @@
     "@types/crypto-js": "^4.2.2",
     "@types/dompurify": "^3.0.5",
     "@types/jest": "^29.5.12",
-    "@types/node": "^20.12.13",
+    "@types/node": "^20.13.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/showdown": "^2.0.6",