pagers-org · InSeong-So · Aug 26, 2022 · Aug 22, 2022 · Aug 26, 2022 · Aug 26, 2022
diff --git a/3week/assignment/01.ts b/3week/assignment/01.ts
@@ -0,0 +1,8 @@
+/**
+ * 문제1
+ * 다음의 파파고 번역 api 명세를 확인하고
+ * 파라미터에 필요한 source 와 target 을 좁혀주세요.
+ * @description: 링크: https://developers.naver.com/docs/papago/papago-nmt-api-reference.md
+ * */
+type PapagoParamsSource = string;
+type PapagoParamsTarget = string;
diff --git a/3week/assignment/02.ts b/3week/assignment/02.ts
@@ -0,0 +1,10 @@
+/**
+ * 문제2
+ * 위의  PapagoParamsSource와 PapagoParamsTarget 를 조합하여 명세에서 언급하는
+ * "번역할 수 있는 원본 언어와 목적 언어는 다음과 같습니다." 의 제약조건을 참고하여 PapagoParams 인터페이스를 개선해 주세요.
+ * */
+interface PapagoParams {
+  source: PapagoParamsSource;
+  target: PapagoParamsTarget;
+  text: string;
+}
diff --git a/3week/assignment/03.ts b/3week/assignment/03.ts
@@ -0,0 +1,33 @@
+/**
+ * 문제3
+ * 스탑워치 구현을 보고 ui 상태 interface 설계를 개선해주세요.
+ * https://online-stopwatch.ko.downloadastro.com/tools/
+ * */
+
+// 예시 인터페이스이고, 본인이 생각하는 더 나은 인터페이스로 바꾸셔도 됩니다.
+interface ButtonStyle {
+  color: string;
+}
+
+interface StopWatchState {
+  state: 'ready' | 'running' | 'stopped';
+  startButton?: {
+    icon: 'startButton';
+    style: ButtonStyle;
+  };
+  pauseButton?: {
+    icon: 'pauseButton';
+    style: ButtonStyle;
+  };
+  resetButton?: {
+    icon: 'resetButton';
+    style: ButtonStyle;
+  };
+  addLapButton?: {
+    icon: 'addLapButton';
+    style: ButtonStyle;
+  };
+  lappedTimeList?: string[];
+  timeFormStart: string;
+  timeFormLastLap: string;
+}
diff --git a/3week/assignment/04.ts b/3week/assignment/04.ts
@@ -0,0 +1,46 @@
+/**
+ * 문제4
+ * 요구사항: naver나 kakao 로그인(Oauth2.0)하기 기능 이용해
+ * 유저의 이름, 닉네임, 프로필 사진을 얻어와 출력하려고 합니다.
+ *
+ * 카카오  사용자 정보 가져오기 api 명세세
+ * https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api#req-user-info
+ * 카카오 profile 객체 스키마
+ * https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api#profile
+ *
+ * 네이버 프로필 API 호출하기 명세
+ * https://developers.naver.com/docs/login/devguide/devguide.md#3-4-5-%EC%A0%91%EA%B7%BC-%ED%86%A0%ED%81%B0%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%98%EC%97%AC-%ED%94%84%EB%A1%9C%ED%95%84-api-%ED%98%B8%EC%B6%9C%ED%95%98%EA%B8%B0
+ *
+ * 위의 명세를 참고하여 다음과 같은 타입을 정의했습니다.
+ * */
+
+interface KakaoUserProfile {
+  nickname: string;
+  profile_image_url: string;
+}
+
+interface KakaoUser {
+  name: string;
+  profile: KakaoUserProfile;
+}
+
+interface NaverUser {
+  nickname: string;
+  name: string;
+  profile_image: string;
+}
+
+declare function getUser(userId: string): NaverUser | KakaoUser;
+
+// 다음 오류를 해결하기위해 할 수 있는 모든 대안을 적용해주세요.
+function renderUserProfile(userId: string) {
+  const app = document.querySelector('#app')!;
+  const user = getUser(userId);
+  app.innerHTML = `
+   <div>
+       <span>이름: ${user.name}</span>
+       <span>닉네임: ${user?.profile?.nickname || user.nickname}</span>
+       <img src="${user?.profile?.profile_image_url || user.profile_image}"></img>
+    </div>
+    `;
+}
diff --git a/3week/assignment/05.ts b/3week/assignment/05.ts
@@ -0,0 +1,35 @@
+/**
+ * 문제5
+ * 회원가입 form을 만들어야합니다.
+ * 아이디, 비밀번호, 비밀번호 확인 text input
+ * 추가 정보입력 checkbox
+ * (추가정보입력을 체크하면)
+ * 주소, 전화번호 text input 을 구현하려고 합니다.
+ * 타입을 좀 더 좁게 관리할 수 있도록 개선해주세요.
+ * */
+
+interface SignUpData {
+  id: string;
+  password: string;
+  confirmPassword: string;
+  additionalInputAgreement: boolean;
+  address?: string;
+  phone?: string;
+}
+
+declare function postSignUpToV1(signupForm: { id: string; password: string; confirmPassword: string }): void;
+declare function postSignUpToV2(signupForm: {
+  id: string;
+  password: string;
+  confirmPassword: string;
+  address: string;
+  phone: string;
+}): void;
+
+const sendSignup = (formData: SignUpData) => {
+  if (formData.additionalInputAgreement) {
+    postSignUpToV2(formData);
+  } else {
+    postSignUpToV1(formData);
+  }
+};
diff --git a/3week/react_example/.gitignore b/3week/react_example/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/3week/react_example/index.html b/3week/react_example/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>