현지조사 모바일 기본 셋팅

package.json

@@ -12,7 +12,8 @@
     "next": "15.3.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "sass": "^1.87.0"
+    "sass": "^1.87.0",
+    "swiper": "^11.2.6"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",

pnpm-lock.yaml

@@ -20,6 +20,9 @@ importers:
       sass:
         specifier: ^1.87.0
         version: 1.87.0
+      swiper:
+        specifier: ^11.2.6
+        version: 11.2.6
     devDependencies:
       '@tailwindcss/postcss':
         specifier: ^4
@@ -640,6 +643,10 @@ packages:
       babel-plugin-macros:
         optional: true
 
+  swiper@11.2.6:
+    resolution: {integrity: sha512-8aXpYKtjy3DjcbzZfz+/OX/GhcU5h+looA6PbAzHMZT6ESSycSp9nAjPCenczgJyslV+rUGse64LMGpWE3PX9Q==}
+    engines: {node: '>= 4.7.0'}
+
   tailwindcss@4.1.4:
     resolution: {integrity: sha512-1ZIUqtPITFbv/DxRmDr5/agPqJwF69d24m9qmM1939TJehgY539CtzeZRjbLt5G6fSy/7YqqYsfvoTEw9xUI2A==}
 
@@ -1157,6 +1164,8 @@ snapshots:
       client-only: 0.0.1
       react: 19.1.0
 
+  swiper@11.2.6: {}
+
   tailwindcss@4.1.4: {}
 
   tapable@2.2.1: {}

public/assets/images/common/btn_arr.svg

@@ -0,0 +1,3 @@
+<svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 1L5 5L1 9" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

public/assets/images/common/btn_clip.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.125 10.875L10.875 7.125" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M12.6347 10.9572L14.5919 9C16.136 7.45584 16.136 4.95227 14.5919 3.40812C13.0477 1.86396 10.5442 1.86396 9 3.40812L7.04284 5.36528M10.9572 12.6347L9 14.5919C7.45584 16.136 4.95227 16.136 3.40812 14.5919C1.86396 13.0477 1.86396 10.5442 3.40812 9L5.36528 7.04284" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

public/assets/images/common/btn_clip_col.svg

@@ -0,0 +1,4 @@
+<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.625 10.875L11.375 7.125" stroke="#4E637E" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M13.1347 10.9572L15.0919 9C16.636 7.45584 16.636 4.95227 15.0919 3.40812C13.5477 1.86396 11.0442 1.86396 9.5 3.40812L7.54284 5.36528M11.4572 12.6347L9.5 14.5919C7.95584 16.136 5.45227 16.136 3.90812 14.5919C2.36396 13.0477 2.36396 10.5442 3.90812 9L5.86528 7.04284" stroke="#4E637E" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

public/assets/images/common/date_icon.svg

@@ -0,0 +1,14 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_169_1229)">
+<path d="M17 7H7C5.89543 7 5 7.89543 5 9V18C5 19.1046 5.89543 20 7 20H17C18.1046 20 19 19.1046 19 18V9C19 7.89543 18.1046 7 17 7Z" fill="white"/>
+<path d="M17 7.5H7C6.17157 7.5 5.5 8.17157 5.5 9V18C5.5 18.8284 6.17157 19.5 7 19.5H17C17.8284 19.5 18.5 18.8284 18.5 18V9C18.5 8.17157 17.8284 7.5 17 7.5Z" stroke="#A8B6C7" stroke-width="1.5"/>
+<path d="M7 7H17C17.5304 7 18.0391 7.21071 18.4142 7.58579C18.7893 7.96086 19 8.46957 19 9V12H5V9C5 8.46957 5.21071 7.96086 5.58579 7.58579C5.96086 7.21071 6.46957 7 7 7Z" fill="#A8B6C7"/>
+<path d="M9 5C9.26522 5 9.51957 5.10536 9.70711 5.29289C9.89464 5.48043 10 5.73478 10 6V8H8V6C8 5.73478 8.10536 5.48043 8.29289 5.29289C8.48043 5.10536 8.73478 5 9 5Z" fill="#A8B6C7"/>
+<path d="M15 5C15.2652 5 15.5196 5.10536 15.7071 5.29289C15.8946 5.48043 16 5.73478 16 6V8H14V6C14 5.73478 14.1054 5.48043 14.2929 5.29289C14.4804 5.10536 14.7348 5 15 5Z" fill="#A8B6C7"/>
+</g>
+<defs>
+<clipPath id="clip0_169_1229">
+<rect width="16" height="16" fill="white" transform="translate(4 5)"/>
+</clipPath>
+</defs>
+</svg>

public/assets/images/common/id_delete_icon.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 clip-path="url(#clip0_169_1253)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.06815e-06 8C3.06815e-06 6.41775 0.469195 4.87103 1.34825 3.55544C2.2273 2.23985 3.47673 1.21447 4.93854 0.608967C6.40034 0.00346625 8.00888 -0.15496 9.56073 0.153721C11.1126 0.462403 12.538 1.22433 13.6569 2.34315C14.7757 3.46197 15.5376 4.88743 15.8463 6.43928C16.155 7.99113 15.9965 9.59966 15.391 11.0615C14.7855 12.5233 13.7602 13.7727 12.4446 14.6518C11.129 15.5308 9.58225 16 8 16C6.94917 16.0009 5.90847 15.7946 4.93745 15.3929C3.96643 14.9912 3.08415 14.402 2.3411 13.6589C1.59804 12.9159 1.0088 12.0336 0.607092 11.0626C0.20538 10.0915 -0.00091762 9.05084 3.06815e-06 8ZM8 6.872L10.072 4.8L11.2 5.928L9.128 8L11.2 10.072L10.072 11.2L8 9.128L5.928 11.2L4.8 10.072L6.872 8L4.8 5.928L5.928 4.8L8 6.872Z" fill="#A8B6C7"/>
+</g>
+<defs>
+<clipPath id="clip0_169_1253">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

public/assets/images/common/id_input_icon.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0007 9.93023C10.0138 10.4593 9.84112 10.9762 9.51269 11.3912C9.37838 11.5781 9.20188 11.7306 8.99755 11.8364C8.79321 11.9422 8.5668 11.9984 8.33669 12.0002H1.66469C1.43459 11.9984 1.20818 11.9422 1.00384 11.8364C0.799503 11.7306 0.623008 11.5781 0.488694 11.3912C0.160266 10.9762 -0.0124006 10.4593 0.000693567 9.93023C-0.00072481 9.51133 0.0213097 9.09267 0.0666936 8.67623C0.11313 8.27361 0.195799 7.876 0.313694 7.48823C0.416695 7.12727 0.570573 6.78281 0.770694 6.46523C0.957125 6.1776 1.20855 5.93782 1.50469 5.76523C1.82451 5.58323 2.18781 5.49162 2.55569 5.50023C2.87512 5.82266 3.25627 6.0774 3.67636 6.24922C4.09645 6.42103 4.54687 6.5064 5.00069 6.50023C5.45452 6.5064 5.90494 6.42103 6.32503 6.24922C6.74512 6.0774 7.12627 5.82266 7.44569 5.50023C7.81539 5.49241 8.1802 5.58577 8.50069 5.77023C8.79683 5.94282 9.04826 6.1826 9.23469 6.47023C9.43481 6.78781 9.58869 7.13227 9.69169 7.49323C9.80925 7.88103 9.89158 8.27864 9.93769 8.68123C9.98189 9.09607 10.0029 9.51305 10.0007 9.93023ZM8.00069 3.00023C8.00686 3.39506 7.93204 3.78697 7.78086 4.15176C7.62967 4.51656 7.40534 4.8465 7.12169 5.12123C6.84696 5.40488 6.51702 5.62921 6.15223 5.78039C5.78743 5.93157 5.39553 6.00639 5.00069 6.00023C4.60586 6.00639 4.21395 5.93157 3.84916 5.78039C3.48436 5.62921 3.15442 5.40488 2.87969 5.12123C2.59605 4.8465 2.37171 4.51656 2.22053 4.15176C2.06935 3.78697 1.99453 3.39506 2.00069 3.00023C1.99453 2.6054 2.06935 2.21349 2.22053 1.8487C2.37171 1.4839 2.59605 1.15396 2.87969 0.879229C3.15442 0.595584 3.48436 0.371249 3.84916 0.220068C4.21395 0.0688871 4.60586 -0.00593148 5.00069 0.000229761C5.39553 -0.00593148 5.78743 0.0688871 6.15223 0.220068C6.51702 0.371249 6.84696 0.595584 7.12169 0.879229C7.40534 1.15396 7.62967 1.4839 7.78086 1.8487C7.93204 2.21349 8.00686 2.6054 8.00069 3.00023Z" fill="#A8B6C7"/>
+</svg>

public/assets/images/common/pw_input_icon.svg

@@ -0,0 +1,3 @@
+<svg width="9" height="12" viewBox="0 0 9 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.50011 5.50004H6.50011V4.00004C6.5042 3.73682 6.45431 3.47555 6.35352 3.23236C6.25274 2.98916 6.10319 2.7692 5.91411 2.58604C5.73094 2.39696 5.51098 2.24741 5.26779 2.14662C5.02459 2.04584 4.76333 1.99595 4.50011 2.00004C4.23689 1.99595 3.97562 2.04584 3.73243 2.14662C3.48924 2.24741 3.26927 2.39696 3.08611 2.58604C2.89703 2.7692 2.74748 2.98916 2.64669 3.23236C2.54591 3.47555 2.49602 3.73682 2.50011 4.00004V5.50004ZM9.00011 6.25004V10.75C9.00182 10.8488 8.98327 10.9469 8.9456 11.0382C8.90794 11.1295 8.85195 11.2122 8.78111 11.281C8.71226 11.3519 8.62962 11.4079 8.53829 11.4455C8.44696 11.4832 8.34888 11.5017 8.25011 11.5H0.750108C0.651333 11.5017 0.553255 11.4832 0.461927 11.4455C0.370599 11.4079 0.28796 11.3519 0.219108 11.281C0.148264 11.2122 0.0922805 11.1295 0.0546143 11.0382C0.016948 10.9469 -0.00160222 10.8488 0.000108407 10.75V6.25004C-0.00160222 6.15126 0.016948 6.05318 0.0546143 5.96186C0.0922805 5.87053 0.148264 5.78789 0.219108 5.71904C0.28796 5.64819 0.370599 5.59221 0.461927 5.55454C0.553255 5.51688 0.651333 5.49833 0.750108 5.50004H1.00011V4.00004C0.994168 3.53989 1.08259 3.08341 1.25991 2.65876C1.43723 2.23412 1.6997 1.85031 2.03111 1.53104C2.35038 1.19963 2.73419 0.937163 3.15883 0.759839C3.58348 0.582516 4.03996 0.494096 4.50011 0.500037C4.96025 0.494096 5.41673 0.582516 5.84138 0.759839C6.26603 0.937163 6.64983 1.19963 6.96911 1.53104C7.30052 1.85031 7.56298 2.23412 7.74031 2.65876C7.91763 3.08341 8.00605 3.53989 8.00011 4.00004V5.50004H8.25011C8.34888 5.49833 8.44696 5.51688 8.53829 5.55454C8.62962 5.59221 8.71226 5.64819 8.78111 5.71904C8.85195 5.78789 8.90794 5.87053 8.9456 5.96186C8.98327 6.05318 9.00182 6.15126 9.00011 6.25004Z" fill="#A8B6C7"/>
+</svg>

public/assets/images/common/pw_show_icon.svg

@@ -0,0 +1,3 @@
+<svg width="19" height="14" viewBox="0 0 19 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.5 0.522583C7.4493 0.523752 5.44643 1.14218 3.75206 2.29738C2.0577 3.45258 0.750291 5.09107 0 6.99958C0.749121 8.90896 2.05622 10.5483 3.75083 11.7038C5.44544 12.8593 7.44892 13.4774 9.5 13.4774C11.5511 13.4774 13.5546 12.8593 15.2492 11.7038C16.9438 10.5483 18.2509 8.90896 19 6.99958C18.2497 5.09107 16.9423 3.45258 15.2479 2.29738C13.5536 1.14218 11.5507 0.523752 9.5 0.522583ZM9.5 11.3226C8.64598 11.3226 7.81114 11.0693 7.10105 10.5949C6.39096 10.1204 5.83751 9.44602 5.51069 8.65701C5.18387 7.868 5.09836 6.99979 5.26497 6.16218C5.43158 5.32457 5.84283 4.55518 6.44671 3.9513C7.0506 3.34741 7.81999 2.93616 8.6576 2.76955C9.49521 2.60294 10.3634 2.68845 11.1524 3.01527C11.9414 3.34209 12.6158 3.89554 13.0903 4.60563C13.5648 5.31572 13.818 6.15056 13.818 7.00458C13.8175 8.14963 13.3624 9.24762 12.5527 10.0573C11.743 10.867 10.645 11.3221 9.5 11.3226ZM9.5 4.41358C8.98755 4.41358 8.4866 4.56554 8.06052 4.85025C7.63443 5.13495 7.30233 5.53961 7.10623 6.01305C6.91012 6.48649 6.85881 7.00746 6.95879 7.51006C7.05876 8.01267 7.30553 8.47434 7.66789 8.8367C8.03024 9.19905 8.49192 9.44582 8.99452 9.5458C9.49713 9.64577 10.0181 9.59446 10.4915 9.39835C10.965 9.20225 11.3696 8.87015 11.6543 8.44407C11.939 8.01798 12.091 7.51703 12.091 7.00458C12.0922 6.66376 12.026 6.32606 11.8963 6.01089C11.7666 5.69572 11.5758 5.40929 11.3351 5.16806C11.0943 4.92683 10.8082 4.73555 10.4933 4.60521C10.1784 4.47488 9.84083 4.40805 9.5 4.40858V4.41358Z" fill="#A8B6C7"/>
+</svg>

public/assets/images/common/search_icon.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 4C14.866 4 18 7.13401 18 11C18 12.6663 17.4164 14.1955 16.4443 15.3975C16.4539 15.4045 16.4644 15.4104 16.4736 15.418L16.5303 15.4697L19.5303 18.4697L19.582 18.5264C19.8223 18.8209 19.8049 19.2557 19.5303 19.5303C19.2557 19.8049 18.8209 19.8223 18.5264 19.582L18.4697 19.5303L15.4697 16.5303L15.418 16.4736C15.4104 16.4644 15.4045 16.4539 15.3975 16.4443C14.1955 17.4164 12.6663 18 11 18C7.13401 18 4 14.866 4 11C4 7.13401 7.13401 4 11 4ZM11 5.5C7.96243 5.5 5.5 7.96243 5.5 11C5.5 14.0376 7.96243 16.5 11 16.5C14.0376 16.5 16.5 14.0376 16.5 11C16.5 7.96243 14.0376 5.5 11 5.5Z" fill="#A8B6C7"/>
+</svg>

public/assets/images/common/select_arr.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 1L7 7L13 1" stroke="#A8B6C7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

public/assets/images/common/side_nav_btn.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 12H21" stroke="#101010" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 6H21" stroke="#101010" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 18H21" stroke="#101010" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

public/assets/images/layout/side_back_btn.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 10.9899V13.0101H7.87879L13.4343 18.5657L12 20L4 12L12 4L13.4343 5.43434L7.87879 10.9899H20Z" fill="#2B2B2B"/>
+</svg>

public/assets/images/layout/side_nav_close.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.7072 5.29289C6.31668 4.90237 5.68351 4.90237 5.29299 5.29289C4.90246 5.68342 4.90246 6.31658 5.29299 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.293 18.7071C17.6835 19.0976 18.3167 19.0976 18.7072 18.7071C19.0977 18.3166 19.0977 17.6834 18.7072 17.2929L13.4143 12L18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5857L6.7072 5.29289Z" fill="#535763"/>
+</svg>

public/assets/images/layout/side_nav_item_arr.svg

@@ -0,0 +1,3 @@
+<svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 1.5L5 5.5L1 9.5" stroke="#8F9CB1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

public/assets/images/layout/side_nav_profile.svg

@@ -0,0 +1,5 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="48" height="48" rx="24" fill="#101010"/>
+<path d="M34 34.1765V31.5686C34 30.1853 33.4996 28.8587 32.6088 27.8806C31.718 26.9024 30.5098 26.3529 29.25 26.3529H19.75C18.4902 26.3529 17.282 26.9024 16.3912 27.8806C15.5004 28.8587 15 30.1853 15 31.5686V34.1765" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M24.5001 21.8824C27.2778 21.8824 29.5295 19.6306 29.5295 16.8529C29.5295 14.0753 27.2778 11.8235 24.5001 11.8235C21.7224 11.8235 19.4707 14.0753 19.4707 16.8529C19.4707 19.6306 21.7224 21.8824 24.5001 21.8824Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

public/assets/images/layout/side_swiper_icon01.svg

@@ -0,0 +1,8 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 4C1 2.34315 2.34315 1 4 1H16C17.6569 1 19 2.34315 19 4V18C19 19.6569 17.6569 21 16 21H4C2.34315 21 1 19.6569 1 18V4Z" fill="white"/>
+<path d="M19 10V9C19 5.22876 19 3.34315 17.7595 2.17157C16.519 1 14.5225 1 10.5294 1L9.47059 1C5.47752 1 3.48098 1 2.24049 2.17157C1 3.34315 1 5.22876 1 9L1 13C1 16.7712 1 18.6569 2.24049 19.8284C3.48098 21 5.47751 21 9.47059 21H10" stroke="#7896BA" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M6 6H14" stroke="#7896BA" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M6 11H14" stroke="#7896BA" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M17.3285 13.8039C17.6619 13.4705 17.8285 13.3039 18.0019 13.2037C18.4725 12.9321 19.0522 12.9321 19.5227 13.2037C19.6961 13.3039 19.8628 13.4705 20.1961 13.8039C20.5295 14.1372 20.6961 14.3039 20.7963 14.4773C21.0679 14.9478 21.0679 15.5275 20.7963 15.9981C20.6961 16.1715 20.5295 16.3381 20.1961 16.6715L16.8883 19.9793C16.2274 20.6402 15.2301 20.6671 14.3477 20.8557C13.6578 21.0032 13.3128 21.077 13.1179 20.8821C12.923 20.6872 12.9968 20.3422 13.1443 19.6523C13.3329 18.7699 13.3598 17.7726 14.0207 17.1117L17.3285 13.8039Z" fill="#F4F9FF"/>
+<path d="M14.3477 20.8557L14.1909 20.1223L14.3477 20.8557ZM13.1443 19.6523L13.8777 19.8091L13.1443 19.6523ZM14.0207 17.1117L13.4903 16.5814L14.0207 17.1117ZM16.8883 19.9793L16.358 19.449L16.8883 19.9793ZM20.7963 14.4773L21.4458 14.1023V14.1023L20.7963 14.4773ZM20.1961 16.6715L20.7265 17.2018L20.1961 16.6715ZM20.7963 15.9981L21.4458 16.3731L20.7963 15.9981ZM19.5227 13.2037L19.8977 12.5542V12.5542L19.5227 13.2037ZM17.3285 13.8039L17.8588 14.3342L17.3285 13.8039ZM18.0019 13.2037L17.6269 12.5542V12.5542L18.0019 13.2037ZM20.1961 16.6715L19.6658 16.1412L16.358 19.449L16.8883 19.9793L17.4186 20.5097L20.7265 17.2018L20.1961 16.6715ZM14.0207 17.1117L14.551 17.642L17.8588 14.3342L17.3285 13.8039L16.7982 13.2735L13.4903 16.5814L14.0207 17.1117ZM14.3477 20.8557L14.1909 20.1223C14.0155 20.1598 13.8753 20.1897 13.7548 20.2121C13.6333 20.2347 13.5536 20.2454 13.4996 20.2488C13.4441 20.2524 13.4479 20.2458 13.4825 20.2547C13.5296 20.2669 13.5936 20.2972 13.6482 20.3518L13.1179 20.8821L12.5876 21.4124C12.9113 21.7362 13.3158 21.7636 13.5948 21.7458C13.8603 21.7289 14.1839 21.6577 14.5045 21.5891L14.3477 20.8557ZM13.1443 19.6523L12.4109 19.4955C12.3423 19.8161 12.2711 20.1397 12.2542 20.4052C12.2364 20.6842 12.2638 21.0887 12.5876 21.4124L13.1179 20.8821L13.6482 20.3518C13.7028 20.4064 13.7331 20.4704 13.7453 20.5175C13.7542 20.5521 13.7476 20.5559 13.7512 20.5004C13.7546 20.4464 13.7653 20.3667 13.7879 20.2452C13.8103 20.1247 13.8402 19.9845 13.8777 19.8091L13.1443 19.6523ZM20.1961 13.8039L19.6658 14.3342C20.0333 14.7017 20.1084 14.786 20.1467 14.8523L20.7963 14.4773L21.4458 14.1023C21.2839 13.8218 21.0257 13.5728 20.7265 13.2735L20.1961 13.8039ZM20.1961 16.6715L20.7265 17.2018C21.0257 16.9026 21.2839 16.6535 21.4458 16.3731L20.7963 15.9981L20.1467 15.6231C20.1084 15.6894 20.0333 15.7737 19.6658 16.1412L20.1961 16.6715ZM20.7963 14.4773L20.1467 14.8523C20.2844 15.0908 20.2844 15.3846 20.1467 15.6231L20.7963 15.9981L21.4458 16.3731C21.8514 15.6705 21.8514 14.8049 21.4458 14.1023L20.7963 14.4773ZM20.1961 13.8039L20.7265 13.2735C20.4272 12.9743 20.1782 12.7161 19.8977 12.5542L19.5227 13.2037L19.1477 13.8533C19.214 13.8916 19.2983 13.9667 19.6658 14.3342L20.1961 13.8039ZM17.3285 13.8039L17.8588 14.3342C18.2263 13.9667 18.3106 13.8916 18.3769 13.8533L18.0019 13.2037L17.6269 12.5542C17.3465 12.7161 17.0974 12.9743 16.7982 13.2735L17.3285 13.8039ZM19.5227 13.2037L19.8977 12.5542C19.1951 12.1486 18.3295 12.1486 17.6269 12.5542L18.0019 13.2037L18.3769 13.8533C18.6154 13.7156 18.9092 13.7156 19.1477 13.8533L19.5227 13.2037ZM16.8883 19.9793L16.358 19.449C16.1624 19.6445 15.8952 19.771 15.5155 19.8679C15.3253 19.9165 15.1224 19.954 14.8963 19.9931C14.679 20.0306 14.4303 20.0711 14.1909 20.1223L14.3477 20.8557L14.5045 21.5891C14.7063 21.546 14.9131 21.5124 15.1517 21.4712C15.3814 21.4315 15.6346 21.3856 15.8866 21.3213C16.3914 21.1924 16.9533 20.975 17.4186 20.5097L16.8883 19.9793ZM13.1443 19.6523L13.8777 19.8091C13.9289 19.5697 13.9694 19.321 14.0069 19.1037C14.046 18.8776 14.0835 18.6747 14.1321 18.4845C14.229 18.1048 14.3555 17.8376 14.551 17.642L14.0207 17.1117L13.4903 16.5814C13.025 17.0467 12.8076 17.6086 12.6787 18.1134C12.6144 18.3654 12.5685 18.6186 12.5288 18.8483C12.4876 19.0869 12.454 19.2937 12.4109 19.4955L13.1443 19.6523Z" fill="#7896BA"/>
+</svg>

public/assets/images/layout/side_swiper_icon02.svg

@@ -0,0 +1,6 @@
+<svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 1C16.5228 1 21 5.25329 21 10.5C21 15.7467 16.5228 20 11 20C9.7958 20 8.64147 19.7974 7.57227 19.4268L7 20L4 20.5L4.96875 18.0762C2.55822 16.3416 1 13.5943 1 10.5C1 5.25329 5.47715 1 11 1Z" fill="white"/>
+<path d="M21 10.5667C21 15.8499 16.5222 20.1334 11 20.1334C10.3507 20.1343 9.70324 20.0742 9.06542 19.9545C8.60633 19.8682 8.37678 19.8251 8.21653 19.8496C8.05627 19.8741 7.82918 19.9949 7.37499 20.2364C6.09014 20.9197 4.59195 21.161 3.15111 20.893C3.69874 20.2194 4.07275 19.4112 4.23778 18.5448C4.33778 18.0148 4.09 17.5 3.71889 17.1231C2.03333 15.4115 1 13.1051 1 10.5667C1 5.28357 5.47778 1 11 1C11.6849 1 12.3538 1.0659 13 1.19142" stroke="#7896BA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22 4.5C22 6.433 20.433 8 18.5 8C16.567 8 15 6.433 15 4.5C15 2.567 16.567 1 18.5 1C20.433 1 22 2.567 22 4.5Z" fill="#F4F9FF" stroke="#7896BA" stroke-width="1.5"/>
+<path d="M10.9955 11H11.0045M14.991 11H15M7 11H7.00897" stroke="#7896BA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/app/globals.css

@@ -1,26 +0,0 @@
-@import "tailwindcss";
-
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
-}

src/app/inputcommon/page.tsx

@@ -0,0 +1,202 @@
+'use client'
+import { useState } from "react"
+
+export default function InputCommon() {
+  const [fileName, setFileName] = useState<File | null>(null); //file name value
+
+  return (
+    <div className="form-design-wrap">
+      <div className="design-box" >
+        <h1 className="tit" >Input</h1>
+        <div className="design-grid-wrap">
+          <input className="input-frame" type="text" placeholder="Input Frame Text"/>
+          <input className="input-frame" type="number" placeholder="Input Frame Number"/>
+          <input className="input-frame" type="password" placeholder="Input Frame Password"/>
+          <input className="input-frame" type="email" placeholder="Input Frame Email"/>
+          <input className="input-frame" type="text" placeholder="Input Frame Disabled" defaultValue={'defaultValue'} disabled/>
+          <input className="input-frame" type="text" placeholder="Input Frame ReadOnly" readOnly/>
+          <div className="filebox">
+            <input className="input-frame" placeholder="Input Frame File" defaultValue={fileName?.name} readOnly />
+            <label className="file-upload" htmlFor="file">Upload File</label>
+            <input type="file" id="file" onChange={(e) => setFileName(e.target.files?.[0] ?? null)}/>
+          </div>
+          <div className="search-input">
+            <input type="text" className="search-frame" placeholder="Input Frame Search"/>
+            <button className="search-icon"></button>
+          </div>
+          <div className="date-input">
+            <button className="date-btn"><i className="date-icon"></i></button>
+            <input type="text" className="date-frame" placeholder="Input Frame Date"/>
+          </div>
+          <div className="login-input id">
+            <input type="text" className="login-frame" placeholder="Input Frame ID"/>
+            <button className="login-icon"><i className="del-icon"></i></button>
+          </div>
+          <div className="login-input pw">
+            <input type="text" className="login-frame" placeholder="Input Frame PW"/>
+            <button className="login-icon act"><i className="show-icon"></i></button>
+          </div>
+        </div>
+      </div>
+      <div className="design-box" >
+        <h1 className="tit" >Button</h1>
+        <div className="design-grid-wrap" >
+          <button className="btn-frame d-blue min">Block Button</button>
+          <button className="btn-frame n-blue min">Block Button</button>
+          <button className="btn-frame red min">Block Button</button>
+          <button className="btn-frame d-blue">Block Button</button>
+          <button className="btn-frame n-blue">Block Button</button>
+          <button className="btn-frame l-blue">Block Button</button>
+          <button className="btn-frame red">Block Button</button>
+          <button className="btn-frame d-blue icon">Block Icon Button<i className="btn-arr"></i></button>
+          <button className="btn-frame n-blue icon">Block Icon Button<i className="btn-arr"></i></button>
+          <button className="btn-frame red icon">Block Icon Button<i className="btn-arr"></i></button>
+          <button className="btn-frame l-blue icon"><i className="btn-clip"></i>Block Icon Button</button>
+          <button className="btn-frame icon login">Block Big Button <i className="btn-arr"></i></button>
+          <button className="btn-frame" disabled>Block Button</button>
+        </div>
+      </div>
+      <div className="design-box" >
+        <h1 className="tit" >Check Box</h1>
+        <div className="design-grid-wrap" >
+          <div className="check-form-box">
+            <input type="checkbox" id="ch01"/>
+            <label htmlFor="ch01">Check Box</label>
+          </div>
+          <div className="check-form-box">
+            <input type="checkbox" id="ch02"/>
+            <label htmlFor="ch02">Check Box</label>
+          </div>
+          <div className="check-form-box">
+            <input type="checkbox" id="ch03" defaultChecked/>
+            <label htmlFor="ch03">Check Box</label>
+          </div>
+          <div className="check-form-box">
+            <input type="checkbox" id="ch04" defaultChecked/>
+            <label htmlFor="ch04">Check Box</label>
+          </div>
+          <div className="check-form-box">
+            <input type="checkbox" id="ch05" disabled/>
+            <label htmlFor="ch05">Check Box</label>
+          </div>
+          <div className="check-form-box">
+            <input type="checkbox" id="ch06" disabled/>
+            <label htmlFor="ch06">Check Box</label>
+          </div>
+        </div>
+      </div>
+      <div className="design-box" >
+        <h1 className="tit" >Radio Button</h1>
+        <div className="design-grid-wrap" >
+          <div className="radio-form-box">
+            <input type="radio" name="radio01" id="ra01" />
+            <label htmlFor="ra01">Radio Button</label>
+          </div>
+          <div className="radio-form-box">
+            <input type="radio" name="radio01" id="ra02" defaultChecked/>
+            <label htmlFor="ra02">Radio Button</label>
+          </div>
+          <div className="radio-form-box">
+            <input type="radio" name="radio03" id="ra05" disabled/>
+            <label htmlFor="ra05">Radio Button</label>
+          </div>
+        </div>
+      </div>
+      <div className="design-box">
+        <h1 className="tit" >Toggle Button</h1>
+        <div className="design-grid-wrap" >
+          <div>
+            <label className="toggle-btn">
+                <input type="checkbox"/>
+                <span className="slider"></span>
+            </label>
+          </div>
+        </div>
+      </div>
+      <div className="design-box" >
+        <h1 className="tit" >Select Box</h1>
+        <div className="design-grid-wrap" >
+          <select className="select-form" name="" id="">
+            <option value="">Select01</option>
+            <option value="">Select02</option>
+            <option value="">Select03</option>
+            <option value="">Select04</option>
+            <option value="">Select05</option>
+          </select>
+          <select className="select-form" name="" id="" disabled>
+            <option value="">Select01</option>
+            <option value="">Select02</option>
+            <option value="">Select03</option>
+            <option value="">Select04</option>
+            <option value="">Select05</option>
+          </select>
+          <div className="select-flex-form">
+            <select className="select-form" name="" id="">
+              <option value="">Select01</option>
+              <option value="">Select02</option>
+              <option value="">Select03</option>
+              <option value="">Select04</option>
+              <option value="">Select05</option>
+            </select>
+            <select className="select-form" name="" id="">
+              <option value="">Select01</option>
+              <option value="">Select02</option>
+              <option value="">Select03</option>
+              <option value="">Select04</option>
+              <option value="">Select05</option>
+            </select>
+            <select className="select-form" name="" id="" disabled>
+              <option value="">Select01</option>
+              <option value="">Select02</option>
+              <option value="">Select03</option>
+              <option value="">Select04</option>
+              <option value="">Select05</option>
+            </select>
+          </div>
+        </div>
+      </div>
+      <div className="design-box" >
+        <h1 className="tit" >TextArea</h1>
+        <div className="design-grid-wrap" >
+          <textarea className="textarea-form" name="" id="" placeholder="TextArea Filed"></textarea>
+          <textarea className="textarea-form" name="" id="" disabled></textarea>
+        </div>
+      </div>
+      <style jsx>
+        {`
+          .form-design-wrap {
+            max-width: 1300px;
+            margin: 0px auto;
+            padding: 25px 20px;
+          }
+          .design-box {
+            padding: 15px;
+            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+            border-radius: 5px;
+            margin-bottom: 25px;
+          }
+          .tit {
+            font-size: 24px;
+            font-weight: 600;
+            color: #000;
+            border-bottom: 1px solid #000;
+            padding-bottom: 5px;
+          }
+          .design-grid-wrap {
+            display: flex;
+            align-items: center;
+            flex-wrap: wrap;
+            margin-top: 20px;
+            gap: 10px;
+          }
+          .icon-bx {
+            width: 10px;
+            height: 10px;
+            margin-right: 5px;
+            background-color: #000;
+          }
+        `}
+      </style>
+    </div>
+  )
+}

src/app/layout.tsx

@@ -1,7 +1,6 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
+import '@/styles/style.scss'
-import "../styles/test.sass";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -29,7 +28,6 @@ export default function RootLayout({
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
         {children}
-        <div className="test">test</div>
       </body>
     </html>
   );

src/app/main/page.tsx

@@ -0,0 +1,14 @@
+import Footer from "@/components/layouts/Footer";
+import Header from "@/components/layouts/Header";
+
+export default function Layout(){
+  return(
+    <div className="wrap">
+      <Header name={"Hanasys 現地調査"}/>
+      <div className="container">
+        asdasd
+      </div>
+      <Footer/>
+    </div>
+  )
+}

src/app/page.tsx

@@ -1,103 +1,9 @@
-import Image from "next/image";
+import PublishList from "@/components/PublishList/PublishList";
 
 export default function Home() {
   return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
+    <div>
-      <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
+      <PublishList/>
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="list-inside list-decimal text-sm/6 text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
-          <li className="mb-2 tracking-[-.01em]">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-[family-name:var(--font-geist-mono)] font-semibold">
-              src/app/page.tsx
-            </code>
-            .
-          </li>
-          <li className="tracking-[-.01em]">
-            Save and see your changes instantly.
-          </li>
-        </ol>
-
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
-        </div>
-      </main>
-      <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
     </div>
   );
 }

src/components/PublishList/PublishList.tsx

@@ -0,0 +1,68 @@
+import Link from 'next/link'
+import '@/styles/publishpage.scss'
+
+export default function PublishList (){
+  return(
+    <div className="publish-list">
+      <div className="p-header">
+        <h1>Hanasys 현지조사</h1>
+      </div>
+      <div className="p-body">
+        <div className="p-contents">
+          <div className='p-guide'>
+            <div className="p-guide-header">Publish Guide</div>
+            <div className="p-guide-content">
+              <p>※ className은 케밥 케이스 사용 <span>ex) "sample-class"</span></p>
+              <p>※ img네이밍은 "_"로 사용, 번호 사용시 01, 02 와 같이 2자리 숫자 사용 <span>ex) "img_sample01"</span></p>
+              <p>※ button, select, checkbox, radio... 등 기본 설정은 <span>InputCommon.jsx</span>에 정의된 내용만 사용</p>
+              <p>※ scss파일 생성시 "_"를 앞에 붙힌 후 생성, 또한 해당 카테고리에 적합한 폴더에 생성</p>
+              <div className='p-guide-inputcommon'>
+                <h3>기본 SetUp Input 모음</h3>
+                <Link href={'/inputcommon'}>InputCommon.jsx</Link>
+              </div>
+            </div>
+          </div>
+          <div className='p-list-wrap'>
+            <h2>Publish List</h2>
+            <div className='p-list-table'>
+              <table>
+                <colgroup>
+                  <col style={{width: '10%'}}/>
+                  <col/>
+                  <col style={{width: '20%'}}/>
+                  <col style={{width: '13%'}}/>
+                  <col style={{width: '20%'}}/>
+                  <col style={{width: '13%'}}/>
+                </colgroup>
+                <thead>
+                  <tr>
+                    <th>Depth01</th>
+                    <th>Depth02</th>
+                    <th>파일명</th>
+                    <th>비고</th>
+                    <th>MarkUp</th>
+                    <th>완료일</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td>Main</td>
+                    <td>Main Page</td>
+                    <td>
+                      <Link href={'main'}>Main.tsx</Link>
+                    </td>
+                    <td></td>
+                    <td className='c'>
+                      
+                    </td>
+                    <td className='c red'>2025/04/28</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+} 

src/components/layouts/Footer.tsx

@@ -0,0 +1,9 @@
+export default function Footer() {
+  return (
+    <footer>
+      <div className="footer-inner">
+        COPYRIGHT©2025 Hanwha Japan All Rights Reserved
+      </div>
+    </footer>
+  )
+}

src/components/layouts/Header.tsx

@@ -0,0 +1,112 @@
+'use client'
+
+import { Swiper, SwiperSlide } from 'swiper/react';
+import 'swiper/css';
+import { useState } from 'react';
+import Link from 'next/link';
+
+type HeaderProps = {
+  name: string;
+}
+
+export default function Header({name}: HeaderProps){
+  const [headerAct, setHeaderAct] = useState<boolean>(false);
+
+  return(
+    <div className="header-warp">
+      <header>
+        <div className="header-inner">
+          {/* <div className='back-button-wrap'>
+            <button className='back-button'></button>
+          </div> */}
+          <h2 className="logo"><Link href={"#"}>{name}</Link></h2>
+          <div className="side-button-wrap">
+            <button className="side-button" onClick={() => setHeaderAct(true)}></button>
+          </div>
+        </div>
+        <div className={`side-nav ${headerAct ? 'active' : ''}`}>
+          <div className="side-nav-inner">
+            <div className="side-nav-header">
+              <div className="side-header-profile">
+                <div className="profile-img">
+                  <img src="/assets/images/layout/side_nav_profile.svg" alt='profile'/>
+                </div>
+                <div className="profile-group"> 
+                  <div className="profile-name">HONG GILDONG</div>
+                  <div className="profile-company">Interplug corp.</div>
+                </div>
+              </div>
+              <div className="side-close-wrap">
+                <button className="side-close-btn" onClick={() => setHeaderAct(false)}></button>
+              </div>
+            </div>
+              <div className="side-swiper-wrap">
+                <Swiper
+                  slidesPerView={1.6}
+                  spaceBetween={12}
+                  className="mySwiper"
+                >
+                  <SwiperSlide>
+                    <div className='side-swiper-card'>
+                      <div className="side-swiper-icon icon01"></div>
+                      <div className="side-swiper-infor">
+                      私は作成した物件
+                      </div>
+                    </div>
+                  </SwiperSlide>
+                  <SwiperSlide>
+                    <div className='side-swiper-card'>
+                      <div className="side-swiper-icon icon02"></div>
+                      <div className="side-swiper-infor">
+                      私は作成したお問 い合わせ
+                      </div>
+                    </div> 
+                  </SwiperSlide>
+                  <SwiperSlide>
+                    <div className='side-swiper-card'>
+                      <div className="side-swiper-icon icon01"></div>
+                      <div className="side-swiper-infor">
+                        私は作成したお問 い合わせ
+                      </div>
+                    </div>
+                  </SwiperSlide>
+                </Swiper>
+              </div>
+              <nav className='side-nav-wrap'>
+                <ul className='side-nav-list'>
+                  <li className='side-nav-item'>
+                    <button>調査物件一覧</button> 
+                  </li>
+                  <li className='side-nav-item'>
+                    <button>調査物件登録</button>
+                  </li>
+                  <li className='side-nav-item'>
+                    <button>1:1お問い合わせ</button>
+                  </li>
+                  <li className='side-nav-item'>
+                    <button>1:1お問い合わせ登録</button>
+                  </li>
+                  <li className='side-nav-item'>
+                    <button>パスワードリセット</button>
+                  </li>
+                </ul>
+              </nav>
+            <div className='side-nav-footer'>
+              <ul className='side-footer-list'>
+                <li className='side-footer-item'>
+                  <button className='bold'>LOGOUT</button>
+                </li>
+                <li className='side-footer-item'>
+                  <button>Jynoadmin</button>
+                </li>
+                <li className='side-footer-item'>
+                  <button>HOME</button>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </header>
+    </div>
+  )
+}

src/styles/abstracts/_index.scss

@@ -0,0 +1,2 @@
+@forward 'variables';
+@forward 'mixins';

src/styles/abstracts/_mixins.scss

@@ -0,0 +1,25 @@
+@mixin flex($gapSize){
+  display: flex;
+  gap: $gapSize;
+}
+
+@mixin ellipsis($col){
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: $col;
+  -webkit-box-orient: vertical;
+}
+
+@mixin absoluteCenter{
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+@mixin defaultFont($size, $weight, $color){
+  font-size: $size;
+  font-weight: $weight;
+  color: $color;
+}

src/styles/abstracts/_variables.scss

@@ -0,0 +1,47 @@
+/* color */
+$black-000: #000;
+$black-1010: #101010;
+
+$white-fff: #fff;
+
+$grey-eee: #eee;
+$grey-999: #999;
+
+$font-c: #2E3A59;
+$font-pl-c: #A8B6C7;
+
+$btn-font-c: #4E637E;
+
+/* font weight */
+$font-w-100: 100;
+$font-w-200: 200;
+$font-w-300: 300;
+$font-w-400: 400;
+$font-w-500: 500;
+$font-w-600: 600;
+$font-w-700: 700;
+$font-w-800: 800;
+$font-w-900: 900;
+
+/* font size */
+$font-s-10: 10px;
+$font-s-11: 11px;
+$font-s-12: 12px;
+$font-s-13: 13px;
+$font-s-14: 14px;
+$font-s-15: 15px;
+$font-s-16: 16px;
+$font-s-17: 17px;
+$font-s-18: 18px;
+$font-s-19: 19px;
+$font-s-20: 20px;
+$font-s-21: 21px;
+$font-s-22: 22px;
+$font-s-23: 23px;
+$font-s-24: 24px;
+$font-s-25: 25px;
+$font-s-26: 26px;
+$font-s-27: 27px;
+$font-s-28: 28px;
+$font-s-29: 29px;
+$font-s-30: 30px;

src/styles/base/_button.scss

@@ -0,0 +1,91 @@
+@use "../abstracts" as *;
+
+.btn-frame{
+  display:block;
+  width: 100%;
+  padding:0 10px;
+  height:40px;
+  line-height:40px;
+  border-radius:4px;
+  text-align:center;
+  font-weight:$font-w-600;
+  font-size:$font-s-13;
+  color: $btn-font-c;
+  border: 1px solid #A8B6C7;
+  transition: all .15s ease-in-out;
+  cursor:pointer;
+  &.icon{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  &.min{
+    height: 30px;
+    line-height: 30px;
+    font-weight: $font-w-500;
+  }
+  &.login{
+    height: 50px;
+    line-height: 50px;
+    font-size: $font-s-14;
+    font-weight: $font-w-600;
+    background-color: #0081B5;
+    border-color: #0081B5;
+    color: $white-fff;
+    &:hover{
+      background-color: #016c96;
+    }
+  }
+  &:disabled{
+    opacity: 0.5;
+    background-color: $grey-eee;
+    cursor: default;
+  }
+  .btn-arr{
+    display: block;
+    width: 7px;
+    height: 10px;
+    background: url(/assets/images/common/btn_arr.svg)no-repeat center;
+    background-size: cover;
+    margin-left: 12px;
+  }
+  .btn-clip{
+    display: block;
+    width: 18px;
+    height: 18px;
+    background: url(/assets/images/common/btn_clip.svg)no-repeat center;
+    background-size: cover;
+    margin-right: 5px;
+    transition: all .15s ease-in-out;
+  }
+  &.d-blue{
+    background-color: #5F738E;
+    border-color: #5F738E;
+    color: $white-fff;
+    &:hover{
+      background-color: #466388;
+    }
+  }
+  &.n-blue{
+    background-color: #7896BA;
+    border-color: #7896BA;
+    color: $white-fff;
+    &:hover{
+      background-color: #668cbb;
+    }
+  }
+  &.l-blue{
+    background-color: #A8B6C7;
+    border-color: #A8B6C7;
+    color: $white-fff;
+  }
+  &.red{
+    background-color: #FF5656;
+    border-color: #FF5656;
+    color: $white-fff;
+    &:hover{
+      background-color: #db4b4b;
+    }
+  }
+}
+

src/styles/base/_check-radio.scss

@@ -0,0 +1,205 @@
+@use "../abstracts" as *;
+
+// check radio 공통
+.check-form-box input[type="checkbox"],
+.radio-form-box input[type="radio"]{
+  position: static;
+  margin-left:0;
+  opacity: 0;
+  z-index: 1;
+  flex: 0 0 auto;
+  cursor: pointer;
+}
+.check-form-box label,
+.radio-form-box label{
+  position: relative;
+  display: inline-block;
+  margin-bottom:0;
+  line-height:1.4;
+  font-size: $font-s-13;
+  color: $font-c;
+  vertical-align: top;
+  word-break:break-all;
+  cursor: pointer;
+  -webkit-user-select:none;
+  -moz-user-select:none;
+  -ms-user-select:none;
+  user-select:none;
+}
+
+// check box
+.check-form-box{
+  position: relative;
+  label{
+    padding-left: 30px;
+    &::before{
+      content: "";
+      display: inline-block;
+      position: absolute;
+      width: 22px;
+      height: 22px;
+      top: -2px;
+      left: 0;
+      margin-left: 0px;
+      border: 1px solid #A8B6C7;
+      border-radius: 4px;
+      background-color: #fff;
+      transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
+      cursor: pointer;
+    }
+    &::after{
+      content: "";
+      display: inline-block;
+      position: absolute;
+      width: 22px;
+      height: 22px;
+      top: -2px;
+      left: 0;
+      margin-left: 0;
+      border-color: #fff;
+      cursor: pointer;
+    }
+  }
+  input[type="checkbox"]:checked + label::before{
+    background-color: #A8B6C7;
+    border-color: #A8B6C7;
+  }
+  input[type="checkbox"]:checked + label::after{
+    content: "";
+    display: inline-block;
+    position: absolute;
+    top: -2px;
+    left: 0%;
+    width: 7px;
+    height: 9px;
+    border: 2px solid #fff;
+    border-left: none;
+    border-top: none;
+    transform: translate(7.75px,4.5px) rotate(45deg);
+    -ms-transform: translate(7.75px,4.5px) rotate(45deg);
+  }
+  input[type="checkbox"]:disabled + label{
+    opacity: 0.7;
+    cursor: default;
+  }
+  input[type="checkbox"]:disabled + label::before{
+    background-color: #f5f6fa;
+    cursor: default;
+  }
+  input[type="checkbox"]:disabled + label::after{
+    cursor: default;
+  }
+}
+
+// radio box
+.radio-form-box{
+  position: relative;
+  label{
+    padding-left: 30px;
+    &::before{
+      content: "";
+      display: inline-block;
+      position: absolute;
+      width: 22px;
+      height: 22px;
+      top: -2px;
+      left: 0;
+      margin-left: 0;
+      border: 1px solid #A8B6C7;
+      border-radius: 100%;
+      background-color: #fff;
+      text-align:center;
+      font-size:17px;
+      line-height:12px;
+      transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
+      cursor: pointer;
+    }
+    &::after{
+      content: "";
+      display: inline-block;
+      position: absolute;
+      top: 4px;
+      left: 6px;
+      width: 10px;
+      height: 10px;
+      background-color: transparent;
+      border-radius: 50%;
+      transition: background-color 0.1s ease-in-out;
+    }
+  }
+
+  input[type="radio"]:checked + label::after{
+    background-color: #A8B6C7;
+  }
+
+  input[type="radio"]:disabled + label{
+    opacity: 0.7;
+    cursor: default;
+  }
+  input[type="radio"]:disabled + label::before{
+    background-color: #f5f6fa;
+    cursor: default;
+  }
+  input[type="radio"]:disabled + label::after{
+    cursor: default;
+  }
+}
+
+
+//toggle
+.toggle-btn {
+  position: relative;
+  display: inline-block;
+  width: 38px;
+  height: 22px;
+  input {
+    display: none;
+  }
+  .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #E9F0F8;
+    border-radius: 25px;
+    text-align: center;
+    line-height: 20px;
+    color: $white-fff;
+    font-size: 14px;
+    font-weight: 400;
+    transition: .4s;
+    &:after {
+        content: '';
+        position: absolute;
+        top: 1px;
+        right: 8px;
+        color: white;
+        font-size: 14px;
+        font-weight: 400;
+    }
+    &:before {
+        position: absolute;
+        content: "";
+        height: 18px;
+        width: 18px;
+        left: 2px;
+        bottom: 2px;
+        background-color: $white-fff;
+        transition: .4s;
+        border-radius: 50%;
+    }
+  }
+  input:checked + .slider {
+    background-color: #A8B6C7;
+    &:after {
+        content: '';
+        left: 10px;
+        right: auto;
+    }
+    &:before {
+        transform: translateX(16px);
+    }
+  }
+}

src/styles/base/_fonts.scss

@@ -0,0 +1,199 @@
+@font-face {
+  font-family: 'Noto Sans JP';
+  src: url('/assets/fonts/NotoSansJP-ExtraBold.woff2') format('woff2'),
+      url('/assets/fonts/NotoSansJP-ExtraBold.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Noto Sans JP';
+  src: url('/assets/fonts/NotoSansJP-Bold.woff2') format('woff2'),
+      url('/assets/fonts/NotoSansJP-Bold.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Noto Sans JP';
+  src: url('/assets/fonts/NotoSansJP-Black.woff2') format('woff2'),
+      url('/assets/fonts/NotoSansJP-Black.woff') format('woff');
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Noto Sans JP';
+  src: url('/assets/fonts/NotoSansJP-ExtraLight.woff2') format('woff2'),
+      url('/assets/fonts/NotoSansJP-ExtraLight.woff') format('woff');
+  font-weight: 200;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Noto Sans JP';
+  src: url('/assets/fonts/NotoSansJP-Light.woff2') format('woff2'),
+      url('/assets/fonts/NotoSansJP-Light.woff') format('woff');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Noto Sans JP';
+  src: url('/assets/fonts/NotoSansJP-Medium.woff2') format('woff2'),
+      url('/assets/fonts/NotoSansJP-Medium.woff') format('woff');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Noto Sans JP';
+  src: url('/assets/fonts/NotoSansJP-Regular.woff2') format('woff2'),
+      url('/assets/fonts/NotoSansJP-Regular.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Noto Sans JP';
+  src: url('/assets/fonts/NotoSansJP-SemiBold.woff2') format('woff2'),
+      url('/assets/fonts/NotoSansJP-SemiBold.woff') format('woff');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Noto Sans JP';
+  src: url('/assets/fonts/NotoSansJP-Thin.woff2') format('woff2'),
+      url('/assets/fonts/NotoSansJP-Thin.woff') format('woff');
+  font-weight: 100;
+  font-style: normal;
+  font-display: swap;
+}
+
+// pretendard
+@font-face {
+  font-family: 'Pretendard';
+  src: url('/assets/fonts/Pretendard-Bold.woff2') format('woff2'),
+      url('/assets/fonts/Pretendard-Bold.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  src: url('/assets/fonts/Pretendard-ExtraBold.woff2') format('woff2'),
+      url('/assets/fonts/Pretendard-ExtraBold.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  src: url('/assets/fonts/Pretendard-ExtraBold.woff2') format('woff2'),
+      url('/assets/fonts/Pretendard-ExtraBold.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  src: url('/assets/fonts/Pretendard-ExtraLight.woff2') format('woff2'),
+      url('/assets/fonts/Pretendard-ExtraLight.woff') format('woff');
+  font-weight: 200;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  src: url('/assets/fonts/Pretendard-ExtraLight.woff2') format('woff2'),
+      url('/assets/fonts/Pretendard-ExtraLight.woff') format('woff');
+  font-weight: 200;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  src: url('/assets/fonts/Pretendard-Light.woff2') format('woff2'),
+      url('/assets/fonts/Pretendard-Light.woff') format('woff');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  src: url('/assets/fonts/Pretendard-Light.woff2') format('woff2'),
+      url('/assets/fonts/Pretendard-Light.woff') format('woff');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  src: url('/assets/fonts/Pretendard-Medium.woff2') format('woff2'),
+      url('/assets/fonts/Pretendard-Medium.woff') format('woff');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  src: url('/assets/fonts/Pretendard-Medium.woff2') format('woff2'),
+      url('/assets/fonts/Pretendard-Medium.woff') format('woff');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  src: url('/assets/fonts/Pretendard-Regular.woff2') format('woff2'),
+      url('/assets/fonts/Pretendard-Regular.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  src: url('/assets/fonts/Pretendard-Black.woff2') format('woff2'),
+      url('/assets/fonts/Pretendard-Black.woff') format('woff');
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  src: url('/assets/fonts/Pretendard-Black.woff2') format('woff2'),
+      url('/assets/fonts/Pretendard-Black.woff') format('woff');
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  src: url('/assets/fonts/Pretendard-Bold.woff2') format('woff2'),
+      url('/assets/fonts/Pretendard-Bold.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+

src/styles/base/_index.scss

@@ -0,0 +1,7 @@
+@forward 'fonts';
+@forward 'reset';
+@forward 'utilities';
+@forward 'button';
+@forward 'check-radio';
+@forward 'select-textarea';
+@forward 'inputs';

src/styles/base/_inputs.scss

@@ -0,0 +1,187 @@
+@use "../abstracts" as *;
+
+input[type='number']{
+  -moz-appearance: textfield;
+}
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+// input default
+.input-frame {
+  display: block;
+  width: 100%;
+  height: 40px;
+  padding: 0 10px;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid #D5DEE8;
+  border-radius: 4px;
+  font-size: $font-s-13;
+  font-weight: $font-w-400;
+  color: $font-c; 
+  box-shadow: inset 0 0 0 transparent;
+  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+  &::placeholder{
+    color: $font-pl-c;
+  }
+  &:read-only, 
+  &:disabled{
+    background-color: #F5F6FA;
+  }
+  &:focus{
+    border-color: #4e93dd;
+  }
+}
+
+//file input
+.filebox{
+  display: flex;
+  align-items: center;
+  width: 100%;
+  .input-frame{
+    flex: 1 1 auto;
+    margin-right: 5px;
+    color: #999;
+    cursor: default;
+    &:read-only{
+      background-color: #fff;
+    }
+    &:focus{
+      border-color: #e5e6e7;
+    }
+  }
+  .file-upload{
+    flex: none;
+    display: inline-block;
+    height: 30px;
+    background-color: #fff;
+    padding: 0 10px;
+    border-radius: 2px;
+    font-size: 13px;
+    line-height: 30px;
+    color: #000;
+    border: 1px solid #000;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background .15s ease-in-out;
+  }
+  input[type='file']{
+    display: none;
+  }
+}
+
+// search input
+.login-input,
+.date-input,
+.search-input{
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 0 10px;
+  height: 40px;
+  font-size: $font-s-13;
+  color: $font-c;
+  font-weight: $font-w-400;
+  background-color: $white-fff;
+  border: 1px solid #D5DEE8;
+  border-radius: 4px;
+  input{
+    width: 100%;
+    height: 100%;
+    background-color: transparent;
+    &::placeholder{
+      color: $font-pl-c;
+    }
+  }
+}
+.search-input{
+  .search-icon{
+    flex: none;
+    width: 24px;
+    height: 24px;
+    background: url(/assets/images/common/search_icon.svg)no-repeat center;
+    background-size: cover;
+    margin-left: 5px;
+  }
+}
+.date-input{
+  padding-left: 0;
+  input{
+    padding-left: 10px;
+  }
+  .date-btn{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-right: 1px solid #D5DEE8;
+    flex: none;
+    width: 34px;
+    height: 100%;
+    i{
+      display: block;
+      width: 24px;
+      height: 24px;
+      background: url(/assets/images/common/date_icon.svg)no-repeat center;
+      background-size: cover;
+    }
+  }
+}
+
+.login-input{
+  position: relative;
+  padding-left: 34px;
+  padding-right: 0;
+  &:before{
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 14px;
+    transform: translateY(-50%);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+  &.id{
+    &::before{
+      width: 10px;
+      height: 12px;
+      background-image: url(/assets/images/common/id_input_icon.svg);
+    }
+  }
+  &.pw{
+    &::before{
+      width: 9px;
+      height: 12px;
+      background-image: url(/assets/images/common/pw_input_icon.svg);
+    }
+  }
+  .login-icon{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 100%;
+    .del-icon{
+      display: block;
+      width: 16px;
+      height: 16px;
+      background: url(/assets/images/common/id_delete_icon.svg)no-repeat center;
+      background-size: cover;
+    }
+    .show-icon{
+      display: block;
+      width: 19px;
+      height: 14px;
+      background: url(/assets/images/common/pw_show_icon.svg)no-repeat center;
+      background-size: cover;
+    }
+    &.act{
+      .show-icon{
+        background: url(/assets/images/common/pw_show_icon.svg)no-repeat center;
+      }
+    }
+  }
+}

src/styles/base/_reset.scss

@@ -0,0 +1,47 @@
+@use "../abstracts" as *;
+
+* {
+  -webkit-text-size-adjust:none;
+  -moz-text-size-adjust:none;
+  -ms-text-size-adjust:none;
+  text-size-adjust: none;
+  box-sizing: content-box
+}
+*, ::after, ::before {
+  box-sizing: border-box;
+}
+html, body {width:100%; height: 100%; font-size:$font-s-16;}/*font-size:1rem*/
+html, body,
+div,dl, dt, dd, ul, ol, li,
+h1, h2, h3, h4, h5, h6,
+blockquote, p, address, pre, cite,
+form, fieldset, input, textarea, select,
+table, th, td {margin:0;padding:0;line-height: 1.4; font-family: 'Noto Sans JP', sans-serif;}
+
+h1, h2, h3, h4, h5, h6 {font-size:100%;font-weight:normal;} 
+
+fieldset, img, abbr,acronym, input, select, button { border:0 none; background:none;} 
+
+ol, ul { list-style:none; }
+
+table {border-collapse: collapse;border-spacing:0;border:0 none;}
+caption, th, td {text-align:left;font-weight: normal;border:0;}
+
+address, caption, i, em, cite {font-weight:normal;font-style:normal;}
+ins { text-decoration:none; }
+del { text-decoration:line-through; }
+
+blockquote:before, blockquote:after, q:before, q:after { content:""; }
+blockquote,q { quotes:"" ""; }
+
+body:first-of-type caption { display:none;}
+
+a { cursor:pointer;color: $black-000;}
+a, a:hover, a:active {text-decoration:none;-webkit-tap-highlight-color: transparent;}
+
+button { font-family:inherit; outline:none; margin:0; padding: 0; cursor: pointer;}
+textarea { -webkit-appearance: none;appearance: none;border-radius:0;-webkit-border-radius: 0; font-family:inherit; resize: none;border:none;outline:0;}
+input { font-family:inherit; -webkit-appearance: none;appearance: none;border-radius:0;-webkit-border-radius: 0; border:none;outline:0;}
+img { max-width:100%; }
+
+select {-webkit-appearance:none;-moz-appearance:none; appearance:none}

src/styles/base/_select-textarea.scss

@@ -0,0 +1,62 @@
+@use "../abstracts" as *;
+
+// select
+.select-form{
+  display: block;
+  width: 100%;
+  height: 40px;
+  line-height: 39px;
+  padding: 0px 36px 0px 10px;
+  border: 1px solid #D5DEE8;
+  border-radius: 4px;
+  font-size: $font-s-13;
+  font-weight: $font-w-400;
+  color: $font-c;
+  background:$white-fff url(/assets/images/common/select_arr.svg) calc(100% - 16px) center no-repeat; 
+  background-size:14px 8px;
+  box-shadow: inset 0 0 0 transparent;
+  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; 
+  cursor: pointer;
+  &:focus{
+    outline: none;
+    border-color: #4e93dd;
+  }
+  &:disabled{
+    opacity: 1;
+    background-color: #F5F6FA;
+    cursor: default;
+  }
+}
+.select-flex-form{
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: 5px;
+  .select-form{
+    flex: 1 1 auto;
+  }
+}
+
+// textarea
+.textarea-form{
+  display: block;
+  width: 100%;
+  border: 1px solid #D5DEE8;
+  border-radius: 4px;
+  min-height: 100px;
+  padding: 14px;
+  font-size: $font-s-13;
+  font-weight: $font-w-400;
+  color: $font-c;
+  transition: border-color .15s ease-in-out; 
+  &:focus{
+    border-color: #4e93dd;
+  }
+  &:disabled{
+    border-color: #D5DEE8;
+    background-color: #F5F6FA;
+  }
+  &::placeholder{
+    color: $font-pl-c;
+  }
+}

src/styles/base/_utilities.scss

@@ -0,0 +1,36 @@
+/* align */
+.al-c{text-align: center !important;}
+.al-r{text-align: right !important;}
+.al-l{text-align: left !important;}
+
+/* text-transform */
+.text-uppercase { text-transform: uppercase; }
+.text-lowercase { text-transform: lowercase; }
+.text-capitalize { text-transform: capitalize; }
+
+/* margin */
+.m0{margin: 0 !important;}
+.mt5{margin-top: 5px !important;}
+.mt10{margin-top: 10px !important;}
+.mt15{margin-top: 15px !important;}
+.mt20{margin-top: 20px !important;}
+.mt25{margin-top: 25px !important;}
+.mt30{margin-top: 30px !important;}
+.mb5{margin-bottom: 5px !important;}
+.mb10{margin-bottom: 10px !important;}
+.mb15{margin-bottom: 15px !important;}
+.mb20{margin-bottom: 20px !important;}
+.mb25{margin-bottom: 25px !important;}
+.mb30{margin-bottom: 30px !important;}
+.mr5{margin-right: 5px !important;}
+.mr10{margin-right: 10px !important;}
+.mr15{margin-right: 15px !important;}
+.mr20{margin-right: 20px !important;}
+.mr25{margin-right: 25px !important;}
+.mr30{margin-right: 30px !important;}
+.ml5{margin-left: 5px !important;}
+.ml10{margin-left: 10px !important;}
+.ml15{margin-left: 15px !important;}
+.ml20{margin-left: 20px !important;}
+.ml25{margin-left: 25px !important;}
+.ml30{margin-left: 30px !important;}

src/styles/layout/_index.scss

@@ -0,0 +1,2 @@
+@forward 'pop-common';
+@forward 'layout';

src/styles/layout/_layout.scss

@@ -0,0 +1,253 @@
+@use "../abstracts" as *;
+
+// 기본 Frame
+.wrap{
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: 100vh;
+  overflow-x: hidden;
+  .container{
+    flex: 1 1 auto;
+  }
+}
+
+// header
+.header-warp{
+  height: 66px;
+  z-index: 900000;
+}
+header{
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 66px;
+  border-bottom:1px solid rgba(236, 236, 236, 0.80);
+  background-color: $white-fff;
+  .header-inner{
+    position: relative;
+    @include flex(0px);
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    .back-button-wrap{
+      position: absolute;
+      top: 50%;
+      left: 20px;
+      transform: translateY(-50%);
+      width: 24px;
+      height: 24px;
+      .back-button {
+        display: block;
+        width: 100%;
+        height: 100%;
+        background:url(/assets/images/layout/side_back_btn.svg) no-repeat center; 
+        background-size: cover;
+      }
+    }
+    .logo{
+      a{
+        @include defaultFont($font-s-18, $font-w-600, $black-1010);
+      }
+    }
+    .side-button-wrap{
+      position: absolute;
+      top: 50%;
+      right: 20px;
+      transform: translateY(-50%);
+      width: 24px;
+      height: 24px;
+      .side-button{
+        display: block;
+        width: 100%;
+        height: 100%;
+        background:url(/assets/images/common/side_nav_btn.svg) no-repeat center; 
+        background-size: cover;
+      }
+    }
+  }
+}
+
+.side-nav{
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.70);
+  opacity: 0;
+  visibility: hidden;
+  z-index: 990000;
+  transition: all .2s ease-in-out;
+  .side-nav-inner{
+    position: absolute;
+    top: 0;
+    right: -310px;
+    width: 310px;
+    height: 100%;
+    @include flex(0px);
+    flex-direction: column;
+    border-top-left-radius: 16px;
+    border-bottom-left-radius: 16px;
+    background-color: #fff;
+    z-index: 999000;
+    transition: all .2s ease-in-out;
+  }
+  &.active{
+    opacity: 1;
+    visibility: visible;
+    .side-nav-inner{
+      right: 0;
+    }
+  }
+}
+
+.side-nav-header{
+  @include flex(0px);
+  align-items: center;
+  padding: 20px 20px 0 20px;
+  .side-header-profile{
+    
+    @include flex(12px);
+    align-items: center;
+    .profile-img{
+      @include flex(0px);
+    }
+    .profile-name{
+      font-family: 'Pretendard', sans-serif;
+      @include defaultFont($font-s-15, $font-w-600, $black-1010);
+    }
+    .profile-company{
+      font-family: 'Pretendard', sans-serif;
+      @include defaultFont($font-s-12, $font-w-500, #535763);
+    }
+  }
+  .side-close-wrap{
+    margin-left: auto;
+    .side-close-btn{
+      width: 24px;
+      height: 24px;
+      background: url(/assets/images/layout/side_nav_close.svg)no-repeat center;
+      background-size: cover;
+    }
+  }
+}
+
+.side-swiper-wrap{
+  margin-top: 30px;
+  padding: 0 20px;
+  .swiper-slide{
+    height: auto;
+  }
+  .side-swiper-card{
+    width: 100%;
+    height: 100%;
+    padding: 16px 20px;
+    background-color: #F4F9FF;
+    border-radius: 8px;
+    cursor: pointer;
+    .side-swiper-icon{
+      width: 20px;
+      height: 20px;
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      margin-bottom: 8px;
+      &.icon01{
+        background-image: url(/assets/images/layout/side_swiper_icon01.svg)
+      }
+      &.icon02{
+        background-image: url(/assets/images/layout/side_swiper_icon02.svg)
+      }
+    }
+    .side-swiper-infor{
+      @include defaultFont($font-s-12, $font-w-500, #7896BA);
+      word-break: keep-all;
+    }
+  }
+}
+
+.side-nav-wrap{
+  margin-top: 30px;
+  padding: 0 20px;
+  height: calc(100% - 247px);
+  overflow-y: auto;
+  .side-nav-list{
+    .side-nav-item{
+      padding: 12px;
+      margin-bottom: 8px;
+      button{
+        position: relative;
+        width: 100%;
+        text-align: left;
+        padding-right: 10px;
+        @include defaultFont($font-s-15, $font-w-500, #4B6586);
+        &:before{
+          content: '';
+          position: absolute;
+          top: 50%;
+          right: 0;
+          transform: translateY(-50%);
+          width: 6px;
+          height: 11px;
+          background: url(/assets/images/layout/side_nav_item_arr.svg)no-repeat center;
+          background-size: cover;
+        }
+      }
+      &:last-child{
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+.side-nav-footer{
+  margin-top: 20px;
+  padding: 0 20px 34px 20px;
+  .side-footer-list{
+    @include flex(0px);
+    justify-content: center;
+    align-items: center;
+    padding-top: 24px;
+    border-top: 2px solid #EDEDED;
+    .side-footer-item{
+      position: relative;
+      display: flex;
+      padding: 0 12px;
+      button{
+        font-family: 'Pretendard', sans-serif;
+        text-transform: uppercase;
+        @include defaultFont($font-s-13, $font-w-500, $font-c);
+        &.bold{
+          font-weight: $font-w-600;
+        }
+      }
+      &::before{
+        content: '';
+        position: absolute;
+        top: 50%;
+        right: 0;
+        transform: translateY(-50%);
+        width: 1px;
+        height: 10px;
+        background-color: #EDEDED;
+      }
+      &:last-child{
+        &::before{
+          display: none;
+        }
+      }
+    }
+  }
+}
+
+// footer
+footer{
+  padding: 24px 20px;
+  .footer-inner{
+    font-family: 'Pretendard', sans-serif;
+    text-align: center;
+    @include defaultFont($font-s-11, $font-w-400, #9F9F9F);
+  }
+}

src/styles/layout/_pop-common.scss

@@ -0,0 +1,53 @@
+@use '../abstracts' as *;
+
+.modal-popup{
+  position: fixed;
+  top: 0;
+  left: 0;
+  width:100%;
+  height:100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background:rgba(0,0,0,.75);
+  z-index:110000;
+  .modal-dialog {
+    position: relative;
+    display: flex;
+    align-items: center;
+    min-height: calc(100% - (24px * 2));
+    max-width: 860px;
+    z-index:111000;
+    margin: 24px auto;
+    pointer-events: none;
+    font-size: $font-s-14;
+    .modal-content{
+      flex:1;
+      position: relative; 
+      margin: 0 16px;
+      background-clip: padding-box;
+      background-color: $white-fff;
+      outline: 0 none;
+      pointer-events: auto;
+      .modal-header {
+        display: block;
+        position:relative;
+        padding:10px
+      }
+      .modal-body {
+        position: relative;
+        -ms-flex: 1 1 auto;
+        flex: 1 1 auto;
+        padding: 10px;
+      }
+      .modal-footer {
+        display: -ms-flexbox;
+        display: flex;
+        -ms-flex-align: center;
+        align-items: center;
+        -ms-flex-pack: end;
+        justify-content: flex-end;
+        padding: 10px;
+      }
+    }
+  }
+}

src/styles/publishpage.scss

@@ -0,0 +1,124 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
+
+$default-color: #2C2C2C;
+
+.l{text-align: left !important;}
+.c{text-align: center !important;}
+.r{text-align: right !important;}
+
+.red{color: #F00;}
+
+.publish-list {
+  font-family: "Noto Sans", sans-serif;
+  font-optical-sizing: auto;
+  font-style: normal;
+  font-variation-settings:"wdth" 100;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: 100vh;
+}
+.p-header{
+  padding: 20px;
+  background-color: $default-color;
+  text-align: center;
+  h1{
+    font-size: 34px;
+    color: #fff;
+    font-weight: 600;
+  }
+}
+
+.p-body{
+  margin-top: 30px;
+  flex: 1 1 auto;
+  .p-contents{
+    max-width: 1480px;
+    margin: 0 auto;
+  }
+}
+
+.p-guide{
+  border: 1px solid $default-color;
+  border-radius: 4px;
+  .p-guide-header{
+    font-size: 16px;
+    color: #fff;
+    background-color: $default-color;
+    padding: 10px 20px;
+    border-radius: 4px 4px 0 0;
+  }
+  .p-guide-content{
+    padding: 10px 20px;
+    p{
+      font-size: 14px;
+      margin-bottom: 5px;
+      span{
+        color: red;
+      }
+      &:last-child{
+        margin-bottom: 0;
+      }
+    }
+  }
+  .p-guide-inputcommon{
+    h3{
+      font-size: 16px;
+      margin: 15px 0 5px;
+      font-weight: 600;
+    }
+    a{
+      display: block;
+      border: 1px solid $default-color;
+      border-radius: 3px;
+      background-color: $default-color;
+      color: #fff;
+      height: 44px;
+      line-height: 40px;
+      padding: 0 10px;
+      text-align: center;
+      transition: all .15s ease-in-out;
+      &:hover{
+        background-color: #fff;
+        color: $default-color;
+      }
+    }
+  }
+}
+
+.p-list-wrap{
+  margin-top: 25px;
+  h2{
+    font-size: 22px;
+    font-weight: 500;
+  }
+  .p-list-table{
+    margin-top: 10px;
+    table{
+      width: 100%;
+      border-collapse: collapse;
+      table-layout: fixed;
+      th{
+        background-color: #eee;
+        color: #2C2C2C;
+        text-align: center;
+        font-size: 14px;
+        font-weight: 600;
+        padding: 10px;
+        border: 1px solid #999;
+      }
+      td{
+        border: 1px solid #999;
+        padding: 10px;
+        font-size: 12px;
+        a{
+          text-decoration: underline;
+          color: blue;
+          &:visited{
+            color: purple;
+          }
+        }
+      }
+    }
+  }
+}

src/styles/style.scss

@@ -0,0 +1,5 @@
+@use 'abstracts';
+@use 'base';
+@use 'layout';
+
+

src/styles/test.sass

@@ -1,8 +0,0 @@
-.test
-  color: red
-  font-size: 20px
-  font-weight: bold
-  text-align: center
-  margin: 0 auto
-  padding: 20px
-  border: 1px solid #000