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
44530f9a
Commit
44530f9a
authored
Aug 19, 2022
by
Yoon, Daeki
😅
Browse files
Surveys, Survey 컴포넌트 새로 만들고 적용
parent
f299336a
Changes
5
Hide whitespace changes
Inline
Side-by-side
frontend/src/commons/Header.tsx
View file @
44530f9a
...
...
@@ -28,7 +28,7 @@ export const Header = () => {
>
로그아웃
</
button
>
<
Link
to
=
"/surveys
/profile
"
>
<
Link
to
=
"/surveys"
>
<
button
className
=
"font-bold text-gray-600 hover:text-themeColor mx-1 py-2 px-3 rounded-md"
>
프로필
</
button
>
...
...
@@ -71,7 +71,7 @@ export const Header = () => {
로그아웃
</
div
>
</
Link
>
<
Link
to
=
"/
profile
"
>
<
Link
to
=
"/
surveys
"
>
<
div
className
=
"p-2 w-24 text-center text-l text-gray-600 hover:text-themeColor"
>
프로필
</
div
>
...
...
frontend/src/layouts/SurveyLayout.tsx
0 → 100644
View file @
44530f9a
import
React
from
"
react
"
;
import
{
NavLink
,
useOutletContext
}
from
"
react-router-dom
"
;
import
{
Outlet
,
useNavigate
,
useParams
}
from
"
react-router-dom
"
;
import
{
useSurveys
}
from
"
./SurveysLayout
"
;
import
type
{
ISurvey
}
from
"
../types
"
;
type
SurveyContextType
=
{
survey
:
ISurvey
;
update
:
(
survey
:
ISurvey
)
=>
Promise
<
any
>
;
};
const
activeStyle
=
"
w-36 h-12 flex justify-center items-center bg-themeColor p-1 text-white text-center font-bold text-xl
"
;
const
inActiveStyle
=
"
w-36 h-12 flex justify-center items-center bg-white border border-themeColor p-1 text-center font-bold text-xl
"
;
export
const
SurveyLayout
=
()
=>
{
const
{
surveys
,
update
}
=
useSurveys
();
let
{
surveyId
}
=
useParams
<
{
surveyId
:
string
}
>
();
const
survey
=
surveys
.
find
((
survey
)
=>
survey
.
_id
===
surveyId
);
return
(
<
div
>
<
div
className
=
"flex justify-center items-center mt-6"
>
<
NavLink
to
=
{
`/surveys/
${
surveyId
}
`
}
end
=
{
true
}
className
=
{
({
isActive
})
=>
isActive
?
activeStyle
+
"
rounded-l-3xl
"
:
inActiveStyle
+
"
rounded-l-3xl
"
}
>
설문 미리보기
</
NavLink
>
<
NavLink
to
=
{
`/surveys/
${
surveyId
}
/edit`
}
className
=
{
({
isActive
})
=>
(
isActive
?
activeStyle
:
inActiveStyle
)
}
>
설문지 수정
</
NavLink
>
<
NavLink
to
=
{
`/surveys/
${
surveyId
}
/result`
}
className
=
{
({
isActive
})
=>
isActive
?
activeStyle
+
"
rounded-r-3xl
"
:
inActiveStyle
+
"
rounded-r-3xl
"
}
>
응답결과
</
NavLink
>
</
div
>
<
Outlet
context
=
{
{
survey
,
update
}
}
/>
</
div
>
);
};
export
const
useSurvey
=
()
=>
{
return
useOutletContext
<
SurveyContextType
>
();
};
frontend/src/layouts/SurveysLayout.tsx
0 → 100644
View file @
44530f9a
import
React
,
{
useEffect
,
useState
}
from
"
react
"
;
import
{
Outlet
,
useOutletContext
}
from
"
react-router-dom
"
;
import
{
surveyApi
}
from
"
../apis
"
;
import
{
catchErrors
}
from
"
../helpers
"
;
import
type
{
ISurvey
}
from
"
../types
"
;
type
SurveysContextType
=
{
error
:
string
;
loading
:
boolean
;
surveys
:
ISurvey
[];
create
:
()
=>
Promise
<
any
>
;
remove
:
(
id
:
string
)
=>
Promise
<
any
>
;
update
:
(
survey
:
ISurvey
)
=>
Promise
<
any
>
;
};
export
const
SurveysLayout
=
()
=>
{
const
[
error
,
setError
]
=
useState
(
""
);
const
[
loading
,
setLoading
]
=
useState
(
false
);
const
[
surveys
,
setSurveys
]
=
useState
<
ISurvey
[]
>
([]);
useEffect
(()
=>
{
const
getSurveys
=
async
()
=>
{
const
surveys
:
ISurvey
[]
=
await
surveyApi
.
getSurveys
();
// console.log(surveys);
setSurveys
(
surveys
);
};
getSurveys
();
},
[]);
const
create
=
async
(
surveyData
:
ISurvey
)
=>
{
const
result
:
ISurvey
=
await
surveyApi
.
createSurvey
(
surveyData
);
setSurveys
([
result
,
...
surveys
]);
return
result
;
};
const
update
=
async
(
surveyData
:
ISurvey
)
=>
{
const
result
=
await
surveyApi
.
updateSurvey
(
surveyData
);
const
index
=
surveys
.
findIndex
((
survey
)
=>
survey
.
_id
===
result
.
_id
);
surveys
[
index
]
=
result
;
console
.
log
(
"
result in modify layout:
"
,
result
);
setSurveys
([...
surveys
]);
return
result
;
};
/**
* 설문 삭제
* @param id survey id
*/
const
remove
=
async
(
id
:
string
)
=>
{
if
(
window
.
confirm
(
"
해당 설문조사를 삭제하시겠습니까?
"
))
{
try
{
setLoading
(
true
);
const
result
=
await
surveyApi
.
deleteSurvey
(
id
);
console
.
log
(
"
deleted survey
"
,
result
);
setError
(
""
);
const
items
=
surveys
.
filter
((
survey
)
=>
survey
.
_id
!==
result
.
_id
);
// console.log("items left:", newItems);
setSurveys
(
items
);
alert
(
"
삭제되었습니다.
"
);
}
catch
(
error
)
{
console
.
log
(
"
에러발생
"
);
catchErrors
(
error
,
setError
);
}
finally
{
setLoading
(
false
);
}
}
};
return
(
<>
<
Outlet
context
=
{
{
error
,
loading
,
surveys
,
create
,
remove
,
update
}
}
/>
</>
);
};
export
const
useSurveys
=
()
=>
{
return
useOutletContext
<
SurveysContextType
>
();
};
frontend/src/layouts/index.tsx
View file @
44530f9a
export
{
AnswerLayout
}
from
"
./AnswerLayout
"
;
export
{
BaseLayout
}
from
"
./BaseLayout
"
;
export
{
ModifyLayout
}
from
"
./ModifyLayout
"
;
export
{
SurveyLayout
,
useSurvey
}
from
"
./SurveyLayout
"
;
export
{
SurveysLayout
,
useSurveys
}
from
"
./SurveysLayout
"
;
export
{
ResultLayout
}
from
"
./ResultLayout
"
;
frontend/src/surveys/SurveysList.tsx
0 → 100644
View file @
44530f9a
import
React
,
{
useEffect
,
useState
}
from
"
react
"
;
import
{
Link
}
from
"
react-router-dom
"
;
import
{
surveyApi
}
from
"
../apis
"
;
import
{
catchErrors
}
from
"
../helpers
"
;
import
{
useSurveys
}
from
"
../layouts
"
;
import
type
{
ISurvey
}
from
"
../types
"
;
import
{
SurveyCard
}
from
"
./SurveyCard
"
;
export
const
SurveysList
=
()
=>
{
const
[
error
,
setError
]
=
useState
(
""
);
const
[
loading
,
setLoading
]
=
useState
(
false
);
const
{
surveys
,
remove
:
handleDelete
}
=
useSurveys
();
// const [surveys, setSurveys] = useState<ISurvey[]>([]);
// useEffect(() => {
// const getSurveys = async () => {
// const surveys: ISurvey[] = await surveyApi.getSurveys();
// // console.log(surveys);
// setSurveys(surveys);
// };
// getSurveys();
// }, []);
/**
* 설문 삭제
* @param id survey id
*/
// const handleDelete = async (id: string) => {
// if (window.confirm("해당 설문조사를 삭제하시겠습니까?")) {
// try {
// setLoading(true);
// const result = await surveyApi.deleteSurvey(id);
// console.log("deleted survey", result);
// setError("");
// const newItems = surveys.filter((survey) => survey._id !== result._id);
// // console.log("items left:", newItems);
// setSurveys(newItems);
// alert("삭제되었습니다.");
// } catch (error) {
// console.log("에러발생");
// catchErrors(error, setError);
// } finally {
// setLoading(false);
// }
// }
// };
return
(
<
div
className
=
"flex flex-col items-center"
>
<
div
className
=
"mt-10 text-xl font-bold"
>
나의 설문조사
</
div
>
<
div
className
=
"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mt-6"
>
<
Link
to
=
{
"
/surveys/create
"
}
className
=
"flex w-40 h-48 md:h-60 md:w-52 items-center font-bold bg-gray-200 hover:bg-themeColor rounded-lg "
>
<
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
>
</
Link
>
{
surveys
.
map
((
survey
)
=>
(
<
SurveyCard
key
=
{
survey
.
_id
}
survey
=
{
survey
}
handleDelete
=
{
handleDelete
}
/>
))
}
</
div
>
</
div
>
);
};
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