deploy: 3차 스프린트 배포 (#112)

* 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 코드 * test: retest (#78) * fix: vite 설정 (cors) (#80) * test: retest * fix: vite 설정 (cors) * fix: cors 재설정 (#82) * test: retest * fix: vite 설정 (cors) * fix: cors2 * fix: vite 설정 변경 (#84) Co-authored-by: wukddang <[email protected]> * fix: axios 파일 수정 (#86) Co-authored-by: wukddang <[email protected]> * fix: REST API 주소 코드 수정 (#92) Co-authored-by: wukddang <[email protected]> * refactor: AlertText, CountNumber 공통 컴포넌트 수정 (#68) * feat: businesscardcontainer * style: Text 컴포넌트 textColor 속성 추가 * style: alerttext, countnumber 수정 * refactor: pr 수정사항 반영 * refactor: styled emotion 코드 통일성 적용 * feature: HomePage 다크모드 기능 추가 + Card 컴포넌트 분리 + timerWorker 추가 (#94) * style: DARK_GRADIENT 색 추가 * feature: 다크모드/화이트모드 설정을 위한 ThemeStore 추가 * feature: ParticularTopicButton에 이동하는 props 추가 * feature: AppHeader 컴포넌트 다크모드 설정 기능 추가 * feature: PageContainer 컴포넌트 다크모드 props 추가 * refactor: Card 컴포넌트 코드 분리 * refactor: Tip 컴포넌트 주석 제거 + import문 수정 * feature: timerWorker 추가 + TimerStore 추가 - 백그라운드에서 동작하는 웹 워커로 타이머 동작 - 새로고침을 해도 계속 동작하지만 어플리케이션을 종료하면 동작 종료 - 현재 동기적으로 코드가 작동하고 있어서, indexedDB를 사용해서 비동기 동작을 지원하도록 수정할 계획 * feature: 다크모드 추가 - GradationBackground, NavigationBar, Home 페이지 * refactor: 사용하지 않는 코드 제거 * refactor: Card 컴포넌트 수정 -undefined값을 가지는 time props 수정 - navigationType 에러 수정 * refactor: AppHeader 컴포넌트 수정 - cursor: pointer 스타일 추가 * refactor: Styled prefix 사용하도록 PR 관련 코드 수정 --------- Co-authored-by: wukddang <[email protected]> * style: LoginPage 레이아웃 작성 (#96) * feat: businesscardcontainer * style: Text 컴포넌트 textColor 속성 추가 * style: alerttext, countnumber 수정 * style: selectorbutton 수정 * style: customselectorbutton * refactor: 필수 prop 설정 * style: selectorbuttoncontainer * refactor: 함수컴포넌트 구조 변경 * refactor: react 삭제 * style: LoginPage 레이아웃 작성 * refactor: 이미지 경로 변경 * refactor: pr 수정사항 반영 * refactor: LoginImage 경로 변경 * style: naver, kakao Button 텍스트 위치 수정 * refactor: frament 제거 * style: 배경색 skyblue 적용. 불필요 fragment 제거. * feature: NotFoundPage 제작 (#102) * refactor: font-family를 동적으로 변경하도록 수정 - 600 미만이면 'Pretendard-Regular' - 600 이상이면 'Pretendard' * feature: NotFound 페이지 제작 - NotFoundIcon 추가 * fix: GradationBackground 에 isDarkMode props 추가 --------- Co-authored-by: wukddang <[email protected]> * refactor: SelectorButton 공통 컴포넌트 수정 (#70) * feat: businesscardcontainer * style: Text 컴포넌트 textColor 속성 추가 * style: alerttext, countnumber 수정 * style: selectorbutton 수정 * refactor: pr 수정사항 반영 * refactor: prop 명 변경 * refactor: 변수명 수정 * refactor: pr 재수정 * style: CustomSelectorButton 공통 컴포넌트 (#71) * feat: businesscardcontainer * style: Text 컴포넌트 textColor 속성 추가 * style: alerttext, countnumber 수정 * style: selectorbutton 수정 * style: customselectorbutton * refactor: 필수 prop 설정 * refactor: pr 수정사항 반영 * refactor: 속성명 수정 * style: SelectorButtonContainer 공통 컴포넌트 (#72) * feat: businesscardcontainer * style: Text 컴포넌트 textColor 속성 추가 * style: alerttext, countnumber 수정 * style: selectorbutton 수정 * style: customselectorbutton * refactor: 필수 prop 설정 * style: selectorbuttoncontainer * refactor: 함수컴포넌트 구조 변경 * refactor: react 삭제 * refactor: pr 수정사항 반영 * refactor: Input 컴포넌트 ref, onchange 추가 (#90) * refactor: Input 컴포넌트 ref, onchange 추가 * refactor: pr 수정사항 반영 * feature: 로그인 페이지 OAuth 연결 + 반응형 레이아웃 구성 (#107) * feature: LoginPendingPage 컴포넌트 추가 - App.tsx에 라우팅 추가 * refactor: 네이버, 카카오 버튼 props 수정 - moveToOAuthProvider props 받도록 수정 * refactor: HeroImage 크기 수정 * feature: LoginPending 페이지 추가 - zustand-persist로 현재 OAuth provider를 저장하도록 설정 - Status Code가 400이면 회원가입 페이지로 가도록 라우팅 * fix: 회원가입 리다이렉트 상태코드 404로 변경 * refactor: 로그인 페이지 반응형 구현 - Spacing 컴포넌트 css props 받도록 리팩토링 - max-width: 280px인 갤럭시 폴드를 중심으로 리팩토링 * refactor: 로그인 페이지 폰트 크기 반응형으로 수정 * feature: 로그인 리다이렉팅 시 authCode를 state에 담도록 수정 --------- Co-authored-by: wukddang <[email protected]> --------- Co-authored-by: judahhh <[email protected]> Co-authored-by: wukddang <[email protected]> Co-authored-by: from1to2 <[email protected]>
coffee-meet · Nov 11, 2023 · 12d076e · 12d076e
1 parent a2bda2b
commit 12d076e
Show file tree

Hide file tree

Showing 37 changed files with 1,304 additions and 403 deletions.
diff --git a/public/timerWorker.js b/public/timerWorker.js
@@ -0,0 +1,28 @@
+const timerState = {
+  intervalId: null,
+  startTime: null,
+}
+
+const sendTick = () => {
+  const elapsedTime = Date.now() - timerState.startTime
+  postMessage({ type: 'TICK', time: elapsedTime })
+}
+
+onmessage = (event) => {
+  const { type, startTime: receivedStartTime } = event.data
+  switch (type) {
+    case 'START':
+      if (timerState.intervalId === null) {
+        timerState.startTime = receivedStartTime
+        timerState.intervalId = setInterval(sendTick, 1000)
+      }
+      break
+    case 'RESET':
+      clearInterval(timerState.intervalId)
+      timerState.intervalId = null
+      timerState.startTime = null
+      break
+    default:
+      console.error('Unknown message type:', type)
+  }
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -8,6 +8,7 @@ import ChattingPage from '@/pages/chatting'
 import HomePage from '@/pages/home'
 import LandingPage from '@/pages/landing'
 import LoginPage from '@/pages/login'
+import LoginPendingPage from '@/pages/loginPending'
 import NotFoundPage from '@/pages/notFound/NotFound'
 import ProfilePage from '@/pages/profile'
 import PrivateRoute from '@/pages/redirect/PrivateRoute'
@@ -25,9 +26,10 @@ const App = () => {
           <Route path={'*'} element={<NotFoundPage />}></Route>
         </Route>
 
-        <Route element={<PrivateRoute auth={false} />}>
+        <Route element={<PrivateRoute auth={true} />}>
           <Route path={'/landing'} element={<LandingPage />} />
           <Route path={'/login'} element={<LoginPage />} />
+          <Route path={'/login-pending-page'} element={<LoginPendingPage />} />
           <Route path={'/register/*'} element={<RegisterPage />} />
           <Route path={'/admin-login'} element={<AdminLoginPage />} />
           <Route path={'*'} element={<NotFoundPage />}></Route>

diff --git a/src/assets/icons/NotFoundIcon.tsx b/src/assets/icons/NotFoundIcon.tsx
diff --git a/src/components/common/AppHeader/index.tsx b/src/components/common/AppHeader/index.tsx
@@ -23,15 +23,17 @@ type AppHeaderProps = {
   nickname: string
   isDarkMode: boolean
   height?: string
+  toggleDarkMode: () => void
 }
 
 /**
  * @param nickname - 유저 닉네임
  * @param isDarkMode - 다크모드 여부
  * @param height - 컴포넌트 높이
+ * @param toggleDarkMode - 다크모드 토글 함수
  */
 
-const AppHeader = ({ nickname, isDarkMode, height }: AppHeaderProps) => {
+const AppHeader = ({ nickname, isDarkMode, height, toggleDarkMode }: AppHeaderProps) => {
   const navigate = useNavigate()
   const moveFromAppHeader = (path: string) => {
     navigate(`/${path}`)
@@ -59,14 +61,18 @@ const AppHeader = ({ nickname, isDarkMode, height }: AppHeaderProps) => {
             size={'20px'}
             style={{
               color: palette.WHITE,
+              cursor: 'pointer',
             }}
+            onClick={toggleDarkMode}
           />
         ) : (
           <BiSolidMoon
             size={'20px'}
             style={{
               color: palette.DARK_WHITE,
+              cursor: 'pointer',
             }}
+            onClick={toggleDarkMode}
           />
         )}
       </FlexBox>
@@ -76,7 +82,7 @@ const AppHeader = ({ nickname, isDarkMode, height }: AppHeaderProps) => {
           fontWeight={600}
           letterSpacing={-0.5}
           style={{
-            color: isDarkMode ? palette.WHITE : palette.DARK_WHITE,
+            color: isDarkMode ? palette.DARK_WHITE : palette.WHITE,
             marginRight: 5,
           }}
         >
@@ -87,7 +93,7 @@ const AppHeader = ({ nickname, isDarkMode, height }: AppHeaderProps) => {
           fontWeight={600}
           letterSpacing={-0.5}
           style={{
-            color: isDarkMode ? palette.WHITE : palette.DARK_WHITE,
+            color: isDarkMode ? palette.DARK_WHITE : palette.WHITE,
           }}
         >
           {'님, 안녕하세요! 오늘도 즐거운 커피밋! ☕️'}

diff --git a/src/components/common/BusinessCardContainer/index.tsx b/src/components/common/BusinessCardContainer/index.tsx
@@ -17,15 +17,15 @@ const BusinessCardContainer = ({ isDarkMode }: BusinessCardContainerProps) => {
 
   const handleImageUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (!uploadedImage) {
-      const file = event.target.files?.[0]
-      const reader = new FileReader()
+      const uploadedFile = event.target.files?.[0]
+      const uploadedFileReader = new FileReader()
 
-      reader.onloadend = () => {
-        setUploadedImage(reader.result as string)
+      uploadedFileReader.onloadend = () => {
+        setUploadedImage(uploadedFileReader.result as string)
       }
 
-      if (file) {
-        reader.readAsDataURL(file)
+      if (uploadedFile) {
+        uploadedFileReader.readAsDataURL(uploadedFile)
       }
     }
   }
@@ -35,7 +35,7 @@ const BusinessCardContainer = ({ isDarkMode }: BusinessCardContainerProps) => {
   }
 
   return (
-    <Wrapper>
+    <BusinessCardContainerWrapper>
       <Text
         font={'Body_20'}
         fontWeight={700}
@@ -63,24 +63,23 @@ const BusinessCardContainer = ({ isDarkMode }: BusinessCardContainerProps) => {
             />
           </>
         ) : (
-          <label style={{ cursor: 'pointer' }}>
-            <input type={'file'} onChange={handleImageUpload} style={{ display: 'none' }} />
-            <Placeholder>
+          <UploadLabel>
+            <HiddenInput type={'file'} onChange={handleImageUpload} />
+            <CameraIconWrapper>
               <CameraIcon src={camera} alt={'Upload Placeholder'} />
-            </Placeholder>
-          </label>
+            </CameraIconWrapper>
+          </UploadLabel>
         )}
       </ImageContainer>
-    </Wrapper>
+    </BusinessCardContainerWrapper>
   )
 }
 
-const Wrapper = styled.div`
+const BusinessCardContainerWrapper = styled.div`
   position: relative;
   width: 300px;
 `
-
-const Placeholder = styled.div`
+const CameraIconWrapper = styled.div`
   width: 88px;
   height: 88px;
   background-color: ${palette.WHITE};
@@ -109,4 +108,11 @@ const CameraIcon = styled.img`
   height: 38px;
 `
 
+const UploadLabel = styled.label`
+  cursor: pointer;
+`
+const HiddenInput = styled.input`
+  display: none;
+`
+
 export default BusinessCardContainer
diff --git a/src/components/common/Buttons/IconButton/InterestButton.tsx b/src/components/common/Buttons/IconButton/InterestButton.tsx
@@ -5,7 +5,7 @@ import { Divider } from '@/components/common/Divider'
 import { Text, TextWrapper } from '@/components/common/Text'
 import { palette } from '@/styles/palette'
 
-import { StyleIconButtonWrapper, StyleIconWrapper } from '.'
+import { StyledIconButtonWrapper, StyledIconWrapper } from '.'
 
 type InterestButtonProps = {
   nickName: string
@@ -17,15 +17,15 @@ const InterestButton = ({ nickName, interests, isDarkMode }: InterestButtonProps
   const setButtonType = isDarkMode ? 'interest-dark' : 'interest'
 
   return (
-    <StyleIconButtonWrapper
+    <StyledIconButtonWrapper
       iconButtonType={setButtonType}
       style={{
         display: 'flex',
         justifyContent: 'start',
         alignItems: 'center',
       }}
     >
-      <StyleIconWrapper
+      <StyledIconWrapper
         borderRadius={'12px'}
         backgroundColor={palette.WHITE}
         style={{
@@ -42,7 +42,7 @@ const InterestButton = ({ nickName, interests, isDarkMode }: InterestButtonProps
             height: 23,
           }}
         />
-      </StyleIconWrapper>
+      </StyledIconWrapper>
       <TextWrapper>
         <Text font={'Body_18'} fontWeight={500} letterSpacing={-2} style={{ marginBottom: 4 }}>
           {`${nickName}의 관심사`}
@@ -68,7 +68,7 @@ const InterestButton = ({ nickName, interests, isDarkMode }: InterestButtonProps
           ))}
         </Text>
       </TextWrapper>
-    </StyleIconButtonWrapper>
+    </StyledIconButtonWrapper>
   )
 }
 

diff --git a/src/components/common/Buttons/IconButton/KakaoButton.tsx b/src/components/common/Buttons/IconButton/KakaoButton.tsx
@@ -1,13 +1,29 @@
 import styled from '@emotion/styled'
 
 import KakaoIcon from '@/assets/icons/KakaoIcon'
+import { OAuthButtonProps, StyledIconWrapper } from '@/components/common/Buttons/IconButton'
 import { Text } from '@/components/common/Text'
 import { palette } from '@/styles/palette'
 
-import { StyleIconWrapper } from '.'
+const KakaoButton = ({ moveToOAuthProvider }: OAuthButtonProps) => (
+  <StyledButtonWrapper buttonTheme={'kakao'} onClick={moveToOAuthProvider}>
+    <StyledIconWrapper>
+      <KakaoIcon width={53} height={53} iconWidth={35} iconHeight={35} borderRadius={10} />
+    </StyledIconWrapper>
+    <StyledButtonText
+      font={'Body_18'}
+      fontWeight={600}
+      letterSpacing={-1}
+      style={{ flex: 1, textAlign: 'left', marginLeft: 20 }}
+    >
+      {'카카오톡으로 시작'}
+    </StyledButtonText>
+  </StyledButtonWrapper>
+)
 
-export const ButtonWrapper = styled.button<{
+export const StyledButtonWrapper = styled.button<{
   buttonTheme: 'kakao' | 'naver'
+  onClick: () => void
 }>`
   width: 320px;
   height: 60px;
@@ -17,26 +33,16 @@ export const ButtonWrapper = styled.button<{
   justify-content: space-between;
   align-items: center;
   box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15);
+
+  @media (max-width: 280px) {
+    width: 250px;
+  }
 `
 
-const KakaoButton = () => (
-  <ButtonWrapper buttonTheme={'kakao'}>
-    <StyleIconWrapper
-      style={{
-        margin: '4px 38px 4px 20px',
-      }}
-    >
-      <KakaoIcon width={53} height={53} iconWidth={35} iconHeight={35} borderRadius={10} />
-    </StyleIconWrapper>
-    <Text
-      font={'Body_18'}
-      fontWeight={600}
-      letterSpacing={-1}
-      style={{ flex: 1, textAlign: 'left' }}
-    >
-      {'카카오톡으로 시작'}
-    </Text>
-  </ButtonWrapper>
-)
+export const StyledButtonText = styled(Text)`
+  @media (max-width: 280px) {
+    font-size: 16px;
+  }
+`
 
 export default KakaoButton
diff --git a/src/components/common/Buttons/IconButton/NaverButton.tsx b/src/components/common/Buttons/IconButton/NaverButton.tsx
@@ -1,33 +1,31 @@
 import NaverIcon from '@/assets/icons/NaverIcon'
-import { Text } from '@/components/common/Text'
-import { palette } from '@/styles/palette'
-
-import { StyleIconWrapper } from '.'
-import { ButtonWrapper } from './KakaoButton'
 
-const NaverButton = () => {
+import { OAuthButtonProps, StyledIconWrapper } from '@/components/common/Buttons/IconButton'
+import {
+  StyledButtonText,
+  StyledButtonWrapper,
+} from '@/components/common/Buttons/IconButton/KakaoButton'
+import { palette } from '@/styles/palette'
+const NaverButton = ({ moveToOAuthProvider }: OAuthButtonProps) => {
   return (
-    <ButtonWrapper buttonTheme={'naver'}>
-      <StyleIconWrapper
-        style={{
-          margin: '4px 53px 4px 20px',
-        }}
-      >
+    <StyledButtonWrapper buttonTheme={'naver'} onClick={moveToOAuthProvider}>
+      <StyledIconWrapper>
         <NaverIcon width={53} height={53} iconWidth={20} iconHeight={20} borderRadius={10} />
-      </StyleIconWrapper>
-      <Text
+      </StyledIconWrapper>
+      <StyledButtonText
         font={'Body_18'}
         fontWeight={600}
         letterSpacing={-1}
         style={{
           flex: 1,
           textAlign: 'left',
           color: palette.WHITE,
+          marginLeft: 20,
         }}
       >
         {'네이버로 시작'}
-      </Text>
-    </ButtonWrapper>
+      </StyledButtonText>
+    </StyledButtonWrapper>
   )
 }