[ Design ] JuniorPromise 시간 선택 부분 퍼블리싱

src/assets/svgs/index.tsx

@@ -1,2 +1,3 @@
 // 명명규칙은 xxxxIc으로 통일
 // export { default as DefaultProfileIc } from './defaultProfileIc.svg?react';
+export { default as ButtonCheckIc } from './ic_check.svg';

src/pages/juniorPromise/JuniorPromisePage.tsx

@@ -1,5 +1,20 @@
+import styled from '@emotion/styled';
+import TimeSelectionButton from './components/TimeSelectionButton';
+import TimeSelectionTitleWrapper from './components/TimeSelectionTitleWrapper';
+
 const JuniorPromisePage = () => {
-  return <div>JuniorPromise</div>;
+  return (
+    <TimeSelectionContainer>
+      <TimeSelectionTitleWrapper />
+      <TimeSelectionButton />
+    </TimeSelectionContainer>
+  );
 };
 
 export default JuniorPromisePage;
+
+const TimeSelectionContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+`;

src/pages/juniorPromise/components/TimeSelectionButton.tsx

@@ -0,0 +1,65 @@
+import styled from '@emotion/styled';
+import { ButtonCheckIc } from '../../../assets/svgs';
+import { TIME_SELECTION_TITLE } from '../constants/constants';
+
+function TimeSelectionButton() {
+  const buttonValue = '7월 8일 13:00 ~ 13:20';
+  // const buttonValue = null;
+
+  return (
+    <Container>
+      {TIME_SELECTION_TITLE.map((item, index) => (
+        <Wrapper key={index} isActive={buttonValue !== null}>
+          <Title2>{buttonValue ? buttonValue : item.title}</Title2>
+          {buttonValue && (
+            <SvgWrapper>
+              <img src={ButtonCheckIc} alt="check complete button" />
+            </SvgWrapper>
+          )}
+        </Wrapper>
+      ))}
+    </Container>
+  );
+}
+
+export default TimeSelectionButton;
+
+const Wrapper = styled.div<{ isActive: boolean }>`
+  display: flex;
+  gap: 1.2rem;
+  align-items: center;
+
+  width: 33.5rem;
+  height: 4.8rem;
+  border: 1px solid ${({ theme, isActive }) => (isActive ? theme.colors.transparentBlue_50 : theme.colors.grayScaleLG2)};
+  border-radius: 8px;
+
+  background-color: ${({ theme, isActive }) => (isActive ? theme.colors.transparentBlue_5 : theme.colors.grayScaleWG)};
+`;
+
+const Title2 = styled.span`
+  position: relative;
+  left: 2rem;
+
+  ${({ theme }) => theme.fonts.Title2_M_16}
+  color: ${({ theme }) => theme.colors.grayScaleDG};
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1.2rem;
+  justify-content: center;
+  align-items: center;
+`;
+
+const SvgWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  left: 14rem;
+
+  width: 2rem;
+  height: 2rem;
+`;

src/pages/juniorPromise/components/TimeSelectionTitleWrapper.tsx

@@ -0,0 +1,35 @@
+import styled from '@emotion/styled';
+
+const TimeSelectionTitleWrapper = () => {
+  return (
+    <Container>
+      <Wrapper>
+        <TimeSelectionTitle>선약 시간을 선택해주세요</TimeSelectionTitle>
+        <TimeSelectionDescription>제안하신 3가지 일정 중 선배가 하나를 선택해요</TimeSelectionDescription>
+      </Wrapper>
+    </Container>
+  );
+};
+
+export default TimeSelectionTitleWrapper;
+
+const TimeSelectionTitle = styled.h3`
+  ${({ theme }) => theme.fonts.Head2_SB_18};
+`;
+const TimeSelectionDescription = styled.span`
+  ${({ theme }) => theme.fonts.Body1_M_14};
+  color: ${({ theme }) => theme.colors.grayScaleMG2};
+`;
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+
+  width: 33.5rem;
+  height: 4.9rem;
+`;
+const Container = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;

src/pages/juniorPromise/constants/constants.ts

@@ -0,0 +1,7 @@
+export const TIME_SELECTION_TITLE = [
+  {
+    title: '첫 번째 일정 선택하기',
+  },
+  { title: '두 번째 일정 선택하기' },
+  { title: '세 번째 일정 선택하기' },
+];