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
26f7292f
Commit
26f7292f
authored
Jul 25, 2022
by
Jiwon Yoon
Browse files
Merge branch 'DH7' into develop0725
parents
578446f7
7a92b56a
Changes
18
Show whitespace changes
Inline
Side-by-side
frontend/src/answers/ACheckboxForm.tsx
View file @
26f7292f
...
...
@@ -35,7 +35,7 @@ export const ACheckboxForm = ({ element, answerQuestion }: Props) => {
return
(
<
div
className
=
"flex w-full gap-2 justify-around my-3"
>
{
element
.
content
.
choices
.
map
((
choice
)
=>
(
<
div
>
<
div
key
=
{
choice
.
value
}
>
<
input
className
=
"mr-2"
type
=
"checkbox"
...
...
frontend/src/answers/ADropdownForm.tsx
View file @
26f7292f
...
...
@@ -22,11 +22,13 @@ export const ADropdownForm = ({ element, answerQuestion }: Props) => {
return
(
<
div
className
=
"flex flex-col container w-11/12 h-auto m-3 py-3"
>
<
select
className
=
"py-2 w-48 hover:bg-gray-200 border border-black rounded"
className
=
"
place-self-center
py-2 w-48 hover:bg-gray-200 border border-black rounded"
onChange
=
{
handleChange
}
>
{
element
.
content
.
choices
.
map
((
choice
)
=>
(
<
option
value
=
{
choice
.
text
}
>
{
choice
.
text
}
</
option
>
<
option
key
=
{
choice
.
value
}
value
=
{
choice
.
text
}
>
{
choice
.
text
}
</
option
>
))
}
</
select
>
</
div
>
...
...
frontend/src/answers/AQuestion.tsx
View file @
26f7292f
...
...
@@ -53,7 +53,7 @@ export const AQuestion = ({ question, answerQuestion, addFiles }: Props) => {
return
(
<
div
className
=
"flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-4"
>
<
div
className
=
"flex
flexgi-row
my-1 w-11/12 place-content-between items-center"
>
<
div
className
=
"flex my-1 w-11/12 place-content-between items-center"
>
<
div
className
=
"text-xl font-bold"
>
{
question
.
title
}
</
div
>
{
question
.
isRequired
?
(
<
div
className
=
"text-xs text-red-600"
>
* 필수질문
</
div
>
...
...
frontend/src/answers/ARadioForm.tsx
View file @
26f7292f
...
...
@@ -22,7 +22,7 @@ export const ARadioForm = ({ element, answerQuestion }: Props) => {
return
(
<
div
className
=
"flex w-full gap-2 justify-around my-3"
>
{
element
.
content
.
choices
.
map
((
choice
)
=>
(
<
div
key
=
{
choice
.
text
}
>
<
div
key
=
{
choice
.
value
}
>
<
input
className
=
"mr-2"
type
=
"radio"
...
...
frontend/src/answers/ARatingForm.tsx
View file @
26f7292f
...
...
@@ -23,10 +23,10 @@ export const ARatingForm = ({ element, answerQuestion }: Props) => {
console
.
log
(
answerQuestion
);
}
return
(
<
div
className
=
"flex w-full justify-center my-3"
>
<
div
className
=
"flex w-full justify-
items-
center my-3
overflow-x-scroll
"
>
<
label
className
=
"mt-3"
>
{
element
.
content
.
minRateDescription
}
</
label
>
{
element
.
content
.
choices
.
map
((
choice
)
=>
(
<
div
className
=
"flex gap-4 mx-1"
>
<
div
className
=
"flex gap-4 mx-1"
key
=
{
choice
.
value
}
>
<
button
type
=
"button"
className
=
"border border-themeColor rounded-full w-12 h-12 text-center hover:bg-slate-300"
...
...
frontend/src/answers/AnswerSurveyForm.tsx
View file @
26f7292f
import
React
,
{
FormEvent
,
useEffect
,
useRef
,
useState
}
from
"
react
"
;
import
{
Link
,
useNavigate
}
from
"
react-router-dom
"
;
import
{
useParams
}
from
"
react-router-dom
"
;
import
{
useNavigate
,
useParams
}
from
"
react-router-dom
"
;
import
{
surveyApi
,
answerApi
}
from
"
../apis
"
;
import
{
catchErrors
}
from
"
../helpers
"
;
import
{
Question
}
from
"
../questions
"
;
import
{
AnswerSurveyType
,
AnswerType
,
SurveyType
}
from
"
../types
"
;
import
{
AQuestion
}
from
"
./AQuestion
"
;
...
...
frontend/src/commons/Header.tsx
View file @
26f7292f
import
React
from
"
react
"
;
import
React
,
{
useEffect
,
useState
}
from
"
react
"
;
import
{
Link
,
useLocation
,
useNavigate
}
from
"
react-router-dom
"
;
import
{
useAuth
}
from
"
../auth/auth.context
"
;
import
{
UserIcon
}
from
"
../icons/UserIcon
"
;
export
const
Header
=
()
=>
{
const
{
user
,
logout
}
=
useAuth
();
const
location
=
useLocation
();
const
navigate
=
useNavigate
();
const
[
windowSize
,
setWindowSize
]
=
useState
({
width
:
window
.
innerWidth
,
height
:
window
.
innerHeight
,
});
const
handleResize
=
()
=>
{
setWindowSize
({
width
:
window
.
innerWidth
,
height
:
window
.
innerHeight
,
});
};
useEffect
(()
=>
{
window
.
addEventListener
(
"
resize
"
,
handleResize
);
return
()
=>
{
window
.
removeEventListener
(
"
resize
"
,
handleResize
);
};
},
[]);
return
(
<
div
className
=
"bg-white border-b-2 border-b-themeColor px-2 sm:px-4 py-2.5"
>
<
div
className
=
"container flex flex-wrap
justify-between items
-center mx-auto"
>
<
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
>
<
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"
...
...
@@ -29,7 +51,7 @@ export const Header = () => {
</
Link
>
</
div
>
)
:
(
<
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"
>
로그인
...
...
@@ -43,6 +65,94 @@ export const Header = () => {
</
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> */
}
</
div
>
</
div
>
);
...
...
frontend/src/home/Home.tsx
View file @
26f7292f
...
...
@@ -16,7 +16,7 @@ export const Home = () => {
return
(
<
div
className
=
"flex flex-col place-items-center"
>
<
div
className
=
"justify-end text-center text-3xl text-black h-16 mt-12"
>
<
div
className
=
"justify-end text-center
text-2xl md:
text-3xl text-black h-16 mt-12"
>
가장 쉽게 설문지를 만드세요!
</
div
>
<
div
className
=
"flex flex-col place-items-center container"
>
...
...
frontend/src/icons/UserIcon.tsx
0 → 100644
View file @
26f7292f
import
React
,
{
FC
,
ReactNode
}
from
"
react
"
;
export
const
UserIcon
=
({
...
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
=
"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"
/>
</
svg
>
);
};
frontend/src/profile/MySurveyCard.tsx
View file @
26f7292f
...
...
@@ -46,32 +46,28 @@ export const MySurveyCard = ({ data }: Props) => {
}
return
(
<
div
className
=
"w-
52
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
}
>
<
div
className
=
"h-36 p-5"
>
<
p
className
=
"text-gray-700"
>
{
data
.
comment
?
data
.
comment
:
"
설명없는 설문조사
"
}
</
p
>
</
div
>
<
div
className
=
"flex flex-col h-12 place-items-center"
>
<
p
className
=
"font-bold"
>
{
data
.
title
?
data
.
title
:
"
제목없는 설문조사
"
}
</
p
>
<
div
className
=
"h-24 md:h-36 p-3 text-ellipsis overflow-y-scroll"
>
<
p
className
=
"text-gray-700"
>
{
data
.
comment
?
data
.
comment
:
"
설명없는 설문조사
"
}
</
p
>
</
div
>
<
p
className
=
"text-gray-500 text-sm"
>
{
data
.
updatedAt
?.
substring
(
0
,
10
)
}
</
p
>
</
div
>
</
button
>
<
div
className
=
"flex justify-end pt-1"
>
<
label
className
=
"pt-1"
>
링크복사
</
label
>
<
button
className
=
""
onClick
=
{
copyLink
}
>
<
img
src
=
{
CopyImg
}
alt
=
"copy"
></
img
>
<
div
className
=
"flex justify-end pt-1 pr-1"
>
<
button
className
=
"flex place-self-center"
onClick
=
{
copyLink
}
>
링크복사
<
img
src
=
{
CopyImg
}
alt
=
"copy"
></
img
>
</
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
"
onClick
=
{
deleteSurvey
}
>
삭제
...
...
frontend/src/profile/Profile.tsx
View file @
26f7292f
...
...
@@ -36,12 +36,12 @@ export const Profile = () => {
return
(
<
div
className
=
"flex flex-col items-center"
>
<
div
className
=
"mt-10 text-xl font-bold"
>
나의 설문조사
</
div
>
<
div
className
=
"grid grid-cols-
1
md:grid-cols-
4 sm
:grid-cols-
2
gap-4 mt-6"
>
<
div
className
=
"grid grid-cols-
2
md:grid-cols-
3 lg
:grid-cols-
4
gap-4 mt-6"
>
<
button
onClick
=
{
createSurvey
}
className
=
"flex h-60 w-52 items-center border-2 border-themeColor font-bold bg-gray-200 hover:bg-themeColor rounded-lg "
className
=
"flex
w-40 h-48 md:
h-60
md:
w-52 items-center border-2 border-themeColor font-bold bg-gray-200 hover:bg-themeColor rounded-lg "
>
<
div
className
=
"text-center px-6 py-6 font-bold text-gray-500 place-items-center hover:text-white"
>
<
div
className
=
"text-center
md:
px-6
md:
py-6
font-xs md:
font-bold text-gray-500 place-items-center hover:text-white"
>
CREATE NEW SURVEY!
</
div
>
</
button
>
...
...
frontend/src/questions/CheckboxForm.tsx
View file @
26f7292f
...
...
@@ -32,7 +32,7 @@ export const CheckboxForm = ({ element, handleQuestion, save }: Props) => {
<>
<
div
id
=
"content"
className
=
"mt-4 p-5"
>
{
choices
.
map
((
choice
:
any
,
index
:
number
)
=>
(
<
div
className
=
"m-5"
>
<
div
className
=
"m-5"
key
=
{
choice
.
value
}
>
<
input
type
=
"checkbox"
disabled
></
input
>
<
input
id
=
{
`
${
index
}
`
}
...
...
frontend/src/questions/DropdownForm.tsx
View file @
26f7292f
...
...
@@ -30,14 +30,14 @@ export const DropdownForm = ({ element, handleQuestion, save }: Props) => {
}
return
(
<>
<
div
id
=
"content"
className
=
"
flex-row
mt-4 p-5"
>
<
div
id
=
"content"
className
=
"mt-4 p-5"
>
<
select
className
=
"mr-3"
>
{
choices
.
map
((
choice
:
any
,
index
:
number
)
=>
(
<
option
>
{
choice
.
text
}
</
option
>
<
option
key
=
{
choice
.
value
}
>
{
choice
.
text
}
</
option
>
))
}
</
select
>
{
choices
.
map
((
choice
:
any
,
index
:
number
)
=>
(
<
div
className
=
"my-5"
>
<
div
key
=
{
choice
.
value
}
className
=
"my-5"
>
<
input
id
=
{
`
${
index
}
`
}
type
=
"text"
...
...
frontend/src/questions/Question.tsx
View file @
26f7292f
...
...
@@ -156,7 +156,7 @@ export const Question = ({
onChange
=
{
handleSelect
}
disabled
=
{
save
}
value
=
{
element
.
type
}
className
=
"w-36 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-themeColor w-full mr-3 p-2.5"
className
=
"w-
32 md:w-
36 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-themeColor w-full mr-3 p-2.5"
>
{
Array
.
from
(
QUESTION_TYPES
.
entries
()).
map
(([
key
,
value
])
=>
(
<
option
...
...
frontend/src/questions/RadioForm.tsx
View file @
26f7292f
...
...
@@ -33,7 +33,7 @@ export const RadioForm = ({ element, handleQuestion, save }: Props) => {
<>
<
div
id
=
"content"
className
=
"mt-4 p-5"
>
{
choices
.
map
((
choice
:
any
,
index
:
number
)
=>
(
<
div
key
=
{
index
}
className
=
"m-5"
>
<
div
key
=
{
choice
.
value
}
className
=
"m-5"
>
<
input
type
=
"radio"
disabled
></
input
>
<
input
id
=
{
`
${
index
}
`
}
...
...
frontend/src/questions/RatingForm.tsx
View file @
26f7292f
...
...
@@ -38,11 +38,11 @@ export const RatingForm = ({ element, handleQuestion, save }: Props) => {
return
(
<>
<
div
className
=
"flex place-content-between items-center
p-5
"
>
<
div
className
=
"flex place-content-between items-center
w-full p-5 overflow-x-scroll
"
>
<
input
name
=
"minRateDescription"
className
=
"border-b-2 text-center"
size
=
{
10
}
size
=
{
3
}
placeholder
=
"비동의"
value
=
{
element
.
content
.
minRateDescription
}
onChange
=
{
handleContent
}
...
...
@@ -50,6 +50,7 @@ export const RatingForm = ({ element, handleQuestion, save }: Props) => {
></
input
>
{
choices
.
map
((
choice
:
any
,
index
:
number
)
=>
(
<
input
key
=
{
choice
.
value
}
name
=
"text"
id
=
{
`
${
index
}
`
}
type
=
"text"
...
...
@@ -64,7 +65,7 @@ export const RatingForm = ({ element, handleQuestion, save }: Props) => {
<
input
name
=
"maxRateDescription"
className
=
"border-b-2 text-center"
size
=
{
10
}
size
=
{
3
}
placeholder
=
"동의"
value
=
{
element
.
content
.
maxRateDescription
}
onChange
=
{
handleContent
}
...
...
frontend/src/survey/Accordion.tsx
View file @
26f7292f
...
...
@@ -28,7 +28,11 @@ const Accordion = ({ question }: AccordionProps) => {
return
(
<
div
className
=
"p-1"
>
<
div
onClick
=
{
HandleOpening
}
>
<
div
className
=
{
"
bg-themeColor p-4 flex justify-between text-white
"
}
>
<
div
className
=
{
"
bg-themeColor rounded-r-lg p-4 flex justify-between text-white
"
}
>
<
h4
className
=
"font-semibold"
>
{
question
.
title
}
</
h4
>
{
isOpened
?
"
△
"
:
"
▽
"
}
</
div
>
...
...
frontend/src/survey/EditResultButton.tsx
View file @
26f7292f
...
...
@@ -14,32 +14,54 @@ export const EditResultButton = () => {
style
=
{
({
isActive
})
=>
isActive
?
{
width
:
"
140px
"
,
color
:
"
white
"
,
backgroundColor
:
"
#58ACFA
"
,
borderTopLeftRadius
:
"
25px
"
,
borderBottomLeftRadius
:
"
25px
"
,
textAlign
:
"
center
"
,
fontWeight
:
"
bold
"
,
fontSize
:
"
20px
"
,
}
:
{
borderBottomWidth
:
"
1px
"
,
width
:
"
140px
"
,
borderWidth
:
"
1px
"
,
borderColor
:
"
#58ACFA
"
,
borderTopLeftRadius
:
"
25px
"
,
borderBottomLeftRadius
:
"
25px
"
,
textAlign
:
"
center
"
,
fontSize
:
"
18px
"
,
}
}
>
<
div
className
=
"
text-xl
m-3 "
>
설문지 수정
</
div
>
<
div
className
=
"m-3 "
>
설문지 수정
</
div
>
</
NavLink
>
<
NavLink
to
=
{
`/surveys/
${
surveyId
}
/result`
}
style
=
{
({
isActive
})
=>
isActive
?
{
width
:
"
140px
"
,
color
:
"
white
"
,
backgroundColor
:
"
#58ACFA
"
,
borderTopRightRadius
:
"
25px
"
,
borderBottomRightRadius
:
"
25px
"
,
textAlign
:
"
center
"
,
fontWeight
:
"
bold
"
,
fontSize
:
"
20px
"
,
}
:
{
borderBottomWidth
:
"
1px
"
,
width
:
"
140px
"
,
borderWidth
:
"
1px
"
,
borderColor
:
"
#58ACFA
"
,
borderTopRightRadius
:
"
25px
"
,
borderBottomRightRadius
:
"
25px
"
,
textAlign
:
"
center
"
,
fontSize
:
"
18px
"
,
}
}
>
<
div
className
=
"
text-xl
m-3"
>
응답결과
</
div
>
<
div
className
=
"m-3"
>
응답결과
</
div
>
</
NavLink
>
</
div
>
<
Outlet
/>
...
...
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