fix: fix layout

Author: zziglet

src/components/price/PriceItem.jsx

@@ -28,33 +28,33 @@ const Text = styled.div`
   white-space: pre-wrap;
 
   &.title {
-    width: max-content;
+    width: 100px;
     font-size: 24px;
     font-weight: 700;
     text-align: left;
   }
 
   &.increment {
-    width: max-content;
+    width: 100px;
     font-size: 20px;
     font-weight: 800;
     color: #8fa86a;
   }
 
   &.decrement {
-    width: max-content;
+    width: 100px;
     font-size: 20px;
     font-weight: 800;
     color: #d53d3d;
   }
 
   &.count {
+    width: 30px;
     color: #000;
     text-align: center;
     font-size: 20px;
     font-weight: 400;
     border: 0.8px solid #000;
-    min-width: 28px;
   }
 `;
 

src/components/shopping/ShoppingBudget.jsx

@@ -94,8 +94,7 @@ const BudgetInput = styled.input`
   }
 `;
 
-function ShoppingBudget(props) {
-  const { budget, present } = props;
+function ShoppingBudget({ budget, present, readOnly }) {
   const [isEditing, setIsEditing] = useState(false);
   const [newBudget, setNewBudget] = useState("");
   const state = budget - present;
@@ -170,11 +169,13 @@ function ShoppingBudget(props) {
         <FiDollarSign color="#daa520" size={32} />
         <Text className="budget">예산</Text>
         <Text className="money">{`${budget}`}₩</Text>
-        <Button
-          title="수정"
-          className="green"
-          onClick={() => setIsEditing(true)}
-        />
+        {!readOnly && (
+          <Button
+            title="수정"
+            className="green"
+            onClick={() => setIsEditing(true)}
+          />
+        )}
       </ContentContainer>
       {isEditing && (
         <BudgetInputContainer>

src/components/shopping/ShoppingList.jsx

@@ -12,7 +12,7 @@ const ListContainer = styled.div`
   padding: 20px;
 `;
 
-function ShoppingList() {
+function ShoppingList({ readOnly }) {
   const navigate = useNavigate();
   const [items, setItems] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
@@ -110,11 +110,14 @@ function ShoppingList() {
   return (
     <DragDropContext onDragEnd={handleDragEnd}>
       <ListContainer>
-        <ShoppingListItems items={items} onDelete={handleDelete} />
+        <ShoppingListItems
+          items={items}
+          onDelete={readOnly ? null : handleDelete}
+        />
         <ShoppingListButtons
-          onSave={handleSave}
-          onAddNew={handleAddNew}
-          onDeleteLowest={handleDeleteLowest}
+          onSave={readOnly ? null : handleSave}
+          onAddNew={readOnly ? null : handleAddNew}
+          onDeleteLowest={readOnly ? null : handleDeleteLowest}
         />
       </ListContainer>
     </DragDropContext>

src/pages/LandingPage.jsx

@@ -82,6 +82,15 @@ const UserContainer = styled.div`
   padding-top: 40px;
 `;
 
+const ShoppingContainer = styled.div`
+  min-height: 180px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding-right: 95px;
+  padding-top: 20px;
+`;
+
 const TrendContainer = styled.div`
   display: flex;
   flex-wrap: wrap;
@@ -198,10 +207,12 @@ function LandingPage() {
                 장바구니 상품을 관리해보세요!
               </SubTitleText>
             </TextContainer>
-            <ShoppingBudget />
-            <Wrapper>
-              <ShoppingList />
-            </Wrapper>
+            <ShoppingContainer>
+              <ShoppingBudget readOnly={true} />
+              <Wrapper>
+                <ShoppingList readOnly={true} />
+              </Wrapper>
+            </ShoppingContainer>
             <Button
               title="장바구니 수정하기"
               className="yellow"

src/pages/ShoppingCartPage.jsx

@@ -53,9 +53,9 @@ function ShoppingCartPage() {
       <MainBar />
       <Text className="title">장바구니 관리</Text>
       <Text className="sub">수정하고 싶은 상품을 선택하세요</Text>
-      <ShoppingBudget />
+      <ShoppingBudget readOnly={false} />
       <Wrapper>
-        <ShoppingList />
+        <ShoppingList readOnly={false} />
       </Wrapper>
     </Container>
   );