Feat: 카카오맵 지역찾기 서비스 추가, 회원가입 동네인증 페이지 완료, 주소변경 기능 추가, 프로필 이미지 변경 기능 추가

package.json

@@ -18,6 +18,7 @@
     "axios": "^1.7.7",
     "msw": "^2.6.5",
     "react": "^18.3.1",
+    "react-daum-postcode": "^3.1.3",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
     "react-refresh": "^0.14.2",

src/components/common/KakaoMap.tsx

@@ -5,9 +5,15 @@ type KakaoMapProps = {
   latitude: number;
   longitude: number;
   appKey: string;
+  width: number;
 };
 
-const KakaoMap: React.FC<KakaoMapProps> = ({ latitude, longitude, appKey }) => {
+const KakaoMap: React.FC<KakaoMapProps> = ({
+  latitude,
+  longitude,
+  appKey,
+  width,
+}) => {
   const mapContainer = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -40,7 +46,7 @@ const KakaoMap: React.FC<KakaoMapProps> = ({ latitude, longitude, appKey }) => {
     <div
       ref={mapContainer}
       style={{
-        width: '600px',
+        width: `${width}px`,
         height: '350px',
       }}
     ></div>

src/components/pages/login/FindPasswordPage.tsx

@@ -1,36 +1,108 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { styled } from 'styled-components';
 
 const FindPasswordPage = () => {
   const navigate = useNavigate();
+  const [showModal, setShowModal] = useState(false);
   return (
-    <Wrapper>
-      <LeftContent>Image</LeftContent>
-      <RightContent>
-        <BackButton
-          onClick={() => {
-            navigate(-1);
-          }}
-        >
-          Back
-        </BackButton>
-        <Title>비밀번호 찾기</Title>
-        <Description>
-          등록된 이메일 주소를 입력하고 비밀번호 재설정을 위한 코드를
-          확인해주세요
-        </Description>
-        <Subtitle>email address</Subtitle>
-        <StyledInput placeholder="이메일 입력" />
+    <>
+      <Wrapper>
+        <LeftContent>
+          <img
+            src="/images/login7.jpg"
+            alt="Login background"
+            style={{
+              width: '100%',
+              height: '100%',
+              objectFit: 'contain',
+            }}
+          />
+        </LeftContent>
+        <RightContent>
+          <BackButton
+            onClick={() => {
+              navigate(-1);
+            }}
+          >
+            <img
+              src="/images/arrow-left.png"
+              alt="left arrow"
+              style={{ width: '20px', height: '20px' }}
+            />
+            Back
+          </BackButton>
+          <Title>비밀번호 찾기</Title>
+          <Description>
+            등록된 이메일 주소를 입력하고 확인 버튼을 클릭해주세요
+          </Description>
+          <Subtitle>email address</Subtitle>
+          <StyledInput placeholder="이메일 입력" />
 
-        <LoginButton>Send OTP</LoginButton>
-      </RightContent>
-    </Wrapper>
+          <LoginButton onClick={() => setShowModal(true)}>확인</LoginButton>
+        </RightContent>
+      </Wrapper>
+      {showModal && (
+        <ModalOverlay>
+          <ModalContent>
+            <ModalText>이메일을 확인해주세요</ModalText>
+            <ModalButton onClick={() => setShowModal(false)}>확인</ModalButton>
+          </ModalContent>
+        </ModalOverlay>
+      )}
+    </>
   );
 };
 
+const ModalButton = styled.button`
+  background-color: #000;
+  color: #fff;
+  border: none;
+  border-radius: 5px;
+  padding: 8px 20px;
+  cursor: pointer;
+  width: 100px;
+  height: 35px;
+  font-size: 14px;
+
+  &:hover {
+    opacity: 0.9;
+  }
+`;
+
+const ModalText = styled.div`
+  font-size: 16px;
+  font-weight: 500;
+  color: #333;
+`;
+const ModalContent = styled.div`
+  background-color: white;
+  padding: 30px;
+  border-radius: 10px;
+  width: 300px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+`;
+
+const ModalOverlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+`;
 const BackButton = styled.div`
   margin-bottom: 35px;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
 `;
 
 const Description = styled.div`
@@ -55,7 +127,7 @@ const LoginButton = styled.div`
 `;
 
 const StyledInput = styled.input`
-  width: calc(100% - 20px);
+  width: calc(100% - 40px);
   height: 25px;
   border: 1px solid #ccc;
   border-radius: 5px;
@@ -81,10 +153,11 @@ const Title = styled.div`
 `;
 const LeftContent = styled.div`
   flex: 6;
-  background-color: lightblue;
+  background-color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
+  overflow: hidden;
 `;
 
 const RightContent = styled.div`

src/components/pages/login/LoginCompletePage.tsx

@@ -7,7 +7,17 @@ const LoginCompletePage = () => {
 
   return (
     <Wrapper>
-      <LeftContent>Image</LeftContent>
+      <LeftContent>
+        <img
+          src="/images/login-compl.jpg"
+          alt="Login background"
+          style={{
+            width: '100%',
+            height: '100%',
+            objectFit: 'contain',
+          }}
+        />
+      </LeftContent>
       <RightContent>
         <Title>회원가입 완료!</Title>
         <ImageWrapper>
@@ -75,10 +85,11 @@ const Title = styled.div`
 
 const LeftContent = styled.div`
   flex: 6;
-  background-color: lightblue;
+  background-color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
+  overflow: hidden;
 `;
 
 const RightContent = styled.div`

src/components/pages/login/Modal/FinanceTerms.tsx

@@ -0,0 +1,22 @@
+export const FinanceTerms = `
+2. 전자 금융거래 이용약관 동의
+
+제1조 (목적)
+
+이 약관은 사용자가 전자 금융거래를 이용하는 경우 발생하는 권리, 의무 및 책임사항을 규정하는 것을 목적으로 합니다.
+
+제2조 (전자 금융거래의 정의 및 적용 범위)
+
+1. 전자 금융거래란 인터넷, 모바일 애플리케이션 등 전자적 매체를 통해 상품 구매 시 발생하는 결제 행위를 말합니다.
+2. 본 약관은 사용자가 결제 서비스, 환불 절차 등과 관련하여 전자 금융거래를 이용하는 모든 경우에 적용됩니다.
+
+제3조 (전자 금융거래 이용자의 권리와 의무)
+
+1. 사용자는 정확한 결제 정보를 입력하고, 비밀번호 등 중요한 정보를 안전하게 관리해야 합니다.
+2. 회사는 전자 금융거래와 관련된 모든 정보를 투명하고 명확하게 제공하며, 이용자의 권리를 보호합니다.
+
+제4조 (사고 발생 시 손해 배상 기준 및 절차)
+
+1. 사용자가 전자 금융거래 이용 중 사고를 경험한 경우, 회사는 관련 법령에 따라 손해를 배상합니다.
+2. 사용자는 사고 발생 시 지체 없이 회사에 알리고 필요한 증빙 자료를 제출해야 합니다.
+`;

src/components/pages/login/Modal/PrivacyTerms.tsx

@@ -0,0 +1,28 @@
+export const PrivacyTerms = `
+3. 개인정보 제공 동의
+
+제1조 (수집되는 개인정보의 항목 및 이용 목적)
+
+1. 회사는 서비스 제공을 위해 다음과 같은 개인정보를 수집합니다:
+    - 필수 정보: 이름, 연락처, 이메일, 결제 정보
+    - 선택 정보: 배송 주소, 기타 서비스 이용 시 필요한 정보
+2. 수집된 개인정보는 다음 목적으로 이용됩니다:
+    - 회원 가입 및 관리
+    - 상품 구매 및 배송
+    - 고객 서비스 및 공지사항 전달
+
+제2조 (개인정보 보관 기간 및 삭제 절차)
+
+1. 회사는 사용자의 개인정보를 법령에서 정한 기간 동안 보관하며, 그 이후에는 즉시 삭제합니다.
+    - 회원 정보: 회원 탈퇴 후 30일 내 삭제
+    - 결제 정보: 거래 완료 후 5년간 보관 (전자상거래법에 의거)
+2. 개인정보 삭제 요청 시, 회사는 7일 이내에 삭제를 완료합니다.
+
+제3조 (개인정보 제3자 제공 여부와 제공 목적)
+
+1. 회사는 사용자의 동의 없이 개인정보를 제3자에게 제공하지 않습니다.
+2. 서비스 제공 과정에서 필요한 경우, 제3자에게 제공될 수 있으며, 주요 제공 대상과 목적은 다음과 같습니다:
+    - 배송 업체: 상품 배송
+    - 결제 대행사: 결제 처리
+    - 법적 요청: 관련 법령 준수를 위한 제공
+    `;

src/components/pages/login/Modal/ServiceTerms.tsx

@@ -0,0 +1,26 @@
+export const ServiceTerms = `
+1. 서비스 이용약관 동의
+
+제1조 (목적)
+
+이 약관은 사용자가 제공받는 서비스의 이용 조건 및 절차, 회사와 사용자 간의 권리·의무 및 책임사항, 기타 필요한 사항을 규정함을 목적으로 합니다.
+
+제2조 (서비스 제공의 범위 및 이용자의 책임)
+
+1. 회사는 사용자가 공동구매 및 할인 플랫폼에서 상품을 검색, 구매, 참여할 수 있는 서비스를 제공합니다.
+2. 사용자는 서비스 이용 시 타인의 권리를 침해하거나 법령을 위반하는 행위를 해서는 안 됩니다.
+3. 사용자는 자신의 계정 정보를 안전하게 관리할 책임이 있으며, 이를 제3자에게 공유하거나 양도해서는 안 됩니다.
+
+제3조 (서비스 이용 제한 및 해지 조건)
+
+1. 회사는 다음의 경우 사용자에게 사전 통지 없이 서비스 이용을 제한하거나 해지할 수 있습니다.
+    - 약관을 위반한 경우
+    - 부정한 방법으로 서비스를 이용한 경우
+    - 기타 공공질서 및 미풍양속에 반하는 행위를 한 경우
+2. 사용자는 서비스 이용을 원하지 않을 경우 언제든지 탈퇴 신청을 할 수 있습니다.
+
+제4조 (분쟁 해결 및 법적 준거법)
+
+1. 이 약관과 관련된 모든 분쟁은 회사가 위치한 지역의 법률을 준거법으로 합니다.
+2. 분쟁이 발생할 경우, 회사와 사용자는 상호 협의하여 해결을 위해 노력합니다.
+`;

src/components/pages/login/ResetPasswordPage.tsx

@@ -19,7 +19,17 @@ const ResetPasswordPage = () => {
   return (
     <>
       <Wrapper>
-        <LeftContent>Image</LeftContent>
+        <LeftContent>
+          <img
+            src="/images/login6.jpg"
+            alt="Login background"
+            style={{
+              width: '100%',
+              height: '100%',
+              objectFit: 'contain',
+            }}
+          />
+        </LeftContent>
         <RightContent>
           <Title>비밀번호 재설정</Title>
           <Subtitle>password</Subtitle>
@@ -150,10 +160,11 @@ const Title = styled.div`
 
 const LeftContent = styled.div`
   flex: 6;
-  background-color: lightblue;
+  background-color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
+  overflow: hidden;
 `;
 
 const RightContent = styled.div`