Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
students
survey
Commits
2fa95951
Commit
2fa95951
authored
Jul 27, 2022
by
jang dong hyeok
Browse files
header 아이콘 추가 및 구현
parent
56d0596c
Changes
5
Hide whitespace changes
Inline
Side-by-side
frontend/src/commons/Header.tsx
View file @
2fa95951
...
...
@@ -10,13 +10,17 @@ export const Header = () => {
const
[
windowSize
,
setWindowSize
]
=
useState
({
width
:
window
.
innerWidth
,
height
:
window
.
innerHeight
,
});
const
[
isClicked
,
setIsClicked
]
=
useState
(
false
);
const
handleHeaderClick
=
()
=>
{
setIsClicked
(
!
isClicked
);
};
const
handleResize
=
()
=>
{
setWindowSize
({
width
:
window
.
innerWidth
,
height
:
window
.
innerHeight
,
});
};
useEffect
(()
=>
{
...
...
@@ -27,132 +31,85 @@ export const Header = () => {
},
[]);
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"
>
<
Link
to
=
"/"
className
=
"font-bold text-2xl text-themeColor"
>
Simple Survey Form
</
Link
>
{
windowSize
.
width
<
768
?
(
<
UserIcon
className
=
"h-7 w-7 absolute top-4 right-2"
onClick
=
""
/>
)
:
(
<
div
className
=
"md:flex items-center justify-end md:flex-1 lg:w-0"
>
{
user
.
isLoggedIn
?
(
<
div
className
=
"pt-2"
>
<
button
onClick
=
{
()
=>
logout
(()
=>
navigate
(
"
/
"
))
}
className
=
"font-bold text-gray-600 hover:text-themeColor mx-1 py-2 px-3 rounded-md"
>
로그아웃
<
div
className
=
"hidden md:flex items-center justify-end md:flex-1 lg:w-0"
>
{
user
.
isLoggedIn
?
(
<
div
className
=
"pt-2"
>
<
button
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
>
</
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"
>
<
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
>
</
Link
>
</
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"
>
<
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
>
</
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
className
=
"
text-gray-600 hover:text-themeColor
"
>
회원가입
</
button
>
</
Link
>
</
div
>
)
}
</
div
>
)
}
{
/* <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 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> */
}
)
)
:
(
<></>
)
}
</
button
>
</
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) => {
return
(
<
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"
>
{
data
.
title
?
data
.
title
:
"
제목없는 설문조사
"
}
</
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"
>
{
data
.
comment
?
data
.
comment
:
"
설명없는 설문조사
"
}
</
p
>
...
...
@@ -68,7 +68,7 @@ export const MySurveyCard = ({ data }: Props) => {
</
button
>
<
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
}
>
삭제
...
...
frontend/src/questions/Question.tsx
View file @
2fa95951
...
...
@@ -136,8 +136,8 @@ export const Question = ({
};
return
(
<
div
style
=
{
{
borderColor
:
save
?
"
#
58ACF
A
"
:
"
red
"
}
}
className
=
"flex flex-col container w-4/5 h-auto border-2 items-center m-3 py-2"
style
=
{
{
borderColor
:
save
?
"
#
0A8A8
A
"
:
"
red
"
}
}
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"
>
<
input
...
...
frontend/src/survey/EditSurvey.tsx
View file @
2fa95951
...
...
@@ -146,7 +146,7 @@ export const EditSurvey = () => {
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
>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment