Feature/main page 메인 페이지 퍼블리싱

[2NNS-V]

구현한 기능

• input 컴포넌트 추가
• 메인 페이지 퍼블리싱
• 사이드바 추가

논의하고 싶은 내용

• 사이드바 메뉴 클릭 시 페이지 이동

기타

• 수정사항
• 사이드바 css 수정
• Input 창 height 수정
• 학과 input -> dropdown 으로 변경

[toothlessdev]

<svg> 로 시작하는 부분을 복사해서 assets 디렉토리에 .svg 확장자로 파일을 만들어서 붙여놓고, 이미지 엘리먼트 처럼 사용하시면 돼요!

예)

<svg xmlns="http://www.w3.org/2000/svg" width="30" height="32" fill="none" onClick = {handleSideBar}>
            <g stroke="#37CDCD" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" clip-path="url(#a)" filter="url(#b)">
                <path d="m22.5 7.5-15 15M7.5 7.5l15 15"/>
            </g>
            <defs>
                <clipPath id="a">
                    <path fill="#fff" d="M0 0h30v30H0z"/>
                </clipPath>
                <filter id="b" width="38" height="38" x="-4" y="0" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
                    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
                    <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
                    <feOffset dy="4"/>
                    <feGaussianBlur stdDeviation="2"/>
                    <feComposite in2="hardAlpha" operator="out"/>
                    <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
                    <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_82_77"/>
                    <feBlend in="SourceGraphic" in2="effect1_dropShadow_82_77" result="shape"/>
                </filter>
            </defs>
        </svg>

import icon from "@/assets/example.svg";
<img src={icon}/>

[2NNS-V]

Member

<svg> 로 시작하는 부분을 복사해서 assets 디렉토리에 .svg 확장자로 파일을 만들어서 붙여놓고, 이미지 엘리먼트 처럼 사용하시면 돼요!

예)

<svg xmlns="http://www.w3.org/2000/svg" width="30" height="32" fill="none" onClick = {handleSideBar}>
            <g stroke="#37CDCD" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" clip-path="url(#a)" filter="url(#b)">
                <path d="m22.5 7.5-15 15M7.5 7.5l15 15"/>
            </g>
            <defs>
                <clipPath id="a">
                    <path fill="#fff" d="M0 0h30v30H0z"/>
                </clipPath>
                <filter id="b" width="38" height="38" x="-4" y="0" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
                    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
                    <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
                    <feOffset dy="4"/>
                    <feGaussianBlur stdDeviation="2"/>
                    <feComposite in2="hardAlpha" operator="out"/>
                    <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
                    <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_82_77"/>
                    <feBlend in="SourceGraphic" in2="effect1_dropShadow_82_77" result="shape"/>
                </filter>
            </defs>
        </svg>

import icon from "@/assets/example.svg";
<img src={icon}/>

merge 된거 오류 해결하고 svg 분리하였습니다

[toothlessdev]

LGTM!