Merge pull request #102 from YAPP-Github/dev

Release 0.1.0

.github/workflows/release-tag.yml

@@ -0,0 +1,20 @@
+name: Release Tag
+on:
+  push:
+    branches:
+      - main
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - name: 버전 정보 추출
+      run: echo "##[set-output name=version;]$(echo '${{ github.event.head_commit.message }}' | egrep -o '[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}')"
+      id: extract_version_name       
+    - name: Release 생성 
+      uses: actions/create-release@v1
+      env: 
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      with: 
+        tag_name: ${{ steps.extract_version_name.outputs.version }} 
+        release_name: ${{ steps.extract_version_name.outputs.version }} 

src/assets/img/index.ts

@@ -5,3 +5,8 @@ export { default as SearchIcon } from './SearchIcon.png';
 export { default as DeleteIcon } from './DeleteIcon.png';
 export { default as KakaoIcon } from './KakaoIcon.png';
 export { default as InstagramIcon } from './InstagramIcon.png';
+export { default as MatchingFail } from './MatchingFail.png';
+export { default as MatchingSuccess } from './MatchingSuccess.png';
+export { default as Waiting } from './Waiting.png';
+export { default as Complete } from './Complete.png';
+export { default as CopyIcon } from './CopyIcon.png';

src/atoms/meetingState.ts

@@ -13,7 +13,7 @@ const INITIAL_MEETING_STATE: Meeting = {
   averageAge: 28,
   ourUniversities: [],
   ourDepartments: ['LIBERAL', 'SCIENCE'],
-  averageHeight: [140, 180],
+  averageHeight: 170,
   avoidUniversities: [],
   preferUniversities: [],
   preferAge: [20, 25],
@@ -30,7 +30,7 @@ const INITIAL_MEETING_STATE: Meeting = {
 };
 
 const meetingState = atom<Meeting>({
-  key: 'meeting/meetingState',
+  key: 'meetingState',
   default: INITIAL_MEETING_STATE,
   effects_UNSTABLE: [persistAtom],
 });

src/components/base/MultiRangeSlider.tsx

@@ -1,18 +1,18 @@
 import styled from 'styled-components';
 import { ChangeEvent, useCallback, useEffect, useRef, useState } from 'react';
 
-export interface Ranges {
+export interface MultiRangeSliderProps {
+  initValue: number[];
   min: number;
   max: number;
+  onChange?: (rangeValues: OnChangeProps) => void;
 }
 
-interface MultiRangeSliderProps extends Ranges {
-  onChange?: (rangeValues: Ranges) => void;
-}
+export type OnChangeProps = Omit<MultiRangeSliderProps, 'initValue' | 'onChange'>;
 
-const MultiRangeSlider = ({ min, max, onChange }: MultiRangeSliderProps) => {
-  const [minVal, setMinVal] = useState(min);
-  const [maxVal, setMaxVal] = useState(max);
+const MultiRangeSlider = ({ initValue, min, max, onChange }: MultiRangeSliderProps) => {
+  const [minVal, setMinVal] = useState(initValue[0]);
+  const [maxVal, setMaxVal] = useState(initValue[1]);
   const minValRef = useRef<HTMLInputElement>(null);
   const maxValRef = useRef<HTMLInputElement>(null);
   const range = useRef<HTMLDivElement>(null);

src/components/base/SimpleRangeSlider.tsx

@@ -1,18 +1,18 @@
 import styled from 'styled-components';
 import { ChangeEvent, useCallback, useEffect, useRef, useState } from 'react';
 
-export interface Ranges {
+interface SimpleRangeSliderProps {
   min: number;
   max: number;
+  initValue: number;
   isStep5?: boolean;
+  onChange?: (rangeValues: OnChangeProps) => void;
 }
 
-interface SimpleRangeSliderProps extends Ranges {
-  onChange?: (rangeValues: Ranges) => void;
-}
+export type OnChangeProps = Omit<SimpleRangeSliderProps, 'initValue' | 'onChange'>;
 
-const SimpleRangeSlider = ({ min, max, isStep5 = false, onChange }: SimpleRangeSliderProps) => {
-  const [maxVal, setMaxVal] = useState(Math.ceil((min + max) / 2));
+const SimpleRangeSlider = ({ min, max, initValue, isStep5 = false, onChange }: SimpleRangeSliderProps) => {
+  const [maxVal, setMaxVal] = useState(initValue);
   const maxValRef = useRef<HTMLInputElement>(null);
   const range = useRef<HTMLDivElement>(null);
   const sign = useRef<HTMLSpanElement>(null);
@@ -24,12 +24,6 @@ const SimpleRangeSlider = ({ min, max, isStep5 = false, onChange }: SimpleRangeS
     },
     [min, max],
   );
-  const getMidValueWith5Steps = useCallback(
-    (midLevel: 1 | 2) => {
-      return min + Math.floor((max - min) / 3) * midLevel;
-    },
-    [min, max],
-  );
 
   const handleChangeRange = (event: ChangeEvent<HTMLInputElement>) => {
     const value = Number(event.target.value);

src/components/domain/matching/CompleteBox.tsx

@@ -0,0 +1,18 @@
+import { Complete } from '@/assets/img';
+import React from 'react';
+import { MatchingImg, StringEle } from './WaitingBox';
+
+function CompleteBox() {
+  return (
+    <>
+      <MatchingImg src={Complete} alt="매칭 완료 이미지" />
+      <StringEle>
+        <strong>양쪽 결제 확인 후 5월 23일 오후 10시에</strong>
+        <br />
+        카톡 아이디가 전달됩니다.
+      </StringEle>
+    </>
+  );
+}
+
+export default CompleteBox;

src/components/domain/matching/EndBox.tsx

@@ -0,0 +1,155 @@
+import React from 'react';
+import { palette } from '@/lib/styles/palette';
+import { schools } from '@/mock/schools';
+import { Meeting } from '@/types/meeting';
+import styled from 'styled-components';
+import KakaoCopyBox from './KakaoCopyBox';
+import AddCommaFunction from '@/hooks/common/AddCommaFunction';
+
+const TempData: Meeting = {
+  averageHeight: [170, 175],
+  averageAge: 22,
+  ourUniversities: [1, 2, 11],
+  ourDepartments: ['ATHLETIC', 'SCIENCE'],
+  abroadAreas: [1, 2, 3],
+  domesticAreas: [],
+  mindset: 'ALL',
+  play: 'ALL',
+  typeOfMeeting: 'ONE',
+  gender: 'FEMALE',
+  avoidUniversities: [1, 2, 3, 4],
+  preferUniversities: [5, 6, 7, 8],
+  preferAge: [20, 25],
+  preferHeight: [170, 180],
+  preferDepartments: ['ATHLETIC', 'SCIENCE'],
+  isAbroad: false,
+  channel: 'FRIEND',
+  agreement: false,
+  kakaoId: 'asd321',
+};
+function EndBox() {
+  const { kakaoId, averageAge, averageHeight, mindset, ourDepartments, ourUniversities, play } = TempData;
+  const { addComma, addTailComma } = AddCommaFunction();
+  return (
+    <div>
+      <MatchingInfoBox>
+        <FlexLine>
+          <InfoLabel>평균나이</InfoLabel>
+          <InfoText>{averageAge}</InfoText>
+        </FlexLine>
+        <FlexLine>
+          <InfoLabel>평균키</InfoLabel>
+          <InfoText>
+            {averageHeight[0]} ~ {averageHeight[1]}
+          </InfoText>
+        </FlexLine>
+        <FlexLine>
+          <InfoLabel>학교</InfoLabel>
+          <InfoText>
+            {ourUniversities.map((univ, index) => (
+              <p key={univ}>
+                {schools[univ].name}
+                {addTailComma(ourUniversities.length, index)}
+              </p>
+            ))}
+          </InfoText>
+        </FlexLine>
+        <FlexLine>
+          <InfoLabel>학과</InfoLabel>
+          <InfoFlexText>
+            {ourDepartments.map((department, index) => (
+              <p key={`${department}_${index}`}>
+                {addComma(index)}
+                {{ LIBERAL: '문과', SCIENCE: '이과', ATHLETIC: '체육', ART: '예술' }[department]}
+              </p>
+            ))}
+          </InfoFlexText>
+        </FlexLine>
+        <FlexLine>
+          <InfoLabel>지역</InfoLabel>
+          <InfoFlexText>
+            {TempData.abroadAreas &&
+              TempData.abroadAreas.map((area, index) => (
+                <div key={area}>
+                  {addComma(index)}
+                  {area}
+                </div>
+              ))}
+          </InfoFlexText>
+          {TempData.domesticAreas?.map((area, index) => (
+            <InfoFlexText key={`${area}_${index}`}>
+              {addComma(index)}
+              {{ ICN: '인천', SNW: '서북', SNE: '동북', SSW: '서남', SSE: '동서', GN: '경기 북부', GS: '경기 남부' }[area]},
+            </InfoFlexText>
+          ))}
+        </FlexLine>
+        <FlexLine>
+          <InfoLabel>마인드셋</InfoLabel>
+          <InfoText>{{ ALL: '친구랑 노는, 설레는 둘 다', FRIEND: '친구랑 노는 느낌', LOVE: '설레는 느낌' }[mindset]}</InfoText>
+        </FlexLine>
+        <FlexLine>
+          <InfoLabel>술게임</InfoLabel>
+          <InfoText>{{ ALL: '술게임, 얘기하면서 둘 다', GAME: '술게임 할래요!', TALK: '얘기하면서 놀래요.' }[play]}</InfoText>
+        </FlexLine>
+      </MatchingInfoBox>
+      <KakaoCopyBox kakaoId={kakaoId} />
+      <EtcBox>
+        <EtcEle href="https://docs.google.com/forms/d/e/1FAIpQLSeSnI-tB9acPtCepl-FM8cCTF-uezGOJ5SjwFOdQ6DT92xjmQ/viewform" target="_blank">
+          후기작성
+        </EtcEle>
+        |
+        <EtcEle href="https://docs.google.com/forms/d/e/1FAIpQLSfTSBwk6bb0ywTBoHu4cZM1gV8DN0OjMB4jVFvdzbYDrjnJdg/viewform" target="_blank">
+          신고하기
+        </EtcEle>
+      </EtcBox>
+    </div>
+  );
+}
+const MatchingInfoBox = styled.div`
+  width: 100%;
+  padding: 20px 0px 5px 20px;
+  background-color: ${palette.grayLight};
+  border-radius: 4px;
+  font-size: 12px;
+  margin-bottom: 8px;
+`;
+
+const InfoLabel = styled.div`
+  font-weight: 700;
+  padding: 2px 2px 10px 6px;
+  min-width: 60px;
+  text-align: left;
+  line-height: 16px;
+`;
+
+const InfoText = styled.div`
+  font-weight: 400;
+  padding-top: 2px;
+  line-height: 16px;
+  text-align: left;
+  padding: 2px 0 10px 6px;
+`;
+const InfoFlexText = styled(InfoText)`
+  display: flex;
+`;
+
+const FlexLine = styled.div`
+  display: flex;
+  justify-content: left;
+`;
+const EtcBox = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: ${palette.explanationColor};
+`;
+const EtcEle = styled.a`
+  font-size: 12px;
+  display: flex;
+  width: 100%;
+  height: 28px;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+`;
+export default React.memo(EndBox);

src/components/domain/matching/KakaoCopyBox.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import styled from 'styled-components';
+import { CopyIcon } from '@/assets/img';
+import { Modal } from '@/components/base';
+import { useToggle } from '@/hooks/common';
+import { palette } from '@/lib/styles/palette';
+
+interface CopyBoxPorps {
+  kakaoId: string;
+}
+
+function KakaoCopyBox({ kakaoId }: CopyBoxPorps) {
+  const [isModal, onToggleModal] = useToggle();
+  const [isErrorModal, onToggleErrorModal] = useToggle();
+  const handleCopy = async (text: string) => {
+    try {
+      onToggleModal();
+      await navigator.clipboard.writeText(text);
+    } catch (error) {
+      onToggleErrorModal();
+    }
+  };
+  return (
+    <>
+      <KakaoIdBox onClick={() => handleCopy(kakaoId)}>
+        <img src={CopyIcon} alt="복사" />
+        <KakaoLabel>상대 카톡아이디:</KakaoLabel>
+        <b> {kakaoId}</b>
+      </KakaoIdBox>
+      {isModal && (
+        <Modal
+          width={200}
+          height={140}
+          bottonName="확인"
+          title="알림"
+          text="복사완료!"
+          onToggleModal={onToggleModal}
+          onClick={() => {
+            void 0;
+          }}
+        />
+      )}
+      {isErrorModal && (
+        <Modal
+          width={200}
+          height={140}
+          bottonName="확인"
+          title="알림"
+          text="복사중 에러가 발생했습니다😭 다시한번 시도해 주세요!"
+          onToggleModal={onToggleErrorModal}
+          onClick={() => {
+            void 0;
+          }}
+        />
+      )}
+    </>
+  );
+}
+
+const KakaoLabel = styled.p`
+  margin: 0 4px;
+`;
+const MatchingInfoBox = styled.div`
+  width: 100%;
+  padding: 20px 0px 5px 20px;
+  background-color: ${palette.grayLight};
+  border-radius: 4px;
+  font-size: 12px;
+  margin: 8px 0;
+`;
+const KakaoIdBox = styled(MatchingInfoBox)`
+  padding: 15px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+  cursor: pointer;
+`;
+export default React.memo(KakaoCopyBox);