Merge branch 'dev' of https://github.com/Choco-Express/Choco-Express-FE…

… into feature/Choco-Express#22
Chaem03 · Sep 22, 2024 · c7cd9c6 · c7cd9c6
2 parents ef8e0fe + 05363f6
commit c7cd9c6
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 15 deletions.
diff --git a/src/components/NameSetting/NameSetting.jsx b/src/components/NameSetting/NameSetting.jsx
@@ -9,6 +9,8 @@ export const NameSetting = ({
   onInputChange,
   onSubmit,
   onBack,
+  showBackBtn = true,
+  showNextBtn = true, // 기본적으로 다음 버튼을 활성화해놓는다.
 }) => {
   const handleNextClick = () => {
     if (inputValue) {
@@ -37,8 +39,12 @@ export const NameSetting = ({
         </S.Enter>
       </S.FormContainer>
       <S.buttonContainer>
-        <BackBtn onClick={handleBackClick} />
-        <NextBtn onClick={handleNextClick} />
+        {showBackBtn && (
+          <BackBtn onClick={handleBackClick} />
+        )}
+        {showNextBtn && (
+          <NextBtn onClick={handleNextClick} label="다음" />
+        )}
       </S.buttonContainer>
     </S.Wrapper>
   );

diff --git a/src/components/common/Button/NextBtn.jsx b/src/components/common/Button/NextBtn.jsx
@@ -1,8 +1,8 @@
 import * as S from "./styled";
-export const NextBtn = ({ onClick }) => {
+export const NextBtn = ({ onClick, label = "다음" }) => { // 다음을 기본값으로 두고 원하는대로 바꿀 수 있습니다.
   return (
     <S.Btn onClick={onClick}>
-      <div>다음</div>
+      <div>{label}</div>
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="10"

diff --git a/src/components/common/Heartbackground/styled.js b/src/components/common/Heartbackground/styled.js
@@ -14,7 +14,7 @@ export const HEART = styled.img`
 export const Logo = styled.img`
   display: flex;
   position: absolute;
-  top: 20px;
+  top: 5px;
 `;
 
 export const LoginLogo = styled.img`

diff --git a/src/pages/ChocoList/ChocoList.jsx b/src/pages/ChocoList/ChocoList.jsx
@@ -20,8 +20,7 @@ const ChocoList = () => {
     try {
       const response = await instance.get(`/api/choco?page=${page}`);
       console.log("API Response:", response.data);
-
-      if (response.data && response.data.message === "OK") {
+      if (response.data && response.data.message === "SUCCESS") {
         const { chocoList, totalPage } = response.data.result;
         setChocoData(chocoList);
         setTotalPages(totalPage);

diff --git a/src/pages/MyboxPage/Styled.jsx b/src/pages/MyboxPage/Styled.jsx
@@ -87,4 +87,9 @@ export const Btn_MakeBox = styled.div`
   font-size: 1.0625rem; // 17px
   font-style: normal;
   font-weight: 600;
+
+  &:hover,
+  :active {
+    background: #f34381;
+  }
 `;
diff --git a/src/pages/MyboxSelectPage/MyboxSelectPage.jsx b/src/pages/MyboxSelectPage/MyboxSelectPage.jsx
@@ -5,6 +5,8 @@ import HeartBackG from "../../components/common/Heartbackground/heartBackG";
 import BoxSelector from "../../components/ChocoSelector/BoxSelector";
 
 import { instance } from "../../apis/instance";
+import { NextBtn } from "../../components/common/Button/NextBtn";
+import { BackBtn } from "../../components/common/Button/BackBtn";
 
 const MyboxSelectPage = () => {
   const [selectedChoco, setSelectedChoco] = useState("");
@@ -52,14 +54,22 @@ const MyboxSelectPage = () => {
       <HeartBackG />
       <S.Wrapper>
         {isSelectedChoco ? (
-          <NameSetting
-            coment_1={"내 초콜릿 상자의"}
-            coment_2={"이름을 정해주세요"}
-            inputValue={boxName} // 상태를 inputValue로 전달
-            onInputChange={handleInputChange} // 입력 값이 변경될 때 호출될 함수 전달
-            onSubmit={handleSubmit}
-            onBack={handleBack}
-          />
+          <>
+            <NameSetting
+              coment_1={"내 초콜릿 상자의"}
+              coment_2={"이름을 정해주세요"}
+              inputValue={boxName} // 상태를 inputValue로 전달
+              onInputChange={handleInputChange} // 입력 값이 변경될 때 호출될 함수 전달
+              onSubmit={handleSubmit}
+              onBack={handleBack}
+              showNextBtn={false}
+              showBackBtn={false}
+            />
+            <S.buttonContainer>
+              <BackBtn onClick={handleBack} />
+              <NextBtn onClick={handleSubmit} label="완료" />
+            </S.buttonContainer>
+          </>
         ) : (
           <BoxSelector
             coment={

diff --git a/src/pages/MyboxSelectPage/Styled.jsx b/src/pages/MyboxSelectPage/Styled.jsx
@@ -33,4 +33,12 @@ export const Wrapper = styled.div`
 export const CenterText = styled.div`
   display: flex;
   text-align: center;
+`;
+
+export const buttonContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  position: absolute;
+  bottom: 10px;
 `;