feat(#6):결제 주소 스타일 수정

URECA-PODONG · Nov 6, 2024 · 0a1ef73 · 0a1ef73
1 parent 37db9db
commit 0a1ef73
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 24 deletions.
diff --git a/src/pages/LoginPage/LoginPage.jsx b/src/pages/LoginPage/LoginPage.jsx
@@ -11,7 +11,7 @@ const LoginPage = () => {
       <Image src={images.loginDogCat} alt="로그인 화면 강아지와 고양이 그림" />
       <Title>지금 가입하면 5천원 즉시 할인!</Title>
       <Subtitle>우리 댕냥이 엄마쇼핑 시작해볼까요?</Subtitle>
-      <a href="http://localhost:8080/api/login/oauth2/code/kakao">
+      <a href="http://localhost:8080/api/oauth2/authorization/kakao">
         <img src={loginbtn} alt="카카오 계정으로 로그인" />
       </a>
       <OtherMethodButton>다른 방법으로 시작하기</OtherMethodButton>

diff --git a/src/pages/PaymentPage/Payment.jsx b/src/pages/PaymentPage/Payment.jsx
@@ -160,20 +160,12 @@ const Payment = () => {
             <label>주소</label>
           </AddressLabelWrapper>
           <AddressInputWrapper>
-            <PostSearchContainer placeholder="우편번호" value={zoneCode} readOnly />
+            <PostSearchContainer placeholder="우편번호" value={zoneCode} readOnly style={{ display: 'none' }} />
             <SearchAddressButton onClick={openPostCode}>주소변경</SearchAddressButton>
           </AddressInputWrapper>
           <AddressInputWrapper>
             <StyledInput placeholder="" value={address} onChange={e => setAddress(e.target.value)} required />
           </AddressInputWrapper>
-          <AddressInputWrapper>
-            <StyledInput
-              placeholder=""
-              value={detailedAddress}
-              onChange={e => setDetailedAddress(e.target.value)}
-              required
-            />
-          </AddressInputWrapper>
         </AddressInputGroup>
 
         <DeliveryMethodInputGroup>
@@ -402,14 +394,15 @@ const StyledInput = styled.input`
   border-radius: 5px;
   font-size: 11px;
 `;
+
+const AddressInputWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  position: relative;
+`;
 
-const SearchAddressButton = styled.button`
-  position: absolute;
-  width: 70px;
-  height: 30px;
-  top: 20px;
-  right: 15px;
-  transform: translateY(-50%);
+  const SearchAddressButton = styled.button`
   background-color: #ffefef;
   color: #ff6e00;
   border: none;
@@ -419,6 +412,7 @@ const SearchAddressButton = styled.button`
   font-weight: bold;
   padding: 5px 10px;
   transition: background-color 0.3s;
+  margin-left: auto;
 
   &:hover {
     background-color: #ffd3d3;
@@ -438,12 +432,15 @@ const DeliveryNoteInputGroup = styled.div`
 `;
 
 const AddressLabelWrapper = styled.div`
-  margin-bottom: 5px;
+  flex-shrink: 0;
   font-weight: bold;
+  margin-right: 10px;
+  display: flex;
+  align-items: center;
 `;
 
 const DeliveryMethodLabelWrapper = styled.div`
-  margin-bottom: 5px;
+  margin-right : auto;
   font-weight: bold;
 `;
 
@@ -452,11 +449,7 @@ const DeliveryNoteLabelWrapper = styled.div`
   font-weight: bold;
 `;
 
-const AddressInputWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  position: relative;
-`;
+
 
 const DeliveryMethodInputWrapper = styled.div`
   display: flex;