From 64b5ea419c9d0d26e12a6d0cd38e0b91144bdd03 Mon Sep 17 00:00:00 2001
From: dutexion <dutexion@gmail.com>
Date: Wed, 11 Sep 2024 14:03:30 +0900
Subject: [PATCH] refactor :: VStack

---
 src/components/Layouts/VStack.tsx | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/Layouts/VStack.tsx b/src/components/Layouts/VStack.tsx
index c081293..883968d 100644
--- a/src/components/Layouts/VStack.tsx
+++ b/src/components/Layouts/VStack.tsx
@@ -4,18 +4,28 @@ import styled from '@emotion/styled';
 interface IProps extends IChildren {
   widthFit?: boolean;
   gap?: number;
+  justify?: 'left' | 'center' | 'right';
 }
 
-export const VStack = ({ children, widthFit = true, gap = 0 }: IProps) => (
-  <Wrapper widthFit={widthFit} gap={gap}>
+export const VStack = ({ children, widthFit = true, gap = 0, justify = 'center' }: IProps) => (
+  <Wrapper widthFit={widthFit} gap={gap} justify={justify}>
     {children}
   </Wrapper>
 );
 
-const Wrapper = styled.div<Pick<IProps, 'widthFit' | 'gap'>>`
+const Wrapper = styled.div<Omit<IProps, 'children'>>`
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: ${({ justify }) => {
+    switch (justify) {
+      case 'left':
+        return 'start';
+      case 'right':
+        return 'end';
+      default:
+        return 'center';
+    }
+  }};
   justify-content: flex-start;
   gap: ${({ gap }) => `${gap}px`};
   width: ${({ widthFit }) => (widthFit ? '100%' : 'auto')};