[Docs]: 캘린더, 지도 빼고 mocks서버 연결 완료

.github/workflows/main.yml

@@ -13,15 +13,18 @@ jobs:
       - name: Check Node v
         run: node -v
 
-      - name: .env setting
+      - 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
+          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
@@ -36,7 +39,7 @@ jobs:
       - name: Generate build
         run: yarn run build
 
-      - name: Deploy
+      - name: Deploy to S3
         env:
           AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
           AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
@@ -47,4 +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://here---you
+        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 "/*"

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,

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;

src/components/bottomSheet/BottomScrollPage.style.js

@@ -11,7 +11,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;

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={<S.NextBtn onClick={handleNext}>{'>'}</S.NextBtn>}
               />
             </S.CalendarContainer>
-            <S.IntroductionContainer>
-              {storedStartDate && storedEndDate ? (
-                <>
-                  <S.JouneyInfoContainer>
-                    {journeyTitle ? (
-                      <p>🏖️ 선택된 여정 : {journeyTitle}</p>
-                    ) : (
-                      <p>새로운 여정을 추가하고 여행 일정을 생성하세요!</p>
-                    )}
-
-                    <p>
-                      {moment(value).format('YYYY/MM/DD')} ~{' '}
-                      {moment(endDate).format('YYYY/MM/DD')}
-                    </p>
-                  </S.JouneyInfoContainer>
-                  <S.JouneyInfoContainer>
-                    <h3>
-                      Tip.{'\t'}
-                      <span>
-                        일지 작성 <S.Image src={EditLight} />
-                      </span>
-                      버튼을 눌러 일지를 작성하면 지도에서
-                      <br />
-                      이미지로 표시된 위치를 확인할 수 있습니다.
-                    </h3>
-                  </S.JouneyInfoContainer>
-                </>
-              ) : (
-                <p>
-                  달력에서 기간을 선택하면 저장된 일정을 확인할 수 있습니다.
-                </p>
-              )}
-            </S.IntroductionContainer>
+            {isLogin && (
+              <S.IntroductionContainer>
+                {storedStartDate && storedEndDate ? (
+                  <>
+                    <S.JouneyInfoContainer>
+                      {journeyTitle ? (
+                        <p>🏖️ 선택된 여정 : {journeyTitle}</p>
+                      ) : (
+                        <p>새로운 여정을 추가하고 여행 일정을 생성하세요!</p>
+                      )}
+
+                      <p>
+                        {moment(value).format('YYYY/MM/DD')} ~{' '}
+                        {moment(endDate).format('YYYY/MM/DD')}
+                      </p>
+                    </S.JouneyInfoContainer>
+                    <S.JouneyInfoContainer>
+                      <h3>
+                        Tip.{'\t'}
+                        <span>
+                          일지 작성 <S.Image src={EditLight} />
+                        </span>
+                        버튼을 눌러 일지를 작성하면 지도에서
+                        <br />
+                        이미지로 표시된 위치를 확인할 수 있습니다.
+                      </h3>
+                    </S.JouneyInfoContainer>
+                  </>
+                ) : !isLogin ? (
+                  <></>
+                ) : (
+                  <p>
+                    달력에서 기간을 선택하면 저장된 일정을 확인할 수 있습니다.
+                  </p>
+                )}
+              </S.IntroductionContainer>
+            )}
 
             <SchedulesView
               startDate={moment(value).format('YYYY/MM/DD')}

src/components/calendar/TravelCalendar.style.js

@@ -186,6 +186,7 @@ const PrevBtn = styled.button`
   border: none;
   font-size: 20px;
   left: 0;
+  color: ${theme.COLOR.MAIN.BLACK};
 
   @media (min-width: 768px) {
     position: absolute;
@@ -206,6 +207,7 @@ const NextBtn = styled.button`
   border: none;
   font-size: 20px;
   right: 0;
+  color: ${theme.COLOR.MAIN.BLACK};
 
   @media (min-width: 768px) {
     position: absolute;

src/components/comment/mate/commentInput/MateCommentInput.jsx

@@ -2,6 +2,7 @@ import { useRef, useState } from 'react';
 import toast from 'react-hot-toast';
 
 import * as S from './MateCommentInput.style';
+import Logo from '/images/mypage/MyPageLogo.svg';
 import { postMateRuleComment } from '@/apis/request/mate';
 import { useGetMyProfile } from '@/hooks/profile/queries/useGetMyProfile';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
@@ -44,7 +45,7 @@ const MateCommentInput = ({ ruleId }) => {
 
   return (
     <S.Container>
-      <S.Avatar src={myProfile} />
+      <S.Avatar src={myProfile ? myProfile : Logo} />
       <S.CommentInput
         id="content"
         rows={1}

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;

src/components/comment/signature/commentView/SignatureComment.jsx

@@ -111,9 +111,11 @@ const SignatureComment = ({ data }) => {
           <S.Name>{writer?.name}</S.Name>
           <S.LeftContent>
             {/* 본인 댓글이거나 게시글 주인인 경우에만 답글 버튼 표시 */}
-            <S.ReplyBtn onClick={() => setIsReplying(prev => !prev)}>
-              {isReplying === true ? <TiDeleteOutline /> : <HiReply />}
-            </S.ReplyBtn>
+            {isParentComment && (
+              <S.ReplyBtn onClick={() => setIsReplying(prev => !prev)}>
+                {isReplying === true ? <TiDeleteOutline /> : <HiReply />}
+              </S.ReplyBtn>
+            )}
             {/* 본인 댓글인 경우에만 수정 및 삭제 버튼 표시 */}
             {writer?.is_writer && !editMode && (
               <>
@@ -123,6 +125,23 @@ const SignatureComment = ({ data }) => {
                     setEditMode(true);
                   }}
                 />
+                {!can_delete && ( // can_delete가 false일 때만 쓰레기통 아이콘 표시
+                  <S.Icon
+                    src={Trash}
+                    onClick={async () => {
+                      try {
+                        await deleteReComment({ signatureId, commentId: _id });
+                      } catch (e) {
+                        console.error(e);
+                      }
+                    }}
+                  />
+                )}
+              </>
+            )}
+            {/* 모두 삭제하는 권한이 있는 경우. */}
+            {can_delete &&
+              !editMode && ( // writer가 아니고, can_delete가 true일 때만 쓰레기통 아이콘 표시
                 <S.Icon
                   src={Trash}
                   onClick={async () => {
@@ -133,8 +152,7 @@ const SignatureComment = ({ data }) => {
                     }
                   }}
                 />
-              </>
-            )}
+              )}
             {editMode && (
               <>
                 <S.Button

src/components/explore/SignatureSearchSlider.jsx

@@ -2,6 +2,8 @@ import { useNavigate } from 'react-router-dom';
 
 import Preview from './Preview';
 import * as S from './SignatureSearchSlider.style';
+import FollowRedirectPage from '@/pages/explore/followRedirect/FollowRedirectPage';
+import NoSignature from '@/pages/signature/main/NoSignature';
 
 const SignatureSearchSlider = ({ data, type, searchTerm }) => {
   const navigate = useNavigate();
@@ -15,6 +17,12 @@ const SignatureSearchSlider = ({ data, type, searchTerm }) => {
         <S.Title>"{searchTerm}" 에 관한 시그니처⭐</S.Title>
       )}
       <S.PreviewContainer>
+        {data?.length === 0 && (
+          <S.EmptyContainer>
+            {type === 'hot' && <NoSignature />}
+            {type === 'new' && <FollowRedirectPage />}
+          </S.EmptyContainer>
+        )}
         {data === null ? (
           <S.EmptyContainer>
             <S.Text>로그인 후</S.Text>

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';

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;

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;

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 ? (
-        <LoginSkeleton />
-      ) : (
-        <S.Wrapper>
-          <S.Container>
-            {isLogin ? (
-              <>
-                <S.Img src={myProfile?.profileImage} />
-                <S.TextContainer>
-                  <S.Text1>{myProfile?.nickname}님 환영합니다🪐</S.Text1>
-                  <S.ProfileContainer onClick={() => navigate('/mypage')}>
-                    <S.Text2>내 프로필 가기</S.Text2>
-                    <img src={rightIcon} />
-                  </S.ProfileContainer>
-                </S.TextContainer>
-              </>
-            ) : (
-              <>
-                <S.Img src={profileImg} />
-                <S.TextWrapper onClick={() => navigate('/login')}>
-                  <S.Text3>3초만에 로그인하기 </S.Text3>
-                  <img width="24px" src={rightIcon} />
-                </S.TextWrapper>
-              </>
-            )}
-          </S.Container>
-        </S.Wrapper>
-      )}
+      <S.Wrapper>
+        <S.Container>
+          {isLogin ? (
+            <>
+              <S.Img src={myProfile?.profileImage} />
+              <S.TextContainer>
+                <S.Text1>{myProfile?.nickname}님 환영합니다🪐</S.Text1>
+                <S.ProfileContainer onClick={() => navigate('/mypage')}>
+                  <S.Text2>내 프로필 가기</S.Text2>
+                  <img src={rightIcon} />
+                </S.ProfileContainer>
+              </S.TextContainer>
+            </>
+          ) : (
+            <>
+              <S.Img src={profileImg} />
+              <S.TextWrapper onClick={() => navigate('/login')}>
+                <S.Text3>3초만에 로그인하기 </S.Text3>
+                <img width="24px" src={rightIcon} />
+              </S.TextWrapper>
+            </>
+          )}
+        </S.Container>
+      </S.Wrapper>
     </>
   );
 }