sopt-makers · lydiacho · Oct 30, 2024 · Oct 22, 2024 · Oct 22, 2024 · Oct 22, 2024
diff --git a/.pnp.cjs b/.pnp.cjs
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/src/components/org/OrgAdmin/AboutSection/CoreValue/index.tsx b/src/components/org/OrgAdmin/AboutSection/CoreValue/index.tsx
@@ -0,0 +1,71 @@
+import {
+  StDescription,
+  StInput,
+  StInputLabel,
+  StTitle,
+  StWrapper,
+} from '../style';
+import {
+  StDummyImageInput,
+  StInputBox,
+  StInputWrapper,
+  StValueWrapper,
+} from './style';
+
+const CoreValue = () => {
+  return (
+    <StWrapper>
+      <StTitle>핵심 가치</StTitle>
+      <StValueWrapper>
+        <StInputLabel>핵심 가치1</StInputLabel>
+        <StDescription>이미지는 380x323으로 올려주세요.</StDescription>
+        <StInputWrapper>
+          <StDummyImageInput />
+          <StInputBox>
+            <StInput value={'용기'} labelText="가치" placeholder="ex. 용기" />
+            <StInput
+              value={'어쩌구저쩌구'}
+              labelText="가치 설명"
+              descriptionText="호버 시, 보이는 문구예요."
+              placeholder="ex. 새로운 도전을 위해 과감히 용기내는 사람"
+            />
+          </StInputBox>
+        </StInputWrapper>
+      </StValueWrapper>
+      <StValueWrapper>
+        <StInputLabel>핵심 가치2</StInputLabel>
+        <StDescription>이미지는 380x323으로 올려주세요.</StDescription>
+        <StInputWrapper>
+          <StDummyImageInput />
+          <StInputBox>
+            <StInput value={'모립'} labelText="가치" placeholder="ex. 몰입" />
+            <StInput
+              value={'어쩌구저쩌구'}
+              labelText="가치 설명"
+              descriptionText="호버 시, 보이는 문구예요."
+              placeholder="ex. 포기하지 않고 깊이 몰입하는 사람"
+            />
+          </StInputBox>
+        </StInputWrapper>
+      </StValueWrapper>
+      <StValueWrapper>
+        <StInputLabel>핵심 가치3</StInputLabel>
+        <StDescription>이미지는 380x323으로 올려주세요.</StDescription>
+        <StInputWrapper>
+          <StDummyImageInput />
+          <StInputBox>
+            <StInput value={'화합'} labelText="가치" placeholder="ex. 화합" />
+            <StInput
+              value={'어쩌구저쩌구'}
+              labelText="가치 설명"
+              descriptionText="호버 시, 보이는 문구예요."
+              placeholder="ex. 서로를 배려하며 함께 화합하는 사람"
+            />
+          </StInputBox>
+        </StInputWrapper>
+      </StValueWrapper>
+    </StWrapper>
+  );
+};
+
+export default CoreValue;
diff --git a/src/components/org/OrgAdmin/AboutSection/CoreValue/style.ts b/src/components/org/OrgAdmin/AboutSection/CoreValue/style.ts
@@ -0,0 +1,26 @@
+import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
+
+export const StValueWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const StInputWrapper = styled.div`
+  display: flex;
+  gap: 20px;
+`;
+
+// TODO : 나중에 지워라
+export const StDummyImageInput = styled.div`
+  width: 224px;
+  height: 190px;
+  background-color: ${colors.gray800};
+  border-radius: 10px;
+`;
+
+export const StInputBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`;
diff --git a/src/components/org/OrgAdmin/AboutSection/Curriculum/index.tsx b/src/components/org/OrgAdmin/AboutSection/Curriculum/index.tsx
@@ -0,0 +1,44 @@
+import { Chip } from '@sopt-makers/ui';
+
+import { PART_LIST } from '@/utils/org';
+
+import { StInput, StTitle, StWrapper } from '../style';
+import {
+  StChipWrapper,
+  StContentWrapper,
+  StItem,
+  StList,
+  StWeek,
+} from './style';
+
+const Curriculum = () => {
+  const CURRICULUM = ['', '2주차', '3주차', '4주차', '', '', '', ''];
+
+  return (
+    <StWrapper>
+      <StTitle>파트별 커리큘럼</StTitle>
+      <StContentWrapper>
+        <StChipWrapper>
+          {PART_LIST.map((part) => (
+            <Chip key={part}>{part}</Chip>
+          ))}
+        </StChipWrapper>
+        <StList>
+          {CURRICULUM.map((curr, idx) => (
+            <StItem key={curr}>
+              <StWeek htmlFor={`week${idx + 1}`}>0{idx + 1}</StWeek>
+              <StInput
+                id={`week${idx}`}
+                value={curr}
+                style={{ width: '553px' }}
+                placeholder={`${idx + 1}주차 커리큘럼을 작성해주세요.`}
+              />
+            </StItem>
+          ))}
+        </StList>
+      </StContentWrapper>
+    </StWrapper>
+  );
+};
+
+export default Curriculum;
diff --git a/src/components/org/OrgAdmin/AboutSection/Curriculum/style.ts b/src/components/org/OrgAdmin/AboutSection/Curriculum/style.ts
@@ -0,0 +1,29 @@
+import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
+import { fontsObject } from '@sopt-makers/fonts';
+
+export const StContentWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+`;
+export const StChipWrapper = styled.div`
+  display: flex;
+  gap: 6px;
+`;
+export const StList = styled.ol`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 8px;
+`;
+export const StItem = styled.li`
+  display: flex;
+  gap: 10px;
+`;
+export const StWeek = styled.label`
+  color: ${colors.gray300};
+  ${fontsObject.BODY_1_18_M}
+  line-height: 48px;
+  width: 24px;
+`;
diff --git a/src/components/org/OrgAdmin/AboutSection/Executives/index.tsx b/src/components/org/OrgAdmin/AboutSection/Executives/index.tsx
@@ -0,0 +1,83 @@
+import { Chip } from '@sopt-makers/ui';
+
+import { PART_LIST, 임원진_LIST } from '@/utils/org';
+
+import IcBehanceLogo from '../assets/IcBehanceLogo';
+import IcGithubLogo from '../assets/IcGithubLogo';
+import IcLinkedinLogo from '../assets/IcLinkedinLogo';
+import IcMailLogo from '../assets/IcMailLogo';
+import {
+  StDescription,
+  StInput,
+  StInputLabel,
+  StTitle,
+  StWrapper,
+} from '../style';
+import {
+  StChipLabel,
+  StChipLine,
+  StChipWrapper,
+  StDummyImageInput,
+  StPhotoWrapper,
+  StSNSBox,
+  StSNSWrapper,
+} from './style';
+
+const Executives = () => {
+  return (
+    <StWrapper>
+      <StTitle>임원진</StTitle>
+      <StChipWrapper>
+        <StChipLine>
+          <StChipLabel>임원진</StChipLabel>
+          {임원진_LIST.map((role) => (
+            <Chip key={role}>{role}</Chip>
+          ))}
+        </StChipLine>
+        <StChipLine>
+          <StChipLabel>파트장</StChipLabel>
+          {PART_LIST.map((part) => (
+            <Chip key={part}>{`${part} 파트장`}</Chip>
+          ))}
+        </StChipLine>
+      </StChipWrapper>
+      <StPhotoWrapper>
+        <StInputLabel>프로필 사진</StInputLabel>
+        <StDescription>사진은 1:1 비율로 올려주세요.</StDescription>
+        <StDummyImageInput />
+      </StPhotoWrapper>
+      <StInput labelText="이름" placeholder="ex. 김솝트" value={''} />
+      <StInput
+        labelText="소속"
+        placeholder="ex. 솝트대학교 / 솝트컴퍼니 / 앱잼 프로덕트명"
+        value={''}
+      />
+      <StInput
+        labelText="한 줄 소개"
+        placeholder="ex. 새로운 도전을 위해 과감히 용기내는 사람"
+        value={''}
+      />
+      <StSNSWrapper>
+        <span>SNS</span>
+        <StSNSBox>
+          <IcMailLogo />
+          <StInput placeholder="ex. 000@sopt.org" value={''} />
+        </StSNSBox>
+        <StSNSBox>
+          <IcLinkedinLogo />
+          <StInput placeholder="ex. https://www.linkedin.com/..." value={''} />
+        </StSNSBox>
+        <StSNSBox>
+          <IcGithubLogo />
+          <StInput placeholder="ex. https://github.com/..." value={''} />
+        </StSNSBox>
+        <StSNSBox>
+          <IcBehanceLogo />
+          <StInput placeholder="ex. https://www.behance.net/..." value={''} />
+        </StSNSBox>
+      </StSNSWrapper>
+    </StWrapper>
+  );
+};
+
+export default Executives;
diff --git a/src/components/org/OrgAdmin/AboutSection/Executives/style.ts b/src/components/org/OrgAdmin/AboutSection/Executives/style.ts
@@ -0,0 +1,48 @@
+import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
+import { fontsObject } from '@sopt-makers/fonts';
+
+export const StChipWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  margin-bottom: 10px;
+`;
+export const StChipLine = styled.div`
+  display: flex;
+  gap: 6px;
+`;
+export const StChipLabel = styled.span`
+  margin: 9px 14px 9px 0;
+  color: ${colors.gray300};
+  ${fontsObject.LABEL_3_14_SB}
+`;
+
+export const StPhotoWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+// TODO : 나중에 지워라
+export const StDummyImageInput = styled.div`
+  width: 168px;
+  height: 168px;
+  background-color: ${colors.gray800};
+  border-radius: 100px;
+`;
+
+export const StSNSWrapper = styled.ul`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
+  & > span {
+    color: ${colors.white};
+    ${fontsObject.LABEL_3_14_SB};
+  }
+`;
+
+export const StSNSBox = styled.li`
+  display: flex;
+  gap: 12px;
+  align-items: center;
+`;
diff --git a/src/components/org/OrgAdmin/AboutSection/HeaderBanner/index.tsx b/src/components/org/OrgAdmin/AboutSection/HeaderBanner/index.tsx
@@ -0,0 +1,20 @@
+import { StDescription, StInputLabel, StTitle, StWrapper } from '../style';
+import { StContentWrapper, StDummyImageInput } from './style';
+
+const HeaderBanner = () => {
+  return (
+    <StWrapper>
+      <StTitle>헤더</StTitle>
+      <StContentWrapper>
+        <StInputLabel>이미지</StInputLabel>
+        <StDescription>
+          이미지는 1920*630 크기로 올려주세요. ‘소개’탭 가장 상단에 보여지는
+          이미지예요.
+        </StDescription>
+        <StDummyImageInput />
+      </StContentWrapper>
+    </StWrapper>
+  );
+};
+
+export default HeaderBanner;
diff --git a/src/components/org/OrgAdmin/AboutSection/HeaderBanner/style.ts b/src/components/org/OrgAdmin/AboutSection/HeaderBanner/style.ts
@@ -0,0 +1,15 @@
+import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
+
+export const StContentWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+// TODO : 나중에 지워라
+export const StDummyImageInput = styled.div`
+  width: 582px;
+  height: 191px;
+  background-color: ${colors.gray800};
+  border-radius: 10px;
+`;
diff --git a/src/components/org/OrgAdmin/AboutSection/assets/IcBehanceLogo.tsx b/src/components/org/OrgAdmin/AboutSection/assets/IcBehanceLogo.tsx
@@ -0,0 +1,35 @@
+const IcBehanceLogo = () => {
+  return (
+    <svg
+      width="26"
+      height="26"
+      viewBox="-5 -7 26 26"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <g id="behance_logo" clip-path="url(#clip0_492_2432)">
+        <path
+          id="Vector"
+          d="M0.00347137 0.000584354C0.0569186 0.000584354 0.0964587 0.000584354 0.135726 0.000584354C1.88122 0.000584354 3.6267 0.000584354 5.37219 0.000584354C5.83522 0.000584354 6.29252 0.0543449 6.74028 0.184071C7.00588 0.260914 7.26085 0.367266 7.50027 0.513647C8.13863 0.903703 8.54467 1.48338 8.72628 2.24392C8.82391 2.65238 8.84272 3.06757 8.80536 3.48684C8.783 3.7384 8.73664 3.98354 8.65538 4.22079C8.5144 4.63159 8.2848 4.97285 7.95321 5.22997C7.82804 5.32697 7.69306 5.40995 7.56244 5.49877C7.53599 5.51659 7.50845 5.53266 7.48172 5.54961C7.48718 5.58701 7.51636 5.58496 7.53435 5.59402C7.62761 5.64165 7.72415 5.68167 7.81577 5.73222C8.42769 6.0691 8.82881 6.5959 9.03579 7.29566C9.12905 7.61063 9.1705 7.93465 9.17868 8.26393C9.18877 8.67123 9.1525 9.07356 9.03606 9.46244C8.76555 10.3644 8.26135 11.0662 7.476 11.5205C7.17631 11.6941 6.85317 11.7978 6.5194 11.8638C6.04901 11.9568 5.5748 12.0003 5.0965 12C3.44646 11.9985 1.79641 11.9994 0.146361 11.9994C0.103003 11.9994 0.0599182 11.9977 0.0127428 11.9968C0.00783441 11.9649 0.00238061 11.9407 0.00101716 11.9161C-0.000891668 11.8823 0.000471782 11.8481 0.000471782 11.8139C0.000471782 7.93699 0.000471782 4.06009 0.000471782 0.183487C0.000471782 0.12885 0.00210792 0.0739208 0.00347137 0V0.000584354ZM2.59021 9.91532C2.64529 9.91736 2.68838 9.92029 2.73119 9.92029C3.46282 9.92029 4.19417 9.92029 4.9258 9.92029C4.98552 9.92029 5.04524 9.92028 5.10468 9.91736C5.3392 9.90538 5.57289 9.88522 5.80059 9.81948C6.27453 9.68274 6.59794 9.37245 6.73919 8.86348C6.83245 8.52777 6.84908 8.18329 6.788 7.83911C6.71683 7.43766 6.50986 7.13993 6.16736 6.95352C6.04247 6.88544 5.91157 6.83782 5.7755 6.80451C5.51836 6.74198 5.25712 6.72124 4.99425 6.72124C4.2348 6.72124 3.47563 6.72124 2.71619 6.72124C2.69629 6.72124 2.67611 6.71949 2.65675 6.72212C2.63439 6.72504 2.61257 6.73234 2.59021 6.7376V9.91502V9.91532ZM2.59566 4.72772C2.64311 4.72947 2.68592 4.73239 2.72874 4.73239C3.44073 4.73239 4.15245 4.7321 4.86444 4.73298C5.02779 4.73298 5.19031 4.72947 5.35256 4.70756C5.60698 4.67308 5.85104 4.60325 6.07846 4.47235C6.30807 4.34058 6.45941 4.14073 6.53058 3.87368C6.61212 3.56836 6.61839 3.25894 6.54367 2.95186C6.45423 2.58431 6.23444 2.3453 5.89276 2.23895C5.64352 2.16123 5.38828 2.11887 5.12977 2.10251C4.91953 2.08936 4.70847 2.08468 4.49795 2.08351C3.9572 2.08088 3.41619 2.08264 2.87544 2.08264C2.80373 2.08264 2.73228 2.08176 2.66084 2.08351C2.63875 2.0841 2.61666 2.09257 2.59675 2.09725C2.58339 2.20535 2.57521 4.36483 2.58666 4.65964C2.58748 4.6798 2.59185 4.69996 2.59566 4.72801V4.72772Z"
+          fill="white"
+        />
+        <path
+          id="Vector_2"
+          d="M17.9873 7.95852C17.8458 7.96436 17.707 7.96056 17.5684 7.96115C17.4294 7.96173 17.29 7.96115 17.151 7.96115H13.0112C12.8722 7.96115 12.7328 7.96115 12.5938 7.96115C12.4552 7.96115 12.3167 7.96027 12.1708 7.96202C12.1673 7.99475 12.1613 8.01871 12.1624 8.04237C12.1787 8.36815 12.2338 8.68516 12.3565 8.98523C12.549 9.45563 12.879 9.77323 13.3243 9.9497C13.7723 10.1271 14.2329 10.1481 14.697 10.0312C15.099 9.92983 15.4104 9.68762 15.6351 9.31714C15.6738 9.25315 15.7106 9.18771 15.7463 9.12664C15.8682 9.10823 17.0948 9.10151 17.7907 9.11495C17.818 9.11554 17.845 9.12021 17.8779 9.12343C17.8779 9.14826 17.8804 9.16901 17.8777 9.18858C17.834 9.4831 17.7337 9.7557 17.5864 10.0067C17.1294 10.7862 16.511 11.3554 15.6921 11.6595C15.3526 11.7855 15.003 11.8597 14.6452 11.8965C14.3474 11.9272 14.0491 11.9336 13.7516 11.912C13.0039 11.8579 12.3104 11.6201 11.6789 11.1836C11.4681 11.0378 11.2658 10.8797 11.0847 10.6927C10.7496 10.3465 10.512 9.93217 10.3484 9.46732C10.2287 9.12722 10.1518 8.77544 10.106 8.41548C10.0556 8.01783 10.0346 7.61842 10.046 7.21726C10.0602 6.72641 10.1098 6.24022 10.2295 5.76456C10.3569 5.25793 10.5508 4.78401 10.8494 4.36532C11.3467 3.66848 11.9941 3.20597 12.7819 2.97018C13.2452 2.8314 13.7189 2.78728 14.1988 2.80422C14.5656 2.81708 14.9272 2.86792 15.2825 2.96813C15.965 3.16068 16.5554 3.51597 17.0184 4.09565C17.2682 4.40827 17.4738 4.75129 17.6273 5.12908C17.7888 5.52614 17.8929 5.93987 17.9415 6.36966C17.9979 6.86987 18.0026 7.37241 17.999 7.87554C17.999 7.90008 17.9922 7.92462 17.987 7.95793L17.9873 7.95852ZM15.8148 6.46345C15.8175 6.32174 15.7921 6.19201 15.7651 6.06375C15.6244 5.40109 15.2473 4.9675 14.6482 4.75392C14.3646 4.65283 14.0717 4.63763 13.7764 4.66597C13.6057 4.68234 13.4391 4.7212 13.2785 4.78752C12.9502 4.92309 12.7069 5.16531 12.5242 5.48232C12.3762 5.73914 12.2875 6.01992 12.2341 6.31473C12.2254 6.36352 12.2202 6.4129 12.2134 6.46228C12.2327 6.46841 12.2439 6.47543 12.2548 6.47543C13.4271 6.47601 14.5994 6.47601 15.7717 6.47543C15.7829 6.47543 15.7938 6.46929 15.8148 6.46316V6.46345Z"
+          fill="white"
+        />
+        <path
+          id="Vector_3"
+          d="M11.7605 1.68848C11.755 1.67007 11.7485 1.65868 11.7485 1.64699C11.7477 1.28498 11.7474 0.922685 11.7477 0.560678C11.7477 0.544316 11.7534 0.527662 11.7572 0.506625C11.7809 0.502535 11.8036 0.496984 11.8265 0.49523C11.8543 0.493185 11.8821 0.494646 11.9099 0.494646C13.3055 0.494646 14.7009 0.494646 16.0965 0.494646C16.1437 0.494646 16.1909 0.496107 16.2432 0.496984C16.2484 0.532629 16.2552 0.56097 16.256 0.589604C16.2697 1.07462 16.262 1.59002 16.2408 1.68468C16.1235 1.70251 12.4572 1.71127 11.8289 1.69491C11.8057 1.69432 11.7828 1.69053 11.7605 1.68848Z"
+          fill="white"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_492_2432">
+          <rect width="18" height="12" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default IcBehanceLogo;