diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 9b2b6e48..a3ea8ffd 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -13,6 +13,19 @@ jobs: - name: Check Node v run: node -v + - name: create env file + working-directory: ./ + run: | + pwd + touch .env + echo "VITE_NODE_ENV=${{ secrets.VITE_NODE_ENV }}" >> .env + echo "VITE_API_URL=${{ secrets.VITE_API_URL }}" >> .env + echo "VITE_GOOGLE_MAP_API=${{ secrets.VITE_GOOGLE_MAP_API }}" >> .env + echo "VITE_GOOGLE_AUTH_CLIENT_ID=${{ secrets.VITE_GOOGLE_AUTH_CLIENT_ID }}" >> .env + echo "VITE_KAKAO_REST_API_KEAY=${{ secrets.VITE_KAKAO_REST_API_KEAY }}" >> .env + echo "VITE_REDIRECT_URI=${{ secrets.VITE_REDIRECT_URI }}" >> .env + cat .env + - name: Install dependencies run: yarn @@ -24,10 +37,9 @@ jobs: aws-region: ${{ secrets.AWS_REGION }} - name: Generate build - run: yarn build + run: yarn run build - - name: Deploy - run: aws s3 cp --recursive --region ap-northeast-2 dist s3://hereyoubuckey + - name: Deploy to S3 env: AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }} AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }} @@ -38,3 +50,7 @@ jobs: VITE_KAKAO_REST_API_KEAY: ${{ secrets.VITE_KAKAO_REST_API_KEAY }} VITE_REDIRECT_URI: ${{ secrets.VITE_REDIRECT_URI }} AWS_REGION: ${{ secrets.AWS_REGION }} + run: aws s3 cp --recursive --region ap-northeast-2 dist s3://${{ secrets.AWS_BUCKET_NAME }} + + - name: Invaildate CloudFront Cache + run: aws cloudfront create-invalidation --distribution-id ${{ secrets.AWS_DISTRIBUTION_ID }} --paths "/*" diff --git a/package.json b/package.json index 26695cd0..9b2c5c00 100644 --- a/package.json +++ b/package.json @@ -5,10 +5,11 @@ "type": "module", "scripts": { "dev": "vite --host", - "build": "vite build", + "build": "vite build --mode production", "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview", - "start": "vite start -p 80" + "start": "vite start -p 80", + "deploy": "aws s3 sync dist s3://here---you --profile=dydals3440" }, "dependencies": { "@googlemaps/react-wrapper": "^1.1.35", diff --git a/public/images/airplane.svg b/public/images/airplane.svg new file mode 100644 index 00000000..dfa0a485 --- /dev/null +++ b/public/images/airplane.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/images/background.svg b/public/images/background.svg new file mode 100644 index 00000000..86f527d3 --- /dev/null +++ b/public/images/background.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/apis/request/auth.js b/src/apis/request/auth.js deleted file mode 100644 index d5a65ac8..00000000 --- a/src/apis/request/auth.js +++ /dev/null @@ -1,65 +0,0 @@ -// 코드 작성 전 필독! -// 지금은 백엔드와 연동을 하지 않은 상태이기 때문에 msw라는 mock server를 사용중입니다. -// 그래서 여기에 api 요청 함수를 추가하게 되면 mocks에 handler에도 추가해야 되는데요(handler에 코드 추가 방법은 예시 코드와 구글 검색 참고) -// 이때 경로를 이곳에 한 번 handler에 한 번 총 두 번을 입력하게 됩니다. -// 만약 경로에 문제가 생겨서 수정해야 하는 경우 두 곳을 수정해야 합니다. -// 이때 오류가 발생할 수 있어요.. -// -// 그래서 결론은 경로의 경우 여기에 직접 입력하지 않고 -// constants 폴더의 path.js에 API_PATH에 추가하거나 기존에 있는 경로 사용해주세요! -// 어떻게 작성하는지 어떻게 사용하는지는 이미 써져 있는 코드 참고하시면 될 듯 합니다. -// 그런데 :id와 같은 파라미터는 path로 지정하지 말아주세요! -import { axios, axiosWithToken } from 'apis/api'; -import { API_PATH } from 'constants/path'; - -const requestLogin = authData => { - return axios.post(API_PATH.LOGIN, authData); -}; - -const requestFindPassWord = email => { - return axios.post(API_PATH.FINDING, email); -}; - -const requestSignUp = signUpData => { - return axios.post(API_PATH.SIGNUP, signUpData); -}; - -const requestCheckDuplicateId = id => { - return axios.get(`${API_PATH.CHECK_ID}/${id}`); -}; - -const requestCheckDuplicateNickName = nickName => { - return axios.get(`${API_PATH.CHECK_NICKNAME}/${nickName}`); -}; - -const requestCheckDuplicateEmail = email => { - return axios.get(`${API_PATH.CHECK_EMAIL}/${email}`); -}; - -const requestWithDrawal = () => { - return axiosWithToken.post(`${API_PATH.WITHDRAWAL}`); -}; - -const requestChangePassWord = () => { - return axios.patch(`${API_PATH.CHANGE_PASSWORD}`); -}; - -const requestUser = () => { - return axiosWithToken.get(`${API_PATH.USER_INFO}`); -}; - -const changeNickname = nickname => { - return axiosWithToken.post(`${API_PATH.CHANGE_NICKNAME}/${nickname}`); -}; - -export // requestLogin, -// requestFindPassWord, -// requestSignUp, -// requestCheckDuplicateId, -// requestCheckDuplicateNickName, -// requestCheckDuplicateEmail, -// requestWithDrawal, -// requestChangePassWord, -// requestUser, -// changeNickname, - {}; diff --git a/src/apis/request/home.js b/src/apis/request/home.js index 77d9e8de..f7f0e6e4 100644 --- a/src/apis/request/home.js +++ b/src/apis/request/home.js @@ -1,13 +1,6 @@ import { axiosWithToken } from '../api'; import { API_BASE, VERSION } from '@/constants/path'; -// 월별 일정 불러오기 (확정 X) -const loadMonthlySchedule = (year, month) => { - const url = `/api/${VERSION}/${API_BASE.SCHEDULE}/monthly/${year}/${month}`; - const res = axiosWithToken.get(url); - return res; -}; - // 월별 일정 불러오기 (무한스크롤) const getSchedule = (date, pageParam, pageSize) => { const url = `/api/${VERSION}/${API_BASE.MAP}/get-monthly-schedule/${date}?cursor=${pageParam}&pageSize=${pageSize}`; @@ -46,7 +39,6 @@ const deleteJourney = journeyId => { // 일정 작성하기 const createSchedule = (scheduleId, title, location, latitude, longitude) => { - console.log(latitude, longitude); const url = `/api/${VERSION}/${API_BASE.SCHEDULE}/update/${scheduleId}`; const res = axiosWithToken.put(url, { title: title, @@ -66,7 +58,6 @@ const deleteSchedule = scheduleId => { // 세부 일정 추가하기 const addDetailSchedule = (scheduleId, content) => { - console.log(content); const url = `/api/${VERSION}/${API_BASE.DETAIL_SCHEDULE}/create/${scheduleId}`; const res = axiosWithToken.post(url, { content: content, @@ -135,7 +126,6 @@ const updateDiary = (diaryId, postData) => { }; export { - loadMonthlySchedule, saveJourney, updateJourney, deleteJourney, diff --git a/src/apis/request/map.js b/src/apis/request/map.js index 04f320a4..971a23bf 100644 --- a/src/apis/request/map.js +++ b/src/apis/request/map.js @@ -1,5 +1,5 @@ import { axiosWithToken } from '../api'; -import { API_BASE, API_URL, VERSION } from '@/constants/path'; +import { API_BASE, VERSION } from '@/constants/path'; // 토큰이 필요 없는 경우 axios를 사용하면 됩니다. // 월별 여정 불러오기 @@ -24,13 +24,4 @@ const getDiaryMap = ({ journeyId }) => { return res; }; -// 세부 여정 확인하기 (지도) -const getDetailJourneyMap = journeyId => { - const url = `/api/${VERSION}/${API_BASE.MAP}/get-schedules/${journeyId}`; - const res = axiosWithToken.get(url); - return res; -}; - -// 토큰이 필요한 경우 axiosWithToken을 사용하면 됩니다. - -export { getMonthlyJourney, getJourneyMap, getDiaryMap, getDetailJourneyMap }; +export { getMonthlyJourney, getJourneyMap, getDiaryMap }; diff --git a/src/apis/request/mate.js b/src/apis/request/mate.js index 64ef15e6..af762682 100644 --- a/src/apis/request/mate.js +++ b/src/apis/request/mate.js @@ -13,7 +13,7 @@ const postFollowMate = followId => { // FOLLOW_MATE: `/api/${VERSION}/${API_BASE.MATE}/follow/:followId`, // 백엔드 API : api/v1/mate/follow/:followId const url = `${API_URL.FOLLOW_MATE}/${followId}`; - console.log(url); + return axiosWithToken.patch(url); }; @@ -62,13 +62,6 @@ const getSearchNickname = (searchTerm, take, { pageParam }) => { return axiosWithToken.get(url); }; -const getParticipateTeamMate = () => { - // GET_PARTICIPATE_TEAM_MATE: `/api/${VERSION}/${API_BASE.MATE}/rule/participants/:ruleId`, - // 백엔드 API : api/v1/mate/rule/participants/:ruleId - const url = `${API_URL.GET_PARTICIPATE_TEAM_MATE}`; - return axiosWithToken.get(url); -}; - // 여행 규칙 확인하기 (게시글) const getTeamMateRulePost = ruleId => { // GET_TEAM_MATE_RULE: `/api/${VERSION}/${API_BASE.MATE}/rule/view/:ruleId`, @@ -83,16 +76,6 @@ const getTeamMateRuleComment = (ruleId, take, { pageParam }) => { return axiosWithToken.get(url); }; -const patchTeamMateRule = () => { - // UPDATE_TEAM_MATE_RULE: `/api/${VERSION}/${API_BASE.MATE}/rule/edit/:ruleId`, - // 백엔드 API : api/v1/mate/rule/edit/:ruleId - const url = `${API_URL.UPDATE_TEAM_MATE_RULE}`; - return axiosWithToken.patch(url, { - title: title, - contents: contents, - }); -}; - const deleteTeamMate = () => { // DELETE_TEAM_MATE: `/api/${VERSION}/${API_BASE.MATE}/rule/editMate/:ruleId/:userId`, // 백엔드 API : api/v1/mate/rule/editMate/:ruleId/:mateId @@ -158,10 +141,8 @@ export { postCreateMateRule, getSearchInviteMate, getSearchNickname, - getParticipateTeamMate, getTeamMateRulePost, getTeamMateRuleComment, - patchTeamMateRule, getLocationMate, deleteTeamMate, postMateRuleComment, diff --git a/src/apis/request/preview.js b/src/apis/request/preview.js deleted file mode 100644 index 424e1ade..00000000 --- a/src/apis/request/preview.js +++ /dev/null @@ -1,11 +0,0 @@ -import { axios, axiosWithToken } from '../api'; -import { API_PATH } from '@/constants/path'; - -// 토큰이 필요없는 경우 axios를 쓰면됩니다. -const getSignaturePreview = () => { - return axios.get(API_PATH.SIGNATURE_PREVIEW); -}; - -// 토큰이 필요한 경우 axios대신, axiosWithToken을 사용하면 됩니다. - -export { getSignaturePreview }; diff --git a/src/apis/request/profile.js b/src/apis/request/profile.js index 043886ae..8effc623 100644 --- a/src/apis/request/profile.js +++ b/src/apis/request/profile.js @@ -68,7 +68,7 @@ const getMyDiary = ({ pageParam }) => { } else { url = `${API_URL.GET_ALL_DIARY}?cursor=${pageParam}`; } - console.log(url); + return axiosWithToken.get(url); }; diff --git a/src/apis/request/signature.js b/src/apis/request/signature.js index a4c0ee8b..44b4a596 100644 --- a/src/apis/request/signature.js +++ b/src/apis/request/signature.js @@ -84,7 +84,7 @@ const postSignatureReComment = ({ signatureId, parentId, content }) => { // 시그니처 댓글/답글 수정하기 const updateSignatureReComment = ({ signatureId, commentId, content }) => { const url = `/api/v1/signature/${signatureId}/comment/${commentId}`; - console.log(url); + return axiosWithToken.patch(url, { content: content, }); diff --git a/src/apis/request/travel.js b/src/apis/request/travel.js deleted file mode 100644 index fe9df6a2..00000000 --- a/src/apis/request/travel.js +++ /dev/null @@ -1,11 +0,0 @@ -import { axios, axiosWithToken } from '../api'; -import { API_PATH } from '@/constants/path'; - -// 토큰이 필요없는 경우 axios를 쓰면됩니다. -const getFavoriteTravelPlace = () => { - return axios.get(API_PATH.FAVORITE_TRAVELS); -}; - -// 토큰이 필요한 경우 axios대신, axiosWithToken을 사용하면 됩니다. - -export { getFavoriteTravelPlace }; diff --git a/src/components/banner/Banner.style.js b/src/components/banner/Banner.style.js index aa64a5fd..009a0f70 100644 --- a/src/components/banner/Banner.style.js +++ b/src/components/banner/Banner.style.js @@ -8,7 +8,7 @@ const BannerContainer = styled.div` justify-content: center; padding: 5%; width: 100%; - height: 160px; + height: 130px; background: rgba(27, 156, 133, 0.16); `; diff --git a/src/components/bottomSheet/BottomDetailScrollPage.jsx b/src/components/bottomSheet/BottomDetailScrollPage.jsx index 6f2f5074..007a7c8b 100644 --- a/src/components/bottomSheet/BottomDetailScrollPage.jsx +++ b/src/components/bottomSheet/BottomDetailScrollPage.jsx @@ -27,7 +27,7 @@ const BottomDetailScrollPage = ({ startDate, endDate }) => { if (!lastPage?.data?.data?.data?.meta?.hasNextData) { return null; } else { - return lastPage?.data?.data?.data?.meta?.cursor + 1; + return lastPage?.data?.data?.data?.meta?.cursor; } }, staleTime: 60 * 1000, diff --git a/src/components/bottomSheet/BottomDetailScrollPage.style.js b/src/components/bottomSheet/BottomDetailScrollPage.style.js index 8ab9c829..c80a38d3 100644 --- a/src/components/bottomSheet/BottomDetailScrollPage.style.js +++ b/src/components/bottomSheet/BottomDetailScrollPage.style.js @@ -97,7 +97,7 @@ const Button = styled.button` ${theme.ALIGN.ROW_CENTER}; background-color: ${theme.COLOR.MAIN.GREEN}; border: none; - width: 400px; + width: 90%; height: 60px; color: ${theme.COLOR.MAIN.WHITE}; border-radius: 30px; diff --git a/src/components/bottomSheet/BottomScrollPage.style.js b/src/components/bottomSheet/BottomScrollPage.style.js index 58f9bbb2..14bb4db1 100644 --- a/src/components/bottomSheet/BottomScrollPage.style.js +++ b/src/components/bottomSheet/BottomScrollPage.style.js @@ -11,10 +11,10 @@ const Button = styled.button` ${theme.ALIGN.ROW_CENTER}; background-color: ${theme.COLOR.MAIN.GREEN}; border: none; - width: 200px; - height: 50px; + width: 90%; + height: 60px; color: ${theme.COLOR.MAIN.WHITE}; - border-radius: 20px; + border-radius: 30px; margin: auto; margin-top: 10px; cursor: pointer; diff --git a/src/components/calendar/TravelCalendar.jsx b/src/components/calendar/TravelCalendar.jsx index a972b4f3..8b60fa67 100644 --- a/src/components/calendar/TravelCalendar.jsx +++ b/src/components/calendar/TravelCalendar.jsx @@ -8,6 +8,7 @@ import * as S from './TravelCalendar.style'; import CalendarSkeleton from './skeleton/CalendarSkeleton'; import EditLight from '/icons/EditLight.svg'; import { useMonthlyJourney } from '@/hooks/home/useMonthlyJourney'; +import useAuth from '@/store/useAuth'; moment.locale('en'); @@ -17,6 +18,7 @@ const TravelCalendar = ({ setJourneyInfo, setMonthlyInfo, }) => { + const { isLogin } = useAuth(); const storedStartDate = localStorage.getItem('startDate'); const storedEndDate = localStorage.getItem('endDate'); @@ -99,6 +101,9 @@ const TravelCalendar = ({ setJourneyInfo(null); setJourneyTitle(''); } + } else { + setJourneyInfo(null); + setJourneyTitle(''); } } }; @@ -188,39 +193,43 @@ const TravelCalendar = ({ nextLabel={{'>'}} /> - - {storedStartDate && storedEndDate ? ( - <> - - {journeyTitle ? ( -

🏖️ 선택된 여정 : {journeyTitle}

- ) : ( -

새로운 여정을 추가하고 여행 일정을 생성하세요!

- )} - -

- {moment(value).format('YYYY/MM/DD')} ~{' '} - {moment(endDate).format('YYYY/MM/DD')} -

- - -

- Tip.{'\t'} - - 일지 작성 - - 버튼을 눌러 일지를 작성하면 지도에서 -
- 이미지로 표시된 위치를 확인할 수 있습니다. -

- - - ) : ( -

- 달력에서 기간을 선택하면 저장된 일정을 확인할 수 있습니다. -

- )} - + {isLogin && ( + + {storedStartDate && storedEndDate ? ( + <> + + {journeyTitle ? ( +

🏖️ 선택된 여정 : {journeyTitle}

+ ) : ( +

새로운 여정을 추가하고 여행 일정을 생성하세요!

+ )} + +

+ {moment(value).format('YYYY/MM/DD')} ~{' '} + {moment(endDate).format('YYYY/MM/DD')} +

+ + +

+ Tip.{'\t'} + + 일지 작성 + + 버튼을 눌러 일지를 작성하면 지도에서 +
+ 이미지로 표시된 위치를 확인할 수 있습니다. +

+ + + ) : !isLogin ? ( + <> + ) : ( +

+ 달력에서 기간을 선택하면 저장된 일정을 확인할 수 있습니다. +

+ )} + + )} { delay: 0, }); + console.log(signatureComments); + useEffect(() => { if (inView) { - console.log('fire'); !isFetching && hasNextPage && fetchNextPage(); } }, [inView, isFetching, hasNextPage, fetchNextPage]); diff --git a/src/components/comment/signature/SignatureCommentList.style.js b/src/components/comment/signature/SignatureCommentList.style.js index 49f5dbbf..d8f06182 100644 --- a/src/components/comment/signature/SignatureCommentList.style.js +++ b/src/components/comment/signature/SignatureCommentList.style.js @@ -8,7 +8,7 @@ const Container = styled.div` align-items: center; max-height: 500px; width: 100%; - overflow: scroll; + overflow-y: scroll; &::-webkit-scrollbar { width: 4px; diff --git a/src/components/comment/signature/commentView/SignatureComment.jsx b/src/components/comment/signature/commentView/SignatureComment.jsx index 8e77fece..1b630a7c 100644 --- a/src/components/comment/signature/commentView/SignatureComment.jsx +++ b/src/components/comment/signature/commentView/SignatureComment.jsx @@ -111,9 +111,11 @@ const SignatureComment = ({ data }) => { {writer?.name} {/* 본인 댓글이거나 게시글 주인인 경우에만 답글 버튼 표시 */} - setIsReplying(prev => !prev)}> - {isReplying === true ? : } - + {isParentComment && ( + setIsReplying(prev => !prev)}> + {isReplying === true ? : } + + )} {/* 본인 댓글인 경우에만 수정 및 삭제 버튼 표시 */} {writer?.is_writer && !editMode && ( <> diff --git a/src/components/footer/Footer.style.js b/src/components/footer/Footer.style.js index 0a6106cf..1908522c 100644 --- a/src/components/footer/Footer.style.js +++ b/src/components/footer/Footer.style.js @@ -6,8 +6,7 @@ import theme from '@/theme'; const FooterWrapper = styled.div` width: 100%; height: 80px; - position: fixed; - bottom: 0px; + background-color: ${theme.COLOR.MAIN.WHITE}; color: ${theme.COLOR.MAIN.BLACK}; diff --git a/src/components/login/GoogleLoginButton.jsx b/src/components/login/GoogleLoginButton.jsx index e35649b0..2e1052df 100644 --- a/src/components/login/GoogleLoginButton.jsx +++ b/src/components/login/GoogleLoginButton.jsx @@ -13,7 +13,6 @@ const GoogleLoginButton = () => { const login = useGoogleLogin({ onSuccess: async tokenResponse => { - console.log(tokenResponse); const response = await postSnsLogin('GOOGLE', tokenResponse.access_token); const token = response.data.token; googleLogin(token); diff --git a/src/components/login/KakaoLoginButton.jsx b/src/components/login/KakaoLoginButton.jsx index 2280aff2..628093f6 100644 --- a/src/components/login/KakaoLoginButton.jsx +++ b/src/components/login/KakaoLoginButton.jsx @@ -4,7 +4,6 @@ import KakaoIcon from '/images/Kakao.svg'; const KakaoLoginButton = () => { const Rest_api_key = import.meta.env.VITE_KAKAO_REST_API_KEAY; const redirect_uri = import.meta.env.VITE_REDIRECT_URI; - const kakaoURL = `https://kauth.kakao.com/oauth/authorize?client_id=${Rest_api_key}&redirect_uri=${redirect_uri}&response_type=code`; const handleLogin = () => { window.location.href = kakaoURL; diff --git a/src/components/login/LoginButton.jsx b/src/components/login/LoginButton.jsx index 12efe675..8e446208 100644 --- a/src/components/login/LoginButton.jsx +++ b/src/components/login/LoginButton.jsx @@ -1,5 +1,3 @@ -import styled from 'styled-components'; - import GoogleLoginButton from './GoogleLoginButton'; import KakaoLoginButton from './KakaoLoginButton'; import { GoogleOAuthProvider } from '@react-oauth/google'; diff --git a/src/components/login/SnsLoginButton.style.js b/src/components/login/SnsLoginButton.style.js index 8cc5702e..f5fa0838 100644 --- a/src/components/login/SnsLoginButton.style.js +++ b/src/components/login/SnsLoginButton.style.js @@ -8,7 +8,7 @@ const LoginButton = styled.button` justify-content: center; align-items: center; width: 100%; - height: 35%; + height: 45%; color: black; border: none; padding: 10px 11px; @@ -36,7 +36,7 @@ const KLoginButton = styled.button` justify-content: center; align-items: center; width: 100%; - height: 35%; + height: 45%; color: black; border: none; padding: 10px 11px; diff --git a/src/components/main/Box.jsx b/src/components/main/Box.jsx index ca5e0d76..a8bc38c4 100644 --- a/src/components/main/Box.jsx +++ b/src/components/main/Box.jsx @@ -8,8 +8,8 @@ import signatureIcon from '/images/main/signatureIcon.svg'; export default function Box({ title }) { const navigate = useNavigate(); - const route = title == '시그니처' ? '/signature ' : '/mate'; - console.log(route); + const route = title == '시그니처' ? '/signature' : '/mate'; + const des = title == '시그니처' ? '나만의 시그니처 작성하기 ' : '나의 여행 메이트 찾기'; const IconUrl = title == '시그니처' ? signatureIcon : mateIcon; diff --git a/src/components/main/LoginBanner.jsx b/src/components/main/LoginBanner.jsx index 7d2d35c1..7150d3ef 100644 --- a/src/components/main/LoginBanner.jsx +++ b/src/components/main/LoginBanner.jsx @@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import * as S from './LoginBanner.style'; -import LoginSkeleton from './skeleton/LoginSkeleton'; import profileImg from '/images/main/profileImg.svg'; import rightIcon from '/images/main/right.svg'; import { useGetMyProfile } from '@/hooks/profile/queries/useGetMyProfile'; @@ -20,34 +19,30 @@ export default function LoginBanner({ isLogin }) { return ( <> - {pendingState ? ( - - ) : ( - - - {isLogin ? ( - <> - - - {myProfile?.nickname}님 환영합니다🪐 - navigate('/mypage')}> - 내 프로필 가기 - - - - - ) : ( - <> - - navigate('/login')}> - 3초만에 로그인하기 - - - - )} - - - )} + + + {isLogin ? ( + <> + + + {myProfile?.nickname}님 환영합니다🪐 + navigate('/mypage')}> + 내 프로필 가기 + + + + + ) : ( + <> + + navigate('/login')}> + 3초만에 로그인하기 + + + + )} + + ); } diff --git a/src/components/mate/FollowButton.jsx b/src/components/mate/FollowButton.jsx index c716c865..eee9a0c3 100644 --- a/src/components/mate/FollowButton.jsx +++ b/src/components/mate/FollowButton.jsx @@ -12,12 +12,12 @@ const FollowButton = ({ initialFollowState, id }) => { try { if (follow === true) { const res = await postFollowMate(id); - console.log(res); + toast.success('팔로우가 취소되었습니다.'); setFollow(false); } else { const res = await postFollowMate(id); - console.log(res); + toast.success('팔로잉되었습니다.'); setFollow(true); } diff --git a/src/components/mate/FollowButton2.jsx b/src/components/mate/FollowButton2.jsx index 3de7fdbe..00f8101d 100644 --- a/src/components/mate/FollowButton2.jsx +++ b/src/components/mate/FollowButton2.jsx @@ -14,12 +14,12 @@ const FollowButton2 = ({ initialFollowState, id }) => { try { if (follow === true) { const res = await postFollowMate(id); - console.log(res); + toast.success('팔로우가 취소되었습니다.'); setFollow(false); } else { const res = await postFollowMate(id); - console.log(res); + toast.success('팔로잉되었습니다.'); setFollow(true); } diff --git a/src/components/mate/RuleComments.jsx b/src/components/mate/RuleComments.jsx index e09dc057..0d5c0939 100644 --- a/src/components/mate/RuleComments.jsx +++ b/src/components/mate/RuleComments.jsx @@ -23,7 +23,7 @@ const RuleComments = (userImage, commentsData) => { {userImage && } - + diff --git a/src/components/mate/Search.jsx b/src/components/mate/Search.jsx index 1e28aac2..99377d76 100644 --- a/src/components/mate/Search.jsx +++ b/src/components/mate/Search.jsx @@ -1,12 +1,19 @@ import * as S from './Search.style'; +import useAuth from '@/store/useAuth'; const Search = ({ setSearchTerm }) => { + const { isLogin } = useAuth(); return ( setSearchTerm(e.target.value)} + disabled={!isLogin} /> diff --git a/src/components/mate/TeamContainer.style.js b/src/components/mate/TeamContainer.style.js index cf613c2b..3f5f9250 100644 --- a/src/components/mate/TeamContainer.style.js +++ b/src/components/mate/TeamContainer.style.js @@ -89,11 +89,11 @@ const TeamTitle = styled.span` margin-right: auto; color: #000; text-align: center; - font-size: 22px; + font-size: 20px; font-style: normal; font-weight: 600; line-height: normal; - + font-family: 'Pretendard-semibold'; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; diff --git a/src/components/modal/Modal.style.js b/src/components/modal/Modal.style.js index 4b8dc185..ddc5aa69 100644 --- a/src/components/modal/Modal.style.js +++ b/src/components/modal/Modal.style.js @@ -114,7 +114,8 @@ const Button = styled.button` border-bottom-right-radius: 0.5rem; border-bottom-left-radius: 0.5rem; - color: ${props => props.buttonColor}; + color: ${props => + props.buttonColor ? props.buttonColor : `${theme.COLOR.MAIN.BLACK}`}; background-color: transparent; cursor: pointer; diff --git a/src/components/modal/inviteMatesModal/InviteMatesModal.jsx b/src/components/modal/inviteMatesModal/InviteMatesModal.jsx index 0fefbc44..f49e896d 100644 --- a/src/components/modal/inviteMatesModal/InviteMatesModal.jsx +++ b/src/components/modal/inviteMatesModal/InviteMatesModal.jsx @@ -30,8 +30,6 @@ const InviteMatesModal = () => { const searchMates = search?.pages; - console.log(searchMates); - const handleInviteClick = () => { InviteMatesModal.onClose(); }; diff --git a/src/components/modal/journeyEdit/JourneyEditModal.jsx b/src/components/modal/journeyEdit/JourneyEditModal.jsx index 736d418c..aee4bd1a 100644 --- a/src/components/modal/journeyEdit/JourneyEditModal.jsx +++ b/src/components/modal/journeyEdit/JourneyEditModal.jsx @@ -67,7 +67,7 @@ const JourneyEditModal = ({ journeyId, journeyTitle, startDate, endDate }) => { const res = await updateJourney({ ...data, journeyId: journeyId }); if (res) { toast.success('여정이 수정되었습니다.'); - console.log('제출된 데이터: ', data); + window.location.reload(); } } catch (error) { diff --git a/src/components/modal/journeyWriteModal/JourneyWriteModal.jsx b/src/components/modal/journeyWriteModal/JourneyWriteModal.jsx index 3163715d..2fcfbee1 100644 --- a/src/components/modal/journeyWriteModal/JourneyWriteModal.jsx +++ b/src/components/modal/journeyWriteModal/JourneyWriteModal.jsx @@ -66,7 +66,7 @@ const JourneyWriteModal = ({ startDate, endDate }) => { const res = await saveJourney(data); if (res) { toast.success('여정이 저장되었습니다.'); - console.log('제출된 데이터: ', data); + window.location.reload(); } } catch (error) { diff --git a/src/components/modal/likerFindModal/LikerFindModal.style.js b/src/components/modal/likerFindModal/LikerFindModal.style.js index beee1eef..9265d3e9 100644 --- a/src/components/modal/likerFindModal/LikerFindModal.style.js +++ b/src/components/modal/likerFindModal/LikerFindModal.style.js @@ -51,6 +51,7 @@ const Button = styled.button` background-color: ${(props => props.follow) ? `${theme.COLOR.MAIN.LIGHT_GREEN}` : `${theme.COLOR.MAIN.LIGHT_GRAY}`}; + cursor: pointer; `; const UserImg = styled.img` diff --git a/src/components/modal/mypage/PublicScopeModal.jsx b/src/components/modal/mypage/PublicScopeModal.jsx index 4c0a85e2..c7d406e9 100644 --- a/src/components/modal/mypage/PublicScopeModal.jsx +++ b/src/components/modal/mypage/PublicScopeModal.jsx @@ -73,7 +73,6 @@ const PublicScopeModal = ({ myVisibility }) => { const res = await putPublicScope(visibility); if (res) { toast.success('공개범위가 설정되었습니다.'); - console.log('제출된 데이터: ', data); } } catch (error) { console.log(error); diff --git a/src/components/mypage/Category.jsx b/src/components/mypage/Category.jsx index caa2b52e..f4a5ffc7 100644 --- a/src/components/mypage/Category.jsx +++ b/src/components/mypage/Category.jsx @@ -1,10 +1,14 @@ import SubCateGoryPage from './SubCateGoryPage'; import { ETC, SUPPORT, USER_SETTING } from '@/constants/subcategory'; +import useAuth from '@/store/useAuth'; const Category = () => { + const { isLogin } = useAuth(); return ( <> - + {isLogin && ( + + )} diff --git a/src/components/mypage/SubCateGoryPage.jsx b/src/components/mypage/SubCateGoryPage.jsx index 2d1868a0..9375bf3d 100644 --- a/src/components/mypage/SubCateGoryPage.jsx +++ b/src/components/mypage/SubCateGoryPage.jsx @@ -1,32 +1,17 @@ -import LogoutModal from '../modal/mypage/LogoutModal'; -import PublicScopeModal from '../modal/mypage/PublicScopeModal'; import * as S from './SubCateGoryPage.style'; -import useLogoutModal from '@/hooks/modal/useLogoutModal'; -import usePublicScopeModal from '@/hooks/modal/usePublicScopeModal'; -import useAuth from '@/store/useAuth'; const SubCateGoryPage = ({ header, listName }) => { - const publicScopeModal = usePublicScopeModal(); - return (

{header}

{listName?.map(list => ( - { - if (list.modal === true && list.id === 3) { - return publicScopeModal.onOpen(); - } - }}> +

{list.title}

 ))} - - ); }; diff --git a/src/components/navbar/Navbar.jsx b/src/components/navbar/Navbar.jsx index 5a6e4c6f..0c978517 100644 --- a/src/components/navbar/Navbar.jsx +++ b/src/components/navbar/Navbar.jsx @@ -1,3 +1,5 @@ +import toast from 'react-hot-toast'; + import * as S from './Navbar.style'; import Bell from '/images/Bell.svg'; import User from '/images/User.svg'; @@ -6,9 +8,10 @@ import { useUnReadNotification } from '@/hooks/notification/useGetNotification'; import useAuth from '@/store/useAuth'; const Navbar = () => { - const { isAuth } = useAuth(); const { data: unReadCount, isPending, isError } = useUnReadNotification(); + const { isLogin } = useAuth(); const unReadCounter = unReadCount?.data?.data?.unreadCount; + return ( @@ -17,12 +20,19 @@ const Navbar = () => { - - + {isLogin ? ( + + + + + {!unReadCounter ? null :

{unReadCounter}

} + + + ) : ( +
toast('로그인 후 알림을 확인해주세요!')}> - {unReadCounter === 0 ? null :

{unReadCounter}

} - - +
+ )} ); }; diff --git a/src/components/profile/ProfileBox.jsx b/src/components/profile/ProfileBox.jsx index ec8ab8f8..9d9c78fa 100644 --- a/src/components/profile/ProfileBox.jsx +++ b/src/components/profile/ProfileBox.jsx @@ -17,7 +17,6 @@ const ProfileBox = ({ profile }) => { toast.error('팔로우 요청을 실패했습니다. 나중에 다시 시도해주세요.'); }, onSettled: isSuccess => { - console.log(isSuccess); if (isSuccess.data.success === true) { toast.success(isSuccess.data.message); } else { diff --git a/src/components/profile/ProfileBox.style.js b/src/components/profile/ProfileBox.style.js index 4374278f..613c1b1c 100644 --- a/src/components/profile/ProfileBox.style.js +++ b/src/components/profile/ProfileBox.style.js @@ -76,6 +76,7 @@ const Button = styled.button` padding: 5px 11px; border-radius: 20px; margin-left: 10px; + color: ${theme.COLOR.MAIN.BLACK}; cursor: pointer; &:hover { diff --git a/src/components/protectedRoute/ProtectedRoute.jsx b/src/components/protectedRoute/ProtectedRoute.jsx index 5abae3fb..51cf95a0 100644 --- a/src/components/protectedRoute/ProtectedRoute.jsx +++ b/src/components/protectedRoute/ProtectedRoute.jsx @@ -9,7 +9,7 @@ import useAuth from '@/store/useAuth'; const ProtectedRouter = ({ children }) => { const navigate = useNavigate(); const { isLogin } = useAuth(); - console.log(isLogin); + return isLogin === true ? children : ; }; diff --git a/src/components/schedules/Schedules.jsx b/src/components/schedules/Schedules.jsx index 2c77c4e2..881b1894 100644 --- a/src/components/schedules/Schedules.jsx +++ b/src/components/schedules/Schedules.jsx @@ -97,7 +97,6 @@ const Schedules = ({ data, endDate, refetch }) => { ); if (res) { - console.log('제출된 데이터: ', data); refetch({ refetchPage: (page, index) => index === 0 }); toast.success('일정이 저장되었습니다.'); } diff --git a/src/components/schedules/SchedulesView.jsx b/src/components/schedules/SchedulesView.jsx index 4e11b79c..dbc8c685 100644 --- a/src/components/schedules/SchedulesView.jsx +++ b/src/components/schedules/SchedulesView.jsx @@ -7,10 +7,11 @@ import { Link } from 'react-router-dom'; import * as S from './SchedulesView.style'; import SchedulesViewSkeleton from './skeleton/SchedulesViewSkeleton'; import { getSchedule } from '@/apis/request/home'; +import useAuth from '@/store/useAuth'; import { useInfiniteQuery } from '@tanstack/react-query'; const SchedulesView = ({ startDate, endDate, journeyTitle }) => { - const accessToken = localStorage.getItem('x-access-token'); + const { isLogin } = useAuth(); const pageSize = 5; const date = new Date(startDate); @@ -33,7 +34,7 @@ const SchedulesView = ({ startDate, endDate, journeyTitle }) => { if (!lastPage?.data?.data?.data?.meta?.hasNextData) { return null; } else { - return lastPage?.data?.data?.data?.meta?.cursor + 1; + return lastPage?.data?.data?.data?.meta?.cursor; } }, staleTime: 60 * 1000, @@ -73,7 +74,7 @@ const SchedulesView = ({ startDate, endDate, journeyTitle }) => { )} - {!isLoading && !accessToken && ( + {!isLogin && ( 로그인 후 여정을 작성해보세요! diff --git a/src/components/signup/SignUpMyInfo.jsx b/src/components/signup/SignUpMyInfo.jsx index 08d801d7..8ff36023 100644 --- a/src/components/signup/SignUpMyInfo.jsx +++ b/src/components/signup/SignUpMyInfo.jsx @@ -34,7 +34,6 @@ const SignUpMyInfo = () => { const res = postAddInformation(data.nickname, data.introduction); if (res) { toast.success('정보가 입력되었습니다.'); - console.log('제출된 데이터: ', data); setTimeout(() => { navigate('/'); }, 500); diff --git a/src/constants/subcategory.js b/src/constants/subcategory.js index 465ce3b1..84f9e5ee 100644 --- a/src/constants/subcategory.js +++ b/src/constants/subcategory.js @@ -22,13 +22,13 @@ const USER_SETTING = [ link: '/signature', modal: false, }, - { - id: 3, - img: myPageImg.Lock, - title: '공개범위 설정', - link: null, - modal: true, - }, + // { + // id: 3, + // img: myPageImg.Lock, + // title: '공개범위 설정', + // link: null, + // modal: true, + // }, ]; const SUPPORT = [ @@ -36,21 +36,21 @@ const SUPPORT = [ id: 0, img: myPageImg.Question, title: '자주 묻는 질문', - link: 'https://www.notion.so/sally626/2364649c142d4ed6a65f8b8cc301a9a6?pvs=4', + link: 'https://sally626.notion.site/2364649c142d4ed6a65f8b8cc301a9a6', modal: false, }, { id: 1, img: myPageImg.Bug, title: '버그 및 오류 제보', - link: 'https://www.notion.so/sally626/c86010e2a9f448eea449f246115ee8a7?pvs=4', + link: 'https://sally626.notion.site/c86010e2a9f448eea449f246115ee8a7', modal: false, }, { id: 2, img: myPageImg.Chat, title: '의견 보내기', - link: 'https://www.notion.so/sally626/49fc0dfff6904eb9817d320eb7e4769d?pvs=4', + link: 'https://sally626.notion.site/49fc0dfff6904eb9817d320eb7e4769d', modal: false, }, ]; @@ -60,7 +60,7 @@ const ETC = [ id: 0, img: myPageImg.Sertificate, title: '개발자 소개', - link: 'https://www.notion.so/sally626/f566c3caed5747bb9a3fcfdc16b0857c?pvs=4', + link: 'https://sally626.notion.site/f566c3caed5747bb9a3fcfdc16b0857c', modal: false, }, // { diff --git a/src/hooks/home/useDetailJourneyMap.js b/src/hooks/home/useDetailJourneyMap.js deleted file mode 100644 index 8674acb6..00000000 --- a/src/hooks/home/useDetailJourneyMap.js +++ /dev/null @@ -1,28 +0,0 @@ -import { useEffect, useState } from 'react'; - -import { getDetailJourneyMap } from '@/apis/request/map'; - -export const useDetailJourneyMap = journeyId => { - const [data, setData] = useState([]); - const [loading, setLoading] = useState(false); - const [error, setError] = useState(false); - - useEffect(() => { - const fetchData = async () => { - try { - setLoading(true); - const res = await getDetailJourneyMap({ journeyId }); - const data = res.data.data; - setData(data); - } catch (e) { - setError(e.message || '에러가 발생했습니다.'); - } finally { - setLoading(false); - } - }; - - fetchData(); - }, []); - - return { data, loading, error }; -}; diff --git a/src/hooks/home/useGetDetailJourney.js b/src/hooks/home/useGetDetailJourney.js deleted file mode 100644 index cc712605..00000000 --- a/src/hooks/home/useGetDetailJourney.js +++ /dev/null @@ -1,28 +0,0 @@ -import { useEffect, useState } from 'react'; - -import { getDetailJourneyMap } from '@/apis/request/map'; - -export const useGetDetailJourneyMap = journeyId => { - const [data, setData] = useState([]); - const [loading, setLoading] = useState(false); - const [error, setError] = useState(false); - - useEffect(() => { - const fetchData = async () => { - try { - setLoading(true); - const res = await getDetailJourneyMap(journeyId); - const data = res.data.data; - setData(data); - } catch (e) { - setError(e.message || '에러가 발생했습니다.'); - } finally { - setLoading(false); - } - }; - - fetchData(); - }, []); - - return { data, loading, error }; -}; diff --git a/src/hooks/home/useLoadMonthlyJourney.js b/src/hooks/home/useLoadMonthlyJourney.js index f90a65ec..323f6ae3 100644 --- a/src/hooks/home/useLoadMonthlyJourney.js +++ b/src/hooks/home/useLoadMonthlyJourney.js @@ -3,7 +3,6 @@ import { useEffect, useState } from 'react'; import { loadMonthlySchedule } from '@/apis/request/home'; export const useLoadMonthlyJourney = (year, month) => { - console.log(year, month); const [data, setData] = useState([]); const [loading, setLoading] = useState(false); const [error, setError] = useState(false); diff --git a/src/hooks/mate/useExploreMate.js b/src/hooks/mate/useExploreMate.js index 6a35c709..8e2d2a3e 100644 --- a/src/hooks/mate/useExploreMate.js +++ b/src/hooks/mate/useExploreMate.js @@ -12,9 +12,7 @@ export const useExploreMate = userId => { try { setLoading(true); const res = await getExploreMate(userId); - console.log(res); const data = res.data.data.recommend_mates; - console.log(data); setData(data); } catch (e) { setError(e.message || '에러가 발생했습니다.'); diff --git a/src/hooks/mate/useGetLocationMate.js b/src/hooks/mate/useGetLocationMate.js index 316caa3b..763fe012 100644 --- a/src/hooks/mate/useGetLocationMate.js +++ b/src/hooks/mate/useGetLocationMate.js @@ -12,9 +12,7 @@ export const useGetLocationMate = () => { try { setLoading(true); const res = await getLocationMate(); - console.log(res); const data = res.data.data; - console.log(data); setData(data); } catch (e) { setError(e.message || '에러가 발생했습니다.'); diff --git a/src/hooks/mate/useMateProfileSearch.js b/src/hooks/mate/useMateProfileSearch.js deleted file mode 100644 index 5eb861c2..00000000 --- a/src/hooks/mate/useMateProfileSearch.js +++ /dev/null @@ -1,28 +0,0 @@ -import { useEffect, useState } from 'react'; - -import { getMateProfile } from '@/apis/request/mate'; - -export const useMateProfileSearch = userId => { - const [data, setData] = useState([]); - const [loading, setLoading] = useState(false); - const [error, setError] = useState(false); - - useEffect(() => { - const fetchData = async () => { - try { - setLoading(true); - const res = await getMateProfile(userId); - const data = res.data.data; - setData(data); - } catch (e) { - setError(e.message || '에러가 발생했습니다.'); - } finally { - setLoading(false); - } - }; - - fetchData(); - }, [userId]); - - return { data, loading, error }; -}; diff --git a/src/hooks/mate/useParticipateTeamMate.js b/src/hooks/mate/useParticipateTeamMate.js index 759045ea..661c28b2 100644 --- a/src/hooks/mate/useParticipateTeamMate.js +++ b/src/hooks/mate/useParticipateTeamMate.js @@ -13,7 +13,6 @@ export const useParticipateTeamMate = ruleId => { setLoading(true); const res = await getParticipateTeamMate(ruleId); const data = res.data.data.mates; - console.log(data); setData(data); } catch (e) { setError(e.message || '에러가 발생했습니다.'); diff --git a/src/hooks/mate/useSearchInviteMate.js b/src/hooks/mate/useSearchInviteMate.js index fc833604..5765a4d5 100644 --- a/src/hooks/mate/useSearchInviteMate.js +++ b/src/hooks/mate/useSearchInviteMate.js @@ -13,7 +13,6 @@ export const useSearchInviteMate = searchTerm => { setLoading(true); const res = await getSearchInviteMate(searchTerm); const data = res.data.data.mates; - console.log(data); setData(data); } catch (e) { setError(e.message || '에러가 발생했습니다.'); diff --git a/src/hooks/mate/useSearchMate.js b/src/hooks/mate/useSearchMate.js index 9f3751a3..3b77dcec 100644 --- a/src/hooks/mate/useSearchMate.js +++ b/src/hooks/mate/useSearchMate.js @@ -12,9 +12,7 @@ export const useSearchMate = (searchTerm, cursor, take) => { try { setLoading(true); const res = await getSearchMate(searchTerm, cursor, take); - console.log(res.data); const data = res.data.data.mates; - setData(data); } catch (e) { setError(e.message || '에러가 발생했습니다.'); diff --git a/src/hooks/mate/useTeamMateRuleComment.js b/src/hooks/mate/useTeamMateRuleComment.js deleted file mode 100644 index 454c8a99..00000000 --- a/src/hooks/mate/useTeamMateRuleComment.js +++ /dev/null @@ -1,29 +0,0 @@ -import { useEffect, useState } from 'react'; - -import { getTeamMateRuleComment } from '@/apis/request/mate'; - -export const useTeamMateRuleComment = (ruleId, cursor, take) => { - const [data, setData] = useState([]); - const [loading, setLoading] = useState(false); - const [error, setError] = useState(false); - - useEffect(() => { - const fetchData = async () => { - try { - setLoading(true); - const res = await getTeamMateRuleComment(ruleId, cursor, take); - const data = res.data.data; - - setData(data); - } catch (e) { - setError(e.message || '에러가 발생했습니다.'); - } finally { - setLoading(false); - } - }; - - fetchData(); - }, [ruleId]); - - return { data, loading, error }; -}; diff --git a/src/hooks/mate/useTeamMateRulePost.js b/src/hooks/mate/useTeamMateRulePost.js index 3297d558..399da5bf 100644 --- a/src/hooks/mate/useTeamMateRulePost.js +++ b/src/hooks/mate/useTeamMateRulePost.js @@ -12,9 +12,7 @@ export const useTeamMateRulePost = ruleId => { try { setLoading(true); const res = await getTeamMateRulePost(ruleId); - console.log(res); const data = res.data.data; - setData(data); } catch (e) { setError(e.message || '에러가 발생했습니다.'); diff --git a/src/hooks/mate/useTeamRuleList.js b/src/hooks/mate/useTeamRuleList.js deleted file mode 100644 index 5673c859..00000000 --- a/src/hooks/mate/useTeamRuleList.js +++ /dev/null @@ -1,28 +0,0 @@ -import { useEffect, useState } from 'react'; - -import { getTeamRuleList } from '@/apis/request/mate'; - -export const useTeamRuleList = () => { - const [data, setData] = useState([]); - const [loading, setLoading] = useState(false); - const [error, setError] = useState(false); - - useEffect(() => { - const fetchData = async () => { - try { - setLoading(true); - const res = await getTeamRuleList(); - const data = res.data.data; - setData(data); - } catch (e) { - setError(e.message || '에러가 발생했습니다.'); - } finally { - setLoading(false); - } - }; - - fetchData(); - }, []); - - return { data, loading, error }; -}; diff --git a/src/hooks/signature/useDeleteMySignature.js b/src/hooks/signature/useDeleteMySignature.js index 1eefc6fb..8c616152 100644 --- a/src/hooks/signature/useDeleteMySignature.js +++ b/src/hooks/signature/useDeleteMySignature.js @@ -14,7 +14,6 @@ export const useDeleteMySignature = signatureId => { setLoading(true); const res = await deleteMySignature(signatureId); const data = res.data.data; - console.log(res); setData(data); } catch (e) { setError(e.message || '에러가 발생했습니다.'); diff --git a/src/hooks/signature/useLikeSignature.js b/src/hooks/signature/useLikeSignature.js index 1c4c6ea8..61d24313 100644 --- a/src/hooks/signature/useLikeSignature.js +++ b/src/hooks/signature/useLikeSignature.js @@ -14,7 +14,6 @@ export const useLikeSignature = signatureId => { setLoading(true); const res = await likeSignature(signatureId); const data = res.data.data; - console.log(res); setData(data); } catch (e) { setError(e.message || '에러가 발생했습니다.'); diff --git a/src/hooks/signature/usePostNewSignature .js b/src/hooks/signature/usePostNewSignature .js deleted file mode 100644 index 116b6236..00000000 --- a/src/hooks/signature/usePostNewSignature .js +++ /dev/null @@ -1,30 +0,0 @@ -import { useEffect, useState } from 'react'; - -import { postNewSignature } from '@/apis/request/signature'; - -//시그니처 발행하기 -export const usePostNewSignature = postData => { - const [data, setData] = useState([]); - const [loading, setLoading] = useState(false); - const [error, setError] = useState(false); - - useEffect(() => { - const fetchData = async () => { - try { - setLoading(true); - const res = await postNewSignature({ postData }); - const data = res.data.data; - - setData(data); - } catch (e) { - setError(e.message || '에러가 발생했습니다.'); - } finally { - setLoading(false); - } - }; - - fetchData(); - }, []); - - return { data, loading, error }; -}; diff --git a/src/hooks/signature/useUpdateMySignature.js b/src/hooks/signature/useUpdateMySignature.js index 95a9a414..fdb718d8 100644 --- a/src/hooks/signature/useUpdateMySignature.js +++ b/src/hooks/signature/useUpdateMySignature.js @@ -14,7 +14,6 @@ export const useUpdateMySignature = (signatureId, { patchData }) => { setLoading(true); const res = await updateMySignature(signatureId, { patchData }); const data = res.data.data; - console.log(res); setData(data); } catch (e) { setError(e.message || '에러가 발생했습니다.'); diff --git a/src/index.css b/src/index.css index 70dd3ff9..d048ba47 100644 --- a/src/index.css +++ b/src/index.css @@ -102,6 +102,7 @@ max-width: 100%; border: none; line-height: 1.125em; + color: black; @media (min-width: 640px) { width: 500px; @@ -110,9 +111,17 @@ .react-calendar__month-view__weekdays { display: flex; - justify-content: center; + flex-direction: row; + margin-left: 30px; + gap: 5px; align-items: center; justify-content: center; + + @media (max-width: 600px) { + width: 100%; + margin-left: 4px; + gap: 0px; + } } .react-calendar__navigation__label > span { @@ -173,6 +182,7 @@ align-items: center; background-color: transparent; border: none; + color: black; } .react-calendar__tile:enabled:hover, diff --git a/src/mocks/handlers/signature.js b/src/mocks/handlers/signature.js index 63bf0092..b4e4b178 100644 --- a/src/mocks/handlers/signature.js +++ b/src/mocks/handlers/signature.js @@ -7,78 +7,70 @@ export const SignatureHandlers = [ //시그니처_내 시그니처 http.get(`${baseURL}${API_URL.GET_MY_SIGNATURE}`, ({ request, params }) => { return HttpResponse.json({ - timestamp: '2024-02-03T08:18:18.076Z', - code: 'OK', + status: 200, success: true, - message: '내 시그니처 가져오기 성공', + message: '내 시그니처 조회 성공', data: [ { - _id: 1, - title: '호주와 겨룬 8강전 직관 후기', - date: '2024-02-03T08:03:22.000Z', + id: '01', + title: '시그니처 제목1', + date: '24/01/19', image: 'https://images.unsplash.com/photo-1671920090611-9a40303b52cb?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', }, { - _id: 2, - title: '강남역 근처 카페 모음', - date: '2024-02-03T08:14:40.000Z', + id: '02', + title: '시그니처 제목2', + date: '24/01/19', image: 'https://images.unsplash.com/photo-1671920090611-9a40303b52cb?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', }, + ], + }); + }), + + //시그니처_발행하기 + http.post(`${baseURL}${API_URL.PUBLISH_SIGNATURE}`, ({ request, params }) => { + return HttpResponse.json({ + title: '새로운 시그니처 제목', + pages: [ { - _id: 3, - title: '호주와 겨룬 8강전 직관 후기', - date: '2024-02-03T08:03:22.000Z', + content: '오늘은 호수 공원을 산책했습니다 어쩌구', + location: '광교 호수 공원', + page: 1, image: 'https://images.unsplash.com/photo-1671920090611-9a40303b52cb?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', }, { - _id: 4, - title: '강남역 근처 카페 모음', - date: '2024-02-03T08:14:40.000Z', + content: '저는 원래 호수 산책을 참 좋아하는데요 어쩌구', + location: '동백 호수 공원', + page: 2, image: 'https://images.unsplash.com/photo-1671920090611-9a40303b52cb?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', }, { - _id: 5, - title: '호주와 겨룬 8강전 직관 후기', - date: '2024-02-03T08:03:22.000Z', + content: '오늘은 호수 공원을 산책했습니다 어쩌구', + location: '광교 호수 공원', + page: 3, image: 'https://images.unsplash.com/photo-1671920090611-9a40303b52cb?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', }, { - _id: 6, - title: '강남역 근처 카페 모음', - date: '2024-02-03T08:14:40.000Z', + content: '저는 원래 호수 산책을 참 좋아하는데요 어쩌구', + location: '동백 호수 공원', + page: 4, image: 'https://images.unsplash.com/photo-1671920090611-9a40303b52cb?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', }, ], }); }), - - //시그니처_발행하기 - http.post(`${baseURL}${API_URL.PUBLISH_SIGNATURE}`, ({ request, params }) => { - return HttpResponse.json({ - timestamp: '2024-02-03T08:14:40.451Z', - code: 'CREATED', - success: true, - message: '시그니처 기록하기 성공', - data: 2, - }); - }), - //시그니처_시그니처 상세보기 //내 시그니처 Response-Body X, 다른 사람의 시그니처 Response-Body 만 O //내가 작성한 거 추가해야함 http.get( `${baseURL}${API_URL.GET_DETAIL_SIGNATURE}`, ({ request, params }) => { - const signatureId = params.signatureId; - if (!signatureId) { - return new HttpResponse(null, { status: 404 }); - } return HttpResponse.json({ status: 200, success: true, @@ -100,36 +92,27 @@ export const SignatureHandlers = [ }, pages: [ { - _id: 1, - image: - 'https://images.unsplash.com/photo-1671920090611-9a40303b52cb?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', + image: 'image_url', location: '리라쿠마 카페, 긴자', content: '초등학교때부터 가고 싶었던 리락쿠마 카페를 다녀왔어요.', page: 1, }, { - _id: 2, - image: - 'https://images.unsplash.com/photo-1671920090611-9a40303b52cb?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', - location: '서울, 강동', - content: '강동강동강동강동강동강동', + image: 'image_url', + location: '리라쿠마 카페, 긴자', + content: '초등학교때부터 가고 싶었던 리락쿠마 카페를 다녀왔어요.', page: 2, }, { - _id: 3, - image: - 'https://images.unsplash.com/photo-1671920090611-9a40303b52cb?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', - location: '경기도, 안산', - content: '안산시안산시안산시안산시', + image: 'image_url', + location: '리라쿠마 카페, 긴자', + content: '초등학교때부터 가고 싶었던 리락쿠마 카페를 다녀왔어요.', page: 3, }, { - _id: 4, - image: - 'https://images.unsplash.com/photo-1671920090611-9a40303b52cb?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', - location: '서울, 강남', - content: - '강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남강남', + image: 'image_url', + location: '리라쿠마 카페, 긴자', + content: '초등학교때부터 가고 싶었던 리락쿠마 카페를 다녀왔어요.', page: 4, }, ], @@ -139,34 +122,57 @@ export const SignatureHandlers = [ ), //시그니처_시그니처 수정하기 - http.patch( + http.post( `${baseURL}${API_URL.GET_DETAIL_SIGNATURE}`, ({ request, params }) => { return HttpResponse.json({ - timestamp: '2024-02-05T07:37:55.770Z', - code: 'OK', - success: true, - message: '시그니처 수정하기 성공', - data: '6', + title: '새로운 시그니처 제목', + pages: [ + { + content: '오늘은 호수 공원을 산책했습니다 어쩌구', + location: '광교 호수 공원', + page: 1, + image: + 'https://images.unsplash.com/photo-1671920090611-9a40303b52cb?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', + }, + { + content: '저는 원래 호수 산책을 참 좋아하는데요 어쩌구', + location: '동백 호수 공원', + page: 2, + image: + 'https://images.unsplash.com/photo-1671920090611-9a40303b52cb?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', + }, + { + content: '오늘은 호수 공원을 산책했습니다 어쩌구', + location: '광교 호수 공원', + page: 3, + image: + 'https://images.unsplash.com/photo-1671920090611-9a40303b52cb?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', + }, + { + content: '저는 원래 호수 산책을 참 좋아하는데요 어쩌구', + location: '동백 호수 공원', + page: 4, + image: + 'https://images.unsplash.com/photo-1671920090611-9a40303b52cb?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', + }, + ], }); }, ), - //시그니처_시그니처 삭제하기 http.delete( `${baseURL}${API_URL.GET_DETAIL_SIGNATURE}`, ({ request, params }) => { return HttpResponse.json({ - timestamp: '2024-02-05T07:40:21.691Z', - code: 'OK', + status: 204, success: true, - message: '시그니처 삭제 성공', - data: null, + message: '시그니처 삭제하기 성공', }); }, ), - //시그니처_시그니처 좋아요, 좋아요 취소 + //좋아요만 -> 좋아요 취소 추가해야함 http.patch(`${baseURL}${API_URL.LIKE_SIGNATURE}`, ({ request, params }) => { return HttpResponse.json({ timestamp: '2024-02-03T07:07:13.749Z', @@ -180,39 +186,8 @@ export const SignatureHandlers = [ }); }), - //시그니처_시그니처 좋아요한 사용자 목록 - http.get(`${baseURL}${API_URL.LIKELIST_SIGNATURE}`, ({ request, params }) => { - return HttpResponse.json({ - timestamp: '2024-02-05T15:03:14.672Z', - code: 'OK', - success: true, - message: '시그니처 좋아요 목록 불러오기 성공', - data: { - liked: 3, - profiles: [ - { - _id: 1, - image: 'imagekey1', - introduction: '사용자 소개', - nickname: '완두콩', - is_followed: null, - }, - { - _id: 2, - image: 'imagekey2', - introduction: '사용자 소개', - nickname: '강낭콩', - is_followed: false, - }, - { - _id: 3, - image: 'imagekey3', - introduction: '사용자 소개', - nickname: '검은콩', - is_followed: false, - }, - ], - }, - }); - }), + //시그니처_시그니처 좋아요한 사용자 목록 (API명세서 미완성) + // http.get(`${baseURL}${API_URL.LIKE_SIGNATURE}`, ({ request, params }) => { + // return HttpResponse.json(); + // }), ]; diff --git a/src/pages/dailyRecord/DailyRecordPage.jsx b/src/pages/dailyRecord/DailyRecordPage.jsx index 82ac8bc3..4865e7a4 100644 --- a/src/pages/dailyRecord/DailyRecordPage.jsx +++ b/src/pages/dailyRecord/DailyRecordPage.jsx @@ -3,6 +3,7 @@ import { useMemo } from 'react'; import { useLocation } from 'react-router-dom'; import * as S from './DailyRecordPage.style'; +import DailyRecordEditSkeleton from './edit/skeleton/DailyRecordEditSkeleton'; import PenGreen from '/icons/PenGreen.svg'; import { MOOD_ICON_LIST, WEATHER_ICON_LIST } from '@/constants/dailyRecord'; import { useGetDiary } from '@/hooks/home/useGetDiary'; @@ -18,49 +19,51 @@ const DailyRecordPage = () => { return { date }; }, [diaryData]); - if (loading) { - return
로딩 중입니다..
; - } - if (error) { return ; } return ( - - - {Date.date && Date?.date[0]} - - {Date.date && Date?.date[1]}, {Date.date && Date?.date[2]} - - - - - - - {diaryData?.place} - {diaryData?.title} + <> + {loading ? ( + + ) : ( + + + {Date.date && Date?.date[0]} + + {Date.date && Date?.date[1]}, {Date.date && Date?.date[2]} + + + + + + + {diaryData?.place} + {diaryData?.title} - - {WEATHER_ICON_LIST.map(item => { - if (item.iconName === diaryData?.weather) { - return ; - } - })} - {MOOD_ICON_LIST.map(item => { - if (item.iconName === diaryData?.mood) { - return ; - } - })} - - {diaryData?.content} - + + {WEATHER_ICON_LIST.map(item => { + if (item.iconName === diaryData?.weather) { + return ; + } + })} + {MOOD_ICON_LIST.map(item => { + if (item.iconName === diaryData?.mood) { + return ; + } + })} + + {diaryData?.content} + - - - - + + + + + )} + ); }; diff --git a/src/pages/dailyRecord/List/DailyRecordListPage.jsx b/src/pages/dailyRecord/List/DailyRecordListPage.jsx index 3c3da30c..b23c4f76 100644 --- a/src/pages/dailyRecord/List/DailyRecordListPage.jsx +++ b/src/pages/dailyRecord/List/DailyRecordListPage.jsx @@ -30,7 +30,6 @@ const DailyRecordListPage = () => { useEffect(() => { const validData = diaryData?.diaryList?.filter(s => s !== null); - // console.log('실제로 존재하는 일지: ', validData); setValidDiaryData(validData); }, [diaryData]); @@ -60,13 +59,9 @@ const DailyRecordListPage = () => { } }; - if (!validDiaryData) { - return
로딩 중입니다..
; - } - return ( <> - {!loading ? ( + {loading || !validDiaryData ? ( ) : ( diff --git a/src/pages/dailyRecord/edit/DailyRecordEdit.style.js b/src/pages/dailyRecord/edit/DailyRecordEdit.style.js index 270d277c..9610bdf2 100644 --- a/src/pages/dailyRecord/edit/DailyRecordEdit.style.js +++ b/src/pages/dailyRecord/edit/DailyRecordEdit.style.js @@ -141,6 +141,7 @@ const TitleText = styled.input` font-weight: 700; text-align: center; border: none; + padding: 0 5px; &::placeholder { color: #aaa; diff --git a/src/pages/dailyRecord/edit/DailyRecordEditPage.jsx b/src/pages/dailyRecord/edit/DailyRecordEditPage.jsx index 9a6a62d1..c40d4c17 100644 --- a/src/pages/dailyRecord/edit/DailyRecordEditPage.jsx +++ b/src/pages/dailyRecord/edit/DailyRecordEditPage.jsx @@ -99,13 +99,11 @@ const DailyRecordEditPage = () => { setLoading(true); const res = await updateDiary(diaryId, data); if (res) { - console.log('제출된 데이터: ', data); toast.success('수정되었습니다'); navigate(`/dailyrecord?scheduleId=${scheduleId}`); } } catch (e) { setError(e); - console.log(e); toast.error('일지 수정 중에 에러가 발생했습니다. 다시 시도해주세요'); } finally { setLoading(false); diff --git a/src/pages/dailyRecord/write/DailyRecordWrite.jsx b/src/pages/dailyRecord/write/DailyRecordWrite.jsx index 15b2c589..21162c2a 100644 --- a/src/pages/dailyRecord/write/DailyRecordWrite.jsx +++ b/src/pages/dailyRecord/write/DailyRecordWrite.jsx @@ -92,13 +92,11 @@ const DailyRecordWritePage = () => { setIsLoading(true); const res = await postDiary({ scheduleId: scheduleId, postData: data }); if (res) { - console.log('제출된 데이터: ', data); toast.success('하루 일지가 작성되었습니다.'); navigate(`/dailyrecord?scheduleId=${scheduleId}`); } } catch (e) { setIsError(true); - console.log(e); toast.error('작성 중 에러가 발생했습니다. 나중에 다시 시도해주세요'); } finally { setIsLoading(false); diff --git a/src/pages/home/Home.style.js b/src/pages/home/Home.style.js index 966a7186..051a6f1a 100644 --- a/src/pages/home/Home.style.js +++ b/src/pages/home/Home.style.js @@ -41,7 +41,6 @@ const Button = styled.button` color: ${props => props.clicked ? `${theme.COLOR.MAIN.GREEN}` : `${theme.COLOR.MAIN.GRAY}`}; font-size: ${FONT_SIZE.SM}; - font-weight: ${props => (props.clicked ? 'bold' : 'none')}; border-radius: 40px; cursor: pointer; @@ -58,6 +57,7 @@ const CalendarContainer = styled.div` const JourneyButtonContainer = styled.div` position: relative; + display: flex; flex-direction: row; diff --git a/src/pages/login/Login.jsx b/src/pages/login/Login.jsx index f03c4eba..c6f90fcd 100644 --- a/src/pages/login/Login.jsx +++ b/src/pages/login/Login.jsx @@ -1,59 +1,15 @@ -import { useState } from 'react'; -import { useNavigate } from 'react-router-dom'; - import * as S from './Login.style'; +import plane from '/images/airplane.svg'; import Logo from '/images/main.svg'; -import { axios, axiosWithToken } from '@/apis/api'; import LoginButton from '@/components/login/LoginButton'; -import useAuth from '@/store/useAuth'; const LoginPage = () => { - const [email, setEmail] = useState(''); - const [password, setPassword] = useState(''); - const navigate = useNavigate(); - const { login } = useAuth(); - - const handleSubmit = async e => { - e.preventDefault(); - - try { - const response = await axios.post( - 'https://hereyou.kaaang.dev/api/v1/user/login', - { - email, - password, - }, - ); - - console.log(response); - login(response.data.token); - navigate('/'); - } catch (error) { - console.error('Login failed:', error.message); - } - }; - return ( - + -
- setEmail(e.target.value)} - /> - setPassword(e.target.value)} - /> - -
); diff --git a/src/pages/login/Login.style.js b/src/pages/login/Login.style.js index e9ce1dcb..0f75c67f 100644 --- a/src/pages/login/Login.style.js +++ b/src/pages/login/Login.style.js @@ -2,6 +2,46 @@ import styled, { keyframes } from 'styled-components'; import theme from '@/theme'; +const airplaneAnimation = keyframes` + 0% { + transform: translateX(-100%) translateY(40px) rotate(0deg); + opacity: 1; + } + + 30% { + transform: translateX(100%) translateY(-50px) rotate(0deg); + opacity: 1; + } + 40% { + transform: translateX(250%) translateY(-50px) rotate(-100deg); + opacity: 1; + } + 60% { + transform: translateX(-100%) translateY(-150px) rotate(-100deg); + opacity: 1; + + } + 70%{ + opacity:0; + transform: translateX(-100%) translateY(-150px) rotate(-100deg); + } + 100% { + opacity: 0; + + transform: translateX(-100%) translateY(-150px) rotate(-100deg); + } + +`; + +const rotate360 = keyframes` + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +`; + const fadeIn = keyframes` from { opacity: 0; @@ -15,21 +55,23 @@ const LoginContainer = styled.div` ${theme.ALIGN.COLUMN_CENTER}; justify-content: space-evenly; height: 100%; + /* background-image: url('/images/background.svg'); + background-size: cover; + background-position: center; */ +`; +const AirPlane = styled.img` + width: 200px; + animation: ${airplaneAnimation} 3s linear forwards; `; const LogoImg = styled.img` width: 65%; - margin-bottom: 100px 0px 200px 0px; + margin-top: 20px; animation: ${fadeIn} 1s ease-in-out; `; -const LoginButtonWrapper = styled.div` - display: flex; - width: 100%; -`; const ButtonWrap = styled.div` width: 70%; - margin-top: 150px; `; -export { LoginContainer, LoginButtonWrapper, LogoImg, ButtonWrap }; +export { LoginContainer, LogoImg, ButtonWrap, AirPlane }; diff --git a/src/pages/mate/Mate.jsx b/src/pages/mate/Mate.jsx index 4229eacc..6f94fafa 100644 --- a/src/pages/mate/Mate.jsx +++ b/src/pages/mate/Mate.jsx @@ -43,7 +43,6 @@ const MatePage = () => { toast.error('팔로우 요청을 실패했습니다. 나중에 다시 시도해주세요.'); }, onSettled: isSuccess => { - console.log(isSuccess); if (isSuccess.data.success === true) { toast.success(isSuccess.data.message); } else { @@ -78,7 +77,7 @@ const MatePage = () => { console.error(e); } }}> - {member.isFollowing === true ? '언팔로우' : '팔로우'} + {member.isFollowing === true ? '팔로잉' : '팔로우'} {member.introduction} diff --git a/src/pages/mate/Mate.style.js b/src/pages/mate/Mate.style.js index eefd8b48..7e258bdc 100644 --- a/src/pages/mate/Mate.style.js +++ b/src/pages/mate/Mate.style.js @@ -57,7 +57,7 @@ const NickNameContainer = styled.div` const FollowButton = styled.button` background-color: ${props => - props.follow ? theme.COLOR.MAIN.RED : theme.COLOR.MAIN.MEDIUM_GREEN}; + props.follow ? theme.COLOR.MAIN.GRAY : theme.COLOR.MAIN.MEDIUM_GREEN}; padding: 8px 16px; border: none; border-radius: 20px; diff --git a/src/pages/mate/main/MateMain.jsx b/src/pages/mate/main/MateMain.jsx index c3e54ea1..f7cd368e 100644 --- a/src/pages/mate/main/MateMain.jsx +++ b/src/pages/mate/main/MateMain.jsx @@ -1,9 +1,12 @@ +import toast from 'react-hot-toast'; + import * as S from './MateMain.style'; import mateRuleCheckIcon from '/images/mate/mateRule_check.svg'; import mateRuleWriteIcon from '/images/mate/mateRule_write.svg'; import mateManagementIcon from '/images/mate/mate_management.svg'; import mateSearchIcon from '/images/mate/mate_search.svg'; import Card from '@/components/mate/Card'; +import useAuth from '@/store/useAuth'; const MY_MATE = [ { @@ -39,32 +42,40 @@ const OUR_RULE = [ }, ]; -const renderCards = data => { - return data.map(({ id, link, text1, text2, imgSrc }) => ( - - - - )); +const renderCards = (data, isLogin) => { + return isLogin + ? data.map(({ id, link, text1, text2, imgSrc }) => ( + + + + )) + : data.map(({ id, link, text1, text2, imgSrc }) => ( + toast('로그인 후 이용 가능합니다.')}> + + + )); }; const MateMainPage = () => { + const { isLogin } = useAuth(); return ( - 여행의 이유를 함께 찾아줄 친구를 - ID로 추가해보세요! + 여행의 이유를 함께 찾아볼 친구를 추가해보세요! 내 메이트 나와 함께 여행 할 메이트들을 찾아보세요! - {renderCards(MY_MATE)} + {renderCards(MY_MATE, isLogin)} 우리 여행의 규칙은? 함께 여행할 메이트들과 규칙을 정해보세요! - {renderCards(OUR_RULE)} + {renderCards(OUR_RULE, isLogin)} ); diff --git a/src/pages/mate/main/MateMain.style.js b/src/pages/mate/main/MateMain.style.js index 52cac9fa..7daef71d 100644 --- a/src/pages/mate/main/MateMain.style.js +++ b/src/pages/mate/main/MateMain.style.js @@ -74,6 +74,10 @@ const LinkTo = styled(Link)` color: inherit; `; +const CardButton = styled.div` + cursor: pointer; +`; + export { Maincontainer, SpanWrapper, @@ -82,4 +86,5 @@ export { Des, CardContainer, LinkTo, + CardButton, }; diff --git a/src/pages/mate/ruleEdit/RuleEdit.jsx b/src/pages/mate/ruleEdit/RuleEdit.jsx index 960d871b..e2c1a0db 100644 --- a/src/pages/mate/ruleEdit/RuleEdit.jsx +++ b/src/pages/mate/ruleEdit/RuleEdit.jsx @@ -84,7 +84,6 @@ const RuleEditPage = () => { rulePairs: sortedRulePairs, membersId: extractMembersId, }; - console.log(postDataWithId); updateTeamMateRule(ruleId, { postDataWithId }) .then(() => { diff --git a/src/pages/mate/ruleEdit/RuleEdit.style.js b/src/pages/mate/ruleEdit/RuleEdit.style.js index f40e2310..f466c113 100644 --- a/src/pages/mate/ruleEdit/RuleEdit.style.js +++ b/src/pages/mate/ruleEdit/RuleEdit.style.js @@ -2,6 +2,7 @@ import styled from 'styled-components'; import { FONT_SIZE } from '@/constants/size'; import theme from '@/theme'; +import { th } from 'date-fns/locale'; const Container = styled.div` ${theme.ALIGN.COLUMN_CENTER}; @@ -89,6 +90,7 @@ const DeleteRuleButton = styled.button` border-radius: 10px; text-align: center; cursor: pointer; + color: ${theme.COLOR.MAIN.BLACK}; &:hover { transform: scale(0.9); @@ -122,6 +124,7 @@ const AddQuestionButton = styled.button` border-radius: 10px; background-color: ${theme.COLOR.MAIN.LIGHT_GREEN}; cursor: pointer; + color: ${theme.COLOR.MAIN.BLACK}; &:hover { transform: scale(0.9); diff --git a/src/pages/mate/ruleWrite/MateRuleWrite.jsx b/src/pages/mate/ruleWrite/MateRuleWrite.jsx index 312cdd81..ed60bc57 100644 --- a/src/pages/mate/ruleWrite/MateRuleWrite.jsx +++ b/src/pages/mate/ruleWrite/MateRuleWrite.jsx @@ -82,17 +82,17 @@ const MateRuleWritePage = () => { { const newRules = [...rules]; newRules[index].ruleTitle = e.target.value; setRules(newRules); }} - maxlength="20" + maxLength="250" /> { const newRules = [...rules]; @@ -101,7 +101,7 @@ const MateRuleWritePage = () => { }} rows="5" columns="2" - maxlength="1500" + maxLength="1500" /> handleRemoveRule(index)}> X diff --git a/src/pages/mate/ruleWrite/MateRuleWrite.style.js b/src/pages/mate/ruleWrite/MateRuleWrite.style.js index 4829184f..dfe38964 100644 --- a/src/pages/mate/ruleWrite/MateRuleWrite.style.js +++ b/src/pages/mate/ruleWrite/MateRuleWrite.style.js @@ -5,13 +5,11 @@ import theme from '@/theme'; const Container = styled.div` ${theme.ALIGN.COLUMN_CENTER}; - width: 100%; - height: 100%; `; const Wrapper = styled.div` width: 80%; - height: 85%; + height: 900px; overflow-y: scroll; border: 2px solid ${theme.COLOR.MAIN.HEAVY_GREEN}; @@ -36,7 +34,7 @@ const TitleInput = styled.input` font-size: ${FONT_SIZE.TWO_XL}; @media ${theme.WINDOW_SIZE.MOBILE} { - font-size: ${FONT_SIZE.LG}; + font-size: ${FONT_SIZE.SM}; padding: 10px; } `; @@ -55,9 +53,6 @@ const PlusSvg = styled.img` const MatesContainer = styled.div` ${theme.ALIGN.ROW_CENTER}; gap: 2px; - width: 90%; - margin: 0 auto; - overflow: scroll; `; const MatesImages = styled.img` @@ -91,6 +86,7 @@ const DeleteRuleButton = styled.button` border-radius: 10px; text-align: center; cursor: pointer; + color: ${theme.COLOR.MAIN.BLACK}; &:hover { transform: scale(0.9); @@ -104,7 +100,7 @@ const ContentTitleInput = styled.input` font-size: ${FONT_SIZE.BASE}; @media ${theme.WINDOW_SIZE.MOBILE} { - font-size: ${FONT_SIZE.S}; + font-size: ${FONT_SIZE.XS}; } `; @@ -132,6 +128,7 @@ const AddQuestionButton = styled.button` border-radius: 10px; background-color: ${theme.COLOR.MAIN.LIGHT_GREEN}; cursor: pointer; + color: ${theme.COLOR.MAIN.BLACK}; &:hover { transform: scale(0.9); @@ -141,7 +138,7 @@ const AddQuestionButton = styled.button` const SubmitBtn = styled.button` border: none; width: 200px; - height: 43px; + height: 50px; margin-top: 20px; background-color: ${theme.COLOR.MAIN.HEAVY_GREEN}; color: white; diff --git a/src/pages/mypage/diary/MyDiary.jsx b/src/pages/mypage/diary/MyDiary.jsx index 521dc268..6e4e87e4 100644 --- a/src/pages/mypage/diary/MyDiary.jsx +++ b/src/pages/mypage/diary/MyDiary.jsx @@ -30,7 +30,7 @@ const MyDiary = () => { - {isFetching + {isLoading ? new Array(10).fill(0).map(() => ) : diaryList?.map((page, pageIndex) => ( diff --git a/src/pages/quitUserPage/QuitUserPage.jsx b/src/pages/quitUserPage/QuitUserPage.jsx index d611cf88..8263ddb4 100644 --- a/src/pages/quitUserPage/QuitUserPage.jsx +++ b/src/pages/quitUserPage/QuitUserPage.jsx @@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom'; import * as S from './QuitUserPage.style'; import RedirectIcon from '/images/RedirectIcon.png'; -const QuitUserPage = ({ type }) => { +const QuitUserPage = ({ type, bgColor }) => { const navigate = useNavigate(); let message; switch (type) { @@ -20,7 +20,7 @@ const QuitUserPage = ({ type }) => { message = ''; } return ( - +

{message}

navigate('/')}>홈 화면으로 돌아가기 diff --git a/src/pages/quitUserPage/QuitUserPage.style.js b/src/pages/quitUserPage/QuitUserPage.style.js index 03014cf0..fe2fdd99 100644 --- a/src/pages/quitUserPage/QuitUserPage.style.js +++ b/src/pages/quitUserPage/QuitUserPage.style.js @@ -20,7 +20,8 @@ const Container = styled.div` width: 100%; height: 100%; gap: 30px; - background-color: ${theme.COLOR.MAIN.LIGHT_GRAY}; + background-color: ${props => + props?.$bgColor ? props.$bgColor : `${theme.COLOR.MAIN.LIGHT_GRAY}`}; h3 { color: ${theme.COLOR.MAIN.BLACK}; diff --git a/src/pages/signature/SignaturePage.jsx b/src/pages/signature/SignaturePage.jsx index 5fe9a3df..f8e7ab7d 100644 --- a/src/pages/signature/SignaturePage.jsx +++ b/src/pages/signature/SignaturePage.jsx @@ -1,13 +1,15 @@ -import React, { useEffect, useState } from 'react'; +import React, { useState } from 'react'; +import toast from 'react-hot-toast'; import * as S from './SignaturePage.style'; import MySignaturePage from './main/MySignaturePage'; import Editor from './write/Editor'; -import { getSignaturePreview } from '@/apis/request/preview'; import Banner from '@/components/banner/Banner'; +import useAuth from '@/store/useAuth'; import useSignatureWrite from '@/store/useSignatureWrite'; export default function SignaturePage() { + const { isLogin } = useAuth(); const [selectedHeader, setSelectedHeader] = useState('내 시그니처'); const handleHeaderClick = header => { setSelectedHeader(header); @@ -22,7 +24,7 @@ export default function SignaturePage() { { - if (selectedHeader === '작성하기') { + if (selectedHeader === '작성하기' && isLogin) { if ( !confirm( '지금 작성 중인 모든 내용이 사라집니다.\n내 시그니처로 이동할까요?', @@ -41,8 +43,12 @@ export default function SignaturePage() { { - handleHeaderClick('작성하기'); - addPage(); + if (isLogin) { + handleHeaderClick('작성하기'); + addPage(); + } else { + toast('로그인이 필요한 기능입니다.'); + } }}> 작성하기 diff --git a/src/pages/signature/edit/Editor.jsx b/src/pages/signature/edit/Editor.jsx index 3928d8cb..d196200f 100644 --- a/src/pages/signature/edit/Editor.jsx +++ b/src/pages/signature/edit/Editor.jsx @@ -54,7 +54,6 @@ const Editor = ({ signatureId }) => { toast.success('시그니처가 수정되었습니다.'); navigate(`/signature/post/${signatureId}`); } - console.log(res); } catch (e) { setError(e); toast.error('에러가 발생했습니다.'); diff --git a/src/pages/signature/main/MySignaturePage.jsx b/src/pages/signature/main/MySignaturePage.jsx index 9b4f7df0..b5195141 100644 --- a/src/pages/signature/main/MySignaturePage.jsx +++ b/src/pages/signature/main/MySignaturePage.jsx @@ -3,9 +3,16 @@ import NoSignature from './NoSignature'; import Preview from '@/components/preview/Preview'; import PreviewSkeleton from '@/components/preview/skeleton/PreviewSkeleton'; import { useSignaturePreview } from '@/hooks/signature/useSignaturePreview '; +import { QuitUserPage } from '@/pages'; +import theme from '@/theme'; const MySignaturePage = () => { const { data: signaturePreview, loading, error } = useSignaturePreview(); + if (error) { + return ( + + ); + } return ( {loading ? ( diff --git a/src/pages/signature/main/NoSignature.jsx b/src/pages/signature/main/NoSignature.jsx index cc2702ea..dcc3b881 100644 --- a/src/pages/signature/main/NoSignature.jsx +++ b/src/pages/signature/main/NoSignature.jsx @@ -11,7 +11,7 @@ export default function NoSignature() { - 아직 작성한 시그니처가 없어요! + 아직 작성한 시그니처가 없어요!! ); diff --git a/src/pages/signature/post/SignaturePost.jsx b/src/pages/signature/post/SignaturePost.jsx index d0c7d913..3c7502e4 100644 --- a/src/pages/signature/post/SignaturePost.jsx +++ b/src/pages/signature/post/SignaturePost.jsx @@ -43,7 +43,6 @@ const SignaturePostPage = () => { toast.error('좋아요를 실패했습니다. 나중에 다시 시도해주세요.'); }, onSettled: isSuccess => { - console.log(isSuccess); if (isSuccess.data.success === true) { toast.success(isSuccess.data.message); } else { @@ -67,7 +66,6 @@ const SignaturePostPage = () => { }; const handlePrevPage = () => { - console.log('첫 번째 페이지입니다.'); if (step > 1) { setStep(prevStep => prevStep - 1); } diff --git a/src/pages/signature/write/Editor.jsx b/src/pages/signature/write/Editor.jsx index c255203b..31cbb881 100644 --- a/src/pages/signature/write/Editor.jsx +++ b/src/pages/signature/write/Editor.jsx @@ -65,18 +65,14 @@ export default function Editor({ setSelectedHeader }) { try { setLoading(true); - console.log('title: ', title, 'pages: ', pages.slice(0, pages.length)); - console.log(allPagesFilled); const res = await postNewSignature(title, pages.slice(0, pages.length)); if (res) { toast.success('시그니처가 저장되었습니다.'); - console.log(res); updateTitle(''); } setSelectedHeader('내 시그니처'); } catch (e) { setError(e); - console.log(e); toast.error('에러가 발생했습니다.'); } finally { setLoading(false); @@ -122,7 +118,9 @@ export default function Editor({ setSelectedHeader }) { - 발행 + + 발행 + {(currentPageIndex === pages.length - 1 || pages.length === 1) && ( 페이지 추가 )} diff --git a/src/utils/randomColor.js b/src/utils/randomColor.js index 4a0021c7..a958facf 100644 --- a/src/utils/randomColor.js +++ b/src/utils/randomColor.js @@ -8,14 +8,14 @@ export const generateCSSForID = (id, color) => ` width: 30px; height: 30px; - font-size: 18px; + font-size: 16px; border-radius: 50%; ${theme.ALIGN.COLUMN_CENTER} @media (min-width: 600px) { - font-size: 22px; - width: 60px; - height: 60px; + font-size: 18px; + width: 50px; + height: 50px; } }