Merge branch 'dev' into feature/Choco-Express#22

Chaem03 · Sep 5, 2024 · 6d9263e · 6d9263e
2 parents 31a4be1 + 38a53b6
commit 6d9263e
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 14 deletions.
diff --git a/src/components/ChocoSelector/styled.js b/src/components/ChocoSelector/styled.js
@@ -48,12 +48,11 @@ export const BoxItem = styled.div`
     height: 100%;
     object-fit: contain;
 
-    transform: ${({ selected }) => (selected ? "scale(1.1)" : "scale(0.9)")};
-    cursor: pointer;
+    filter: ${({ selected }) =>
+      selected ? "drop-shadow(0px 0px 15px rgba(255, 20, 147, 0.8))" : "none"};
 
-    &:hover {
-      transform: ${({ selected }) => (selected ? "scale(1.1)" : "scale(0.9)")};
-    }
+
+  
   }
 `;
 

diff --git a/src/pages/LoginPage/LoginPage.jsx b/src/pages/LoginPage/LoginPage.jsx
@@ -6,16 +6,45 @@ import KakaoLogo from "../../assets/images/Icon/KakaoLogo.svg";
 import GoogleLogo from "../../assets/images/Icon/GoogleLogo.svg";
 import NaverLogo from "../../assets/images/Icon/NaverLogo.svg";
 
+import { instance } from "../../apis/instance";
+
 const LoginPage = () => {
+
+  const handleKakaoLogin = async () => {
+    try {
+      const response = await instance.post('/oauth2/authorization/kakao');
+      console.log('Kakao login success', response.data);
+    } catch (error) {
+      console.error('Kakao login fail', error);
+    }
+  };
+
+  const handleGoogleLogin = async () => {
+    try {
+      const response = await instance.post('/oauth2/authorization/Google');
+      console.log('Google login success', response.data);
+    } catch (error) {
+      console.error('Google login fail', error);
+    }
+  };
+
+  const handleNaverLogin = async () => {
+    try {
+      const response = await instance.post('/oauth2/authorization/Naver');
+      console.log('Naver login success', response.data);
+    } catch (error) {
+      console.error('Naver login fail', error);
+    }
+  };
 
   return (
     <S.Container>
       <HeartBackGlogin />
       <S.Wrapper>
         <S.Btn_list>
-          <S.Btn_Kakaologin><img src={KakaoLogo} alt="Kakao logo" />Log in with Kakao</S.Btn_Kakaologin>
-          <S.Btn_Googlelogin><img src={GoogleLogo} alt="Google logo" />Log in with Google</S.Btn_Googlelogin>
-          <S.Btn_Naverlogin><img src={NaverLogo} alt="Naver logo" />Log in with NAVER</S.Btn_Naverlogin>
+          <S.Btn_Kakaologin onClick={handleKakaoLogin}><img src={KakaoLogo} alt="Kakao logo" />Log in with Kakao</S.Btn_Kakaologin>
+          <S.Btn_Googlelogin onClick={handleGoogleLogin}><img src={GoogleLogo} alt="Google logo" />Log in with Google</S.Btn_Googlelogin>
+          <S.Btn_Naverlogin onClick={handleNaverLogin}><img src={NaverLogo} alt="Naver logo" />Log in with NAVER</S.Btn_Naverlogin>
         </S.Btn_list>
       </S.Wrapper>
     </S.Container>

diff --git a/src/pages/LoginPage/Styled.jsx b/src/pages/LoginPage/Styled.jsx
@@ -36,6 +36,8 @@ export const Btn_Kakaologin = styled.div`
   align-items: center;
   gap: 0.5rem; // 8px
 
+  cursor: pointer;
+
   border-radius: 0.375rem; // 6px
   background: #FEE500;
 
@@ -55,6 +57,8 @@ export const Btn_Googlelogin = styled.div`
   align-items: center;
   gap: 0.5rem; // 8px
 
+  cursor: pointer;
+
   border-radius: 0.375rem; // 6px
   background: #FFF;
   box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.25);
@@ -75,6 +79,8 @@ export const Btn_Naverlogin = styled.div`
   align-items: center;
   gap: 0.625rem; // 10px
 
+  cursor: pointer;
+
   border-radius: 0.375rem; // 6px
   background: #03C75A;
 

diff --git a/src/pages/MyboxSelectPage/MyboxSelectPage.jsx b/src/pages/MyboxSelectPage/MyboxSelectPage.jsx
@@ -4,10 +4,12 @@ import { NameSetting } from "../../components/NameSetting/NameSetting";
 import HeartBackG from "../../components/common/Heartbackground/heartBackG";
 import BoxSelector from "../../components/ChocoSelector/BoxSelector";
 
+import { instance } from "../../apis/instance";
 
 const MyboxSelectPage = () => {
   const [selectedChoco, setSelectedChoco] = useState("");
   const [isSelectedChoco, setIsSelectedChoco] = useState(false);
+  const [boxName, setBoxName] = useState(""); // 입력 값을 관리하는 상태 추가
 
   const handleSelectChoco = (id) => {
     setSelectedChoco(id);
@@ -17,11 +19,28 @@ const MyboxSelectPage = () => {
   const handleNext = () => {
     if (selectedChoco) {
       setIsSelectedChoco(true);
-      console.log("다음페이지로");
+      console.log("다음 페이지로 이동합니다.");
     }
   };
-  const handleSubmit = (inputValue) => {
-    //여기서 api연결 작업 시작!
+
+  const handleInputChange = (value) => {
+    setBoxName(value); // 입력 값 업데이트
+  };
+
+  const handleSubmit = async () => {
+    const data = {
+      boxName: boxName, // 입력된 이름을 사용
+      boxType: selectedChoco, // 선택된 초콜릿 ID를 boxType으로 사용
+    };
+
+    console.log('보낼 데이터:', data);
+
+    try {
+      const response = await instance.post('/api/box', data);
+      console.log('Box 생성 성공:', response.data);
+    } catch (error) {
+      console.error('Box 생성 실패:', error);
+    }
   };
 
   const handleBack = () => {
@@ -34,14 +53,20 @@ const MyboxSelectPage = () => {
       <S.Wrapper>
         {isSelectedChoco ? (
           <NameSetting
-            coment_1={"상대방이 확인할"}
+            coment_1={"내 초콜릿 상자의"}
             coment_2={"이름을 정해주세요"}
+            inputValue={boxName} // 상태를 inputValue로 전달
+            onInputChange={handleInputChange} // 입력 값이 변경될 때 호출될 함수 전달
             onSubmit={handleSubmit}
             onBack={handleBack}
           />
         ) : (
           <BoxSelector
-            coment="보내고 싶은 초콜릿을 선택해주세요"
+            coment={
+              <S.CenterText>
+                달콤함을 받아볼<br/>나만의 상자를 골라주세요
+              </S.CenterText>
+            }
             selectedChoco={selectedChoco}
             onSelectChoco={handleSelectChoco}
             onNext={handleNext}
@@ -52,4 +77,4 @@ const MyboxSelectPage = () => {
   );
 };
 
-export default MyboxSelectPage;
+export default MyboxSelectPage;
diff --git a/src/pages/MyboxSelectPage/Styled.jsx b/src/pages/MyboxSelectPage/Styled.jsx
@@ -28,4 +28,9 @@ export const Wrapper = styled.div`
   height: 437px;
   align-items: center;
   margin-top: 5rem;
+`;
+
+export const CenterText = styled.div`
+  display: flex;
+  text-align: center;
 `;