Skip to content

GitLab

Commit 2fa95951 authored by jang dong hyeok's avatar jang dong hyeok
Browse files

header 아이콘 추가 및 구현

parent 56d0596c
Hide whitespace changes
Inline Side-by-side
frontend/src/commons/Header.tsx
View file @ 2fa95951
...@@ -10,13 +10,17 @@ export const Header = () => { ...@@ -10,13 +10,17 @@ export const Header = () => {
const [windowSize, setWindowSize] = useState({ const [windowSize, setWindowSize] = useState({
width: window.innerWidth, width: window.innerWidth,
height: window.innerHeight,
}); });
const [isClicked, setIsClicked] = useState(false);
const handleHeaderClick = () => {
setIsClicked(!isClicked);
};
const handleResize = () => { const handleResize = () => {
setWindowSize({ setWindowSize({
width: window.innerWidth, width: window.innerWidth,
height: window.innerHeight,
}); });
}; };
useEffect(() => { useEffect(() => {
...@@ -27,132 +31,85 @@ export const Header = () => { ...@@ -27,132 +31,85 @@ export const Header = () => {
}, []); }, []);
return ( return (
<div className="bg-white border-b-2 border-b-themeColor px-2 sm:px-4 py-2.5"> <div className="bg-white border-b-2 border-b-themeColor px-2 sm:px-4 py-3.5">
<div className="container flex flex-wrap place-content-center mx-auto"> <div className="container flex flex-wrap place-content-center mx-auto">
<Link to="/" className="font-bold text-2xl text-themeColor"> <Link to="/" className="font-bold text-2xl text-themeColor">
Simple Survey Form Simple Survey Form
</Link> </Link>
{windowSize.width < 768 ? (
<UserIcon className="h-7 w-7 absolute top-4 right-2" onClick="" /> <div className="hidden md:flex items-center justify-end md:flex-1 lg:w-0">
) : ( {user.isLoggedIn ? (
<div className="md:flex items-center justify-end md:flex-1 lg:w-0"> <div className="pt-2">
{user.isLoggedIn ? ( <button
<div className="pt-2"> onClick={() => logout(() => navigate("/"))}
<button className="font-bold text-gray-600 hover:text-themeColor mx-1 py-2 px-3 rounded-md"
onClick={() => logout(() => navigate("/"))} >
className="font-bold text-gray-600 hover:text-themeColor mx-1 py-2 px-3 rounded-md" 로그아웃
> </button>
로그아웃 <Link to="/profile">
<button className="font-bold text-gray-600 hover:text-themeColor mx-1 py-2 px-3 rounded-md">
프로필
</button>
</Link>
</div>
) : (
<div className="pt-2">
<Link to="/login">
<button className="font-bold text-gray-600 hover:text-themeColor mx-1 py-2 px-3 rounded-md">
로그인
</button>
</Link>
<Link to="/signup">
<button className="font-bold text-white hover:bg-blue-500 mx-1 py-2 px-3 bg-themeColor rounded-md ">
회원가입
</button> </button>
</Link>
</div>
)}
</div>
<button
className="flex md:hidden w-8 h-8 rounded-full absolute top-4 right-5"
onClick={handleHeaderClick}
>
<UserIcon />
{isClicked ? (
user.isLoggedIn ? (
<div className="fixed top-14 right-1 w-20 bg-white flex flex-col border-2 border-themeColor">
<Link to="/login">
<button
className="text-gray-600 hover:text-themeColor"
onClick={() => logout(() => navigate("/"))}
>
로그아웃
</button>
</Link>
<Link to="/profile"> <Link to="/profile">
<button className="font-bold text-gray-600 hover:text-themeColor mx-1 py-2 px-3 rounded-md"> <button className="text-gray-600 hover:text-themeColor">
프로필 프로필
</button> </button>
</Link> </Link>
</div> </div>
) : ( ) : (
<div className="pt-2"> <div className="fixed top-14 right-1 w-20 bg-white flex flex-col border-2 border-themeColor">
<Link to="/login"> <Link to="/login">
<button className="font-bold text-gray-600 hover:text-themeColor mx-1 py-2 px-3 rounded-md"> <button>
로그인 <div className="text-gray-600 hover:text-themeColor">
로그인
</div>
</button> </button>
</Link> </Link>
<Link to="/signup"> <Link to="/signup">
<button className="font-bold text-white hover:bg-blue-500 mx-1 py-2 px-3 bg-themeColor rounded-md "> <button className="text-gray-600 hover:text-themeColor">
회원가입 회원가입
</button> </button>
</Link> </Link>
</div> </div>
)} )
</div> ) : (
)} <></>
{/* <div className="flex items-center md:order-2"> )}
<button </button>
type="button"
className="flex mr-3 text-sm bg-gray-800 rounded-full md:mr-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
id="user-menu-button"
aria-expanded="false"
data-dropdown-toggle="user-dropdown"
data-dropdown-placement="bottom"
>
<span className="sr-only">Open user menu</span>
<img
className="w-8 h-8 rounded-full"
src="/docs/images/people/profile-picture-3.jpg"
alt="user photo"
/>
</button>
<div
className="hidden z-50 my-4 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 dark:divide-gray-600"
id="user-dropdown"
>
<div className="py-3 px-4">
<span className="block text-sm text-gray-900 dark:text-white">
Bonnie Green
</span>
<span className="block text-sm font-medium text-gray-500 truncate dark:text-gray-400">
name@flowbite.com
</span>
</div>
<ul className="py-1" aria-labelledby="user-menu-button">
<li>
<a
href="#"
className="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
>
Dashboard
</a>
</li>
<li>
<a
href="#"
className="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
>
Settings
</a>
</li>
<li>
<a
href="#"
className="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
>
Earnings
</a>
</li>
<li>
<a
href="#"
className="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
>
Sign out
</a>
</li>
</ul>
</div>
<button
data-collapse-toggle="mobile-menu-2"
type="button"
className="inline-flex items-center p-2 ml-1 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200"
aria-controls="mobile-menu-2"
aria-expanded="false"
>
<span className="sr-only">Open main menu</span>
<UserIcon className="w-7 h-7 absolute top-4 right-2" />
<svg
className="w-6 h-6"
aria-hidden="true"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
clip-rule="evenodd"
></path>
</svg>
</button>
</div> */}
</div> </div>
</div> </div>
); );
......
frontend/src/commons/asd.tsx 0 → 100644
View file @ 2fa95951
<nav className="bg-white border-gray-200 px-2 sm:px-4 py-2.5 rounded dark:bg-gray-900">
<div className="container flex flex-wrap justify-between items-center mx-auto">
<a href="https://flowbite.com/" className="flex items-center">
<img src="/docs/images/logo.svg" className="mr-3 h-6 sm:h-9" alt="Flowbite Logo">
<span className="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
</a>
<div className="flex items-center md:order-2">
<button type="button" className="flex mr-3 text-sm bg-gray-800 rounded-full md:mr-0 focus:ring-4 focus:ring-gray-300 " id="user-menu-button" aria-expanded="false" data-dropdown-toggle="user-dropdown" data-dropdown-placement="bottom">
<span className="sr-only">Open user menu</span>
<img className="w-8 h-8 rounded-full" src="/docs/images/people/profile-picture-3.jpg" alt="user photo">
</button>
<!-- Dropdown menu -->
<div className="z-50 my-4 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 dark:divide-gray-600 block" id="user-dropdown" data-popper-reference-hidden="" data-popper-escaped="" data-popper-placement="bottom" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(644.8px, 74.4px, 0px);">
<div className="py-3 px-4">
<span className="block text-sm text-gray-900 ">Bonnie Green</span>
<span className="block text-sm font-medium text-gray-500 truncate">name@flowbite.com</span>
</div>
<ul className="py-1" aria-labelledby="user-menu-button">
<li>
<a href="#" className="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 ">Dashboard</a>
</li>
<li>
<a href="#" className="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 ">Settings</a>
</li>
<li>
<a href="#" className="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 ">Earnings</a>
</li>
<li>
<a href="#" className="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 ">Sign out</a>
</li>
</ul>
</div>
<button data-collapse-toggle="mobile-menu-2" type="button" className="inline-flex items-center p-2 ml-1 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mobile-menu-2" aria-expanded="false">
<span className="sr-only">Open main menu</span>
<svg className="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
</button>
</div>
<div className="hidden justify-between items-center w-full md:flex md:w-auto md:order-1" id="mobile-menu-2">
<ul className="flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium">
<li>
<a href="#" className="block py-2 pr-4 pl-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white" aria-current="page">Home</a>
</li>
<li>
<a href="#" className="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">About</a>
</li>
<li>
<a href="#" className="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Services</a>
</li>
<li>
<a href="#" className="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Pricing</a>
</li>
<li>
<a href="#" className="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
frontend/src/profile/MySurveyCard.tsx
View file @ 2fa95951
...@@ -47,12 +47,12 @@ export const MySurveyCard = ({ data }: Props) => { ...@@ -47,12 +47,12 @@ export const MySurveyCard = ({ data }: Props) => {
return ( return (
<div className="w-40 h-48 md:w-52 md:h-60 rounded border-2 hover:border-2 hover:border-themeColor"> <div className="w-40 h-48 md:w-52 md:h-60 rounded border-2 hover:border-2 hover:border-themeColor">
<button className="w-full" onClick={editSurvey}> <button className="w-full pt-1" onClick={editSurvey}>
<p className="font-bold"> <p className="font-bold">
{data.title ? data.title : "제목없는 설문조사"} {data.title ? data.title : "제목없는 설문조사"}
</p> </p>
<div className="h-24 md:h-36 p-3 text-ellipsis overflow-y-scroll"> <div className="h-24 md:h-36 p-2.5 text-ellipsis overflow-y-scroll">
<p className="text-gray-700"> <p className="text-gray-700">
{data.comment ? data.comment : "설명없는 설문조사"} {data.comment ? data.comment : "설명없는 설문조사"}
</p> </p>
...@@ -68,7 +68,7 @@ export const MySurveyCard = ({ data }: Props) => { ...@@ -68,7 +68,7 @@ export const MySurveyCard = ({ data }: Props) => {
</button> </button>
<button <button
type="button" type="button"
className="bg-themeColor rounded text-white py-1 px-1.5 ml-1 " className="bg-themeColor rounded text-white py-1 px-1.5 ml-1 mr-1.5"
onClick={deleteSurvey} onClick={deleteSurvey}
> >
삭제 삭제
......
frontend/src/questions/Question.tsx
View file @ 2fa95951
...@@ -136,8 +136,8 @@ export const Question = ({ ...@@ -136,8 +136,8 @@ export const Question = ({
}; };
return ( return (
<div <div
style={{ borderColor: save ? "#58ACFA" : "red" }} style={{ borderColor: save ? "#0A8A8A" : "red" }}
className="flex flex-col container w-4/5 h-auto border-2 items-center m-3 py-2" className="flex flex-col container w-4/5 h-auto border-2 items-center m-3 py-2 rounded-lg"
> >
<div className="flex h-16 w-full place-content-between items-center"> <div className="flex h-16 w-full place-content-between items-center">
<input <input
......
frontend/src/survey/EditSurvey.tsx
View file @ 2fa95951
...@@ -146,7 +146,7 @@ export const EditSurvey = () => { ...@@ -146,7 +146,7 @@ export const EditSurvey = () => {
deleteQuestion={deleteQuestion} deleteQuestion={deleteQuestion}
/> />
))} ))}
<div className="flex w-4/5 content-center justify-center border-2 border-black h-8 mt-3"> <div className="flex w-4/5 content-center justify-center border-2 border-addQuestionColor h-8 mt-3 rounded-lg ">
<button type="button" onClick={addQuestion}> <button type="button" onClick={addQuestion}>
질문 추가 질문 추가
</button> </button>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment