Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: query options 추가 #79

Merged
merged 2 commits into from
Oct 21, 2024
Merged

feat: query options 추가 #79

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4181aa2
Revert "Update deploy.yml"
Cllaude99 Oct 21, 2024
3e24ba9
feat: query options 추가
Cllaude99 Oct 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion .github/workflows/deploy.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ jobs:
echo "VITE_BACKEND_URI=${{ secrets.VITE_BACKEND_URI }}" >> $GITHUB_ENV
echo "VITE_KAKAO_REST_API_KEY=${{ secrets.VITE_KAKAO_REST_API_KEY }}" >> $GITHUB_ENV
echo "VITE_KAKAO_JAVASCRIPT_KEY=${{ secrets.VITE_KAKAO_JAVASCRIPT_KEY }}" >> $GITHUB_ENV


- run: npm run build

Expand Down
13 changes: 1 addition & 12 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,7 @@ import { router } from './routes/router.tsx';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import 'react-toastify/dist/ReactToastify.css';

const queryClient = new QueryClient({
defaultOptions: {
queries: {
retry: 1,
throwOnError: true,
},
mutations: {
retry: 1,
throwOnError: true,
},
},
});
const queryClient = new QueryClient();

function App() {
return (
Expand Down
51 changes: 14 additions & 37 deletions src/components/Modal/PlaceModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,12 +35,10 @@ export default function PlaceModal({ isOpen, onClose }: ModalProps) {
}

function handleCopyClicked() {
navigator.clipboard
.writeText(`https://cotato-midpoint.site/page/e/results/${roomId}`)
.then(() => {
setCopyClicked(true);
setTimeout(() => setCopyClicked(false), 1000);
});
navigator.clipboard.writeText(`https://cotato-midpoint.site/page/e/results/${roomId}`).then(() => {
setCopyClicked(true);
setTimeout(() => setCopyClicked(false), 1000);
});
}

async function handleNextBtn() {
Expand Down Expand Up @@ -80,61 +78,42 @@ export default function PlaceModal({ isOpen, onClose }: ModalProps) {
animate={{ opacity: 1, scale: 1, transition: { type: 'tween' } }}
exit={{ opacity: 0, scale: 0.8 }}
>
<XMarkIcon
className="absolute text-gray-500 cursor-pointer size-7 top-2 right-2"
onClick={handleCloseModal}
/>
<XMarkIcon className="absolute text-gray-500 cursor-pointer size-7 top-2 right-2" onClick={handleCloseModal} />
<AnimatePresence initial={false}>
{currentView === 'alone' && (
<motion.div className="flex flex-col items-center flex-grow w-full gap-4">
<VoteLogo className="size-11" />
<h2 className="text-2xl font-semibold text-[#1A3C95]">
어떤 방법으로 장소를 결정할까요?
</h2>
<h2 className="mb-4 text-lg text-[#5E6D93]">
편한 방식으로 모임 장소를 결정할 수 있어요!
</h2>
<h2 className="text-2xl font-semibold text-[#1A3C95]">어떤 방법으로 장소를 결정할까요?</h2>
<h2 className="mb-4 text-lg text-[#5E6D93]">편한 방식으로 모임 장소를 결정할 수 있어요!</h2>
<div className="flex w-full gap-4">
<motion.div
className={`flex flex-col items-center p-2 h-[230px] rounded-lg cursor-pointer w-1/2 bg-white ${
selectedOption === 'alone'
? 'ring-4 ring-blue-400 bg-blue-200'
: 'border-gray-300'
selectedOption === 'alone' ? 'ring-4 ring-blue-400 bg-blue-200' : 'border-gray-300'
}`}
whileTap={{ scale: 0.9 }}
onClick={() => handleOptionClick('alone')}
>
<span className="mt-2 text-[#5E6D93]">친구들의 위치를</span>
<span className="mb-3 text-[#5E6D93]">모두 알고 있다면?</span>
<AloneLogo className="my-3 size-16" />
<p className="font-semibold text-[#1A3C95] text-xl mt-3">
내가 모두 입력하기
</p>
<p className="font-semibold text-[#1A3C95] text-xl mt-3">내가 모두 입력하기</p>
</motion.div>
<motion.div
className={`flex flex-col items-center p-2 rounded-lg cursor-pointer w-1/2 bg-white ${
selectedOption === 'friend'
? 'ring-4 ring-blue-400 bg-blue-200'
: 'border-gray-300'
selectedOption === 'friend' ? 'ring-4 ring-blue-400 bg-blue-200' : 'border-gray-300'
}`}
whileTap={{ scale: 0.9 }}
onClick={() => handleOptionClick('friend')}
>
<span className="mt-2 text-[#5E6D93]">친구들과 함께</span>
<span className="mb-3 text-[#5E6D93]">
장소를 결정하려면?
</span>
<span className="mb-3 text-[#5E6D93]">장소를 결정하려면?</span>
<FriendLogo className="my-3 size-16" />
<p className="font-semibold text-[#1A3C95] text-xl mt-3">
친구에게 공유하기
</p>
<p className="font-semibold text-[#1A3C95] text-xl mt-3">친구에게 공유하기</p>
</motion.div>
</div>
<button
className={`absolute bottom-5 w-[90%] py-2 rounded-2xl h-14 text-white transition-colors text-xl hover:bg-blue-400 ${
selectedOption
? 'bg-blue-500 cursor-pointer'
: 'bg-gray-300 cursor-not-allowed'
selectedOption ? 'bg-blue-500 cursor-pointer' : 'bg-gray-300 cursor-not-allowed'
}`}
onClick={handleNextBtn}
disabled={!selectedOption}
Expand All @@ -146,9 +125,7 @@ export default function PlaceModal({ isOpen, onClose }: ModalProps) {
{currentView === 'shareLink' && (
<motion.div className="flex flex-col items-center w-full gap-2 mt-8">
<SharePin className="mb-4 size-12" />
<h2 className="mb-4 text-2xl font-semibold text-[#1A3C95]">
친구들에게 링크 공유하기
</h2>
<h2 className="mb-4 text-2xl font-semibold text-[#1A3C95]">친구들에게 링크 공유하기</h2>
<p className="flex flex-col items-center mb-6 text-lg text-[#5E6D93]">
<span>링크를 공유하면 각자 위치를 입력한 후</span>
<span>투표를 통해 중간 지점을 결정할 수 있어요!</span>
Expand Down
Loading