Commit d2ef3549 authored by Jiwon Yoon's avatar Jiwon Yoon
Browse files

AQuestion 모바일 UI수정+Header 아이콘 순서 변경

parent 5aef8193
......@@ -15,17 +15,17 @@ export const Header = () => {
<div className="hidden md:flex">
{user.isLoggedIn ? (
<div>
<Link to="/surveys">
<button className="font-bold text-gray-600 hover:text-themeColor mx-1 py-2 px-3 rounded-md">
프로필
</button>
</Link>
<button
onClick={() => logout(() => navigate("/"))}
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>
......@@ -46,15 +46,12 @@ export const Header = () => {
<div className="md:hidden">
{user.isLoggedIn ? (
<div className="flex px-4">
<button
onClick={() => logout(() => navigate("/"))}
className="mr-3"
>
<LogoutIcon className="h-7 w-7" />
</button>
<Link to="/surveys">
<UserIcon className="h-7 w-7" />
<UserIcon className="h-7 w-7 mx-4" />
</Link>
<button onClick={() => logout(() => navigate("/"))}>
<LogoutIcon className="h-7 w-7" />
</button>
</div>
) : (
<div className="flex px-4">
......
......@@ -19,13 +19,15 @@ export const ARating = ({ element, answer: answerQuestion }: IAnswerProps) => {
console.log(answerQuestion);
}
return (
<div className="flex w-full justify-center my-3 overflow-x-auto">
<label className="mt-3">{element.content.minRateDescription}</label>
<div className="flex w-full justify-center items-center my-3 overflow-x-auto">
<label className="shrink-0 mr-1">
{element.content.minRateDescription}
</label>
{element.content.choices.map((choice) => (
<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"
className="border border-themeColor rounded-full md:w-12 md:h-12 w-9 h-9 text-center hover:bg-slate-300"
name={choice.text}
onClick={buttonClick}
style={{
......@@ -37,7 +39,9 @@ export const ARating = ({ element, answer: answerQuestion }: IAnswerProps) => {
</button>
</div>
))}
<label className="mt-3">{element.content.maxRateDescription}</label>
<label className="shrink-0 ml-1">
{element.content.maxRateDescription}
</label>
</div>
);
};
......@@ -14,7 +14,7 @@ export const AQuestion = ({ question, answer }: Props) => {
{question.isRequired ? (
<div className="text-xs text-red-600 justify-end">* 필수질문</div>
) : (
<></>
<div></div>
)}
<div className="md:text-xl text-base font-bold">{question.title}</div>
</div>
......
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