chore: (#556) dev 브런치와 코드 충돌 해결

woowacourse-teams · Sep 14, 2023 · 9e019b6 · 9e019b6
2 parents 75adef7 + 92b697c
commit 9e019b6
Show file tree

Hide file tree

Showing 17 changed files with 181 additions and 61 deletions.
diff --git a/backend/src/main/java/com/votogether/domain/auth/controller/AuthController.java b/backend/src/main/java/com/votogether/domain/auth/controller/AuthController.java
@@ -75,7 +75,7 @@ private void addRefreshTokenToCookie(final HttpServletResponse httpServletRespon
  final ResponseCookie responseCookie = ResponseCookie.from("refreshToken", refreshToken)
  .httpOnly(true)
  .secure(true)
- .path("/auth")
+ .path("/")
  .maxAge(1209600)
  .sameSite(SameSite.NONE.attributeValue())
  .build();
@@ -94,7 +94,7 @@ private void expireCookie(final HttpServletResponse httpServletResponse, final S
  final ResponseCookie responseCookie = ResponseCookie.from("refreshToken", refreshToken)
  .httpOnly(true)
  .secure(true)
- .path("/auth")
+ .path("/")
  .maxAge(0)
  .sameSite(SameSite.NONE.attributeValue())
  .build();

diff --git a/backend/src/main/java/com/votogether/domain/auth/service/AuthService.java b/backend/src/main/java/com/votogether/domain/auth/service/AuthService.java
@@ -14,6 +14,7 @@
 import com.votogether.global.jwt.TokenPayload;
 import com.votogether.global.jwt.TokenProcessor;
 import com.votogether.global.jwt.exception.JsonException;
+import java.time.Duration;
 import java.util.Objects;
 import lombok.RequiredArgsConstructor;
 import org.springframework.data.redis.core.RedisTemplate;
@@ -58,7 +59,7 @@ public ReissuedTokenDto reissueAuthToken(
 
  final String newAccessToken = tokenProcessor.generateAccessToken(accessTokenPayload.memberId());
  final String newRefreshToken = tokenProcessor.generateRefreshToken(accessTokenPayload.memberId());
- redisTemplate.opsForValue().set(newRefreshToken, accessTokenPayload.memberId());
+ redisTemplate.opsForValue().set(newRefreshToken, accessTokenPayload.memberId(), Duration.ofDays(14L));
  return new ReissuedTokenDto(newAccessToken, newRefreshToken);
  }
 

diff --git a/frontend/env.d.ts b/frontend/env.d.ts
@@ -5,6 +5,6 @@ declare module NodeJS {
  VOTOGETHER_REST_API_KEY: string;
  VOTOGETHER_SERVER_REDIRECT_URL: string;
  VOTOGETHER_CHANNEL_TALK_KEY: string;
- VOTOGETHER_GOOGLE_TAG_ID: string;
+ VOTOGETHER_GOOGLE_ANALYTICS_ID: string;
  }
 }
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -24,7 +24,7 @@
  "msw": "^1.2.3",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
- "react-gtm-module": "^2.0.11",
+ "react-ga4": "^2.1.0",
  "react-router-dom": "^6.14.1"
  },
  "eslintConfig": {

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,4 +1,3 @@
-import { Suspense } from 'react';
 import { RouterProvider } from 'react-router-dom';
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
@@ -12,8 +11,6 @@ import router from '@routes/router';
 import ErrorBoundaryForTopClass from '@pages/ErrorBoundaryForTopClass';
 
 import ChannelTalk from '@components/ChannelTalk';
-import Skeleton from '@components/common/Skeleton';
-import GoogleTagManager from '@components/GoogleTagManager';
 
 import { GlobalStyle } from '@styles/globalStyle';
 import { theme } from '@styles/theme';
@@ -26,23 +23,18 @@ ChannelTalk.boot({
 });
 
 const App = () => (
- <>
- <ErrorBoundaryForTopClass>
- <QueryClientProvider client={queryClient}>
- <ThemeProvider theme={theme}>
- <GlobalStyle />
- <PostOptionProvider>
- <AuthProvider>
- <Suspense fallback={<Skeleton isLarge />}>
- <RouterProvider router={router} />
- </Suspense>
- </AuthProvider>
- </PostOptionProvider>
- </ThemeProvider>
- </QueryClientProvider>
- </ErrorBoundaryForTopClass>
- <GoogleTagManager gtmId={process.env.VOTOGETHER_GOOGLE_TAG_ID} />
- </>
+ <ErrorBoundaryForTopClass>
+ <QueryClientProvider client={queryClient}>
+ <ThemeProvider theme={theme}>
+ <GlobalStyle />
+ <PostOptionProvider>
+ <AuthProvider>
+ <RouterProvider router={router} />
+ </AuthProvider>
+ </PostOptionProvider>
+ </ThemeProvider>
+ </QueryClientProvider>
+ </ErrorBoundaryForTopClass>
 );
 
 export default App;
diff --git a/frontend/src/components/GoogleTagManager/index.tsx b/frontend/src/components/GoogleTagManager/index.tsx
diff --git a/frontend/src/components/PostForm/index.tsx b/frontend/src/components/PostForm/index.tsx
@@ -98,7 +98,11 @@ export default function PostForm({ data, mutate }: PostFormProps) {
  };
 
  const { text: writingTitle, handleTextChange: handleTitleChange } = useText(title ?? '');
- const { text: writingContent, handleTextChange: handleContentChange } = useText(content ?? '');
+ const {
+ text: writingContent,
+ handleTextChange: handleContentChange,
+ addText: addContent,
+ } = useText(content ?? '');
  const multiSelectHook = useMultiSelect(categoryIds ?? [], CATEGORY_COUNT_LIMIT);
 
  const handleDeadlineButtonClick = (option: DeadlineOption) => {
@@ -121,6 +125,10 @@ export default function PostForm({ data, mutate }: PostFormProps) {
  }
  };
 
+ const handleInsertContentLink = () => {
+ addContent('[[이 괄호 안에 링크를 작성해주세요]] ');
+ };
+
  const handlePostFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault();
  const formData = new FormData();
@@ -227,6 +235,11 @@ export default function PostForm({ data, mutate }: PostFormProps) {
  minLength={POST_CONTENT.MIN_LENGTH}
  required
  />
+ <S.ContentLinkButtonWrapper>
+ <S.Button onClick={handleInsertContentLink} type="button">
+ 본문에 링크 넣기
+ </S.Button>
+ </S.ContentLinkButtonWrapper>
  <S.ContentImagePartWrapper $hasImage={!!contentImageHook.contentImage}>
  <ContentImagePart size="lg" contentImageHook={contentImageHook} />
  </S.ContentImagePartWrapper>

diff --git a/frontend/src/components/PostForm/style.ts b/frontend/src/components/PostForm/style.ts
@@ -117,6 +117,33 @@ export const Content = styled.textarea`
  }
 `;
 
+export const ContentLinkButtonWrapper = styled.div`
+ width: 100%;
+ height: 36px;
+ margin-bottom: 5px;
+
+ @media (max-width: ${theme.breakpoint.sm}) {
+ }
+`;
+
+export const Button = styled.button`
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 100%;
+ border: 2px solid var(--primary-color);
+ border-radius: 5px;
+ padding: 5px 0;
+
+ color: var(--primary-color);
+ background-color: white;
+
+ font-size: 16px;
+
+ cursor: pointer;
+`;
+
 export const ContentImagePartWrapper = styled.div<{ $hasImage: boolean }>`
  justify-self: ${props => props.$hasImage && 'center'};
  height: 100%;

diff --git a/frontend/src/components/RouteChangeTracker/index.tsx b/frontend/src/components/RouteChangeTracker/index.tsx
@@ -0,0 +1,25 @@
+/* src/RouteChangeTracker.js */
+import { useEffect, useState } from 'react';
+import ReactGA from 'react-ga4';
+import { useLocation } from 'react-router-dom';
+
+export default function RouteChangeTracker() {
+ const location = useLocation();
+ const [initialized, setInitialized] = useState(false);
+
+ useEffect(() => {
+ if (process.env.VOTOGETHER_GOOGLE_ANALYTICS_ID) {
+ ReactGA.initialize(process.env.VOTOGETHER_GOOGLE_ANALYTICS_ID);
+ setInitialized(true);
+ }
+ }, []);
+
+ useEffect(() => {
+ if (initialized) {
+ ReactGA.set({ page: location.pathname });
+ ReactGA.send('pageview');
+ }
+ }, [initialized, location]);
+
+ return <></>;
+}
diff --git a/frontend/src/components/common/Post/index.tsx b/frontend/src/components/common/Post/index.tsx
@@ -1,4 +1,4 @@
-import { MouseEvent, useContext, useEffect } from 'react';
+import { useContext, useEffect } from 'react';
 
 import { PostInfo } from '@type/post';
 
@@ -13,6 +13,7 @@ import { PATH } from '@constants/path';
 import { POST } from '@constants/vote';
 
 import { convertImageUrlToServerUrl } from '@utils/post/convertImageUrlToServerUrl';
+import { linkifyText } from '@utils/post/formatContentLink';
 import { checkClosedPost, convertTimeToWord } from '@utils/time';
 
 import photoIcon from '@assets/photo_white.svg';
@@ -77,10 +78,6 @@ export default function Post({ postInfo, isPreview }: PostProps) {
  });
  };
 
- const handleLinkClick = (e: MouseEvent<HTMLAnchorElement>) => {
- if (!isPreview) e.preventDefault();
- };
-
  useEffect(() => {
  if (isCreateError && createError instanceof Error) {
  openToast(createError.message);
@@ -107,7 +104,6 @@ export default function Post({ postInfo, isPreview }: PostProps) {
  as={isPreview ? '' : 'main'}
  to={isPreview ? `${PATH.POST}/${postId}` : '#'}
  $isPreview={isPreview}
- onClick={handleLinkClick}
  aria-describedby={
  isPreview
  ? '해당 게시물의 상세페이지로 이동하기'
@@ -162,7 +158,7 @@ export default function Post({ postInfo, isPreview }: PostProps) {
  aria-label={`내용: ${content}`}
  $isPreview={isPreview}
  >
- {content}
+ {linkifyText(content)}
  </S.Content>
  {!isPreview && imageUrl && (
  <S.Image src={convertImageUrlToServerUrl(imageUrl)} alt={'본문에 포함된 이미지'} />

diff --git a/frontend/src/components/common/Post/style.ts b/frontend/src/components/common/Post/style.ts
@@ -92,7 +92,7 @@ export const Wrapper = styled.div`
  }
 `;
 
-export const Content = styled.p<{ $isPreview: boolean }>`
+export const Content = styled.div<{ $isPreview: boolean }>`
  display: -webkit-box;
 
  margin: 10px 0;
@@ -116,8 +116,6 @@ export const DetailLink = styled(Link)<{ $isPreview: boolean }>`
  display: flex;
  flex-direction: column;
  gap: 10px;
-
- pointer-events: ${({ $isPreview }) => !$isPreview && 'none'};
 `;
 
 export const Image = styled.img`

diff --git a/frontend/src/hooks/useText.ts b/frontend/src/hooks/useText.ts
@@ -26,5 +26,9 @@ export const useText = (originalText: string) => {
  setText('');
  };
 
- return { text, setText, handleTextChange, resetText };
+ const addText = (newTextToAdd: string) => {
+ setText(text + newTextToAdd);
+ };
+
+ return { text, setText, handleTextChange, resetText, addText };
 };
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import ReactGA from 'react-ga4';
 
 import ReactDOM from 'react-dom/client';
 
@@ -16,6 +17,10 @@ if (
  alert('이 브라우저는 지원 중단 되었습니다. 최적의 환경을 위해 브라우저를 업데이트 하세요.');
 }
 
+if (process.env.VOTOGETHER_GOOGLE_ANALYTICS_ID) {
+ ReactGA.initialize(process.env.VOTOGETHER_GOOGLE_ANALYTICS_ID);
+}
+
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 root.render(
  <React.StrictMode>

diff --git a/frontend/src/pages/Announcement/index.tsx b/frontend/src/pages/Announcement/index.tsx
@@ -57,8 +57,8 @@ export default function Announcement() {
  </strong>
  <br></br>
  <br></br>
- (이벤트 기간은 9월 13일(수)~9월 26일(화)이며, 상품 수령 대상자 명단은 공지사항
- 카테고리에서 확인 가능합니다🙂)
+ (이벤트 기간은 9월 14일(목)~9월 26일(화)이며, 상품 수령 대상자 명단은 공지사항
+ 페이지에서 확인 가능합니다🙂)
  </S.Content>
  <S.ButtonWrapper>
  <SquareButton