Merge pull request #286 from idx123/feat/fe/todo/user-overall

Feat : 버그 수정 및 리팩토링
codestates-seb · Jan 11, 2024 · fd50723 · fd50723
2 parents 54c29c5 + 05442f8
commit fd50723
Show file tree

Hide file tree

Showing 14 changed files with 418 additions and 275 deletions.
diff --git a/client/public/index.html b/client/public/index.html
@@ -12,7 +12,7 @@
     />
     <meta
       property="og:image"
-      content="https://wrieating.kro.kr/static/main.png"
+      content="http://fe-004-s3-bucket.s3-website.ap-northeast-2.amazonaws.com/static/main.png"
     />
     <link
       href="https://fonts.googleapis.com/css?family=Material+Icons+Round"

diff --git a/client/src/components/Common/Input.tsx b/client/src/components/Common/Input.tsx
@@ -61,9 +61,7 @@ const Input = (props: inputProps) => {
     </InputWrapper>
   )
 }
-
 const InputWrapper = styled.div`
-  height: 6rem;
   flex: 1;
 `
 

diff --git a/client/src/components/Common/Radio.tsx b/client/src/components/Common/Radio.tsx
@@ -10,7 +10,7 @@ const Radio = (props: radioProps) => {
       <Legend>{legend}</Legend>
       <RadioWrapper>
         {radioArray.map((i) => (
-          <div key={i.id} className="radio-div">
+          <RadioInputWrapper key={i.id}>
             <input
               id={i.id}
               type="radio"
@@ -20,7 +20,7 @@ const Radio = (props: radioProps) => {
               onChange={onChange}
             />
             <StyledLabel htmlFor={i.id}>{i.label}</StyledLabel>
-          </div>
+          </RadioInputWrapper>
         ))}
       </RadioWrapper>
     </div>
@@ -30,29 +30,38 @@ const Radio = (props: radioProps) => {
 const RadioWrapper = styled.div`
   display: flex;
   flex-wrap: wrap;
-  gap: 2rem;
+  gap: 1rem;
+  row-gap: 2rem;
+
+  input[type='radio'] {
+    display: none;
+  }
 
-  input[type='radio'],
   input[type='radio']:checked + label {
-    color: var(--color-point);
-    accent-color: var(--color-point);
+    color: var(--color-white);
+    background-color: var(--color-primary);
     font-weight: 600;
+    transition: all 0.1s;
   }
+`
 
-  .radio-div {
-    margin-top: 0.8rem;
-  }
+const RadioInputWrapper = styled.div`
+  margin-top: 1rem;
 `
 
 const Legend = styled.legend`
-  display: inline-block;
   margin: 0 0 0.4rem 0.4rem;
   font-size: 1.4rem;
   font-weight: 700;
 `
 
 const StyledLabel = styled.label`
   font-size: 1.4rem;
+  color: var(--color-secondary);
+  border: 1px solid var(--color-secondary);
+  border-radius: 1rem;
+  padding: 0.8rem 1rem;
+  cursor: pointer;
 `
 
 export default Radio
diff --git a/client/src/components/Common/Tab.tsx b/client/src/components/Common/Tab.tsx
@@ -15,7 +15,7 @@ const Tab = ({ tabItem }: TabMenus) => {
   }, [])
 
   return (
-    <div>
+    <>
       <TabsWrapper>
         {tabItem.map((i, idx) => (
           <TabLink
@@ -31,7 +31,7 @@ const Tab = ({ tabItem }: TabMenus) => {
       <SubpageContainer>
         <Outlet />
       </SubpageContainer>
-    </div>
+    </>
   )
 }
 
@@ -52,6 +52,7 @@ const TabLink = styled(Link)`
   }
 `
 const SubpageContainer = styled.div`
+  width: 100%;
   min-height: 30rem;
   padding: 2.6rem;
   border: 1px solid var(--color-light-gray);

diff --git a/client/src/components/User/ChangePwd.tsx b/client/src/components/User/ChangePwd.tsx
@@ -106,38 +106,36 @@ const ChangePwd = () => {
   return (
     <>
       <TabFrame title="비밀번호 변경">
-        <Wrapper>
-          <Form>
-            <Input
-              type="password"
-              label="현재 비밀번호"
-              placeholder="현재 비밀번호"
-              name="currentPassword"
-              value={currentPassword}
-              error={error.currentPassword}
-              onChange={handleInput}
-            />
-            <Input
-              type="password"
-              label="새 비밀번호"
-              placeholder="새 비밀번호"
-              name="newPassword"
-              value={newPassword}
-              error={error.newPassword}
-              onChange={handleInput}
-            />
-            <Input
-              type="password"
-              label="새 비밀번호 확인"
-              placeholder="비밀번호 확인"
-              name="ckPassword"
-              value={ckPassword}
-              error={error.ckPassword}
-              onChange={handleInput}
-            />
-            <Button onClick={changePassword}>변경하기</Button>
-          </Form>
-        </Wrapper>
+        <Form>
+          <Input
+            type="password"
+            label="현재 비밀번호"
+            placeholder="현재 비밀번호"
+            name="currentPassword"
+            value={currentPassword}
+            error={error.currentPassword}
+            onChange={handleInput}
+          />
+          <Input
+            type="password"
+            label="새 비밀번호"
+            placeholder="새 비밀번호"
+            name="newPassword"
+            value={newPassword}
+            error={error.newPassword}
+            onChange={handleInput}
+          />
+          <Input
+            type="password"
+            label="새 비밀번호 확인"
+            placeholder="비밀번호 확인"
+            name="ckPassword"
+            value={ckPassword}
+            error={error.ckPassword}
+            onChange={handleInput}
+          />
+          <Button onClick={changePassword}>변경하기</Button>
+        </Form>
       </TabFrame>
       <Modal
         state={isOpen}
@@ -150,24 +148,24 @@ const ChangePwd = () => {
   )
 }
 
-const Wrapper = styled.div`
-  width: 63.7rem;
-  min-height: 40rem;
-
-  @media ${({ theme }) => theme.device.tablet} {
-    width: 88vw;
-  }
-`
-
 const Form = styled.form`
-  width: 35rem;
+  width: 40rem;
   display: flex;
   flex-direction: column;
   gap: 1rem;
 
   > button {
     margin-top: 0.8rem;
   }
+
+  @media ${({ theme }) => theme.device.tablet} {
+    width: 80%;
+    min-width: 20rem;
+  }
+
+  @media ${({ theme }) => theme.device.mobile} {
+    width: 100%;
+  }
 `
 
 export default ChangePwd