Merge pull request #19 from GraceKim527/feat/#10-MyprofileSignup

[Feat/#10] �프로필 등록 페이지 구현
moyeothon · Nov 2, 2024 · 8ed8af5 · 8ed8af5
2 parents afbde72 + 0d2841d
commit 8ed8af5
Show file tree

Hide file tree

Showing 9 changed files with 531 additions and 15 deletions.
diff --git a/src/Router.tsx b/src/Router.tsx
@@ -4,6 +4,7 @@ import Login from "./pages/login/Login";
 import Create from "@pages/create/Create";
 import Test from "@pages/test/Test";
 import Invite from "@pages/invite/Invite";
+import Personal from "@pages/personal/Personal";
 import Result from "@pages/result/Result";
 import Confirm from "@pages/confirm/Confirm";
 
@@ -15,6 +16,7 @@ const Router: React.FC = () => {
         <Route path="/create" element={<Create />} />
         <Route path="/test/:page" element={<Test />} />
         <Route path="/invite" element={<Invite />} />
+        <Route path="/personal" element={<Personal />} />
         <Route path="/result" element={<Result />} />
         <Route path="/confirm" element={<Confirm />} />
       </Routes>

diff --git a/src/components/common/button/Button.tsx b/src/components/common/button/Button.tsx
@@ -11,7 +11,7 @@ interface ButtonProps {
 }
 
 const Btn = styled.button<ButtonProps>`
-  width: ${({ $width }) => ($width ? $width : "350px")};
+  width: 100%;
   height: 60px;
   display: flex;
   justify-content: center;

diff --git a/src/components/common/dropdown/Dropdown.tsx b/src/components/common/dropdown/Dropdown.tsx
@@ -0,0 +1,97 @@
+import React from "react";
+import styled from "styled-components";
+
+interface Option {
+  value: string;
+  label: string;
+}
+
+interface DropdownProps {
+  label: string;
+  essential: boolean;
+  options: Option[];
+  selectedOption: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+}
+
+const Dropdown: React.FC<DropdownProps> = ({
+  label,
+  essential,
+  options,
+  selectedOption,
+  onChange,
+  placeholder,
+}) => {
+  const handleSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    onChange(event.target.value);
+  };
+
+  return (
+    <Container>
+      <TitleWrapper>
+        <InputTitle>{label}</InputTitle>
+        {essential && <EssentialIcon>*</EssentialIcon>}
+      </TitleWrapper>
+      <SelectBox value={selectedOption} onChange={handleSelectChange}>
+        <option value="">{placeholder || "Select an option"}</option>
+        {options.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </SelectBox>
+    </Container>
+  );
+};
+
+export default Dropdown;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+
+const TitleWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+`;
+
+const SelectBox = styled.select`
+  width: 100%;
+  height: 40px;
+  border-radius: 8px;
+  border: 1px solid #ced4da;
+  background: #fff;
+  padding: 10px;
+  color: #343a40;
+  outline: none;
+  color: #495057;
+  font-family: Pretendard;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 12px; /* 100% */
+  letter-spacing: -0.1px;
+`;
+
+const InputTitle = styled.label`
+  color: #343a40;
+
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 22px;
+  letter-spacing: -0.1px;
+`;
+
+const EssentialIcon = styled.span`
+  color: #f5535e;
+
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: -0.1px;
+`;
diff --git a/src/components/common/input/Input.tsx b/src/components/common/input/Input.tsx
@@ -3,17 +3,19 @@ import React from "react";
 import * as S from "./style";
 
 interface InputProps {
-  width?: string;
   label: string;
   essential: boolean;
   hint: string;
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
 const Input: React.FC<InputProps> = ({
-  width = "340px",
   label,
   essential = true,
   hint,
+  value,
+  onChange,
 }) => {
   return (
     <S.InputContainer>
@@ -22,8 +24,8 @@ const Input: React.FC<InputProps> = ({
         {essential && <S.EssentialIcon>*</S.EssentialIcon>}
       </S.InputTitleWrapper>
       {hint && <S.InputHint>{hint}</S.InputHint>}
-      <S.InputWrap width={width}>
-        <S.TextInput type="text" />
+      <S.InputWrap>
+        <S.TextInput type="text" value={value} onChange={onChange} />
       </S.InputWrap>
     </S.InputContainer>
   );

diff --git a/src/components/common/input/style.ts b/src/components/common/input/style.ts
@@ -7,6 +7,7 @@ interface InputWrapProps {
 export const InputContainer = styled.div`
   display: flex;
   flex-direction: column;
+  gap: 10px;
 `;
 
 export const InputTitleWrapper = styled.div`
@@ -46,27 +47,19 @@ export const InputHint = styled.p`
 `;
 
 export const InputWrap = styled.div<InputWrapProps>`
-  width: ${({ width }) => width || "340px"};
+  width: 100%;
   height: 40px;
   border-radius: 8px;
   border: 1px solid #ced4da;
   background: #fff;
-
-  @media (max-width: 360px) {
-    width: 280px;
-  }
 `;
 
 export const DateInputWrap = styled.div`
-  width: 102px;
+  width: 100%;
   height: 40px;
   border-radius: 8px;
   border: 1px solid #ced4da;
   background: #fff;
-
-  @media (max-width: 360px) {
-    width: 82px;
-  }
 `;
 
 export const TextInput = styled.input`

diff --git a/src/components/common/radio/Radio.tsx b/src/components/common/radio/Radio.tsx
@@ -0,0 +1,124 @@
+import React from "react";
+import styled, { css } from "styled-components";
+
+interface Option {
+  value: string;
+  label: string;
+}
+
+interface RadioGroupProps {
+  label: string;
+  options: Option[];
+  selectedOption: string;
+  onChange: (value: string) => void;
+}
+
+interface LabelProps {
+  isSelected: boolean;
+}
+
+const RadioGroup: React.FC<RadioGroupProps> = ({
+  label,
+  options,
+  selectedOption,
+  onChange,
+}) => {
+  return (
+    <Container>
+      <TitleWrapper>
+        <InputTitle>{label}</InputTitle>
+        <EssentialIcon>*</EssentialIcon>
+      </TitleWrapper>
+      <RadioGroupContainer>
+        {options.map((option) => (
+          <Label
+            key={option.value}
+            isSelected={selectedOption === option.value}
+          >
+            <RadioInput
+              type="radio"
+              name="radioGroup"
+              value={option.value}
+              checked={selectedOption === option.value}
+              onChange={() => onChange(option.value)}
+            />
+            {option.label}
+          </Label>
+        ))}
+      </RadioGroupContainer>
+    </Container>
+  );
+};
+
+export default RadioGroup;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+
+const RadioGroupContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  gap: 30px;
+`;
+
+const Label = styled.label<LabelProps>`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  color: #495057;
+  font-family: Pretendard;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 12px; /* 100% */
+  letter-spacing: -0.1px;
+  width: 100%;
+  height: 40px;
+  border-radius: 8px;
+  border: 1px solid #ced4da;
+  background: #fff;
+
+  ${({ isSelected }) =>
+    isSelected &&
+    css`
+      background: #bfd8af;
+      border-color: #868e96;
+      color: #495057;
+      font-weight: 600;
+    `}
+`;
+
+const RadioInput = styled.input`
+  margin-right: 8px;
+  accent-color: #6c757d;
+  cursor: pointer;
+  opacity: 0;
+`;
+
+const TitleWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+`;
+
+const InputTitle = styled.label`
+  color: #343a40;
+
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 22px;
+  letter-spacing: -0.1px;
+`;
+
+export const EssentialIcon = styled.span`
+  color: #f5535e;
+
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: -0.1px;
+`;
diff --git a/src/components/common/textarea/Textarea.tsx b/src/components/common/textarea/Textarea.tsx
@@ -0,0 +1,45 @@
+// Textarea.tsx
+import React from "react";
+import styled from "styled-components";
+
+interface TextareaProps {
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+}
+
+const Textarea: React.FC<TextareaProps> = ({ value, onChange }) => {
+  return (
+    <Container>
+      <Title>개발 언어 / 스택</Title>
+      <TextArea value={value} onChange={onChange} />
+    </Container>
+  );
+};
+
+export default Textarea;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+
+const Title = styled.label`
+  color: #343a40;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 22px;
+  letter-spacing: -0.1px;
+`;
+
+const TextArea = styled.textarea`
+  width: 100%;
+  height: 120px;
+  border-radius: 8px;
+  border: 1px solid #ced4da;
+  background: #fff;
+  padding: 10px;
+  resize: none;
+  outline: none;
+`;