Skip to content

GitLab

Commit 1cec063b authored by Jiwon Yoon's avatar Jiwon Yoon
Browse files

header icon 변경

parent bfa63a98
Hide whitespace changes
Inline Side-by-side
frontend/src/commons/Header.tsx
View file @ 1cec063b
import React, { useState } from "react"; import React, { useState } from "react";
import { Link, useNavigate } from "react-router-dom"; import { Link, useNavigate } from "react-router-dom";
import { useAuth } from "../auth"; import { useAuth } from "../auth";
import { UserIcon } from "../icons"; import { LoginIcon, LogoutIcon, SurveyIcon, UserIcon } from "../icons";
export const Header = () => { export const Header = () => {
const { user, logout } = useAuth(); const { user, logout } = useAuth();
const navigate = useNavigate(); const navigate = useNavigate();
const [isClicked, setIsClicked] = useState(false);
const handleHeaderClick = () => {
setIsClicked(!isClicked);
};
return ( return (
<div className="bg-white border-b-2 border-b-themeColor px-2 sm:px-4 py-3.5"> <div className="flex items-center justify-between bg-white border-b-2 border-b-themeColor py-3.5">
<div className="container flex flex-wrap md:justify-start place-content-center mx-auto"> <Link to="/" className="font-bold text-2xl text-themeColor px-4">
<Link to="/" className="font-bold text-2xl text-themeColor text-start"> Simple Survey
Simple Survey </Link>
</Link> <div className="hidden md:flex">
<div className="absolute right-4 top-2 hidden md:flex items-center justify-end md:flex-1"> {user.isLoggedIn ? (
{user.isLoggedIn ? ( <div>
<div> <button
<button onClick={() => logout(() => navigate("/"))}
onClick={() => logout(() => navigate("/"))} className="font-bold text-gray-600 hover:text-themeColor mx-1 py-2 px-3 rounded-md"
className="font-bold text-gray-600 hover:text-themeColor mx-1 py-2 px-3 rounded-md" >
> 로그아웃
로그아웃 </button>
<Link to="/surveys">
<button className="font-bold text-gray-600 hover:text-themeColor mx-1 py-2 px-3 rounded-md">
프로필
</button>
</Link>
</div>
) : (
<div>
<Link to="/login">
<button className="font-bold text-gray-600 hover:text-themeColor mx-1 py-2 px-3 rounded-md">
로그인
</button> </button>
<Link to="/surveys"> </Link>
<button className="font-bold text-gray-600 hover:text-themeColor mx-1 py-2 px-3 rounded-md"> <Link to="/signup">
프로필 <button className="font-bold text-white hover:bg-themeColor2 mx-1 py-2 px-3 bg-themeColor rounded-md ">
</button> 회원가입
</Link> </button>
</div> </Link>
) : ( </div>
<div> )}
<Link to="/login"> </div>
<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-themeColor2 mx-1 py-2 px-3 bg-themeColor rounded-md ">
회원가입
</button>
</Link>
</div>
)}
</div>
<button <div className="md:hidden">
className="flex md:hidden w-8 h-8 rounded-full absolute top-4 right-5" {user.isLoggedIn ? (
onClick={handleHeaderClick} <div className="flex px-4">
> <button
<UserIcon /> onClick={() => logout(() => navigate("/"))}
{isClicked ? ( className="mr-3"
user.isLoggedIn ? ( >
<div className="fixed top-14 right-1 w-48 bg-themeColor3 flex flex-col rounded-lg"> <LogoutIcon className="h-7 w-7" />
<div className="p-3">안녕하세요.</div> </button>
<div className="pl-3 pr-3 pb-3"> <Link to="/surveys">
만들어진 설문을 확인하시려면 프로필을 눌러주세요. <UserIcon className="h-7 w-7" />
</div> </Link>
<div className="flex border-themeColor border-t-2"> </div>
<Link to="/login"> ) : (
<div <div className="flex px-4">
className="p-2 w-24 border-r-2 border-themeColor text-center text-l text-gray-600 hover:text-themeColor" <Link to="/login">
onClick={() => logout(() => navigate("/"))} <LoginIcon className="h-7 w-7" />
> </Link>
로그아웃 </div>
</div> )}
</Link>
<Link to="/surveys">
<div className="p-2 w-24 text-center text-l text-gray-600 hover:text-themeColor">
프로필
</div>
</Link>
</div>
</div>
) : (
<div className="fixed top-14 right-1 w-48 bg-themeColor3 flex flex-col rounded-lg">
<div className="p-3">로그아웃 상태입니다.</div>
<div className="pl-3 pr-3 pb-3">
설문지를 만드시려면 로그인해주세요.
</div>
<div className="flex border-themeColor border-t-2">
<Link to="/login">
<div className="p-2 w-24 border-r-2 border-themeColor justify-center text-l text-gray-600 hover:text-themeColor">
로그인
</div>
</Link>
<Link to="/signup">
<div className="p-2 w-24 justify-center text-l text-gray-600 hover:text-themeColor">
회원가입
</div>
</Link>
</div>
</div>
)
) : (
<></>
)}
</button>
</div> </div>
</div> </div>
); );
......
frontend/src/icons/LoginIcon.tsx 0 → 100644
View file @ 1cec063b
import React, { FC, ReactNode } from "react";
export const LoginIcon = ({ ...props }) => {
return (
// <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" {...props}>
// <path d="M222.7 32.15C227.7 49.08 218.1 66.9 201.1 71.94C121.8 95.55 64 169.1 64 255.1C64 362 149.1 447.1 256 447.1C362 447.1 448 362 448 255.1C448 169.1 390.2 95.55 310.9 71.94C293.9 66.9 284.3 49.08 289.3 32.15C294.4 15.21 312.2 5.562 329.1 10.6C434.9 42.07 512 139.1 512 255.1C512 397.4 397.4 511.1 256 511.1C114.6 511.1 0 397.4 0 255.1C0 139.1 77.15 42.07 182.9 10.6C199.8 5.562 217.6 15.21 222.7 32.15V32.15z" />
// </svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" {...props}>
<path d="M352 96h64c17.7 0 32 14.3 32 32V384c0 17.7-14.3 32-32 32H352c-17.7 0-32 14.3-32 32s14.3 32 32 32h64c53 0 96-43 96-96V128c0-53-43-96-96-96H352c-17.7 0-32 14.3-32 32s14.3 32 32 32zm-7.5 177.4c4.8-4.5 7.5-10.8 7.5-17.4s-2.7-12.9-7.5-17.4l-144-136c-7-6.6-17.2-8.4-26-4.6s-14.5 12.5-14.5 22v72H32c-17.7 0-32 14.3-32 32v64c0 17.7 14.3 32 32 32H160v72c0 9.6 5.7 18.2 14.5 22s19 2 26-4.6l144-136z" />
</svg>
);
};
frontend/src/icons/LogoutIcon.tsx 0 → 100644
View file @ 1cec063b
import React, { FC, ReactNode } from "react";
export const LogoutIcon = ({ ...props }) => {
return (
// <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" {...props}>
// <path d="M222.7 32.15C227.7 49.08 218.1 66.9 201.1 71.94C121.8 95.55 64 169.1 64 255.1C64 362 149.1 447.1 256 447.1C362 447.1 448 362 448 255.1C448 169.1 390.2 95.55 310.9 71.94C293.9 66.9 284.3 49.08 289.3 32.15C294.4 15.21 312.2 5.562 329.1 10.6C434.9 42.07 512 139.1 512 255.1C512 397.4 397.4 511.1 256 511.1C114.6 511.1 0 397.4 0 255.1C0 139.1 77.15 42.07 182.9 10.6C199.8 5.562 217.6 15.21 222.7 32.15V32.15z" />
// </svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" {...props}>
<path d="M160 96c17.7 0 32-14.3 32-32s-14.3-32-32-32H96C43 32 0 75 0 128V384c0 53 43 96 96 96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H96c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32h64zM504.5 273.4c4.8-4.5 7.5-10.8 7.5-17.4s-2.7-12.9-7.5-17.4l-144-136c-7-6.6-17.2-8.4-26-4.6s-14.5 12.5-14.5 22v72H192c-17.7 0-32 14.3-32 32l0 64c0 17.7 14.3 32 32 32H320v72c0 9.6 5.7 18.2 14.5 22s19 2 26-4.6l144-136z" />
</svg>
);
};
frontend/src/icons/SurveyIcon.tsx 0 → 100644
View file @ 1cec063b
import React, { FC, ReactNode } from "react";
export const SurveyIcon = ({ ...props }) => {
return (
// <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" {...props}>
// <path d="M222.7 32.15C227.7 49.08 218.1 66.9 201.1 71.94C121.8 95.55 64 169.1 64 255.1C64 362 149.1 447.1 256 447.1C362 447.1 448 362 448 255.1C448 169.1 390.2 95.55 310.9 71.94C293.9 66.9 284.3 49.08 289.3 32.15C294.4 15.21 312.2 5.562 329.1 10.6C434.9 42.07 512 139.1 512 255.1C512 397.4 397.4 511.1 256 511.1C114.6 511.1 0 397.4 0 255.1C0 139.1 77.15 42.07 182.9 10.6C199.8 5.562 217.6 15.21 222.7 32.15V32.15z" />
// </svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" {...props}>
<path d="M448 96c0-35.3-28.7-64-64-64L64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320zM256 160c0 17.7-14.3 32-32 32l-96 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l96 0c17.7 0 32 14.3 32 32zm64 64c17.7 0 32 14.3 32 32s-14.3 32-32 32l-192 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l192 0zM192 352c0 17.7-14.3 32-32 32l-32 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l32 0c17.7 0 32 14.3 32 32z" />
</svg>
);
};
frontend/src/icons/UserIcon.tsx
View file @ 1cec063b
...@@ -5,8 +5,8 @@ export const UserIcon = ({ ...props }) => { ...@@ -5,8 +5,8 @@ export const UserIcon = ({ ...props }) => {
// <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" {...props}> // <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" {...props}>
// <path d="M222.7 32.15C227.7 49.08 218.1 66.9 201.1 71.94C121.8 95.55 64 169.1 64 255.1C64 362 149.1 447.1 256 447.1C362 447.1 448 362 448 255.1C448 169.1 390.2 95.55 310.9 71.94C293.9 66.9 284.3 49.08 289.3 32.15C294.4 15.21 312.2 5.562 329.1 10.6C434.9 42.07 512 139.1 512 255.1C512 397.4 397.4 511.1 256 511.1C114.6 511.1 0 397.4 0 255.1C0 139.1 77.15 42.07 182.9 10.6C199.8 5.562 217.6 15.21 222.7 32.15V32.15z" /> // <path d="M222.7 32.15C227.7 49.08 218.1 66.9 201.1 71.94C121.8 95.55 64 169.1 64 255.1C64 362 149.1 447.1 256 447.1C362 447.1 448 362 448 255.1C448 169.1 390.2 95.55 310.9 71.94C293.9 66.9 284.3 49.08 289.3 32.15C294.4 15.21 312.2 5.562 329.1 10.6C434.9 42.07 512 139.1 512 255.1C512 397.4 397.4 511.1 256 511.1C114.6 511.1 0 397.4 0 255.1C0 139.1 77.15 42.07 182.9 10.6C199.8 5.562 217.6 15.21 222.7 32.15V32.15z" />
// </svg> // </svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" {...props}> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" {...props}>
<path d="M256 112c-48.6 0-88 39.4-88 88C168 248.6 207.4 288 256 288s88-39.4 88-88C344 151.4 304.6 112 256 112zM256 240c-22.06 0-40-17.95-40-40C216 177.9 233.9 160 256 160s40 17.94 40 40C296 222.1 278.1 240 256 240zM256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 464c-46.73 0-89.76-15.68-124.5-41.79C148.8 389 182.4 368 220.2 368h71.69c37.75 0 71.31 21.01 88.68 54.21C345.8 448.3 302.7 464 256 464zM416.2 388.5C389.2 346.3 343.2 320 291.8 320H220.2c-51.36 0-97.35 26.25-124.4 68.48C65.96 352.5 48 306.3 48 256c0-114.7 93.31-208 208-208s208 93.31 208 208C464 306.3 446 352.5 416.2 388.5z" /> <path d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0S96 57.3 96 128s57.3 128 128 128zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z" />
</svg> </svg>
); );
}; };
frontend/src/icons/index.ts
View file @ 1cec063b
export { SpinnerIcon } from "./SpinnerIcon"; export { SpinnerIcon } from "./SpinnerIcon";
export { DuplicateIcon } from "./DuplicateIcon"; export { DuplicateIcon } from "./DuplicateIcon";
export { UserIcon } from "./UserIcon"; export { UserIcon } from "./UserIcon";
export { LoginIcon } from "./LoginIcon";
export { LogoutIcon } from "./LogoutIcon";
export { SurveyIcon } from "./SurveyIcon";
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