Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
…coko-Front into feature/#79/Section_Part
  • Loading branch information
bluetree7878 committed Dec 4, 2024
2 parents cc01215 + 5a1203b commit 67d2769
Show file tree
Hide file tree
Showing 15 changed files with 400 additions and 149 deletions.
12 changes: 8 additions & 4 deletions src/apis/axios/intercepter.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import axiosConfig from './instance';
axiosConfig.interceptors.request.use(config => {
import api from './instance';
api.interceptors.request.use(config => {
//요청 성공 직전 호출
//헤더에 인가 토큰 부착
//로컬스토리지에 저장한다고 가정한다면
Expand All @@ -10,10 +10,14 @@ axiosConfig.interceptors.request.use(config => {

return config;
});
axiosConfig.interceptors.response.use(
api.interceptors.response.use(
//http status가 200번대인 경우 호출
response => response,
response => {
console.log(response);
return response;
},
error => {
console.log(error);
//http status가 에러 코드인경우 실행
}
);
18 changes: 18 additions & 0 deletions src/apis/usersApis.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import Quiz from '@/types/Quiz';
import Experience from '../types/Experience';
import User from '../types/User';
import api from './axios/instance';
Expand All @@ -24,5 +25,22 @@ const usersApis = {
const { id, experience } = params;
await api.patch(`/users/${id}/experience`, { experience });
},
getQuizzes: async (params: {
id: User['id'];
partId: Quiz['partId'];
}): Promise<Quiz[]> => {
const { id, partId } = params;
const response = await api.get(`/quizzes/users/${id}/incorrect`, {
params: { partId },
});
return response.data;
},
patchPoint: async (params: {
id: User['id'];
point: number;
}): Promise<void> => {
const { id, point } = params;
await api.patch(`/users/${id}/point`, { point });
},
};
export default usersApis;
27 changes: 16 additions & 11 deletions src/common/layout/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,24 +4,29 @@ import { HeaderBox } from './style';
import Login from '@features/login/ui/Login';
import { ProfileWrapper, ProfileIcon, HeaderIcon } from '../ui/style';
import useModal from '@hooks/useModal';
import useUserStore from '@/store/useUserStore';

export default function Header() {
const points: number = 2999999999;
const lifePoints: number = 5;
const { isShow, openModal, closeModal, Modal } = useModal();

const { user } = useUserStore();
return (
<HeaderBox>
<HeaderItem
icon={getImageUrl('포인트.svg')}
point={points}
color={'#FFCD35'}
/>
<HeaderItem
icon={getImageUrl('과일바구니.svg')}
point={lifePoints}
color={'#FE0F0F'}
/>
{user && (
<>
<HeaderItem
icon={getImageUrl('포인트.svg')}
point={points}
color={'#FFCD35'}
/>
<HeaderItem
icon={getImageUrl('과일바구니.svg')}
point={lifePoints}
color={'#FE0F0F'}
/>
</>
)}
<ProfileWrapper onClick={openModal}>
<ProfileIcon src={getImageUrl('테두리.svg')} alt="프로필 테두리" />
<HeaderIcon src={getImageUrl('코코-프로필.svg')} alt="코코 프로필" />
Expand Down
29 changes: 29 additions & 0 deletions src/features/login/styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -78,3 +78,32 @@ export const SocialLoginButton = styled.button<SocialLoginLinkProps>`
height: 24px;
}
`;
export const LoginPromptSection = styled.section`
animation: ${fadeInScaleUp} 0.7s ease-out;
display: flex;
flex-direction: column;
align-items: center;
width: 306px;
height: 370.47px;
border-radius: 40px;
background: #bfd683;
box-shadow: 0 10.53px #85705f;
> h2 {
margin-top: 20px;
color: #85705f;
}
`;
export const LoginPromptImg = styled.img`
width: 187.944px;
height: 219.219px;
margin-top: 7px;
`;

export const GoToLoginButton = styled.button`
width: 145.444px;
height: 38.291px;
border-radius: 6px;
background: #000;
color: #bfd683;
font-size: 14px;
`;
25 changes: 25 additions & 0 deletions src/features/login/ui/LoginPrompt.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import {
DashLineHr,
FlexContainer,
GoToLoginButton,
LoginPromptSection,
LoginPromptImg,
} from '../styles';
import { getImageUrl } from '@/utils/getImageUrl';
interface GoToLoginProps {
onNext: () => void;
}
export default function LoginPrompt({ onNext }: GoToLoginProps) {
return (
<>
<FlexContainer>
<LoginPromptSection>
<h2>문제 더 풀려면 로그인해 !</h2>
<LoginPromptImg src={getImageUrl('로그인키키.svg')} />
<DashLineHr />
<GoToLoginButton onClick={onNext}>로그인 창으로</GoToLoginButton>
</LoginPromptSection>
</FlexContainer>
</>
);
}
4 changes: 2 additions & 2 deletions src/features/quiz/styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -239,7 +239,7 @@ const fadeInScaleUp = keyframes`
transform: translate(-50%, -50%) scale(1);
}
`;
export const TotalResultSection = styled.section`
export const CompensationSection = styled.section`
animation: ${fadeInScaleUp} 0.7s ease-out;
position: fixed;
display: flex;
Expand Down Expand Up @@ -377,7 +377,7 @@ export const SectionWrapper = styled.div`
`;

// 섹션 제목(이름)
export const SectionTitle = styled.p`
export const SectionTitle = styled.h4`
width: 693px;
font-size: 17px;
color: #ffffff;
Expand Down
33 changes: 33 additions & 0 deletions src/features/quiz/ui/PartClear.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import { useNavigate } from 'react-router-dom';
import { CompensationSection } from '../styles';
import { pointQuery } from '@queries/usersQuery';
import { useTimeout } from '@modern-kit/react';
import useUserStore from '@store/useUserStore';
export default function PartClear() {
const navigate = useNavigate();
const { mutate: updatePoint } = pointQuery.patch();
const { user } = useUserStore();
const point = 1500;
useTimeout(
() => {
if (user) {
updatePoint({ id: user.id, point });
}
},
{ delay: 500 }
);
return (
<>
<CompensationSection>
<h1>와 파트클리어 축하해</h1>
<button
onClick={() => {
navigate('/learn');
}}
>
넘어가기
</button>
</CompensationSection>
</>
);
}
15 changes: 3 additions & 12 deletions src/features/quiz/ui/Result.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,27 +2,21 @@ import { progressQuery } from '../../../queries/usersQuery';
import { useClientQuizStore } from '../../../store/useClientQuizStore';
import useUserStore from '../../../store/useUserStore';
import Quiz from '../../../types/Quiz';
import handlePage from '../../../utils/handlePage';
import { noop } from '@modern-kit/utils';
import { AnswerDiv, NextPageButton, ScoreSection } from '../styles';
import { getImageUrl } from '@utils/getImageUrl';

interface ResultProps {
quizId: Quiz['id'];
answer: Quiz['answer'];
result: boolean;
lastPage: number;
closeModal: () => void;
openModal: () => void;
}
export default function Result({
quizId,
answer,
result,
lastPage,
closeModal,
openModal,
}: ResultProps) {
const imgUrl = import.meta.env.VITE_IMG_BASE_URL;
const { nextPage, resetUserResponseAnswer, pushTotalResults, currentPage } =
useClientQuizStore();
//임시 유저 가져오기
Expand All @@ -33,18 +27,15 @@ export default function Result({
return (
<>
<ScoreSection
$backGroundImage={
result ? `${imgUrl}정답모달.svg` : `${imgUrl}오답모달.svg`
}
$backGroundImage={getImageUrl(result ? `정답모달.svg` : `오답모달.svg`)}
>
<AnswerDiv>{!result && '정답 : ' + answer}</AnswerDiv>
<NextPageButton
$isAnswer={result}
onClick={() => {
resetUserResponseAnswer();
pushTotalResults(result);
closeModal();
handlePage(currentPage, lastPage, nextPage, noop, openModal);
nextPage();
userId &&
addProgress.mutate({
userId,
Expand Down
Loading

0 comments on commit 67d2769

Please sign in to comment.