deploy: 백엔드 API Test를 위한 배포 (#77)

* style : 전역 디자인 시스템 세팅 * style : 전역 디자인 시스템 세팅 * chore : 이슈 템플릿 수정 * refactor: build-test.yml 파일 수정 (#14) - node_modules 캐싱 기능 추가 - main, dev 브랜치 push, PR 시 빌드 테스트 돌아가도록 수정 Co-authored-by: wukddang <[email protected]> * feature: deploy.yml 파일 추가 (#15) * feature: deploy.yml 파일 추가 - main 브랜치에 push할 때 S3로 파일 업로드 * fix: pre-push 코드 수정 * fix: deploy.yml 파일 수정 - build폴더가 아닌 dist 폴더로 수정 --------- Co-authored-by: wukddang <[email protected]> * [Style] 모바일 레이아웃 작업 (#19) * style : 모바일 레이아웃 작업 * chore : 이슈, pr 템플릿 docs 수정 * style: HeroImage, AlertText 공통 컴포넌트 제작 (#24) * style: HeroImage 추가 * style: AlertText * style: Input 공통 컴포넌트 (#26) * style: HeroImage 추가 * style: AlertText * style: Input * feature: Button 공통 컴포넌트 제작 (#20) * feature: 네이버, 카카오 아이콘 컴포넌트 추가 * feature: NormalButton 컴포넌트 추가 * feature: palette, typo 스타일 수정 * feature: Divider, Text 공통 컴포넌트 추가 * feature: IconButtons 추가 - 관심사, 네이버, 카카오, 특정 주제, 랜덤 매칭 버튼 * feature: Button 컴포넌트 사용법 + timeStamp 유틸 함수 추가 * feature: RandomMatchingJoin 버튼 추가 --------- Co-authored-by: wukddang <[email protected]> * style : flexbox 컴포넌트 제작 (#32) * style : spacing 컴포넌트 생성 (#33) * [Feature] mock service worker settings (#29) * deploy: 초기 배포 (#23) * style : 전역 디자인 시스템 세팅 * style : 전역 디자인 시스템 세팅 * chore : 이슈 템플릿 수정 * refactor: build-test.yml 파일 수정 (#14) - node_modules 캐싱 기능 추가 - main, dev 브랜치 push, PR 시 빌드 테스트 돌아가도록 수정 Co-authored-by: wukddang <[email protected]> * feature: deploy.yml 파일 추가 (#15) * feature: deploy.yml 파일 추가 - main 브랜치에 push할 때 S3로 파일 업로드 * fix: pre-push 코드 수정 * fix: deploy.yml 파일 수정 - build폴더가 아닌 dist 폴더로 수정 --------- Co-authored-by: wukddang <[email protected]> * [Style] 모바일 레이아웃 작업 (#19) * style : 모바일 레이아웃 작업 * chore : 이슈, pr 템플릿 docs 수정 --------- Co-authored-by: judahhh <[email protected]> Co-authored-by: wukddang <[email protected]> * chore : mock service worker 설치 및 세팅 * chore : mock service worder setting --------- Co-authored-by: Changuk Woo <[email protected]> Co-authored-by: wukddang <[email protected]> * style: BottomSheet 컴포넌트 제작 (#34) * feature: Timer 컴포넌트 추가 + d3.js 라이브러리 설치 * feature: BottomSheet 컴포넌트 추가 * feature: RandomMatchingJoinButton props 수정 * feature: framer-motion 설치 + 애니메이션 효과 추가 * refactor: BottomSheet 폴더 변경 * refactor: isDarkMode 필수 타입으로 수정 * refactor: AlertText, HeroImage 폴더 구조 변경 * refactor: BottomSheet 컴포넌트 분리 * feature: Avatar 컴포넌트 제작 * refactor: RandomMatchingSheet 컴포넌트 이벤트 props 추가 * fix: package-lock.json 파일 오류 수정 --------- Co-authored-by: wukddang <[email protected]> * [Style/] navigation bar 컴포넌트 제작 (#37) * style : 네비게이션 바 디자인 * style : 네비게이션 바 디자인 및 라우팅 처리 * fix : 프로필 이미지를 Avatar 컴포넌트를 이용하도록 수정 * chore : 타입 에러 해결 * chore : 홈 페이지에 네비게이션 바 예시 제거 * style: CountNumber 공통 컴포넌트 제작 (#38) * style: CountNumber * feat: Input Wrapper 추가. * chore : CountNumber 폴더 구조 변경 * style: InputTimer 공통 컴포넌트 제작 (#41) * style: CountNumber * feat: Input Wrapper 추가. * style: InputTimer 제작 * style : 로딩 컴포넌트 제작 (#47) * style: WhiteSelectorButton, DarkSelectorButton 공통 컴포넌트 (#46) * style: whiteselectorButton * refactor: 불필요 주석 삭제 * style: darkselectorbutton * Update src/components/common/DarkSelectorButton/index.tsx * Update src/components/common/WhiteSelectorButton/index.tsx * fix: font-weight 오타 수정 --------- Co-authored-by: Changuk Woo <[email protected]> Co-authored-by: wukddang <[email protected]> * style: ListRow 컴포넌트 제작 (#43) * refactor: Style prefix 붙이도록 수정 * refactor: Divider 컴포넌트 수정 + 웹 폰트 수정 - Divider 컴포넌트가 확장성 있도록 수정 - 웹 폰트 오타 수정 * feature: AdminListRow 컴포넌트 추가 - 관리자 페이지에 사용되는 ListRow 컴포넌트 * feature: ProfileListRow 컴포넌트 추가 - 프로필 페이지에 사용되는 ListRow --------- Co-authored-by: wukddang <[email protected]> * style: �useToast 커스텀 훅 제작 (#48) * feature: useToast 커스텀 훅 추가 * refactor: RandomMatchingJoinButton으로 이름 변경 * feature: Layout 컴포넌트에 ToastContainer 설정 * refactor: NormalButton 컴포넌트 수정 - isDarkMode props 받도록 수정 * fix: RandomMatchingJoin.tsx 파일 오류 수정 * fix: 파일명 오류 수정 --------- Co-authored-by: wukddang <[email protected]> * [Style] Modal 컴포넌트 제작 (#52) * chore : zustand 설치 및 store 폴더 생성 * feat : 모달창 전역 상태 추가 * style : 모달창 컴포넌트 제작 * fix: package.json 쉼표 오류 * �fix: package-lock.json 쉼표 오류 * fix : 모달창 type 받아 분기 처리 * fix : type 에러 수정 * chore : 주석 제거 * fix: isDarkMode 옵셔널로 수정 --------- Co-authored-by: Changuk Woo <[email protected]> Co-authored-by: wukddang <[email protected]> * style: selector button 공통 컴포넌트 (#55) * refactor: white,dark selectorbutton erase * style: selectorbutton * style: selectorbutton re * style: Appbar, Card, GradationBackground, PageContainer 컴포넌트 추가 + Home 페이지 레이아웃 추가 (#57) * refactor: CountNumber, Input 위치 변경 * refactor: Avatar 컴포넌트 props 타입 수정 + tsdoc 추가 * feature: Tip 컴포넌트 추가 * feature: AppHeader 컴포넌트 추가 * refactor: IconButtonType 수정 + 클릭 효과 속성 추가 * feature: Profile 페이지 라우팅 추가 * refactor: AppHeader 높이값 받도록 수정 * style: typo, palette, Layout, global 파일 수정 * refactor: RandomMatchingSheet 동적으로 변하도록 수정 * refactor: NormalButton 폴더 변경 + 클릭 시 배경 변경 타입 추가 * refactor: tsdoc 추가 * feature: GradationBackground 컴포넌트 추가 * refactor: NavigationBar 라우팅 + position: sticky로 수정 * feature: PageContainer 컴포넌트 추가 * feature: AvatarGroup 컴포넌트 추가 * feature: Card 컴포넌트 추가 * feature: Home 페이지 레이아웃 추가 * refactor: tsdoc 추가 * fix: merge conflict 해결용 파일 추가 * fix: NormalButton 파일 에러 수정 --------- Co-authored-by: wukddang <[email protected]> * style: PageHeader 컴포넌트 제작 (#59) * feature: ExitIcon 컴포넌트 추가 * feature: BackChevron 컴포넌트 추가 * feature: PageHeader 컴포넌트 추가 * refactor: 사용하지 않는 코드 제거 * refactor: tsdoc 추가 * refactor: tsdoc 추가 + exitClick으로 props명 변경 * refactor: PageHeader border-bottom 수정 --------- Co-authored-by: wukddang <[email protected]> * [Style] chatting bubble 컴포넌트 제작 및 소켓 라이브러리 설치 (#65) * style : chatting bubble 컴포넌트 publishing * chore : 소켓 라이브러리 stomp 설치 및 세팅 * style: BusinessCardContainer 공통 컴포넌트 (재PR) (#62) * feat: businesscardcontainer * style: Text 컴포넌트 textColor 속성 추가 * test: API Test 코드 (#76) * feat: businesscardcontainer * style: Text 컴포넌트 textColor 속성 추가 * style: alerttext, countnumber 수정 * style: selectorbutton 수정 * style: customselectorbutton * refactor: 필수 prop 설정 * style: selectorbuttoncontainer * refactor: 함수컴포넌트 구조 변경 * refactor: react 삭제 * test: APITest 코드 --------- Co-authored-by: judahhh <[email protected]> Co-authored-by: wukddang <[email protected]> Co-authored-by: from1to2 <[email protected]>
coffee-meet · Nov 2, 2023 · e3aafc6 · e3aafc6
1 parent 6fad26e
commit e3aafc6
Show file tree

Hide file tree

Showing 20 changed files with 885 additions and 30 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,20 +13,23 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@stomp/stompjs": "^7.0.0",
     "@tanstack/react-query": "^4.36.1",
+    "@types/stompjs": "^2.3.7",
     "axios": "^1.5.1",
     "d3": "^7.8.5",
     "emotion-reset": "^3.0.1",
     "framer-motion": "^10.16.4",
+    "http-proxy-middleware": "^2.0.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.47.0",
     "react-icons": "^4.11.0",
     "react-router-dom": "^6.16.0",
+    "react-spinners": "^0.13.8",
     "react-toastify": "^9.1.3",
     "zustand": "^4.4.4",
-    "zustand-persist": "^0.4.0",
-    "react-spinners": "^0.13.8"
+    "zustand-persist": "^0.4.0"
   },
   "devDependencies": {
     "@rushstack/eslint-config": "^3.4.1",

diff --git a/setupProxy.ts b/setupProxy.ts
@@ -0,0 +1,10 @@
+import { createProxyMiddleware } from 'http-proxy-middleware'
+
+module.exports = (app) => {
+  app.use(
+    createProxyMiddleware('/api/chat-stomp', {
+      target: process.env.VITE_BASE_URL,
+      ws: true,
+    }),
+  )
+}
diff --git a/src/apis/test.ts b/src/apis/test.ts
@@ -0,0 +1,13 @@
+import axios from 'axios'
+
+export const testWithBtn = async (nickname: string) => {
+  return axios
+    .create({
+      baseURL: import.meta.env.VITE_TEST_URL,
+    })
+    .get('/api/v1/users/duplicate', {
+      params: {
+        nickname: nickname,
+      },
+    })
+}
diff --git a/src/components/common/AlertText/index.tsx b/src/components/common/AlertText/index.tsx
@@ -4,12 +4,19 @@ type AlertTextProps = {
   fontSize: string
   fontColor: string
   children?: React.ReactNode
+  padding?: string
+  textAlign?: string
 }
 
-const AlertText = ({ fontSize, fontColor, children }: AlertTextProps) => {
+const AlertText = ({ padding, textAlign, fontSize, fontColor, children }: AlertTextProps) => {
   return (
     <>
-      <StyleAlertText fontSize={fontSize} fontColor={fontColor}>
+      <StyleAlertText
+        padding={padding}
+        textAlign={textAlign}
+        fontSize={fontSize}
+        fontColor={fontColor}
+      >
         {children}
       </StyleAlertText>
     </>
@@ -19,6 +26,8 @@ const AlertText = ({ fontSize, fontColor, children }: AlertTextProps) => {
 const StyleAlertText = styled.div<AlertTextProps>`
   font-size: ${(props) => props.fontSize};
   color: ${(props) => props.fontColor};
+  padding: ${(props) => props.padding};
+  text-align: ${(props) => props.textAlign};
 `
 
 export default AlertText
diff --git a/src/components/common/Avatar/index.tsx b/src/components/common/Avatar/index.tsx
@@ -1,6 +1,5 @@
 import styled from '@emotion/styled'
 
-
 import defaultProfileImage from '@/assets/images/defaultProfileImage.png' // 이미지 import
 
 type AvatarProps = {

diff --git a/src/components/common/BusinessCardContainer/index.tsx b/src/components/common/BusinessCardContainer/index.tsx
@@ -0,0 +1,112 @@
+import styled from '@emotion/styled'
+import { useState } from 'react'
+import { TiDelete } from 'react-icons/ti'
+
+import camera from '@/assets/images/camera.svg'
+import { palette } from '@/styles/palette'
+
+import Spacing from '../Spacing'
+import { Text } from '../Text'
+
+type BusinessCardContainerProps = {
+  isDarkMode: boolean
+}
+
+const BusinessCardContainer = ({ isDarkMode }: BusinessCardContainerProps) => {
+  const [uploadedImage, setUploadedImage] = useState<string | null>(null)
+
+  const handleImageUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (!uploadedImage) {
+      const file = event.target.files?.[0]
+      const reader = new FileReader()
+
+      reader.onloadend = () => {
+        setUploadedImage(reader.result as string)
+      }
+
+      if (file) {
+        reader.readAsDataURL(file)
+      }
+    }
+  }
+
+  const handleRemoveImage = () => {
+    setUploadedImage(null)
+  }
+
+  return (
+    <Wrapper>
+      <Text
+        font={'Body_20'}
+        fontWeight={700}
+        letterSpacing={-1}
+        textColor={isDarkMode ? palette.WHITE : palette.BLACK}
+      >
+        {'명함사진 업로드'}
+      </Text>
+      <Spacing size={10} />
+      <ImageContainer>
+        {uploadedImage ? (
+          <>
+            <StyledImage src={uploadedImage} alt={'Uploaded'} />
+            <TiDelete
+              style={{
+                position: 'absolute',
+                top: -10,
+                right: -15,
+                width: 24,
+                height: 24,
+                cursor: 'pointer',
+                color: isDarkMode ? palette.GRAY300 : palette.BLACK,
+              }}
+              onClick={handleRemoveImage}
+            />
+          </>
+        ) : (
+          <label style={{ cursor: 'pointer' }}>
+            <input type={'file'} onChange={handleImageUpload} style={{ display: 'none' }} />
+            <Placeholder>
+              <CameraIcon src={camera} alt={'Upload Placeholder'} />
+            </Placeholder>
+          </label>
+        )}
+      </ImageContainer>
+    </Wrapper>
+  )
+}
+
+const Wrapper = styled.div`
+  position: relative;
+  width: 300px;
+`
+
+const Placeholder = styled.div`
+  width: 88px;
+  height: 88px;
+  background-color: ${palette.WHITE};
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+`
+
+const ImageContainer = styled.div`
+  width: 88px;
+  position: relative;
+`
+
+const StyledImage = styled.img`
+  width: 88px;
+  height: 88px;
+  object-fit: cover;
+  position: relative;
+  border-radius: 10px;
+`
+
+const CameraIcon = styled.img`
+  width: 38px;
+  height: 38px;
+`
+
+export default BusinessCardContainer
diff --git a/src/components/common/Buttons/IconButton/ParticularTopicButton.tsx b/src/components/common/Buttons/IconButton/ParticularTopicButton.tsx
@@ -9,7 +9,6 @@ type ParticularTopicButtonProps = {
   isDarkMode: boolean
 }
 
-
 /**
  * @param isDarkMode - 다크모드 여부
  */

diff --git a/src/components/common/Buttons/IconButton/index.tsx b/src/components/common/Buttons/IconButton/index.tsx
@@ -20,13 +20,14 @@ export const StyleIconButtonWrapper = styled.button<{
         iconButtonStyles[iconButtonType].fontWeight,
         iconButtonStyles[iconButtonType].letterSpacing,
       )}
+      
       width: ${iconButtonStyles[iconButtonType].width};
       height: ${iconButtonStyles[iconButtonType].height}px;
       color: ${iconButtonStyles[iconButtonType].fontColor};
       background: ${iconButtonStyles[iconButtonType].backgroundColor};
       box-shadow: ${iconButtonStyles[iconButtonType].boxShadow};
       border-radius: ${iconButtonStyles[iconButtonType].borderRadius}px;
-      
+
       &:active {
         background: ${iconButtonStyles[iconButtonType].activeBackgroundColor};
       }

diff --git a/src/components/common/ChattingText/index.tsx b/src/components/common/ChattingText/index.tsx
@@ -0,0 +1,42 @@
+import styled from '@emotion/styled'
+import { type HTMLAttributes, type ReactNode } from 'react'
+
+import { type TextType, theme } from '@/styles/theme'
+/**
+ * @param as Text 컴포넌트의 종류 : 'span' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div';
+ * @param typo Typo theme 선택
+ * @param color Palette theme 선택
+ */
+
+export interface TextProps extends HTMLAttributes<HTMLDivElement> {
+  as?: 'span' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div'
+  typo: TextType['typo']
+  color?: TextType['color']
+  children: ReactNode
+}
+
+export type TextPropsKey = 'typo' | 'color'
+
+export const ChattingText = ({
+  typo = 'Body_16',
+  as = 'h1',
+  color,
+  children,
+  ...props
+}: TextProps) => {
+  return (
+    <StyledText typoKey={typo} as={as} colorKey={color} {...props}>
+      {children}
+    </StyledText>
+  )
+}
+
+const StyledText = styled.span<{
+  typoKey: TextType['typo']
+  colorKey?: TextType['color']
+}>`
+  white-space: pre-wrap;
+  color: ${({ colorKey }) => {
+    return colorKey && theme.palette[colorKey]
+  }};
+`
diff --git a/src/components/common/CountNumber/index.tsx b/src/components/common/CountNumber/index.tsx
@@ -4,26 +4,38 @@ type CountNumberProps = {
   currentLength: number
   maxLength: number
   color: string
-  right: number
+  right?: number
+  top?: number
 }
 
 type StyleCountNumberProps = {
   color: string
-  right: number
+  right?: number
+  top?: number
 }
 
-const CountNumber = ({ right, currentLength, maxLength, color }: CountNumberProps): JSX.Element => {
+const CountNumber = ({
+  top,
+  right,
+  currentLength,
+  maxLength,
+  color,
+}: CountNumberProps): JSX.Element => {
   return (
-    <StyleCountNumber
-      right={right}
-      color={color}
-    >{`${currentLength}/${maxLength}`}</StyleCountNumber>
+    <div>
+      <StyleCountNumber
+        right={right}
+        color={color}
+        top={top}
+      >{`${currentLength}/${maxLength}`}</StyleCountNumber>
+    </div>
   )
 }
 
 const StyleCountNumber = styled.span<StyleCountNumberProps>`
   position: relative;
   right: ${(props) => props.right}px;
+  top: ${(props) => props.top}px;
   bottom: 3px;
   font-size: 12px;
   color: ${(props) => props.color};
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,7 +9,6 @@ type ParticularTopicButtonProps = { @@
       isDarkMode: boolean
     }
     /**
      * @param isDarkMode - 다크모드 여부
      */
@@ Expand Down @@